สวัสดีครับ ขออภัยที่ไม่ค่อยได้มาเขียนนะครับ เพราะหลังจากปิดเทอมก็ต้องรีบปั่นงานให้ทัน Deadline ไม่ได้หยุดพักกันเลยทีเดียว

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

บทความนี้จะแบ่งเป็นหลายส่วน ภาค 1 นี้จะพูดถึงโปรแกรมที่ใช้เขียนโค้ด HTML & CSS กันก่อนว่าผมใช้โปรแกรมอะไร ต้องขออภัยคนที่ใช้ Mac OS ด้วยนะครับเพราะผมใช้ Windows เลยจะแนะนำแค่โปรแกรม Windows ครับผม

ออกตัวไว้ก่อนว่าเว็บดีไซเนอร์แต่ละคนมีความถนัดและไม่ความชอบไม่เหมือนกัน เพราะฉะนั้นเครื่องมือที่ใช้ทำเว็บจะแตกต่างกันบ้างครับ (เช่น บางคนถนัด Dreamweaver ที่มี Preview เว็บให้ดูด้วย แต่อีกคนชอบเขียนโค้ดใน Notepad มากกว่า เป็นต้นครับ)

โปรแกรมเขียนโค้ดที่ดีควรทำอะไรได้บ้าง

• Syntax-Highlight
  ใส่สีที่แตกต่างกันบนแท็ก HTML / CSS ช่วยให้โค้ดอ่านง่ายขึ้นครับ ตอนอ่านจะได้ไม่สับสน
• File Explorer
  หน้าต่างลิสต์โฟลเดอร์ / ไฟล์เอาไว้เลือกไฟล์ที่จะเปิดมาแก้ได้ง่าย ๆ เหมาะกับงานที่มีหลาย ๆ ไฟล์ เช่น ทำธีม WordPress
• Project Management
  แบ่งงานเป็นโปรเจค เหมาะกับคนที่รับทีละหลาย ๆ งาน ข้อดีคือเราจะแยกแยะได้ง่ายเวลาต้องทำโปรเจคนู้นแล้วกลับมาทำโปรเจคนี้ต่อ โปรแกรมจะเปิดไฟล์ / โฟลเดอร์ของโปรเจคนั้น ๆ ขึ้นมาให้เลย
• Themes
  โปรแกรมเปลี่ยนธีม (สีของ Background / สีของ Syntax-Highlight) ได้ อันนี้จริง ๆ แล้วแต่คนชอบครับ เพราะผมชอบเขียนโค้ดบน Background สีเข้ม ถ้าเป็น Background สีขาวมันดูแสบตา
• Autocomplete
  เป็นการเดาโค้ดได้ว่าเราจะพิมพ์อะไรต่อ แล้วเติมให้เลยครับ เช่นว่าผมจะพิมพ์ <div>บลาๆ</div> แต่แค่พิมพ์ถึง </ โปรแกรมก็รู้แล้วว่าจะพิมพ์ </div> เป็นต้นครับ
  อีกตัวอย่างนึงคือ พอพิมพ์โค้ด CSS ว่า list-style: เสร็จก็จะมี properties ต่าง ๆ ที่ไว้ใส่ใน list-style: โผล่ขึ้นมาให้เห็นเลย
• Multiple Files Opening
  เปิดได้ทีละหลาย ๆ ไฟล์พร้อมกัน โปรแกรมส่วนใหญ่จะทำได้อยู่แล้วครับ มีประโยชน์มากสำหรับงานใหญ่ ๆ เช่นงานแนว Web Application เราก็เลือกเปิดเฉพาะไฟล์ที่เกี่ยวกับฟังก์ชั่นที่กำลังทำอยู่ก็พอครับ
• Free or Affordable Price
  อันนี้สำคัญที่สุดเลยครับ (สำหรับคนที่ทำงานด้านนี้จริงจัง) โปรแกรมควรจะมีราคาในระดับที่รับได้ หรือถ้าฟรีเลยก็ยิ่งดีครับ ช่วยลด Cost ในการทำเว็บดีไซน์ได้มากเลย

ใช้โปรแกรมเขียนโค้ด HTML CSS ตัวไหนมาบ้าง แต่ละตัวเป็นยังไง?

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

ต่อมาหลังจากผมได้รู้จัก Notepad++ ก็ใช้โปรแกรมนี้ทำงานมายาวเลยครับ ข้อดีคือธีมสวย (ชอบธีม Monokai ของมันมาก) โปรแกรมเบา โหลดเร็ว ฟังก์ชั่นพร้อมมาก ๆ แต่ข้อเสียคือทำเป็นโปรเจคไม่ได้ และความสามารถด้าน Autocomplete ไม่ค่อยเวิร์กครับ (เช่นว่าไฟล์ .php จะไม่มี autocomplete โค้ด HTML ให้เลย)

