ข้อมูลองค์ความรู้โดย
จุฬารัตน์ ดำอุไร
ตำแหน่ง ไอที

มารู้จักกับ HTML5

ประเภททางด้าน IT หลัก :   Development & Integration
ประเภททางด้าน IT ย่อย :   Web Design
  ลงข้อมูลเมื่อ 12:04:56 14/03/2011
  Page View (2935) แบ่งปัน

       HTML5 เชื่อว่าหลายๆ คนคงจะได้ยินคำนี้มาได้สักพักแล้ว ถึงแม้ว่าจะไม่ใช่นักพัฒนาเว็บไซต์ก็ตาม คงจะเคยได้ยินคำนี้มาแน่นอน เพราะด้วยกระแสต่างๆ ที่นำพาให้พวกท่านรู้จักกับ HTML5 โดยไม่ได้ตั้งใจ และเชื่อว่าด้วยกระแสที่มาแรงคงมีหลายคนอยากเรียนรู้ HTML5 ขึ้นมาไม่มากก็น้อย และก็มีแน่นอนที่ไม่รู้ว่าควรจะเริ่มต้นที่อะไรดี หากเป็นนักพัฒนาเดิมๆ ที่อยู่ในวงการพัฒนาเว็บมานาน หรือมีความรู้อยู่บ้างคงไม่มีปัญหานี้แน่นอน แต่ถ้าเป็นผู้เริ่มต้นอันนี้แหละคือประเด็นและอาจจะต้องเหนื่อยพอสมควร สำหรับผู้ที่เริ่มต้นใหม่ ก่อนอื่นขอแนะนำอย่าพึ่งไปสนใจกับอดีตตะชาติของมัน อย่ามัวไปเสียเวลาเพื่อศึกษาชีวะประวัติอันเยอะแยะมากมาย ไม่ว่าจะเป็น HTML 4.01 คืออะไร ? แล้ว XHTML 1.0 ละมันอะไร ? Web Application 1.0 (WA1) เป็นยังไง โอ้ยอีกเยอะแยะรับรองได้เลยถ้าไปอ่านพวกนี้ปวดหัวตาย เพราะเป็นเนื้อหาที่เยอะ แต่เป็นสิ่งที่นักพัฒนาควรต้องรู้ แต่เราลำดับความสำคัญมันได้ ถ้าเราพัฒนาเป็นแล้วเรื่องทฤษฎีพวกนี้ก็ไม่ยาก แต่ก็ไม่ใช่ว่าจะไม่สนใจทฤษฎี เลยในต้นเริ่มต้นมีทฤษฎี 2-3 อย่างที่นักพัฒนาหน้าใหม่ๆ ต้องเรียนรู้และจดจำได้ยิ่งดี ถ้าจะให้แนะนำอย่าไปสนใจ HTML ในเวอร์ชั่นก่อนๆ มาสนใจกับตัวเวอร์ชั่นให้เป็นพอ โดย HTML5 นั้นอย่างที่ทราบกันก็คือเป็นภาษา HTML เวอร์ชั่นที่ 5 ถูกพัฒนาขึ้นเพื่อใช้เป็นภาษามาร์กอัพ สำหรับการพัฒนา Website เวอร์ชั่นล่าสุด (ซึ่งยังไม่ได้ใช้งานจริงจัง) หนึ่งสิ่งที่ควรจะรู้เกี่ยวกับ HTML5 ก็คือ Features ของมันมีอะไรบ้าง

       HTML5 Features ได้แก่

       Semantic Markup

       Form Enhancements

       Audio/Video

       Canvas

       Content Editable

       Drag and Drop

       Persistent Data Storage

       HTML5 มีฟีเจอร์ใหม่หลักๆ ทั้งหมด 7 ฟีเจอร์ด้วยกัน ซึ่งเคยเขียนบทความ HTML5 มี Elements อะไรใหม่ๆ เพิ่มขึ้นมาบ้าง ไปแล้ว คราวนี้เรามาดูกันอีกที เพราะมีบางตัวที่ยังไม่ได้กล่าวถึงเลย

       Semantic Markup อย่างที่ผมเคยกล่าวไว้แล้วว่า ตามความเข้าใจของมันคือ DIV Element ตัวหนึ่งใน HTML เวอร์ชั่นก่อนๆ มันคือการพัฒนาเว็บไซต์ด้วยโครงสร้าง div ซึ่งเป็นรูปแบบที่เหล่านักพัฒนานิยมใช้กันในการพัฒนาเว็บไซต์ต่างๆ ซึ่ง div นั้นใช้เพื่อแบ่งพื้นที่ให้เป็นสัดเป็นส่วน เพื่อให้เนื้อหาของเว็บไซต์นั้นสวยงามเป็นระเบียบ หรือวางเนื้อหาไว้ตามพื้นที่ที่ต้องการ Semantic Markup นั้นทำให้เรา Element แต่ละตัวนั้นอ่านง่ายมากขึ้น และพัฒนาง่ายขึ้นด้วย และว่ากันว่าทำให้เราสามารถทำ SEO ได้อย่างมีประสิทธิภาพมากยิ่งขึ้นอีกด้วย (อ่านบทความ HTML5 กับ Div Element หรือ Semantic Markup ที่เปลี่ยนไป เพิ่มเติมได้เลย)

       Form Enhancements ก็ตรงตามชื่อเลยเป็น Form Elements ที่มีการเพิ่มความสามารถเข้ามา ทำให้การใช้งาน Form ต่างๆ นั้นมีประสทิธิภาพขึ้น โดยมี , , ที่เพิ่มเข้ามา

       Audio/Video ฟีเจอร์ที่เป็นหนึ่งในหลายๆ ฟีเจอร์ที่เริ่มเห็นมีนำมาใช้การบางแล้ว และก็คงเป็นอีกหนึ่งฟีเจอร์ที่คิดว่าหลายคนคงได้ลองใช้งานกันมา ฟีเจอร์นี้ทำให้เว็บไซต์สามารถเล่นไฟล์วีดีโอ และไฟล์เสียงได้โดยไม่ต้องติดตั้งปลั๊กอินใดๆ เพิ่มเติม Canvas ตัวนี้ถือว่าเป็นอีกหนึ่งฟีเจอร์ที่ทำให้ HTML5 มีความน่าสนใจขึ้นมาเยอะ มันสามารถทำให้คุณสามารถสร้างระบบต่างๆ ที่คุณต้องการขึ้นมา ไม่ว่าจะเป็นระบบเกมส์ หรือโปรแกรมวาดภาพบนเว็บ สามารถอ่านเพิ่มเติมได้ที่บทความ Canvas element ใน HTML5 คืออะไร ? ตอนที่ 1 และ Canvas element ใน HTML5 คืออะไร ? ตอนที่ 2

       ContentEditable อันนี้ตรงตัว HTML5 มันทำให้เราสามารถแก้ไขเนื้อหา ได้โดยตรงผ่านทางหน้าเว็บเลย

       Drag and Drop อันนี้เป็น Event Attributes ซึ่งทำให้เราสามารถสร้าง Event ให้กับ object ใดๆ ได้ ซึ่งจะสามารถตอบสนองกันระหว่างผู้ใช้งานได้ทันที โดยควบคุมผ่านทาง Mouse Events (ondrag, ondrop)

       Persistent Data Storage เก็บข้อมูลไว้ในเครื่องผู้ใช้งาน

       เมื่อรู้ว่า HTML5 มี Features มีอะไรบ้างแล้วจากนั้นเราก็ควรศึกษาว่าจะพัฒนาเว็บโดยใช้ HTML5 นั้นควรจะใช้ Tools อะไรในการพัฒนา ซึ่งในตอนนี้ Tool ที่รู้จักและรองรับ HTML5 มีตัวเดียวนั้นก็คือ Dreamweaver CS5 ซึ่งเคยเขียนบทความที่ชื่อว่า เริ่มต้นเขียน HTML5 ด้วย Dreamweaver CS5 ลองไปอ่านดูครับ จากนั้นอีก 2 อย่างที่ควรศึกษาไปพร้อมๆ กันกับ HTML5 ก็คือ CSS3 และ Javascript ทั้ง 3 อย่างนี้ควรจะรู้และเข้าใจเป็นอย่างดี จึงจะสามารถทำให้เกิด 1เว็บไซต์ขึ้นมาได้ ไม่ยากและก็คงไม่ง่าย ไว้บทความตอนหน้าจะมาอธิบายเพิ่มว่าควรจะเริ่มศึกษาและพัฒนา HTML5 จากตรงไหนก่อน แล้วเจอกันใหม่ครับ View :1574

       HTML5 มี Elements อะไรใหม่ๆ เพิ่มขึ้นมาบ้าง

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

       HTML5 กับ Div Element หรือ Semantic Markup ที่เปลี่ยนไป

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

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

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

       Canvas element ใน HTML5 คืออะไร ? ตอนที่ 2

       เครื่องมือวาดภาพพัฒนาจาก HTML5 รองรับ Mobile device และ iPad

       Canvas element ใน HTML5 คืออะไร ? ตอนที่ 1

       เริ่มต้นเขียน HTML5 ด้วย Dreamweaver CS5

       แนะนำหนังสือ HTML5

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

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

       ฟังบรรยายจากทีมงาน HTML5 in Thai ในหัวข้อ HTML5 : The future of website

       LeanBack: HTML5 player ที่รองรับการใส่ Subtitle เข้าไปในวีดีโอได้

