สิ่งที่ไม่ควรมองข้าม สําหรับคนทําเว็บ

สิ่งที่ไม่ควรมองข้าม สําหรับคนทําเว็บ

Sanook

หลายคนเปิด Adobe Dreamweaver ขึ้นมาแล้วก็บรรเลงกันทันทีโดยที่ ไม่รู้ว่ามันทําอะไรให้เราบ้าง หยุดสักนิดแล้วหันมามองเรื่องการให้ความสําคัญกับเอกสารที่เราทํา ว่าทําแล้วมันมีความหมายแค่ไหน การทําให้ได้ความหมายดีๆ ถ้าจะเปรียบเทียบง่ายๆ มันก็เหมือนกับการทํารายงาน ต้องมีสารบัญ หัวข้อ มีเนื้อหา เราจําเป็นต้องรู้และ เข้าใจความหมายของ Elements ต่างๆ ลักษณะและรูปแบบการแสดงผลของ Elements แต่ละตัวจะได้นํามาใช้ให้ถูกต้อง

อธิบายทั้งหมดคงไม่ไหว ลองหาดูได้จากเว็บเหล่านี้ และศึกษาและ ทดลองใช้

  1. http://www.xhtml.com/en/xhtml/reference/
  2. http://www.w3schools.com/html/default.asp
  3. http://thaicss.com

คําถามที่ถามบ่อย

  1. HTML, XML, XHTML และ CSS คืออะไร ต่างกันอย่างไร และใช้อย่างไร
  2. เปลี่ยนใจมาใช้ div แทน table
  3. เขียน CSS ในลักษณะต่างๆ มีกี่แบบ

รู้จักกับ HTML5 – ภาคหนึ่ง HTML5 คืออะไร?

รู้จักกับ HTML5 – ภาคหนึ่ง HTML5 คืออะไร?

บทความดีๆจาก http://www.blognone.com/ ที่ jojobaoil แนะนํามาครับ อยากให้ลองอ่านกัน


บทความชุดนี้จะแนะนำข้อมูลเบื้องต้น (ย้ำว่า “เบื้องต้น”) ของเทคโนโลยีใหม่ที่ทุกคนจับตาอย่าง HTML5 เพื่อเตรียมความพร้อมและปูพื้นฐานของ HTML5 ให้กับนักพัฒนาเว็บในประเทศไทย

ภาคแรกของบทความนี้จะกล่าวถึงข้อมูลของ HTML5 ในภาพรวม ว่ามันคืออะไร มันทำอะไรได้บ้าง ก่อนจะเข้าสู่รายละเอียดของเทคโนโลยีบางตัวที่สำคัญในภาคต่อๆ ไป

อะไรคือ HTML5

คงได้ยินชื่อ HTML5 กันมาเยอะ แต่ว่าแท้จริงแล้วมันคืออะไรกันแน่?

ความหมายทั่วไปของคำว่า HTML5 มีสองนัยยะที่เหลื่อมซ้อนกันอยู่ครับ

ความหมายในมุมแคบ มันคือ สเปกของภาษา HTML รุ่นที่ 5 ซึ่งต่อจาก HTML4 ที่เราใช้กันทุกวันนี้ โดยปัจจุบันสเปกยังร่างไม่เสร็จ (ดูได้จากเอกสารของ W3C) เนื้อหาจะครอบคลุมลักษณะ ฟีเจอร์ และ syntax ของ HTML เท่านั้น

ความหมายในมุมที่กว้างขึ้น มันคือ ชุดของเทคโนโลยีเว็บสมัยใหม่ อันประกอบไปด้วย

  • ภาษา HTML5 ตามข้อแรก
  • CSS3
  • API อีกชุดหนึ่งที่อยู่นอกสเปก HTML5 แต่ออกแบบมาให้ใช้งานร่วมกัน เช่น Geolocation, IndexedDB, File API ที่กำลังเป็นร่างมาตรฐานของ W3C แยกมาอีกชุดหนึ่ง
  • เทคโนโลยีประกอบอื่นๆ ที่เป็นมาตรฐานของ W3C อยู่แล้ว และนำมาใช้ร่วมกับ HTML (ซึ่งจะเป็น HTML4 หรือ HTML5 ก็ได้) เช่น SVG หรือ MathML

HTML5 ในที่นี้เราจะหมายถึงความหมายอย่างที่สอง ก็คือเทคโนโลยีเว็บรุ่นใหม่แบบรวมๆ นะครับ

ทำไมต้องมี HTML5

จะว่าไปแล้ว เทคโนโลยีใน HTML5 แทบไม่มีอะไรใหม่ในโลกไอทีเลย เพราะเกือบทุกอย่างที่ HTML5 ทำได้ อยู่ในกระบวนการพัฒนาโปรแกรมแบบ native มาช้านานแล้ว เช่น การทำงานแบบออฟไลน์ หรือ การวาดกราฟิก

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

เดิมที ภาษาตระกูล HTML/SGML เป็นภาษาที่ออกแบบมาเพื่อ “อธิบาย” หรือ “นิยาม” การแสดงผลข้อมูล เช่น ตัวหนา ตัวเอียง หัวเรื่อง ลิงก์ ซึ่งการใช้งานก็คือเอาไว้ทำเอกสารที่เชื่อมโยงกัน (ตัวอย่างคือ Help ของวินโดวส์)

พอมีอินเทอร์เน็ต HTML ก็ทำหน้าที่สร้าง “โบรชัวร์อิเล็กทรอนิกส์” ที่สามารถดูได้จากระยะไกล ถึงแม้ตอนแรกจะมีแต่ข้อความ แต่ระยะต่อๆ มาเทคโนโลยีเว็บก็พัฒนามากขึ้น สามารถใส่ภาพ เสียง วิดีโอ (ผ่านปลั๊กอิน) มีแนวคิดเชิงโปรแกรมอย่างจาวาสคริปต์เข้ามา (จริงๆ มี VBScript ด้วยแต่ดังสู้ไม่ได้) ในยุคของ HTML3

พอเป็นยุคของ HTML4 เราเริ่มเห็นเว็บแบบที่ตอบโต้ได้ มีความเป็นอินเตอร์แอคทีฟมากขึ้น ซึ่งเกิดจากเทคโนโลยีอย่าง AJAX, XMLHttpRequest ทำให้เว็บมีความใกล้เคียงกับ “แอพ” แบบดั้งเดิมมากขึ้น อย่างไรก็ตาม มันยังสู้แอพแบบ native ไม่ได้ เพราะยังขาดฟีเจอร์สำคัญๆ อีกหลายอย่าง เช่น การทำงานออฟไลน์ กราฟิกสามมิติ ฯลฯ นั่นเอง

สุดท้ายแล้ว HTML5 จะช่วยให้เรานำเทคโนโลยีจากโลกของเว็บ มาสร้างแอพที่มีลักษณะใกล้เคียงกับแอพแบบ native (ไม่ว่าจะบนพีซีหรือมือถือได้) ตัวอย่างที่ชัดเจนที่สุดในตอนนี้คือ PhoneGap ซึ่งเป็นเครื่องมือพัฒนาแอพมือถือด้วย HTML5

HTML5 มีความสามารถอะไรบ้าง

เกริ่นกันมานานก็เริ่มเข้าเรื่องกันสักทีนะครับ ส่วนประกอบของ HTML5 มีหลายอย่างมาก เราอาจไม่จำเป็นต้องใช้ทุกฟีเจอร์

ส่วนการอธิบายส่วนประกอบของ HTML5 ก็ขึ้นกับว่าเราจะจัดหมวดหมู่มันอย่างไร มีหลายตำราให้เลือก ในบทความนี้ผมขอเลือกตาม W3C ที่อุตส่าห์ออกแบบโลโก้-ไอคอนของ HTML5 เพื่อแสดงสัญลักษณ์ของเทคโนโลยีเว็บแขนงต่างๆ เพื่อให้เข้าใจง่ายและแยกหมวดหมู่ตามกัน

W3C แบ่งเทคโนโลยีในชุด HTML5 ออกเป็น 8 หมวด พร้อมไอคอนประกอบทุกหมวด ขอใช้ชื่อตามนั้น และเรียงลำดับกันไปเช่นเดียวกับเว็บ W3C HTML5 Logo

1. Semantics

HTML5 Semantic

เทคโนโลยีกลุ่ม Semantics คือตัว syntax ของภาษา HTML5 ที่แน่นอนว่าเปลี่ยนไปจาก HTML4 ซึ่งมีแท็กใหม่ๆ และคุณสมบัติ (atrribute) ใหม่ๆ เพิ่มขึ้นอีกพอสมควร

โดยโครงสร้างของภาษาแล้ว HTML5 ยังเหมือนกับ HTML ที่เราคุ้นเคย แต่เพิ่มแท็กใหม่ ตัดแท็กเก่า และเปลี่ยนวิธีใช้แท็กเก่าบางตัวออกไป รายละเอียดอ่านได้จาก HTML5 differences from HTML4 ของ W3C

