wEb

ตั้งแต่ยุคสมัยการทำเว็บไซต์เปลี่ยนไป จากสมัยก่อนต้องทำด้วย table และกำหนด สไตล์ลงไปในนั้น ก็เปลี่ยนมาสู่การใช้ CSS (Cascading Style Sheets) เหมือนในปัจจุบัน

ผมจำได้ว่า รู้จักเจ้า CSS ครั้งแรกเมื่อประมาณปี 2001 ตอนนั้น แชมป์ ผู้ก่อตั้ง Exteen ได้เอาเทคโนโลยีนี้มาใช้ แล้วทำให้ผมตะลึงว่า มันดีไซน์เว็บทั้งเว็บโดยไม่มี table สักตัว! ประกอบกับแก้ไขหน้าเว็บด้วยไฟล์เพียงไฟล์เดียวอีกต่างหาก.. ตั้งแต่นั้นมาก็ตั้งหน้าตั้งตาหัด css กับเขาบ้าง

 

แต่นั่นก็หลายปีผ่านมาแล้ว จนมาถึงตอนนี้ ยุคที่คนทั่วไปเรียกกันว่าเป็นยุค Web 2.0 ที่อะไรๆ ก็ต้องใช้ CSS ต้อง Ajax จนเกร่อเต็มบ้าเต็มเมือง ไม่ว่าจะไปงานเสวนาตระกูลแคมป์ๆทั้งหลายก็หนีไม่พ้น BarCamp Bangkok 1, BarCamp Bangkok 2 (เพิ่งนึกได้ว่าลืมเขียนถึง), TNWA2008, WordCamp

จริงๆ ไม่ว่าจะตอนโน้น หรือตอนนี้ ผมก็ยังมองว่า CSS เป็นอะไรที่ซับซ้อน เพราะจะดีไซน์และทำให้เว็บเบราเซอร์แสดงผลให้ถูกต้องทุกตัว เป็นอะไรที่ละเอียดอ่อนมาก ทุกวันนี้โปรแกรมเมอร์ทั่วไปก็มักจะทำให้รองรับ แค่ IE, Firefox, Opera ถ้าสามตัวนี้ได้ ก็แทบจะ 95% ที่คนทั่วโลกเปิดได้แน่นอน (ตอนนี้ก็มี Google Chrome อีกตัว แต่ผมคิดว่าคงไม่ค่อยมีใครใส่ใจกับมันมากนัก หากสามตัวที่กล่าวมาทำงานได้)

ที่กล่าวมา พูดในเชิงโปรแกรมเมอร์นะครับ แต่ในบทความนี้ ผมจะกล่าวถึงผู้ใช้งานทั่วไป ที่เรียนรู้ CSS แบบโดยไม่รู้ตัว

ตอน Exteen เปิดใหม่ๆ ผมเคยถามกับแชมป์ว่า ผู้ใช้จะแก้ CSS เป็นหรอวะ? เพราะตั้งแต่ Exteen เปิดตัวมาจนถึงวันนี้ Exteen ก็มี theme ให้ผู้ใช้เลือกไม่เกิน 5 แบบเหมือนเดิม และถ้าอยากได้แปลกๆ เอ็งต้องไปแกะ CSS ทำเอง แถม คู่มือก็ไม่มีด้วย!!!! (ตั้งแต่ไหนแต่ไร)

จนมาตอนนี้ครับ… Exteen มี Bloger แก้ไข Theme มากมายจนแปลกตา เข้ามาแทบจะคิดว่าเป็นเว็บอื่น หากไม่เป็นเมนูบาร์ด้านบนของ Exteen.. เช่น

ilumin.exteen.com ไอ้นี่คนใกล้ตัวครับ เปรี้ยวมาก ว่างจัด นั่งทำ theme และแจกชาวบ้านให้ไปใช้กันฟรีๆ ด้วย

phuphu.exteen.com นี่ของตาภูภู่ บล็อกอลังการงานสร้าง มาแต่ไหนแต่ไร เปลี่ยน theme แต่ละที หลุดโลกแทบทุกครั้ง

champ.exteen.com อันนี้ของตาแชมป์ เจ้าของ Exteen รูปแบบง่ายๆ ไม่แก้ไขมาก แต่แปลกตา

 

ถ้าพูดแค่ Exteen คงจะไม่เท่าไร เพราะพวกนี้ ย่อมเป็น super user คร่ำหวอดโต้คลื่นในเน็ตแน่นอน
แต่ถ้าไม่ใช่พวก super user ล่ะ เป็นคนทั่วไป วัยรุ่นทั่วไป ต้องไปดูที่นี่ครับ “ฮิห้า” หรือ HI5 นั่นเอง….

