ทำเว็บไซต์

Debug เว็บไซต์ได้ด้วย IE9+

Debug เว็บไซต์ได้ด้วย IE9+
สำหรับนักพัฒนาเว็บไซต์ไทย เบราว์เซอร์ ที่เราจะละทั้งไปไม่ได้เลยก็คือ Internet Explorer หรือที่เรียกกันติดปากสั้นๆ ว่า IE เพราะผู้ใช้งานอินเตอร์เน็ตไทยจำนวนมากยังใช้ IE อยู่ มิหนำซ้ำยังเป็น IE8 อีกด้วย

ทำ IE8 ให้แสดงผล CSS3 ทั้ง Shadow และ border-radius

ทำ IE8 ให้แสดงผล CSS3 ทั้ง Shadow และ border-radius
อย่างที่ทราบกันกับความสามารถของ CSS3 ทำให้เว็บไซต์ดูมีมิติมากขึ้นไม่ว่าจะเป็นการใส่เงา (shadow) การทำมุมให้โค้ง (border-radius) แม้กระทั้งการทำพื้นหลังแบบไล่สี (gradient) เหล่านี้สามารถทำได้ง่ายใน CSS3 แต่คนไทยยังใช้ IE8 อยู่มากทำอย่างไรดีหละ?

สร้างสีสันให้ list เว็บไซต์ไม่น่าเบื่อด้วย CSS3 Scroll Effects

สร้างสีสันให้ list เว็บไซต์ไม่น่าเบื่อด้วย CSS3 Scroll Effects
CSS3 Scroll Effects ถูกเขียนด้วย JavaScript + CSS เป็น Effects ที่น่าสนใจให้ลองเล่นกันและศึกษาดูกัน สำหรับเว็บไซต์ที่ต้องการแสดงข้อมูลที่เป็นรายชื่อเยอะๆ อาจใช้ Script นี้ช่วยเพิ่มรูปแบบการนำเสนอเว็บไซต์ให้มีความน่าสนใจ แต่ Script นี้อาจไม่รองรับบางเบราว์เซอร์ ทดสอบแล้วใน Chrome/Safari/FF/iOS/Android 4.x

Aloha Editor - WYSIWYG เบาๆ ใช่งานง่ายไม่เปลืองหน้าเว็บ

Aloha Editor - WYSIWYG เบาๆ ใช่งานง่ายไม่เปลืองหน้าเว็บ
Aloha Editor เป็น Rich Text Editor framework (หรือ WYSIWYG) ที่เขียนด้วย Javascript รองรับการทำงาน xHTML5 สามารถใช้งานร่วมกับ CMS, blog, wiki software หรืองานโปรเจคอื่น ๆ ที่ต้องการแก้ไขเนื้อหาในรูปแบบเว็บไซต์ในลักษณะการใช้งานเรียกได้ว่าเหนือกว่า textarea ธรรมดา สามารถแก้ไขได้เกือบทุก DOM Element

ทำ autofocus โดยไม่ง้อ JavaScript

ทำ autofocus โดยไม่ง้อ JavaScript
HTML5 ช่วยทำให้การทำเว็บไซต์ง่ายขึ้นมากเลยทีเดียว จากเมื่อก่อนหากเราต้องการ ใส่ข้อความเริ่มต้นใน input หรือการทำ autofocus (ทำให้ cursor การพิมพ์ไปอยู่ที่ input นั้นโดยอัตโนมัติ) สิ่งเหล่านี้ล้วนต้องใช้ JavaScript หรืออาจจะต้องใช้ Flash เข้าช่วย แต่ปัจจุบันเป็น HTML5 ทำได้ง่ายโดยไม่ต้องพึ่ง JavaScript เพียงแค่กำหนด attribute

จัดหน้าเป็นคอลัมน์ง่ายๆ ด้วย css3

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

jQuery ต้องการเลือกหลาย checkbox

jQuery ต้องการเลือกหลาย checkbox
หากเราต้องการทำฟอร์ม (FORM) ในกรณีที่ต้องการจะให้ checkbox ของเราเลือกเป็น checked มากกว่าหนึ่ง checkbox อย่างเช่น สินค้า นาฬิกา อาจจะอยู่ในหมวดของสินค้าแฟชั่น และ สินค้าอัญมณี เช่นนี้ (อาจจะเป็นการเรียกค่าที่บันทึกไว้ของสินค้านั้นๆ มาแก้ไข) สามารถทำได้โดยการใช้ jQuery ดังนี้

พลิกลิ้งค์ 3D ทำลิ้งค์ให้พลิกไปมาได้ Rolling Links