ยกมาเป็นตัวอย่างพอให้เห็นภาพ

แท็กใหม่

แท็กกลุ่มนี้จะช่วยบ่งบอกความหมายของวัตถุในเว็บเพจได้ดีขึ้น เช่น จากเดิมเราใช้ <div id=”header”> ก็เปลี่ยนมาเป็น <header> ทำให้เบราว์เซอร์สามารถรับทราบความหมายของวัตถุแต่ละชิ้นได้ดีขึ้น

ตัวอย่าง

  • section – บ่งบอกเซคชันของเนื้อหา
  • article – กำหนดขอบเขตของตัวเนื้อบทความ
  • aside – กำหนดขอบเขตของเนื้อหาเสริม (ล้อมกรอบ)
  • header – กำหนดขอบเขตของส่วนเริ่มต้นหรือส่วนหัวของเว็บไซต์ (อย่าสับสนกับ <head>)
  • footer – กำหนดขอบเขตของส่วนท้ายของเว็บไซต์ พวกข้อความกำหนดสิทธิ์ต่างๆ
  • nav – บอกว่ามันเป็นส่วนนำทางของเว็บไซต์
  • figure – บอกว่าเป็นภาพหรือวิดีโอประกอบเนื้อหา (ข้างในสามารถซ้อนแท็ก img หรือ video พร้อมคำอธิบายได้อีกชั้น)

นอกจากนี้ส่วนของฟิลด์ยังมี attribute ใหม่อีกกลุ่มสำหรับ input type ที่เจาะจงกว่าเดิม เช่น จากเดิมเราใช้ <input type=”text” id=”email”> ก็เปลี่ยนเป็น <input type=”email”> แทน

  • tel – เบอร์โทร
  • search – ช่องค้นหา
  • url
  • email
  • datetime
  • date
  • time
  • color

แท็กที่ถูกตัดออก

ส่วนใหญ่เป็นแท็กเก่าที่ทำหน้าที่กำหนดฟอร์แมตการแสดงผล ซึ่งย้ายไปใช้ CSS แทนหมดแล้ว นอกจากนี้ยังเอาแท็กที่เกี่ยวกับเฟรมทั้งหมดออกไป เพราะล้าสมัยแล้ว และแท็กที่ไม่ค่อยมีคนใช้อย่าง acronym (ใช้ abbr แทน) หรือ applet (ใช้ object แทน)

  • big
  • center
  • font
  • strike
  • frame
  • frameset
  • noframes
  • acronym
  • object

แท็กที่ถูกเปลี่ยนวิธีใช้

แท็กเก่าแต่เปลี่ยนความหมาย-วิธีใช้งาน

  • i – ไม่ได้หมายถึงการทำตัวเอียง (เพราะอยู่ใน CSS) แต่หมายถึงโทนเสียงของตัวข้อความที่เปลี่ยนแปลง
  • small – หมายถึงข้อความหรือคอมเมนต์ประกอบเนื้อหาหลัก ที่ควรจะแสดงด้วยตัวเล็กกว่าปกติ
  • strong – หมายถึงข้อความสำคัญ ไม่ใช่การเน้นด้วยตัวเข้ม
  • u – เป็นการบ่งชี้ว่าข้อความจุดนี้มีการแสดงผลแบบพิเศษ เช่น จงใจเขียนให้ผิดเพื่อเป็นตัวอย่าง หรือ ชื่อในภาษาจีน เป็นต้น

นอกจากแท็กหลักที่เปลี่ยนแปลงแล้ว เทคโนโลยีในหมวดนี้ยังรวมไปถึงเทคโนโลยีเว็บหลายๆ ชนิดที่มีอยู่แล้วในปัจจุบัน เช่น RDFa, Microdata, Microformats ที่ช่วยกำหนดความหมายให้กับเนื้อหา เพื่อนำไปประมวลผลต่อได้ง่ายขึ้นครับ

จะเห็นว่าในภาพรวมแล้ว HTML5 หมวด semantics จะช่วยให้ตัวโครงสร้างของเว็บเพจมีความหมาย (ในเชิงของ semantic web) มากขึ้น

รายละเอียดเพิ่มเติมอ่านได้จาก HTML5 Semantics – Smashing Magazine

2. Offline & Storage

HTML5 Offline & Storage

เทคโนโลยีในหมวดนี้ก็ตรงตามชื่อหมวด นั่นคือช่วยให้เว็บสามารถทำงานแบบออฟไลน์ได้ และเก็บข้อมูลไว้ใช้งานบนเครื่องของผู้ชมเว็บได้

ผมเคยเขียนเนื้อหาในหมวดนี้ไปแล้วครั้งหนึ่งในบทความ รู้จักกับวิธีการเก็บข้อมูล Local Storage ของ HTML5 ก็ขอเอามารียูสเพราะเนื้อหาเหมือนกันทุกประการ

Web Storage

เทคโนโลยีแรกคือ Web Storage ซึ่งเป็นการเก็บข้อมูลแบบง่ายๆ ในรูป key-value (ภาษาโปรแกรมบางภาษาเรียก dictionary) ซึ่งแยกย่อยได้อีก 2 อย่าง คือ

  • Session storage เก็บข้อมูลเฉพาะเซสชันการท่องเว็บนั้นๆ ปิดแท็บเมื่อไรข้อมูลก็หายไป ใช้ออบเจคต์ชนิด sessionStorage อันนี้ไม่ซับซ้อน
  • Local storage เก็บข้อมูลระยะยาว (persistence) โดยใช้ออบเจคต์ชื่อ localStorage ซึ่งจะซับซ้อนขึ้น เพราะเราสามารถเปิดเว็บเพจเดียวกันใน 2 แท็บหรือมากกว่า ซึ่งมันจะแชร์ข้อมูลก้อนเดียวกัน

ฟีเจอร์ Web Storage จะคล้ายกับ Google Gears เมื่อ 3-4 ปีก่อนหน้านี้ เพียงแต่ Web Storage รวมมากับ HTML5 เลย ไม่ต้องลงปลั๊กอินเพิ่มเองแบบ Gears

ฐานข้อมูล

การเก็บข้อมูลง่ายๆ แบบ key-value อาจไม่เพียงพอต่อความต้องการของนักพัฒนา HTML5 จึงเพิ่มวิธีการเก็บข้อมูลที่ซับซ้อนขึ้นมา ซึ่งก็คือฐานข้อมูลแบบที่เราคุ้นเคยนั่นเอง

ปัญหาของฐานข้อมูลใน HTML5 ก็คือมาตรฐานที่แยกเป็นสองทาง

  • Web SQL Database มันคือการนำ SQL มายัดใส่เบราว์เซอร์ (ส่วนมากนิยม SQLite) ตอนนี้ใช้ได้แค่เบราว์เซอร์ตระกูล WebKit และ Opera แนวทางนี้มีข้อเสียตรงความซับซ้อนของ SQL และเริ่มหมดความนิยมแล้ว (ทั้งที่มาตรฐานยังไม่เสร็จ)
  • IndexedDB แนวทางใหม่ที่สร้างขึ้นในภายหลัง ไม่ใช้ SQL แต่เก็บข้อมูลแบบ key-value เหมือนกับ Web Storage เพียงแต่เพิ่มการทำดัชนี (index) ช่วยให้หาข้อมูลได้รวดเร็วขึ้น และเพิ่มเรื่อง transactions เพื่อความปลอดภัยของข้อมูลมาด้วย

Blognone เคยลงเรื่อง Web SQL vs IndexedDB ไปครั้งหนึ่งแล้ว ย้อนอ่านรายละเอียดได้ในตอนเก่าครับ

File API

เราพูดถึงการเก็บข้อมูลแบบง่ายๆ และการเก็บลงฐานข้อมูลไปแล้ว ลำดับถัดไปคือการจัดการกับ “ไฟล์” นั่นเอง HTML5 มี API มาให้เราสองตัวคือ FileReader กับ FileWriter หน้าที่ก็ตามชื่อครับ

ปัญหาของ FileReader ที่จะต้องสนใจคือความแตกต่างระหว่างไฟล์ที่อยู่ในเครื่อง กับไฟล์ที่อยู่บนเว็บ ซึ่งกำลังพัฒนากันอยู่

ส่วน FileWriter มีข้อกังวลเรื่องความปลอดภัย เพราะต่อจากนี้ไปเว็บเพจจะสามารถเขียนไฟล์ในเครื่องเราได้ มาตรการแก้ไขจุดอ่อนนี้ก็ต้องพัฒนากันต่อไป

(ข่าวเก่า W3C เปิดตัว File API, มาตรฐานกลางในการเข้าอ่านไฟล์ในเครื่องลูกข่าย)

