[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 เลยครับ

<form>
<fieldset>
<legend>New Attributes</legend>
<p>
<label>Required:</label>
<input type="text" name="html5requied" required="true">
<small>Works in Opera & Chrome</small>
</p>
<p>
<label>AutoFocus:</label>
<input type="text" name="html5autofocus" autofocus="true">
<small>Works in Opera, Chrome & Safari</small>
</p>
<p>
<label>PlaceHolder:</label>
<input type="text" name="html5placeholder" placeholder="This Will Show in WebKit">
<small>Works in Chrome & Safari</small>
</p>
<p>
<label>Input Pattern:</label>
<input type="text" pattern="[0-9][A-Z]{3}" name="html5pattern" required title="Enter a digit followed by three uppercase letters"/>
<small>Works in Opera & Chrome</small>
</p>
<p>
<label>Multiple Files:</label>
<input type="file" name="html5multiplefileupload" multiple>
<small>Works in Chrome, Safari & Firefox</small>
</p>
<p>
<label>List:</label>
<input type="text" name="html5textwithdatalist" list="colors">
<datalist id="colors">
<option value="Red">
<option value="Green">
<option value="Blue">
</datalist>
<small>Works in Opera</small>
</p>
</fieldset>

<fieldset>
<legend>New Input Types</legend>
<p>
<label>Email:</label>
<input type="email" name="html5email">
<small>Works in Opera</small>
</p>
<p>
<label>URL:</label>
<input type="url" name="html5url">
<small>Works in Opera</small>
</p>
<p>
<label>Number:</label>
<input type="number" name="html5number" min="1" max="10" step="1" value="1">
<small>Works in Opera</small>
</p>
<p>
<label>Range:</label>
<input type="range" name="html5range" min="-100" max="100" value="0" step="10">
<small>Works in Opera, Chrome & Safari</small>
</p>
<p>
<label>Time:</label>
<input type="time" step="900" name="html5time">
<small>Works in Opera</small>
</p>
<p>
<label>Date:</label>
<input type="date" name="html5date">
<small>Works in Opera</small>
</p>
<p>
<label>Month:</label>
<input type="month" name="html5month">
<small>Works in Opera</small>
</p>
<p>
<label>Week:</label>
<input type="week" name="html5week">
<small>Works in Opera</small>
</p>
<p>
<label>DateTime:</label>
<input type="datetime" name="html5datetime">
<small>Works in Opera</small>
</p>
</fieldset>

<div><button>Submit</button></div>
</form>

 

 


HTML5 Audio & Video

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

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

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

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

Audio Player

<audio controls>
<source src="demo-audio.ogg" />
<source src="demo-audio.mp3" />
</audio>

 

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

แจกโค้ด HTML5 เพลง เสียง Audio

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

Video Player

<video width="320" height="240" controls preload="none" poster="videoframe.jpg">
<source src="demo-video.mp4" type="video/mp4" />
<source src="demo-video.ogv" type="video/ogg" />
</video>

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

แจกโค้ด HTML5 Video Audio

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

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Demo</title>
<link rel="stylesheet" href="html5reset.css" type="text/css" />
<link rel="stylesheet" href="html5simple.css" type="text/css" />
<!--[if lt IE 9]>
<script src="html5.js"></script>
<script src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');

// Draw Rectangle
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect (10, 10, 100, 100);

// Draw Circle
ctx.fillStyle = "rgb(0,255,0)";
ctx.beginPath();
ctx.arc(125,100,50,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();

// Draw Custom Shape With Lines
ctx.fillStyle = "rgb(0,0,255)";
ctx.beginPath();
ctx.moveTo(125,100);
ctx.lineTo(175,50);
ctx.lineTo(225,150);
ctx.fill();
ctx.closePath();

// Draw Image From External File
var myImage = new Image();
myImage.onload = function(){
ctx.drawImage(myImage, 220, 10);
}
myImage.src = "sample.jpg";

}
}
</script>
<style type="text/css">
canvas {
border: 5px solid #ccc;
background: #000;
}
</style>
</head>
<body onload="draw();">
<header>
<h1>HTML5 Canvas Demo</h1>
</header>

<figure>
<canvas id="mycanvas" width="300" height="200">Fallback content, in case the browser does not support Canvas.</canvas>
<figcaption>Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)</figcaption>
</figure>
</body>
</html>

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

ตัวอย่างการวาดรูปด้วย HTML5 Canvas

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

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

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


* สำหรับท่านที่เป็นมือใหม่ และต้องการเรียนรู้ HTML5 และ CSS3 แบบรวดเร็ว และเข้าใจง่าย ขณะนี้ทาง Designil School ยินดีมอบส่วนลด คอร์สวีดิโอ Basic HTML5 & CSS3 ให้ท่านที่อ่านบทความนี้ในเดือนนี้ครับ สามารถคลิก รับส่วนลดคอร์ส 15% ได้เลย




About Author