หลังจากนั้นผมก็หนีไปใช้ Mac OS ชั่วคราวครับ ใช้โปรแกรมชื่อ Coda ที่อินเตอร์เฟซสวยงาม + FTP เข้าไปแก้ไฟล์ได้เลย ชอบมากครับ ก่อนจะมาเจอ Espresso ที่ชอบระบบโปรเจคของโปรแกรมนี้มากกว่า ซึ่งใช้ไปสักพักนึง Macbook พังแถม Apple ไม่แคร์ครับ เลยกลับมาใช้ Windows

แน่นอนว่าใช้ Notepad++ เหมือนเดิมครับ โปรแกรมนี้โหลดเร็วดีชอบมากครับ เปลี่ยนธีมได้ด้วย แต่ด้วยเรื่อง Autocomplete นี่แหละที่เป็นปัญหาใหญ่ (จริง ๆ ก็ไม่ใหญ่ครับ แต่ถ้า Autocomplete ได้รับรองงานเร็วกว่าเดิมมากครับ)

เพื่อนแนะนำ Dreamweaver ให้ลองใช้ครับ ส่วนตัวไม่ชอบ Dreamweaver ตรงที่ดูมันใหญ่ โหลดช้า และฝังใจมาตั้งแต่ตอนเรียนว่าโปรแกรมนี้ไว้ใช้ด้าน WYSIWYG (What you see is what you get คือตกแต่งเหมือนใน Word เลย ไม่ต้องรู้โค้ด จิ้ม ๆ เครื่องมืออย่างเดียว)

อย่างสุดท้ายที่ไม่ชอบคือ มันเปลี่ยนธีมไม่ได้ครับ ไม่ชอบเขียนโค้ดใน Background ขาวครับ (แอบ Art 55)

แต่มารู้ทีหลังว่า Dreamweaver ทำธีมเองได้นะครับ เพื่อนคนที่แนะนำทำธีมสีดำมาให้ใช้เลย ก็เลยเอาไปใช้กับโปรเจค Web Application เว็บนึงครับ ชอบมาก ๆ โปรแกรมมี File Explorer ให้พร้อม และ Autocomplete ได้เทพมาก เสียอย่างเดียวตรงที่ราคาออกจะสูงไปนิดครับ

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

Autocomplete ทำได้เนี้ยบมาก แบ่งไฟล์เป็นโปรเจคจัดการได้ง่ายดี มีธีมให้เลือกใช้หลากหลายตามความชอบ โปรแกรมไม่หนักเกินไป ที่สำคัญมันฟรีด้วย ตอนนี้เอาไปใช้กับโปรเจคนึงเสร็จไปแล้ว คิดว่างานต่อ ๆ ไปก็จะใช้บริการโปรแกรมนี้ต่อครับ

สนใจ Komodo Edit 6 ไปหาได้ที่ไหน?

สำหรับท่านที่สนใจดาวน์โหลดโปรแกรมนี้ไปลองใช้กัน ไปที่
Komodo Edit: Free Open Source Editor

กดที่ปุ่ม Download Komodo Edit นะครับ ส่วนโปรแกรม Komodo IDE จะเป็นโปรแกรมเสียตังค์ของตระกูล Komodo ครับ เราเขียนโค้ด HTML & CSS ใช้แต่ตัว Edit ก็พอครับ

สำหรับท่านที่ต้องการดาวน์โหลดธีมสำหรับใช้ใน Komodo Edit เข้าไปโหลดที่: Kolormodo.com ได้เลยครับ มีธีมสวย ๆ ให้เลือกโหลดไปใช้กันฟรี ๆ

แล้วถ้าเขียน PHP ใช้โปรแกรมอะไรดี?

โปรแกรม Komodo Edit ไว้เขียน PHP ได้ด้วยครับ และมี Autocomplete เรียบร้อยเลย เรียกได้ว่าโปรแกรมเดียวทำได้ทั้ง Backend / Frontend เลยครับ

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

ขอบคุณที่ติดตามอ่านมาจนจบคร้าบ ตอนต่อไปจะพูดถึงเครื่องมือไว้เทสดีไซน์ใน Browser ต่าง ๆ

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

ตอนนี้การเขียน HTML5 และ CSS3 ก็มาแรงมาก ๆ ถ้ามี Editor เอาไว้ช่วยเขียนจะทำงานได้เร็วขึ้นมากเลยครับ

โปรแกรมที่ผมใช้บ่อย ๆ ตอนเขียน HTML กับ CSS บน Windows ก็คือ:

Notepad++ สุดยอด Text Editor สำหรับเขียน HTML/CSS/PHP

ถึงชื่ออาจจะทำให้คิดว่ามันเหมือนโปรแกรม Notepad ธรรมดาที่มาพร้อมวินโดว์ แต่จริง ๆ แล้วความสามารถมันเยอะกว่ามากครับ มีอะไรบ้างนั้นมาดูกันเลย:

