Home › Archive for HTML5

HTML5

หัดเขียน Jade ตอนที่ 1

Posted on by — No Comments ↓

หลังจากที่เรารู้จักวิธีการใช้งาน jade จากบทความตอนที่แล้ว ในบทความนี้เราจะมาทำความรู้จักการเขียน jade กันต่อ โดยอันดับแรกต้องเริ่มจากโครงสร้างของเอกสาร HTML โดยปกติจะใช้งาน tag เปิดและ tag ปิด แต่ใน jade จะใช้การย่อหน้าแทนดังนั้นโครงสร้างเริ่มต้นของเอกสารจะเป็นรูปแบบดังนี้

ในส่วนของโครงสร้าง HTML จะเป็นตามรูปแบบด้านบน โดยการสร้าง tag จะเป็นไปตามรูปแบบดังนี้

จะเห็นว่าเราจะเริ่มต้นด้วยชื่อ tag เช่น link(….) จะ generate เป็น parameter ใน function แต่ละตัวจะเป็น attribute ต่างๆ เช่นจากใรตัวอย่าง

จะได้ผลลัพธ์ออกมาเป็น

สิ่งที่อยู่ในวงเล็บของ jade จะถูกแตกออกมาเป็น attribute แต่ละตัวของ tag link ซึ่งในการเขียน jade เราจะใช้ pattern แบบนี้ทั้งหมด
และถ้าเราจะใส่ code javascript จะใส่แบบนี้

ใน jade จะมีการใส่ content ใน 2 รูปแบบคือ

ซึ่งเราจะได้ผลลัพธ์แบบบรรทัดเดียว ดังนี้

และอีกรูปแบบคือ

เราจะได้ผลลัพธ์แบบมีการขึ้นบรรทัดใหม่(ต้องใส่ -P เข้าไปตอนที่ พrun command ด้วย) ซึ่งเราจะได้ผลลัพธ์แบบนี้

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

การใข้งาน Jade Template Engine

Posted on by — No Comments ↓

จริงๆถ้าพูดถึง Template Engine ที่มีอยู่มากมายนับไม่ถ้วน ทั้งแบบที่มากับ Framework(เช่น Razor, Twig, Blade) และมาแบบไม่สนใจใครแบบ jade จริงๆแล้วถ้าพูดถึงปริมาณการใช้งาน Template Engine ถือว่ายังน้อย แต่ก็ถือว่าเพิ่มจากเมื่อก่อนเยอะมาก ข้อดีของ Jade ก็คงจะเหมือนกับ Template Engine ตัวอื่นๆ ซึ่งหลักๆแล้วจะทำให้ Code ที่เป็น HTML นั้นอ่านง่ายขึ้น(เพราะมันเขียนสั้นลง) โดยเฉพาะ Jade เราจะเขียนแบบใช้ indention(การย่อหน้า)แทนการใช้ Tag เปิดและ Tag ปิด แบบที่เราใช้ใน HTML ซึ่งทำให้ Code ของ Jade นั้นอ่านง่ายกว่ามากๆ ลองดูตัวอย่าง Jade เมื่อ เทียบกีบ HTML แบบปกติ ตามรูป

jade

ยิ่งในปัจจุบันไฟล์ HTML มักจำมีขนาดมากขึ้นเรื่อยๆ ทำให้การ maintain ทำได้ลำบากมาขึ้น Template Engine จะมาช่วยแก้ปัญหานี้

คราวนี้เรามาดูวิธีการติดตั้งและใช้งาน Jade กัน โดยเริ่มจากการติดตั้ง เราจะใช้ node package manager(npm) เป็นตัวติดตั้ง ถ้าใครยังไม่มีก็ไปติดต้ัง nodejs กันก่อน แต่ถ้าติดตั้ง nodejs เรียบร้อย เราก็ทำการติดต้ัง jade โดยใช้คำสั่ง

หลังจากนั้นเราจะสามารถใช้งาน jade ในการ transpile(transform + compile) หรือพูดง่ายๆว่าเป็นการแปลงจาก jade ไปเป็น HTML นั่นแหละ โดยไปยัง folder ที่เราเก็บ jade อยู่ แล้ว run คำสั่ง

