Blog

[HTML5] รู้จัก Elements ของ HTML5 กันขนาดไหนมาทดสอบกัน

HTML5 นั้นมี element หลายตัวที่เพิ่มเข้ามา เมื่อนับรวมกับของเดิมแล้ว จะมีอยู่ 109 elements แล้วคิดว่าคุณจำมันหมดหรือเปล่า มาลองทดสอบกันดีกว่าครับ

HTML5 Elements Quiz

เปิดหน้าเว็บมา เค้าก็จะอธิบายการใช้งาน

หน้าแรกของเว็บ ที่อธิบายวิธีการใช้งาน

เมื่อคลิ๊ก LET’S DO THIS แล้ว เวลาจะนับถอยหลัง 5 นาที เพื่อให้เรากรอก element ที่เรารู้จัก

นับถอยหลัง 5 นาที กับ 109 elements

เวลากรอก element ลงไป ถ้าถูกต้องก็จะมาอยู่ด้านล่างแบบนี้

element ที่กรอกสำเร็จแล้วจะอยู่ด้านล่าง

และเมื่อเวลาหมด มันจะบอกว่าเรากรอกไปทั้งหมดกี่ตัว แล้วตัวที่เราไม่ได้กรอกเหลืออะไรบ้าง

เวลาหมดแล้ว element ที่เราไม่รู้จักจะอยู่ด้านล่าง

ลองทดสอบได้ที่นี่เลยครับ : HTML5 Elements Quiz

December 15, 2011
WordPress 3.3 มีอะไรมาใหม่บ้างนะ
วันที่ 12 ธันวาคมที่ผ่านมา ทาง WordPress ได้ปล่อยตัว WordPress เวอร์ชั่น 3.3 โดยใช้ชื่อว่า WordPress 3.3 “Sonny”

[wpvideo I7NAw9Zk]

สำหรับ WordPress 3.3 นั้นมีอะไรเปลี่ยนไปจากเดิมบ้าง มาค่อย ๆ ดูกันแล้วกันนะครับ

เริ่มตั้งแต่พอเราอัพเดตเป็น 3.3 แล้ว จะมีหน้าต้อนรับเข้าสู่การใช้ WordPress 3.3

หน้าต้อนรับเข้าสู่ WordPress 3.3

ตามมาด้วยเมนูด้านซ้ายที่เปลี่ยนไป

เมนูด้านซ้ายเปลี่ยนไป

admin bar เองก็เปลี่ยนไปนะ ไม่มีหัวข้อเมนูรกเหมือนเวอร์ชั่นก่อน

Admin Bar

เมื่อหน้าต่างเล็กลง WordPress 3.3 ก็โชว์ความเป็น Responsive ด้วยการย่อเมนูด้านซ้ายให้เหลือแค่นี้

Responsive Design ของ WordPress 3.3

ในส่วนของหน้าที่เราจะเขียนเนื้อหานั้น ตัว icon เกี่ยวกับ media 4 ตัว ก็โดนยุบรวมกันเป็นหนึ่ง เหลือเพียงตัวเดียวเท่านั้น

เหลือเพียงแค่ Add Media

และการอัพโหลดรูปภาพก็วางขึ้นเมื่อมันเปลี่ยนมาเป็น Drag & Drop แทน

Drag & Drop สำหรับการอัพโหลด Media ต่าง ๆ

ใน Firefox และ IE เราสามารถจะ resize รูปได้เวลาใช้ visual editor ครับ >_<
Resize รูปได้ด้วยการลาก
[/caption]

ส่วนของ Help ด้านบนก็เปลี่ยนไปนะ ดูน่าอ่านขึ้นด้วย

Help ที่เปลี่ยนไป

หลัก ๆ ที่ผมว่ามันสังเกตเห็นกันได้ ก็น่าจะมีประมาณนี้นะครับ แต่ก็มีรายละเอียดอื่น ๆ อีกที่เวอร์ชั่นนี้ปรับปรุงจากเดิม อย่างเช่น
- เวลาเปลี่ยนธีม WordPress นั้น ตัว Widgets จะไม่หายเหมือนแต่ก่อน
- การ Import ที่สนับสนุน Tumblr
- ปรับมาใช้ jQuery 1.7.1 และ jQuery UI 1.8.16
- doctype ในหน้า admin เปลี่ยนมาใช้ HTML5
- เปลี่ยนจาก Post Tags เป็น Tags
- เพิ่มให้ตัว Gallery เรียงตาม Date/Time ได้
- สนับสนุนไฟล์นามสกุล rar และ 7z ในการอัพโหลดส่วนของ media
เป็นต้น

