ความรู้เบื้องต้นสำหรับเว็บมาสเตอร์
Topics for training : Introduction to webmaster
Preparation to be webmaster
1. Preparation
- Accept something from someone
- Join Group and make friend [hakin9mag]
- Read news [cs trend & cs ทดลองงาน]
- Have skill
- Check performance 
2. Domain : case godaddy.com
3. Hosting : case hypermart.net 
4. Web design : web2 + responsive + social
5. Web server
- Server-sided Script : php aspx pl py jsp 
- Client-sided Script : html js 
6. JavaScript 
7. CSS
8. AJAX 
9. image : jpg png gif
10. HTML *
11. Review : write webpage by Ms word *
case webpage + webpage,filtered + 
rar:webpage + rar:filtered + gist,filtered
แนะนำบทเรียน
การเตรียมพร้อมเข้าสู่อาชีพใดก็ตาม สิ่งที่มักต้องมองหา คือ บุคคลต้นแบบ กลุ่มอาชีพที่เค้าแชร์กัน ข่าวสารในอาชีพ ทักษะที่จำเป็นต้องมี และเกณฑ์ประเมินที่น่าสนใจ เว็บมาสเตอร์ก็ต้องรู้จักคำว่า domain name ที่เป็นจุดเริ่มต้นของการสื่อสารในบทบาททางอาชีพ แล้วพูดถึงแหล่งทำมาหากินคือ hosting กับ ip address กลับมามองเว็บไซต์ในปัจจุบันพบว่ามีหลากหลายรูปแบบ มี design และเวทีที่แตกต่างกัน แล้วมองไปที่เครื่องบริการเว็บก็พบว่ารองรับภาษาที่ใช้พัฒนาแตกต่างกันไป ภาษาที่ถูกกล่าวถึงกันมากคือ javascript และ css ส่วน AJAX ก็เป็นพระเอกที่เว็บมาสเตอร์ต้องรู้จัก ความรู้เบื้องต้นก่อนลงมือเขียนเว็บเพจ คือ เรื่องภาพ อาจเป็นภาพถ่าย หรือการรีทัสภาพ แล้วต้องรู้จักภาษา HTML ที่เป็นพื้นฐานของการเขียนเว็บเพจ และการนำเสนอภาพ หากจะเริ่มต้นอย่างง่าย แนะนำว่า word เป็นโปรแกรมที่สามารถใช้สร้างเว็บเพจแบบเชื่อมโยงกันได้
whois.sc/thailand.com
intro_webmaster_rsp.docx
Editplus 3.5(164).exe (check virus)
/anuchit/editplus312.zip
Web server
1. Port 80 
case C:\Windows\System32\drivers\etc\hosts 
case ipconfig + permission + xampp + ping + burin.com
2. Appserv
3. Xampp *
4. Thaiabc
- Apache 80 
- MySQL 3128
- PHP 
- PHPMyAdmin
5. Free webhosting 
- case firebase, thainame.net/ntu, somee.com
แนะนำบทเรียน
เครื่องบริการเว็บ ก็จะมีพอร์ทมาตรฐานที่เปิดบริการคือ 80 สามารถใช้คำสั่ง netstat -na ตรวจสอบได้ว่า เครื่องของเราเปิดพอร์ทใดอยู่หรือไม่ โปรแกรมของคนไทยที่นำมาใช้สร้างเครื่องบริการเว็บไว้ใช้เองคือ appserv ช่วยจำลองเครื่องของเราเป็นเครื่องบริการได้โดยง่าย แต่ถ้าเป็นที่นิยมกันมากคือ xampp หลายองค์กรใช้โปรแกรมตัวนี้ให้บริการจริง ส่วน thaiabc เป็นโปรแกรมที่ผมสร้างขึ้นเพื่อการศึกษา จึงนำมาแชร์เป็นกรณีศึกษาได้ว่าจะสร้างโปรแกรมแบบ appserv หรือ xampp นั้นต้องทำอย่างไร ส่วนใครที่ตั้งใจเป็นเว็บมาสเตอร์ ก็ควรรู้จักโปรแกรมใน xampp และลง apache, mysql, php และ phpmyadmin ด้วยตนเอง แล้วทดสอบให้เพื่อนเรียกเว็บเพจที่เขียนขึ้นจากในเครื่องของเราได้
<?php
for($i = 1;$i<=100;$i++) {
echo "<table border=1><tr><td>$i</td></tr></table>";
}
?>
Responsive web design
1. Web 2.0 concept
2. Page Speed
3. Browser with inspector *
4. CSS : case rsp61.css *
- External style sheet 
- Internal style sheet
- Inline style 
5. WordPress template : case thaiall.com/blog