ขอขอบคุณข้อมูลจาก : http://www.html5.in.th



องค์ความรู้ที่มีผู้อ่านมากสุด
วิธีการกำจัดไวรัสจากThumb Driveที่ง่ายที่สุด
เทคนิคง่ายๆการป้องกันไวรัสจาก humb Drive

โดย... จุฬารัตน์ ดำอุไร

สี สื่อ อารมณ์
อารมณ์กับสี???

โดย... จุฬารัตน์ ดำอุไร

การบริหารจัดการแคมเปญ (Campaign Management)
การบริหารจัดการแคมเปญ (Campaign Management)

โดย... จุฬารัตน์ ดำอุไร

คอมพิวเตอร์ส่วนพระองค์ เครื่องแรก
คอมพิวเตอร์ส่วนพระองค์ เครื่องแรก

โดย... จุฬารัตน์ ดำอุไร

Web กำลังจะตาย แต่ Internet ยั่งยืน
Web กำลังจะตาย แต่ Internet ยั่งยืน

โดย... จุฬารัตน์ ดำอุไร

เปิดประเด็นด้านการบริหารคนเก่ง (Talent Management) ในมุมมองของนักพัฒนาบุคลากรมืออาชีพ
เปิดประเด็นด้านการบริหารคนเก่ง (Talent Management) ในมุมมองของนักพัฒนาบุคลากรมืออาชีพ

