HTML 5 คือ อะไร?

โดย koko -


       HTML 5 คืออะไร หลายคนอาจงง ว่ามันดีอย่างไรแต่ก็คงได้ยินชื่อกันมาซักพักแล้ว HTML 5 ก็คือ HTML ธรรมดานี่แหละครับแต่มีลูกเล่นใหม่ๆและ Tag ใหม่ๆเพิ่มขึ้นมาแค่นั้นเองทำให้เราใช้ง่ายขึ้นกว่าเก่า และมี Future ที่เปลี่ยนไปต่างๆไปจากเดิมทำให้ดูดีขึ้นไปกว่าเก่าเยอะ ทำให้หลายคนจับกระแสแทบไม่ทันกันจริงๆ ข้อดีของมันก็คือไม่จำเป็นต้องพึ่ง plug in นั่งเองและรันได้หลาย cross platform  ทำครั้งเดียวก็รันได้หลายๆอย่างทำให้สะดวกขึ้นกว่าเก่าเยอะ

   

HTML5 Feature

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

  • Semantic Markup : การเพิ่ม Element ที่ อ่านง่ายมากขึ้น และช่วยให้ เราทำ SEO ได้มีประสิทธิภาพมากยิ่งขึ้น
  • Form Enhancements : เพิ่มความสามารถของ Form ต่างๆ ไม่ว่าจะเป็น Input type, Attribute หรือ แม้แต่ Element
  • Audio / Video: รองรับการอ่านไฟล์เสียง และ วีดีโอ โดยไม่จำเป็นต้องใช้ Embed Code ของ Third Party
  • Canvas : ใช้ในการวาดรูป โดยจำเป็นต้องใช้ Javascriptช่วย
  • ContentEditable : สามารถแก้ไข Content ได้โดยตรงผ่านทางหน้าเว็บ
  • Drag and Drop : ลากวางObject ได้ เพื่อเพิ่มการ ตอบสนองระหว่างระบบกับผู้ใช้
  • Persistent Data Storage : มีการจัดการที่ดีขึ้น โดยเก็บข้อมูลลงบนเครื่องของผู้ใช้


แล้วอะไรเปลี่ยนไปบ้าง ?

นอกจาก Featuresใหม่ๆที่ ถูกเพิ่มเข้ามาในHTML5 แล้วยังมีการเปลี่ยนแปลงการเขียนแบบเดิมให้ผู้พัฒนาสามารถพัฒนาได้ สะดวกมากยิ่งขึ้น อาทิเช่น
  • Doctypeที่สั้นขึ้น ใน HTML5 ต้องการ Doctypeสั้นๆเพียงแค่ แทน Doctypeที่แสนจะยาวเหยียดใน เวอร์ชั่นเดิมๆ
  • การกำหนดค่าภาษาทำได้ง่ายขึ้น ตอนนี้คุณไม่จำเป็นต้องใช้ xmlnsหรือ xml:langใน <html> อีกแล้วครับ จะเหลือแค่ <html lang=”en”>
  • การกำหนดชุดอักษร (Charset) ที่สะดวกขึ้น จากเดิมที่เราเคยเขียน <meta <สุดแสนจะยาวเหยียดจนจำกันไม่ได้ ในตอนนี้ HTML5 จะทำให้คุณเขียนเหลือเพียงแค่ <meta> charset=”utf-8″ / < เท่านั้น>
  • ไม่ต้องมี '/' ปิด สำหรับ Tag เดี่ยว จากนี้จะไม่ต้องมีตัวปิดสำหรับ Tag เดี่ยวจำพวก <img><br><input>แล้ว
  • Tagบางอย่างจะไม่ถูกรองรับแล้ว ซึ่งจะมี Tagดังนี้ <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> and <xmp>





โพสต์ยอดนิยมจากบล็อกนี้

ActionScript 3.0 [1] : เริ่มต้นเขียนโปรแกรมง่ายๆ