เราจะได้ ไฟล์ชื่อ index.html โดยไฟล์นี้จะอ่านไม่ค่อยออกเนื่องจาก ยังไม่ได้ทำการจัด format ให้เรา ถ้าเราอยากจะให้ jade จัด format ให้เรา ต้องใส่พารามิเตอร์ -P เข้าไปด้วย ตามนี้

และถ้าเราต้องการให้ทุกครั้งที่เรา save ไฟล์ index.jade ให้ทำการ transpile(แปลงไฟล์ index.html) ใหม่ทุกครั้ง ให้ใส่ -w เพิ่มเข้าไปด้วย

นอกจากนี้เรายังสามารถกำหนด destination folder หรือ folder ปลายทางสำหรับเก็บ ไฟล์ html ที่ได้จากการ transpile ด้วยคำสั่ง

ผลลัพธ์ที่ได้จะถูกนำไปเก็บไว้ที่ folder html ใน directory ปัจจุบัน และนี่ก็เป็นวิธีการติดตั้งและใช้งาน jade เบื้องต้น ในบทความต่อไปเราจะพูดถึงการเอา gulp เข้ามาช่วยให้การ transpile ง่ายขึ้น

เปิดอบรมหลักสูตร Mobile HTML5 23-24 สิงหาคม

Posted on by — No Comments ↓

Course Mobile HTML5 

หลักสูตรสำหรับ Web Developer ที่ต้องการทำ Web Mobile และ Tablet

ระยะเวลาอบรม  2 วัน

วันเสาร์ที่ 23 – วันอาทิตย์ที่ 24 สิงหาคม 2558

สถานที่อบรม  อาคารอโศก ทาวเวอร์

ลงทะเบียนท่านละ 6,500 บาท

พิเศษสำหรับผู้ที่ลงทะเบียนก่อนวันที่ 5 สิงหาคมนี้
รับส่วนลดไปเลย 500 บาท/ท่าน!!!
สอบถามข้อมูลเพิ่มเติมได้ที่ 062-419-9498, 095-448-2314

การใช้งาน classList ใน HTML5

Posted on by


หลังจากพักร้อนไปจากการเขียนบทความหลายเดือน วันนี้ได้ฤกษ์กลับมาเขียนอีกรอบวันนี้จะมาว่าในเรื่องของการใช้งาน classList ที่มากับ HTML5 อยู่ในหมวดของ Nuts and Bolts

ถ้าเรามีโจทย์ว่าต้องการทำการเพิ่มหรือลบ class ออกจาก element ใดๆ แน่นอนเราต้องนึกถึง methods addClass() หรือ removeClass() ใน jQuery แน่นอน ซึ่งถ้าเราใช้งาน jQuery อยู่ก็คงจะไม่มีปัญหาใดๆ แต่ถ้าในกรณีที่เราไม่ได้ใช้งาน jQuery เราอาจเลือกการใช้งาน classList แทนได้ ซึ่งการใช้งาน clasList ตัวนี้จะแตกต่างจากการใช้งาน jQuery เนื่องจากเป้น native JavaScript (ไม่ต้องใช้ library ใดๆ) แต่ก็แน่นอนการใช้งาน classList  จะไม่สามารถใช้งานได้ใน IE 6,7,8 แต่ถ้าในกรณีที่เราใช้งานบน mobile เราก็ไม่ต้องไปเรียกใช้ jQuery โดยเฉพาะพวกที่อยู่ค่าย Sencha Touch คงจะไม่ต้องไปเอา jquery เข้ามาเพื่อใช้งาน addClass() หรือ removeClass() อย่างเดียวแน่นอน

การใช้งาน classList จะประกอบไปด้วย method ต่างๆ ดังนี้

1
2
3
4
5
6
7
8

{
length: {number}, /* จำนวนของ class ที่ add เข้ามาใน element นั้น */
add: function() { [native code] }, /* เพิ่ม class ให้กับ element */
contains: function() { [native code] }, /* ตรวจสอบว่า element มีการ add class นั้นเข้ามาหรือไม่ */
item: function() { [native code] }, /* reference ถึง class โดย index */
remove: function() { [native code] }, /* remove class ออกจาก element */
toggle: function() { [native code] } /* ทำการ toggle class */
}