• Highlight Syntax (ใส่สี syntax แต่ละส่วนแยกเป็นคนละสี เพื่อให้อ่านโค้ดได้สะดวกขึ้น) ได้หลายภาษาเลยครับ ตั้งแต่ Assembly ยัน PHP เพราะงั้นโปรแกรมเมอร์ทั้งมือเก่ามือใหม่ ทั้งคนที่เขียนเว็บหรือเขียนโปรแกรมทั่วไป ก็ได้ประโยชน์จากโปรแกรมนี้แน่นอน!!
• ขนาดโปรแกรมเพียง 14 mb และถ้าอัด Zip เหลือ 4 mb เท่านั้น!
• ไม่ต้องติดตั้ง เป็นโปรแกรมแบบ Portable ใส่ในแฟลชไดรฟ์ก็พกพาไปใช้ได้ทุกที่ (แบบติดตั้งก็มีให้ใช้ครับ แล้วแต่ชอบเลย)
• ความสามารถต่าง ๆ เทียบเท่าโปรแกรมเสียเงิน โดยเฉพาะอย่างยิ่งความสามารถพิเศษมากมายในเมนู TextFX และ Plugins ของโปรแกรมทำให้จัดการโค้ดสะดวกขึ้นมาก และมีความสามารถที่โปรแกรมเสียเงินหลาย ๆ ตัวไม่มีอีกด้วย
• เปลี่ยน Theme ได้! สำหรับคนที่เบื่อการเขียนโค้ดตัวอักษรสีดำบน Background สีขาวแล้ว ลองมาเขียนโค้ดใน Background เข้ม ๆ บ้างจะติดใจครับ (ตอนนี้ผมก็ใช้แบบ Background สีดำอยู่ครับ ชื่อธีม Monokai)
• ข้อสุดท้าย มันเป็นโปรแกรมฟรี ฟรีและดีจริง ๆ ช่วยให้งานทำเว็บไซต์สบายขึ้นอีกเยอะเลยครับ และด้วยความที่มันไม่มีเวอร์ชั่นเสียตังค์ ความสามารถทุกอย่างของโปรแกรมใช้ได้เต็มที่ ไม่มีล็อคครับ ไม่เหมือนอีกหลาย ๆ โปรแกรมที่มีทั้งเวอร์ชั่นฟรี กับเวอร์ชั่นเสียตังค์

สำหรับใครที่สนใจแล้ว สามารถไปอ่านรายละเอียดเพิ่มเติม และดาวน์โหลดได้ที่

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

โปรแกรมที่อยู่ในลิสต์นี้มีทั้งโปรแกรมฟรี และไม่ฟรีครับ นอกจากนั้นบางตัวก็ไม่ใช่แค่ Text Editor แต่ทำหน้าที่เป็น IDE (integrated development environment) หรืออธิบายง่าย ๆ ว่ามันเป็น Text Editor ที่สามารถ compile/debug/version control และอื่น ๆ อีกมากมายครับ ซึ่งเอาจริง ๆ เราใช้แค่ Text Editor ก็เพียงพอแล้วครับ เพราะ IDE จะเหมาะกับโปรแกรมเมอร์มากกว่า

ผมเป็นคนที่ค่อนข้างติดเกมส์ครับ (แต่เล่นเกมส์ไม่ค่อยเก่งเท่าไร) พอเห็นเรื่องนี้น่าสนใจก็รีบเอามานำเสนอทันทีเลยครับ

หลายคนอาจจะเคยได้ยินข่าวนานมาแล้วว่า มีคนทำเกมส์แบบ DOOM ด้วย HTML5 ซึ่งความจริงแล้วก็ไม่เชิงเป็นเกมครับ เป็นการทดลองใช้ความสามารถ Canvas ใน HTML5 ซึ่งเขียนมาตั้งแต่ปี 2005 แล้ว!!

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

ตัวอย่างเกมส์ที่อาจจะเคยเล่นกันมาแล้วก็คือ Pacman ที่อยู่ในโลโก้ Google ซึ่งทำด้วย HTML5 ครับ ตัวนี้กลายเป็นกระแสใน Twitter ไปพักนึงเลยครับ

อย่าเพิ่งคิดว่าเกมส์ที่สร้างด้วย HTML5 จะต้องใช้กราฟฟิกประมาณเกมส์ 8-bit เก่า ๆ นะครับ ถึงตัว Canvas จะเอาไว้วาดรูปแบบง่าย ๆ ได้ก็จริง แต่ก็สามารถนำกราฟฟิกที่ทำไว้แล้วมาใช้ได้นะครับ เพราะบางเกมส์ใช้กราฟฟิกแบบ 3 มิติสวยสด อนิเมชั่นเนียนมาก (เนียนไม่เนียนนี่คิดว่าขึ้นอยู่กับ RAM ของเครื่องครับ แล้วก็ขึ้นอยู่กับบราวเซอร์ด้วย ผมใช้ Google Chrome เล่นแล้วลื่นกว่าเล่นบน Firefox เยอะเลยครับ)

