Category Archives: CSS3

Responsive Images with picturefill.js

Posted on by
Reply

ในปัจจุบัน เรื่อง Responsive Design เป็นเรื่องที่สำคัญมาก เนื่องจากการเข้าถึงโลกอินเทอร์เน็ตในปัจจุบันไม่ได้มาจาก Desktop อย่างเดียวแล้ว แต่มาจากอุปกรณ์ต่างๆ เช่น Mobile และ Tablet รวมถึงอุปกรณ์อื่นๆด้วย ซึ่งสิ่งที่นักพัฒนาและนักออกแบบควรจะทำก็คือ ปรับขนาดให้เหมาะสมกับขนาดหน้าจอที่หลากหลาย ซึ่งรวมไปถึงกระบวนการทำงานให้เหมาะสมด้วย เพราะอุปกรณ์ขนาดเล็ก โดยส่วนมากแล้วก็จะมีข้อจำกัดในเรื่องหน่วยประมวลผลซึ่งเล็กตามไปด้วย เราจึงต้องปรับอะไรกันเพิ่มเติมอีกหน่อยนอกเหนือจากการออกแบบเพียงอย่างเดียว โดยในบทความนี้จะกล่าวถึงเรื่องไฟล์รูปภาพที่จะเอามาทำให้เป็นแบบ Responsive กันครับ

Picturefill.js
Responsive Images เราสามารถทำได้โดยใช้ div ครับ แต่อย่างไรก็ตาม Picturefill (ผู้พัฒนาคือ Scott Jehl) จะสามารถทำงานได้ดีกับเบราว์เซอร์ที่รองรับ CSS3 media queries ครับ ซึ่งเบราว์เซอร์หลักที่เราจะใช้งานด้วยก็เป็นเบราว์เซอร์บน Mobile, Tablet อยู่แล้ว สำหรับ IE ยังคงต้องใช้วิธีอื่นอยู่ครับ และ Picturefill นี้จะทำงานได้เป๊ะขึ้นเมื่องานร่วมกับ matchMedia polyfill ครับ เพื่อให้รองรับ media-query สำหรับเบราว์เซอร์ที่ไม่มี matchMedia ครับ
อย่างไรก็ตาม matchMedia และ matchMedia polyfill เราไม่มีหรือไม่ต้องเรียกใช้ก็ได้ครับ picturefill ก็ยังคงทำงานได้ แต่ว่าเรียกใช้เพื่อให้รองรับ media attributes สำหรับ picture, และ source elements ครับ เพื่อความเป๊ะ

โค้ดตัวอย่าง

<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <div data-src="small.jpg"></div>
    <div data-src="medium.jpg"     data-media="(min-width: 400px)"></div>
    <div data-src="large.jpg"      data-media="(min-width: 800px)"></div>
    <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</div>

data-media attribute ใน div[data-src] element นั้นรองรับ CSS3 media queries ทั้งหมดครับ นั่นคือ min width, max width หรือ min-device-pixel-ratio สำหรับหน้าจอแบบ HD (retina displays) ก็รองรับครับ

Note

  • alt attibute ใน div[data-picture] element ใช้สำหรับสร้างตัว text (alternate text นั่นแหละครับ) สำหรับ img element.
  • div[data-picture] element มีพลานุภาพยิ่งใหญ่ ใช้ source จำนวนเท่าไหร่ก็ได้
  • ในแต่ละ div[data-src] element ต้องมี data-src attribute เพื่อระบุ path ของไฟล์รูปภาพไว้ ถ้าไม่มีจะถือว่าบาป
  • ในแต่ละ data-src element สามารถใช้ media attribute เพื่อทำให้รองรับ media ต่างๆ ซึ่งทั้ง media types และ queries ต่างก็สามารถใช้ได้เหมือนกัน แต่ media queries จะขึ้นกับแต่ละเบราว์เซอร์ ซึ่งเบราว์เซอร์บางตัวก็ยังไม่รองรับและไม่รองรับ
  • ในส่วนของ noscript จะใช้สำหรับ non-JavaScript environments ซึ่งก็คือ ไม่สามารถใช้ JavaScript ได้ หรือได้ทำการปิดไม่ให้ใช้ JavaScript ไว้ ซึ่งการโหลดภาพจะมาใช้งานที่นี่แทน โดยในส่วนนี้จะให้ดีคือใช้ภาพที่มีขนาดเล็กไว้จะดี โดยเฉพาะกับ mobile devies ที่เก่าและแบตตารีใกล้จะหมดก็จะยังพอสามารถที่จะดาวน์โหลดได้อย่างไม่ใช้ทรัพยากรมากนัก