โดย d9doggy -
รูปภาพ
การเขียนโปรแกรมของ ActionScript 3.0 (AS3) นั้นง่ายมาก AS3 เป็นภาษาสำหรับใช้สั่งชิ้นงานของโปรแกรม Flash ให้ทำงานตามที่เราต้องการ มันถูกออกแบบมาให้เรียนรู้ง่ายและใช้งานง่าย โดยที่ผู้เริ่มต้นใช้งาน หรือ ผู้สร้างผลงานจากโปรแกรม Flash ไม่จำเป็นต้องเรียนรู้มากน แต่มีความสามารถตั้งแต่การทำงานง่ายๆจนถึงการทำงานที่ซับซ้อนสูง เรามาเขียนคำว่า HelloWorld ง่ายๆแบบที่ผู้ฝึกเขียนโปรแกรมนิยมทำกันตอนเริ่มต้นหัดเขียนโปรแกรม   เลือก ActionScript 3.0 ขั้นตอนที่ 1 : ให้เราเปิด Adobe Flash Professional CS 6 ขึ้นมาและเลือก ActionScript 3.0 ตามภาพ คลิกแท็บ Timeline และคลิกขวาที่เฟรมแรก ขั้นตอนที่ 2  : ด้านล่างให้เราคลิกแท็บ Timeline ขึ้นมา เลือก Actions ขั้นตอนที่ 3 : ให้คลิกขวาเลือก Action  ปรากฎหน้าต่างสำหรับเขียน ActionScript 3.0 ขั้นตอนที่ 4 : จะปรากฏหน้าต่าง Action สำหรับเขียนโปรแกรม เราจะสนใจเฉพาะหน้าต่างสีขาวๆที่เป็นพื้นที่สำหรับเขียนโปรแกรมเท่านั้น หน้าต่างอื่นๆสามารถกดย่อขยายได้ เขียนคำสั่ง ActionScript 3.0 ขั้นตอนที่ 5 : ลองพิมพ์ AS3 โค้ดตามลงไปดูเส...
อ่านต่อ...

ActionScript 3.0[3] : การตั้งชื่อตัวแปร

โดย d9doggy -
รูปภาพ
ในการเขียนโปรแกรมเกือบทุกภาษา รวมทั้ง ActionScript 3.0 ด้วยมีกฎการตั้งชื่อสำหรับตัวแปร ถ้าหากเราไม่ตั้งชื่อตัวแปรให้ถูกต้องตามกฎการตั้งชื่อตัวแปรยังทำให้เราไม่สามารถ รันคำสั่ง ActionScript 3.0 ได้ โปรแกรมจะแจ้ง Error ในแท็บ Compiler Errors การตั้งชื่อตัวแปรในภาษา ActionScript 3.0 * ไม่ตั้งชื่อขึ้นต้นตัวอักษรแรกเป็น ตัวเลข เครื่องหมายอักขระแปลกๆ สัญลักษณ์ เช่น -name, 3name * ถัดจากตัวอักษรตัวแรกสามารถตามด้วยตัวอักษร , ตัวเลข , $, _ ได้ แต่ต้องไม่เว้นว่าง ไม่ใช้เครื่องหมาย @, #, ' * การประกาศตัวแปรใน ActionScript 3.0 เป็นแบบ Case Sensitive หมายถึง การตั้งชื่อด้วยตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ให้ผลต่างๆกัน เป็นคนละตัวแปรกัน เช่น name กับ Name ถือว่าเป็นคนละตัวแปรกัน * ห้ามตั้งชื่อตัวแปรตามคำสงวนของ ActionScript 3.0 ตามตารางด้านล่างนี้ as break case catch class const continue default delete do else extends false finally for function if implements import in ...
อ่านต่อ...

ActionScript 3.0 ตอนที่ 1 สั่งให้เคลื่อน symbol อย่างง่าย

โดย koko -
รูปภาพ
สำหรับตัวอย่างนี้จะเป็นการเริ่มต้นเขียน Action Script 3.0 อย่างง่าย ไว้สำหรับดำเนินการกับ Symbol หรือวัตถุภายใน Stage ตัวอย่างนี้เป็นพื้นฐานทั่วไปของการเขียนเกม ตามตัวอย่างเราจะสั่งให้ Symbol เคลื่อนที่ไปบน Stage ง่ายๆ เลือก Oval Tool จากเครื่องมือทางขวาของหน้าจอ ขั้นตอนที่ 1 : สร้าง Symbol วงกลม จากเครื่องมือทางด้านขวาของหน้าจอเลือก Oval Tool วาดวงกลมลงบน Stage วาดรูปวงกลม ขั้นตอนที่ 2 : เปลี่ยนวงกลมที่วาดขึ้นให้เป็น Symbol โดยคลิกขวาบนวงกลม เลือก Convert to Symbol... จะมีหน้าต่าง Conver to Symbol เกิดขึ้น เปลี่ยนรูปภาพวงกลมเป็น symbol ตั้งชื่อ symbol Name : ตั้งชื่อ Symbol ในที่นี้จะตั้งชื่อเป็น circle Type : เลือกชนิดของ Symbol ในที่นี้จะเลือกเป็น Movie Clip ไว้ก่อน Registration : คือ ตำแหน่งอ้างอิงของ Symbol ในแนวแกน x และ y มีให้เลือก 9 จุด เลือกเป็นจุดตรงกลางไปก่อน เห็นว่า symbol ชื่อ circle เข้ามาอยู่ใน Library ลองตรวจสอบดูใน แท็บ Library ในหน้าต่างทางขวามือของโปรแกรมจะมี Symbol ชื่อ circle เพิ่มเข้ามา คลิกขวาเลือก actions ที่แท็...
อ่านต่อ...