เกริ่นมาเยอะแล้ว ลองไปเล่นกันดูดีกว่าครับ บางเกมส์นี่ผมเล่นแบบเพลิน ๆ ไปแล้วติดใช้ได้เลย ตอนนี้ชักอยากทำเกมส์ด้วย HTML5 ขึ้นมาแล้วครับ

[button color=green size=medium link=http://www.webdeveloperjuice.com/2011/01/09/14-html5-games-to-make-you-stand-still/ target=blank]14 เกมส์สร้างด้วย HTML5 ที่จะทำให้คุณติดใจ[/button]

[button color=orange size=medium link=http://html5games.com/ target=blank]รวมเกมส์ HTML5 ทุกประเภท ทุกรูปแบบ[/button]

]]> http://www.designil.com/%e0%b9%81%e0%b8%99%e0%b8%b0%e0%b8%99%e0%b8%b3-%e0%b9%80%e0%b8%81%e0%b8%a1%e0%b8%aa%e0%b9%8c-html5-canvas.html/feed 8 http://www.designil.com/html5-tips-tricks-techniques-2.html http://www.designil.com/html5-tips-tricks-techniques-2.html#comments Tue, 08 Jun 2010 03:06:37 +0000 designil http://www.designil.com/?p=364

สำหรับท่านที่ไม่ได้อ่านตอนที่ 1 สามารถตามอ่านได้ที่นี่เลยครับ: [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 1)

บทความและภาพประกอบบางส่วนนำมาจาก บลอค W3Avenue หากท่านใดชำนาญภาษาอังกฤษ อยากฝึกภาษา ก็สามารถตามลิงค์ไปอ่านบทความต้นฉบับได้เลยครับ

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

คราวที่แล้วเราพูดถึงเรื่องการเขียน Semantic Markup ใน HTML5 กันไปแล้ว คราวนี้มาพูดถึง Form (แบบฟอร์มที่กรอก ๆ กันบนหน้าเว็บไซต์นั่นเอง) มาดูกันว่าใน HTML5 ฟอร์มจะเจ๋งขึ้นขนาดไหน

HTML5 Form

ก่อนอื่นต้องขอบอกก่อนว่า ในตอนนี้ (ที่เขียนบทความอยู่) เว็บบราวเซอร์ที่ซัพพอร์ท HTML5 Form ได้ดีที่สุด ก็คือ Opera ครับ เพราะฉะนั้นถ้าอยากเห็นการทำงานจริง ๆ ของมันต้องไป ดาวน์โหลด Opera มาก่อนนะครับ

ความสามารถใหม่ ๆ ของฟอร์ม HTML5

• Input Type แบบใหม่
  color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, และ url
• Attribute ใหม่
  required, autofocus, pattern, list, autocomplete และ placeholder
• Element ใหม่
  <keygen>, <datalist>, <output>, <meter> และ <progress>

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

เราลองมาดูโค้ดตัวอย่างของการใช้ความสามารถใหม่ ๆ ของ HTML5 กันนะครับ เมื่อแสดงผลในเว็บบราวเซอร์ที่รองรับ HTML5 Form ได้ (ในตอนนี้คือ Opera) ก็จะแสดงผลตามในรูป HTML5 Form Demo Image เลยครับ

ส่วนคนที่อยากลองเทสในบราวเซอร์ตัวเองว่าซัพพอร์ท HTML5 Form ได้ขนาดไหน (ลองเอาไปเปรียบเทียบกับในรูป) ก็เชิญที่ HTML5 Form Demo Page เลยครับ

<form>
 <fieldset>
 <legend>New Attributes</legend>
 <p>
 <label>Required:</label>
 <input type="text" name="html5requied" required="true">
 <small>Works in Opera & Chrome</small>
 </p>
 <p>
 <label>AutoFocus:</label>
 <input type="text" name="html5autofocus" autofocus="true">
 <small>Works in Opera, Chrome & Safari</small>
 </p>
 <p>
 <label>PlaceHolder:</label>
 <input type="text" name="html5placeholder" placeholder="This Will Show in WebKit">
 <small>Works in Chrome & Safari</small>
 </p>
 <p>
 <label>Input Pattern:</label>
 <input type="text" pattern="[0-9][A-Z]{3}" name="html5pattern" required title="Enter a digit followed by three uppercase letters"/>
 <small>Works in Opera & Chrome</small>
 </p>
 <p>
 <label>Multiple Files:</label>
 <input type="file" name="html5multiplefileupload" multiple>
 <small>Works in Chrome, Safari & Firefox</small>
 </p>
 <p>
 <label>List:</label>
 <input type="text" name="html5textwithdatalist" list="colors">
 <datalist id="colors">
 <option value="Red">
 <option value="Green">
 <option value="Blue">
 </datalist>
 <small>Works in Opera</small>
 </p>
 </fieldset>

 <fieldset>
 <legend>New Input Types</legend>
 <p>
 <label>Email:</label>
 <input type="email" name="html5email">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>URL:</label>
 <input type="url" name="html5url">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Number:</label>
 <input type="number" name="html5number" min="1" max="10" step="1" value="1">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Range:</label>
 <input type="range" name="html5range" min="-100" max="100" value="0" step="10">
 <small>Works in Opera, Chrome & Safari</small>
 </p>
 <p>
 <label>Time:</label>
 <input type="time" step="900" name="html5time">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Date:</label>
 <input type="date" name="html5date">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Month:</label>
 <input type="month" name="html5month">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Week:</label>
 <input type="week" name="html5week">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>DateTime:</label>
 <input type="datetime" name="html5datetime">
 <small>Works in Opera</small>
 </p>
 </fieldset>

 <div><button>Submit</button></div>