เพิ่มเติม screencast

ไปอ่านรายละเอียดการเปลี่ยนแปลงทั้งหมดได้ที่

รายละเอียด : WordPress 3.3
December 14, 2011
[jQuery] Cheat Sheet สำหรับ jQuery 1.7

ทางเว็บ Woorkup ได้ทำ Cheat Sheet ตัวนี้ขึ้นมา เลยเอามาแบ่งปันให้ได้นำไปใช้กันนะครับ ดาวน์โหลดเป็นไฟล์ PDF ไปได้เลยครับ

คลิ๊กที่รูปเพื่อขยาย

ดาวน์โหลดไฟล์ PDF : jQuery 1.7 Visual Cheat Sheet

หรือจะไปดูที่เว็บเจ้าของได้เลยครับ

เว็บต้นฉบับ : jQuery 1.7 Visual Cheat Sheet

December 14, 2011
[WordPress] ขี้เกียจคิด tag ให้บทความ ลองใช้ Plugin ตัวนี้

ในการเขียนบทความบางครั้งสิ่งที่ยากมันไม่ได้เป็นตอนเขียน แต่เป็นตอนคิดว่าจะให้มันมี tag อะไรบ้างนี่ละ แล้ว Plugin ที่จะมาช่วยเรื่องนี้ก็คือ Web Ninja Auto Tagging System

Web Ninja Auto Tagging System

โหลดตัว Plugin ได้ที่ลิงก์ด้านล่างของบทความเลยครับ หลังจากที่ติดตั้งเสร็จแล้ว เมนูของ Plugin ตัวนี้จะอยู่ในหัวข้อ Settings นะครับ

ไปที่ Settings -> Web Ninja ATS

ตัว Plugin นั้นสามารถ Settings ได้แบบนี้ครับ

สามารถเลือกจำนวน tag ที่ต้องการใส่ได้

เราสามารถเลือกจำนวน tag ที่จะให้ตัว Plugin ใส่ให้อัตโนมัติ สามารถกำหนดให้ใส่ tag นี้ทุกครั้ง หรือกำหนดให้ไม่ใส่ tag นี้เด็ดขาดในทุก ๆ บทความ

มาทดสอบดูนะครับ สมมติเป็นบทความนี้แล้วกัน

ตัวอย่างบทความที่เราจะใช้ plugin ตัวนี้ใส่ tag ให้อัตโนมัติ

ตัว Plugin สร้าง tag ออกมาเป็นแบบนี้ครับ

tag ที่ตัว Plugin สร้างขึ้นมาให้

ถ้าสนใจก็ลองโหลดไปใช้งานกันดูนะครับ แล้วถ้าไม่ถูกใจก็ลบมันทิ้งไปซะ 555

Plugin : Web Ninja Auto Tagging System

December 13, 2011
[WordPress] ไม่ต้องใส่ tag p อัตโนมัติให้รูปภาพของเรา

เวลาเราเขียนเนื้อหาอะไรใน WordPress นั้น ตัว WordPress เองจะทำการใส่ tag p ให้อัตโนมัติในกรณีที่เราไม่ได้ใส่ tag อะไรคลุมไว้ แต่บางคนคงไม่ชอบที่ตัว WordPress มาใส่ tag p ให้กับรูปภาพของ ด้วยสาเหตุส่วนตัวหลาย ๆ อย่าง แต่เราจะทำยังไงไม่ให้มันใส่ tag p ให้รูปภาพของเราละ

ให้ไปที่ functions.php นะครับ แล้วนำ code นี้ไปแปะไว้

[php]
function filter_ptags_on_images($content){
return preg_replace(‘/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU’, ‘\1\2\3’, $content);
}

add_filter(‘the_content’, ‘filter_ptags_on_images’);
[/php]

เพียงเท่านี้ เราก็ไม่มีเจ้า tag p มากวนใจรูปภาพของเราแล้วละครับ ^^

แต่ถ้าไม่ต้องการให้ใส่ tag p อัตโนมัติเลย ก็ไปดูที่นี่ครับ วิธีแก้ไม่ให้ WordPress ใส่ tag p ให้เราอัตโนมัติ

December 12, 2011
[Infographic] อะไรทำให้คนออกจากเว็บไป

ทาง kissmetrics.com ได้ทำ Infographic อธิบายให้เราดูว่า อะไรทำให้คนออกจากเว็บไป

December 11, 2011