ผมสังเกตุมานานแสนนาน ว่าพวกน้องๆ ที่นอกจากจะทำหน้าแอ๊บแบ๊วน่ารักให้น้ำลายไหลเล่น พวกหนูๆยังทำ skin กันได้สวยงามจนโปรแกรมเมอร์อายกันไปเลย มันเกิดความสงสัยมากๆ ว่าพวกหนูๆ ทำกันได้อย่างไงวะ นั่นมัน CSS ทั้งนั้นเลยนะ..!?!?!

ไปลองสืบเสาะดูข้อมูล ก็พบว่า มีทั้งเว็บไซต์แจก skin hi5 ฟรี, แจกโค้ด skin hi5 ฟรี, สอนทำ skin hi5, มีสังคมทำ skin hi5 มากมายก่ายกอง และตามเว็บบอร์ดเหล่านั้น ก็มีการตั้งคำถามคำตอบ เรื่องของ CSS

ถ้าไม่บอกว่า มันคือเว็บ thaihi5.com ผมคงคิดว่ามันเป็น thaicss.com, divland.com ไปเสียแล้ว..

ช่วงนี้คุยกับน้องคนหนึ่ง น้องเขาเป็นคนหนึ่งที่แก้ HI5 ด้วย CSS ซึ่งตอนแรกเขาไม่รู้หรอกว่ามันคืออะไร รู้แต่ว่า มันมีโค้ดแบบนี้ แก้แบบนี้ display:none ในไอดีนี้ สามารถซ่อนช่องนี้ได้ จนผมได้อธิบายให้ฟังน้องเขาถึงรู้ว่าจริงๆ มันคือ CSS ภาษาเขียนเว็บนั้นเอง
เลยลองให้เขาลง Firefox และติดตั้ง FireBug เพื่อลองเล่นดู แต่ก็ยังไม่ชำนาญนัก จนสองสามวันต่อมา น้องเขาก็สามารถแก้ไขสิ่งที่ต้องการได้เอง (เก่งมากๆ)

วันนี้ผมเลยลองให้น้องเขาสอนทำ customize profile เพื่อทำ CSS เอง และลองนั่งแกะให้เป้นแบบที่ตัวเองต้องการดู

โอ้ว! มันซับซ้อนมาก ถ้าหากไม่ใช่ firebug จิ้มดูว่าอะไรชื่ออะไร และคู่มือใน Hi5 ก็ไม่มีบอกอะไรมากนักนอกจากการเกริ่นนำว่า CSS มันคืออะไร และให้ไปศึกษาได้ที่เว็บไหน นอกนั้นไม่มีบอกเลยว่าตำแหน่งไหน กำหนดด้วยชื่ออะไร?!?!

ก็เลยลองๆทำ เป็นแนว Simplicity แบบ Web 2.0 ทั่วไป ตามภาพ (อยากทำอีก แต่ความขยันมีแค่นี้ ฮ่าๆๆๆ)

 

ลองดูตัวอย่าง skin ของน้องๆ ใน Hi5 บางคนดูนะครับ


อันนี้ถ้าเข้าไปเห็น ไม่ได้ทำกันง่ายๆ ครับ เหมือนจะมีซ้อนภาพเคลื่อนไหวด้วย


นี่ก็เปลี่ยนหัวซะแปลกไปเลย

ผมว่า คนไทย ตอนนี้ รู้อะไรมากกว่าที่โปรแกรมเมอร์ทั่วไปหรือคนในวงการคอมคิด
สามารถใช้งาน CSS ได้อย่างไม่รู้ตัว ถึงคราวนี้และในคราวอนาคต บางทีผมว่า เว็บไซต์ทั่วไป
คงไม่จำเป็นต้องมี theme ให้เลือกมากมาย แบบยุคก่อน เพียงแค่มี theme ต้นฉบับเริ่มต้นให้สักสี่ห้าตัว
และู่มือสอนแก้ไข CSS สักฉบับ เพื่อให้ผู้ใช้รังสรรค์เอง

หากมองในด้านการทำธุรกิจ ผู้ใช้ใช้งานไม่ได้ ก็สามารถรับจ้างทำ หรือออกหนังสือคู่มือขายก็ได้ ถ้าเว็บเรามีความต้องการสูงจริง
ได้ทั้งความยืดหยุ่น ได้ทั้งเงินทางอ้อมในการ Support ได้ทั้งความง่ายในการพัฒนา