</form>

HTML5 Audio & Video

หลายคนน่าจะเคยได้ยินกันมาบ้างเรื่องการเล่น Video ของ HTML5 ครับ เพราะเป็นที่ถกเถียงกันพอสมควรกับ Adobe Flash ซึ่งข้อดีของ HTML5 Video ที่มีเหนือ Adobe Flash คือ มันรันได้โดยที่ไม่ต้องใช้ปลั๊กอินอะไรเพิ่มเลย และไม่ต้อง embed โค้ดยาว ๆ แค่ใส่แท็ก HTML5 สั้น ๆ ไปก็เรียบร้อย (ส่วนข้อดีของคนดู คือ จะดูดไฟล์ก็ทำได้ง่าย ๆ ไม่ต้องไปพึ่งเว็บ พึ่งโปรแกรมดูด)

หมายเหตุ: ไฟล์เสียง/วีดิโอพวกนี้ใช้ Firefox ก็รันได้นะครับ ไม่ต้องใช้ Opera อย่างเดียวเหมือน HTML5 Form

ก่อนอื่นมาดูกันว่าไฟล์เสียง/วีดิโอนามสกุลไหนบ้างที่ซัพพอร์ทบนเว็บบราวเซอร์:

• ไฟล์เสียง: ogg (ogg, oga), mp3, wav, AAC
• ไฟล์วีดิโอ: ogg (ogv), H.264 (mp4)

เราสามารถตั้งไฟล์ได้มากกว่า 1 นามสกุลในแท็กอันเดียว เพื่อให้บราวเซอร์เลือกไปเล่นไฟล์นามสกุลอื่นกรณีที่ไม่ซัพพอร์ทไฟล์แรกได้อีกด้วย ลองดูตัวอย่างโค้ดสำหรับรันไฟล์เสียงอันนี้:

Audio Player

<audio controls>
<source src="demo-audio.ogg" />
<source src="demo-audio.mp3" />
</audio>

จะเห็นได้ชัดว่าโค้ด HTML5 สั้นมาก ๆ และยังรองรับการกำหนดหลายไฟล์อีกด้วย

ด้านบนนี้เป็นรูปนะครับ สามารถเข้าไปดูของจริงบนบราวเซอร์ได้ที่ HTML5 Audio Demo

Video Player

<video width="320" height="240" controls preload="none" poster="videoframe.jpg">
 <source src="demo-video.mp4" type="video/mp4" />
 <source src="demo-video.ogv" type="video/ogg" />
</video>

โค้ดสำหรับใส่วีดิโอบนหน้าเว็บไซต์ก็ยาวกว่าเล่นเสียงนิดเดียวเอง โดยหน้าตาของมันเวลาเล่นบนเว็บบราวเซอร์จะเป็นแบบนี้

โดยถ้าอยากลองทดสอบของจริงบนเว็บบราวเซอร์ของคุณ ก็ลองแวะไป HTML5 Video Demo ได้เลยครับ

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

HTML5 Graphics with Canvas

นอกจากเรื่องของ HTML5 Video ที่โด่งดังแล้ว ความสามารถในการวาดรูปบน HTML5 ก็เป็นที่พูดถึงไม่แพ้กัน โดยเท่าที่ผมลองไปศึกษามาดูนั้น การวาดรูปใน Canvas ต้องใช้ Javascript วาดอีกที เพราะฉะนั้นควรเขียน Javascript พื้นฐานเป็นนิดหน่อย และมีความรู้เรขาคณิตเบื้องต้นครับ

ข้อดีของ Canvas ก็คือ บราวเซอร์ที่รองรับมีเยอะมากครับ (Firefox 3, Safari 3.1, Chrome 2, และ Opera 9.6) ซึ่งสำหรับ Internet Explorer ที่ไม่รองรับ เราสามารถใช้เทคนิค Javascript ที่เรียกว่า ExplorerCanvas ในการแสดงผลบน IE ได้ครับ

