Saturday 30 June 2012

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

PageSpeed Insights - Make your website faster


PageSpeed Insights by Google

PageSpeed Insights เป็นหนึ่งในเครื่องมือที่อยู่ในกลุ่มของ PageSpeed by Google โดยจะช่วยในการวิเคราะห์ และแนะนำวิธีการต่างๆ เพื่อทำให้ Web Page ของเราสามารถ Load ได้รวดเร็วขึ้น ผลการวิเคราะห์ยังมี link อ้างอิงถึงเทคนิคต่างๆที่สามารถนำมาใช้ รวมทั้งคำอธิบาย ซึ่งช่วยให้เราสามารถศึกษาเพิ่มเติมได้ สำหรับใครที่สนใจอยากลองใช้งานก็สามารถเข้าไปที่นี่ครับ https://developers.google.com/speed/pagespeed/insights

แหล่งที่มา: https://developers.google.com/speed/pagespeed/

Google Closure Tools

Google Closure Tools เป็นเครื่องมือสำหรับช่วยในการ optimize JavaScript ให้สามารถ download และ run ได้รวดเร็วขึ้น เราสามารถใช้งานผ่านทางหน้า Web Page ที่ Google เตรียมไว้ให้ หรือจะ download command line tool ลงมาใช้งานที่เครื่องของเราก็ได้ครับ สำหรับวันนี้อยากจะมาแนะนำการใช้งานผ่าน Online Tool กันก่อน วิธีการใช้งานก็ไม่ยากครับ ก็เพียงแค่เข้าไปที่ http://closure-compiler.appspot.com/home แล้วเราก็จะเจอกับหน้าจอการใช้งานที่แบ่งออกเป็น 2 ฝั่ง ฝั่งซ้ายจะเป็น JavaScript ของเราที่ยังไม่ได้ทำการ optimized ซึ่งในส่วนนี้ เราสามารถกำหนด option ต่างก่อนการ optimize ได้ เมื่อเสร็จเรียบร้อย ก็กดปุ่ม compile ซึ่ง ผลลัพธ์จากการ compile ก็จะไปแสดงที่หน้าจอฝั่งขวา ซึ่งจะมีขนาดก่อน optimize กับหลัง optimize ให้ดูเปรียบเทียบกัน นอกจากนั้น ถ้าหาก code ของเรามีปัญหา ก็จะแสดงให้เราเห็นใน Warning กับ Error Message อีกด้วย


Paste JavaScript ของเราเข้าไปที่หน้าจอด้านซ้ายมือ


เมื่อกดปุ่ม Compile ผลลัพธ์ก็จะมาแสดงให้เห็นที่หน้าจอฝั่งขวามือ

แหล่งที่มา: https://developers.google.com/closure/compiler/

Free CSS Compressor and CSS Compression Tool


หน้าจอแสดงการใช้งาน CSS Compressor

การลดขนาด file ก่อน deploy ขึ้น server นั้น เป็นสิ่งที่ควรทำ เพราะนอกจากจะช่วยประหยัดค่า Bandwidth แล้ว ยังช่วยให้ Web Page สามารถ load ได้เร็วขึ้นอีกด้วย กระบวนการการลดขนาดของ File เรามักเรียกกันว่า compress หรือบางครั้งเราเรียกว่า minify สำหรับวันนี้ อยากจะมาแนะนำเครื่องมือสำหรับช่วยลดขนาดของ CSS ซึ่งสามารถใช้งานผ่านหน้า Web ได้โดยตรง มี profile ของการ compress หลายแบบให้เลือก โดยเราสารถเลือกแบบ compress เต็มที่ หรือจะให้ balance ระหว่าง compression rate กับ readability ก็สามารถทำได้ สำหรับ Options อื่นๆที่มีให้ใช้งาน ก็อย่างเช่น merge selectors with the same properties, compress color สำหรับใครที่สนใจก็ลองเข้าไปใช้งานได้ที่นี่ครับ http://www.minifycss.com/css-compressor/

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

Free PDF Reader - Sumatra PDF


ภาพตัวอย่างหน้าจอของโปรแกรม Sumatra PDF Reader

อันนี้เป็น PDF Reader อีกตัวหนึ่งที่น่าสนใจครับ ชื่อว่า Sumatra PDF จุดเด่นคือ มีขนาดเล็ก ตัว Installer ที่ผมลอง Download มา ขนาดประมาณ 4 MB ครับ โหลดเร็ว และที่สำคัญคือสามารถเปิด File ได้หลายแบบ อย่างเช่น PDF, CHM,  EPUB, Mobi, Comic Books ตัวนี้เป็น Freeware ครับ สำหรับใครที่สนใจ สามารถเข้าไป download ได้ที่นี่ครับ http://blog.kowalczyk.info/software/sumatrapdf/free-pdf-reader.html

แหล่งที่มา: http://blog.kowalczyk.info/software/sumatrapdf/free-pdf-reader.html

SlimPDF Reader - The World's smallest desktop PDF reader


ภาพตัวอย่างหน้าจอของโปรแกรม SlimPDF Reader

ขนาดของ SlimPDF Reader เมื่อเปรียบเทียบกับตัวอื่นๆที่ใช้กันอยู่ทั่วไป

สำหรับคนที่รู้สึกเบื่อกับการใช้ PDF Reader ตัวใหญ่ๆ Feature เยอะๆ (แต่ไม่ได้ใช้) แถมยัง Update บ่อยๆ ลองหันมาใช้ SlimPDF Reader ดูครับ จุดเด่นก็คือมีขนาดที่เล็กมากครับ โหลดเร็ว Feature ไม่ได้มีมากมาย แต่ก็เพียงพอสำหรับการอ่าน PDF เท่าที่ผมทดลองดูก็อ่านได้ปกติ ไม่มีปัญหาอะไร แต่ที่ผมรู้สึกว่าขาดไปหน่อย น่าจะเป็นเรื่องของการไม่มี  Index Page กับ View Mode ที่ไม่มีแบบ Continuous Mode เหมือน PDF ตัวอื่นๆแต่โดยรวมๆถือว่าใช้งานได้ดี เป็น PDF Reader ที่น่าใช้ตัวนึงครับ สำหรับใครที่สนใจ สามารถ download SlimPDF Reader ได้ที่นี่ครับ http://www.investintech.com/resources/freetools/slimpdfreader/ เป็น Freeware ครับ


 

Uniform - Sexy forms with jQuery


ตัวอย่างหน้าตาของ Form หลังจากที่ใช้ Uniform

 Uniform เป็น jQuery Plugin อีกตัวหนึ่งที่จะช่วยเปลี่ยนหน้าตาของ Form ให้มีรูปแบบที่สวยงามขึ้น มี Theme หลายแบบให้เลือกใช้ สำหรับใครที่สนใจ สามารถเข้าไปดูข้อมูลเพิ่มเติมได้ที่นี่ครับ http://uniformjs.com

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

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/

Friday 29 June 2012

TN3 - A jQuery and WordPress image gallery



สำหรับใครที่อยากจะได้ Photo Gallery สวยๆ สำหรับใช้งานบน Web ลองแวะดู TN3 Gallery ซึ่งมี Transition Effects ให้ใช้งานหลายแบบ รองรับการใช้งานได้หลาย Album รองรับ XML และ Flickr สำหรับใครที่สนใจสามารถศึกษาการใช้งานเพิ่มเติมได้ที่นี่ครับ http://www.tn3gallery.com/

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