แต่ทั้งนี้ทั้งนั้น ในการพัฒนาเว็บไซต์ คงต้องมีการวางแผนโครงสร้าง CSS ให้ดีที่สุด เพื่อผู้ใช้จะได้ยืนหยุ่นและสนุกสนานไปกับมันได้อย่างเต็มที่

แม้ขณะนี้ HI5 แก้ไขได้มากมาย แต่ก็ยังยืดหยุ่นน้อยกว่า Exteen และ Exteen เองก็ยังน้อยกว่า Blogger แต่จุดนี้คงต้องถามตัวเองก่อนหละครับ ว่าจะอนุญาติให้ลูกค้าแก้ไขได้มากแค่ไหน เพราะแค่ HI5 สาวๆแอ๊บแบ๊วทั้งหลาย ก็สนุกกับมันอย่างไม่มีวันจบแล้ว..

ที่มา Lab.TOSDNคนไทยรู้จัก CSS โดยไม่รู้ตัว

วันนี้ได้มีโอกาสไปเป็นวิทยากรแทนพี่ป้อมภาวุธ พูดเรื่อง "กรณีตัวอย่างการใช้สื่ออินเตอร์เน็ตเพื่อการประชาสัมพันธ์" และในหมายกำหนดการณ์ระบุไว้ว่า เป็นข้าราชการระดับผู้บริหารฟัง.. โอ้ว.. แม้เจ้า ภาพของชายหญิงที่ผมพอสามารถเรียกพ่อและแม่ได้อย่างสนิทปาก โผล่ขึ้นมาในหัวทันที

ไม่ได้การแล้ว เรื่อง Slide ผมต้องแก้ใหม่จากของเดิม! สรุป เมื่อวานผมใช้เวลาทั้งคืน ในการหากรณีตัวอย่างและวิธีการอธิบาย เพื่อให้พ่อและแม่ของผมฟังได้อย่างเข้าใจ (เมื่อวานตอนบ่าย ผมเข้าใจว่า ผมพูดแค่ 1 ชม แต่มารู้ตอนค่ำอีกเช่นกันว่า ผมต้องพูดถึง 3 ชม.! ก็เลยต้องทำ Slide เพิ่มกันยกใหญ่)

เมื่อโจทย์ผมเป็นระดับผู้บริหาร ดังนั้น ถ้าผมจะยกตัวอย่าง ย่อมเป็นเรื่องที่ผู้ใหญ่เข้าใจได้ง่ายและเข้าถึง แต่ก็ต้อง Intrend เช่นกัน ดังนั้น กรณีศึกษาที่ผมได้ยกตัวอย่างจากทั้งหมดมีประมาณ 30% ที่ผมกล่าวถึง "ดร.เกรียงศักดิ์ เจริญวงษ์ศักดิ์" หรือ Dr.Dan / Dr.Dan Can Do / Dr.Dancando

คุณวิโรจน์ อัศวรังสี (นิตยสาร PC World / PC Today) ได้ถามผมผ่านอีเมลไว้ตอน 3 ทุ่ม ว่า "ทำไมผมต้องกล่าวถึง ดร.เกรียงศักดิ์ เจริญวงษ์ศักดิ์ เป็นกรณีศึกษา" ซึ่งตรงนี้ผมต้องขออภัยพี่วิโรจน์ ที่ไม่ได้ตอบอีเมลกลับนะครับ ด้วยเหตุผลในย่อหน้าที่สองนั่นเอง :D

ดังนั้นเลยขอถือโอกาส เขียน ตอบ และ พูดถึง Dr.Dan Can Do ทีเดียวเลยก็แล้วกันนะครับ

จริงๆ แล้ว ดร.เกรียงศักดิ์ เจริญวงษ์ศักดิ์ หรือ อาจารย์เกรียงศักดิ์ เจริญวงษ์ศักดิ์ ผมรู้จักท่านมานานหลายปีแล้วหละครับ :D แต่รู้จักผ่านหนังสือชุด "ผู้ชนะสิบคิด" เล่ม การคิดเชิงวิเคราะห์ กับ การคิดเชิงสร้างสรรค์ ซึ่งพูดตรงๆ ผมอ่านไม่จบสักเล่ม! (แล้วจะพูดทำไมเนี่ย :P)

และหลังจากนั้น ผมก็พอจะได้ยินท่านตามสื่อต่างๆ ประปราย จนได้ยินอีกครั้งเมื่อท่านลงสมัครเป็นผู้ว่า กทม. มันเลยทำให้ผมอิจฉาคนกรุงเทพฯ เล็กๆ ว่า ถ้าได้ ดร.แดน มาบริหาร จะทำให้กรุงเทพฯ เป็นเรื่องแห่งความรู้ และ คนรุ่นใหม่ ขนาดไหน

