บทความ IT เจ๋งๆ
5 เคล็ดลับ HTML ที่จะทำให้ Users ของคุณรู้สึกประทับใจ
08-ส.ค.-25
คัมภีร์เทพ IT
เราทุกคนคงอยากสร้าง Website ที่มีความโดดเด่น พร้อมสร้างประสบการณ์ของ Users ที่ยอดเยี่ยมและราบรื่นใช่ไหม? ดังนั้น ลองมาดู 5 เคล็ดลับ HTML ที่จะทำให้ Users ของคุณรู้สึกประทับใจ ได้จากบทความนี้กัน
1. ใช้กล้องจากโทรศัพท์มือถือ
รู้หรือไม่ว่าคุณสามารถให้ Users สามารถถ่ายภาพจาก Website ของคุณได้โดยตรง ไม่จำเป็นต้องใช้ 3rd Party Applications หรือ Permissions พิเศษแต่อย่างใด เพียงแค่ใช้ HTML Attribute ง่าย ๆ
วิธีการทำงาน
- <input type="file"> Element จะช่วยให้ Users สามารถ Upload Files ได้
- การเพิ่ม capture="environment" จะเป็นการสั่งให้ Browser ใช้งานกล้องหลัง
- การใช้ capture="user" จะเป็นการเปิดกล้องหน้าแทน
วิธีนี้เหมาะสำหรับ รูป Profile, การ Upload Document หรือแม้แต่การถ่ายภาพแบบรวดเร็ว
2. เพิ่ม Built-in Color Picker
แทนที่จะให้ Users พิมพ์ Hex Codes (รหัสฐานสิบหก) ลองให้พวกเขาเลือกสีด้วย Built-in Tool ที่เรียบง่ายดูไหม
วิธีการทำงาน
- <input type="color"> Element จะเปิด Color Picker ขึ้นมาเมื่อคลิก
- Users สามารถเลือกสีได้ และ Browser จะแสดง Hex Code (เช่น #ff5733)
วิธีนี้เหมาะอย่างยิ่งสำหรับ Theme, การปรับแต่ง Design หรือ Features ใดก็ตามที่ต้องใช้การเลือกสี
3. ปิดใช้งานการคลิกขวา
หากคุณต้องการป้องกันไม่ให้ผู้อื่น Copy Content หรือ Save รูปภาพของคุณได้ง่าย ๆ คุณสามารถปิดใช้งานการคลิกขวาได้ด้วยเคล็ดลับง่าย ๆ
วิธีนี้ไม่ได้หยุดแค่ Users ที่ตั้งใจจะทำสิ่งนั้น แต่ยังช่วยเพิ่มระดับการป้องกันเล็ก ๆ น้อย ๆ จากการขโมย Content ไปโดยไม่ตั้งใจอีกด้วย
4. ให้ Users พูดแทนการพิมพ์
การพิมพ์อาจทำให้รู้สึกว่าชักช้า ดังนั้นทำไมเราถึงไม่ให้ Users พูดแทนล่ะ ด้วย Attribute เดียว คุณสามารถเปิดใช้งานการป้อนข้อมูลด้วยเสียงลงในแบบฟอร์มของคุณได้
วิธีการทำงาน
- การเพิ่ม x-webkit-speech ลงในช่อง <input> จะเป็นการเปิดใช้งานการแปลงเสียงพูดเป็นข้อความ (Speech-to-Text) ใน Chrome บนโทรศัพท์มือถือ
- Icon ของ Microphone จะปรากฏขึ้นภายในช่องป้อนข้อมูล (Input Box)
- Users เพียงแค่คลิก แล้วพูดสิ่งที่ต้องการ จากนั้นข้อความจะปรากฏขึ้นโดยอัตโนมัติ
วิธีนี้มีประโยชน์อย่างยิ่งสำหรับ Search Bars, Chat Applications หรือ Accessibility Features
5. Refresh หรือ Redirect Page โดยอัตโนมัติ
บางครั้ง คุณอาจต้องการให้ Page ของคุณ Refresh ตัวเองหรือ Redirect Users ภายในไม่กี่วินาที คุณไม่จำเป็นต้องใช้ JavaScript สำหรับขั้นตอนนี้ เพียงแค่ใช้ Meta Tag ที่เรียบง่าย
วิธีการทำงาน
- <meta http-equiv="refresh" content="5"> จะทำการ Refresh Page ทุก ๆ 5 วินาที
- <meta http-equiv="refresh" content="5; url=https://example.com"> จะทำการ Redirect หลังจาก 5 วินาที ซึ่งมีประโยชน์สำหรับ Live Updates, Countdown Pages หรือการนำทาง Users ไปยัง Content ที่ถูกต้อง
สรุป
และนี่ก็เป็น 5 เคล็ดลับ HTML ที่จะทำให้ Users ของคุณรู้สึกประทับใจ ซึ่งเคล็ดลับเล็ก ๆ น้อย ๆ เหล่านี้สามารถช่วยปรับปรุงประสบการณ์ใช้งาน Website ของ Users ของคุณให้ราบรื่นและดียิ่งขึ้น สามารถใช้งานพวกมันกับ Browsers ส่วนใหญ่ได้ และไม่จำเป็นต้องใช้ Libraries หรือ Scripts เพิ่มเติมแต่อย่างใด
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด