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



HTML5

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

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

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

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

HTML5 Form

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

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

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

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

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

</p>
<p>&lt;form&gt;<br />
 &lt;fieldset&gt;<br />
 &lt;legend&gt;New Attributes&lt;/legend&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;Required:&lt;/label&gt;<br />
 &lt;input type=&quot;text&quot; name=&quot;html5requied&quot; required=&quot;true&quot;&gt;<br />
 &lt;small&gt;Works in Opera &amp; Chrome&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;AutoFocus:&lt;/label&gt;<br />
 &lt;input type=&quot;text&quot; name=&quot;html5autofocus&quot; autofocus=&quot;true&quot;&gt;<br />
 &lt;small&gt;Works in Opera, Chrome &amp; Safari&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;PlaceHolder:&lt;/label&gt;<br />
 &lt;input type=&quot;text&quot; name=&quot;html5placeholder&quot; placeholder=&quot;This Will Show in WebKit&quot;&gt;<br />
 &lt;small&gt;Works in Chrome &amp; Safari&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;Input Pattern:&lt;/label&gt;<br />
 &lt;input type=&quot;text&quot; pattern=&quot;[0-9][A-Z]{3}&quot; name=&quot;html5pattern&quot; required title=&quot;Enter a digit followed by three uppercase letters&quot;/&gt;<br />
 &lt;small&gt;Works in Opera &amp; Chrome&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;Multiple Files:&lt;/label&gt;<br />
 &lt;input type=&quot;file&quot; name=&quot;html5multiplefileupload&quot; multiple&gt;<br />
 &lt;small&gt;Works in Chrome, Safari &amp; Firefox&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;List:&lt;/label&gt;<br />
 &lt;input type=&quot;text&quot; name=&quot;html5textwithdatalist&quot; list=&quot;colors&quot;&gt;<br />
 &lt;datalist id=&quot;colors&quot;&gt;<br />
 &lt;option value=&quot;Red&quot;&gt;<br />
 &lt;option value=&quot;Green&quot;&gt;<br />
 &lt;option value=&quot;Blue&quot;&gt;<br />
 &lt;/datalist&gt;<br />
 &lt;small&gt;Works in Opera&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;/fieldset&gt;</p>
<p> &lt;fieldset&gt;<br />
 &lt;legend&gt;New Input Types&lt;/legend&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;Email:&lt;/label&gt;<br />
 &lt;input type=&quot;email&quot; name=&quot;html5email&quot;&gt;<br />
 &lt;small&gt;Works in Opera&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;URL:&lt;/label&gt;<br />
 &lt;input type=&quot;url&quot; name=&quot;html5url&quot;&gt;<br />
 &lt;small&gt;Works in Opera&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;Number:&lt;/label&gt;<br />
 &lt;input type=&quot;number&quot; name=&quot;html5number&quot; min=&quot;1&quot; max=&quot;10&quot; step=&quot;1&quot; value=&quot;1&quot;&gt;<br />
 &lt;small&gt;Works in Opera&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;Range:&lt;/label&gt;<br />
 &lt;input type=&quot;range&quot; name=&quot;html5range&quot; min=&quot;-100&quot; max=&quot;100&quot; value=&quot;0&quot; step=&quot;10&quot;&gt;<br />
 &lt;small&gt;Works in Opera, Chrome &amp; Safari&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;Time:&lt;/label&gt;<br />
 &lt;input type=&quot;time&quot; step=&quot;900&quot; name=&quot;html5time&quot;&gt;<br />
 &lt;small&gt;Works in Opera&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;Date:&lt;/label&gt;<br />
 &lt;input type=&quot;date&quot; name=&quot;html5date&quot;&gt;<br />
 &lt;small&gt;Works in Opera&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;Month:&lt;/label&gt;<br />
 &lt;input type=&quot;month&quot; name=&quot;html5month&quot;&gt;<br />
 &lt;small&gt;Works in Opera&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;Week:&lt;/label&gt;<br />
 &lt;input type=&quot;week&quot; name=&quot;html5week&quot;&gt;<br />
 &lt;small&gt;Works in Opera&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;p&gt;<br />
 &lt;label&gt;DateTime:&lt;/label&gt;<br />
 &lt;input type=&quot;datetime&quot; name=&quot;html5datetime&quot;&gt;<br />
 &lt;small&gt;Works in Opera&lt;/small&gt;<br />
 &lt;/p&gt;<br />
 &lt;/fieldset&gt;</p>
