HTML5 in Thailand Tip, Trick & Techniques | html5 คือ, หนังสือ html 5, เริ่มต้น html 5, สอน html5

ContentEditable แก้ไขเนื้อหาในหน้าเว็บได้ทันทีด้วย HTML5

January 21st, 2011 | by กระปาล์ม | html5 examples

Jan
21

ContentEditable เป็นอีกหนึ่งฟีเจอร์ที่มีมากับ HTML5 ซึ่งเป็นฟีเจอร์ใหม่ ContentEditable ฟีเจอร์นี้ถ้าแปลตรงตัวเลย ก็คือฟีเจอร์ที่ทำให้เราสามารถแก้ไข Content โดยการคลิกที่ข้อความ และสามารถแก้ไขแล้ว save ทันที การทำงานก็ควบคุมผ่านภาษา Javascript เพื่อให้ Element นั้นๆ สามารถำงานได้ การทำงานของฟีเจอร์นี้ก็จะไปสัมพันธ์กันกับ อีกหนึ่งฟีเจอร์ที่ชื่อว่า Persistent Data Storage เป็นการเก็บข้อมูลสิ่งทีเราต้องการ ไว้ในเครื่องผู้ใช้งาน ซึ่งการทำงานค้ลายๆกับ cookie แต่ Persistent Data Storage มันเก็บได้ถึงระดับดาต้าเบต ซึ่งในตอนนี้ผมยังไม่กล่าวถึง Code ของฟีเจอร์นี้จะแค่ ContentEditable ก่อนละกันครับ ซึ่งตัวอย่าง Code นั้นก็ไม่ได้ซับซ้อนอะไรมาก มี ชุดคำสั่ง HTML5 แค่ 3 บรรทัดนอกนั้นก็เปป็น Javascript อีก 10 กว่าบรรทัด ลองเอาตัวอย่าง Code นี้ไปลองศึกษาดูนะครับ Read full story

2 Comments »

โลโก้ HTML5 อย่างเป็นทางการมาแล้ว

January 19th, 2011 | by กระปาล์ม | html5 introduction

Jan
19

html5
เป็นสัญญาณที่ดีครับ ถึงแม้ว่ามาตรฐาน HTML5 ยังเป็นที่ถกเถียงกันในวงกว้างในช่วงระยะเวลาหลายปีที่ผ่านมา ล่าสุด W3C (World-Wide Web Consortium) ซึ่งเป็นหน่วยงานที่ดูแลมาตรฐานต่างๆ บนอินเตอร์เน็ต ก็ได้เปิดตัวโลโก้อย่างเป็นทางการของ HTML5 ออกมาสู่สายตาคนทั่วโลกแล้ว โดยทีมที่ออกแบบก็คือ Ocupop ดูๆไปออกแนวคล้ายๆ โลโก้ที่มักจะอยู่ตรงหน้าอกของซุปเปอร์ฮีโร่เลย ให้ความรู้สึกหนักแน่น และมั่นคง บ่งบอกได้เลยว่า HTML5 คือมาตรฐานที่แน่นอนของการพัฒนาเว็บไซต์ นากจากนั้นยังมีการจัดทำเสื้อเรียบร้อย เอาเป้นว่าตอนนี้ HTML5 มีโลโก้อย่างเป็นทางการแล้ว ที่เหลือก็คือรอเพียงแต่ว่าเมื่อไหร่ๆ ที่มันจะกลายเป้นมาตรฐานซะทีอดใจรอคอยกัน

Read full story

No Comments »

เก็บตกงาน GTUG BootCamp 2011 สำหรับใครที่ไม่มีโอกาสได้ไป

January 16th, 2011 | by กระปาล์ม | html5 introduction

Jan
16

ก็ผ่านไปแล้วสำหรับงาน GTUG BootCamp 2011 เป็นงานเสวนา ที่พูดคุย แลกเปลี่ยน และแสดงเทคโนโลยีของ Google ตลอดจนพบปะกับเหล่านักพัฒนาที่เข้ามาร่วมงาน โดยในครั้งนี้มีหัวข้อสำหรับเสวนา ได้แก่ Android , Chrome Extension & Developer Tools, HTML5 และ Google App Engine สำหรับใครที่ไม่มีโอกาสได้ไปงาน GTUG BootCamp 2011 เมื่อวาน (15 มกราคม 2554) หรือคนที่กลับก่อนที่ผมจะพูด และคนที่ฟังผมพูดแล้วไม่รู้เรื่อง 5555 ผมเอามาลงในเว็บให้เพื่อใครสนใจอ่านครับ ซึ่งผมพูดเกี่ยวกับ ความสามารถของเทคโนโลยี HTML5

html5

HTML ที่เราใช้ในการพัฒนาเว็บไซต์ในปัจุบันคือ html เวอร์ชั่น 4 ซึ่งเราใช้มาตั้งแต่ ปี 1997 ซึ่งเป็นระยะเวลา 14 ปีแล้ว ซึ่งผมคิดว่ามันถึงเวลาแล้วละ ที่ควรจะมีมาตรฐานใหม่เกิดขึ้นมา ถ้าผมจำไม่ผิด html เริ่มใช้ในปี 1991 ผมเกิดมาอายุครบ 4 ขวบพอดี และมาเปลี่ยนเป็น html เวอร์ชั่น 2 ในปี 1994 ในอีก 2 ปีต่อมาก็เกิด css เวอร์ชั่นแรก พร้อมกับ จาวาสคริป หลายอย่างที่บอกพอมาถึงปี 1997 ก็กลายเป็น html เวอร์ชั่น 4 และก็มีอีกหลายๆอย่างที่เกิดขึ้นมาหลังจากที่มี html เวอร์ชั่น 4 อย่างเช่น css เวอร์ชั่น 2 XHTML เวอร์ชั่นแรก Ajax (เอเจกหรืออาเจก ที่เรารู้จักกัน) จนมาถึงปี 2009 คำว่า HTML5 ก็ได้เริ่มเข้ามา มีกระแสมากมายเกิดขึ้น ทำให้หลายๆ คนทั้งที่เป็นนักพัฒนา นักการตลาด และผู้ใช้งาน เริ่มสนใจและศึกษา html5 มีหลายๆ คนจับ html5 ไปเปรียบเทียบกับ flash หรือ ปลั๊กอินตัวอื่นๆ ที่มีบนเว็บ