โดย... จุฬารัตน์ ดำอุไร

ทำปฏิทินแบบน่ารักไว้แจกเพื่อน ด้วย Excel
ทำปฏิทินแบบน่ารักไว้แจกเพื่อน ด้วย Excel สนุกๆ

โดย... จุฬารัตน์ ดำอุไร

แชร์ประสบการณ์ในการวางกล้องวงจรปิดกันขโมยไร้สาย
แชร์ประสบการณ์ในการวางกล้องวงจรปิดกันขโมยไร้สาย

โดย... จุฬารัตน์ ดำอุไร

HTML5 player ที่รองรับการใส่ Subtitle เข้าไปในวีดีโอได้
HTML5 player ที่รองรับการใส่ Subtitle เข้าไปในวีดีโอได้ลองศึกษาดูน่ะจ๊ะ

โดย... จุฬารัตน์ ดำอุไร

Winamp Lyrics ร้องคาราโอเกะไม่เสียตังค์
ตอนนี้ธุรกิจตู้คาราโอเกะกำลังได้รับความนิยมอย่างสูง แล้วก็เป็นธุรกิจที่ดูดเงินในกระเป๋าเราไปไม่รู้เท่าไหร่ต่อเท่าไหร่แล้ว ถ้าเป็นอย่างนี้ต่อไปคนรักการร้องเพลงคาราโอเกะอย่างเรามีหวังจนแน่นอน แต่ผมก็มีวิธีที่ทำให้คุณร้องคาราโอเกะได้โดยไม่เสียเงินซักกะแดงเดียว

โดย... จุฬารัตน์ ดำอุไร