แคชสำหรับเวลาออฟไลน์ (App Cache)

เมื่อเว็บแอพพลิเคชันไม่ได้ต่อเน็ต ก็ต้องมีวิธีจัดการกับข้อมูลที่เกิดขึ้นระหว่างนั้น ซึ่งเป็นหน้าที่ของ AppCaching API ที่บอกว่าเว็บแอพพลิเคชันจะถูกเก็บไว้บนเครื่องนานแค่ไหน ทำให้เว็บแอพมีลักษณะคล้ายๆ กับแอพที่ติดตั้งแบบปกติมากขึ้น

3. Device Access

HTML5 Device Access

เทคโนโลยีหมวดที่สามจะเน้นความเชื่อมโยงกับฟีเจอร์ของฮาร์ดแวร์ (โดยเฉพาะฮาร์ดแวร์แบบพกพา) เช่น

  • Geolocation API เพื่อขอข้อมูลเชิงพิกัดของอุปกรณ์
  • เข้าถึงไมโครโฟนและกล้องถ่ายภาพของอุปกรณ์
  • เข้าถึงข้อมูลภายในตัวอุปกรณ์ เช่น สมุดที่อยู่ หรือข้อมูลการเอียงเครื่อง (tilt orientation)

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

ในการใช้งานจริงๆ เราคงใช้ผ่านเฟรมเวิร์คจาวาสคริปต์ที่เตรียมเรื่องพวกนี้ไว้ให้แล้วมากกว่า เช่น jQuery Mobile, Sencha Touch หรือ SproutCore เป็นต้น

4. Connectivity

HTML5 Connectivity

เทคโนโลยีกลุ่มที่สี่เน้นการเชื่อมต่อกับเครือข่ายที่ดีขึ้น มี 2 อย่างที่สำคัญ

WebSockets

WebSockets เป็น API ที่ออกมาเพื่อต่อยอดแนวทางของ AJAX ในอดีต อธิบายง่ายๆ มันคือการ push ข้อมูลจากเซิร์ฟเวอร์มายังไคลเอนต์ (แบบเดียวกับ push mail ที่เรารู้จักกัน)

ในแง่เทคนิค การส่งข้อมูลแบบ HTTP แบบดั้งเดิมจะเปิดการเชื่อมต่อกับเซิร์ฟเวอร์เพื่อส่งข้อมูล แล้วตัดการเชื่อมต่อเมื่อใช้เสร็จ ดังนั้นการขอข้อมูลจากเซิร์ฟเวอร์เป็นระยะจึงทำได้ยาก เพราะต้องดึงข้อมูลจากเซิร์ฟเวอร์ (polling) เป็นระยะ ซึ่งเปลืองโหลดของเซิร์ฟเวอร์ไม่น้อย โดยเฉพาะกรณีที่ต้องเปิดการเชื่อมต่อ HTTP ค้างเอาไว้ (Long polling หรือ COMET)

WebSockets เกิดมาเพื่อแก้ปัญหานี้ โดยสร้างการเชื่อมต่อแบบ (เกือบ) ถาวรระหว่างเซิร์ฟเวอร์กับไคลเอนต์ เพื่อให้สองฝั่งส่งข้อมูลกันได้ตลอด ทั้งหมดรันอยู่บนโพรโตคอล TCP อีกชั้นหนึ่ง และไม่ได้วิ่งบนโพรโตคอล HTTP เพื่อประหยัดโหลดของ HTTP ครับ

ในการใช้งานเราจะเรียก WebSockets ด้วย

ws://

หรือถ้าต้องการการเชื่อมต่อแบบปลอดภัย

wss://

ข้อดีคือเบากว่า HTTP แต่ข้อเสียคือทั้งสองฝั่ง (โดยเฉพาะเซิร์ฟเวอร์) ต้องรองรับ WebSockets ด้วย จึงอาจจะใช้ไม่ได้ในทุกกรณี

ปัจจุบัน WebSockets เป็นมาตรฐานที่รับรองโดย IETF และกำลังผ่านกระบวนการเข้าเป็นมาตรฐานของ W3C

ข้อมูลเพิ่มเติม: Wikipedia, W3C, สอนการใช้งานที่ HTML5 Rocks

Server-sent Events (SSE)

WebSockets เป็นการส่งข้อมูลแบบสองทาง แต่ถ้าเราต้องการส่งข้อมูลทางเดียวจากเซิร์ฟเวอร์มายังไคลเอนต์ (เช่น notification ของ Facebook/Twitter) เราสามารถใช้เทคโนโลยีอีกตัวชื่อ Server-sent Events (SSE) แทนได้

SSE ถูกออกแบบมาเพื่อแก้ปัญหา polling ของ AJAX เช่นเดียวกับ WebSockets หลักการทำงานของ SSE คือเซิร์ฟเวอร์สามารถส่งข้อมูลไปยังไคลเอนต์ได้โดยตรง โดยที่ไคลเอนต์ไม่ต้องร้องขอ (GET Request) ก่อน

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

ในการใช้งานจริง เราอาจเลือกได้ระหว่าง

  • การส่งข้อมูลด้วย WebSockets ทั้งสองทาง (บน WebSockets)
  • การรับข้อมูลจากเซิร์ฟเวอร์ด้วย SSE แล้วส่งกลับด้วย XMLHttpRequest (บน HTTP)

ข้อมูลเพิ่มเติม: Wikipedia, W3C, สอนการใช้งานที่ HTML5 Rocks

5. Multimedia

HTML5 Multimedia

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

อธิบายแบบสั้นๆ คือเดิมที่ HTML4 ขึ้นไปไม่สามารถแสดงผลเสียง-วิดีโอได้โดยตรง ต้องใช้วิธีฝัง <object> แล้วติดตั้งปลั๊กอินเพื่อช่วยเล่นมัลติมีเดีย ซึ่งทำงานได้ตามนั้นแต่ก็มีปัญหายิบย่อยมากมายตามมาเช่นกัน

แต่พอเป็น HTML5 ได้กำหนดให้ HTML ต้องเล่นไฟล์เสียงและวิดีโอได้ในตัว จึงเป็นที่มาของแท็กใหม่ <audio> และ <video> ที่หลายคนคงลองใช้กันแล้ว ดังนั้นต่อไปเสียงและวิดีโอจะกลืนเป็นเนื้อเดียวกับเว็บเพจโดยตรง เราสามารถปรับเปลี่ยนการแสดงผลของมันได้เฉกเช่นเดียวกับส่วนอื่นๆ ของเว็บเพจ เช่น ย้ายตำแหน่ง ซ้อนฉากหลัง หาอย่างอื่นมาบัง ฯลฯ

อย่างไรก็ตาม เรื่องมัลติมีเดียของ HTML5 กลับมีปัญหาประการใหม่เพิ่มเข้ามา นั่นคือ “สงคราม codec” ระหว่างเบราว์เซอร์สองค่ายใหญ่ ดังที่เราเห็นจากข่าว WebM+Ogg (สนับสนุนโดย Chrome/Firefox/Opera) vs H.264 (สนับสนุนโดย IE/Safari) นั่นเอง

(ดูข่าวหมวด codec ประกอบ)

6. 3D, Graphics & Effects

HTML5 - 3D, Graphics & Effects

หมวดที่หกเกี่ยวกับเรื่องกราฟิก แบ่งเป็น 4 ประการย่อยๆ

SVG (Scalable Vector Graphics)

เป็นภาษาตระกูล XML ที่ออกแบบมาสำหรับการวาดกราฟิกแบบเวกเตอร์ (พอเทียบเคียงได้กับ SWF ของ Adobe หรือ XAML ของไมโครซอฟท์) เทคโนโลยีนี้มีมานานพอสมควรแล้ว คงไม่ต้องลงรายละเอียดนะครับ

Canvas

แท็ก <canvas> ถือเป็นของใหม่ที่สำคัญใน HTML5 เพราะมันช่วยเปลี่ยนลูกเล่นการแสดงผลของเว็บเพจไปอีกมาก

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

แท็ก canvas ที่ถูกเพิ่มเข้ามาช่วยให้เราสามารถ “วาดภาพ” ลงบนเว็บเพจได้โดยตรง (กำหนด canvas ในเพจ แต่สั่งวาดด้วยจาวาสคริปต์นะครับ) โดยขอบเขตของภาพที่วาดก็จะอยู่ในออบเจคต์ชื่อ canvas นั่นเอง

สิ่งที่เราสามารถใส่ลงไปในกรอบ canvas ได้แก่

  • รูปทรงพื้นฐาน สี่เหลี่ยม วงกลม เส้นตรง เส้นโค้ง พาธ (รูปทรงมีไม่เยอะเท่ากับ SVG)
  • ไฟล์รูปภาพ จะซ้อนกันกี่ชั้นก็ได้ตามสะดวก
  • แอนิเมชัน กำหนดให้วัตถุต่างๆ เคลื่อนไหว
  • แปลงสภาพวัตถุ (transformation) จะกำหนดให้หมุน เอียง บิดเบี้ยว ได้เหมือนกัน
  • ประกอบ-ซ้อนภาพวัตถุ (composition) เช่น นำสี่เหลี่ยมกับสามเหลี่ยมมา intersect เพื่อสร้างวัตถุแบบใหม่