jQuery Three Dee



อันนี้สำหรับคนชอบของแปลกครับ jQuery Three Dee คือ Plugin สำหรับ jQuery ที่จะช่วยเปลี่ยน Text ธรรมดาให้กลายเป็น 3D Text ซึ่งสามารถมองเห็นผ่านแว่น 3 มิติ แดง/น้ำเงิน ลองดูตัวอย่างได้ที่นี่ครับ http://www.stevefenton.co.uk/cmsfiles/assets/File/threedee.html และหากสนใจก็ศึกษาการใช้งานได้ที่นี่นะครับ http://www.stevefenton.co.uk/Content/Jquery-Three-Dee/

แหล่งที่มา: http://www.stevefenton.co.uk/Content/Jquery-Three-Dee/

jqFloat.js – A Floating Effect with jQuery!



jqFloat.js คือ jQuery Plugin ที่จะมาช่วยทำให้ Web ดูน่าสนใจมากขึ้น โดยการทำให้เหมือนกับว่ามีวัตถุมาลอยอยู่บน Web ของเรา ซึ่ง jqFloat.js สามารถที่จะแปลง HTML Element ใดๆก็ตาม ให้มีลักษณะเหมือนกับลอยได้ ลองศึกษาการใช้งานเพิ่มเติมได้ที่นี่ครับ http://www.inwebson.com/jquery/jqfloat-js-a-floating-effect-with-jquery/

แหล่งที่มา: http://www.inwebson.com/jquery/jqfloat-js-a-floating-effect-with-jquery/

BlocksIt.js



BlocksIt.js คือ jQuery Plugin สำหรับสร้าง Grid Layout แบบ Dynamic คล้ายๆกับ Pinterest BlocksIt.js จะแปลง HTML Element ให้เป็น Block และจัดเรียงให้เสร็จเรียบร้อย สำหรับตัวอย่างการใช้งานดูได้ที่นี่ครับ http://www.inwebson.com/demo/blocksit-js/ และสำหรับใครที่ต้องการ Download ไปลองใช้งาน ก็สามารถ Download ได้ที่นี่ครับ http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/

แหล่งที่มา: http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/

12 Free @font-face Icon Sets



สำหรับใครที่กำลังพัฒนา Web และอยากได้ Font แบบ Icon Sets สวยๆไปใช้งาน ลองเข้าไปดูที่นี่ครับ http://www.inwebson.com/css3/free-font-face-icon-sets/ มี Link ให้ Download ไปใช้งานด้วยครับ

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

underscore.js



underscore.js เป็น utility function สำหรับ JavaScript ที่ช่วยให้เราสามารถทำงานได้ง่ายขึ้น โดยมีรูปแบบคล้ายกับ Function Programming ในภาษา Ruby และ Python ยกตัวอย่างเช่น ถ้าเราต้องการทำงานบางอย่าง 3 ครั้ง แทนที่เราจะเขียน For Loop เราก็จะเขียนในลักษณะดังต่อไปนี้

_(3).times(function(){ genie.grantWish(); });
 
underscore.js ยังมี function อื่นๆให้เรียกใช้งานอีกกว่า 60 functions ยังไงก็ลองศึกษาเพิ่มเติมดูจาก online document ตาม link นี้ครับ http://documentcloud.github.com/underscore สำหรับใครที่ต้องการ download underscore.js ไปลองใช้งาน project ของ underscore.js นั้น hosted อยู่บน github ตาม link นี้ครับ https://github.com/documentcloud/underscore/

แหล่งที่มา:
  1. http://documentcloud.github.com/underscore
  2. https://github.com/documentcloud/underscore/

Happy.js - Lightweight form validation for jQuery or Zepto.js



happy.js เป็น JavaScript Library สำหรับช่วย Validate Form สามารถใช้งานร่วมกับ jQuery หรือ Zepto เราสามารถกำหนด Rule ในการ Validate เองได้ ส่วนการ Validate Form เราจะใช้ method ที่มีชื่อว่า isHappy() ถ้าหาก Field ไหน Validate ไม่ผ่าน happy.js ก็จะ apply class "unhappy" เอาไว้ ซึ่งเราสามารถกำหนด Style เอาเองใน CSS นอกจากนั้น happy.js ยังสร้าง span ขึ้นมา โดยมี class ชื่อว่า unHappyMessage สำหรับแสดงผล Error Message ให้อีกด้วย ส่วนวิธีการใช้งาน สามารถศึกษาได้จาก http://happyjs.com


ตัวอย่างการใช้งาน Happy.js

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

Tuesday 26 June 2012

Social Design Best Practices



สำหรับใครที่กำลังมีความคิดที่อยากจะสร้าง Social Application ให้ออกมาดีๆ ควรที่จะอ่านบทความก่อนนี้นะครับ http://bit.ly/LyFJxs  เป็นบทความที่เขียนสรุปเกี่ยวกับ Best Practices ในการสร้าง Social Application ให้ประสปความสำเร็จครับ

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

Easy Script Loading with yepnope.js



yepnope.js เป็น JavaScript Library ขนาดเล็กที่ช่วยในการ Load JavaScript และ CSS ในแบบ Asynchronous และยังสามารถกำหนดเงื่อนไขในการ Load ได้อีกด้วย ความสามารถในการ Load Resources แบบ Asynchronous ทำให้ระหว่างที่รอการ Load Resources ต่างๆอยู่ Page ก็ยังคง Render ต่อไปพร้อมๆกัน โดยไม่มีการ Block เหมือนการโหลด JavaScript แบบปกติ ความสามารถใช้งานกำหนดเงื่อนไขการ Load Resources ส่วนมากมักจะใช้คู่กับ Modernizr ในการโหลด Script ประเภท Polyfill หรือ Shim หากใครสนใจก็สามารถศึกษาข้อมูลได้จาก Official Website ของ YepNope ได้ที่นี่ครับ http://yepnopejs.com/ หรือสามารถศึกษาจาก Tutorial ในบทความนี้ก็ได้ครับ http://net.tutsplus.com/tutorials/javascript-ajax/easy-script-loading-with-yepnope-js/

แหล่งที่มา
  1. http://yepnopejs.com/
  2. http://net.tutsplus.com/tutorials/javascript-ajax/easy-script-loading-with-yepnope-js/

jQuery Plugin Boilerplate

 

สำหรับใครที่ต้อง Develop jQuery Plugin อยู่เป็นประจำ ต้องอันนี้เลยครับ เป็น Boilerplate สำหรับการพัฒนา jQuery Plugin มีทั้งแบบมี Comment และไม่มี Comment ให้เลือกครับ ดูข้อมูลได้ที่นี่ครับ http://stefangabos.ro/jquery/jquery-plugin-boilerplate-oop/

แหล่งที่มา: http://stefangabos.ro/jquery/jquery-plugin-boilerplate-oop/

Know more about your visitor using "visitor.js"



สำหรับใครที่อยากรู้ข้อมูลของ Visitor ที่เข้ามาเยี่ยมชม Web Site ของเรา อย่างเช่น อยากรู้ว่า Link มาจาก Web ไหน ประเทศไหน ใช้ภาษาอะไร หรือมาจาก Search Engine ตัวไหน ลองใช้งาน visitor.js ดูครับ การที่เรารู้จัก Visitor ของเรามากขึ้น จะทำให้เราสามารถปรับ Feature หรือเนื้อหาต่างๆใน Web ของเราให้เหมาะสม ซึ่งเป็นเรื่องที่สำคัญที่ไม่ควรมองข้ามครับ

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