facebookanalytics
แนะนำบทเรียน
นิยาม เว็บ 2.0 คือ รูปแบบของเว็บไซต์รุ่นที่สอง ที่เน้นการนำเข้าเนื้อหาจากผู้เขียนที่หลากหลาย นำไปแสดงในเว็บไซต์ได้มากมาย เกิดเครือข่ายสังคม ด้วยรูปแบบที่ดูง่าย และน่าตื่นตาตื่นใจ การสร้างเว็บไซต์ แบบเว็บ 2.0 ให้ได้ตามนิยามไม่ใช่เรื่องง่าย เพราะต้องเขียนเพื่อให้บริการผู้คน หากจะให้บริการใครก็ต้องมาดูว่าเว็บไซต์ของเราพร้อมให้บริการใครหรือไม่ บริการตรวจสอบของ Pagespeed ใช้ประเมินเว็บเพจได้ละเอียด และแบ่งเป็น mobile กับ desktop อย่างชัดเจน แต่หากเว็บเพจที่เขียนขึ้นมีรายละเอียดที่เราต้องการตรวจสอบ การใช้ inspector ของ browser ก็สามารถทำให้งานยาก ๆ ง่ายขึ้นมาได้ทันที การออกแบบเว็บเพจมีเครื่องมือ หรือ code สำหรับกำหนด style ที่ชื่อว่า CSS ซึ่งเขียนขึ้นมาได้ 3 แบบ และอยากชวนมอง rsp61.css ของผม ที่ใช้กำหนดให้เว็บเพจเป็นแบบ responsive web design และชวนไปดูพลังของ wordpress ที่เปิดรับ template ได้หลากหลาย อาทิ thumbsup.in.th ก็ใช้ theme ที่น่าสนใจ และรองรับ responsive
Your own webpage
1. Tools : editplus *
2. Web hosting : case thainame.net/ntu
3. Practice : 
index.html + aboutme.htm + project.htm *
แนะนำบทเรียน
เครื่องมืออำนวยความสะดวกในการพัฒนาเว็บเพจมีมากมาย อาทิ dreamweaver หรือ frontpage หรือ notepad หรือ editplus หรือ word การจะเป็นผู้พัฒนาเว็บต้องลงมือปฏิบัติ และใช้ความรู้มาสร้างผลงานให้เป็นที่ประจักษ์ หากตั้งโจทย์ให้สร้างเว็บเพจ 3 หน้าที่เชื่อมโยงกัน แล้วจะทำอย่างไรให้มีผลงานไปอยู่ในอินเทอร์เน็ต และนำเสนอในเว็บโฮสติ้ง อาทิ thainame.net หรือ firebase.com หรือ somee.com ที่ประทับใจผู้เข้าถึงโฮมเพจของท่าน นับเป็นโจทย์ที่น่าสนใจ
Gist : rsp61s.css
งานมอบหมาย : เว็บเพจ 3 หน้าแบบ responsive
หน้าแรก (index) เป็นสารบัญ ดัชนี หรือบทนำ
ที่ฉายภาพรวมความเป็นตัวเรา
แต่ไม่ลึกเท่าโปรเจค หรือเกี่ยวกับเรา
หน้าแรกของนักศึกษาน่าจะมีเนื้อหา
ที่มุ่งขายตัวเรา ตัวอย่างหัวข้อดังนี้
- คนต้นแบบมืออาชีพที่ประทับใจ
- กลุ่มที่สนใจที่เราติดตามประจำ
- บทความ ประเด็น หรือข่าวสำคัญ
- เว็บไซต์ที่แนะนำ
- รายการผลงานเด่นที่สะท้อน skill
- ข้อมูลการติดต่อ หรือ อวตารของเรา
หน้าโครงการ หรือโปรเจค (Project)
เป็นการขายตัวเรา (ถ้ามี linkin จะดีมาก)
ที่ผ่านมาสวมบท "นักศึกษา" แล้วทำอะไรไปบ้าง
มีงานอะไรที่เราทำส่งอาจารย์แล้วประทับใจ
เทอมหนึ่งเรียน 6 วิชา ๆ ละ 1 งานก็ปีละ 12 งาน
เลือกนำมาแบ่งปัน เพราะนั่นสะท้อนให้เห็น skill 
เว็บเพจหน้านี้จะบ่งบอกอัตลักษณ์ของเรา
ผลงานต้องเป็นที่ประจักษ์ อยู่ในความทรงจำไม่ได้
แนะนำว่าผลงานทุกชิ้นให้เขียนเป็นบล็อก
จะทำเอง ร่วมกัน หรือฟังเขามาก็เขียนบล็อกได้
แต่ถ้านักศึกษาไอทีจะต้องมีโฮมเพจเป็นของตนเอง
แล้วเชื่อมทุกอย่างเข้ากับ social media + blog
เนื้อหาในหน้านี้ มีรายละเอียดผลงานที่ครบถ้วน
มีที่มา เนื้อหา สรุป และลิงค์ดาวน์โหลดจะดีมาก
ทั้งหมดในหน้านี้ก็จะสะท้อน skill เพื่อขายตัวเรา
หน้าเกี่ยวกับเรา (About me)
ความเป็นส่วนตัวสำคัญมาก 
แต่การอยู่ในสังคมก็ต้องลดความเป็นส่วนตัวลงบ้าง 
และไม่เปิดเผยอะไรที่ไม่มีวัตถุประสงค์ที่ชัดเจน 
เราต้องเป็นนักประชาสัมพันธ์ตนเองอย่างมีเป้าหมาย
นักศึกษาต้องบอกว่าตนเอง
มี skill อะไร
มี project อะไรผ่านมือมาบ้าง
มี avatar ให้ว่าที่นายจ้างไปติดตามที่ไหน
มี experience กับอะไรที่เป็นงานอดิเรก 
มี interested กับอะไรที่เป็นแผนในอนาคต
แต่ถ้าทำงานในองค์กรเมื่อใด ระดับความเป็นส่วนตัว
จะแปรผันตามนโยบายขององค์กรทันที
บุคคลที่น่าชื่นชม และเป็นแบบอย่างของฉัน
ตัวตนของเรา กับเรื่องที่อยากเล่า