ซึ่งในตัวอย่างที่เขียนในรูปนี้จะเป็นการเขียนแบบยาวเพื่อให้เห็นการใช้งาน method ต่างๆของ classList ซึ่งเราสามารถเขียน สั้นๆเพียงบรรทัดเดียวได้ ดังนี้

1
2
3
4
5

document.querySelector('div').onclick = function(){

this.classList.toggle('active');

}

ใครที่เคยใช้ jQuery อยู่แล้วน่าจะหยิบไปใช้ได้เลยเพราะเหมือนกันมากๆ

ลองเข้าไปดู sourcecode ได้ที่ http://jsfiddle.net/irobust/hVbUp/

เปิดอบรมหลักสูตร Advance HTML5 วันที่ 17-18 ธันวาคม

Posted on by

หลักสูตรนี้จะเจาะลึกการใช้งาน HTML5 ในขั้นสูง ผู้เรียนจะต้องมีความเข้าใจในการเขียน JavaScript หรือ jQuery มาแล้วหรือผ่านการอบรมในหลักสูตร Essential Javascript มาก่อน เนื่องจากหลักสูตรนี้จะมีการใช้งาน JavaScript และ jQuery ค่อนข้างเยอะและเน้นทำความเข้าใจในหลึกการทำงานของ javaScript API เป็นหลัก

ราคาปกติ 5,100 บาท พิเศษวันนี้ ถ้านำ Notebook มาเอง เหลือเพียง 4,500 บาท

สามารถเข้าไปดูรายละเอียดหลักสูตรได้ ที่นี่

เปิดอบรมหลักสูตร HTML5 and CSS3 วันที่ 16-18 ธันวาคม

Posted on by

ในหลักสูตร HTML5 and CSS3 จะแบ่งออกเป็น 3 ส่วนหลักๆ ดังนี้

  1. เรียนรู้การใช้งาน TAG ใหม่ๆ ที่เพิ่มเติมเข้ามา
  2. การใช้งาน JavaScript API ที่จะช่วยเพิ่มประสิทธิภาพในการทำงานให้กับระบบของท่าน
  3. การใช้ความสามาถของ CSS3 ในการช่วยจัดการ layout ได้ง่ายขึ้นและมีความน่าสนใจมากขึ้น

ราคาปกติ 6,400 บาท พิเศษสำหรับผู้ที่นำ Notebook มาเอง เหลือ 5,500 บาท

สำรองที่นั่งได้ที่ ลงทะเบียน หรือ contact@irobust.co.th
สอบถามข้อมูลเพิ่มเติมได้ที่ 095-448-2314
สามารถเข้าไปดูรายละเอียดหลักสูตรได้ ที่นี่

ความแตกต่างระหว่าง canvas และ svg

Posted on by

compare canvas and svg
การวาดภาพ Graphic ใน HTML 5 มี 2 รูปแบบด้วยกันคือการวาดลงบน Canvas และการใช้ SVG ซึ่งทั้ง 2 แบบนั้นวาดภาพได้เหมือนกันแต่จะมีข้อแตกต่างกันคือ

ถ้าวาดลงบน Canvas ภาพจะเป็น Bitmap ซึ่งถ้า Zoom เข้าไปมากๆ ภาพจะแตกซึ่งเป็นลักษณะทั่วไปของ Bitmap และ การวาดใช้ JavaScript เมื่อต้องการแก้ไขภาพใหม่ต้อง excute JavaScript ส่วนนั้นใหม่ทั้งหมด

แต่ถ้าวาดด้วย SVG ภาพที่ได้จะเป็น Vector ไม่ว่าจะ Zoom เข้าไปเท่าไหร่ภาพก็จะไม่แตก และอีกข้อสำคัญก็คือ SVG เป็น XML ดังนั้นถ้าจะทำการแก้ไขภาพสามารถ