HD Media Queries
Picturefill รองรับไฟล์ภาพแบบ HD (Retina) ด้วย โดยเราจะสามารถใช้งานได้ตามตัวอย่างนี้ครับ

<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <div data-src="small.jpg"></div>
    <div data-src="small.jpg"         data-media="(min-device-pixel-ratio: 2.0)"></div>
    <div data-src="medium.jpg"        data-media="(min-width: 400px)"></div>
    <div data-src="medium_x2.jpg"     data-media="(min-width: 400px) and (min-device-pixel-ratio: 2.0)"></div>
    <div data-src="large.jpg"         data-media="(min-width: 800px)"></div>
    <div data-src="large_x2.jpg"      data-media="(min-width: 800px) and (min-device-pixel-ratio: 2.0)"></div>  
    <div data-src="extralarge.jpg"    data-media="(min-width: 1000px)"></div>
    <div data-src="extralarge_x2.jpg" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></div> 

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</div>
  • data-media attribute นั้นรองรับ compound media queries ซึ่งจะทำให้สามารถใช้งานได้อย่างเฉพาะเจาะจงมากขึ้น ดังตัวอย่างที่มีการใช้ data-media="(min-width: 400px) and (min-device-pixel-ratio: 2.0) ซึ่งเราสามารถที่จะใช้ภาพความละเอียดสูงมาแทนที่รูปภาพแบบปกติได้ และสำหรับ iOS devices สามารถใช้ prefix เฉพาะได้ในส่วนนี้ นั่นคือ -webkit-min-device-pixel-ratio

Textualizer Experiment

Posted on by
Reply

วันนี้อยากแนะนำ jQuery plugin ที่มีความน่าสนใจตัวหนึ่งในการเล่นกับ Text นั่นคือ Textualizer พัฒนาโดย Kirollos Risk และนี่เป็น Official Website ของ Textualizer ครับ ลองเข้าไปดู มีลิ้งต่อให้ download และไปยังหน้า GitHub ด้วยครับ : )

และสำหรับที่ผมลองเอง สามารถดูได้ที่ Hassadee Pimsuwan’s Labs – Textualizer

เหตุผล 4 ข้อ ที่ควรใช้ HTML5

Posted on by
4

จากที่เราทราบกันว่าโลกนี้มันมี HTML5 เกิดขึ้นแล้ว และองค์กรใหญ่ๆในโลกไอทีก็ต่างสนับสนุน HTML5 ไม่ว่าจะเป็น Apple, Google หรือแม้กระทั่ง Microsoft และ Adobe โดยเฉพาะสำหรับ Microsoft ที่กำลังพัฒนา Windows 8 ซึงเป็นแบบ Metro ใช้ HTML5 ในการพัฒนาแอพ ยิ่งทำให้ HTML5 นั้นมีความสำคัญขึ้นอีกมากเลยทีเดียว

นอกจากนี้ HTML5 ยังมีส่วนช่วยในเรื่องของ SEO (Search Engine Optimization) ช่วยเรื่องของ Search ranking ให้ดีขึ้น และในเรื่องของการรองรับกับอุปกรณ์เช่น Mobile หรือ Tablet ได้ดีขึ้น ช่วยเพิ่มความเร็วในการประมวลผลในการโหลดเว็บไซท์ได้ ซึ่งสิ่งต่างๆเหล่านี้สำคัญมากในปัจจุบัน

ซึ่งตัว HTML5 เองนั้นก็ไม่ได้เป็น HTML Standard ที่มาตัวคนเดียวโดดๆซะเมื่อไหร่ เพราะ HTML5 นั้นได้มีการทำงานร่วมกันกับ CSS3 (Cascading Style Sheets), JavaScript, Multimedia Codecs, และ SVG (Scalable Vector Graphics) ซึ่งจะทำให้มาตรฐาน HTML ดูเปลี่ยนแปลงไปมากในแง่ของการนำเสนอด้าน Multimedia ซึ่งนั่นส่งผลกระทบถึง Flash แน่นอน : )