Monday 25 June 2012

Which Custom Fonts are Top Web Designers Using?



ปัจจุบันเริ่มมีการใช้งาน Custom Fonts บน Web กันอย่างแพร่หลาย ถ้าอยากรู้ว่า Custom Fonts ตัวไหน ที่เป็นที่นิยมใช้ในงาน Web Design ลอง Click เข้าไปดูที่นี่ครับ http://line25.com/articles/which-custom-fonts-are-top-web-designers-using

แหล่งที่่มา: ข้อมูลนี้ผมได้มาจาก Twitter ของ Heath Howard ครับ

Sunday 24 June 2012

BrowserShots - Preview your web on different browser

ภาพแสดงผลการทดสอบ Web Page ผ่านบริการของ BrowserShots

สำหรับใครที่อยากจะทดสอบว่า Web ของตัวเอง แสดงผลเป็นอย่างไรบน Browser สารพัดยี่ห้อ สารพัด Version แต่มีปัญหาไม่อยาก install Browser จำนวนมากไว้ในเครื่องตัวเอง ลองใช้บริการของ BrowserShots ดูครับ วิธีการใช้งานก็เพียงแค่กรอก URL ที่เราต้องการจะทดสอบ และ Click เลือก Browser ที่เราต้องการจะทดสอบ กดปุ่ม Submit แล้วก็รอ เมื่อ BrowserShots ทำการประมวลผลเสร็จเรียบร้อย ก็จะแสดงภาพ Thumbnail ของหน้า Web ที่เราทำการทดสอบบนแต่ละ Browser เมื่อ Click เข้าไปก็จะแสดงผลเป็นภาพใหญ่ ซึ่งเราสามารถ Download ลงมาเก็บไว้ในเครื่องเราได้อีกด้วย สำหรับผู้ที่สนใจใช้บริการของ BrowserShots ก็เข้าไปที่นี่ครับ -> http://browsershots.org

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

960 Gridder - Layout Websites with Ease

ภาพการแสดง Grid Overly ของ 960 Gridder

สำหรับใครที่ใช้ Grid Framework ในการวาง Layout สำหรับการออกแบบ Web Page น่าจะชอบ Bookmarklet ตัวนี้ ที่มีชื่อว่า 960 Gridder ซึ่งเมีหน้าที่แสดง Grid Overlay บนหน้า Web Page ใดๆก็ตาม ซึ่งจะทำให้เราสามารถตรวจสอบตำแหน่งของการวาง Layout ได้อย่างสะดวกรวดเร็ว วิธีการติดตั้งก็เพียงแค่ลาก URL ของ Bookmarklet อันนี้ ไปวางไว้บน Bookmark Bar บน Browser จากนั้นเวลาใช้งาน ก็เพียงแค่ Click ไปที่ Bookmarklet ก็จะมี Overlay แสดงขึ้นทับอยู่บน Web Page ที่เรากำลังดูอยู่ ณ ขณะนั้น ซึ่งเราสามารถใช้ปุ่ม CTL + ALT + Z ช่วยในการ เปิด/ปิด การแสดง Overlay ได้ โดยปกติ 960 Gridder จะแสดง Grid Overlay ในแบบ 12 Columns แต่สำหรับคนที่ต้องการใช้งานในรูปแบบ 24 Columns ก็สามารถปรับแต่งเองได้ในหน้าจอ Setting สำหรับผู้ที่สนใจใช้งานก็สามารถเข้าไปที่ http://peol.github.com/960gridder/

แหล่งที่มา: http://peol.github.com/960gridder/

Friday 15 June 2012

Top 10 Programming Fonts

สำหรับใครที่กำลังมองหา Font ที่ดูแล้วสบายตา เหมาะสำหรับการเขียนโปรแกรม ลองอ่าน Review ได้ที่บทความนี้ครับ มีชื่อว่า Top 10 Programming Fonts จากเว็บ HiveLogic มีตัวอย่างลักษณะหน้าตาของแต่ละ Font ให้ดูเป็นตัวอย่าง นอกจากนั้นบาง Font ก็ยังมี Link ให้ Download ไปใช้งานอีกด้วย ส่วนตัวผมชอบ Font ที่ชื่อว่า DroidSans กับ Iconsolata ถ้าชอบแบบไหน ยังไง ก็เลือกดูกันเอาเองแล้วกันครับ

ตัวอย่างหน้าตาของ Font ที่มีชื่อว่า Andale Mono

แหล่งที่มา: http://hivelogic.com/articles/top-10-programming-fonts/

superfish.js

superfish.js คือ jQuery Plugin สำหรับใช้ในการสร้าง CSS Menu มีจุดเด่นคือสามารถให้ใช้งานได้บน IE6, มี Effect อย่างเช่น Drop Shadow และ Transion, สามารถใช้งานร่วมกับ Keyboard ได้  เราสามารถใช้ superfish.js ในการสร้าง Horizontal และ Vertical Menu

สำหรับการสร้าง Horizontal Menu ด้วย superfish.js ให้เรียกใช้งาน CSS และ JavasScript ในบริเวณ HEAD ของ HTML ดังที่แสดงในภาพข้างล่าง

 

การเรียกใช้ CSS และ JavaScript ในบริเวณ HEAD

ในส่วน HTML ให้ประกาศโครงสร้างของ Menu ที่เราจะสร้าง ตามตัวอย่างด้านล่าง (สังเกตุว่า เราจะ Apply Class ที่มีชื่อว่า sf-menu)

การประกาศโครงสร้าง Menu ในส่วนของ Body

Thursday 14 June 2012

CSS Menu Maker

สำหรับใครที่อยากได้ CSS Menu สวยๆ และไม่อยากต้องเสียเวลาสร้างเอง ลองใช้บริการ CSS Menu Maker ที่ http://www.cssmenumaker.com ดู มีหลายแบบให้เลือก และยังสามารถ Cusomize ได้อีกด้วย

ภาพ Menu แบบต่างๆที่มีให้เลือกใช้งาน

แหล่งข้อมูล: http://www.cssmenumaker.com

Color Wheel and Color Theory

หลายๆคนมักเลือกใช้สีในการสร้าง Web Pages จากสีที่ตัวเองชอบ ถ้าหากว่าตาถึงหรือว่าโชคดีก็จะได้สีที่สุดท้ายพอมารวมกันแล้วดูดี แต่ถ้าหากเรามีความเข้าใจในเรื่องของ Color Theory เราก็จะสามารถเลือกใช้สีอย่างได้อย่างถูกต้อง และออกมาแล้วดูดี สิ่งแรกที่เราต้องเรียนรู้ในเรื่องของ Color Theory ก็คือ Color Wheel สีต่างๆใน Color Wheel เกิดขึ้นมาจาก Primary Color ก็คือ สีแดง สีเหลือง และสีน้ำเงิน และผสมกันต่อไปเรื่อยๆ จนกลายเป็น Secondary Color, Tertiary Color

Complementary Colors


The Three Primary Triangle

Complementary Color ของ Primary Color (แดง, น้ำเงิน, เหลือง) เกิดจากการผสมกันระหว่าง Primary Color ที่เหลือ ยกตัวอย่างเช่น Complementary Color ของสีแดง คือ สีเขียว (เกิดจากการผสมกันระหว่างสีน้ำเงินและสีเหลือง), Complementary Color ของสีน้ำเงิน คือ สีส้ม (เกิดจากการผสมกันระหว่างสีแดงกับสีเหลือง) และ Complementary Color ของสีเหลือง คือ สีม่วง (เกิดจากการผสมกันระหว่างสีแดงกับสีน้ำเงิน) สีที่ได้จากการผสมกันของ Primary Color เราเรียกว่า Secondary Color