ความต่างที่สำคัญของ SVG กับ canvas คือ

  • SVG ได้ผลลัพธ์เป็นเวกเตอร์ ส่วน canvas ได้ผลลัพธ์เป็นราสเตอร์ (ภายในกรอบวัตถุ canvas)
  • SVG สั่งวาดด้วยแท็กแบบ markup (ซับเซ็ตของ XML) ส่วน canvas สั่งวาดด้วยจาวาสคริปต์

รายละเอียดดูได้จาก Wikipedia, Canvas tutorial – Mozilla Developer Network, W3Schools HTML5 Canvas

WebGL

โดยทั่วไปแล้ว การวาดภาพ-แสดงผลใน canvas เรามักใช้กับภาพ 2 มิติเป็นหลัก แต่ถ้าต้องการวาดภาพ 3 มิติ เราจะใช้ส่วนขยายของ canvas ที่เรียกว่า WebGL (Web-based Graphics Library)

WebGL เป็นไลบรารีกราฟิกที่พัฒนาอยู่บน OpenGL ES 2.0 ซึ่งเป็นไลบรารีกราฟิก 3 มิติมาตรฐานของวงการไอที แต่ดัดแปลงให้เรนเดอร์ภาพออกมาบนออบเจคต์ canvas ภายในเบราว์เซอร์ และสั่งงานได้ผ่านจาวาสคริปต์ ตอนเรนเดอร์ก็ทำผ่าน GPU ตามปกติ (ดูข่าวเก่าหมวด WebGL ประกอบ)

ขั้นตอนการวาดภาพ 3 มิติบน WebGL แทบไม่ต่างอะไรกับ canvas ปกติ เพราะเราต้องกำหนดบริเวณที่เป็น canvas ในเว็บเพจขึ้นมาก่อน เพียงแต่ตอนวาดในจาวาสคริปต์ เราจะสร้างออบเจคต์ชนิด WebGL ขึ้นมาแทน canvas ปกติ

ส่วนหลักการวาดวัตถุ 3 มิติคงไม่ต่างอะไรกับ OpenGL ครับ ใครเคยเขียนโปรแกรมกับ OpenGL คงใช้ WebGL ได้แทบจะทันที

สถานะตอนนี้ของ WebGL คือเบราว์เซอร์ทุกค่ายสนับสนุนแล้ว ยังเหลือฝั่งไมโครซอฟท์ที่ยังไม่ยอมสนับสนุน (เหตุผลหนึ่งเพราะอยู่บน OpenGL ไม่ใช่ DirectX)

ข้อมูลเพิ่มเติม Getting started with WebGL – Mozilla Developer Network

CSS3 3D

CSS3 นั้นต่างไปจาก CSS2 มาก เพราะมันไม่ใช่มาตรฐานเดี่ยวๆ แต่ประกอบด้วยมาตรฐานย่อยๆ จำนวน “หลายสิบ” ชนิด ซึ่งหนึ่งในนั้นคือ CSS3 3D Transforms ที่สามารถแปลงสภาพวัตถุบนเว็บเพจในแบบต่างๆ เช่น ขยายขนาด หมุนเอียงตามแกน xyz

ดูตัวอย่างได้ที่ WebKit (ต้องใช้ WebKit เข้าด้วยนะครับ) หรือ The Web Rocks (Gecko/WebKit)

7. Performance & Integration

HTML5 - Performance & Integration

หมวดที่เจ็ดเป็นการปรับปรุงประสิทธิภาพการทำงานของเว็บแอพ แบ่งออกเป็น 2 ส่วนใหญ่ๆ

Web Worker

อธิบายง่ายๆ Web Worker คือจาวาสคริปต์ที่ทำงานแบบมัลติเธร็ด เพื่อให้สคริปต์สามารถทำงานเบื้องหลังได้หลายๆ งานพร้อมกัน

การใช้งานเราสามารถสั่งได้ที่ตัวโค้ดจาวาสคริปต์โดยตรง โดยสร้างตัวแปรชนิด worker ขึ้นมาบอกเบราว์เซอร์ว่า โค้ดจาวาสคริปต์ส่วนนี้ ขอให้ทำงานแบบ Web Worker เพื่อประสิทธิภาพที่ดีขึ้น

รายละเอียดอ่านเพิ่มที่ Wikipedia, W3C, Mozilla, HTML5 Rocks

XMLHttpRequest Level 2

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

XMLHttpRequest Level 2 เป็นความพยายามของ W3C ที่จะพัฒนา XMLHttpRequest รุ่นแรกให้มีประสิทธิภาพ-ความสามารถมากขึ้น แบ่งได้ง่ายๆ 3 อย่าง ได้แก่

  • การแยกแยะเหตุการณ์ (event) แต่ละชนิดออกจากกัน ช่วยให้โปรแกรมเมอร์ติดตามและควบคุมการส่งข้อมูลได้ง่ายขึ้น
  • รองรับการอัพโหลดไฟล์จากฝั่งไคลเอนต์ (เดิมที่ไม่รองรับการส่งไฟล์) ซึ่งจะใช้ควบคู่กับ File API ในหัวข้อก่อน
  • ส่งข้อมูลแบบข้ามหลายโดเมน ซึ่งรุ่นก่อนเรียกได้เฉพาะโดเมนเดียวกัน

รายละเอียดอ่านได้จาก AJAX 2: What is coming with XMLHttpRequest Level 2? – JS Classes blog

8. CSS3

HTML5 - CSS3

CSS3 มีความสามารถเพิ่มขึ้นจาก CSS2 ในปัจจุบันมาก เพิ่มฟีเจอร์ของแวดวงสิ่งพิมพ์ที่เกี่ยวข้องกับการจัดหน้า การควบคุมการไหลของข้อความ และฟอนต์เข้ามาอีกมาก แต่ก็ยังมีเรื่องอื่นๆ เช่น 3D, เสียงพูด, แอนิเมชัน ฯลฯ (ดูข่าวเก่าเรื่อง CSS3 Regions ประกอบ)

เทคโนโลยีอีกตัวที่เกี่ยวข้องกันคือ Web Open Font Format (WOFF) ที่ช่วยให้เราฝังฟอนต์เข้ามาในเว็บเพจได้ด้วย

รายการของชุดเทคโนโลยีใน CSS3 ทั้งหมดดูได้จาก CSS3.info

สถานะการรองรับ HTML5 ของเบราว์เซอร์ต่างๆ

เทคโนโลยีทั้ง 8 หมวดเป็นตัวแทนของเทคโนโลยีเว็บรุ่นใหม่ อย่างไรก็ตาม เทคโนโลยีเยอะขนาดนี้ซับซ้อนมาก และต้องใช้เวลาอีกนานกว่าจะทำเสร็จ อย่างไรก็ตาม เบราว์เซอร์ในปัจจุบันก็เริ่มรองรับมาตรฐาน “ฉบับร่าง” ในบางประเด็นแล้ว และเว็บดังๆ บางแห่งก็เริ่มใช้ฟีเจอร์ HTML5 กับงานจริงแล้วเช่นกัน

เพื่อให้ติดตามได้ง่ายว่าเบราว์เซอร์ตัวไหนรองรับฟีเจอร์อะไรบ้าง ก็มีเว็บไซต์หลายแห่งทำตาราง-แผนภาพเปรียบเทียบให้ดูง่ายๆ เช่น

  • Wikipedia ข้อมูลละเอียดพร้อมลิงก์อ้างอิง
  • Can I Use ทำตารางเปรียบเทียบว่าคุณสมบัติใดใช้ได้บนเบราว์เซอร์ยี่ห้อไหน รุ่นไหนได้บ้าง
  • FindmebyIP.com ทำตารางเปรียบเทียบแบบดูง่ายๆ ภายในเว็บเพจหน้าเดียว
  • HTML5Test.com ทดสอบกับเบราว์เซอร์ที่เราใช้อยู่ในขณะนั้น และได้ผลลัพธ์ออกมาเป็นคะแนนรวม
  • HTML5 Readiness ทำเป็นแผนภาพ infographic แบบครึ่งวงกลม แยกตามมาตรฐานแต่ละส่วน (ใช้ข้อมูลจาก Can I Use อีกทีหนึ่ง)

ข้อมูลเพิ่มเติม

คัดมาเฉพาะอันที่เจ๋งๆ นะครับ ตามไปอ่านกันต่อได้

