สวัสดีครับ ก้าวสู่ยุค smart phone เต็มรูปแบบ จะแสดงเว็บแค่บนเครื่อง Computer Desktop  อย่างเดียวคงไม่ได้สมัยนี้ผู้คนใช้มือถือ Smart Phone ,Android,iPhone, iPad ,หรือ Tablet เข้าเว็บเยอะขึ้น ถ้าเว็บเพิ่งเปิดใหม่ๆเน้นเนื้อหาเป็นหลักจะเข้าทีต้องลากนิ้วซูมเข้าซูมออกเสียเวลา ยังไม่รวมถึงเมนูที่ขาดๆหายๆ ลองคิดดูถ้าคนเข้าเว็บมาเจอแบบนี้แล้วเนื้อหาเราไม่เด็ดมีประโยชน์จริงเชื่อเถอะว่าคนที่เข้ามาปิดแล้วออกจากเว็บเราภายในไม่กี่วินาทีแน่นอนครับ ทีนี้เว็บโปรแกรมเมอร์อย่างผมก็คงต้องปรับตัวตาม

งานทำเว็บบางครั้งต้องมีการ upload รูปหรือไฟล์บ้างซึ่งจะมี file inputs เป็นตัวกลางเพื่อให้ผู้ใช้กดปุ่มเพื่อไปดึงไฟล์หรือรูปมาอัพโหลด (upload) ซึ่งหน้าตาก็จะเป็นประมาณรูปด้านล่างนี้

วันนี่มี CSS Effect เล็กๆน้อยๆ ไว้ช่วยในเรื่อง UI เวลาเราเลือก checkbox แล้วอยากให้มี Highlight แสดง ตัวอย่างนี้แสดงแบบง่ายๆคือเมื่อเลือกแล้วให้ label แสดงตัวหนา เพื่อจะได้มีประโยชน์เวลารายการข้อมูลเยอะอาจจะลายตาจนทำให้ไม่รู้ว่าเราเลือกอะไรไปบ้าง โดยจะ support พวก web browsers ที่ทันสมัยใหม่ๆหน่อยครับ ผมลองทดสอบกับ Firefox ,Chrome และ Safari ไม่มีปัญหา แต่ IE 7-8 ใช้ไม่ได้ส่วน 9-10 คิดว่าน่าจะได้ครับ

ใช้ css มาก็บ่อย บางทีใช้ Cursor Styles ก็ไปค้นในเน็ตเริ่มเสียเวลาเอามาไว้ในเว็บนี้เลยแล้วกัน และด้านล่างนี้เป็นรูปแบบ CSS Cursor แบบต่างๆตั้งแต่ CSS2-CSS3 ลองเอาไปปรับใช้ให้เหมาะกับอินเตอร์เฟสในหน้าเว็บครับ

เริ่มเขียน CSS มากเข้าทุกวันๆ Div ซ้อน Div บ๊อยบ่อย Layout ต้องให้ตรงกับที่ออกแบบมาเยื้องแม้แต่ Pixel เดียวก็ทำให้ Layout เพี้ยนเลยล่ะ แน่นอนมันควรจะต้องเป็นอย่างนั้นครับ ไม่ใช่สักจะทำพอผ่านๆ เราควรใส่ใจในรายละเอียด ไม่ใช่เผาส่ง (แต่บางครั้งเวลามันกระชั้นชิดสุดๆก็เผาบ้างอิอิ...) เลยไปได้ "ไม้บันทัดสำหรับใช้บน Firefox มา"

ก็ตามรูปด้านล่างคงไม่ต้องอธิบายกันมาก จริงๆฟังก์ชั่นนี้ผมเอามาแก้ไขเพิ่มเติมนิดหน่อย ดูต้นฉบับ คลิกที่นี่ วิธีใช้งานตามตัวอย่างด้านล่างครับ

ปกติเวลาเราจะทำเมนูที่ประกอบด้วยรูป เมื่อนำ Mouse ไปวางก็จะเปลี่ยนรูปให้ จะทำอย่างนั้นได้ก็ต้องใช้ Javascript เข้าช่วย จริงๆใน Dreamwever ก็มีนะ แต่ถ้าหากเราคำนึงถึง SEO ลิงค์ต่างๆควรจะเป็น Text เพราะ Bot จะไต่ลิงค์ได้ง่าย

Firefox Extension ดีๆที่ชื่อก็บอกอยู่แล้วว่าสำหรับใคร ตัวนี้ผมขาดไม่ได้ ป่ะหนึ่งขาดเธอขาดใจกันเลยทีเดียว ความสามารถมากถึงมากที่สุด ทั้ง Disable CSS , Display form detail , แสดง Id ของ element ต่างๆ

นานมาแล้วผมเคยใช้ javascript สลับรูปเอา คือต้องมีสองรูปไว้สลับกัน แต่ถ้าใช้ CSS เราก็ใช้แค่รูปเดียว แถมไม่โหลดช้าด้วยนะ