manit-tree: HTML5

Showing posts with label HTML5. Show all posts

Wednesday, 14 November 2012

พัฒนา Application บน HTML5 Canvas โดยใช้ CreateJS

สำหรับ Framework ที่ช่วยในการพัฒนา Application บน HTML5 Canvas มีให้เลือกอยู่ค่อนข้างเยอะ ลองไป 2-3 ตัว แต่มาสะดุดที่ตัวนี้ ชื่อว่า EaselJS เป็น JavaScript Library สำหรับช่วยในการทำงานกับ HTML5 Canvas เป็นส่วนหนึ่งของ project ที่ชื่อว่า CreateJS ลองใช้แล้วรู้สึกว่าใช้ง่ายดี เข้าใจว่าวิธีการใช้งานน่าจะจำลองมาจาก ActionScript ครับ ทำให้ใครที่เขียน Flash มาก่อน น่าจะเริ่มใช้งานได้ไม่ยาก เรียนรู้ไม่นานก็ใช้เป็นแล้ว ตัว Framework รองรับ Physic Engine ที่ port มาจาก Box2d (ถ้าใครไม่รู้จัก มันคือ Physic Engine ที่ใช้พัฒนา Games อย่างเช่น Angry Bird หลายๆ Framework ที่ผมลองศึกษาดู ส่วนมากก็ใช้ Box2d เป็น Physic Engine)

วิธีการใช้งานคร่าวๆ ก็เริ่มต้นจากการสร้าง stage ขึ้นมาก่อน (โดยสร้างขึ้นมาจาก canvas นั่นเอง ซึ่งผู้ออกแบบน่าจำทำให้ใกล้เคียงกับวิธีการพัฒนาด้วย Flash) จากนั้นก็เริ่ม add ตัวละครต่างๆเข้าไปไว้ใน stage กำหนด frame rate จากนั้นก็เขียน code ควบคุม ตัว Framework รองรับการใช้งาน Sprite Sheet (ส่วนมาใช้กับภาพเคลื่อนไหวของตัวละคร โดยการนำหลายๆ frame มาเรียงไว้ใน file เดียวกัน เพื่อช่วยลด overhead ในการ request) รองรับการทำ Tween ค่า property ต่างๆ

การสร้าง Application บน HTML5 Canvas ให้สมบูรณ์ จะต้องประกอบขึ้นจากหลายๆส่วน ซึ่ง EaselJS เป็นเพียงส่วนหนึ่งของ CreateJS ซึ่งประกอบไปด้วย EaselJS, TweenJS, SoundJS, PreloadJS ซึ่งผมยังไม่มีเวลาลองทั้งหมด ได้ลองเล่นเพียงแค่บางส่วนของ EaselJS (เพราะอยากจะได้วิธีทำงานกับ canvas แบบง่ายๆหน่อย) พอได้ลองเล่นแล้วก็รู้สึกว่าสงสาร Flash ครับ คิดว่าไม่น่าจะรอด เพราะ Canvas บน HTML5 มันทำอะไรได้เยอะมาก แทบไม่แตกต่างจาก Flash นี่ขนาดยังไม่ได้ใช้ WebGL เลยนะครับ ทำให้คิดว่า Canvas น่าจะเป็น Application Platform ที่น่าจะได้รับความนิยม ควรศึกษาเอาไว้ครับ

แหล่งที่มา : http://www.createjs.com

Saturday, 10 November 2012

ทำความรู้จักกับ WebFont Loader

WebFont Loader ช่วยให้เราสามารถเรียกใช้งาน Web Font Provider ต่างๆ ไม่ว่าจะเป็น Google, Typekit, Fonts.com หรือแม้กระทั่ง font ที่เรา host เอง ผ่าน interface แบบเดียวกัน ทำให้เราสามารถ เปลี่ยน Provider ได้ง่าย นอกจากนั้น ยังมี Event ต่างๆให้เราใช้งาน ยกตตัวอย่างเช่น "Active" จะ Trigger เมื่อ Web Font พร้อมใช้งาน ซึ่งมีประโยชน์อย่างมากในตอนที่เรานำ Web Font ไปใช้กับ canvas ซึ่งถ้าหากเราเรียกใช้งาน Web Font ในขณะที่ยัง load ไม่เสร็จ การแสดงผลก็จะไม่เป็นอย่างที่เราต้องการ และในอีกกรณีคือ ใช้เพื่อแก้ปัญหา "flash of unstyled text" (FOUT)