เว็บไซต์ของผู้ผลิตเบราว์เซอร์

  • HTML5 Rocks ของกูเกิล มีทั้งเอกสาร tutorial และโค้ดสำหรับทดสอบ-สาธิตการทำงาน
  • หน้าแนะนำ HTML5 ของ Mozilla Developer Network รวมข้อมูลเชิงเทคนิคไว้ครบถ้วน
  • HTML5 Labs เว็บไซต์สำหรับนักพัฒนา HTML5 ของไมโครซอฟท์
  • HTML5 Please แนะนำโดยคุณ @pittaya

เดโม

เอกสารอื่นๆ

  • HTML5 for Web Developers สเปก HTML5 แบบอ่านง่าย เหมาะสำหรับนักพัฒนาเว็บ ตัดส่วนที่ไม่สำคัญในสเปกของ W3C ออกไป
  • W3Schools HTML5 Tutorial เป็น online reference/tutorial แบบสั้นๆ ตามสไตล์ของ W3Schools
  • เอกสารของ InfoWorld เป็น PDF ที่เขียนโดยนิตยสาร InfoWorld ต้องสมัครสมาชิกก่อนจึงจะโหลดได้ (โหลดฟรี) ข้อมูลละเอียดและเนื้อหาอัพเดต
  • Dive Into HTML5 หนังสือแจกฟรีของ Mark Pilgrim

บทความดีๆจาก http://www.blognone.com/

การนำเสนอเนื้อหา แบบโครงสร้าง 2 Column (Fix Layout)

การนำเสนอเนื้อหา แบบโครงสร้าง 2 Column (Fix Layout)

2 column แบบ Fix Layout

หากเราต้องการสร้างเว็บไซต์ ที่มีเนื้อหาแบ่งเป็น 2 column แบบ Fix Layout ความกว้างของเว็บไซต์ 960 พิกเซล และให้อยู่กลางหน้าจอเสมอ โดยกำหนดให้มีส่วนหัว (header) ส่วนเนื้อหา (main content) และ ส่วนท้าย (footer) จะเริ่มต้นอย่างไร

เริ่มต้น

สร้าง html เปล่า โดยกำหนด doctype ให้เป็นแบบ XHTML 1.0 Transitional (ใช้ dreamweaver สร้าง)

จะได้ code html ดังนี้

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>การนำเสนอเนื้อหา แบบโครงสร้าง 2 Column (Fixed Layout)</title>
</head>

<body>
</body>
</html>

เริ่มเขียนโครงสร้างหลัก3 ส่วน คือ header, main content และ footer โดยใช้ div ในการแบ่งโครงสร้าง

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>การนำเสนอเนื้อหา แบบโครงสร้าง 2 Column (Fixed Layout)</title>
</head>
<body>
<div class="header">
        <h1>การนำเสนอเนื้อหา แบบโครงสร้าง 2 Column (Fixed Layout)</h1>
</div>
<div class="maincontent">
        <h2>เนื้อหา</h2>
</div>
<div class="footer">
        <p>By Corporate UI & Design</p>
</div>
</body>
</html>

ในส่วนของเนื้อหา กำหนดให้เป็น 2 Column

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>การนำเสนอเนื้อหา แบบโครงสร้าง 2 Column (Fixed Layout)</title>
</head>
<body>
<div class="header">
        <h1>การนำเสนอเนื้อหา แบบโครงสร้าง 2 Column (Fixed Layout)</h1>
</div>
<div class="maincontent">
        <div class="left">
            <h2>Left Column</h2>
        </div>
        <div class="content">
            <h2>Content</h2>
        </div>
</div>
<div class="footer">
        <p>By Corporate UI & Design</p>
</div>
</body>
</html>

สร้างไฟล์ external style sheet เปล่า ชื่อ main.css และ ลิ้งค์ไว้ใน ….

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>การนำเสนอเนื้อหา แบบโครงสร้าง 2 Column (Fixed Layout)</title>
<link href="cs/main.css" rel="stylesheet" type="text/css" media="screen" />
</head>
…

เขียน css เพื่อจัดหน้าตาเว็บไซต์ โดยเริ่มกำหนดค่าเริ่มต้นก่อน