60 Comments

  • Endesign
    Posted June 8, 2010 10:29 pm 0Likes

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

    • DesignIL
      Posted June 17, 2010 1:12 pm 0Likes

      ได้เลยครับผม ^^

  • LuviKunG
    Posted June 9, 2010 9:29 pm 0Likes

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

    • DesignIL
      Posted June 17, 2010 1:13 pm 0Likes

      555+ รอติดตามเล่นครับ เกมนี้

  • ดูหนังออนไลน์
    Posted June 13, 2010 3:54 am 0Likes

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

    • DesignIL
      Posted June 17, 2010 1:13 pm 0Likes

      ครับผม ขอบคุณที่แวะมาเยี่ยมกันนะครับ ^^

  • finzaa
    Posted June 17, 2010 1:39 pm 0Likes

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

    • DesignIL
      Posted June 17, 2010 1:53 pm 0Likes

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

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

  • zama
    Posted June 18, 2010 6:48 pm 0Likes

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

    • Designil
      Posted June 18, 2010 7:21 pm 0Likes

      สงสัยอะไรแวะไปถามในเว็บบอร์ดได้เลยนะคร้าบ

  • หนังออนไลน์
    Posted June 18, 2010 9:31 pm 0Likes

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

  • gd_ab
    Posted June 19, 2010 11:12 am 0Likes

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

    • DesignIL
      Posted June 21, 2010 2:12 pm 0Likes

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

  • ไอ้แอนนนนน
    Posted June 23, 2010 12:47 pm 0Likes

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

  • NOoManJiE
    Posted June 23, 2010 1:01 pm 0Likes

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

  • enviengine
    Posted June 23, 2010 7:49 pm 0Likes

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

    • DesignIL
      Posted June 24, 2010 1:42 am 0Likes

      ขอบคุณมากครับ มีข้อสงสัยอะไรถามได้เลยนะครับ ^^

  • SnowFox
    Posted June 30, 2010 11:06 am 0Likes

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

  • Winiie
    Posted July 1, 2010 8:45 am 0Likes

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

  • babyblack
    Posted July 17, 2010 7:47 pm 0Likes

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

    • DesignIL
      Posted July 17, 2010 11:02 pm 0Likes

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

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

  • boonp
    Posted July 29, 2010 6:00 am 0Likes

    ขอบคุณมากครับทีให้ความรู้ได้อย่างมาก
    ผมเพิ่งเริ่มศึกษา 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
      Posted August 3, 2010 12:59 pm 0Likes

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

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

  • ิboonp
    Posted August 6, 2010 4:04 pm 0Likes

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

    • Designil
      Posted August 6, 2010 5:01 pm 0Likes

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

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

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

  • boonp
    Posted August 7, 2010 1:21 am 0Likes

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

    • DesignIL
      Posted August 7, 2010 11:12 am 0Likes

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

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

  • Nus
    Posted August 23, 2010 8:23 am 0Likes

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

  • p1i3c1h
    Posted October 16, 2010 1:28 pm 0Likes

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

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

  • Designil
    Posted October 17, 2010 12:08 am 0Likes

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

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

  • เกมส์
    Posted November 17, 2010 4:20 am 0Likes

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

  • Chaaim Thidarat
    Posted June 22, 2011 1:23 pm 0Likes

    ขอบคุณค่ะ : )

  • Chaaim Thidarat
    Posted June 22, 2011 1:23 pm 0Likes

    ขอบคุณค่ะ : )

  • Chaaim Thidarat
    Posted June 22, 2011 1:23 pm 0Likes

    ขอบคุณค่ะ : )

  • Yapara
    Posted July 3, 2011 3:47 am 0Likes

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

  • Endlessohm
    Posted July 16, 2011 3:00 am 0Likes

    เยี่ยม

  • Assadsd
    Posted September 16, 2011 3:57 pm 0Likes

    ss

  • Then007
    Posted September 21, 2011 3:28 am 0Likes

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

  • Jiwjalaen_8
    Posted October 18, 2011 6:58 am 0Likes

    ขอบคุณคับผม

  • anantsidt choeypho
    Posted October 25, 2011 5:20 am 0Likes

    ขอบคุณครับ

  • weratad14
    Posted November 17, 2011 2:01 am 0Likes

    ขอบคุณครับ

  • Pikshadow
    Posted November 18, 2011 6:13 am 0Likes

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

  • Anonymous
    Posted November 22, 2011 1:29 pm 0Likes

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

  • Notepk
    Posted December 15, 2011 10:54 am 0Likes

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

  • jee
    Posted January 12, 2012 12:13 pm 0Likes

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

    • Designil
      Posted January 12, 2012 3:45 pm 0Likes

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

      • Anonymous
        Posted January 15, 2012 6:16 pm 0Likes

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

        • SomjuK Pinsitong
          Posted September 7, 2012 3:21 am 0Likes

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

  • Anonymous
    Posted January 15, 2012 6:14 pm 0Likes

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

  • Nut_nutto
    Posted February 1, 2012 1:19 pm 0Likes

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

  • Topbomberman
    Posted February 7, 2012 4:17 pm 0Likes

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

  • Anonymous
    Posted February 25, 2012 7:26 am 0Likes

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

  • Yuya101
    Posted April 23, 2012 4:47 pm 0Likes

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

  • Colorupurlife
    Posted May 18, 2012 9:05 am 0Likes

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

  • aof
    Posted July 15, 2012 1:15 pm 0Likes

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

  • Ben-namkig
    Posted August 25, 2012 6:41 pm 0Likes

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

  • SomjuK Pinsitong
    Posted September 7, 2012 3:19 am 0Likes

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

    • Designil
      Posted March 8, 2013 2:25 pm 0Likes

      ปกติแสดงผลอยู่แล้วนะครับ TT

  • Sakura
    Posted December 2, 2012 4:33 pm 0Likes

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

    • Designil
      Posted March 8, 2013 2:25 pm 0Likes

      ลองใช้ CSS3 Animation ครับผม 🙂

Leave a comment