HTML5 กับอนาคตเว็บไซต์รุ่นใหม่

เริ่มต้นกับ HTML5



สอน HTML5
> เริ่มต้นกับ HTML5


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

HTML5 คืออะไร

ถ้าจะพูดไล่ถึงประวัติของ HTML แล้วคงจะยาวมาก ผมขออนุญาตตัดมาที่ HTML5 เลยก็แล้วกันครับ HTML5 ก็คือภาษาที่ถูกพัฒนาขึ้นเพื่อใช้เป็นภาษามาร์กอัพ สำหรับการเขียน Website รุ่นล่าสุด ที่ได้ถูกพัฒนาขึ้นมาโดย WHATWG (The Web Hypertext Application Technology Working Group)โดยได้มีการปรับเพิ่ม Feature หลายๆอย่างเข้ามาเพื่อให้ผู้พัฒนาสามารถใช้งานได้ง่ายมากยิ่งขึ้น

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 : มีการจัดการที่ดีขึ้น โดยเก็บข้อมูลลงบนเครื่องของผู้ใช้

สิ่งที่เปลี่ยนไปใน HTML5

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

  • Doctypeที่สั้นขึ้น ใน HTML5 ต้องการ Doctypeสั้นๆเพียงแค่ แทน Doctypeที่แสนจะยาวเหยียดใน เวอร์ชั่นเดิมๆ
  • การกำหนดค่าภาษาทำได้ง่ายขึ้น ตอนนี้คุณไม่จำเป็นต้องใช้ xmlnsหรือ xml:langใน อีกแล้วครับ จะเหลือแค่
  • การกำหนดชุดอักษร (Charset) ที่สะดวกขึ้น จากเดิมที่เราเคยเขียน charset=”utf-8″ / < เท่านั้น>
  • ไม่ต้องมี '/' ปิด สำหรับ Tag เดี่ยว จากนี้จะไม่ต้องมีตัวปิดสำหรับ Tag เดี่ยวจำพวก
    แล้ว
  • Tagบางอย่างจะไม่ถูกรองรับแล้ว ซึ่งจะมี Tagดังนี้ , , , ,
    , , , , , , <s>, <strike>, <tt>, <u> and <xmp></li> </ul> <h4 class='nav4bar'>เตรียม Environment</h4> <p class='content' style='line-height: 17px; font-family: Tahoma; color: #333333; font-size: 12px;'>หลังจากที่เราได้รู้จัก HTML5 มาคร่าวๆกันแล้วนะครับ ทีนี้เราลองมาเริ่มพัฒนากันดูบ้างดีกว่า ก่อนอื่นสำหรับการพัฒนา HTML5 นั้น มีความจำเป็นที่ Browser ที่ใช้ต้องมีการ Support ในระดับหนึ่ง จึงจะสามารถใช้งาน Tag หรือ Element ใหม่ๆได้ ซึ่ง Browser ที่ สนับสนุนนก็มีอยู่หลายตัวมากมายครับ แต่ในตอนนี้ผมขอยก ตัวอย่างการใช้งานกับInternet Explorer 9 ที่เป็นตัวใหม่ล่าสุดซึ่งเป็นสิ่งที่ท้าทายสำหรับนักพัฒนาเว็บเป็นอย่างมาก</p> <p class='content' style='line-height: 17px; font-family: Tahoma; color: #333333; font-size: 12px;'>สำหรับInternet Explorer 9 หรือIE9 ในตอนนี้ก็มีการปล่อยตัวPlatform Preview ออกมาแล้วนะครับ เราสามารถ download ไปลองใช้งานได้ที่นี้เลยครับ&nbsp;<a target='_blank' href='http://ie.microsoft.com/testdrive/'>Microsoft Internet Explorer9 Test Drive</a></p> <p class='content' style='line-height: 17px; font-family: Tahoma; color: #333333; font-size: 12px;'>ซึ่งIE9 ไม่เพียงแต่จะสามารถรองรับ HTML5 และ CSS3 ได้อย่างเต็มรูปแบบแล้ว แต่ยังสามารถประมวลผลJavascriptได้ดี และเร็วมากยิ่งขึ้นกว่าเดิมอีกด้วย เป็นการแก้ไขจุดอ่อน ที่ Browser ตระกูล IE รัน Javascriptได้ช้าและดีไม่เท่า Browser ตัวอื่นๆไม่เพียงเท่านั้น IE9 ยังสามารถดึงเอา GPU มาช่วยในการแสดงผล กราฟฟิคแบบ 2D ผ่าน API Direct 2D ซึ่งจะช่วยให้การแสดงผล กราฟฟิคแบบ 2D เป็นไปได้รวดเร็วมากยิ่งขึ้น โดย API Direct 2Dในปัจจุบันก็จะมีอยู่ใน Windows Vista SP2 ขึ้นไป และ Windows 7</p> <p class='content' style='line-height: 17px; font-family: Tahoma; color: #333333; font-size: 12px;'>สำหรับ IE9 Platform Preview เมื่อเราลงไปแล้วก็จะมี ไอคอน แยกออกมาอีกไอคอนหนึ่ง ไม่ได้มีผลกับ IE ตัวเดิมแต่เพียงอย่างใด ซึ่งหลังจากที่ลงแล้ว คุณก็พร้อมที่จะพัฒนา HTML5 ได้แล้วครับผม!!!</p> <p class='content' style='line-height: 17px; font-family: Tahoma; color: #333333; font-size: 12px;'><em>โปรดติดตามต่อในตอนหน้าครับ!!</em></p> <p class='content' style='line-height: 17px; font-family: Tahoma; color: #333333; font-size: 12px;'>Ref:&nbsp;<a target='_blank' href='http://www.w3avenue.com/2010/05/07/html5-unleashed-tips-tricks-and-techniques/'>http://www.w3avenue.com/2010/05/07/html5-unleashed-tips-tricks-and-techniques/</a>&nbsp;<br />Ref:&nbsp;<a target='_blank' href='http://www.whatwg.org/specs/web-apps/current-work/multipage/'>http://www.whatwg.org/specs/web-apps/current-work/multipage/</a><br />Ref:&nbsp;<a target='_blank' href='http://ie.microsoft.com/testdrive/'>http://ie.microsoft.com/testdrive/</a></p> <p class='content' style='line-height: 17px; font-family: Tahoma; color: #333333; font-size: 12px;'>&nbsp;</p> <p class='content' style='line-height: 17px; font-family: Tahoma; color: #333333; font-size: 12px;'>อ้างอิง:&nbsp;<span class='Apple' style='line-height: normal; font-family: 'Times New Roman'; color: #000000; font-size: medium;'><a href='http://www.microsoft.com/thailand/msdn/ie9_html5.aspx'>http://www.microsoft.com/thailand/msdn/ie9_html5.aspx</a></span></p> <div class="sharethis-inline-share-buttons"></div> </div> </section> </div> <div class="row"> <section class="col-lg-12"> <div class="box box-solid"> <div class="box-header with-border"> <h3 class="box-title">รูปภาพที่เกี่ยวข้อง</h3> <div class="box-tools pull-right"> <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus-square"></i></button> </div> </div> <div class="box-body"> <ul id="lightgallery" class="list-unstyled row"> <li class="col-xs-4 col-sm-3 col-md-2" data-responsive="image.php?src=files/bigsize_111119099270849_12021415155532.jpg&x=600&f=0 800" data-src="files/111119099270849_12021415155532.jpg" data-sub-html="<h4>html55.jpg</h4><p> <br> Size : 10.28 KBs , Upload : 2012-02-14 15:55:32 </p>"> <a href=""> <img class="img-responsive thumbnail" src="image.php?src=files/bigsize_111119099270849_12021415155532.jpg&x=100&f=0" border="0" width="150"> </a> </li> </ul> </div> </section> </div> <script type="text/javascript"> $(document).ready(function(){ $('#lightgallery').lightGallery(); }); </script> <script src="picturefill.min.js"></script> <script src="dist/js/lightgallery-all.min.js"></script> <script src="lib/jquery.mousewheel.min.js"></script> <div class="row"> <section class="col-lg-9"> <div class="box box-solid"> <div class="box-header with-border"> <h3 class="box-title">ติชม</h3> <div class="box-tools pull-right"> <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus-square"></i></button> </div> </div> <div class="box-body"> <a name="1"></a> <table border="0" width="100%" align="center" class="table table-striped table-hover"> </table> <div class="box-footer clearfix"> <ul class="pagination pagination-sm no-margin pull-right"> <li class='active'><a href='#'><b>1</b></a></li></ul> </div> <br> </div> </section> <section class="col-lg-3"> <div class="box box-solid"> <div class="box-header with-border"> <h3 class="box-title">ต้องการให้คะแนนบทความนี้่ ?</h3> <div class="box-tools pull-right"> <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus-square"></i></button> </div> </div> <div class="box-body"> <table border="0" width="100%" align="center" class="table table-striped table-hover"> <tr> <td> <table border='0' width='100%%'> <tr><td><center><b><big>0</big></b></center></td> <tr><td><center><a href='?links=755&sp=vote'><i class='fa fa-thumbs-o-up fa-lg'></i> คะแนนโหวด</a></center></td> </table> </td> </tr> </table> </div> </div> <div class="box box-solid"> <div class="box-header with-border"> <h3 class="box-title">สร้างโดย :</h3> <div class="box-tools pull-right"> <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus-square"></i></button> </div> </div> <div class="box-body"> <table border="0" width="100%" align="center" class="table table-striped table-hover"> <td align="center" > <table border="1" cellpadding="2" cellspacing="2" style="" width="1" height="1" bordercolor="#FC38A1"> <tr> <td><a href=".?usid=111119099270849" target="_parent"><img src="files/resize_111119099270849_12030713135803.gif" border="0" width="100" height="100"><br> <b><center>kruchi</center></b></a></td> </tr> </table> <a href=".?usid=111119099270849" target="_parent"><i class="fa fa-user" title="รายละเอียด"></i></a> <i class='fa fa-smile-o' title='Share'></i> <br>สถานะ : ผู้ใช้ลงทะเบียน <br>คอมพิวเตอร์ธุรกิจ </td> <table border="0" width="100%" align="center" class="table table-striped table-hover"> </table> </table> </div> </section> </div> </div> </section> </div> </div> <footer class="main-footer"> <div class="pull-right hidden-xs"> <small> <a href='policy.php'>นโยบาย</a> | <a href='develop.php'>ทีมงานผู้พัฒนา</a></b> <!-- PHPcounter code start --> <script type="text/javascript" language="javascript"> <!-- function PHPcounter(){ document.write("<a href=\"counter/?name=counter\" target=\"_blank\">"); document.write("<img src=\"counter/hit.php?name=counter&Referer="+escape(document.referrer)+"\" align=\"center\" border=\"0\" title=\"\">"); document.write("<");document.write("/a>"); } //--> </script> <script type="text/javascript" language="javascript"> <!-- PHPcounter(); //--> </script> <noscript><a href="counter/?name=counter" target="_blank"><img border="0" src="counter/hit.php?name=counter" title=""></a></noscript> <!-- PHPcounter code end --> <font color='CECECE'> v:20230009 </font><font color='CECECE'>Gen : 2.354302 sec. </font> </div> <font color="#F781CF"> <b>KMe</b> : วิทยาลัยเทคโนโลยีพณิชยการอยุธยา เลขที่ 94 หมู่ 6 ถ.โรจนะ ต.ไผ่ลิง อ.พระนครศรีอยุธยา จ.พระนครศรีอยุธยา 13000 </br> Tel.0-3533-5873 หรือ 06-5771-4555 Fax. 0-3533-5873 ต่อ 100 Email: atcc@atcc.ac.th </font> </footer> <!-- bootstrap color picker --> <script src="bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script> <!-- Page script --> <script> $(function () { //Colorpicker $('.my-colorfield1').colorpicker() //color picker with addon $('.my-colorfield2').colorpicker() $('.my-colorfield3').colorpicker() $('.my-colorfield4').colorpicker() $('.my-colorfield5').colorpicker() $('.my-colorfield6').colorpicker() $('.my-colorfield7').colorpicker() $('.my-colorfield8').colorpicker() $('.my-colorfield9').colorpicker() $('.my-colorfield10').colorpicker() $('.my-colorfield11').colorpicker() $('.my-colorfield12').colorpicker() $('.my-colorfield13').colorpicker() $('.my-colorfield14').colorpicker() $('.my-colorfield15').colorpicker() $('.my-colorfield16').colorpicker() $('.my-colorfield17').colorpicker() $('.my-colorfield18').colorpicker() $('.my-colorfield19').colorpicker() $('.my-colorfield20').colorpicker() $('.my-colorfield21').colorpicker() $('.my-colorfield22').colorpicker() $('.my-colorfield23').colorpicker() $('.my-colorfield24').colorpicker() $('.my-colorfield25').colorpicker() $('.my-colorfield26').colorpicker() $('.my-colorfield27').colorpicker() }) </script> <script src="ckeditor/ckeditor.js"></script> <script> $(function () { CKEDITOR.replace('editarea') }) var l = 1; function toggleEditor() { if (l == 0) { CKEDITOR.replace('editarea'); l=1; } else { CKEDITOR.instances.editarea.destroy(); l=0; } } </script> <script src="bootstrap-slider/bootstrap-slider.js"></script> <script> $(function () { /* BOOTSTRAP SLIDER */ $('.slider').slider() }) </script> </div> </body> </html>