S-Drive One Click Web Hosting



วันนี้อยากจะมาแนะนำบริการ S-Drive Web Hosting แบบกึ่งสำเร็จรูป ของค่าย CoffeCup คือ มีบริการสร้าง Web Site, Shopping Cart แบบอัตโนมัติโดยมี Template ให้เลือก ทั้งนี้ขึ้นอยู่กับ Service Plan ที่เลือกใช้ ซึ่งมีหลายแบบให้เลือกใช้งาน รวมทั้งแบบไม่เสียค่าบริการด้วย โดยแบบไม่เสียค่าบริการจะได้พื้นที่ 500 MB โดยจะมีชื่อ URL ของ Website อยู่ภายใต้ coffeecup.com ข้อดีของ S-Drive ก็คือ สมัครง่าย มีแบบไม่เสียค่าบริการ และไม่มีโฆษณาขึ้นมารบกวน

Icon Fonts are Awesome


ภาพตัวอย่างการใช้งาน Icon Fonts

HTML และ CSS สำหรับเรียกใช้งาน Icon Fonts

พอดีได้อ่านเจอบทความนี้ เป็นบทความเกี่ยวกับการใช้งาน Icon Fonts บน Web เห็นว่าน่าสนใจดี ก็เลยเอามาลงไว้ให้ได้อ่านกันครับ ลองเข้าไปอ่านได้ที่นี่ครับ http://css-tricks.com/examples/IconFont/

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

Adapter Pattern

Adapter Pattern คือ วิธีการออกแบบ Application ที่่จะสามารถรองรับต่อการเปลี่ยนแปลงในอนาคต ยกตัวอย่างเช่น Application ที่เราพัฒนา มีการเรียกใช้งาน Twitter API ต่อมาภายหลัง Twitter มีการเปลี่ยนวิธีการเรียก API เราจะทำอย่างไร ? ในกรณีนี้ เราจะนำ Adapter Pattern มาช่วยในการออกแบบ กล่าวคือ Application ของเราจะเรียกใช้งาน Twitter API ผ่านทาง Twitter Adapter แทนทีจะเรียกตรงไปที่ Twitter API ในกรณีที่ Twitter API มีการเปลี่ยนวิธีการเรียกใช้งาน เราก็จะสร้าง Twitter Adapter ขึ้นมาใหม่ แต่วิธีการเรียกใช้งาน Adapter ยังคงเหมือนเดิม

Singleton Pattern

เราจะใช้ Singleton Pattern สำหรับในกรณีที่เราต้องการสร้าง instance ของ Class เพียง instance เดียว ใน Application ไม่ว่าจะมีการเรียกใช้งานกี่ครั้งก็ตาม ยกตัวอย่างกรณีที่เรามักใช้ Singleton Pattern อย่างเช่น การสร้าง Database Connection

ตัวอย่างต่อไปนี้เป็นการ Implement Singleton Pattern ในภาษา Java


จาก Code จะสังเกตุว่ามีการประกาศ Constructor ให้เป็นชนิด Private เพราะเราไม่ต้องการให้สร้าง Instance ผ่านทาง Constructor แต่เราต้องการให้มีการสร้าง Instance ผ่านทาง Static Method ที่ชื่อว่า getInstance() แทน โดยภายใน Method นี้จะมีการ check ว่ามีการสร้าง instance ไว้แล้วหรือเปล่า ถ้าเคยสร้างไว้แล้ว ก็จะคืน instance เดิมกลับไปให้

สำหรับตัวอย่างดังต่อไปนี้ เป็นวิธีเรียกใช้งานในกรณีที่่เราต้องการสร้าง Instance ของ Class จะสังเกตุว่า เราจะเรียกใช้งานผ่าน Static Method ของ Class ที่มีชื่อว่า getInstance() แทน



แหล่งที่มา: http://bit.ly/Nyby90

Wednesday 13 June 2012

วันนี้อยากจะมาแนะนำให้รู้จักกับ FlairBuilder ซึ่งเป็นเครื่องมือสำหรับใช้ในการสร้าง Wire Frame สำหรับงานพัฒนา Web และ Application ลองดูวิธีการใช้งานได้ตาม Video แนะนำการใช้งานข้างล่างได้เลยครับ


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

Chrome Becomes the Most Popular Browser in the World

ภาพจาก Web Site StatCounter

จากสถิติของเว็บ StatCounter ขณะนี้ยอดผู้ใช้ Chrome (เป็น Globl Stat วัดจากทั่วโลก) ขึ้นแซง IE ไปเป็นที่เรียบร้อยแล้วนะครับ ตามมาด้วย Firefox เป็นอันดับ 3 สามารถดู Graph ข้อมูลได้ที่นี่ครับ http://gs.statcounter.com/#browser-ww-monthly-201105-201205 เป็นข้อมูลระหว่าง May 2011-2012 ที่เห็นในภาพ สีน้ำเงินคือ IE ส่วนสีเขียวคือ Chrome ส่วนสีส้มคือ Firefox ครับ

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

What is Dart ?




Dart เป็นภาษาใหม่ที่พัฒนาขึ้นโดย Google เพื่อเอาไว้ใช้พัฒนา Web App โดยให้เหตุผลว่า JavaScript ที่ใช้อยู่ในปัจจุบันไม่เหมาะที่จะใช้ในการพัฒนา Web Application ขนาดใหญ่ ที่มีความซับซ้อนมากๆ

Dart เป็น Open Source Project ที่่มีเป้าหมายเพื่อช่วยให้ Developers สามารถสร้าง Web Application สำหรับ Web สมัยใหม่ (Modern Web) ที่มีความซับซ้อน ได้อย่างมีประสิทธิภาพ

Tuesday 12 June 2012

Markdown Formatting Syntax

เมื่อพูดถึง Markdown เราจะหมายถึง 2 สิ่งดังต่อไปนี้ คือ หมายถึง Tool สำหรับแปลง text ให้เป็น HTML ที่พัฒนาขึ้นมาจาก Perl ในอีกความหมายหนึ่งคือ Plain Text Formatting Syntax จุดมุ่งหมายในการออกแบบ Markdown Formatting Syntax ก็เพื่อสร้าง Syntax ในรูปแบบของ Plain Text ที่สามารถอ่านเข้าใจได้ง่าย โดยไม่ได้อาศัย Mark Up เหมือนใน HTML ลองดูตัวอย่างการใช้งาน Mark Down Formatting Syntax ได้ที่นี่ครับ http://daringfireball.net/projects/markdown/basics

 แหล่งที่มา: http://daringfireball.net/projects/markdown

Sammy.js




Sammy.js เป็น JavaScript Framework ที่ช่วยให้เราสามารถพัฒนา Single Page Apps ได้เหมือนกับ Gmail หรือ Google Reader เราสามารถ Maintain State ของ App ผ่าน URL โดยไม่จำเป็นต้อง Refresh หรือเปลี่ยน Page 

Mustache - Logic-less templates