Read full story

1 Comment »

Theme WordPress ที่ใช้ HTML5 & CSS3 ในการพัฒนา

January 12th, 2011 | by กระปาล์ม | html5 examples

Jan
12

HTML5

วันนี้ผมเห็นทวิตหนึ่งของ @iannnnn (ทวิตนี้จร้า) ทวิตมาก็เลยขอหยิบมาเขียนลงบล็อกซะหน่อย ซึ่งเป็นเรื่องของ Theme WordPress คาดว่าหลายๆ คนคงจะเกิดคำถามว่า เอ๊ะ ! แล้วมันเกี่ยวกับ HTML5 อย่างไร ขอบอกว่ามันเกี่ยวแน่นอนครับเพราะ Theme ที่หยิบมาอันนี้เป็น Theme ที่พัฒนาโดยใช้ HTML5 และ CSS3 ทั้งหมดนั้นเอง อย่างที่ @iannnnn ทวิตไปแหละครับว่ามันเขียนด้วย CSS3 + HTML5 ล้วนๆ เราไม่จำเป็นว่าจะเล่น WordPress หรือเปล่า แต่เราเอามาลองแงะดูประดับสมองดีกว่าครับ ว่าเขาเขียนกันอย่างไร เพื่อเป็นแนวทางในการพัฒนาของเราต่อไปหรือใครที่เล่น WordPress อยู่จะเอา Theme ไปใช้งานก็ไม่ว่ากันจร้า เข้าดู Demo หรือข้อมูลอื่นๆ ได้ที่ webexpedition18.com

Read full story

1 Comment »

Z-Type เกมที่พัฒนาจาก HTML5 ได้รับแรงบรรดาลใจจากเกม The Typing of the Dead

January 12th, 2011 | by กระปาล์ม | html5 examples

Jan
12

Z-Type หลังจากที่อ่านบทความเกี่ยวกับ HTML5 มาเยอะแล้ว เรามาคลายเครียดกันสักหน่อยด้วยการเล่นเกม ซึ่งเกมที่ว่านั้นก็คือ Z-Type เป็นอีกหนึ่งผลงานที่พัฒนามาจาก HTML5 คู่กับ JavaScript โดยใช้ฟีเจอร์ที่เราก็คงทราบกันดีนั้นก็คือ Canvas element นั้นเอง ทั้งตัวเกมและ framework นั้นถูกพัฒนาขึ้นโดย นักพัฒนาชาวอังกฤษชื่อว่า Dominic Szablewski ซึ่งเข้าได้พัฒนาเกม Z-Type เพื่อส่งเข้าแข่งขัน โครงการ Game On ของ Mozilla (gaming.mozillalabs.com) เขาได้กล่าวในบล็อกของเขาว่าได้แรงบรรดาลใจมาจากเกม The Typing of the Dead ในเว็บ mashable บอกว่าเกมนี้รองรับ mobile devices อย่าง iPhone, iPod touch และ iPad โดยทำงานผ่าน browsers แต่ผมทดสอบแล้วเข้าได้แค่ถึงหน้า Loading เท่านั้นแถมโหลดไม่เสร็จซะที หากใครสนใจ หรือต้องการแรงบรรดาลใจในการศึกษาและพัฒนา HTML5 ก็ลองเล่นเกมนี้ดูครับ Z-Type. Please Enjoy!

Read full story

2 Comments »

52ramework: HTML5 Frameworks ที่น่าลอง

January 11th, 2011 | by กระปาล์ม | html5 development kit

Jan
11

ผมมี HTML5 Frameworks มาแนะนำให้ลองใช้กันครับ ซึ่งในปัจจุบันก็เริ่มมี Frameworks ของ HTML5 ออกมาให้เราได้เห็นกันบางแล้ว ส่วนใหญ่นั้นจะเป็นการร่วมเอา HTML5 และ CSS3 เข้าด้วยกัน ทำให้เราสามารถนำมาใช้งานได้อย่างสะดวก หลายๆ Frameworks มี html5 markup และ css reset มาให้เลยยิ่งสะดวกไปใหญ่ รวมไปถึงการยั้ดเอา HTML forms และ HTML 5 elements เข้ามา ซึ่งหลักๆ พวกนี้ก็ถูกยั้ดรวมมาใน Frameworks อยู่แล้ว 52ramework Frameworks ตัวนี้ประกอบไปด้วย Tag HTML5 พื้นฐานมาให้ครบถ้วนไม่ว่าจะเป็น header, nav, section, article, footer มี css reset สำหรับ HTML5 มาให้ด้วยพ่วงมาด้วย CSS3 ที่ใส่ฟีเจอร์ rounded corners, text-shadow, box-shadow, html5 markup และก็มี grid system มาให้อีกด้วย สนใจลองเข้าดู documentation และ community ได้ครับ หรือดู Demo กันก่อนได้ครับ

Read full story

1 Comment »