พลิกลิ้งค์ 3D ทำลิ้งค์ให้พลิกไปมาได้ Rolling Links
JavaScript นี้เป็นการสร้างความแตกต่างให้กับเว็บไซต์ของเราไม่ให้ซ้ำแบบใคร โดยการทำให้ลิ้งของเราพลิกไปพลิกมาได้แบบ 3D กันเลยทีเดียว โดยส่วนตัวคิดว่าผู้พัฒนาทำ JavaScript นี้ออกมาได้ดีทีเดียว

ทำเว็บไซต์แบบ fold-in menu แบบ 3D ด้วย CSS ด้วย Meny

ทำเว็บไซต์แบบ fold-in menu แบบ 3D ด้วย CSS ด้วย Meny
เป็นการทำหน้าเว็บไซต์แบบซ่อนเมนู และเมื่อทำการเลื่อนเมาส์ไปบริเวณเมนูหน้าเว็บไซต์จะพลิกแสดงด้านที่เป็นเมนูออกมา ในรูปแบบ 3D ด้วย CSS + JavaScript Library ดูตัวอย่าง 3D CSS (Meny เป็นชื่อ Library ที่ผู้พัฒนาตั้งขึ้น)

ทำเว็บไซต์ให้ Text Selection (ข้อความที่เลือก) เป็น Modal-Style ด้วย Fokus

ทำเว็บไซต์ให้ Text Selection (ข้อความที่เลือก) เป็น Modal-Style ด้วย Fokus
Script นี้เป็น JavaSrcipt เล็กๆ ที่นำมาฝากกันมีชื่อเรียก Fokus เป็นการทำให้หน้าเว็บไซต์เป็น Modal dialog เมื่อมีการทำ Text Selection หรือการทำแถบแสงเลือกข้อความ ซึ่งจะโชว์เฉพราะข้อความที่เราทำเลือกเท่านั้น ฟังแล้วยังงงๆ ดูตัวอย่าง ก่อนเลยดีกว่า Demo

Joomla! 3.0 แล้วจ้า Mobile Ready / User Friendly

Joomla! 3.0 แล้วจ้า Mobile Ready / User Friendly
Joomla ได้เดินทางมาถึงเวอร์ชั่น 3.0 แล้ว ในเวอร์ชั่นนี้มีการปรับเปลี่ยนค่อนข้างเยอะ โดยเน้นการแสดงผลบนมือถือ หรือ Smart Phone ที่กำลังเป็นที่นิยมอยู่ในปัจจุบัน และได้ปรับเปลี่ยน Admin ให้ใช้งานได้ง่ายขึ้น

เช็คอันดับที่แท้จริงของเว็บไซต์ใน Google ด้วย free monitor for google

เช็คอันดับที่แท้จริงของเว็บไซต์ใน Google ด้วย free monitor for google
Google จะทำการวิเคราะห์พฤติกรรมการเข้าเว็บไซต์ของเราแล้วนำมาจัดอันดับผลของการค้นหาเว็บไซต์ ซึ่งถ้าเรามีการเข้าเว็บไซต์ของเราเองบ่อยๆ ก็จะทำให้เว็บไซต์ของเราอยู่ในลับดับแรกๆ ของการค้นหา ซึ่งอาจไม่ใช่ตำแหน่งที่แท้จริง เมื่อผู้ใช้งานคนอื่นทำการค้นหา

RockMelt : ไม่ใช่เบราว์เซอร์ แต่เป็น ว๊าวเซอร์

RockMelt : ไม่ใช่เบราว์เซอร์ แต่เป็น ว๊าวเซอร์
RockMelt เป็นเบราว์เซอร์ ที่รวมรวม Social Network ของคุณเข้าด้วยกันไม่ว่าจะเป็น Facebook, Twitter, Youtube, Tumblr รวมไปถึงการเช็คเมลล์อย่าง Gmail, การอ่านข่าวจาก CNN, BBC News สามารถ Download กันได้แล้ว ถูกใจคนชอบเล่น Social Network แน่นอน

MySQL เรียง AUTO_INCREMENT ใหม่โดยที่ข้อมูลไม่หาย

MySQL เรียง AUTO_INCREMENT ใหม่โดยที่ข้อมูลไม่หาย
ใน MySQL การสร้าง Table แล้วกำหนดให้ Primary Key ของ Table เป็น Auto Increment นั้น เมื่อใช้ไปนานๆ ข้อมูลมีทั้งเพิ่ม และลบ ทำให้ auto increment บ้างครั้งเลข ID นั้นมีการกระโดดบ้าง เพราะข้อมูลได้ถูกลบไป เราสามารถใช้คำสั่ง ALTER TABLE `table_name` AUTO_INCREMENT = 99 แต่ข้อมูลที่อยู่ในตารางยังกระโดดอยู่ทำอย่างไรดีหละ

Mootool - javascript Drag Scroll - คลิกแล้วลากเนื้อความในเว็บไซต์

