HTML5 | HTML5 in Thail

เริ่มต้นเรียนรู้ HTML5 อย่างไรดี

January 11th, 2011 | by กระปาล์ม | html5 introduction

Jan
11

html5

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

Read full story

3 Comments »

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

January 4th, 2011 | by กระปาล์ม | html5 introduction

Jan
04

GTUG BootCamp 2011 เป็นงานเสวนา ที่พูดคุย แลกเปลี่ยน และแสดงเทคโนโลยีของ Google ตลอดจนพบปะกับเหล่านักพัฒนาที่ เข้ามาร่วมงาน โดยในครั้งนี้มีหัวข้อสำหรับเสวนา ได้แก่ Android , Chrome Extension & Developer Tools, HTML5 และ Google App Engine จัดวันที่ 15 มกราคม 2554 เวลา 9.30 – 16.00 น. ที่อาคารอินเตอร์เนชั่นแนล คณะวิศวกรรมศาสตร์ มหาวิทยาลัยเกษตรศาสตร์ บางเขน (จำกัดที่นั่ง 250 ที่นั่งเท่านั้น) ในงานนี้ผมไปพูดในหัวข้อ HTML5 : The future of website ชวงเวลา 2.45pm – 3.45pm เป็นการพูดคุย พร้อมทั้งแสดงความสามารถของเทคโนโลยี HTML5 รวมถึงแนะนำแหล่งข้อมูลสำหรับนักพัฒนา http://www.html5rocks.com หรือ http://www.html5.in.th รายะเอียดเพิ่มเติมตามลิงค์ด้านล่างครับ
http://bangkok.gtugs.org/events/gtugbootcamp2011

1 Comment »

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

January 3rd, 2011 | by กระปาล์ม | html5 examples

Jan
03

canvas หลังจากเราได้รู้แล้วว่า Canvas Element มันคืออะไร ทำงานอย่างไร จากบทความ Canvas element ใน HTML5 คืออะไร ? ตอนที่ 1 คราวนี้เราจะมาดูตอนที่ 2 กัน ซึ่งตอนนี้ผมจะมาสอนวิธีการสร้าง Canvas กัน Canvas ใน HTML5 นั้นมี attribute ที่สำคัญที่จำเป็นต้องมีหลักๆ อยู่ 3 ตัวด้วยกัน ต้องกำหนด id, width, และ height ทั้ง 3 ตัวเป็น attribute ที่จำเป็นสำหรับ Canvas Element อย่างแรกทำไทต้องกดหนด id ให้ ตรงถ้าใครที่เคยพัฒนาเว็บมาอยู่แล้วก็คงทราบๆ กันดีว่าเพื่ออะไร แต่ใครไม่ทราบผมจะอธบายสั้นๆ ละกันครับ กำหนด ID ก็เพื่อให้ง่ายต่อการเรียกใช้งานหรือเข้าถึง Element นั้นๆ แน่อนครับเวลาจะใช้งานต้องเปิด Element ด้วย <canvas> และปิดด้วย </canvas>

ตัวอย่างการใช้งาน Canvas Element ใน HTML5

<canvas id="myCanvas" width="200" height="100"></canvas>

อย่างที่ผมบอกในบทความก่อนครับ Canvas Element นั้นเป็นเหมือนคำสั่งที่จะใช้สร้างกราฟฟิก แต่เจ้า Canvas เองไม่สามารถทำงานได้ด้วยตัวเอง เนื่องจากมันก็ยังเป็น HTML ดีๆ นี่เอง ยังคงต้องอาศัยภาษาสคริปในการควบคุม ซึ่งจะทำงานได้ต้องอาศัยภาษา JavaScript เป็นตัวควบคุมในการทำงานต่างๆ เช่นสั่งให้วาดเส้นตรง และขีดเขียน เรามาดูคำสั่ง JavaScript ที่จะควบคุมให้เจ้า Canvas สามารถวาดภาพที่เราต้องการได้อย่างไร

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

จะเห็นว่าชุดคำสั่ง JavaScript ชุดนี้ได้เข้าถึง Element ที่ ID ที่ชื่อว่า myCanvas นั้นเองครับ สังเกตได้จากบรรทัด

var c=document.getElementById("myCanvas");

จากนั้นเมื่อหา Element ดังกล่าวเจอก็จะทำการสร้าง context object ขึ้นมา

var cxt=c.getContext("2d");

คำสั่งบรรทัดนี้ ตรง getContext(“2d”) เป็น built-in object ที่มาพร้อมกับ HTML5 ซึ่งจะประกอบไปด้วยคำสั่งต่างๆ เช่น คำสั่งวาดเส้นตรง วงกลม รูปสี่เหลี่ม ตัวหนังสือ รูปภาพ หรืออื่นๆ

