Rabbitinblack

Tag: html5

  • [HTML5 CSS3] Modernizr JavaScript Library สำหรับทำเว็บ HTML5 CSS3

    [HTML5 CSS3] Modernizr JavaScript Library สำหรับทำเว็บ HTML5 CSS3

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

    โดย 1 ในความสามารถของ Modernizr ซึ่งเป็น Javascript Library นั้นจะช่วยเช็คว่า Browser ที่ทำงานอยู่สนับสนุนการทำงานของ HTML5 CSS3 อย่างไรบ้าง เราจะใช้งานในลักษณะแบบนี้

    [html]
    <script src="js/modernizr.min.js"></script>
    [/html]

    และกำหนดที่ html ให้มี class เป็นแบบนี้

    [html]
    <html class="no-js">
    [/html]

    และเมื่อตัว Modernizr ทำงาน class ของ html ก็จะเปลี่ยนไปเป็นลักษณะแบบนี้ครับ

    [html]
    <html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">
    [/html]

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

    รวมเรายังสามารถกำหนดการใช้งานเฉพาะส่วนที่เราต้องการก็ได้ ในรูปแบบนี้ครับ

    โดย Modernizr สนับสนุนการทำงานกับ IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome.
    บน mobile Modernizr ใช้ได้กับ iOS mobile Safari, Android’s WebKit browser, Opera Mobile, Firefox Mobile และกำลังพัฒนาเพื่อให้สนับสนุน Blackberry 6+

    ลองไปศึกษาเพิ่มเติมที่เว็บ : Modernizr เลยครับ
  • [WordPress] Plugin สำหรับเปลี่ยน Theme ไปใช้ HTML5 Boilerplate

    [WordPress] Plugin สำหรับเปลี่ยน Theme ไปใช้ HTML5 Boilerplate

    ครั้งที่แล้ว ผมได้แนะนำ Template สำหรับทำเว็บ HTML5 ไว้ นั่นก็คือ HTML5 Boilerplate ทีนี้ถ้าจะให้มาทำ Theme กันใหม่ ก็จะลำบากไปหน่อย ถ้าแบบนี้ลองใช้ Plugin ตัวนี้เลยดีกว่า มันจะเปลี่ยน Theme ของเรา ให้เป็น HTML5 Boilerplate ให้เอง

    WordPress Plugin : HTML5 Boilerplate

    โดยหลังจากติดตั้งเสร็จแล้ว ตัว Plugin จะอยู่ในหัวข้อ Settings หน้าตาของ Plugin จะมีลักษณะแบบนี้

    [Wordpress] Plugin เปลี่ยน Theme ให้เป็น HTML5 Boilerplate [1]

    เราสามารถจะเลือกได้ ว่าจะเปลี่ยน Theme ของเราในส่วนไหนบ้าง และหลังจากที่เลือกแล้ว Code ของ Theme เราจะเปลี่ยนไป อย่างเช่น

    [Wordpress] Plugin เปลี่ยน Theme ให้เป็น HTML5 Boilerplate [2]

    ก็จะเปลี่ยนไปเป็น

    [Wordpress] Plugin เปลี่ยน Theme ให้เป็น HTML5 Boilerplate [3]

    ถ้าจะลองใช้งานดู ก็ไปโหลด Plugin กันเลยครับ

    Plugin : HTML5 Boilerplate
  • [HTML5] HTML5 Boilerplate

    [HTML5] HTML5 Boilerplate

    สำหรับ HTML5 Boilerplate นั้นเปิดตัวในวันที่ 10 สิงหาคม ตอนนี้ก็ถูกพัฒนามาปีกว่าแล้ว

    [HTML5] HTML5 Boilerplate

    เป็น Template สำหรับทำเว็บ HTML5 ที่มันสนับสนุนไปจนถึง IE6 เลย สาเหตุที่ HTML5 Boilerplate สามารถสนับสนุน IE เวอร์ชั่นเก่า ๆ ได้นั้น ก็เพราะว่ามันจะใช้ Chrome Frame ในการเรนเดอร์ HTML5 ทำให้ IE เวอร์ชั่นเก่า ๆ สามารถใช้งาน HTML5 ได้ ลองดูวิดีโอที่เกี่ยวกับ Template ตัวนี้กันนะครับ

    Getting Started with HTML5 Boilerplate

    https://www.youtube.com/watch?v=NMEB78VX2P0&hd=1

    The Build Script of HTML5 Boilerplate: An Introduction

    HTML5 Boilerplate Walkthrough

    Paul Irish on HTML5 Boilerplate

    ลองศึกษาดูนะครับ ผมว่าเป็น Template สำหรับ HTML5 ที่เจ๋งมากเลยละครับ ไปดาวน์โหลดมาลองใช้งานดูที่เว็บของ HTML5 Boilerplate เลยครับ

    Website : HTML5 ★ Boilerplate
  • [HTML5] รู้จัก Elements ของ HTML5 กันขนาดไหนมาทดสอบกัน

    [HTML5] รู้จัก Elements ของ HTML5 กันขนาดไหนมาทดสอบกัน

    HTML5 นั้นมี element หลายตัวที่เพิ่มเข้ามา เมื่อนับรวมกับของเดิมแล้ว จะมีอยู่ 109 elements แล้วคิดว่าคุณจำมันหมดหรือเปล่า มาลองทดสอบกันดีกว่าครับ

    HTML5 Elements Quiz

    เปิดหน้าเว็บมา เค้าก็จะอธิบายการใช้งาน

    [HTML5] รู้จัก Elements ของ HTML5 กันขนาดไหนมาทดสอบกัน [1]
    หน้าแรกของเว็บ ที่อธิบายวิธีการใช้งาน

    เมื่อคลิ๊ก LET’S DO THIS แล้ว เวลาจะนับถอยหลัง 5 นาที เพื่อให้เรากรอก element ที่เรารู้จัก

    [HTML5] รู้จัก Elements ของ HTML5 กันขนาดไหนมาทดสอบกัน [2]
    นับถอยหลัง 5 นาที กับ 109 elements

    เวลากรอก element ลงไป ถ้าถูกต้องก็จะมาอยู่ด้านล่างแบบนี้

    [HTML5] รู้จัก Elements ของ HTML5 กันขนาดไหนมาทดสอบกัน [3]
    element ที่กรอกสำเร็จแล้วจะอยู่ด้านล่าง

    และเมื่อเวลาหมด มันจะบอกว่าเรากรอกไปทั้งหมดกี่ตัว แล้วตัวที่เราไม่ได้กรอกเหลืออะไรบ้าง

    [HTML5] รู้จัก Elements ของ HTML5 กันขนาดไหนมาทดสอบกัน [4]
    เวลาหมดแล้ว element ที่เราไม่รู้จักจะอยู่ด้านล่าง
    ลองทดสอบได้ที่นี่เลยครับ : HTML5 Elements Quiz