วันนี้ผมอยากจะมาแนะนำ JavaScript Library สำหรับใช้ในการสร้าง Template ที่ชื่อว่า Mustache เป็น Template Engine ที่พัฒนาขึ้นโดย Chris Wanstrath มีหน้าที่ Render ข้อมูลที่เราส่งไปให้ พร้อมกับข้อมูล Template ที่อยู่ในรูปของ String แล้วแปลงออกมาเป็น Data ที่เราจะนำไปใช้งาน ซึ่งเป็นหลักการเดียวกับการใช้ View ใน MVC Framework ทั่วๆไป

รูปข้างล่าง เป็นตัวอย่างบางส่วนในการใช้งาน Mustache ครับ


สำหรับวิธีการใช้งาน Syntax ต่างๆใน Mustache สามารถดูได้ที่นี่ครับ http://mustache.github.com/mustache.5.html หรือถ้าอยากศึกษาแบบเร็วๆก็ดูได้ที่ Quick Tutorial ที่นี่ได้ครับ http://bit.ly/KwdfQ3

แหล่งข้อมูล: http://mustache.github.com

Monday 11 June 2012

CSS Media Query for Mobile is Fool's Gold

วันนี้ได้อ่านบทความหนึ่่งของ Jason Grigsby ที่เขียนไว้เกี่ยวกับการใช้ Media Query ในการปรับรูปแบบการแสดงผล Web Page สำหรับ Mobile ว่ามีข้อเสียอย่างไรบ้าง อ่านแล้วน่าสนใจดี ก็เลยอยากเอามาฝากไว้ให้อ่านกันครับ บทความนี้มีชื่อว่า CSS Media Query for Mobile is Fool's Gold 

แหล่งที่มา: http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

Superfish - jQuery Menu Plugin

Superfish เป็น jQuery Plugin สำหรับช่วยสร้าง Menu พัฒนาขึ้นโดย Joel Birch โดยพัฒนาต่อยอดมาจาก Suckerfish ทำงานโดยใช้ CSS เป็นหลัก แต่มีการปรับปรุงให้สามารถใช้งานได้กับ IE6,  เพิ่ม Delay ในขณะที่ MouseOut (โดยปกติ MouseOut จะทำงานทันที), มี Animation ในขณะที่แสดง Sub Menu อย่างเช่น Fade In เป็นต้น สำหรับวิธีการใช้งานและความสามารถเพิ่มเติมอื่นๆ สามารถศึกษาได้ที่ Web ของ Joel Birch ครับ

แหล่งที่มา: http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

jQuery idTabs

idTabs คือ jQuery Plugin ที่พัฒนาขึ้นโดย Sean Catchpole สำหรับช่วยในการสร้าง Tab บน Web Page ซึ่งมีวิธีใช้งานค่อนข้างง่าย สำหรับวิธีใช้งานก็เพียงแค่

1. วาง Script สำหรับ idTabs Plugin เอาในในส่วน HEAD ของ HTML ดังนี้


2. จากนั้น เราก็เขียน HTML เพื่อสร้าง Tabs ตามตัวอย่างข้างล่าง


3. ลอง Preview ดูบน Browser เราก็จะได้ Tab ตามที่เห็นข้างล่าง


ถ้าสนใจยังไงก็ลองศึกษาเพิ่มเติมจาก Web ของ Sean เอาเองนะครับ

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

hoverIntent jQuery Plug-in

hoverIntent เป็น jQuery Plugin ที่จะช่วยทำให้การเกิด MouseOver Event ช้าลง ซึ่งจะมีประโยชน์อย่างมาก ในกรณีที่เราเพียงแค่ลาก Mouse ผ่าน Object แต่ไม่ได้ตั้งใจจะให้เกิด MouseOver Event วิธีใช้งาน ก็เพียงแค่เรียก hoverIntent แทน hover นอกจากนั้น hoverIntent ยังมี options ต่างๆให้เราสามารถกำหนดค่าได้อีก ยังไงถ้าหากสนใจ ก็ศึกษาเพิ่มเติมได้ที่นี่ครับ http://cherne.net/brian/resources/jquery.hoverIntent.html

แหล่งที่มา: http://cherne.net/brian/resources/jquery.hoverIntent.html

Sunday 10 June 2012

css3-mediaqueries.js

css3-mediaqueries.js เป็น JavaScript อีกตัวนึงที่จะช่วยให้ Web Browser ที่ไม่รู้จัก CSS3 Media Queries สามารถใช้งาน Media Queries ได้ css3-mediaqueries.js พัฒนาขึ้นโดย Wouter van der Graaf สำหรับวิธีการใช้งาน สามารถศึกษาเพิ่มเติมได้ที่นี่ครับ http://code.google.com/p/css3-mediaqueries-js/

แหล่งที่มา: http://code.google.com/p/css3-mediaqueries-js/

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/

WebPlus X6

ถ้าพูดถึง HTML Editor หลายๆคนคงนึกถึงแต่ Adobe Dreamweaver วันนี้เจอข้อมูลใน Internet พูดถึง Editor ที่ชื่อว่า WebPlus X6 พัฒนาโดยบริษัทที่มีชื่อว่า Serif จะว่าไปแล้ว บริษัทนี้ก็คล้ายๆกับ Adobe มีการพัฒนา Product หลายๆอย่างคล้ายกัน คือมีทั้ง HTML Editor, Photo Editor , Movie Editor เพียงแต่เป็นบริษัทขนาดเล็กกว่า ผมลองเข้าไปดู Feature แล้วน่าสนใจดี ก็เลยอยากจะเอามาแนะนำไว้ให้ดู ยังไงลองดูข้อมูลเพิ่มเติมได้ที่นี่นะครับ http://www.serif.com/webplus/

แหล่งข้อมูล: http://www.serif.com

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/

Saturday 9 June 2012

Humans.txt, We are People, Not Machines

humans.txt เป็น Text File ขนาดเล็กๆที่จะช่วยให้เรารู้จักผู้ที่อยู่เบื้องหลัง Web Site ที่เราเห็นกันอยู่ทุกๆวัน วิธีการใช้งานก็เพียงแค่วางไฟล์ humans.txt เอาไว้ที่่ root folder ของ Web Site ส่วนใน HTML เราก็เพิ่ม <link href="http://domain/humans.txt" rel="author" type="text/plain"></link> เข้าไปในบริเวณส่วน HEAD ลองดูตัวอย่างของ Text File ได้ ที่นี่

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

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/

Friday 8 June 2012

Packaging an App with PhoneGap Build in Dreamweaver CS6

Dreamweaver CS6 รองรับการใช้งาน PhoneGap Build Service ซึ่งจะช่วย Build Web Application เป็น Hybrid Application ในแต่ละ Platform อาทิเช่น iPhone, Android, Blackberry, Symbian เป็นต้น ลองดู Video แนะนำการใช้งานได้ที่นี่ครับ http://tv.adobe.com/watch/learn-dreamweaver-cs6/packaging-and-uploading-phone-gap-apps/

Using the CSS Transitions Panel in Dreamweaver CS6

Adobe Dreamweaver CS6 ได้เพิ่มความสามารถให้เราสามารถทำงานกับ CSS Transition ได้สะดวกมากขึ้น โดยมีการเพิ่ม CSS Transition Panel มาให้เราใช้งานกัน ลองดู Video แนะนำการใช้งานได้ที่นี่ครับ http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-the-css-transitions-panel/

Enhanced jQuery mobile support in Dreamweaver CS6