<p> &lt;div&gt;&lt;button&gt;Submit&lt;/button&gt;&lt;/div&gt;<br />
&lt;/form&gt;


HTML5 Audio & Video

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

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

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

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

Audio Player

&lt;audio controls&gt;<br />
&lt;source src=&quot;demo-audio.ogg&quot; /&gt;<br />
&lt;source src=&quot;demo-audio.mp3&quot; /&gt;<br />
&lt;/audio&gt;



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

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

Video Player

</p>
<p>&lt;video width=&quot;320&quot; height=&quot;240&quot; controls preload=&quot;none&quot; poster=&quot;videoframe.jpg&quot;&gt;<br />
 &lt;source src=&quot;demo-video.mp4&quot; type=&quot;video/mp4&quot; /&gt;<br />
 &lt;source src=&quot;demo-video.ogv&quot; type=&quot;video/ogg&quot; /&gt;<br />
&lt;/video&gt;</p>
<p>

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

HTML5 Video Demo Imageโดยถ้าอยากลองทดสอบของจริงบนเว็บบราวเซอร์ของคุณ ก็ลองแวะไป 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 กันครับ โค้ดจะยาวสักหน่อยครับ:

</p>
<p>&lt;!doctype html&gt;<br />
&lt;html lang=&quot;en&quot;&gt;<br />
&lt;head&gt;<br />
 &lt;meta charset=&quot;utf-8&quot; /&gt;<br />
 &lt;title&gt;HTML5 Canvas Demo&lt;/title&gt;<br />
 &lt;link rel=&quot;stylesheet&quot; href=&quot;html5reset.css&quot; type=&quot;text/css&quot; /&gt;<br />
 &lt;link rel=&quot;stylesheet&quot; href=&quot;html5simple.css&quot; type=&quot;text/css&quot; /&gt;<br />
 &lt;!--[if lt IE 9]&gt;<br />
 &lt;script src=&quot;html5.js&quot;&gt;&lt;/script&gt;<br />
 &lt;script src=&quot;excanvas.js&quot;&gt;&lt;/script&gt;<br />
 &lt;![endif]--&gt;<br />
 &lt;script type=&quot;text/javascript&quot;&gt;<br />
 function draw(){<br />
 var canvas = document.getElementById('mycanvas');<br />
 if (canvas.getContext){<br />
 var ctx = canvas.getContext('2d');</p>
<p> // Draw Rectangle<br />
 ctx.fillStyle = &quot;rgb(255,0,0)&quot;;<br />
 ctx.fillRect (10, 10, 100, 100);</p>
<p> // Draw Circle<br />
 ctx.fillStyle = &quot;rgb(0,255,0)&quot;;<br />
 ctx.beginPath();<br />
 ctx.arc(125,100,50,0,Math.PI*2,true);<br />
 ctx.fill();<br />
 ctx.closePath();</p>
<p> // Draw Custom Shape With Lines<br />
 ctx.fillStyle = &quot;rgb(0,0,255)&quot;;<br />
 ctx.beginPath();<br />
 ctx.moveTo(125,100);<br />
 ctx.lineTo(175,50);<br />
 ctx.lineTo(225,150);<br />
 ctx.fill();<br />
 ctx.closePath();</p>
<p> // Draw Image From External File<br />
 var myImage = new Image();<br />
 myImage.onload = function(){<br />
 ctx.drawImage(myImage, 220, 10);<br />
 }<br />
 myImage.src = &quot;sample.jpg&quot;;</p>
<p> }<br />
 }<br />
 &lt;/script&gt;<br />
 &lt;style type=&quot;text/css&quot;&gt;<br />
 canvas {<br />
 border: 5px solid #ccc;<br />
 background: #000;<br />
 }<br />
 &lt;/style&gt;<br />