ต่อมาก็เป็นการสร้างรูปสี่เหลี่ยมพื่นภาพสีแดงขึ้นมา

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

อ่อเกือบลืม ไอ้ตรง c. หรือ cxt. นี่คงเข้าใจนะครับว่ามันคืออะไร มันเป็นชุดคั่งสั่งของ JavaScript มาต่อกันเลยละกัน fillStyle นั้นเป้นการกำหนดสีแดงลงไป ส่วน fillRect เป็นการกำหนด รูปร่าง ตำแหน่ง แล้วก็ขนาดของวัตถุ

canvas

ผลที่ได้จากคำสั่งก็เป็นดังรูปด้านบนครับ

อ้างอิงจาก w3schools.com

2 Comments »

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

January 3rd, 2011 | by กระปาล์ม | html5 introduction

Jan
03

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

<div id="header"></div>

Semantic Markup คืออะไร ? ถ้าจะอธิบายให้เข้าใจแบบง่ายๆ ไม่ต้องเทคนิคมากมันก็เป็นเหมือน ชื่อที่ใช้เรียกแทนตัว Markup ต่างๆ ซึ่งจะเรียกชื่อเป็นไปในทิศทางเดียวกัน และเป็นชื่อที่มีความหมาย เพื่อให้สื่อสารเข้าใจง่ายๆ ถ้าจะให้เห็นภาพมากขึ้นเราลองมาดูภาพแรกด้านล่างกันครับ

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

HTML5 กับ Div Element หรือ Semantic Markup

พอมาเป็น HTML5 Semantic Markup ไอ้เจ้า DIV Element ก็เปลี่ยนจากเดิม <div id=”header”> เขียนแค่ <header> มันง่าย และสั้นลงแถม code ไม่รกด้วย แต่ div ก็ยังคงสามารถใช้งานอยู่ ไม่ได้ถูกตัดออกใน HTML5 แต่อย่างใดครับ ซึ่งใน Semantic Markup นั้นก็จะโดยประกอบไปด้วย Element ต่างๆ ดังนี้ <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>,<time>, <mark>, <figure>, และ <figcaption> คิดว่าจากบทความนี้คงทำให้หลายๆ คนเริ่มสนใจที่จะหันมาเล่น HTML5 กันบ้างนะครับ ไว้พบกันใหม่ในบทความหน้าครับ

4 Comments »

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

January 3rd, 2011 | by กระปาล์ม | html5 introduction

Jan
03

New Elements in HTML5 มีหลายๆ คนสงสัยและถามผมว่าใน HTML5 นั้นมีอะไรใหม่บ้าง ? ซึ่งคำตอบที่ได้ผมคงตอบได้ไม่หมด แต่เอาละไหนๆ มีคนถามเยอะก็มาเขียนอธิบายซะเลยง่ายดี อย่างแรกเลยถ้าเทียบกับ HTML4 สิ่งที่เปลี่ยนไปอย่างเห็นได้ชัดก็คือในเรื่องของ Syntax ซึ่งตรงนี้มันเป็นเรื่องพื้นฐานที่มันต้องปรับเปลี่ยนให้ดีขึ้นอยู่แล้ว ผมจะกล่าวแต่ในส่วนที่สำคัญๆ ส่วนในเรื่อง Syntax นั้นขอยกยอดไปบทความต่อๆ ไปละกัน ใน HTML5 นอกจาก Syntax ที่เปลี่ยนแปลงแล้วนั้น ก็จะมี New Elements ที่เพิ่มเข้ามา และในส่วนของ Semantic Markup ที่เปลี่ยนไป ซึ่งในบทความนี้จะผมจะพูดในเรื่องของ New Elements in HTML5 หรือ Elements ใหม่ๆ เพิ่มเข้ามาครับ ได้แก่ Markup Elements, Media Elements, Canvas Element, Form Elements แล้วก็ Attribute Values ครับ

HTML5 ยังเป็นอะไรที่ใหม่อยู่มาก ซึ่งมันถูกพัฒนาจาก HTML เวอร์ชั่นเดิมให้สามารถทำงานได้ดีขึ้น แต่การพัฒนาโครงสร้างของภาษานั้นไม่ได้เป็นการพัฒนาใหม่หมด หรือทิ้งของเก่าไป ยังคงมีโครงสร้างหลายๆ ตัวที่ยังคงมีอยู่เช่นพวก Metadata ต่างๆ เช่น head, tilte, meta, body, link, sytle, script ซึ่งพวกนี้ยังคงมีอยู่ใน HTML5 และก็ยังมี Elements ใหม่ๆ ที่เพิ่มเข้ามาซึ่งก็แบ่งออกตามหมวดหมู่ที่ผมได้บอก ซึ่งผมยังไม่บอกว่าแต่ละตัวมันทำงานยังไง มีหน้าที่อะไร แล้วจะใช้งานพวกมันได้อย่างไร เรามาดูกันก่อนเลยว่า Elements ที่มีมาใหม่นั้นมีอะไรบ้าง ไว้บทคามต่อไปผมจะมาสอนทุกๆ Elements ที่มาให้กันเลย