สำหรับ Dreamweaver CS6 ทาง Adobe ได้เพิ่มความสามารถในการทำงานกับ jQuery Mobile ซึ่งจะช่วยให้เราทำงานกับ jQuery Mobile ได้สะดวกขึ้นมาก สิ่งที่เพิ่มขึ้นมาใน Version นี้ก็คือ Sample Pages และ jQuery Mobile Swatch Panel ลองดู Video แนะนำการใช้งานได้ที่นี่ครับ http://tv.adobe.com/watch/learn-dreamweaver-cs6/enhanced-jquery-mobile-support/

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/

Apply Multiple Classes in Dreamweaver CS6

Adobe Dreamweaver มีการพัฒนาความสามารถในการทำงานกับ CSS เรื่อยๆมา จนกระทั่ง Version ปัจจุบัน Dreamweaver CS6 ได้เพิ่มความสามารถในการ Apply Multiple Classes ให้กับ HTML Element ลองดู Video แนะนำการใช้งาน Feature นี้ได้ที่นี่ครับ http://tv.adobe.com/watch/learn-dreamweaver-cs6/selecting-multiple-classes/

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 ไฟล์ไหนบ้าง

Thursday 7 June 2012

YQL & Open Data Tables

มีวิธีการไหนหรือเปล่าที่จะช่วยให้เราเรียกใช้งาน Web Service อย่าง Amazon, iTunes หรือ Twitter ด้วยวิธีการเดียวกัน ? YQL และ Open Data Tables คือคำตอบ

YQL (Yahoo! Query Language) Platform ช่วยให้ Developers สามารถ Query, Filter และ รวมข้อมูลจาก Web Service ต่างๆ โดยใช้ Single Interface Developers ที่เคยใช้ Database สามารถเรียนรู้ YQL ได้ไม่ยาก เนื่องจาก YQL มี Syntax ที่คล้ายกับ SQL

Touch Events for jQuery Mobile

Touch Events บน Mobile และ Tablet มีความแตกต่างจาก Mouse Event อย่างเช่น Click หรือ Double Click สำหรับบน Desktop ที่เราคุ้นเคย ทั้งนี้เนื่องจากว่า Touch Events จะมีการนำ Gesture (ลักษณะการแสดงท่าทาง) มาประยุกต์ใช้งานร่วมด้วย

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 ได้หลากหลายมากยิ่งขึ้น

About SQLite

SQLite เป็น Open Source Database ที่ค่อนข้าง Stable และเป็นที่นิยมใช้กันในบรรดา Small Devices เจ้าต่างๆ รวมถึง Android ด้วยเช่นกัน เหตุผลหลักๆที่ SQLite เหมาะสมสำหรับใช้ในการพัฒนา Android Application ได้แก่

Monday 4 June 2012

Resource Folder Overview

Category: Android Development

ในทุก Android Project จะมี folder ที่ชื่อว่า "res" ซึ่งภายในยังมี folder ย่อยๆลงไปอีก ซึ่งในแต่ละ folder ย่อยๆนี้จะทำหน้าที่เก็บข้อมูลที่แตกต่างกันออกไป

folder ที่มีชื่อว่า "drawable" (drawable-hdpi, drawable-mdpi และ drawable-ldpi) จะเก็บ images (ส่วนมากเป็น PNG files) และ XML (ระบุถึงสิ่งที่เราจะวาด อย่างเช่น Shapes, Gradients และ Colors)

folder ที่มีชื่อว่า "values" จะทำหน้าที่เก็บข้อมูลที่เป็นข้อคววามทั้งหมด ได้แก่ Strings (ข้อความต่างๆ อย่างเช่น Application Title, Copyright), Arrays, Colors (จะเก็บ Color Constant ต่างๆ),  Dimensions (ไว้สำหรับเก็บขนาดต่างๆของ View ที่เราใช้)

folder ที่มีชื่อว่า "layout" จะทำหน้าที่เก็บ layout ในรูปแบบของ XML files ที่ระบุถึงการแสดงผลบนหน้าจอ

ในตอนที่เราสั่ง Compile Android จะอ่านข้อมูลทั้งหมดใน folder "res" และ สร้างเป็น R.java file ซึ่ง file นี้จะถูกสร้างขึ้นโดยอัตโนมัติ และจะเก็บอยู่ใน folder ที่มีชื่อว่า "gen" เราไม่ควรเข้าไปแก้ไขไฟล์ R.java นี้ เพราะว่าทุกครั้งที่เรา Compile ไฟล์นี้ก็จะถูกสร้างขึ้นมาใหม่ เราใช้ค่า ID ต่างๆใน R.java ในการอ้างถึง resource ต่างๆ อย่างเช่น textView1.setText(R.string.hello) หรือตอนที่เรากำหนด layout สำหรับ Activity เช่น this.setContentView(R.layout.main)

การแยกเก็บข้อมูลไว้ใน resource จะช่วยให้เราแก้ไขข้อมูลได้ง่าย โดยเฉพาะเวลาที่เราต้อง Localize Application ให้ support หลายภาษา เราก็เพียงเข้าไปแก้ใน strings.xml แล้วก็ compile ใหม่ ซึ่งจะช่วยประหยัดเวลาได้มาก

สำหรับการอ้างถึง resource ภายใน XML files (อย่างเช่น ใน layout file) เราจะใช้รูปแบบ @folder/object_id ยกตัวอย่างเช่น android:text="@string/hello" แทนที่จะใช้ R.string.hello

แหล่งที่มา: Creating Android Applications ของ Chris Haseman

How can i receive intents ?

Category: Android Development

การรับ Intents แบ่งออกเป็น 2 วิธีหลักๆ ด้วยกัน ได้แก่

  1. Register เพื่อรับ intent ใน Manifest File โดยใช้ <intent-filter>
  2. Register IntentFilter Object ในขณะ RunTime
  ทั้ง 2 กรณี ดังกล่าว เราต้องระบุด้วยว่า Events ไหนที่เราต้องการ

การเลือกใช้แบบไหน ขึ้นอยู่กับความต้องการ อย่างเช่น ถ้าหากเราต้องการให้  Application อื่น สามารถเรียกใช้งาน Application เราได้ ในขณะที่ Application ของเราอาจจะไม่ได้ Run อยู่ ก็ต้องใช้แบบ Register ไว้ใน Manifest File แต่ถ้าต้องการให้เรียก Application ของเราได้เฉพาะในขณะที่ Application กำลัง Run อยู่ ก็ให้ใช้วิธี Register IntentFilter ในขณะ RunTime

แหล่งที่มา: หนังสือ Creating Android Applications ของ Chris Haseman

Speed Up Screen Rotation Transition

Category: Android Development


เมื่อ User ทำการ Rotate Device สิ่งที่เกิดขึ้นตามมาก็คือ Activity จะถูก Destroyed และ Instance ใหม่ของ Activity นั้นจะถูก Created ขึ้นมาแทน

เมื่อ Activity ถูก Destroyed และ Created ขึ้นมาใหม่ อันเป็นผลเนื่องมาจากการเปลี่ยน Configuration (อย่างเช่นในกรณีของการ Rotate Device) การ implement onRetainNonConfigurationInstance() จะช่วยให้เราสามารถคืนกลับ Object อะไรก็ตาม ที่เราจะสามารถเรียกใช้งานจาก Instance ใหม่ของ Activity ที่ถูก Created ขึ้นได้ในภายหลัง โดยการเรียก getLastNonConfigurationInstance

Save State Before Killed!

Category: Android Development