&lt;/head&gt;<br />
&lt;body onload=&quot;draw();&quot;&gt;<br />
 &lt;header&gt;<br />
 &lt;h1&gt;HTML5 Canvas Demo&lt;/h1&gt;<br />
 &lt;/header&gt;</p>
<p> &lt;figure&gt;<br />
 &lt;canvas id=&quot;mycanvas&quot; width=&quot;300&quot; height=&quot;200&quot;&gt;Fallback content, in case the browser does not support Canvas.&lt;/canvas&gt;<br />
 &lt;figcaption&gt;Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)&lt;/figcaption&gt;<br />
 &lt;/figure&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</p>
<p>

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

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

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

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

About the author

designil เจ้าของเว็บไซต์ DesignIL มีประสบการณ์ด้านการสร้างเกมส์ด้วย RPG Maker XP/VX และเขียนสคริปต์ RGSS/RGSS2 (Ruby) สำหรับใช้ในเกมส์ ปัจจุบันเป็นฟรีแลนซ์รับทำงานเว็บดีไซน์ และเขียน Web Application โดยใช้ HTML5/CSS3/PHP/MySQL กำลังศึกษาอยู่คณะวิศวกรรมยานยนต์ จุฬาลงกรณ์มหาวิทยาลัย



79 Responses to “[HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 2)”

  1. Mr.O ♥ says:

    RT @designil: [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 2) http://bit.ly/aet5Oe

  2. RT @woraperth: RT @designil: [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 2) http://bit.ly/aet5Oe

  3. Endesign says:

    จะรอภาค 3 นะครับ ^^

  4. LuviKunG says:

    วู้ว อ่านแล้ว สุดยอด ^^ (เอาไปใช้กับ SHURA ละ 555+)

  5. ดูหนังออนไลน์ says:

    ความคุณความรู้ดีๆครับ

  6. RT @woraperth: RT @designil: http://bit.ly/d8F3no [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 2)

  7. dominixz says:

    RT @woraperth: RT @designil: http://bit.ly/d8F3no [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 2)

  8. finzaa says:

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

    • DesignIL says:

      ไม่ค่อยเข้าใจว่า “เล่นทรานซิชั่นและโอพาซิตี้” คือยังไงเหรอครับ

      หมายถึงทำแบบ jQuery Slide หรือเปล่าเอ่ย?

  9. SnowFox says:

    HTML5 Tips&Tricks: ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 ! (ตอนที่ 2) http://is.gd/cTO1h by designil #ittwt

  10. RT @siangchai: HTML5 Tips&Tricks: ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 ! (ตอนที่ 2) http://is.gd/cTO1h by designil #ittwt #webtips

  11. zama says:

    เป็นประโยชน์มากครับ อนาคต HTML5 ต้องมาแน่นอน ขอบคุณมากครับ

  12. หนังออนไลน์ says:

    ขอบคุณมากสำหรับความรู้ครับ

  13. ทุกอย่างที่คุณควรรู้ เกี่ยวกับ HTML5 !! (ตอนที่ 2) http://is.gd/cUXhK

  14. gd_ab says:

    น่าสนุกดีครับ
    แต่ ไม่รู้ทำไมฟังเสียง วิดีโอไม่ได้ครับ
    FireFox 3.6 Ubuntu 10.04 LTS

    • DesignIL says:

      น่าจะเป็นเพราะ Firefox 3.6 ของ Ubuntu ยังไม่ได้ทำมาให้รองรับตัวเล่นเสียงของ Ubuntu หรือเปล่าครับ?

  15. #aroi แนะนำ HTML5 เป็นภาษาไทย เข้าใจง่าย เขียนดีมากๆ ครับ http://goo.gl/fb/ZJWYq

  16. RT @iannnnn: #aroi แนะนำ HTML5 เป็นภาษาไทย เข้าใจง่าย เขียนดีมากๆ ครับ http://goo.gl/fb/ZJWYq

  17. iPalmpy says:

    RT @iannnnn: #aroi แนะนำ HTML5 เป็นภาษาไทย เข้าใจง่าย เขียนดีมากๆ ครับ http://goo.gl/fb/ZJWYq

  18. โต says:

    RT: @iannnnn: #aroi แนะนำ HTML5 เป็นภาษาไทย เข้าใจง่าย เขียนดีมากๆ ครับ http://goo.gl/fb/ZJWYq

  19. NOoManJiE says:

    RT @iannnnn: #aroi แนะนำ HTML5 เป็นภาษาไทย เข้าใจง่าย เขียนดีมากๆ ครับ http://goo.gl/fb/ZJWYq

  20. i-Egg says:

    RT @iannnnn: #aroi แนะนำ HTML5 เป็นภาษาไทย เข้าใจง่าย เขียนดีมากๆ ครับ http://goo.gl/fb/ZJWYq / สุโค้ยยยยยย อธิบายแบบนี้เยี่ยมไปเลย

  21. RT @kangg: RT @sirapot: RT: @iannnnn: #aroi แนะนำ HTML5 เป็นภาษาไทย เข้าใจง่าย เขียนดีมากๆ ครับ http://goo.gl/fb/ZJWYq

  22. RT @iannnnn: #aroi แนะนำ HTML5 เป็นภาษาไทย เข้าใจง่าย เขียนดีมากๆ ครับ http://goo.gl/fb/ZJWYq

  23. RT @iannnnn: #aroi แนะนำ HTML5 เป็นภาษาไทย เข้าใจง่าย เขียนดีมากๆ ครับ http://goo.gl/fb/ZJWYq

  24. granun says:

    RT @iannnnn: #aroi แนะนำ HTML5 เป็นภาษาไทย เข้าใจง่าย เขียนดีมากๆ ครับ http://goo.gl/fb/ZJWYq

  25. anassirk says:

    RT @iannnnn: #aroi แนะนำ HTML5 เป็นภาษาไทย เข้าใจง่าย เขียนดีมากๆ ครับ http://goo.gl/fb/ZJWYq

  26. enviengine says:

    เขียนได้เยี่ยมและเข้าใจง่ายดีครับ ผมบุ๊คมาร์คไว้เลย

  27. Pornprom says:

    via @iannnnn #aroi แนะนำ HTML5 เป็นภาษาไทย เข้าใจง่าย เขียนดีมากๆ ครับ http://goo.gl/fb/ZJWYq

  28. SnowFox says:

    Re-tweet: HTML5 Tips: ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 ! (ตอนที่ 2) http://is.gd/cTO1h by @designil #ittwt

  29. Winiie says:

    http://bit.ly/d8F3no [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 2)

  30. babyblack says:

    ขอสอบถามหน่อยครับว่า สามารถพัฒนาร่วมกับ javascript เพื่อวาดกราฟและพล็อตจุด จากนั้นสามารถนำเม้าส์ไปคลิกที่แต่ละจุดเพื่อเปลี่ยนตำแหน่งได้รึเปล่าครับ
    ขอบคุณมากครับ

    • DesignIL says:

      ผมไม่ชัวร์ว่าหมายถึงยังไงนะครับ แต่ถ้าเป็นแบบที่ผมคิดน่าจะทำได้ครับ

      หรือจะลองใช้ Library สำหรับวาดกราฟใน Javascript โดยเฉพาะอย่าง http://www.jscharts.com/ ดูก็ได้ครับ (มีหลายตัวครับ ลองหา ๆ ดู)

  31. boonp says:

    ขอบคุณมากครับทีให้ความรู้ได้อย่างมาก
    ผมเพิ่งเริ่มศึกษา html เพื่อเตรียมเขียน website ของตัวเองที่จะมีขึ้น และเริ่มใช้ Homesite 5.5 ซึ่งรองรับแค่ html 4.0 และ xhtml 1.0 และอ่านหนังสือ Brilliant HTML & CSS ของ James A. Brannan ซึ่งจำกัดแค่ html 4.0 กับ CSS เท่านั้น
    ไม่ทราบว่า software และ หนังสือนี้เหมาะใช้ในการเตรียมตัวเบื้องต้น เพื่อก้าวไปสู่การเขียน html5, css3 tag หรือไม่ครับ กลัวว่าจะไปเสียเวลาเรียนรู้กับส่วนที่ล้าสมัยที่ html5 มีอะไรที่มาทดแทนที่ดีกว่า

    ขอคำแนะนำ software และหนังสือ หรือ ข้อมูลในการศึกษาที่เหมาะกว่าด้วยครับ

    • DesignIL says:

      HTML5, CSS3 ยังเป็นเทรนด์ใหม่ซึ่งยังไม่ได้ถูกใช้อย่างกว้างขวางครับ และบราวเซอร์ก็ยังซัพพอร์ทไม่สมบูรณ์ ในตอนนี้การใข้ HTML 4 หรือ XHTML 1 น่าจะดีกว่าครับ คุณสามารถต่อยอดความรู้ไป HTML5 ในภายหลังได้ถ้าต้องการ

      แนะนำว่าให้ศึกษาของเก่าไปก่อนครับ รอจนบราวเซอร์ต่าง ๆ รอรับเต็มที่ก่อน แล้วค่อยมาศึกษา HTML5 ก็ไม่สาย เอาพื้นฐานให้แน่นก่อนครับผม

  32. ิboonp says:

    ขอบคุณครับที่กรุณาสละเวลาตอบมา แต่ัคุณสมบัติพิเศษที่พัฒนาขี้นมาจากข้อบกพร่องเดิม เท่าที่ได้อ่านมาจากที่นี่และที่อื่น ดูจะไม่เป็นปัญหาในการนำมาใช้ใช่ไหมครับ เพราะ browser ต่างๆก็ออก version ใหม่กันทั้งสิ้น และให้ฟรีไม่ต้องเสียเงินลงทุน และถ้ามีคนยังใช้ version เก่าอยู่ก็มีทางแก้อย่างที่ได้แนะนำกันนี่ครับ
    ผมจึงคิดจะใช้ software ที่รองรับ HTML5 ไปเลย เพราะจะใช้ Doctype เป็น html5 และตอนนี้หาหนังสือสอน HTML5 ได้แล้วครับ ส่วน sotware จะเลือกเป็น DreamWeaver CS5 หรืออย่างอื่นดีครับ เท่าทีค้นดู มี Aloha, Topstyle เป็นต้น
    และสำหรับท่านไม่ทราบใช้ตัวไหนครับ

    • Designil says:

      ถ้าบราวเซอร์เวอร์ชั่นเก่าจะใช้วิธีเขียน javascript มารองรับระบบนั้นๆครับ ในกรณีที่เราต้องการให้ทุกบราวเซอร์แสดงผลใกล้เคียงกันมากที่สุด

      แต่ถ้าเป็นระบบไม่สำคัญอะไรก็ไม่ต้องสนใจมากครับ เอาให้แสดงผลแบบอ่านเนื้อหาออกก็พอล่ะ

      ผมชอบเขียนใน text editor เลยน่ะครับ แนะนำ notepad++ สำหรับวินโดว์ และ coda/espresso สำหรับ mac os ครับผม^^

  33. boonp says:

    ขอบคุณอีกครั้งครับ นี่เลยไปเอา notepad++ มาแล้วครับ ก่อนหน้าก็ไปเอา Netbean 6.9 ซึ่งเป็น freeware ที่มี IDE รวมอยู่ในตัวด้วย ดูจะเจ๋งด้าน Java แต่ยังจะไม่รู้ว่าจะใช้เขียน html tag ยังไงเลยยังไม่ได้ใช้ ไม่ทราบว่ามีความเห็นยังไงในการเอา Netbean มาใช้บ้างครับ

    • DesignIL says:

      ผมคิดว่า IDE เหมาะกับเอาไว้เขียนโปรแกรมมากกว่าครับ (Java, PHP etc.)

      ถ้าดีไซน์เว็บไซต์ใช้พวก WYSIWYG น่าจะดีกว่า (พวก Dreamweaver) แต่ยังไงผมก็ถนัด Text Editor มากกว่าทั้งโค้ดทั้งดีไซน์อะคร้าบ

  34. Nus says:

    ขอบคุณสำหรับความรู้ ดีๆ ครับ

  35. p1i3c1h says:

    ขอถามนิดนึงนะครับตกลง HTML 5 พวก tag ที่ไม่จำเป็นต้องมีแท็กปิด ยังต้องมี / อยู่รึเปล่าครับ

    ผมเห็นตรง *
    ยังมี / อยู่เลยอะครับ

  36. Designil says:

    ใน HTML5 ไม่จำเป็นแล้วนะครับ

    แต่มีก็ไม่ผิดครับ เพราะคนส่วนใหญ่น่าจะติดมาจากตอนเขียน XHTML

  37. ขอบคุณมากสำหรับบทความดีๆ มีประโยชน์เรื่อง html5 กำลังจะหัดเขียนอยู่เชียว

  38. ขอบคุณค่ะ : )

  39. ขอบคุณค่ะ : )

  40. ขอบคุณค่ะ : )

  41. Yapara says:

    มีสาระมากค๊าฟฟฟ

  42. Endlessohm says:

    เยี่ยม

  43. Then007 says:

    เขียนได้ละเอียดชัดเจนดีครับ ขอบคุณที่แบ่งปันครับ

  44. ขอบคุณคับผม

  45. ขอบคุณครับ

  46. weratad14 says:

    ขอบคุณครับ

  47. Pikshadow says:

    รออ่านเพิ่มครับ

  48. Anonymous says:

    บทความดีมากครับ

  49. Notepk says:

    ขอบคุณค่า อ่านแล้วเข้าใจง่ายมากเลย

  50. jee says:

    ตอนนี้มีหนังสือภาษาไทย แนะนำให้อ่านบ้างมั้ยคะ

    • Designil says:

      ยังไม่มีเลยนะครับผม

      • Anonymous says:

        มีหนังสือโพสบอกด้วยนะครับ

        • SomjuK Pinsitong says:

          ตอนนี้มีแล้วนะคะ ฉบับแปล พัฒนาเว็บไซต์ให้เหนือชั้นด้วย HTML5&CSS3 ของซีเอ็ดค่ะ,,แต่อ่านแล้วเหมือนงงๆอยู่เลย ต้องลงมือทำด้วยถึงจะคุ้มค่าหนังสือ,,แต่หนูยังไม่ค่อยได้อ่านเลยค่ะ –^^

  51. Anonymous says:

    ดีมากครับ จะติดตามเรื่อย ๆๆ กำลังกลับมาศึกษาด้านเขียนโปรแกรม 

  52. Nut_nutto says:

    ออกตอนนี้ 3 มาเร็วๆ นะคะ รออยู่นะคะ ^^

  53. Topbomberman says:

    ต่อๆ ครับ ติดตาม… ขอบคุณมาก 

  54. Anonymous says:

    สวัสดีจะปลอดภัยและฟรีไม่พลาดทุกท่าน frivjuegos2.net – friv-2.info – y8friv.info

  55. Yuya101 says:

    ขอบคุณมากๆครับ บทความสุดยอดมากๆ

  56. Colorupurlife says:

    ขอบคุณมากๆ คะ จะติดตามบทความเรื่อยๆ คะ

  57. aof says:

    ได้ความรู้มากครับ จะเอาไปพรีเซนอยู่พอดีเลย อยากได้ตอน3และ4,5,6แล้วคร๊าฟฟฟ

  58. Ben-namkig says:

    อ่านแล้วได้ความรู้จริงๆครับ อยากให้มีอีกหลายๆตอนเลย ว่างๆมาอัพอีกนะครับ

  59. SomjuK Pinsitong says:

    เอ่อ,,คือว่า หนูลองเขียน htm5 แล้วนะคะ แต่ว่า ทำไมมันไม่แสดงผลภาษาไทยก็ไม่รู้?? มีทริกหรือเทคนิคอะไรไหมคะ,,รบกวนด้วยค่ะ

  60. Sakura says:

     อยากทราบวิธีทำ Header ที่มันขยับได้ครับ
    จะได้เอาไปแทน Flash ที่มันอืดเหลือเกินครับ

Leave a Reply