ตัวอย่างการเรียกใช้งาน WebFont Loader เพื่อ Load WebFont ที่ Hosting เอง

    <script type="text/javascript">
      WebFontConfig = {
       custom: { families: ['iannvcd'],urls: ['fonts/iannvcd/stylesheet.css']},
       active: function(){},
       inactive: function(){}
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>

สำหรับผู้ที่สนใจ สามารถศึกษาเพิ่มเติมได้ที่ https://github.com/typekit/webfontloader

แหล่งที่มา : https://github.com/typekit/webfontloader

เทคนิคการทำให้ IE8 ใช้งาน HTML5 Canvas 2D ได้

สำหรับ Browser ใหม่ๆอย่างเช่น Firefox, Safari, Chrome และ Opera ต่างรองรับการใช้งาน HTML5 canvas 2D context อยู่แล้ว แต่ปัญหาอยู่ที่ IE8 ซึ่งยังไม่รองรับการใช้งาน ซึ่งเราสามารถทำให้ IE8 รองรับการใช้งาน canvas ได้ โดยใช้ ExplorerCanvas ซึ่งวิธีการใช้งานก็เพียงแค่ include script ดังต่อไปนี้เข้าไปบริเวณส่วนหัวของ page

<head>

</head>

แต่วิธีนี้ก็มีปัญหาอยู่นิดนึง คือ ในกรณีที่เราสร้าง canvas ขึ้นมาเองในขณะ runtime (คือ ไม่ได้เขียน canvas tag ไว้ใน HTML แต่ใช้ JavaScript สร้างขึ้นมา) ซึ่งในกรณีนี้ canvas ที่ถูกสร้างขึ้นจะไม่มี method ที่ชื่อว่า getContext ซึ่งจะทำให้เราไม่สามารถวาดอะไรไปบน canvas ได้นั่นเอง วิธีในการแก้ไขก็คือ คุณจะต้องเรียก G_vmlCanvasManager.initElement() ก่อน ดังต่อไปนี้

var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');

สำหรับผู้ที่สนใจ สามารถเข้าไปดาวน์โหลด ExplorerCanvas มาใช้งานได้จากที่นี่ครับ http://code.google.com/p/explorercanvas/

แหล่งที่มา: http://diveintohtml5.info/canvas.html

Thursday, 2 August 2012

Create Crawlable, Link-Friendly AJAX Websites Using pushState()

สำหรับบทความที่จะนำมาแนะนำต่อไปนี้มีชื่อว่า "Create Crawable, Link-Friendly AJAX Websites Using pushState()" ซึ่งจะพูดถึงเทคนิคในพัฒนา website โดยใช้เทคโนโลยี AJAX แต่ในขณะเดียวกัน Search Bot ก็ยังคงสามารถ crawl มาที่ URL ของเราได้ โดยจะพูดถึงการใช้งาน window.history.pushState() ซึ่งเป็นส่วนหนึ่งของ HTML5 History API หน้าที่ของ pushState() ก็คือเปลี่ยน URL ที่แสดงอยู่บน Address Bar (ซึ่งก็ยังคงใช้งานได้ในบาง Browser) สำหรับเทคนิคที่นำมาใช้ก็คือ load content ในส่วนที่ต้องการด้วย AJAX จากนั้นก็เรียกใช้งาน pushState() เพื่อเปลี่ยน URL บน Address Bar ให้ตรงกับ address จริงของ web page นั่นเอง เพียงเท่านี้เราก็จะสามารถใช้งาน AJAX และในขณะเดียวกัน Search Bot ก็ยังคงสามารถ Crawl มายัง URL ของเราได้ (เนื่องจากเราใช้ URL จริงๆในการแสดงผลบน Address Bar) ซึ่งเทคนิคนิคนี้ หากมองดูปกติก็จะไม่แตกต่างจากการ reload page แต่จริงๆแล้วมีประสิทธิภาพที่ดีกว่ามาก ถือว่าเป็นเทคนิคที่น่าสนใจอันนึงครับ ส่วนอันนี้เป็น demo site ที่เค้าสร้างขึ้นมาเพื่อแสดงการใช้งาน pushState() ให้ดูครับ สำหรับอันนี้เป็นอีกหนึ่งบทความที่อธิบายเกี่ยวกับการใช้งาน pushState() ไว้ค่อนข้างละเอียด บทความมีชื่อว่า
HTML5: Changing the browser-URL without refreshing page ลองอ่านดูแล้วกันนะครับ

แหล่งที่มา: http://www.seomoz.org/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

Thursday, 5 July 2012

Mozilla Developer Network - Online References for Web Development

สำหรับใครที่กำลังพัฒนา Web แล้วจำ Syntax ไม่ค่อยได้ ลองใช้บริการของ Mozilla Developer Network ที่นี่เค้ามีบริการ Online Reference สำหรับใช้ในการพัฒนา Web ไมว่าจะเป็น HTM, JavaScript, DOM, HTML5, CSS, AJAX และอื่นๆอีกมากมาย สำหรับผู้ที่สนใจ สามารถเข้าใช้บริการได้ที่นี่ครับ https://developer.mozilla.org/en-US/docs

แหล่งที่มา: Mozilla Developer Network

Sunday, 1 July 2012

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers

HTML5 Audio element support

สำหรับใครที่กำลังพัฒนา Web โดยใช้เทคโนโลยีอย่างเช่น HTML5 และ CSS3 และอยากจะรู้ว่ามี Browser ไหนบ้างที่สามารถรองรับ Feature ที่กำลังใช้งานอยู่ สามารถดูรายการของ Compatibility Support ได้ที่ http://www.caniuse.com ครับ

แหล่งที่มา: http://www.caniuse.com

Sunday, 10 June 2012

HTML5shim

HTML5shim คือ JavaScript ที่ช่วยให้ Internet Explorer ที่ต่ำกว่า Version 9 รู้จัก TAG ใหม่ๆใน HTML5 ซึ่งจะทำให้เราสามารถจัดรูปแบบการแสดงผลได้ใน CSS (โดยปกติ Internet Explorer จะไม่รู้จัก HTML 5 และเราก็จะไม่สามารถอ้างถึง TAG ดังกล่าวใน CSS) HTML5 shim พัฒนาขึ้นโดย Remy Sharp

สำหรับบรรดา Modern Browser ในปัจจุบันส่วนมากจะรู้จัก HTML5 TAG อยู่แล้ว ส่วน TAG ไหนที่ไม่รู้จักก็จะแสดงผลเป็นเหมือนกับ DIV ปกติ

สำหรับวิธีการใช้งานให้ศึกษาได้ที่นี่ครับ http://code.google.com/p/html5shim/

แหล่งที่มา: http://code.google.com/p/html5shim/

Friday, 8 June 2012

Offline Storage in the Era of HTML5

HTML 5 มี Offline Storage (บางครั้งเรียกว่า HTML5 Storage) ให้เราใช้งานดังนี้ Web Storage (บางครั้งเรียกว่า Local Storage หรือ DOM Storage), Web SQL Database, IndexedDB และ File Storage ซึ่งในทุกกรณีที่กล่าวมาทั้งหมดสามารถ Access ได้เฉพาะ Application ที่อยู่ภายใต้ Domain เดียวกัน ตามกฎ Same Origin Policy

Application Cache and Offline Storage

HTML5 มี Offline Features ให้เราใช้หลักๆอยู่ 2 ตัว ด้วยกันคือ Application Caching และ Offline Storage (client side storage) โดยมีวัตถุประสงค์การใช้งานที่แตกต่างกัน

Application Caching มีไว้เพื่อเก็บข้อมูลสำหรับ Application โดยหลักๆก็จะเป็นบรรดา User Interface ต่างๆ อย่างเช่น images, icons, sound เป็นต้น ซึ่งจะทำให้เวลาที่ User กลับมาใช้ Application ในครั้งถัดไป สามารถเริ่มใช้งานได้ทันที Application Caching จะต่างกับ Browser Caching เนื่องจาก Application Caching มักจะเก็บไว้นาน และไม่ถูกลบง่ายเหมือน Browser Caching (ในกรณีของ Browser Caching นั้น หาก User มีการดาวน์โหลดไฟล์ขนาดใหญ่ อาจจะทำให้ Caching อื่นๆที่เก็บไว้ถูกลบ) นอกจากนั้นเรายังสามารถกำหนดได้ว่าจะให้ Cache หรือไม่ Cache ไฟล์ไหนบ้าง

About PhoneGap

PhoneGap คือ HTML5 Application Framework ที่ใช้สำหรับพัฒนา Native Application โดยอาศัย Web Technologies ซึ่งหมายความว่า Developers สามารถพัฒนา Smartphone และ Tablet Applications โดยใช้ความรู้เกี่ยวกับ HTML, CSS และ JavaScript ที่มีอยู่เดิม โดยที่ไม่ต้องเรียนรู้ภาษาอื่นๆ อย่างเช่น Objective-C สำหรับ iPhone

HTML5 and CSS3: The Standards for Writing Applications

HTML5 และ CSS3 เป็นเป็น Web Technologies ที่กำลังอยู่ในความสนใจในปัจจุบัน ทั้ง 2 Technologies ดังกล่าวจะเพิ่มความความสามารถให้ Web และทำให้เราสามารถพัฒนา Web Application ได้หลากหลายมากยิ่งขึ้น