อ๊ะๆ!! แน่นอน ขนาดผมเองยังคิดแบบนั้น ผมคิดว่า ตัว ดร.แดน เองก็คงรู้จักตัวเองเช่นกัน ว่า เขาถูกมองแบบนี้ จึงไม่แปลกที่นโยบายของเขาจะเน้นไปในเรื่องของ

  • วัยรุ่น เช่น "อยากทำ ดี พร้อมสนับสนุน" , "อยาก แสดงออก ต้องได้แสดงออก" หรือ T Zone for Teen
  • แนวคิดแบบปัญญาวิวัฒน์ เช่น "เด็ก กทม.ต้องเก่งภาษา", "Smart Family เลี้ยงลูกด้วยปัญญา"
  • แนวคิดแบบสังคมวิวัฒน์ เช่น "มหานคร Wimax", "เนอร์สเซอรี่สองวัย"
  • อื่นๆ

ดังนั้น เมื่อเขาตั้งใจจะเป็น ผมก็เลยตั้งใจที่จะมอง ว่าเขาน่าจะเป็นบุคคลยุค 2.0 อย่งไม่ต้องสงสัย เพียงแต่จะมีหลักฐานใดหนอ ที่เขาแสดงออกว่าเขาเป็นคนในโลกยุค 2.0

ดังนั้น Entry นี้ ผมเลยจะแฉวิธีการของ ดร.แดน ให้รู้กันนะครับ

เว็บไซต์ drdancando.com


หน้าแรก ซึ่งเป็น Introduction นะนำตัว เหมือน Landing Page ขนาดย่อมๆ


มีการอัพเดทข้อมูลข่าวสาร ต่างๆ เกาะติด เสมือนเว็บข่าว

มีการใช้บริการ Feed ข้อมูลจาก Hi5 ดร.แดน ผ่าน API (เดานะครับ หรืออาจจะใช้คนมานั่งโพสแปะก็ได้)
และมีการให้บริการ RSS Feed เพื่อกระจ่ายข่าวของเว็บไซต์ ดร.แดน

มีการใช้สื่อ VDO เป็นตัวให้ข้อมูล ซึ่งแกไม่ได้อัพโหลดไฟล์ไว้ที่เว็บแกเอง
แต่แกเลือกที่จะนำไฟล์ไป แชร์ไว้ตาม Youtube, Showded ซึ่งผมไม่แน่ใจว่าแกเป็นทีมงานของแกเองหมดหรือไม่

มีบริการเว็บบอร์ด แต่แกชูประเด็นว่ามันเป็นการร่วมแสดงความคิด เสนอนโยบาย ร่วมสร้างกรุงเทพฯ ด้วยกัน

แกลลอรี่ภาพการเยี่ยมเยียนประชาชน เลือกใช้การสื่อสารแบบแผนที่ ง่ายต่อการใช้งาน
คลิกเขต ไหน แสดงรูปของเขตนั้น

ในส่วนดาวน์โหลด ไม่ใช่เอกสาร Word หรือ Excel แต่เป็น สิ่งที่สามารถส่งต่อ กระจายให้ผู้อื่นได้
มีเรื่องมือพร้อมให้คนอื่นทำ Viral Marketing ให้ทันที!

Social Network on drdan-kriengsak.hi5.com and drkriengsak.hi5.com

ใครๆ ที่เล่น Inetnet  ต่างก็รู้ว่า Hi5 คือเว็บไซต์ที่มีคนไทยเล่นเยอะมาก โดยเฉพาะวัยรุ่น
ดังนั้น Target Group หรือ กลุ่มเป้าหมายของ ดร.แดน จึงอยู่ในนี้
ยินดีต้อนรับสู่ Social Network ครับ

สิ่งที่เป็นจุดหลักของ Hi5 คือการ Add Friend หรือการติดต่อเพื่อน
เมื่อใครคนหนึ่งติดต่อ ดร.แดน เพื่อนของคนๆ นั้นจะเห็นทันทีว่า เพื่อนฉันตอนนี้หัวสูง คบ ดร. เป็นเพื่อน
ถ้าเพื่อน เห็นดีเห็นงาม ก็จะตามมา Add Friend เพิ่มเติม

