สวัสดีครับ ก้าวสู่ยุค 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 ลองเอาไปปรับใช้ให้เหมาะกับอินเตอร์เฟสในหน้าเว็บครับ

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

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