Application ที่ Run อยู่ อาจถูก Killed ตอนไหนก็ได้ ถ้าหากว่า System อยู่ในสภาวะ Low Resources แล้วเราจะรู้ได้อย่างไรว่าเมื่อไหร่ที่ Application ของเราจะถูก Killed ? แล้วเราบันทึกข้อมูลตอนไหน ?

Android เตรียม Event Handler พิเศษมาไว้สำหรับในการบันทึก State ก่อนที่ Application จะถูก Killed ไว้ให้ดังนี้

The Short Life Activity

Category: Android Development

คุณรู้หรือไม่ว่า Activity หนึ่งๆ นั้น มีชีวิตที่แสนสั้นอย่างไม่น่าเชื่อ มันจะถูก Create และ Destroy อยู่เรื่อยๆ เมื่อ Activity ถูก Destroy ข้อมูลทั้งหมดที่อยู่ใน Memory ของ Application ในช่วงเวลานั้นก็จะหายไปด้วย แต่ถ้าเราเข้าใจพฤติกรรมดังกล่าวของ Activity เราก็จะสามารถบันทึกข้อมูลก่อนที่ Activity จะถูก Destroy และเมื่อเราสั่ง start Activity ขึ้นมาใหม่ เราก็สามารถสั่งให้เริ่ม Activity ตรงจุดเดิมก่อนที่จะถูก Destroy ทำให้ Flow ของ Application มีความต่อเนื่อง ไม่สะดุด ซึ่งถ้าหากเราไม่มีการบันทึกข้อมูลดังกล่าวไว้ก่อน Destroy นั่นหมายความว่าหาก Application ของเราถูก Interrupt และถูก Destroy เวลาที่เรา start Application ใหม่อีกครั้งก็จะต้องกลับมาเริ่มใหม่ที่จุดเริ่มต้นของ Application ทุกครั้ง แล้วเหตุการณ์ไหนบ้างที่ทำให้ Activity ของเราถูก Destroy ?

When to use Intent ? For What ?

Category: Android Development

เราใช้ Intent เมื่อเราต้องการสั่ง start Activity หรือ Service และเรายังใช้ Intent สำหรับรับ/ส่ง ข่าวสารจาก System ยกตัวอย่างเช่น เราสามารถรับ Notification เกี่ยวกับสถานะของ Battery ที่มีการเปลี่ยนแปลง โดยการ register เพื่อรับ intent (widely published intent) ถ้าหาก Activity ไหนก็ตาม มีการ register เพื่อรับ Intent ไว้ใน Manifest File (ยกตัวอย่างเช่น com.yahoo.www.ShowMe) นั่นหมายความว่า Application ใดก็ตามที่อยู่บนโทรศัพท์สามารถสั่ง start Activity ของเราได้ (ถ้าเราประกาศให้ Activity เป็นแบบ Public) โดยการใช้คำสั่ง startActivity(new Intent("com.yahoo.www.ShowMe"));

แหล่งที่มา : หนังสือ Creating Android Applications ของ Chris Haseman

Sunday 3 June 2012

Introduction to Intents & Intent Filters

Category: Android Development

Android Application ประกอบไปด้วย Components หลักๆ 3 ตัว ได้แก่ Activities, Services และ Broadcast Receivers ซึ่งเราสามารถสั่ง Activate Components เหล่านี้ ผ่าน Messages หรือตามศัพท์ในการพัฒนา Android เรียกว่า Intents  เราสามารถใช้ Intents ในการสั่ง Activate Components ดังกล่าวได้ ไม่ว่า Components ดังกล่าวจะอยู่ใน Application เดียวกัน หรือแม้กระทั่งต่าง Application กัน ก็สามารถทำได้

Android Activity Life Cycle

Category: Android Development
 
Android Activity Life Cycle

What is Android ?

Category: Android Development
 
Android คือ Mobile Operating System ที่นำระบบปฏิบัติการ Linux มาดัดแปลงเป็น Kernel หลักในการทำงาน 

Android เริ่มพัฒนาขึ้นเมื่อปี 2005 ซึ่งต่อมาภายหลัง Google ก็ได้มาซื้อกิจการไป Google ต้องการให้ Android เป็นระบบปฏิบัติการแบบ Open Source และสามารถ download ไปใช้งานได้ฟรี ดังนั้น Code ของระบบปฏิบัติการ Android ส่วนใหญ่จึงปล่อยให้ download ไปใช้งานได้ฟรี ภายใต้ Open Source Apache License 

Saturday 2 June 2012

Introduction to Twitter Search API

ก่อนที่เราจะใช้งาน Search บน Twitter Platform นั้น เราควรจะเข้าใจข้อจำกัดบางอย่างของ Platform กันก่อน ดังต่อไปนี้
  • ข้อมูลที่ทาง Twitter ได้ทำ index ไว้สำหรับ Search API นั้น ไม่ใช่ index ของ Tweets ทั้งหมด แต่เป็น index ของ Tweets ล่าสุดในระยะเวลา 6-9 วัน เท่านั้น
  • เราไม่สามารถใช้ Search API เพื่อค้นหา Tweets ที่เก่าเกิน 1 อาทิตย์
  • Search API อาจไม่ทำงาน ถ้าหาก Query ที่ใช้ มีความซับซ้อนเกินไป 
  • Search API ไม่รองรับ near แต่เราสามารถใช้ geocode parameter แทนได้

How to get Feed from Twitter User's Timeline ?

ผมเคยทำงานอยู่ชิ้นนึงที่จำเป็นต้องไปดึงข้อมูลมาจาก User Timeline ของ Twitter เมื่อก่อนก็ไม่รู้ว่าต้องทำยังไง แต่ตอนนี้รู้แล้ว เลยอยากจะมาเล่าวิธีการให้ฟัง สำหรับบางคนที่อาจจะยังไม่รู้

Twitter เตรียม APIs ไว้ให้บริการจำนวนมากเพื่อใช้ในการ Query ข้อมูล หรือ Update ข้อมูล บน Twitter Platform หนึ่งในนั้นคือ User Timeline ที่เราสนใจ ซึ่งเราสามารถขอข้อมูล User Timeline ได้ทั้งในรูปแบบของ RSS และ ATOM

What Git ? Why Git ? (Episode 1)

Git คือซอฟต์แวร์ในกลุ่มของ Version Control ประเภท Open Source อีกทางเลือกหนึ่ง มีจุดเด่นในเรื่องของความเร็ว และความสามารถในการใช้งานแบบ Offline (ไม่ต้องเชื่อมต่อ Network ก็ยังสามารถใช้งานได้) เนื่องจากมีการออกแบบให้ใช้งาน Local Repository ทำให้การทำงานส่วนใหญ่ ไม่จำเป็นต้องพึ่งพาการใช้งาน Network ทำให้ Developer สามารถใช้งาน Git ได้ทุกที่ ถึงแม้ไม่มี Network ก็ตาม และการออกแบบดังกล่าวยังช่วยส่งผลให้ Git สามารถทำงานได้อย่างรวดเร็ว เพราะในการใช้งานโดยทั่วๆไม่มีความจำเป็นต้องติดต่อไปยัง Server แต่ก็ยังมีบาง Feature ที่ยังต้องการ Network เพื่อการใช้งาน อย่างเช่นการใช้งาน Git ในแบบ Remote ซึ่งจะมีการ Push หรือ Pull ข้อมูลระหว่างเครื่องของเรากับ Remote Repository

Introduction to oEmbed

