Working with CSS sprites in Fireworks CS6

CSS Sprites Export Options

CSS Sprite เป็นเทคนิคสำคัญสำหรับการพัฒนา Web Page ในปัจจุบัน เพราะสามารถช่วยลดจำนวนของ HTTP Request ซึ่งจะช่วยให้ Web Page สามารถ load ได้รวดเร็วขึ้น Sprite Image ก็คือ Graphic File ที่ภายในประกอบไปด้วย Graphic หลายๆรูปที่เอามาจัดเรียงไว้ภายใน file เดียว ซึ่งเวลาเรียกใช้งาน เราก็จะอาศัย CSS ในการบอกตำแหน่งพิกัด ความกว้าง ความยาว ของ Grpahic ที่เราต้องการใช้งาน สำหรับวันนนี้อยากจะมาแนะนำการใช้ Adobe Firework CS6 ในการสร้าง Sprite Image ซึ่งข้อดีของการใช้ Adobe Firework ก็คือ มันจะคำนวณตำแหน่งพิกัด ความกว้าง ความยาว และ Generate ออกมาเป็น CSS ให้เราสามารถนำไปเรียกใช้งานได้เลย โดยที่เราไม่ต้องมาเสียเวลาสร้าง CSS ขึ้นมาเอง ซึ่งสามารถช่วยลดเวลาในการ develop ลงได้อย่างมากเลยทีเดียว สำหรับขั้นตอนการใช้งาน Adobe Firework ในการสร้าง Sprite Image สามารถศึกษาได้จากบทความความของ Adobe ซึ่งเขียนโดย Prinyanka C. Herur ตาม link นี้ครับ http://www.adobe.com/devnet/fireworks/articles/css-sprites.html

แหล่งที่มา: http://www.adobe.com/devnet.html

jqTransform.js - Transform your form elements in seconds

ผลลัพธ์หลังจาก apply skin โดยใช้ jqTransform.js

jqTransform.js คือ jQuery Plugin ที่จะช่วยปรับการแสดงผลของ Form ให้มีรูปแบบที่สวยงาม โดยอาศัย Graphic Skin เข้ามาช่วย วิธีการใช้งานก็เพียง include jqTransform.js เข้าไปในบริเวณ header, สร้าง Form จากนั้นก็เรียกใช้ jqTransform เพื่อ apply skin สำหรับ Form สำหรับใครที่สนใจ สามารถศึกษาการใช้งานเพิ่มเติมได้ที่นี่ครับ http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

แหล่งที่มา: http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

Respond.js

Respond.js เป็น JavaScript library สำหรับช่วยในการทำ Responsive Web Desgin สำหรับ Browser ที่ไม่รองรับ CSS3 Media Queries โดยเฉพาะ Internet Explorer ที่ต่ำกว่า Version 9  Respond.js พัฒนาโดย Scott Jehl ลองศึกษาวิธีการใช้งานเพิ่มเติมได้ที่ครับ https://github.com/scottjehl/Respond/blob/master/README.md

แหล่งที่มา: https://github.com/scottjehl/Respond

Responsive Web Design in 3 Steps

วันนี้ผมมีบทความอยากแนะนำ บทความนี้มีชื่อว่า Responsive Design in 3 Steps  เป็นบทความเกี่ยวกับการออกแบบ Web ในรูปแบบที่เรียกว่า Responsive Design คือ สามารถรองรับขนาดหน้าจอได้หลายขนาด อธิบายไว้ค่อนข้างดีครับ ยังไงถ้าหากสนใจก็ลองอ่านเพิ่มเติมได้ที่นี่ครับ http://webdesignerwall.com/tutorials/responsive-design-in-3-steps อ่านจบแล้วก็ลองอ่านบทความนี้ต่อนะครับ จะอธิบายถึงวิธีการ implement ที่ละเอียดขึ้นมาอีก http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

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

1140 CSS Grid

วันนี้อยากจะมาแนะนำ CSS Framework ที่มีชื่อว่า 1140 CSS Grid เป็น CSS Framework ที่ช่วยในการวาง Layout แบบ Fluid Grid Layout โดยอาศัย Media Query ออกแบบมาสำหรับขนาดหน้าจอ 1140 ลองศึกษาเพิ่มเติมได้ที่นี่ครับ http://cssgrid.net/

แหล่งที่มา: http://cssgrid.net/

Adapt.js - Adaptive CSS

Adapt.js คือ JavaScript Library ที่พัฒนาขึ้นโดย Nathan Smith (เป็นผู้พัฒนา 960.gs) ทำหน้าที่ช่วยในการ Load CSS ที่เหมาะสม ตามขนาดหน้าจอของเรา โดยที่ Adapt.js จะ Load CSS ก่อนที่ Browser จะ Render Page และถ้าหากมีการ Resize  เกิดขึ้น Adapt.js ก็จะตรวจสอบขนาดความกว้าง และ Reload CSS ที่เหมาะสม Adapt.js ศึกษาการใช้งานเพิ่มเติมได้ที่นี่ครับ http://sonspring.com/journal/adapt-js-explained#how-to-use

และถ้าอยากรู้ว่ามี CSS3 Media Query แล้ว ทำไมยังต้องใช้ Adapt.js อีก ก็ลองอ่านบทความนี้ดูครับ CSS3 Media Query for Mobile is Fool's Gold

แหล่งที่มา: http://adapt.960.gs/

Using Fluid Grid Layout in Dreamweaver CS6

ปัจจุบันการพัฒนา Web มีความซับซ้อนขึ้น เนื่องจาก Device มีความหลากหลายเพิ่มมากขึ้น  เราจึงจำเป็นต้องพัฒนา Web ของเราให้สามารถ Display ได้อย่างเหมาะสมทั้งบน Desktop, Tablet และบน Mobile วันนี้ผมอยากจะมาแนะนำการทำงานกับ Fluid Grid Layout ใน Adobe Dreamweaver CSS6 ซึ่งจะช่วยให้เราสามารถทำงานกับ Screen ขนาดต่างๆได้ง่ายขึ้น สามารถเข้าไปดู Video แนะนำการใช้งาน Fluid Grid Layout บน Dreamweaver CS6 ได้ที่นี่ครับ http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/