เราลองมาดูตัวอย่างโค้ดการใช้ Canvas กันครับ โค้ดจะยาวสักหน่อยครับ:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>HTML5 Canvas Demo</title>
 <link rel="stylesheet" href="html5reset.css" type="text/css" />
 <link rel="stylesheet" href="html5simple.css" type="text/css" />
 <!--[if lt IE 9]>
 <script src="html5.js"></script>
 <script src="excanvas.js"></script>
 <![endif]-->
 <script type="text/javascript">
 function draw(){
 var canvas = document.getElementById('mycanvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');

 // Draw Rectangle
 ctx.fillStyle = "rgb(255,0,0)";
 ctx.fillRect (10, 10, 100, 100);

 // Draw Circle
 ctx.fillStyle = "rgb(0,255,0)";
 ctx.beginPath();
 ctx.arc(125,100,50,0,Math.PI*2,true);
 ctx.fill();
 ctx.closePath();

 // Draw Custom Shape With Lines
 ctx.fillStyle = "rgb(0,0,255)";
 ctx.beginPath();
 ctx.moveTo(125,100);
 ctx.lineTo(175,50);
 ctx.lineTo(225,150);
 ctx.fill();
 ctx.closePath();

 // Draw Image From External File
 var myImage = new Image();
 myImage.onload = function(){
 ctx.drawImage(myImage, 220, 10);
 }
 myImage.src = "sample.jpg";

 }
 }
 </script>
 <style type="text/css">
 canvas {
 border: 5px solid #ccc;
 background: #000;
 }
 </style>
</head>
<body onload="draw();">
 <header>
 <h1>HTML5 Canvas Demo</h1>
 </header>

 <figure>
 <canvas id="mycanvas" width="300" height="200">Fallback content, in case the browser does not support Canvas.</canvas>
 <figcaption>Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)</figcaption>
 </figure>
</body>
</html>

เวลาแสดงผลจะออกแบบเป็นแบบนี้รูปด้านล่างนี้ครับ

จากโค้ด จะเห็นได้ว่าเราใช้วิธีสร้าง <canvas> ขึ้นมา แล้วเอา Javascript วาดรูปลงไปในแท็ก <canvas> ครับ ใครอยากลองเทสบนบราวเซอร์ตัวเองก็แวะไปที่ HTML5 Canvas Demo นะครับ

สำหรับบทความตอนที่ 2 ก็ขอจบลงแต่เพียงเท่านี้ก่อนครับ ในตอนหน้าจะเป็นตอนสุดท้ายแล้วครับ (ถ้ายังมีคนอ่าน)

สงสัย หรือมีความคิดเห็นอะไร เชิญโพสได้ตามสะดวกเลยนะครับ หรือถ้าใครชอบก็รบกวนกด Retweet เพื่อเผยแพร่บทความให้ด้วยครับ ขอบคุณมากครับผม

เนื่องจากกระแส HTML5 ตอนนี้มาแรงมากครับ กระแสแรงพอ ๆ กับ CSS3 เลยทีเดียว แต่บางคนอาจเคยได้ยินแต่ชื่อ ไม่รู้ว่า HTML5 มันเอาไว้ทำอะไรกันแน่ ผมก็เลยนำบทความนี้มาฝากกันครับ

บทความนี้นำมาจาก บลอค W3Avenue หากท่านใดชำนาญภาษาอังกฤษ อยากฝึกภาษา ก็สามารถตามลิงค์ไปอ่านบทความต้นฉบับได้เลยครับ

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

จุดเด่นของ HTML5

ความสามารถทั้งหมดของ HTML5 สามารถอ่านได้จาก เอกสารอย่างเป็นทางการของ HTML5 (ภาษาอังกฤษ) ครับ หรือถ้าชอบอะไรง่าย ๆ สามารถอ่านได้จาก W3CSchool (ภาษาอังกฤษเช่นกัน แต่เข้าใจง่ายกว่ามาก)

ความสามารถเด่น ๆ ของมันก็คือ:

• Semantic Markup: โค้ดเป็นระเบียบทำให้ Search Engine เก็บข้อมูลได้ง่าย
• Form Enhancement: เพิ่มประสิทธิภาพของฟอร์ม
• เสียง / วีดิโอ: หลายคนอาจเคยได้ยินเรื่องที่ว่า HTML5 Video จะมาแทน Flash Video (.flv)
• Canvas: เอาไว้วาดรูป ตกแต่งรูป ซึ่งว่ากันว่าอาจมาแทนการวาดรูปในแฟลช (Adobe Flash)
• ContentEditable: สามารถคลิกบนข้อความในเว็บเพื่อแก้ไขได้จากตรงนั้นเลย
• Drag and Drop: ลากของมาวาง
• Persistent Data Storage: การเก็บข้อมูลบนเครื่องผู้ใช้ ซึ่งสามารถเก็บได้ถึงระดับฐานข้อมูลเลยทีเดียว