เรามาเข้าเรื่องถึงเหตุผล 4 ข้อหลักๆกันเลยดีกว่า ฮิๆ
1. เรื่องความเร็วในการดาวน์โหลด โดยเฉพาะสำหรับ Mobile users
ในเรื่องของ Web Design เราจะเห็น Gradient กันเยอะ ที่ใช้เป็น Background Effect หรือใช้ไล่สีกับตัวอักษรหรือกับสิ่งอื่นๆที่แสดงบนเว็บ เมื่อก่อน สมัยก่อนที่ HTML5 จะมี เราจะเห็นรูปแบบของการใช้ Gradient ที่ใช้เป็นรูปภาพแทน ซึ่งจะต้องโหลดมากกว่าที่ใช้ CSS3 ตกแต่งเอาในปัจจุบันที่มี HTML5 แล้ว ซึ่งในปัจจุบัน Browser หลักรุ่นล่าสุดทุกตัวรองรับ CSS3 ในส่วนของ Gradient แล้ว ซึ่งช่วยได้มากในเรื่องของการโหลดข้อมูล จากที่โหลดรูปมาเป็นโหลด Text แทน ซึ่งหากจะเปรียบเทียบกับแบบดั้งเดิม การใช้ CSS3 ตกแต่ง Gradient จะใช้เพียงไม่กี่ร้อย Bytes แต่หากเป็น Image file แทนจะใช้ถึงพัน Bytes ซึ่งการโหลดมากน้อยนี่จะส่งผลกับพวก mobile เยอะครับ ทั้งค่าบริการที่ใช้ หากใครจ่ายเป็น Data รวมถึง Internet ทั่วๆไป แต่ที่ชัดเจนที่สุดคือความเร็วครับ Data โหลดน้อยกว่า ก็เร็วกว่าครับ อีกทั้งยังสามารถควบคุมได้ง่ายกับหน้าจอหลากหลายขนาดด้วย ซึ่ง CSS3 จัดการได้หมด ในเรื่อง Responsive Design
สรุปของข้อนี้คือ การใช้ CSS3 มาแทนการใช้รูปภาพแบบดั้งเดิมโดยเฉพาะในส่วนของ Gradient ที่เป็นที่นิยมกัน ทำให้โหลดน้อยลง เร็วขึ้น ดูแลรักษาง่าย และ Port ใช้กับ Mobile ได้ง่ายขึ้น ส่วนสำหรับการจัดการแล้ว สะดวกมากสำหรับนักพัฒนาหรือโปรแกรมเมอร์ที่สามารถจัดการกับ Source Code ได้เลยโดยไม่ต้องพึ่งพา Graphic Designer หรือลดขั้นตอนการพัฒนาและการบำรุงรักษาได้มากขึ้นจากเมื่อก่อน เรื่องพื้นๆครับ แต่เห็นผลชัดเจน แค่เรื่องรูปภาพกับตัวหนังสือ : )

2. SEO ดีขึ้น
ต่อเนื่องจากเรื่อง CSS3 ที่ใช้การเขียน Code CSS แทนการใช้รูปภาพไปแล้ว จาก Code เราเห็นอะไร? เราเห็นความเป็น Semantic เราสามารถรู้ได้ว่า เว็บนี้มีสีสันเป็นอย่างไร ซึ่งนั่นก็สื่อความหมายแล้ว การที่ Text ต่างจาก Image file อย่างหนึ่งก็คือมันสามารถเข้ากับระบบ Source Code Control System (SCCS) ที่สามารถอ่านจากตัว Source Code ได้เลยซึ่งง่ายกว่าจากตัว Image file เนื่องจากสามารถเอามาแปลความหมายได้ง่ายกว่า อีกทั้งใน HTML5 ยังมี Tags ใหม่ๆมากมายที่ใช้สื่อความหมายสิ่งต่างๆที่อยู่บนเว็บ เช่น header, nav, section, aside, footer และอื่นๆ ซึ่งก็ช่วยให้สามารถอ่านได้ง่ายขึ้น มีความเป็น Semantic มากขึ้นกว่าเดิม ให้รู้ว่าส่วนไหนคืออะไร ทำหน้าที่อะไร