เขียน JavaScript เข้าไปแก้ไขข้อมูลใน DOM ได้โดยที่ไม่ต้อง execute ใหม่ เหมือนกับเราใช้ JavaScript เข้าไปแก้ไข DOM ใน HTML ธรรมดานั่นเอง

ลองเข้าไปทดสอบ Code ได้ด้วยตัวเองที่นี่
http://jsfiddle.net/DQXuv/
ไม่สามารถแสดงผลได้ใน IE 8 ลงมา

หรือเข้าไปดูผลลัพธ์แบบ Full Screen ที่นี่
http://jsfiddle.net/DQXuv/embedded/result/
ลอง Zoom โดยกด Ctrl ค้างไว้แล้วเลื่อนเมาส์ปุ่มตรงกลางขึ้น หรือหาเมนู Zoom ในแต่ละ Browser

การใช้ Modernmizr เลือก load ไฟล์ JavaScript

Posted on by

Modernizr เป็น JavaScript สำหรับตรวจสอบว่า Browser ที่เปิดนั้นรองรับ Feature ต่างๆ ของ HTML5 หรือไม่ แต่ไม่เพียงแต่เราจะเอา Modernizr มาทำการตรวจสอบว่า Browser นั้น Support Feature ที่เราต้องการใช้แล้วเรายังสามารถเลือกที่จะ Load JavaScript เข้ามาได้อีกด้วย
อย่างเช่นในรูปเราจะใช้ Modernizr.load() มาทำการเลือก JavaScript ที่จะ load เข้ามา โดยถ้า Browser Support ก็จะ load geo.js เข้ามา
แต่ถ้าไม่ก็จะ load geo-polyfill.js เข้ามาแทน

ใช้ modernizr ในการเลือก load JavaSCript

โดยความสามารถนี้เป็นของ JavaScript library ที่ชื่อว่า Yepnope.js
เข้าไปดูได้ที่ http://yepnopejs.com/
ซึ่งตอนที่ load Modernizr จะต้องแน่ใจว่าได้ Click เลือก Modernizr.load (yepnope.js) เข้ามาด้วย Modernizr จะทำการรวม library yepnope.js เข้ามาด้วย

นอกจากนี้ยังสามารถนำไปประยุกต์ใช้ในการ load JavaScript แบบ Asyncronous ได้อีกด้วย ลองไปทดสอบกันดูได้

การสร้าง animation บน canvas อย่างง่ายๆ

Posted on by

เราสามารถเขียน JavaScript เพื่อสร้าง Animation บน canvas อย่างง่ายๆ ได้ตามตัวอย่าง โดยเราจะใช้ function setInterval() ใน JavaScript เพื่อเรียก function draw()

ส่วนใน function draw() จะเป็น function ที่วาดรูปขึ้นมาใหม่ ในกรณีนี้จะใช้การวาดทับเส้นเดิม แต่เราสามารถที่ใช้ function clearRect() ทำการลบรูปทั้งหมดแล้ววาดใหม่ก็ได้

นี่เป็นหลักการของการวาดรูปใน Canvas ถ้าเราต้องการเปลี่ยนแปลงรูปเราต้องลบทิ้งแล้ววาดใหม่

canvas animation

การใช้ jQuery animate

Posted on by

ในกรณีที่เราต้องการสร้าง animation โดยการเปลี่ยนแปลงค่าใน StyleSheet มากกว่า 1 ตัวเราจะใช้ .animate() เพื่อสร้าง animation ให้กับ element ต่างๆ โดย parameter ตัวแรกจะเป็น Json ที่จะระบุ attribute ต่างๆที่ต้องการเปลี่ยนแปลงค่า เช่นในตัวอย่างจะเป็น เปลี่ยนแปลงความกว้าง, ความสูง และ border-radius

ในกรณีที่เราระบุค่า attribute ที่มีเครื่องหมาย ‘-‘ เราต้องใส่เครื่องหมาย ” ครอบ หรือ เปลี่ยนเป็น Camel Case เช่น border-radius เขียนได้อีกแบบเป็น borderRadius

parameter ตัวที่ 2 จะเป็นระยะเวลาที่สร้าง animation หน่วยเป็น milliseconds ในตัวอย่างจะระบุเป็น 5000 วินาที
jquery animate