Mootool - javascript Drag Scroll - คลิกแล้วลากเนื้อความในเว็บไซต์
บทความนี้ขอนำเสนอ Drag Scroll หากใครยังนึกถึงลักษณะของ Drag Scroll ไม่ออก ให้นึกถึง Google Maps หรือ ลักษณะเวลาเราเล่นมือถึอ แล้วเอานิ้วจิ้มแล้วลากที่หน้าจอเพื่อดูข้อมูลในหน้านั้นๆ

ใส่เงาให้กับกล่องข้อความด้วย CSS

ใส่เงาให้กับกล่องข้อความด้วย CSS
ใส่เงาให้กับกล่องข้อความด้วย CSS ก่อนอื่นต้องขอบอกก่อนว่า การกำหนดเงาให้กับกล่องข้อความหรือ Box นั้นจะต้องเป็น Browser ที่รองรับ HTML5 เท่านั้น ถึงจะแสดงผลตามที่เราต้องการได้ โดยใช้เพียงคำสั่งใน CSS เท่านั้น

สร้าง menu right click เป็นของตัวเอง

สร้าง menu right click เป็นของตัวเอง
การสร้างเมนูคลิกขวาบนเว็บไซต์จะช่วยให้ user เข้าถึงฟังก์ชันการใช้งานของเว็บไซต์ได้รวดเร็วหรือเรียกว่าเป็น short cut หรือทางลัด เพียงแค่คลิกขวา

ทำ selection ให้เป็นสี

ทำ selection ให้เป็นสี
จุดประสงค์หลักของ CSS ก็คือเพื่อปรับแต่งรูปแบบและสีสันบนเว็บไซต์ให้ดูสวยงามอย่างที่ทราบๆ กัน ในปัจจุบัน CSS มีอีกลูกเล่นเล็กๆ น้อยๆ อีกตัวหนึ่งซึ่งจะทำให้ตัว highlight หรือ selection สีน้ำเงินเข้มๆ ที่ Window ได้กำหนดขึ้น เป็นสีสันตามแบบฉบับของเว็บไซต์เรา

กำหนดฟอตน์ได้ดั่งใจด้วย Google Font API

กำหนดฟอตน์ได้ดั่งใจด้วย Google Font API
Google ได้เปิดตัวบริการใหม่ที่เรียกว่า Font API, Font API ของ Google นี้ช่วยให้นักพัฒนาเว็บไซต์ ใช้งาน font ได้เร็วขึ้น ไม่ว่าเครื่องของ user จะมี font ที่เรากำหนดหรือไม่ รูปแบบตัวอักษรเราทำก็จะแสดงผลตาม font ที่เรากำหนด ซึ่งมันสะดวกมากในการออกแบบเว็บไซต์ และก็มั่นใจได้ว่า user จะเห็น font-family แบบที่เราเห็นและตั้งใจให้เป็น

Star Rating โดยใช้ MooTools Framework

Star Rating โดยใช้ MooTools Framework
star rating script นี้เป็นการใช้ MooTools ซึ่งเป็น Javascript Framework อีกตัวหนึ่งที่น่าสนใจ สวยงาม ใช้ง่าย และมีลูกเล่นอีกมาก แต่ในบทความนี้จะกล่าวถึง STAR RATING เป็น script ที่น่านำมาประดับเว็บไซต์อีก script

ฟังก์ชั่น print_r ใน javascript

ฟังก์ชั่น print_r ใน javascript
ในภาษา PHP นั้นหากเราจะเรียกดู members ของ array ก็สามารถทำได้โดยใช้ function ที่เรียกว่า print_r ก็จะแสดง member และค่า ทั้งหมดของ array ให้ซึ่งก็เป็นประโยชน์มากทำให้เรารู้ value ของตัวแปร array แต่ใน javascript นั้นไม่มี function นี้ ดังนั้นเราจะต้องเขียน function print_r ขึ้นมาใช้เอง

การใช้ JSON กับ jQuery

การใช้ JSON กับ jQuery
JSON (JavaScript Object Notation)เพื่อให้เข้าใจง่ายก็อาจจะเปรียบได้ว่าเป็นเหมือนชุดของข้อมูล ซึ่งในการเรียกค่าของข้อมูลนั้นสามารถเรียกข้อมูลออกมาได้ในรูปแบบของ Object เลย ซึ่งสะดวกมากในการดึงข้อมูลมาใช้ แถมยังรวดเร็วอีกด้วย

เครื่องมือ และไฟล์ตัวอย่างในการเริ่มเขียน jQuery

เครื่องมือ และไฟล์ตัวอย่างในการเริ่มเขียน jQuery
ในการเริ่มเรียนรู้ jQuery นั้น ผมขออนุญาติแนะนำเครื่องมือที่ช่วยให้เขียน และเข้าใจในหลักการทำงาน ได้ง่ายและรวดเร็วขึ้น โดยขอแนะนำให้ใช้ FireFox 3.6 + Firebug

Detail Page

xxxxxxxxxxxxxxxxxxx