thaiall logomy background
ความรู้เบื้องต้นสำหรับเว็บมาสเตอร์
my town
Intro | Source code | HTML | JavaScript | Web 2.0 | Responsive Web Design | CanvasJS.com | Bootstrap | Github.io |
หัวข้ออบรม - ความรู้เบื้องต้นสำหรับเว็บมาสเตอร์
เตรียมความพร้อมเป็นเว็บมาสเตอร์
1. เตรียมพร้อม
- Accept something from someone
- Join Group and make friend [PG: hakin9mag]
- Read news [cs trend & cs ทดลองงาน]
- Have skill
- Check performance
2. Domain : godaddy.com
3. Hosting : hypermart.net
- github.io
- 10 Free webhosting
- geocities.com - oocities.com
4. Web design : web2 + responsive + social + template
5. Web server
- Server-sided Script : php, aspx, pl, py, jsp
- Client-sided Script : html, html5, js
6. JavaScript
- prettify.js
- Bootstrap
7. CSS
- rsp61s.css
- rsp71.css
8. AJAX
9. image : jpg png gif
10. HTML *
11. ทบทวน เขียน Webpage ด้วย Ms word *
- case webpage + webpage,filtered +
- rar:webpage + rar:filtered + gist,filtered
12. Test & Write & Share
แนะนำบทเรียน
การเตรียมพร้อมเข้าสู่อาชีพใดก็ตาม สิ่งที่มักต้องมองหา คือ บุคคลต้นแบบ กลุ่มอาชีพที่เค้าแชร์กัน ข่าวสารในอาชีพ ทักษะที่จำเป็นต้องมี และเกณฑ์ประเมินที่น่าสนใจ เว็บมาสเตอร์ก็ต้องรู้จักคำว่า domain name ที่เป็นจุดเริ่มต้นของการสื่อสารในบทบาททางอาชีพ แล้วพูดถึงแหล่งทำมาหากินคือ hosting กับ ip address กลับมามองเว็บไซต์ในปัจจุบันพบว่ามีหลากหลายรูปแบบ มี design และเวทีที่แตกต่างกัน แล้วมองไปที่เครื่องบริการเว็บก็พบว่ารองรับภาษาที่ใช้พัฒนาแตกต่างกันไป ภาษาที่ถูกกล่าวถึงกันมากคือ javascript และ css ส่วน AJAX ก็เป็นพระเอกที่เว็บมาสเตอร์ต้องรู้จัก ความรู้เบื้องต้นก่อนลงมือเขียนเว็บเพจ คือ เรื่องภาพ อาจเป็นภาพถ่าย หรือการรีทัสภาพ แล้วต้องรู้จักภาษา HTML ที่เป็นพื้นฐานของการเขียนเว็บเพจ และการนำเสนอภาพ หากจะเริ่มต้นอย่างง่าย แนะนำว่า word เป็นโปรแกรมที่สามารถใช้สร้างเว็บเพจแบบเชื่อมโยงกันได้
whois.sc/thailand.com
intro_webmaster_rsp.docx (html)
Editplus v2.11.2096 (check virus)
Editplus v3.30
rsp 3 htm
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.com
- Apache 80
- MySQL 3128
- PHP
- PHPMyAdmin
5. Free webhosting
- case firebase, thainame.net/ntu, somee.com
- case github.io
แนะนำบทเรียน
เครื่องบริการเว็บ ก็จะมีพอร์ทมาตรฐานที่เปิดบริการคือ 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
<!-- github.com code -->
<style type="text/css">
  .gist {width:700px !important;}
  .gist-file
  .gist-data {max-height: 400px;max-width: 700px;}  
</style>
<script src="https://gist.github.com/thaiall/540dc4848946291a9823256ca8881e4d.js"></script>
<!-- my font -->
@font-face{font-family:'Sawasdee'; src: url('rsp_sawasdee.ttf');}
@font-face{font-family:'WRTishkid2'; src: url('rsp_wr_tish_kid2.ttf');}
@font-face{font-family:'TLWGTypewriter'; src: url('rsp_tlwgtypewriter.ttf');}
<span style="font-family:sawasdee;">
<!-- background image -->
background-image: url("rsptown.gif");
งานมอบหมาย : เว็บเพจ 3 หน้าแบบ responsive
หน้าแรก (index) เป็นสารบัญ ดัชนี หรือบทนำ
ที่ฉายภาพรวมความเป็นตัวเรา
แต่ไม่ลึกเท่าโปรเจค หรือเกี่ยวกับเรา
หน้าแรกของนักศึกษาน่าจะมีเนื้อหา
ที่มุ่งขายตัวเรา ตัวอย่างหัวข้อดังนี้
- คนต้นแบบมืออาชีพที่ประทับใจ
- กลุ่มที่สนใจที่เราติดตามประจำ
- บทความ ประเด็น หรือข่าวสำคัญ
- เว็บไซต์ที่แนะนำ
- รายการผลงานเด่นที่สะท้อน skill
- ข้อมูลการติดต่อ หรือ อวตารของเรา
+ Github.io : index.html
หน้าโครงการ หรือโปรเจค (Project)
เป็นการขายตัวเรา (ถ้ามี linkedin จะดีมาก)
ที่ผ่านมาสวมบท "นักศึกษา" แล้วทำอะไรไปบ้าง
มีงานอะไรที่เราทำส่งอาจารย์แล้วประทับใจ
เทอมหนึ่งเรียน 6 วิชา ๆ ละ 1 งานก็ปีละ 12 งาน
เลือกนำมาแบ่งปัน เพราะนั่นสะท้อนให้เห็น skill
เว็บเพจหน้านี้จะบ่งบอกอัตลักษณ์ของเรา
ผลงานต้องเป็นที่ประจักษ์ อยู่ในความทรงจำไม่ได้
แนะนำว่าผลงานทุกชิ้นให้เขียนเป็นบล็อก
จะทำเอง ร่วมกัน หรือฟังเขามาก็เขียนบล็อกได้
แต่ถ้านักศึกษาไอทีจะต้องมีโฮมเพจเป็นของตนเอง
แล้วเชื่อมทุกอย่างเข้ากับ social media + blog
เนื้อหาในหน้านี้ มีรายละเอียดผลงานที่ครบถ้วน
มีที่มา เนื้อหา สรุป และลิงค์ดาวน์โหลดจะดีมาก
ทั้งหมดในหน้านี้ก็จะสะท้อน skill เพื่อขายตัวเรา
+ Github.io : project.htm
หน้าเกี่ยวกับเรา (About me)
ความเป็นส่วนตัวสำคัญมาก
แต่การอยู่ในสังคมก็ต้องลดความเป็นส่วนตัวลงบ้าง
และไม่เปิดเผยอะไรที่ไม่มีวัตถุประสงค์ที่ชัดเจน
เราต้องเป็นนักประชาสัมพันธ์ตนเองอย่างมีเป้าหมาย
นักศึกษาต้องบอกว่าตนเอง
มี skill อะไร
มี project อะไรผ่านมือมาบ้าง
มี avatar ให้ว่าที่นายจ้างไปติดตามที่ไหน
มี experience กับอะไรที่เป็นงานอดิเรก
มี interested กับอะไรที่เป็นแผนในอนาคต
แต่ถ้าทำงานในองค์กรเมื่อใด ระดับความเป็นส่วนตัว
จะแปรผันตามนโยบายขององค์กรทันที
+ Github.io : aboutme.htm
บุคคลที่น่าชื่นชม และเป็นแบบอย่างของฉัน
ตัวตนของเรา กับเรื่องที่อยากเล่า

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

rspsocial
Thaiall.com