ผมที่ตามมา คือ ดร.แดน ไม่ต้องไปจ้างทำ Poll ของทีไ่หน เลย
แต่ก็สามารถรู้ได้ว่า กลุ่มเป้าหมาย (วัยรุ่น) ต้องการอะไร และคิดอย่างไรกับตัวเขาเอง

Dr.Dan on Blog! at oknation.net and nationmultimedia

ใน nationmultimedia แกเขียนในภาคภาษาอังกฤษครับ
ทำให้สบายใจได้ว่าถ้าได้เป็นผู้ว่า ไม่ต้องใช้ล่ามแปลเหมือนนายกไทยสมัยก่อนๆ
ถูกสร้างขึ้นมาเมื่อเดือนกรกฎาคม 2007

ส่วนใน oknation แกเขียนภาคภาษาไทย
ถูกสร้างขึ้นมาเมื่อเดือนมกราคม 2007

Dr.Dan Video Marketing on youtube

จริงๆ แล้วคงมีท่านอื่นอัพโหลดให้ด้วย แต่ส่วนใหญ่น่าจะเป็นทีมงานของแกเอง ที่ใช้ชื่อว่า drdancando
ซึ่งเป็นเลือกอัพโหลดวีดิโอไว้ที่ youtube เพื่อให้เกิดการเผนแพร่ มากกว่าที่จะอัพโหลดไว้ที่เว็บตนเอง

เห็นแค่นี้ก็พอจะทราบเหตุผลแล้วใช่ไหมครับ ว่าทำไม ผมถึงต้องยกตัวอย่าง ดร.แดน ในการพูดเรื่อง "กรณีตัวอย่างการใช้สื่ออินเตอร์เน็ตเพื่อการประชาสัมพันธ์"

จริงๆ แล้วมีเรื่องของการใช้ keyword ที่แกเลือกใช้คำว่า drdancando ซึ่งจะเป็นประโยคเดียวกับ สโลแกนหาเสียง ดังนั้น เวลาเราได้ยินหรือได้พูดถึง ดร.แดน มักจะติดปากกันว่า ดร.แดนแคนดู มันเลยส่งผลให้โอกาสการค้นหาคำของเราบน Internet ใช้คำว่า drdancando แล้วเจอเว็บไซต์แกด้วยเช่นกัน นับว่าเป็น SEO ในระดับหนึ่ง

หลังจากที่ผมคร่ำเคร่งทำ Slide เพิ่มจาก 40 หน้า เป็น 100 หน้า อย่างง่วงเหงาหาวนอน วันรุ่งขึ้นผมจึงเดนิทางไปบรรยาย และพบว่า ข้าราชการระดับผู้บริหาร ที่มานั่งฟังผม หนุ่มๆ สาวๆ กว่าที่ผมคิดเสียอีก แถมหลายคนเล่น Hi5 เสียด้วยซ้ำ กลายเป็นว่า Slide ที่ผมอดตาหลับทำทั้งคืนช่างดูเด็กน้อยไปเลยทีเดียว ฮาา..

UPDATE!  23/09/2551

เพิ่งรู้ว่า DrDan ซื้อ Google Adword ด้วยครับ แต่ไม่ทราบว่าคำ (Keyword) อะไรบ้าง แต่ที่แน่ๆ คำว่า "ผู้ว่า","ผู้ว่ากรุงเทพ" มีแน่นอน

ขอขอบคุณ ทุกท่านของ สำนักงาน กพ. ที่เข้าฟังจนจบ (จนถึงตอนนี้ ผมก็ยังจำชื่อเต็มไม่ได้สักที เพราะไปไหนก็ใช้แต่ชื่อย่อไม่ว่าจะ ป้ายบอกทาง เว็บสำนักงาร และผมก็ยังเข้าใจว่า มีไว้สอบเลือกข้าราชการ กับ ให้ทุนเด็กเรียนต่อต่างประเทศ)
ขอขอบคุณ คุณภาวุธ ที่ให้โอกาส ผมได้ไปรับประสบการณ์การเป็นวิทยากรในสถานที่ใหม่ๆ
ขอขอบคุณ คุณวิโรจน์ ที่ให้ข้อมูลต่างๆ
ขอขอบคุณ ทีม Agency ของ Global (จำชื่อเต็มไม่ได้) ที่ได้ดูแลเป้นอย่างดีครับ (โดยเฉพาะ คุณวิสาล ที่ทำให้ผมเจอห้องสัมนาฯ)

ที่มา Lab.TOSDN.com : ทำไมผมต้องกล่าวถึง ดร.เกรียงศักดิ์ เจริญวงษ์ศักดิ์ เป็นกรณีศึกษา