พัฒนา 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

เทคนิคการเขียน Copywriting ให้น่าสนใจ

สำหรับผู้สร้างเว็บไซต์ เนื้อหาเป็นสิ่งที่สำคัญ เนื้อหาที่ดีจะทำให็เว็บไซต์น่าสนใจและชวนติดตาม และยังทำให้ผู้ที่เข้ามาเยี่ยมชมสนใจที่จะอ่านข้อมูลในหน้าต่อๆไป บทความนี้ผมจะมาแนะนำเกี่ยวกับเทคนิคในการเขียน Copywriting ให้ดูน่าสนใจ (เนื้อหาต่อไปนี้นำมาจากเว็บไซต์ http://www.seotools.net/)

แต่ก่อนที่จะเรียนรู้เทคนิคการเขียนข้อมูลให้น่าสนใจ เราควรจะเข้าใจก่อนว่า หากเว็บไซต์ของเรามีเนื้อหาที่ไม่สนใจ หรือมีเทคนิคการเขียนที่ไม่ดี จะส่งผลอย่างไร ? ซึ่งหลายๆคนอาจคิดว่าไม่สำคัญ แต่มันสำคัญครับ เพราะมันจะส่งผลกระทบกับค่า SEO ของเว็บไซต์ของคุณ คือ หากผู้ใช้ค้นหาเราเจอจาก Search Engine แต่เมื่อเข้ามาแล้วพบว่าเนื้อหาของเว็บไซต์ ไม่ตรงกับที่ต้องการ หรือไม่น่าสนใจ เค้าก็จะคลิ้กที่ปุ่ม Back เพื่อกลับไปเลือก "ผลลัพธ์" อื่นๆที่น่าสนใจกว่า ซึ่งตรงจุดนี้เองที่ Google จะทำการปรับลดค่า SEO ของเว็บไซต์ของคุณลง ดังนั้นคุณจึงพอจะเริ่มเห็นแล้ว่า การเขียนเนื้อหา มีความสำคัญอย่างไรสำหรับการสร้างเว็บไซต์ในปัจจุบัน

การเขียน "Copywriting" มีความแตกต่างจากการบอกเล่าทั่วไป คือ การเขียน "Copywriting" มีวัตถุประสงค์เพื่อให้เกิด Transaction บางอย่าง อย่างเช่น กระตุ้นให้เกิดการสมัครใช้บริการ หรือการซื้อสินค้าเป็นต้น "Copywriting" ส่วนมากจะพูดถึงผลประโยชน์ที่ผู้ใช้บริการจะได้รับ เพราะความจริงคือว่า ผู้ที่เข้ามาเยี่ยมชมเว็บไซต์ของคุณ แท้ที่จริงแล้วเค้าไม่ได้สนใจว่าสินค้าของคุณจะเป็นอย่างไร แต่สนใจเพียงแค่ว่าเค้าจะได้รับประโยชน์อย่างไรจากสินค้าและบริการของคุณเท่านั้น!

ต่อไปเราจะมาดูวิธีการวางโครงสร้างข้อมูลบนเว็บไซต์

1. Headline
ส่วนนี้เป็นส่วนที่เด่นที่สุด และเป็นส่วนที่สำคัญที่สุด เป็นส่วนแรกที่จะตัดสินว่าผู้ชมจะอ่านข้อมูลต่อ หรือว่าจากไป Headline มีความสำคัญในแง่ของ SEO เพราะ เมื่อผู้ใช้คลิ้ก link ของคุณจาก Search Engine ผู้ใช้มีความคาดหวังว่าจะได้เห็น Headline ในเรื่องที่เกี่ยวข้องกับ link ที่คลิ้กมาจาก Search Engine ซึ่งแน่นอนว่าถ้าผู้ใช้กำลังหาข้อมูลเกี่ยวกับภาพยนตร์เรื่องหนึ่ง แต่เมื่อคลิ้กเข้ามา เว็บไซต์ของคุณเป็นเว็บไซต์เพลง ผู้ใช้ก็คงไม่รีรอที่จะคลิ้กปุ่ม Back เพื่อไปดูข้อมูลจากเว็บไซต์อื่นแทน ดังนั้น Headline จึงมีความสำคัญอย่างยิ่งในแง่ของ SEO

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

- Outline Benefits คือ แสดงให้เห็นถึงประโยชน์ที่ผู้ใช้จะได้รับ
- Make Offer คือ เสนอผลประโยชน์ให้ อย่างเช่น ซื้อ 1 แถม 1
- Provide News คือ ให้ข้อมูลข่าวสาร ผู้ใช้ทั่วไปชอบที่จะรับรู้ข้อมูลข่าวสาร โดยเฉพาะข่าวสารที่น่าสนใจ

เดี๋ยวเรามาลองดูเทคนิคในการ Outline Benefits กัน "Benefits" คือ สิ่งที่สินค้าและบริการเข้ามาช่วยในชิวิตของผู้ใช้ดีขึ้น ยกตัวอย่างเช่น โฆษณาของ iphone ดังต่อไปนี้ "holds the internet in your pocket" โดยทั่วไปการเขียนถึง "Benefits" จะเริ่มต้นด้วย "verbs" เราต้องแยกแยะให้ออกระหว่าง Features และ Benefits ยกตัวอย่างเช่น “the iPhone’s slim shape makes it easy to fit in your pocket” ในตัวอย่างนี้จะเห็นว่า "Features" คือ "slim shape" ส่ว่น "Benefits" คือ "easy to fit in your pocket"

"Features" เป็นการบรรยายคุณสมบัติของสินค้า ยกตัวอย่างเช่น "24 Hr Battery Life" ส่วน "Benefits" คือ สิ่งที่ Feature เข้ามาช่วยทำให้ชีวิตของผู้ใช้ดีขึ้น สำหรับในกรณีนี้คือ "“you can go all day without plugging the phone into a charger”

มาถึงตรงนี้ อยากจะเน้นย้ำอีกครั้งว่า "ผู้ใช้ไม่ได้ให้ความสนใจเกี่ยวกับสินค้าของคุณ" (หรือให้ความสนใจน้อยมาก) แต่ผู้ใช้มีความสนใจว่าสินค้าหรือบริการของคุณให้อะไรแก่เค้า (ซึ่งข้อมูลของคุณควรเน้นในจุดนี้)

เราต้องพยายามเน้นในเรื่องของ "Benefits" ในเนื้อหาของเรา ซึ่งวิธีการที่ง่ายที่สุด คือ ทำรายการของ Feature ออกมาก่อน แล้วค่อยมาดูว่า แต่ละ Feature ให้ประโยชน์อะไรแก่ผู้ใช้ ยกตัวอย่างเช่น

Feature: 24 Hour Battery Life , Benefit : You can go all day without recharge
Feature: Run Fat Tires , Benefit : You don't have to change a tire if you get a puncture

สูตรง่ายๆในการเขียน Headline ให้น่าสนใจ คือ "เริ่มด้วย Verb"! ยกตัวอย่างเช่น

- Drive all day without getting tired
- Clean dishes in half the time it usually takes, using half the water

หาก Headling มีความน่าสนใจ ก็เป็นไปได้อย่างยิ่งว่า ผู้ที่เข้ามาเยี่ยมชมเว็บไซต์จะ click เพื่ออ่านข้อมูลเพิ่มเติมอื่นๆต่อไป ในแง่ของ SEO การใส่ Keyword เข้าไปใน Headline ถือว่าเป็นสิ่งที่ดี แต่ทั้งนี้ต้องไม่ทำให้ Headline สูญเสียความน่าสนใจ เพราะการทำ SEO เรายังมีโอกาสทำในจุดอื่นๆได้อีก แต่ Headline คือ โอกาสเดียวที่จะดึงความสนใจให้ผู้ที่เข้ามายังเว็บไซต์ของเราอ่านข้อมูลอื่นๆต่อไป

Benefits สามารถ "มองได้หลายมุม" ยกตัวอย่างเช่น "Opportunities to reduce pain" ก็ถือว่าเป็น "Benefit" ยกตัวอย่างเช่น “Clean a window in ten seconds using MicroClean technology” ซึ่ง "pain" ในที่นี้คือ "ปกติเราต้องใช้เวลามากกว่านี้ในการทำความสะอาดหน้าต่าง" ในตัวอย่างนี้ มีการประยุกต์ใช้ "proof" ซึ่งก็คือ "MicroClean Technology" ซึ่ง ผู้อ่านอาจยังไม่รู้ว่าคืออะไร ซึ่งเป็นการเปิดโอกาสให้เราได้อธิบายในบริเวณส่วนที่เป็นเนื้อหาต่อไป

ต่อไปเราลองมาดูเทคนิคการ Make Offer กันนะครับ สำหรับเทคนิคนี้ เราน่าจะคุ้นเคยกันดีอยู่แล้ว อย่างเช่น โฆษณาที่มักจะเขียนว่า ซื้อ 1 แถม 1  การใช้ Offer กับ Headline ช่วยดึงดูดความสนใจได้ดี การใช้ Offer เหมาะสำหรับในกรณีที่ผู้อ่านมีความคุ้นเคยกับสินค้าของคุณอยู่แล้ว หากสินค้าของคุณไม่เป็นที่รู้จัก หรือจำเป็นต้องอธิบาย การนำ Offer มาใช้ใน Headline อาจไม่มีประโยชน์มากนัก

2. Body
วัตถุประสงค์ของการเขียน Headline มีอยู่เพียงข้อเดียวคือ เพื่อดึงดูดความสนใจให้ผู้อ่านติดตามอ่านต่อในส่วนของ Body ในแต่ละบรรทัดของ Body มีวัตถุประสงค์เพื่อให้ผู้อ่านติดตามอ่านในบรรทัดต่อไป

สิ่งที่เราเขียนไว้ใน Headline ควรได้รับการอธิบายในส่วนของ Body ยกตัวอย่างเช่น หากคุณเริ่ม Headline ด้วย  “Drive all day without getting tired“ ในบรรทัดแรกของ Body ก็ควรจะอธิบายว่า จะขับรถทั้งวันโดยที่ไม่เหนื่อยล้าได้อย่างไร ? ยกตัวอย่างเช่น “when you drive long distances, your body aches. You get tired. But there’s now a great way to avoid those aches and strains, with contour car seat covers that gently massage your pressure points”

เทคนิคในการเขียน Body แบบหนึ่งที่เป็นที่นิยมคือ "Three Steps Body Copy"  คือ ประกอบด้วย Beginning, Middle และ Ending เหตุผลอย่างหนึ่งที่ทำให้วิธีการนี้ได้รับความนิยม คือ มันเป็นรูปแบบของ "Story" ซึ่ง Story เป็นวิธีการสื่อสารที่มีประสิทธิภาพมาก

การเขียน Body จะเริ่มเล่าเกี่ยวกับปัญหาก่อนในส่วนของ Beginning จากนั้นจะพูดถึงวิธีการแก้ปัญหาในส่วนของ Middle ในส่วน Endding เราจะสรุปใจความสำคัญ และบอกถึง Action ที่หากทำแล้ว จะสามารถช่วยแก้ปัญหาได้ อย่างเช่น โทรหาเราวันนี้! ลงทะเบียนวันนี้! เป็นต้น

3 The Close
ในบริเวณส่วนปิดท้าย ควร เน้นย้ำถึง Offers หรือ Benefits อีกครั้งหนึ่ง และควรจะบอกผู้อ่านให้ชัดเจนด้วยว่า ผู้อ่านจะต้องทำอย่างไร เพื่อที่จะได้ Offers อย่างเช่น โทรมาที่ หมายเลข xxxxx หรือส่ง mail มาที่ yyyyy เป็นต้น หากเว็บไซต์ของคุณเป็นเว็บไซต์ E-Commerce ผู้ใช้บริการอาจลังเลที่จะใช้บริการ ดังนั้นในบริเวณนี้ ควรสร้างความมั่นใจกับผู้เข้ามาเยี่ยมชม โดยการแสดง Safty Badge หรือ แสดงทะเบียนการค้า เพื่อสร้างความมั่นใจให้กับผู้ใช้บริการ ผู้ใช้บริการมักมีความกังวลในเรื่องของการโฆษณาเกินจริง ซึ่งหากเป็นไปได้ เราอาจมีการเสนอ Free Trial หรือ Money Back Guarantee สำหรับในกรณีที่ผู้เยี่ยมชมอ่านข้อมูลแล้ว แต่ยังลังเลที่จะ take action ใดๆ การเสนอ Offer แบบ Time Limited อาจสามารถช่วยได้ เพราะความเสียดายโอกาสจะช่วยเป็นแรงผลักดันให้เกิดการ Take Action
 
 แหล่งที่มา : http://www.seotools.net/ 

 Advertisment

8columns ให้บริการออกแบบเว็บไซต์สำหรับธุรกิจขนาดเล็ก ใช้ง่าย สวยงาม ราคาประหยัด รองรับ Smartphone และ Tablet สามารถดูสถิติผู้เยี่ยมชมได้ผ่าน Google Analytics ระบบแก้ไขข้อมูลใช้งานง่าย สามารถแก้ไขข้อมูลผ่านเว็บไซต์ได้โดยตรง แก้เสร็จแล้วสามารถเห็นการเปลี่ยนแปลงได้ทันที มีเว็บไซต์ตัวอย่างให้ทดลองก่อนตัดสินใจ สามารถดูข้อมูลเพิ่มเติมได้ที่ www.8columns.com หรือสอบถามข้อมูลได้ที่ http://www.facebook.com/8columns

Tags: ออกแบบเว็บไซต์, ออกแบบเว็บ, รับออกแบบเว็บไซต์, รับออกแบบเว็บ, ทำเว็บไซต์, รับทำเว็บไซต์, ทำเว็บ, รับทำเว็บ

วิธี Die Cut ภาพด้วย Photoshop แบบง่ายๆ

สำหรับวิธีที่จะมาแนะนำต่อไปนี้เหมาะสำหรับในกรณีที่ภาพอยู่บนสีพื้นสีเดียว อย่างเช่น ภาพบนพื้นขาว โดยหลักการคือ  copy layer ของภาพที่ต้องการจะ die cut ขึ้นมาใหม่ (ใช้ CTRL+J) จากนั้นเปลี่ยนโหมดภาพให้เป็นสีขาวดำ ขั้นตอนต่อไปคือเร่งสีให้ดำที่สุด สำหรับบริเวณไหนที่ยังไม่ดำ ให้เอา Brush ไปทาให้ดำ ขั้นตอนสุดท้ายคือ select พื้นที่สีดำ ซึ่งสามารถทำได้โดยใช้ select จาก color range สำหรับรายละเอียดขั้นตอน และรูปภาพอธิบายวิธีการ สามารถดูได้จากที่นี่ครับ http://bit.ly/Q8c3t8

แหล่งที่มา : http://photoshopblogps.blogspot.com/2011/04/die-cut.html

CSS Table Display

การนำ CSS Table Display มาใช้ในการวาง layout จะช่วยให้เราสามารถจัดวาง Layout ได้เหมือนกับการใช้ Table แต่เป็นการใช้ CSS แทนที่จะใช้ Table Tag ซึ่งเราควรใช้ Table Tag สำหรับในกรณีที่ข้อมูลที่เรากำลังเสนอนั้นอยู่ในรูปแบบของ table สำหรับข้อดีอีกอย่างที่เห็นก็คือ การสร้าง Column ในแบบ Equal Height ซึ่งปกติจะเป็นเรื่องที่วุ่นวายพอสมควร แต่เราสามารถทำได้ง่ายๆโดยใช้ CSS Table สำหรับบทความแนะนำการใช้งานแบบสั้นๆ สามารถเข้าไปอ่านได้ที่นี่ครับ

1. http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
2. http://ajaxian.com/archives/display-table 

ส่วนรายชื่อของ Web Browser ที่รองรับ CSS Table Display สามารถเข้าไปดูได้ที่นี่ครับ http://caniuse.com/css-table

แหล่งที่มา :

1. http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
2. http://ajaxian.com/archives/display-table
3. http://caniuse.com/css-table

JSColor JavaScript/HTML Color Picker

พอดีว่าผมกำลังพัฒนา Web Application ขึ้นมาตัวหนึ่ง และอยากจะให้ User สามารถกำหนดสีของ Background ได้เอง แต่ถ้าจะให้ User ป้อน HTML Color ในรูปแบบ Hex Code ก็คงจะดูไม่ดีซักเท่าไหร่ ก็เลยลองค้นใน Google ในที่สุดก็เจอ Library ตัวนึงมีชื่อว่า JSColor ซึ่งเป็น JavaScript สำหรับช่วยสร้าง Color Picker พัฒนาขึ้นโดย Jan Odvárko ดูแล้วน่าสนใจดีครับ สำหรับใครที่อยากจะลอง Download มาใช้งานก็เข้าไปที่นี่ครับ http://jscolor.com/

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

Quick CSS Trick: How To Center an Object Exactly In The Center

ปกติผมมักจะวาง DIV ให้อยู่ในตำแหน่ง center โดยใช้ margin: 0 auto แต่วิธีการนี้ ใช้ไม่ได้กับ DIV ที่มี position แบบ fixed ก็เลยลองค้นหาใน Google ดู ก็เจอบทความแนะนำวิธีการเอาไว้ ลองอ่านดูได้ที่นี่ครับ http://bit.ly/Oln1We

แหล่งที่มา : http://css-tricks.com

CSS - Pseudo Classes and Pseudo Elements

Pseudo Classes และ Pseudo Elements เป็น selector ที่มีไว้สำหรับ select Element ที่อยู่นอกเหนือจาก Document Tree อย่างเช่น state ต่างๆในแต่ละ elements หรือ sub-part ของ element ซึ่งทั้ง Pseudo Classes และ Pseudo Elements นั้นมีให้ใช้งานมาตั้งแต่ CSS 1 ผมเคยสงสัยในความแตกต่างระหว่าง Pseudo Classes และ Pseudo Elements ว่ามันแตกต่างกันอย่างไร จนกระทั่งมาอ่านเจอในหนังสือเล่มหนึ่ง ซึ่งอธิบายความแตกต่างไว้ดังนี้ครับ เค้าเขียนเอาไว้ว่า Pseudo Class จะใช้สำหรับแบ่งแยกความแตกต่างในแต่ละ State ของ Element ยกตัวอย่างเช่น link state อาทิเช่น :hover, :visited, :active เป็นต้น สว่น Pseudo Element นั้นจะใช้สำหรับ access ใน sub-part ของ Element ยกตัวอย่างเช่น :first-line, :first-letter หวังว่าน่าจะช่วยให้เข้าใจความแตกต่างระหว่าง Pseudo Classes และ Pseudo Elements ได้มากขึ้นนะครับ

แหล่งที่มา : The Book of CSS3 - A Developer's Guide to The Future of Web Design เขียนโดย Peter Gasston

Web Design Trends: Testimonials Design

ความพึงพอใจของลูกค้าเป็นสิ่งที่สำคัญสำหรับ Website ที่ให้บริการในทางธุรกิจ สำหรับบทความที่จะนำมาแนะนำในวันนี้ เป็นบทความเกี่ยวกับการออกแบบ Testimonails ในรูปแบบต่างๆที่นิยมใช้ตาม Website ต่างๆ สำหรับผู้ที่สนใจสามารถอ่านบทความได้ที่นี่ครับ http://www.noupe.com/how-tos/web-design-trends-testimonials-design.html

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

AddedBytes - Free Cheat Sheet for a Variety of Languages and Web Technologies.

สำหรับบทความนี้ ผมอยากจะมาแนะนำให้รู้จักกับ web ที่่มีชื่อว่า http://www.addedbytes.com ซึ่งมีความน่าสนใจตรงที่ web แห่งนี้จะเก็บรวบรวม Cheat Sheet ต่างๆที่น่าสนใจเอาไว้ให้เราสามารถ Download ไปใช้งานได้ฟรี ซึ่งมีอยู่ค่อนข้างเยอะครับ สำหรับผู้ที่สนใจลอง click เข้าไปดูได้ที่นี่ครับ http://www.addedbytes.com/cheat-sheets/

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

Standard Web Banners

สำหรับบทความนี้ อยากจะมาแนะนำเกี่ยวกับขนาดมาตรฐานของ Banner ที่ใช้กันบน Website ซึ่งมีศัพท์เฉพาะสำหรับเรียก Banner แต่ละขนาดแตกต่างกันไป ตาม list ดังต่อไปนี้ครับ

ส่วน list ที่อยู่ข้างล่างต่อไปนี้ เป็นขนาดที่พบเห็นโดยทั่วไป แต่ไม่ใช่ขนาดมาตรฐานครับ

แหล่งที่มา: http://designerstoolbox.com/designresources/banners/

AJAX Loader Image Generator

สำหรับใครที่อยากได้ AJAX Loader Image (รูป Animation ที่แสดงการทำงานระหว่างที่เรากำลังรอ Response จาก AJAX Request) แต่ไม่อยากทำเอง หรือทำเองไม่เป็น ต้องใช้บริการ Web นี้ครับ http://ajaxload.info ที่นี่เค้ามีบริการ Generate AJAX Loader Image เองแบบ Online สามารถเลือกสี Foreground, Background หรือเลือก Transparent ได้ มีแบบให้เลือกอยู่ประมาณนึง ไม่เยอะเท่าไหร่ แต่ก็เพียงพอต่อการใช้งานครับ ลองใช้บริการดูเองละกันนะครับ

แหล่งที่มา: http://ajaxload.info

jQuery Transit - Super-smooth CSS3 transformations and transitions for jQuery

jQuery Transit คือ jQuery Plugin สำหรับช่วยในการทำ Animation โดยอาศัยเทคโนโลยี Transformation และ Transition ใน CSS3 พัฒนาโดย Rico Sta. Cruz ซึ่งสามารถใช้งานได้ใน Browser ที่รองรับ อย่างเช่น Firefox 4+, Safari 5+, Chrome 10+, Opera 11+ และ IE10+ สำหรับผู้ที่สนใจ สามารถศึกษาวิธีการใช้งานได้ที่นี่ครับ http://ricostacruz.com/jquery.transit/

แหล่งที่มา: http://ricostacruz.com/jquery.transit

cssreset.com - most popular CSS Reset scripts, all in one place

สำหรับคนที่พัฒนา Web น่าจะคุ้นเคยกับปัญหา Default Style ของแต่ละ Browser ที่ไม่ค่อยจะเหมือนกัน สำหรับวิธีการที่จะใช้ในการแก้ปัญหาก็คือการใช้ CSS Reset เพื่อปรับ Style เริ่มต้นของแต่ละ Browser ให้ใกล้เคียงกันมากที่สุดก่อน ที่ www.cssreset.com จะนำ CSS Reset ที่เป็นที่นิยมมารวมไว้ให้เราได้เลือกใช้งาน โดยมีทั้งของ Eric Meyer, HTML5 Doctor, Yahoo! เป็นต้น สำหรับผู้ที่สนใจใช้งานสามารถเข้าไปที่ http://www.cssreset.com/

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

34 cheat sheets for web designers and developers

อันนี้ไปเจอมาระหว่างหาข้อมูลครับ เห็นว่ามีประโยชน์ดีเลยอยากเอามาแนะนำไว้ครับ เป็น Cheat Sheets สำหรับ Web Designers และ Developers ก็มีหลากหลาย มีทั้ง WordPress , PHP , jQuery , HTML, CSS, Flash, Photoshop, Illustrator, Firework, Indesign, RGB Color Code ครับ ลองเลือกดูเอาเองแล้วกันนะครับ สำหรับผู้ที่สนใจสามารถเข้าไป download ได้ที่นี่ครับ http://www.webanddesigners.com/34-cheat-sheets-for-web-designers-and-developers/

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

How To Add Animated Flying Twitter Bird Widget

คิดว่าหลายๆคนน่าจะพอคุ้นเคยกับปุ่ม Twitter Follow Me แต่สำหรับอันนี้เป็นปุ่ม Twitter Follow Me แบบพิเศษ คือเป็นนกบินได้ มันจะบินตามเราไปเวลาที่เราเลื่อน Scroll ของ Page ขึ้นและลง สำหรับใครที่สนใจนำไปใช้ ให้เข้าไปที่ http://www.way2blogging.org/2011/01/how-to-add-animated-flying-twitter-bird.html บนหน้า Web จะมีปุ่มให้เราสามารถ Generate Script เพื่อที่เราจะสามาถนำไปแปะเอาไว้บน Web ของเราได้ครับ

แหล่งที่มา: http://www.way2blogging.org

clippy.js - Add Clippy and His Friends to any Website

หากพูดถึง Microsoft Agent บางคนอาจจะพอจำได้ หรือไม่ก็อาจจะไม่รู้จักเลย ถ้าหากว่าไม่รู้จักก็ลองเข้าไปดูใน Wiki ตาม link นี้นะครับ http://en.wikipedia.org/wiki/Microsoft_Agent โดยส่วนตัว ผมรู้สึกว่าเป็น Technology อันนึงที่ Microsoft ทำออกมาได้ดี คือ เอาตัว Cartoon มาทำหน้าที่สื่อสารข้อมูลกับ User โดยใช้คู่กับเทคโนโลยี Speech Recognition และ Text to Speech แต่ไม่รู้หายไปไหนแล้วเหมือนกัน

วันนี้ระหว่างที่ผมกำลังอ่านบทความ บังเอิญไปเจอบทความอันนึงเขียนไว้เกี่ยวกับ clippy.js ซึ่งเป็น JavaScript Library ที่จะช่วยให้เราสามารถนำ Microsoft Agent มาใช้งานบน Website ของเราได้แบบง่ายๆ อย่างเช่น สั่งให้ Play Animation, Speak, Move เป็นต้น ก็เลยอยากเอาเขียนแนะนำไว้ เผื่อว่าใครจะอยากลองเอาไปใช้ดูครับ สำหรับใครที่สนใจสามารถเข้าไปศึกษาข้อมูลเพิ่มเติมได้ที่นี่ครับ http://www.smore.com/clippy-js

แหล่งที่มา: http://www.smore.com/clippy-js

Impress Your Visitors with Impress.js

สำหรับใครที่อยากได้ Slide Show สวยๆเอาไว้แสดงบน Website ลองใช้งาน impress.js ดูครับ เป็น JavaScript Library ที่ใช้เทคโนโลยี Transform และ Transition ใน CSS3 ดังนั้นจึงใช้ไดักับ Browser ใหม่ๆ อย่าง Chrome, Safari และ Firefox เท่าที่ผมลองดู บน IE 9 ยังคงไม่ Support นะครับ สำหรับใครที่สนใจสามารถลองดู Demo ได้ที่นี่ครับ http://bartaz.github.com/impress.js สำหรับวิธีการใช้งาน impress.js สามารถดูได้ที่นี่ครับ http://www.cubewebsites.com/blog/guides/how-to-use-impress-js/

แหล่งที่มา:

1. https://github.com/cubewebsites/Impress.js-Tutorial
2. http://www.developerdrive.com/2012/07/impress-your-visitors-with-impress-js/

CSS Zen Garden - The Beauty of CSS Design

สำหรับใครที่อยากรู้ว่า CSS มีความสามารถแค่ไหน หรือว่าสามารถทำอะไรได้บ้าง อาจลองแวะไปเข้าไปดู CSS Zen Garden ผมจำได้ว่าตอนแรกที่เข้ามาที่ CSS Zen Garden เป็นครั้งแรก ก็ไม่รู้สึกอะไร เห็นแต่เพียงว่ามี Web Page หลากหลาย Design ให้ดู แต่มาสะดุดตรงที่ ทุกๆ Design ที่เห็นนั้น ล้วนพัฒนาขึ้นมาจาก HTML ชุดเดียวกัน สิ่งที่ต่างกันก็เป็นเพียงแค่ CSS ทำให้ผมรู้สึกทึ่งในความสามารถของ CSS ขึ้นมาในทันที CSS Zen Garden เปิดให้แต่ละคนสามารถใช้จินตนาการของตนเองในการสร้าง CSS และส่งขึ้นเพื่อนำไปแสดงไว้ที่ CSS Zen Garden สำหรับใครที่อยากทดสอบความสามารถของตนเอง สามารถส่ง CSS ไปที่ CSS Zen Garden (อย่าลืมอ่าน Submission Guidelines ก่อนนะครับ จะได้รู้กฎระเบียบและขั้นตอน) เฉพาะผลงานที่ผ่านการคัดเลือกเท่านั้นถึงจะได้แสดงไว้บน CSS Zen Garden นะครับ

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

Color Cop - a free multi-purpose color picker

ตัวอย่างหน้าจอของโปรแกรม Color Cop

Color Cop เป็นเครื่องมือ Color Picker สารพัดประโยชน์ เหมาะสำหรับคนที่ทำงานเกี่ยวกับการออกแบบ Website หรือทำงานทางด้าน Graphics ทั่วไป โปรแกรมตัวนี้จะช่วยให้เรา copy สีที่เราต้องการจากพื้นที่ใดๆก็ตามบนหน้าจอของเรา ยกตัวอย่างเช่น เรากำลังดู Website อยู่ Website หนึ่ง แล้วเราเกิดชอบชุดสีที่ใช้งาน เราสามารถใช้ Color Cop ในการ copy ชุดสีดังกล่าว เพื่อนำมาใช้งานในภายหลัง โดยเราสามารถกำหนดค่าการแสดงผลสีเป็น HTML Hex หรือ RGB Int ก็ได้ ตามที่ต้องการ ส่วน Feature ที่ผมชอบเป็นพิเศษก็คือ Auto Copy to Clipboard ซึ่งทำให้เวลาที่เราใช้ Eye Dropper เลือกสีที่เราต้องการแล้ว ค่าสีดังกล่าวจะถูก Copy ไว้ใน Clipboard โดยอัตโนมัติ ทำให้เราสามารถ Switch ไปยังโปรแกรมที่เราใช้งานอยู่ และนำค่าสีดังกล่าวไปใช้งานได้เลย ซึ่งสะดวก และประหยัดเวลาเป็นอย่างมาก โปรแกรมตัวนี้เป็น Freeware ครับ สำหรับใครที่อยากทดลองใช้งาน สามารถเข้าไป download ได้ที่นี่ครับ http://colorcop.net

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

FlowPlayer - The video player for the web

สำหรับใครที่กำลังมองหา Video Player สำหรับ Website ลองใช้งาน FlowPlayer ดูครับ เป็นของค่ายเดียวกันกับผู้ผลิต jQuery Tools เป็น Open Source ซึ่งมีทั้ง Free Version (จะมี FlowPlayer Logo) และ Commercial Version (สามารถเปลี่ยน Logo เองได้) สำหรับใครที่สนใจ สามารถศึกษาการใช้งานได้ที่นี่ครับ http://flowplayer.org

แหล่งที่มา: http://flowplayer.org