บราวเซอร์ในรองรับ HTML5 บ้าง?

เว็บบราวเซอร์ (เช่น Internet Explorer, Firefox, Chrome etc.) เวอร์ชั่นใหม่ ๆ ได้เริ่มรองรับ HTML5 แล้ว แต่ก็ไม่ได้รองรับความสามารถทั้งหมด ดังนั้นก่อนใช้ความสามารถไหนของ HTML5 แนะนำให้ตรวจสอบจาก ตารางเปรียบเทียบการรองรับ HTML5 และ CSS3 จากบราวเซอร์ต่าง ๆ

สำหรับท่านที่มีความรู้ด้าน Javascript อยู่แล้ว สามารถใช้ไลบรารี่ Modernizr ในการตรวจสอบว่าบราวเซอร์ซัพพอร์ท HTML5 และ CSS3 หรือไม่

และหากคุณต้องการทราบว่าคุณควรจะทำเว็บไซต์รองรับบราวเซอร์ไหนดี แนะนำให้ลองไปดูที่ Browser Market Share ซึ่งมีข้อมูลเกี่ยวกับว่าในขณะนี้บราวเซอร์ตัวไหนกำลังเป็นที่นิยมมากที่สุด

HTML5 แตกต่างจาก HTML เวอร์ชั่นเก่าอย่างไร

แน่นอนว่านอกจากจะมีอะไรใหม่ ๆ ใน HTML5 แล้ว ก็มีสิ่งที่เปลี่ยนการเขียนแบบเดิม ๆ ในเวอร์ชั่นเก่าด้วย ซึ่งสิ่งหลัก ๆ ที่เปลี่ยนก็คือ:

• Doctype เขียนง่ายขึ้น
  ปกติตอนเขียน HTML เวอร์ชั่นเก่าต้องขึ้น <!DOCTYPE แล้วก็ตามด้วยรายละเอียดยาว ๆ แต่พอเป็น HTML5 แล้ว จะเขียนแบบไม่มีกำหนดเวอร์ชั่น เพื่อให้นำไปใช้ได้กับเวอร์ชั่นอื่น ๆ ในอนาคต โดยเขียนแค่สั้น ๆ แบบนี้:
  <!DOCTYPE html>
• การกำหนดภาษาทำได้ง่ายขึ้น
  เมื่อก่อนจะต้องเขียน xmln หรือ xml:lang ในแท็ก <html> เพื่อกำหนดภาษาของหน้า แต่สำหรับ HTML5 จะเหลือแค่นี้:
  <html lang=”en”>
• การกำหนดชุดตัวอักษรทำได้ง่ายขึ้น
  เมื่อก่อนจะต้องเขียนแท็ก meta ยาว ๆ เพื่อกำหนด Character Set เป็น UTF-8 แต่ตอนนี้เราสามารถกำหนดโดยเขียนแค่นี้:
  <meta charset=”utf-8″ />
• ไม่ต้องมี “/” สำหรับแท็กเดี่ยวแล้ว
  แท็กเดี่ยว หมายถึงแท็กที่ไม่มีแท็กปิด เช่น <img> <input> <br> ซึ่งจะต่างกับแท็กที่เป็นแท็กเปิดปิดอย่าง <div></div> <strong></strong>
  โดยถ้าเป็นเมื่อก่อน แท็กเดี่ยวจะบังคับให้มี “/” ปิดท้าย เช่น <img /> หรือ <br /> แต่ใน HTML5 นี้แท็กเดี่ยวไม่จำเป็นต้องมี “/” ปิดท้ายแล้ว
• แท็กบางส่วนจะไม่รองรับใน HTML5 แล้ว
  แท็กเก่า ๆ บางส่วนจะถูกตัดทิ้งไป โดยมีดังนี้ (บางแท็กเรายังไม่เคยใช้กันเลยครับ และบางแท็กสามารถใช้ CSS แทนได้):
  <acronym> <applet> <basefont> <big> <center> <dir> <frame> <frameset> <noframes> <s> <strike> <tt> <u> และ <xmp>

ตัวอย่างโค้ด HTML5

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Document</title>
</head>
<body>

</body>
</html>

จะเห็นว่าโค้ดสะอาดตากว่า HTML เวอร์ชั่นเก่ามากเลยครับ

การเขียนแบบ Semantic Markup ของ HTML5

อย่างที่บอกไปว่า Semantic Markup เป็นการเขียนให้ Search Engine เข้ามาเก็บข้อมูลได้ง่ายครับ ซึ่งจะทำให้เก็บข้อมูลได้เร็วขึ้น และติดอันดับง่ายขึ้นด้วยครับ