@charset "utf-8";
/* CSS Document */
/*Reset*/
* { margin: 0; padding: 0; }
body { font-family: tahoma; font-size: 13px; color: #101010; }

เขียนโครงสร้างของ 3 ส่วนหลัก

.header, .maincontent { width: 960px; margin: 0 auto 15px; }
.footer { width: 960px; margin: 0 auto; }

จัดโครงสร้างในส่วนของ main content

.maincontent { overflow: hidden; }
.left { float: left; width: 300px; }
.content { margin: 0 0 0 315px; }


การเขียนคําว่า “สนุกดอทคอม” แบบที่ถูกต้อง

การเขียนคําว่า “สนุกดอทคอม” แบบที่ถูกต้อง

Sanook

บ่อยครั้งที่เราจําเป็นต้องเขียนถึงชื่อบริษัทของเรา หรืออาจจะได้รับข้อมูลที่ส่งมาจากทีมอื่นๆ เพื่อมาทํางาน
อาจจะไม่เคยมีใครบอกว่าใช้ยังไงถึงจะถูกต้อง วันนี้มีคําตอบมาให้แล้วครับ
ช่วยกันใช้ให้ถูกต้องตามข้อกําหนดด้วยครับ

สอบถามข้อมูลได้จากทีม Corporate Communication ของบริษัท

การเขียนถึงสนุกดอทคอม แบบที่ถูกต้อง

  • สนุกดอทคอม
    (หากเขียนสนุกดอทคอมคำเต็ม ไม่ต้องมีเครื่องหมาย ! หลังคำว่าสนุก)

  • Sanook.com
    (ต้องขึ้นต้นด้วย S ตัวใหญ่เสมอ)

  • สนุก! (คำว่าสนุก! ต้องมีเครื่องหมาย ! ต่อท้ายทุกครั้ง)

  • Sanook!
    (คำเขียนภาษาอังกฤษต้องขึ้นต้นด้วย S ใหญ่และมีเครื่องหมาย ! ต่อท้ายทุกครั้ง)

  • Sanook! News
    (สำหรับคำภาษาอังกฤษ Sanook! วรรค ตามด้วยชื่อบริการ , Sanook!
    ให้ใช้ S ตัวใหญ่นำหน้า และ ขึ้นต้นชื่อบริการด้วยตัวอักษรภาษาอังกฤษตัวแรกตัวใหญ่เสมอ)

  • สนุก! ข่าว
    (ถ้าใช้ภาษาไทยก็ต้องเป็นคำไทยทั้งหมด เช่น สนุก! วรรค ตามด้วยชื่อบริการ )

  • S! News
    (โดยปกติคำเขียนห้ามใช้ S! ย่อ เนื่องจากคนจะอ่านว่า “เอส !” ไม่ได้อ่านว่า “สนุก!”
    จึงให้ใช้ได้เฉพาะบางกรณีเท่านั้น เช่น ชื่อของ Mobile application ที่ถูกจำกัดความยาว)

การเขียนถึงสนุกดอทคอม แบบที่ผิด ห้ามใช้

  • (X) สนุก! ดอทคอม
  • (X) Sanook!.com
  • (X) สนุก (เขียนผิดเพราะไม่มีเครื่องหมาย ! ต่อท้าย)
  • (X) Sanook (เขียนผิดเพราะไม่มีเครื่องหมาย ! ต่อท้าย)
  • (X) S! (เขียนผิดเพราะ S! ย่อจะใช้ได้เฉพาะที่เป็นโลโก้เท่านั้น)
  • (X) Sanook!News (เขียนผิดเพราะหลัง Sanook! ต้องเว้นวรรคแล้วตามด้วยชื่อบริการ)
  • (X) สนุก! News (เขียนผิดเพราะปนภาษาไทยและอังกฤษ)
  • (X) Sanook! ข่าว (เขียนผิดเพราะปนภาษาไทยและอังกฤษ)

การเขียนถึงชื่อบริษัท

  • บริษัท สนุก ออนไลน์ จำกัด / Sanook Online Limited
  • บริษัท สนุก ช้อปปิ้ง จำกัด / Sanook Shopping Limited
  • บริษัท ท้อปสเปซ (ประเทศไทย) จำกัด / Topspace (Thailand) Co., Ltd
  • บริษัท เลเวลอัพ ออนไลน์ จำกัด / Levelup Online Co., Ltd.

User Experience

User Experience

User Experience

หมายถึง การรวมประสบการณ์ในทุกด้านของยูเซอร์ ที่มีการโต้ตอบ ในสินค้าและบริการของบริษัท

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

โดย UX ที่แท้จริงมีความหมายครอบคลุมกว้างกว่า สิ่งที่ลูกค้าต้องการ หรือ สิ่งที่เราจัดไว้ให้ และเพื่อให้บรรลุเป้าหมาย UX ที่มีคุณภาพ จะต้องมีการผสมผสานกันอย่างกลมกลืน จากหลายๆ บริการ รวมไปถึง การออกแบบวิศวกรรม การตลาด การออกแบบกราฟฟิค การออกแบบอุตสาหกรรม และ การออกแบบInterface

 

นิยามของการออกแบบ
Design is the process of finding the most elegant answer to the question of ‘how do I…?’ (Scrivs)
การออกแบบคือ กระบวนการหาคำตอบที่สวยงามที่สุดสำหรับคำถามที่ว่า ฉันจะทำมันอย่างไร

Design is a set of decisions about a product. It’s not an interface or an aesthetic, it’s not a brand or a color. Design is the actual decisions.! (Rebekah Cox)
การออกแบบคือ ชุดของความตัดสินใจซึ่งเกี่ยวกับผลิตภัณฑ์ มันไม่ใช่แค่รูปร่างหน้าตาหรือความงาม มันไม่ใช่เครื่องหมายการค้าหรือสี แต่การออกแบบคือ การตัดสินใจอย่างแท้จริง!

 

Why is user experience design important?

  1. เพื่อปรับปรุงจุดประสงค์
  2. เพื่อความรวดเร็วและตรงกลุ่มเป้าหมาย
  3. เพื่อเพิ่มมูลค่าผู้ใช้
  4. เพื่อยืดเวลาให้ผู้ใช้ใช้งานนานขึ้น

 

The elements of user experience (องค์ประกอบของ UX)

องค์ประกอบของ UX

User experience research

  • ลงสนามพบวัฒนธรรมผู้ใช้จริง
  • คิด Concept ของแบบทดสอบ
  • ออกแบบโดยให้หลายฝ่ายมีส่วนร่วม
  • สำรวจความคิดเห็น
  • ตำแหน่งที่ตามอง Eye Tracking
  • เรียงลำดับข้อมูล
  • ทดสอบในห้องปฏิบัติการก่อน

Eye Tracking ของ Form
ตำแหน่งของ Text อยู่บนกล่อง ถูกมองเห็นได้มากที่สุด

ตำแหน่งการมองที่ดีที่สุด ของแบบฟอร์ม

Content Strategy (กลยุทธ์ในการเขียนเนื้อเรื่อง)

กล่าวได้ว่า Content Strategy is Design!

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

กลยุทธ์ในการเขียนเนื้อเรื่อง

Interaction Design

Interaction design จะเป็นตัวกำหนดโครงสร้างและพฤติกรรมของผู้ใช้ ที่ใช้สินค้าหรือผลิตภัณฑ์แบบที่ต้องมีปฏิกริยาตอบโต้

Interaction design เป็นพื้นฐานในการทำความเข้าใจผู้ใช้ที่แท้จริง (ทั้งในแง่ เป้าหมาย ภารกิจ ประสบการณ์ ความต้องการ) กับความสมดุลย์ ระหว่าง ความต้องการ เป้าหมาย และความสามารถทางเทคโนโลยีของธุรกิจ

 

10 heuristics for user interface design (10 หลักการทั่วไปสำหรับการออกแบบ User Interface Design)

http://www.useit.com/papers/heuristic/heuristic_list.html

1. Visibility of system status
การแสดงผล ของสถานะของระบบ (ระบบควรแจ้งให้ผู้ใช้ทราบเกี่ยวกับสิ่งที่กำลังทำ ผ่าน text, graphic ในช่วงเวลาที่เหมาะสมเพื่อเสริมความเข้าใจ)

2. Match between system and the real world
ปรับให้ระบบเหมือนกับโลกแห่งความจริง (ส่วนที่เกี่ยวกับระบบควรจะปรับให้เป็นภาษาพูด ให้ผู้ใช้เข้าใจง่ายไม่ใช้ภาษาคอมพิวเตอร์มากเกินไป)

3. User control and freedom
การควบคุมการใช้งานของผู้ใช้ และอิสระของผู้ใช้ (ผู้ใช้งานมักจะเลือกหรือคลิกทำงานบางอย่างแบบไม่ตั้งใจ เราต้องมีการระบุไว้อย่างชัดเจนว่า เมื่อคลิกพลาดหรือทำพลาดแล้ว จะแก้ไขหรือออกจากการทำงานอันไม่พึงประสงค์นี้อย่างไร เพื่อที่จะได้ไม่มีการมาทำผิดซ้ำ)

4. Consistency and standards
การออกแบบที่สอดคล้องต่อเนื่องกัน และมาตราฐานเดียวกัน (รวมทั้งผู้ใช้ไม่ควรต้องสงสัยในคำที่เขียนต่างกัน ในแต่ละจุด ถ้ามันหมายถึงสิ่งเดียวกัน ควรใช้คำ คำเดียวให้เป็นมาตราฐาน

5. Error prevention
การตรวจเช็คจะป้องกันปัญหาที่ยูสเซอร์อาจคลิกหรือทำ Action อะไรผิดได้

6. Recognition rather than recall
เห็นแล้วจำได้เลยดีกว่าต้องนึกคิดก่อน เช่น การตั้งชื่อปุ่ม ควรชัดเจนไม่ต้องให้นิ่งคิดตีความ เช่น ปุ่ม Save กับ OK ปุ่ม Save ชัดเจนกว่า หรือ คำว่าคลิกที่นี่ ควรเปลี่ยนเป็น คลิกดูทั้งหมด เป็นต้น

7. Flexibility and efficiency of use
เว็บควรจะหยืดหยุ่น และใช้งานได้เต็มประสิทธภาพที่ควรจะเป็น ตอบสนองความต้องการได้ทั้งผู้ใช้มือใหม่และมือเก่า

8. Aesthetic and minimalist design
การออกแบบที่สวยงาม และเรียบง่าย

9. Help users recognize and recover from errors
เมื่อเกิดการ errors ทั้งหลายจากระบบหรือจากการกรอก ควรมี pop upเตือนและแจ้งให้เข้าใจว่าผิดพลาดอะไรอย่างชัดเจน พร้อมวิธีแก้ไข

10. Help and documentation
เป็นการดีที่สุดถ้าออกแบบแล้วผู้ใช้เข้าใจได้ทันที แต่การทำหน้า Help, Tool Tip และ file.doc ให้ดาวน์โหลดไปอ่านก็เป็นตัวช่วยให้ผู้ใช้สามารถแก้ปัญหาต่างๆ ได้ด้วยตัวเอง

 

Visual Design
The principles of design หลักการออกแบบ

  1. Balance ความสมดุลย์
  2. Proximity ความใกล้ชิด เชื่อมโยง
  3. Alignment การจัดวาง
  4. Consistency ความกลมกลืน
  5. Contrast ความขัดแย้ง
  6. White space พื้นที่ว่างสีขาว

 

ตัวอย่าง Proximity ที่ดี (มีการจัดหมวดหมู่)

ตัวอย่าง การจัดหมวดหมู่ของเมนู

 

 

ตัวอย่าง Proximity ที่ดี (การจัดวางและตั้งชื่อปุ่ม)ตัวอย่าง การเชื่อมโยงที่ดี ของปุ่มกับแบบฟอร์ม

 

 

Alignment ที่ดี ยังต้องคำนึงถึงทิศทางของภาพประกอบ จุดนำสายตา รวมทั้งภาพที่สื่อความหมายไปในแง่บวกต่อธุรกิจ

ตัวอย่างการวาง Alignment ที่ดี ต้องคำนึงถึงทิศทางของภาพ และความคิดแง่บวกต่อธุรกิจ

 

 

การดีไซน์ White Space จะให้ความรู้สึกแตกต่างกันโดยสิ้นเชิง ตามลักษณะงาน ดีไซน์เนอร์ควรเลือกใช้ให้เหมาะสม

ตัวอย่างการใช้ White Space และความรู้สึกที่แตกต่าง

 

การดีไซน์เรื่อง Contrast ความขัดแย้ง
มีทั้ง สี และขนาด ดีไซน์เนอร์ใส่ความขัดแย้งลงไป เพื่อจะเน้นส่วนที่สำคัญให้อ่านและเข้าใจได้ทันทีว่า บริเวณนี้เป็นจุดเด่น อ่านง่าย ชัดเจน ตรงจุดประสงค์

ตัวหนังสือแบบพิมพ์ใหญ่จะอ่านง่ายกว่า ดังตัวอย่าง

ตัวอย่าง ความแตกต่างในด้านรูปทรงตัวอักษร

 

The Rule of Visual Design

 

ขั้นตอนการวางแผนและเตรียมงานนั้นเต็มไปด้วยความยุ่งยาก แต่จบลงด้วยความสบายของทุกฝ่ายขั้นตอนการวางแผนนั้นยุ่งยาก แต่จบลงด้วยความสบายของทุกฝ่าย

Update วิเคราะห์ OS,Browser พฤติกรรมคนดู ล่าสุด 05/09/2554

Update วิเคราะห์ OS,Browser พฤติกรรมคนดู ล่าสุด 05/09/2554

ตัวเลขอ้างจากการใช้งานหน้าแรก sanook.com ซึ่งปัจจุบันจํานวนผู้ใช้งานเฉลี่ยต่อวัน 13,593,058 (Page Views) ข้อมูลตัวเลขทั้งหมดจาก การเก็บ Stat ของ http://truehits.net

Mobile Devices จากจำนวนทั้งหมด 186 อันดับ [ดาวน์โหลด Excel]

NAME Pageview Percent
iPad 25,575 59.09
iPhone 11,358 26.24
iPod 811 1.87
BlackBerry 9780 328 0.76
NokiaBrowser 327 0.76
NokiaC5-03 306 0.71
Nokia5800d-1 242 0.56
NokiaE63-1 214 0.49
Nokia5233 213 0.49
BlackBerry8520 193 0.45
LG Android-MMS-V1.0 172 0.40
Nokia5230 157 0.36
Nokia5530c-2 155 0.36
BlackBerry 9800 141 0.33
Nokia5250 135 0.31
NokiaE72-1 125 0.29
NokiaE5-00 118 0.27
BlackBerry 9700 112 0.26
BlackBerry9700 110 0.25
NokiaC7-00 110 0.25
NokiaC6-00 93 0.21
NokiaC3-00 90 0.21
SAMSUNG-GT-S8530 89 0.21
HTC_DesireS_S510b 83 0.19
BlackBerry 9300 82 0.19
NokiaN8-00 75 0.17
NokiaX6-00 69 0.16
NokiaC5-00 64 0.15
SAMSUNG-GT-S7233E 62 0.14
SAMSUNG-GT-S5253 62 0.14
HTC_DesireHD_A9191 60 0.14
HTC 52 0.12
BlackBerry9000 49 0.11
HTC_Wildfire_A3333 43 0.10
SAMSUNG-GT-S8500 41 0.09
Sony EricssonLT15i 40 0.09
BlackBerry9300 36 0.08
HTC_DesireS_S510e 35 0.08
NokiaX5-01 35 0.08
NokiaE71-1 31 0.07
NokiaC2-03 29 0.07
NokiaN95_8GB 28 0.06
HTC_IncredibleS_S710e 28 0.06
SAMSUNG 27 0.06
Sony EricssonX10i 26 0.06
Nokia6700s 26 0.06
i-mobile i691 26 0.06
Nokia6760s-1 26 0.06
NokiaE52-1 25 0.06
NokiaC6-01 24 0.06
i-mobile I-Note 23 0.05
i-mobile i810 23 0.05
NokiaN95 23 0.05
NokiaN81-3 22 0.05
Sony EricssonJ108i 22 0.05
NokiaX3-02 22 0.05
HTC_DesireZ_A7272 21 0.05
NokiaE90-1 21 0.05
Nokia6300 20 0.05
HTC Tattoo 20 0.05

TOP Operating Systems for Mobile จากจำนวนทั้งหมด 24 อันดับ [ดาวน์โหลด Excel]

NAME Pageview Percent
Mac OS (iPhone) 12,201 53.76
Android 2.2 2,311 10.18
Android 2.2.1 2,164 9.54
Symbian OS 1,972 8.69
Android 2.3.3 1,546 6.81
RIM (BlackBerry) 1,069 4.71
Android 3.1 387 1.71
Android 2.2.2 332 1.46
Android 2.1-update1 272 1.20
Android 2.3.4 163 0.72
Android 1.6 74 0.33
Android 3.2 71 0.31
Android 46 0.20
Android 3.0.1 29 0.13
Android 1.6.2890 12 0.05
Android 1.5 9 0.04
Android 2.3.2 8 0.04
Android 1.9.88.v03 8 0.04
Windows Mobile 5 0.02
Android 2.1 5 0.02
Android 2.2.1.1832 4 0.02
Android GINGERBREAD 3 0.01
Android 2.3.5 2 0.01
Android Eclair 2 0.01

TOP Operating Systems จากจำนวนทั้งหมด 62 อันดับ [ดาวน์โหลด Excel]

NAME Pageview Percent
Windows XP 796,965 57.25
Windows 7 452,106 32.48
Windows Vista 53,504 3.84
Mac OS X 37,929 2.72
Mac OS X 10_6_8 13,662 0.98
Mac OS X 10.6 4,711 0.34
Mac OS X 10_5_8 4,688 0.34
Mac OS X 10_7_1 3,745 0.27
Mac OS X 10_6_7 2,951 0.21
Android 2.2 2,311 0.17
Android 2.2.1 2,164 0.16
Symbian OS 1,972 0.14
Linux i686 1,812 0.13
Mac OS X 10.5 1,603 0.12
Android 2.3.3 1,546 0.11
Mac OS X 10_6_6 1,486 0.11
Linux x86_64 855 0.06
Mac OS X 10_7 825 0.06
Windows 2000 809 0.06
Mac OS X 10.7 734 0.05
Mac OS X 10_4_11 721 0.05
Mac OS X 10_6_4 705 0.05
Mac OS X 10_6_3 514 0.04
Mac OS X 10_6_5 446 0.03
Android 3.1 387 0.03
Mac OS X 10.4 358 0.03
Android 2.2.2 332 0.02
Android 2.1-update1 272 0.02
Mac OS X 10_6_2 268 0.02
Mac OS X 10_5_7 249 0.02
Mac OS X 10_5_6 186 0.01
Mac OS X 10_7_0 180 0.01
Linux armv7l 178 0.01
Android 2.3.4 163 0.01
Mac OS X 10_6_1 109 0.01
Windows 98 95 0.01
Mac OS X 10_6 82 0.01
Windows Phone OS 75 0.01
Android 1.6 74 0.01
Android 3.2 71 0.01
Windows NT 55 0.00
Mac OS X 10_7_2 34 0.00
Mac OS X 10_5_4 30 0.00
Android 3.0.1 29 0.00
Mac OS X 10_5_5 20 0.00
Android 1.6.2890 12 0.00
Windows 95 10 0.00
Android 1.5 9 0.00
Android 2.3.2 8 0.00
Android 1.9.88.v03 8 0.00
Windows NT 6.2 7 0.00
Windows CE 5 0.00
Android 2.1 5 0.00
Android 2.2.1.1832 4 0.00
Android GINGERBREAD 3 0.00
Win 9x 4.90 3 0.00
Mac OS X Mach-O 2 0.00
Mac OS X 10_5_2 2 0.00
Linux mips 2 0.00
Android Eclair 2 0.00

TOP Browser Versions จากจำนวนทั้งหมด 425 อันดับ [ดาวน์โหลด Excel]

NAME Pageview Percent
MSIE 8.0 388,513 27.71
MSIE 7.0 279,418 19.93
Chrome 13.0.782.220 208,423 14.87
Firefox 6.0.1 118,101 8.42
MSIE 9.0 70,612 5.04
MSIE 6.0 63,744 4.55
Chrome 13.0.782.218 35,704 2.55
Firefox 3.6.21 35,299 2.52
Safari 6533.18.5 32,103 2.29
Firefox 6.0 11,756 0.84
Firefox 5.0 11,253 0.80
Safari 534.50 10,158 0.72
Firefox 4.0.1 8,064 0.58
Opera 9.80 6,954 0.50
Safari 533.21.1 6,431 0.46
Safari 533.1 6,412 0.46
Chrome 13.0.782.215 5,880 0.42
Firefox 7.0 4,873 0.35
Firefox 3.6.20 4,659 0.33
Mozilla 5.0 4,304 0.31
Firefox 3.0.19 4,029 0.29
Safari 534.48.3 3,838 0.27
Firefox 4.0 3,561 0.25
Firefox 5.0.1 3,019 0.22
Firefox 3.6.13 3,015 0.22
Firefox 3.6.18 2,823 0.20
Chrome 13.0.782.112 2,303 0.16
Chrome 12.0.742.122 2,282 0.16
Chrome 9.0.576.0 2,223 0.16
Safari 533.19.4 2,176 0.16
Safari 533.22.3 2,013 0.14
Safari 6531.22.7 1,949 0.14
Firefox 3.6.3 1,709 0.12
Chrome 10.0.648.204 1,639 0.12
Safari 531.21.10 1,591 0.11
Firefox 3.6.12 1,380 0.10
Chrome 11.0.696.68 1,139 0.08
Firefox 3.6.8 1,125 0.08
Firefox 3.6.17 1,069 0.08
Firefox 3.5.3 1,056 0.08
Safari 533.18.5 1,019 0.07
Firefox 3.6 1,016 0.07
Chrome 6.0.472.25 994 0.07
Firefox 3.6.10 896 0.06
Safari 533.20.27 855 0.06
Chrome 12.0.742.112 830 0.06
Firefox 3.5.7 796 0.06
Chrome 11.0.696.71 769 0.05
Safari 413 752 0.05
Chrome 13.0.782.107 738 0.05
Chrome 7.0.517.41 733 0.05
Chrome 11.0.696.77 713 0.05
Chrome 11.0.696.60 697 0.05
Firefox 3.6.15 690 0.05
Chrome 12.0.742.100 672 0.05
Chrome 8.0.552.215 666 0.05
Firefox 3.0.10 657 0.05
Firefox 3.6.16 656 0.05
Chrome 10.0.648.6 655 0.05
Firefox 3.5.19 621 0.04

TOP Resolution จากจำนวนทั้งหมด 1966 อันดับ [ดาวน์โหลด Excel]

NAME Pageview Percent
1024*768 321,160 22.90
1366*768 269,463 19.21
1280*800 222,010 15.83
1280*1024 87,706 6.25
1440*900 62,410 4.45
1600*900 51,983 3.71
1920*1080 36,939 2.63
1280*768 31,980 2.28
1360*768 31,751 2.26
1152*864 30,846 2.20
1280*720 26,069 1.86
768*1024 25,479 1.82
1024*600 20,357 1.45
1680*1050 19,604 1.40
1093*614 17,630 1.26
800*600 11,766 0.84
1280*960 11,694 0.83
320*480 11,557 0.82
1024*640 7,861 0.56
1311*737 4,951 0.35
1024*819 4,617 0.33
1152*720 3,667 0.26
1249*702 3,311 0.24
1536*864 3,250 0.23
1920*1200 3,152 0.22
1140*641 3,102 0.22
1192*670 2,729 0.19
911*512 2,401 0.17
1441*810 2,143 0.15
819*614 1,884 0.13
1024*576 1,645 0.12
2560*1440 1,494 0.11
983*737 1,340 0.10
1080*810 1,291 0.09
1344*840 1,202 0.09
1058*595 1,182 0.08
320*240 1,109 0.08
1067*600 1,107 0.08
1088*614 1,082 0.08
640*360 1,080 0.08
1229*983 1,021 0.07
1400*1050 1,008 0.07
1024*614 980 0.07
1600*1200 910 0.06
960*600 907 0.06
360*640 885 0.06
1017*572 862 0.06
1170*731 813 0.06
853*533 724 0.05
1229*768 710 0.05
1170*936 709 0.05
320*396 655 0.05
707*530 647 0.05
1143*857 623 0.04
240*320 612 0.04
640*480 596 0.04
1229*691 591 0.04
480*360 587 0.04
1024*1024 571 0.04
819*480 564 0.04

TOP color Depth จากจำนวนทั้งหมด 7 อันดับ

NAME Pageview Percent
32 1,050,343 74.87
24 318,181 22.68
16 31,627 2.25
4 2,645 0.19
8 40 0.00
15 37 0.00
12 2 0.00

Domain Name จากจำนวนทั้งหมด 88 อันดับ

NAME Pageview Percent
US Commercial (.com) 951,176 90.84
Thailand (.th) 91,519 8.74
United Kingdom (.uk) 790 0.08
Germany (.de) 504 0.05
Sweden (.se) 319 0.03
France (.fr) 309 0.03
Australia (.au) 271 0.03
Network (.net) 235 0.02
Switzerland (.ch) 161 0.02
Netherlands (.nl) 144 0.01
Finland (.fi) 126 0.01
Canada (.ca) 121 0.01
Japan (.jp) 118 0.01
Norway (.no) 109 0.01
Italy (.it) 101 0.01
Hong Kong (.hk) 87 0.01
Denmark (.dk) 78 0.01
Singapore (.sg) 77 0.01
Belgium (.be) 66 0.01
Non-Profit Organization (.org) 62 0.01
Korea (South,&nptr) (.kr) 59 0.01
Malaysia (.my) 58 0.01
Austria (.at) 46 0.00
Spain (.es) 43 0.00
Taiwan (.tw) 43 0.00
Laos (.la) 39 0.00
New Zealand (Aotearoa,&nptr) (.nz) 33 0.00
India (.in) 32 0.00
Ireland (.ie) 32 0.00
Samoa (.ws) 27 0.00
United Arab Emirates (.ae) 22 0.00
Russian Federation (.ru) 21 0.00
United States (.us) 20 0.00
Israel (.il) 18 0.00
Portugal (.pt) 18 0.00
Greece (.gr) 17 0.00
Cameroon (.cm) 14 0.00
Egypt (.eg) 14 0.00
Info (.info) 14 0.00
Turkey (.tr) 13 0.00
Philippines (.ph) 11 0.00
Saudi Arabia (.sa) 11 0.00
Sri Lanka (.lk) 10 0.00
Hungary (.hu) 10 0.00
Brazil (.br) 8 0.00
Turks and Caicos Islands (.tc) 8 0.00
South Africa (.za) 7 0.00
Ghana (.gh) 6 0.00
Chile (.cl) 6 0.00
Malta (.mt) 5 0.00
Libya (.ly) 5 0.00
Croatia (Hrvatska,&nptr) (.hr) 5 0.00
Indonesia (.id) 5 0.00
Morocco (.ma) 5 0.00
Argentina (.ar) 5 0.00
Pakistan (.pk) 5 0.00
Qatar (.qa) 5 0.00
China (.cn) 5 0.00
Viet Nam (.vn) 4 0.00
Slovenia (.si) 3 0.00

ตกแต่ง ie ด้วย CSS3

ตกแต่ง ie ด้วย CSS3

เจอแล้วตัวช่วยตกแต่ง ie6, ie7, ie8 ทำ border-radius, box-shadow, png (ie6) ได้ คราวนี้ เว็บเราก็จะสวยเหมือนๆ กันบนทุก browser แล้ว (เย้ๆ)

วิธีการทำก็ไม่ยากอะไร ทำตามดังนี้

1. ดาวน์โหลดไฟล์จากที่นี่ http://css3pie.com/download-latest
2. แตก zip… แล้วเราจะได้ไฟล์ PIE.htc มา (ใช้ไฟล์ PIE.htc นี่แหล่ะ) และไฟล์อื่นๆ อีกหลายไฟล์ (ไฟล์อื่นๆ เราไม่ได้ใช้ แต่ถ้าใครไปอ่านละเอียดๆ มันก็มีวิธีการนำมาใช้เช่นกัน ใครขยันอ่าน ก็มาบอกต่อกันได้สำหรับไฟล์อื่นๆ)
3. นำไฟล์ PIE.htc ไปวางไว้ที่ root ของเว็บของเรา หรือไว้ที่เดียวกันกับ ไฟล์ html หรือ php

เมื่อเครื่องมือพร้อม เราก็พร้อมลงมือกันล่ะ

ตัด html ของพวกเราตามปกติ เขียน css ตามปกติที่อยากจะทำ ใส่ border-radius, box-shadow, background-gradient โดยที่ ถ้า class ไหน หรือ element ไหนที่เราใช้ border-radius, box-shadow, background-gradient ใน class หรือ element นั้นๆ ให้เราเพิ่มคำสั่ง behavior: url(PIE.htc); ไปด้วย

ถ้าเป็น background ก็เพิ่มคำสั่ง -pie-background: url(image); ถ้าเป็น img ก็เพิ่ม img {-pie-png-fix: true;} อีก แต่ห้ามลืม behavior: url(PIE.htc);

หมายเหตุ

มันจะมีปัญหาที่บางครั้ง text บนพื้นที่เราทำ border-radius มันหายไปไหนไม่รู้ วิธีการแก้ไขก็คือ ให้ใส่
position: relative; z-index: 0; ไว้ที่ element body ข้อนี้เป็นประสบการณ์ที่ลองทำเอง เพราะใน doc ที่อ่านมา มันแค่บอกว่า ให้ใส่แบบนี้ แต่ไม่ได้บอกว่าให้ใส่ตรงไหน (หรืออาจจะแปลอังกฤษเป็นไทยไม่ค่อยเก่งเลยไม่เข้าใจ) แต่พอลองแล้ว มันก็ใช้ได้ …จึงมาบอกต่อ

ขอขอบคุณ เครื่องมือดีดี จาก
http://css3pie.com/

ทำให้พวกเราได้พัฒนางานให้มีหน้าตาได้มาตรฐานได้เท่ากันทุก browser เพื่อ user ของเรา

Web Design Trends in 2011

Web Design Trends in 2011

There is a thin line between design and development, and as we move into a new decade, this line is becoming extremely blurry. Is it enough to draw beautiful mock ups in Photoshop? Maybe 5 years ago. These days, the average internet user requires more. All beauty, with no substance, gets boring after a while. If your only goal is to impress a community of fellow designers with your flashy designs, you’ll find yourself quickly beneath the tide. 2011 is not about beauty, it’s about function. The trends for this new year and emerging decade are responsive design, constant connection and virtual reality.
2011