HTML5 WEB AUDIO API มาใส่เสียงให้กับเว็บกันเถอะ

HTML5 WEB AUDIO API มาใส่เสียงให้กับเว็บกันเถอะ

อันนี้คงต้องเข้าเว็บไปฟังกันเองนะครับ เอาเดโม มันมาไม่ได้ การใช้งานดูแล้วก็ไม่ยากไม่ง่ายจนเกินไป แต่รับรองว่ามันสุดยอดจริง ๆ ครับ ไอ้เจ้า html5 เนี่ย ยอมรับเลย

website : html5rock

สคริปต์นับเวลาถอยหลัง countdown แยกเป็น ปี เดือน วัน ชั่วโมง นาที ได้

สคริปต์นับเวลาถอยหลัง countdown แยกเป็น ปี เดือน วัน ชั่วโมง นาที ได้

อย่างที่ได้บอกไว้ตามหัวข้อเลยครับสามารถแยกเป็นปี เดือน วัน และยิบย่อยได้อีกเยอะการใช้งานไม่ยาก(ดูตามเดโม) ได้เลยครับ ตัวนี้เป็น javascript ออกแนว jquery นิด ๆ แต่ไม่ต้องใช้ jquery ก็ได้ครับ ไฟล์เดียวอยู่เลย

demo

download and developer : countdown.org


example demo : demo


documentation : views

แจก icon window 8 free เอาไปตกแต่งกันได้ตามสบาย

แจก icon window 8 free เอาไปตกแต่งกันได้ตามสบาย

ไม่อยากพูดมากวันนี้เอาเป็นของแถมไปใช้งานก็ละกัน สำหรับ icon สวย ๆ ขั้นเทพ ในรูปแบบ window 8 ขอบอกได้คำเดียวว่าฟรีจ่ะฟรี

demo

download icons8.com

Web Debugging for Safari on iPhone, iPad and PhoneGap require Mac OS 10.6+, Xcode 4.2 with iOS 5 SDK

Web Debugging for Safari on iPhone, iPad and PhoneGap require Mac OS 10.6+, Xcode 4.2 with iOS 5 SDK

เว็บโปรแกรมเมอร์บน iphone ทั้งหลาย ตัว debugging ขั้นเทพอยู่นี่แล้ว เจ้าจงโหลดไปใช้กันซะ แต่ต้องบอกว่าใช้ได้บน Mac OS 10.6+ เท่านั้นนะครับ สำหรับใครที่ไม่มี mac ไว้กับตัวก็อย่าได้โปรดเสียใจไป เราเอาวิธีลง mac บน window มาให้ท่านแล้ว ที่นี่ ลองทำกันดู ไม่ต้องมาถามผมนะครับ ผมทำได้หนเดียวพอลง window ใหม่ ทำไม่ได้อีกแล้ว รู้สึกเซ็ง อ่ะมาดู demo ประกอบการตัดสินใจเหมือนเดิมครับ

demo

web developer and download iwebinspector

ตัวอย่างเมนูสวย ๆ ขั้นเทพ

ตัวอย่างเมนูสวย ๆ ขั้นเทพ

เคยบ้างมั้ย? ที่เวลาจะดีไซน์หน้าเว็บแล้วคิดไม่ออกว่าเมนูจะทำออกมาในรูปแบบไหนให้ดึงดูดคนดู ไม่ซ้ำแบบคนอื่น และใช้งานได้ง่าย วันนี้เอาตัวอย่างเมนูที่คิดว่าน่าจะเป็นประโยชน์ต่อเว็บดีไซน์เนอร์มาให้ดูกัน หรือใครไม่พอใจ ลองค้นหา keyword ใน Google ว่า "web menu inspiration" ดูนะครับ เพราะจะมีตัวอย่างให้ดูมากมายยิ่งกว่านี้อีกเยอะ มาดูกันเลย

http://www.foodnetwork.com/

http://www.converse.com/

http://www.alessandrogiammaria.com/

http://www.aussiebbqlegends.com/beef-lamb-and-pork

http://www.stripturnhout.be/

http://www.cobahair.co.uk/

http://www.utah.travel/

http://www.mellasat.com/

http://www.huisoranje.co.za/

http://www.narrowdesign.com/

http://www.carbonica.org/

http://www.hdlive09.co.uk/

http://larvalabs.com/

ชอบแบบไหนก็ประยุกต์กันตามสบายเลยนะครับ หวังว่าวันนี้ทุกท่านคงจะได้แนวคิดใหม่ ๆ อีกเยอะเลยนะครับ

สคริปต์แบ่งหน้าด้วย JQUERY (jqPagination)

สคริปต์แบ่งหน้าด้วย JQUERY (jqPagination)