ซึ่งถ้าเป็นเมื่อก่อน เวลาเราจะสร้างกล่องอะไรขึ้นมาสักอัน เราจะใช้แท็ก <div> ใช่มั้ยครับ แต่ตอนนี้พอเป็น HTML5 แล้ว เค้าก็เพิ่มแท็กที่เหมือนกับ <div> ขึ้นมา โดยมีคุณสมบัติเหมือนกัน (ใช้แท็กพวกนี้ ก็เหมือนใช้ <div>) ต่างกันที่แท็กใหม่แต่ละตัวจะบอกความหมายให้ Search Engine รู้ไม่เหมือนกัน เช่น แท็ก <footer></footer> ก็จะบอกว่าอะไรที่ครอบอยู่ในนี้เป็น Footer เว็บไซต์ทั้งหมด

แท็กใหม่ที่เพิ่มเข้ามามีดังนี้: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>, and <figcaption> (สามารถคลิกเพื่อเข้าไปอ่านว่าแท็กอันนั้นมีหน้าที่อะไร)

ซึ่งเว็บบราวเซอร์ใหม่ ๆ ก็จะรองรับแท็กพวกนี้อยู่แล้ว (Firefox 3+, Safari 3.1+, Chrome 2+, Opera 9.6+) ยกเว้น Internet Explorer ซึ่งวิธีที่จะประกาศแท็กพวกนี้ใน IE แบบง่าย ๆ ก็คือใช้ Javascript อันนี้: document.createElement(tagName)

โดยวิธีใช้คำสั่งด้านบน ก็แทน tagName ด้วยชื่อแท็กที่จะประกาศ เช่น: document.createElement(“footer”); โดยถ้าจะประกาศหลายแท็กก็ต้องใช้คำสั่งนี้หลายรอบ

ถ้าขี้เกียจมานั่งประกาศแท็กทั้งหมด ก็มี สคริปต์ HTML5 Enabling Script กับ IE Print Protector ซึ่งเอาไว้ประกาศ HTML5 แบบรวดเดียวเสร็จใน Internet Explorer

และสำหรับคนที่ใช้ CSS Reset (เป็นไฟล์ CSS เอาไว้รีเซ็ตให้มาตรฐานของแท็กต่าง ๆ ในแต่ละบราวเซอร์ให้เหมือนกัน) ในงานบ่อย ๆ พอมาใช้ HTML5 ก็มี CSS Reset สำหรับ HTML5 ออกมาให้ใช้เหมือนกันครับ โดยมีอีกตัวชื่อ Reset5

ตัวอย่างหน้า HTML5 ที่รองรับ IE

<pre><!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Semantic Markup Demo: Cross Browser</title>
    <link rel="stylesheet" href="html5reset.css" type="text/css" />
    <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />
    <!--[if lt IE 9]>
        <script src="html5.js"></script>
    <![endif]-->
</head>
<body>
    <header>
        <hgroup>
            <h1>Page Header</h1>
            <h2>Page Sub Heading</h2>
        </hgroup>
    </header>

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    <article>
        <header>
            <h1>Article Heading</h1>
            <time datetime="2010-05-05" pubdate>May 5th, 2010</time>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <section>
            <header>
                <h1>Section Heading</h1>
            </header>
            <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
            <footer>
                <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod</p>
            </footer>
        </section>
        <section>
            <header>
                <h1>Section Heading</h1>
            </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <figure>
                <img src="item-1.png" alt="Club">
                <img src="item-2.png" alt="Heart">
                <img src="item-3.png" alt="Spade">
                <img src="item-4.png" alt="Diamond">
                <figcaption>FigCaption: Club, Heart, Spade and Diamond</figcaption>
            </figure>
            <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio</p>
            <footer>
                <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod est.</p>
            </footer>
        </section>
        <footer>
            Article Footer
        </footer>
    </article>

    <aside>
        <header>
            <h1>Siderbar Heading</h1>
        </header>
        <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>

    </aside>

    <footer>
        Page Footer
    </footer>

</body>
</html>

จะเห็นได้ว่าไม่มีการใช้แท็ก <div> เลยแม้แต่แท็กเดียว ทำให้โค้ดมีความ Semantic มากขึ้น

โดยเมื่อเรนเดอร์ในบราวเซอร์แล้วจะได้ผลลัพธ์ดังรูปนี้ครับ สามารถแวะไปดูเดโมของจริงได้ครับ

สำหรับการ Validate HTML5 นั้น สามารถใช้ HTML5 Validator ได้เลยครับ

###########################################

เนื่องจากบทความนี้ยาวมาก สำหรับตอนที่ 1 ก็ขอจบลงเพียงเท่านี้ก่อนนะครับ ต่อไปจะมาพูดเรื่องการใช้เสียงและวีดิโอใน HTML5 ครับ

หากมีคำถาม สามารถโพสทิ้งไว้ได้เลยครับผม จะตอบทุกคอมเม้นท์ให้เร็วที่สุดครับ

อ่านบทความตอนที่ 2 กันได้เลยครับ: [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 2)