oEmbed เป็นข้อกำหนดในเรื่องของ data format ระหว่างผู้ใช้บริการ (Consumer) และผู้ให้บริการ (Provider) ทำให้อีกหน่อยการจะนำข้อมูลจาก Website นึง ไป embeded ไว้บนอีก Website นึง จะมีมาตรฐาน และไม่เป็นเรื่องที่ยุ่งยากอีกต่อไป

ปัจจุบัน oEmbed กำลังเริ่มเข้ามาเป็นมาตรฐานของการ embedded บน website ต่างๆ ดูได้จาก Website ชื่อดังต่างๆเริ่มออกมาประกาศรองรับการใช้งาน oEmbed กันอย่างพร้อมหน้า ยกตัวอย่างเช่น YouTube, Vimeo, SlideShare, WordPress, Twitter และ Flickr

Yahoo! OAuth Authorization Flow

ผมลองหาข้อมูลเกี่ยวกับเรื่อง Flow การทำงานของ OAuth เพื่อจะนำมาใช้อธิบาย พอดีไปเจอของทาง Yahoo! เค้าเขียนอธิบายไว้ค่อนข้างละเอียด ดูแล้วเข้าใจไม่ยาก ก็เลยอยากเอามายกเป็นตัวอย่างให้ดูกันครับ แล้วยังไงไว้จะลองหา OAuth ของ Platform อื่นมาเปรียบเทียบให้ดูกันนะครับ


OAuth The Valet Key for The Web

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

ในขณะที่บริการต่างๆบน Web มีปริมาณเพิ่มขึ้นเรื่อยๆ เราจะเห็นการใช้บริการข้ามกันระหว่าง Web หนึ่งไปยังอีก Web หนึ่งอย่างมากมายจนถือเป็นเรื่องปกติในยุคปัจจุบัน หรือที่เรียกกันว่ายุคแห่ง Cloud Computing ยกตัวอย่างเช่น Website ที่ให้บริการ Photo Printing ก็จะมีการเรียกใช้บริการของ Flickr เพื่อขอดึงรูปของลูกค้าตนเองเพื่อนำออกมา Print , Web Social Network ต่างๆ มีการเรียกใช้งานบริการของ Google Address Book เพื่อใช้หาเพื่อน หรือใช้ในการแนะนำเพื่อนให้มาสมัครใช้บริการ เป็นต้น

Friday 1 June 2012

จับภาพผ่าน Firefox ง่ายๆด้วย Screengrab

อันนี้เป็น Extension สำหรับ Firefox Web Browser ที่ผมใช้อยู่เป็นประจำในการเก็บภาพ Screenshot สำหรับ Web ที่ผมชอบ เพื่อเก็บไว้ดูเป็นตัวอย่าง ไม่ว่าจะเป็นการออกแบบ รูปแบบของการวางตำแหน่ง การใช้ชุดสีต่างๆ  Extension ตัวนี้มีชื่อว่า Screengrab จุดเด่นก็คือการใช้งานที่ง่าย แค่ click ขวา แล้วก็เลือกรูปแบบการ capture ซึ่งจะมีให้เลือกอยู่ด้วยกันทั้งหมด 3 รูปแบบ สำหรับรูปแบบแรกที่ผมมักจะใช้เป็นประจำก็คือ Capture ทั้งหมด ไว้ว่า Web Page นั้นจะมีความยาวแค่ไหน ก็จะ Capture มาให้ทั้งหมด สะดวกมาก สำหรับรูปแบบที่สองก็คือแบบ selection ในรูปแบบนี้เราจะกำหนดบริเวณเอง ว่าจะให้ capture บริเวณไหน ส่วนรูปแบบสุดท้ายก็คือ แบบ visible portion ในรูปแบบนี้โปรแกรมจำทำการ Capture เฉพาะภายในบริเวณของ browser ที่เรามองเห็น (ไม่รวมบริเวณของ Address Bar)  สำหรับการ Capture จะทำได้อยู่ 2 mode ก็คือ แบบ Save และแบบ Copy ถ้าเราเลือกแบบ Save เวลา Capture เสร็จเรียบร้อย โปรแกรมก็จะแสดง Dialog ให้เรา Save ซึ่งเราสามารถเลือก format ที่จะ Save ได้ทั้งรูปแบบ JPEG และแบบ PNG  สำหรับอีก mode นึง ก็คือ Mode ที่ชื่อว่า Copy ซึ่ง Mode นี้จะทำการ Capture ภาพที่ได้เก็บเอาไว้ใน Memory จากนั้นเราสามารถ Paste ลงไปบน Program ที่เราต้องการใช้งาน อย่างเช่น Microsoft Word หรือ Photoshop สำหรับผู้ที่สนใจ สามารถเข้าไป Download ได้ผ่านทางเมนู Add Ons ของ Firefox โดยในช่อง search ให้พิมพ์คำว่า Screengrab ลงไป หรือสามารถ Download ผ่านทาง Official Website ได้ที่ http://www.screengrab.org

Website for E-Books Lover

ปกติผมเป็นคนชอบอ่านหนังสือ เมื่อก่อนก็จะซื้ออ่านเอา แต่พอซื้อไปเรื่อยๆ เริ่มจะซื้อไม่ไหว  หนังสือต่างประเทศ เล่มนึง ก็ราคาไม่ใช่น้อย แต่ถ้าเล่มไหนชอบมากๆ ผมก็จะซื้อเก็บเอาไว้ จนกระทั่งมีโอกาสได้รู้จักกับเว็บ www.ebookshare.net ซึ่งเป็นเว็บที่ให้บริการดาวน์โหลด E-Books ซึ่งมีหลายหลายประเภทมาก แต่ส่วนมากที่ผมดาวน์โหลดมาอ่านก็จะเป็นพวก Text-Book กับพวก Magazine ต่างปรเทศ ซะเป็นส่วนใหญ่
ซึ่ง E-Books ที่ให้ Download จะเป็นแบบ Full Book นะครับ ไม่ใช่ตัดตอนมาเป็นแค่ตัวอย่าง ซึ่งผมก็ไม่รู้ว่าทางสำนักพิมพ์เค้ายอมให้ Download ได้ยังไงเหมือนกัน สำหรับการดาวน์โหลด มีให้เลือก 2 รูปแบบ ก็คือ ดาวน์โหลดผ่าน Bit Torrent กับแบบ Direct Download ปกติผมก็จะดาวน์โหลดผ่าน Bit Torrent เพราะว่าฟรีไม่ต้องเสียค่าบริการ ส่วนความเร็ว ก็แล้วแต่ช่วงเวลา แต่ส่วนใหญ่ก็เร็วดีนะครับ ส่วนอีกที่นึงที่ผมก็ชอบไปดาวน์โหลดก็คือที่ thepiratebay.org (ต้องเข้าไปที่หมวด E-Books นะครับ) สำหรับที่นี่ก็จะมีหนังสือให้ดาวน์โหลดเยอะเหมือนกัน แต่จะไม่ได้จัดเป็นหมวดหมู่เหมือนที่เว็บ ebookshare.net สำหรับหนังสือของที่ๆ จะมาค่อนข้างเร็ว โดยเฉพาะพวก Magazine ต่างๆ ยังไงก็ลองแวะเข้าไปดูแล้วกันนะครับ อาจจะได้หนังสือถูกใจติดไม้ติดมือกลับมา และถ้าหากว่าอ่านเล่มไหนแล้วชอบ ก็อย่าลืมไปอุดหนุนทางสำนักพิมพ์เค้าบ้างนะครับ