New Markup Elements
New elements for better structure:

Tag	Description
<article>	For external content, like text from a news-article, blog, forum, or any other content from an external source
<aside>	For content aside from the content it is placed in. The aside content should be related to the surrounding content
<command>	A button, or a radiobutton, or a checkbox
<details>	For describing details about a document, or parts of a document
<summary>	A caption, or summary, inside the details element
<figure>	For grouping a section of stand-alone content, could be a video
<figcaption>	The caption of the figure section
<footer>	For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
<header>	For an introduction of a document or section, could include navigation
<hgroup>	For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
<mark>	For text that should be highlighted
<meter>	For a measurement, used only if the maximum and minimum values are known
<nav>	For a section of navigation
<progress>	The state of a work in progress
<ruby>	For ruby annotation (Chinese notes or characters)
<rt>	For explanation of the ruby annotation
<rp>	What to show browsers that do not support the ruby element
<section>	For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<time>	For defining a time or a date, or both
<wbr>	Word break. For defining a line-break opportunity.

New Media Elements

HTML5 provides a new standard for media content:

Tag	Description
<audio>	For multimedia content, sounds, music or other audio streams
<video>	For video content, such as a movie clip or other video streams
<source>	For media resources for media elements, defined inside video or audio elements
<embed>	For embedded content, such as a plug-in

The Canvas Element

The canvas element uses JavaScript to make drawings on a web page.

Tag	Description
<canvas>	For making graphics with a script

New Form Elements

HTML5 offers more form elements, with more functionality:

Tag	Description
<datalist>	A list of options for input values
<keygen>	Generate keys to authenticate users
<output>	For different types of output, such as output written by a script

New Input Type Attribute Values

Also, the input element’s type attribute has many new values, for better input control before sending it to the server:

Type	Description
tel	The input value is of type telephone number
search	The input field is a search field
url	The input value is a URL
email	The input value is one or more email addresses
datetime	The input value is a date and/or time
date	The input value is a date
month	The input value is a month
week	The input value is a week
time	The input value is of type time
datetime-local	The input value is a local date/time
number	The input value is a number
range	The input value is a number in a given range
color	The input value is a hexadecimal color, like #FF8800

อ้างอิงจาก w3schools.com

2 Comments »

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

January 3rd, 2011 | by กระปาล์ม | html5 demo

Jan
03

HTML5 Canvas

muro เป็นโปรเจคของเว็บไซต์ DeviantART ที่พัฒนาระบบวาดภาพออนไลน์ด้วยโครงสร้างภาษา HTML5 และฟีเจอร์ที่ถูกหยิบมาใช้ก็คือ Canvas element หากใครไม่รู้ว่าไอ้เจ้า Canvas มันคืออะไรก็ลองอ่านบทความ Canvas element ใน HTML5 คืออะไร ? ดูได้ครับ muro เป็นตัวอย่างที่ชัดเจนมากในการนำเอาฟีเจอร์ Canvas มาพัฒนาเป็นระบบวาดภาพ และข้อดีของมันก็คือสามารถทำงานบน Mobile device ต่างๆ ผมได้ลองเล่นบน iPad แล้วก็สามารถใช้งานได้ แต่แบบขัดๆ ผมไม่แน่ใจว่าเป็นที่ตัวระบบเองที่พัฒนามาไม่ดี หรือว่าโครงสร้างทางด้านภาษาของ HTML5 เองที่มีปัญหา หรือไม่ก็เป็นที่ iPad เองที่ไม่ดี (อันนี้เดี๋ยวจะหาข้อมูลเพิ่มเติมครับ) แต่โดยร่วมสามารถใช้งานได้ ในอนาคตหาก HTML5 สมบูรณ์ขึ้นกว่านี้เราคงได้เห็นระบบอย่างนี้มากขึ้นๆ และแน่นอนต่อไปคงไม่ต้องยึดติดกับระบบปฏิบัติการ ระบบในลักษณะนี้อาจจะมาทดแทนแอพพลิเคชั่น หรือโปรแกรมบนเครื่องคอมพิวเตอร์ของเราก็เป็นได้ครับ หากใครสนใจใช้งานก็เข้าไปที่ muro.deviantart.com ใช้งานได้ทันที ไม่ต้องสมัครสมาชิกใดๆ ครับ

HTML5