การแบ่งหน้าเป็นสิ่งที่สำคัญมากต่อข้อมูลที่มีปริมาณมาก ๆ จะทำให้หน้าเว็บดูสวยงามเป็นระเบียบอีกทั้งยังช่วยในเรื่องความสะดวกในการใช้งานทำให้ในหน้าที่มีข้อมูลไม่ยาวจนเกินไป แล้วการแบ่งหน้าจะทำยังไงให้ง่ายล่ะ? ก็ต้องใช้ php หรือสคริปต์อื่น ๆ ที่ช่วยในการติดต่อ mysql จากฐานข้อมูล กำหนด limit ที่ละช่วงของข้อมูล วิธีทำก็ลองดูตามนี้ ง่าย ๆ example 1 ,example 2 หรือ จะใช้ คีย์เวิร์ดว่า "PHP Pagination" ในการค้นหาข้อมูลจาก Google ดูก็ได้ลองดูครับไม่ยาก

ส่วนการแบ่งหน้าแบบข้างบนนั้นจะทำการส่งค่าหนึ่งที เพื่อจะทำการรีเฟรชหน้าแล้วดึงข้อมูลมาตาม limit ที่ต้องการ แต่ปัจจุบันเรามีเทคนิคใหม่ ๆ ซึ่งก็คือ ajax , jquery นั่นเองทำให้การประมวลผลทำได้ในหน้าเดียว(โดยไม่ต้องรีเฟรชหน้าเว็บเพจ) ทำให้สะดวกแก่ผู้ใช้เพิ่มมากขึ้น วันนี้ก็มี jquery pagination ตัวหนึ่งมาแนะนำประกอบการตัดสินใจจะนำไปใช้งานกัน ตัวนี้ชื่อว่า jqPagination ไปลองดู demo และ source code กัน

demo

จุดสังเกตุ jqPagination จะส่งค่าเป็นแบบ $_GET['page'] ไปให้ในที่เราต้องการในลักษณะนี้

download and more document http://beneverard.github.com/jqPagination/

แก้ไขปัญหาการแสดงภาพ panorama หรือภาพขนาดใหญ่ด้วย viewports

แก้ไขปัญหาการแสดงภาพ panorama หรือภาพขนาดใหญ่ด้วย viewports

ใครที่ทำเว็บเกี่ยวกับสถานที่ท่องเที่ยวคงจะเคยประสบปัญหาว่าจะนำภาพที่ทำเป็น panorama มาลงเว็บไซต์ด้วยวิธีไหนดี หลายคนบอกอาจจะใช้วิธีการย่อโดยการปรับ width height ที่ tag img หลายคนก็บอกว่าใช้ css ในการจัด เป็นต้น วันนี้ผมมีวิธีที่ดีกว่านี้มากฝากกัน หลาย ๆ คนคงจะเคยใช้โปรแกรม image viewer ต่าง ๆ ซึ่งบนเว็บก็สามารถที่จะทำได้เช่นกัน และซัพพอร์ตในหลาย ๆ แพลตฟอร์มอีกด้วย

source code ที่นำมาแนะนำในวันนี้เป็น javascript ล้วนที่สามารถแสดง viewport ของภาพขนาดใหญ่โดยที่มี feature หลากหลายในการแสดง เช่น การซูม การเลื่อนดูภาพจาก viewport(ภาพจอเล็ก) ปรับ fullscreen ได้ และอื่น ๆ อีกมากมาย ว่าแล้วมาลองดู demo ในการตัดสินใจใช้กันครับ

demo

web developer and download http://www.dimin.net/software/panojs/

support platforms

• PC (สามารถ zoom in /out โดยใช้ scrollbar)


• Mac


• Smart Phone ie. IOS & android


• Tablets

Selfoss Open source RSS Reader การดึง RSS แบบ Realtime ด้วย SELFOSS RSS READER

Selfoss Open source RSS Reader การดึง RSS แบบ Realtime ด้วย SELFOSS RSS READER

RSS คือ การอัพเดทข่าวสารหรือบทความที่เจ้าของเว็บบางเว็บให้อนุญาติในการเผยแพร่ โดยรูปแบบไฟล์ส่วนใหญ่จะเป็นในรูปแบบของ xml ซึ่งวิธีการนำมาใช้ก็สามารถนำมาประยุกต์ใช้ได้หลายวิธี อย่างเช่น http://www.thaiall.com/xml/, http://www.daydev.com/programming-language/php/70-php-xml-simplexml.html พอจะมี sample ตัวอย่างให้ดูวิธีการเรียกใช้กันไปแล้วนะครับ