ผมมีเรื่องที่อยากเล่าสู่กันฟัง
เป็นเรื่องที่ศึกษา แล้วได้ทดลอง ทดสอบมาหลายรอบแล้ว จนมั่นใจ และชำนาญ จะเรียกว่า ทักษะ (Skill) ก็ว่าได้ นั่งคือเรื่อง การแกะไข่ ในวิถีชีวิตของคนบ้าน คงไม่มีใครที่ โตจนสุนัขเลียตูนไม่ถึง แล้วไม่เคยแกะไข่มาก่อน แต่การแกะไข่ให้ลอกร่อนได้ง่าย ไม่ใช่เรื่องที่ทุกคนจะรู้เหมือนกัน จึงทำคลิ๊ปขึ้นมาเล่าให้ฟัง หวังเป็นบทเรียน เป็นการชวนแลกเปลี่ยนเรียนรู้ ผ่านบริการของ youtube.com หากเพื่อน ๆ จะแลกเปลี่ยน เข้าไปในคลิ๊ป แล้วโพสต์ต่อคลิ๊ปได้เลยนะครับ ยินดีรับฟังความคิดเห็น แล้วคลิ๊ปนี้มีเรื่องการชงกาแฟในฤดูหนาว เป็นกระพี่ของเรื่องด้วย หากถามว่า กระพี้ (sap wood) คืออะไร คงต้องชวนไปค้นใน google.com แล้วหละ

back to top

"Imagination is more important than knowledge" - Albert Einstein
http://goo.gl/72BPC