3. ความสามารถในเรื่องการสร้าง Animation, Graphics 2D, 3D บนเว็บ
จากที่เมื่อก่อนเราทราบกันดีว่า งานด้าน Multimedia การสร้าง Animation บนเว็บไซท์ หรือเล่น Video หรืออื่นๆที่เกี่ยวกับ Multimedia ไม่มีใครเกิน Flash จนแทบจะเรียกได้ว่า ยังไงก็โค่น Flash ไม่ลงเลยทีเดียว แต่ตอนนี้ HTML5 สามารถทำได้ ร่วมกับ SVG, CSS3 และ JavaScript ก็สามาถสร้าง Graphic Animation บนเว็บไซท์ได้เหมือนกัน หรือจะเป็นงาน Multimedia อื่นๆบนเว็บ ยกตัวอย่างการสร้างงานกราฟฟิกบนเว็บ จะสร้างใน Tag ชื่อ canvas ซึ่งสามารถสร้างได้ทั้งแบบ 2มิติ และ 3มิติ อีกทั้งปัจจุบันยังมี WebGL เข้ามาช่วยในเรื่องของสามมิติที่ทำงานบน canvas ของ HTML5 ทำให้เราทำอะไรได้อีกมากมาย สามารถเล่นเกมสามมิติบนเว็บได้ และอื่นๆอีกมากมาย สำหรับ Video ก็มี Tag คือ video และ audio มา ทำให้เราสามารถเล่นเพลงหรือเล่นวีดิโอบนเว็บได้โดยไม่ต้องพึ่ง Plugin Flash อีกต่อไป ถึงแม้ว่าปัจจุบันบางเบราว์เซอร์ยังไม่รองรับ Tags ที่เกี่ยวกับงานด้าน Multimedia มากนัก แต่ในอนาคตจะรองรับหมดแน่นอน อย่างน้อยที่สุด SVG ก็รองรับทั้งหมดกันทุกเบราว์เซอร์ซึ่งมีมานานแล้ว แต่หลังจากมี HTML5 เข้ามา มีลูกเล่นเพิ่มเติมขึ้นมามากมายที่เดียวสำหรับการเล่นกับสิ่งพวกนี้ ทั้ง CSS3 และ JavaScript เข้าไปเสริมเพิ่มเติมเข้าไป สนุกเลยครับ

4. ง่ายและสะดวกต่อการทำ Web Application โดยเฉพาะ Mobile Apps
จากคุณสมบัติของ HTML5 ที่ได้อ่านกันมาตั้งแต่ข้อแรก ทำให้เห็นว่ามันเหมาะสมกับทั้ง Web Application และสามารถนำมาประยุกต์ใช้ได้กับ Mobile Apps ซึ่งก็สามารถ Build จากตัว HTML5 ได้เลย ซึ่งมี API หลายตัวที่รองรับเช่น PhoneGap, Sencha, jQuery Mobile และอื่นๆ หรือเราจะไม่ Build เป็น Native App ก็ย่อมได้ เนื่องจาก HTML5 ยังมีคุณสมบัติที่สามารถพัฒนาให้เป็นแบบ Responsive Design ได้ จากความสามารถของ CSS3 ซึ่งหากไม่เป็น Native App แล้วก็จะมีความได้เปรียบได้เรื่องของ Search Engine ที่จะหาเราเจอได้ เนื่องจากมันก็ยังมีคุณสมบัติเป็นเว็บอยู่ และสามารถเข้ากับ Mobile/Tablet ได้ อีกทั้งผู้ใช้ยังสามารถเข้าถึงได้โดยไม่ต้อง Install เข้าไปก่อนเลย และยังง่ายต่อการพัฒนามากกว่า คุณสมบัติอีกตัวหนึ่งของ HTML5 ก็คือ Offline Web Apps ซึ่งสามารถทำงานแบบ Offline ได้อีกด้วยครับ