แต่คงไม่ใช่แค่นี้สำหรับวันนี้ ผมมี Open Source RSS Reader มาให้ได้ลองตัดสินใจในการนำไปใช้งานกัน ชื่อของมันก็คือ "SELFOSS" (ไม่เคยได้ยินใช่มั้ยล่ะ?? ผมเองก็เหมือนกัน) แต่ด้วยประสิทธิภาพการใช้งานที่ใน document เขียนไว้ก็ค่อนข้างน่าสนใจเลยทีเดียว มาลองแปรแบบบ้าน ๆ กับ เว็บโปรแกรมเมอร์กาก ๆ ดูละกัน

Features : คุณสมบัติ

• web based rss reader = เป็นสคริปต์(เว็บ)ที่ใช้ในการอ่าน RSS


• universal aggregator = มีความเป็นมาตรฐานสากล หมายถึงว่า สามารถอ่าน RSS ได้ในหลาย ๆ รูปแบบที่ส่วนใหญ่นิยมใช้กัน


• open source and free = เป็นโอเพนซอร์ส และฟรี


• easy extendable with an open plugin system = มีปลั๊กอินที่สามารถนำไปใช้งานต่อได้อีกเยอะ


• mobile support (Android, iOS, iPad) = รองรับการทำงานบนสมาร์ทโฟน


• use selfoss to live stream and collect all your posts, tweets, feeds in one place = ใช้ selfoss ในการจัดเก็บรวบรวมการโพสต์บทความของคุณไม่ว่าจะเป็น twitter หรืออื่น ๆ ในที่ที่เดียว


• lightweight PHP application with less than 2 MB = ไฟล์มีขนาดเล็กและน้อยกว่า 2 MB


• supports MySQL, Sqlite and MongoDB Databases = ซัพพอร์ต mysql sqlite และ mongo db


• 
  

  demo

  
  

  

  
  

  

  
  

  document and download http://selfoss.aditu.de/

  
  

Boilerplate คืออะไร? แนะนำ Boilerplate The Goldilocks Approach "RESPONSIVE WEB DESIGN"

Boilerplate คืออะไร? แนะนำ Boilerplate The Goldilocks Approach "RESPONSIVE WEB DESIGN"

หากจะถามว่า Boilerplate(ผมอ่านว่า บอยเลอร์เพลต) คืออะไร? คำตอบแบบบ้าน ๆ ของเว็บโปรแกรมเมอร์ธรรมดาก็คือ framework สำเร็จรูป ตัวนึงที่เอามาพัฒนาต่อก็แค่นั้นเอง ถ้าจะหาจาก wikipedia(en) จะได้ความหมายดังนี้ "Boilerplate is any text that is or can be reused in new contexts or applications without being changed much from the original." ถ้าแปลตรงตัว boilerplate ก็คือ "ข้อความในรูปแบบต่าง ๆ ที่สามารถนำไปใช้ใหม่โดยที่ไม่ต้องเปลี่ยนจากของเดิมมากนัก" นั่นเอง

วันนี้ผมมี Boilerplate ที่เป็น framework ที่บอกว่า "RESPONSIVE WEB DESIGN" ความหมาย คือ รับผิดชอบรูปแบบของเว็บไซต์ที่พัฒนา วันนี้มีรูปภาพที่เป็น demo และชุด source code ที่ให้มาพัฒนาใช้กันได้ตามสบายใจมาฝากกัน ต้องบอกก่อนว่าตัวนี้ชื่อ "The Goldilocks Approach" นะครับ

demo

จากที่เห็นในภาพ จะมีมุมมองที่เป็นแบบด้านกว้าง(สำหรับเครื่อง pc,mac ทั่วไป) แบบมุมมองแคบมาหน่อย(จำพวก tablet ie. samsung galaxy tab,ipad) ส่วนมุมมองต่อมาก็คือมุมมองที่แคบที่สุด( ie. พวก smartphone ทั่วไป)

เมื่อแตกไฟล์มาก็จะได้ดังภาพ มี example.html ให้ลองศึกษาตัวอย่าง code ซึ่งก็จะทำให้เหล่าเว็บโปรแกรมเมอร์ทั้งหลายนำไปประยุกต์ต่อไปได้อย่างไร้ขีดจำกัดกันเลยทีเดียว

download http://goldilocksapproach.com/

HTML5 วีดีโอ Videos Framework วงเล็บ โดย Microsoft T_T

HTML5 วีดีโอ Videos Framework วงเล็บ โดย Microsoft

วันนี้เปิดไปเจอเว็บหนึ่งเว็บที่เค้าเขียนเกี่ยวกับ รีวิว html5 video framework แต่พออ่านหัวข้อตอนท้ายดันมี วงเล็บ โดย microsoft ต่อท้าย แต่เมื่อเข้าเว็บไปดู demo แล้วเลือกดูที่ license ปรากฏว่าฟรีแฮะ อีกอย่างหนึ่งก็คือ มันสวยและก็ทำออกมาค่อนข้างเสถียรกับทุกเบราเซอร์ที่รับ html5 ได้(safari,chrome,firefox) ก็เลยอดใจไม่ได้เอามาให้ได้ดูตัว demo ของ scripts กันหน่อยละกัน

demo

web developer and download : http://playerframework.codeplex.com/releases/view/76470

และแล้ว JQUERY Mobile ก็ออกตัว stable มาให้ทดลองใช้

เมื่อวันที่ 16 พฤศจิกายน 2554 ทาง jquery mobile ได้ออกมาประกาศว่าหลังจากที่ได้ทำงานกันมาเป็นแรมปี วันนี้ขอออกตัว jquery mobile ที่คิดว่าสมบูรณ์แล้วออกมาให้ web developer ได้ลองใช้งานกันดู วันนี้ thaiwebsource พึ่งทราบข่าวเลยเอามาเขียนลงในบล็อกซักหน่อย เผื่อทุกท่านที่กำลังติดตาม จะสนใจตัว jquery mobile กันบ้าง

demo

jquery mobile ประกาศตัวที่ support กับ platform jquery mobile ดังนี้

จำพวก A Grade แสดงผลได้ยอดเยี่ยม

• Apple iOS 3.2-5.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0)


• Android 2.1-2.3 - Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)


• Android Honeycomb- Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM


• Windows Phone 7-7.5 - Tested on the HTC Surround (7.0) HTC Trophy (7.5), and LG-E900 (7.5)


• Blackberry 6.0 - Tested on the Torch 9800 and Style 9670


• Blackberry 7 - Tested on BlackBerry® Torch 9810


• Blackberry Playbook - Tested on PlayBook version 1.0.1 / 1.0.5


• Palm WebOS (1.4-2.0) - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)


• Palm WebOS 3.0- Tested on HP TouchPad


• Firebox Mobile (Beta) - Tested on Android 2.2


• Opera Mobile 11.0: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0)


• Meego 1.2 - Tested on Nokia 950 and N9


• Kindle 3 and Fire: Tested on the built-in WebKit browser for each


• ChromeDesktop 11-15 - Tested on OS X 10.6.7 and Windows 7


• Firefox Desktop 4-8 - Tested on OS X 10.6.7 and Windows 7


• Internet Explorer 7-9 - Tested on Windows XP, Vista and 7 (minor CSS issues)


• Opera Desktop 10-11 - Tested on OS X 10.6.7 and Windows 7

พวก B Grade แสดงผลได้แต่ไม่ถึงกับ support มาก

• Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770


• Opera Mini (5.0-6.0) - Tested on iOS 3.2/4.3


• Nokia Symbian^3- Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

พวก C Grade ซัพพอร์ต แต่ features บางอย่างอาจใช้การไม่ได้

• Blackberry 4.x - Tested on the Curve 8330


• Windows Mobile - Tested on the HTC Leo (WInMo 5.2)


• All older smartphone platforms and featurephones - Any device that doesn't support media queries will receive the basic, C grade experience

พวกที่ไม่ support เลย

• Samsung Bada- The project doesn't currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0

web developer and download : http://jquerymobile.com/blog/2011/11/16/announcing-jquery-mobile-1-0/

แจก Vector Icon โทนสีเทาไว้แต่งเว็บ เหมาะสำหรับเว็บแอพมาก

แจก Vector Icon โทนสีเทาไว้แต่งเว็บ เหมาะสำหรับเว็บแอพมาก

วันนี้ก็ฟรีกันไปสำหรับ vector icon โทนสีเทาสวย ๆ ที่เอามาแจกกันนะครับ ไม่มีไรมากดู demo เลยละกัน วันพรุ่งนี้ว่าจะเอาเรื่อง compare image มาลองทำเล่น ๆ ให้อ่านกันสักหน่อย ไว้ติดตามกันนะครับ

demo

Download http://salleedesign.com/resources/mimi-glyphs/

ทำ AJAX & Jquery Todolist demo & download

ทำ AJAX & Jquery Todolist

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

demo

web developer and download : http://tutorialzine.com/2010/03/ajax-todo-list-jquery-php-mysql-css/

CSS3 ทำเอฟเฟกหนังสือพิมพ์หมุน มีโค้ดตัวอย่าง

CSS3 ทำเอฟเฟกหนังสือพิมพ์หมุน มีโค้ดตัวอย่าง

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

demo

website tutorial and download : http://tutorialzine.com/2011/07/spinning-newspaper-effect-css3/