วิธีเอาฟอนท์มาใช้งานบนเว็บไซต์ ผ่าน @font-face

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

ชื่อฟอนท์ “TH SarabunPSK” เป็นฟอนท์จาก สำนักงานส่งเสริมอุตสาหกรรมซอฟต์แวร์แห่งชาติ(องค์การมหาชน) จากโครงการ 13 ฟอนท์แห่งชาติ ซึ่งเผยแพร่ และแจกฟรีให้ประชาชน และหน่วยงานต่างๆ ได้ใช้ ตามมติ ครม. (อ้างอิง: http://www.sipa.or.th/ewt_news.php?nid=481&filename=index)

แต่ปัญหาก็คือ ฟอนท์ TH SarabunPSK นั้น ไม่ได้รับการติดตั้งไว้ในเครื่องคอมพิวเตอร์โดยทั่วไป ทั้งในประเทศไทย และทั่วโลก ซึ่งหากมีคนเปิดเว็บไซต์ของเรา แล้วในเครื่องคอมพิวเตอร์ของเขาไม่มีฟอนท์นี้อยู่ ตัวโปรแกรม Web Browser จะเลือกฟอนท์มาตรฐานขึ้นมาใช้งานโดยอัตโนมัติ เช่น Arial หรือ Tahoma เป็นต้น

ทีนี้จะทำยังไงดีล่ะ ? เรามีวิธีการผนึกฟอนท์สวยๆ ของเราให้แสดงผลได้อย่างถูกต้อง และเหมือนกันไม่ว่าคุณจะเปิดเว็บไซต์จากที่ใดๆ ก็ตาม ดังนี้

Continue reading “วิธีเอาฟอนท์มาใช้งานบนเว็บไซต์ ผ่าน @font-face”

ซ่อน Context Menu เวลาคลิกขวาบนหน้าเว็บ

How to hidden the context menu when right clicking on web pages. วิธีการซ่อนเมนู เมื่อคลิกขวาบนหน้าเว็บไซต์

ป้องกันการ Copy Paste ข้อความ

How to prevent user to copy and paste content from your web pages. วิธีการป้องกันไม่ให้ user ทำการ copy paste ข้อความบนหน้าเว็บไซต์

ป้องกัน Text Selection บนเว็บไซต์

Javascript to disable or prevent to text selection when drag and drop on webpage มารู้จักการเขียน Javascript เพื่อป้องกันไม่ให้ คนเข้าชมเว็บไซต์สามารถ select text บนเว็บไซต์ของเราได้

แทรกโค้ดด้านบนนี้ลงไปในหน้า html ในส่วนของ <head>…</head> เพียงเท่านี้ ก็จะป้องกันไม่ให้คนเข้าชมเว็บไซต์สามารถ drag text selection บนหน้าเว็บได้แล้ว

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

เทคโนโลยีที่มีอยู่ใน HTML5

8 Technologies in HTML5

จากบทความครั้งก่อน “HTML5 คืออะไร ?” มาวันนี้เราจะมาพูดกันต่อว่า HTML5 เขามีเทคโนโลยีอะไรฝังอยู่ภายในบ้าง และจะทำให้เกิดความเปลี่ยนแปลงต่อการนำเสนอบนเว็บไซต์โลกออนไลน์ได้อย่างไร

อันที่จริงแล้ว HTML5 นี้ก็มีเทคโนโลยีที่พัฒนาต่อออกมาจาก HTML4 เวอร์ชั่นก่อน โดย HTML5 นั้นนำเอาเทคโนโลยีที่เคยอยู่ในโปรแกรมแบบ Native ย้ายมาลงไว้ในโลกของเว็บไซต์ ทำให้มันมีข้อดีของทั้งสองโลก คือ ฟีเจอร์ที่มากมายและประสิทธิภาพในการทำงานจากโลก Native มาผสานกับความคล่องตัว เข้าถึงได้จากทุกที่ของเว็บเดิมที ภาษาตระกูล HTML/SGML เป็นภาษาที่ออกแบบมาเพื่อ “อธิบาย” หรือ “นิยาม” การแสดงผลข้อมูล เช่น ตัวหนา ตัวเอียง หัวเรื่อง ลิงก์ ซึ่งการใช้งานก็คือเอาไว้ทำเอกสารที่เชื่อมโยงกัน (ตัวอย่างคือ Help ของวินโดวส์)

พอมีอินเทอร์เน็ต HTML ก็ทำหน้าที่สร้าง “โบรชัวร์อิเล็กทรอนิกส์” ที่สามารถดูได้จากระยะไกล ถึงแม้ตอนแรกจะมีแต่ข้อความ แต่ระยะต่อๆ มาเทคโนโลยีเว็บก็พัฒนามากขึ้น สามารถใส่ภาพ เสียง วิดีโอ (ผ่านปลั๊กอิน) มีแนวคิดเชิงโปรแกรมอย่างจาวาสคริปต์เข้ามา (จริงๆ มี VBScript ด้วยแต่ดังสู้ไม่ได้) ในยุคของ HTML3

พอเป็นยุคของ HTML4 เราเริ่มเห็นเว็บแบบที่ตอบโต้ได้ มีความเป็นอินเตอร์แอคทีฟมากขึ้น ซึ่งเกิดจากเทคโนโลยีอย่าง AJAX, XMLHttpRequest ทำให้เว็บมีความใกล้เคียงกับ “แอพ” แบบดั้งเดิมมากขึ้น อย่างไรก็ตาม มันยังสู้แอพแบบ native ไม่ได้ เพราะยังขาดฟีเจอร์สำคัญๆ อีกหลายอย่าง เช่น การทำงานออฟไลน์ กราฟิกสามมิติ ฯลฯ นั่นเอง

สุดท้ายแล้ว HTML5 จะช่วยให้เรานำเทคโนโลยีจากโลกของเว็บ มาสร้างแอพที่มีลักษณะใกล้เคียงกับแอพแบบ native (ไม่ว่าจะบนพีซีหรือมือถือได้) ตัวอย่างที่ชัดเจนที่สุดในตอนนี้คือ PhoneGap ซึ่งเป็นเครื่องมือพัฒนาแอพมือถือด้วย HTML5

Continue reading “เทคโนโลยีที่มีอยู่ใน HTML5”

HTML5 คืออะไร ?

โลกเปลี่ยนไป ยุคสมัยเปลี่ยนไป วิธีการสร้างเว็บไซต์ก็เปลี่ยนไปเช่นเดียวกัน แต่ก่อน เราเคยสร้างเว็บไซต์จาก notepad จาก editplus จาก dreamweaver ด้วยภาษา html ปกติ.. เวอร์ชั่น 3, 4 แต่วันนี้ html พัฒนาขึ้นมาอีกครั้งเป็น html5 (ความจริงเขา launch มานานแล้ว)

HTML5 Logo

HTML5 คืออะไร ?

HTML5 คือ ภาษามาร์กอัพ (markup) สำหรับการเขียนเว็บไซต์เวอร์ชั่นล่าสุด ที่ถูกพัฒนาโดย WHATWG (The Web Hypertext Application Technology Working Group) โดยได้มีการปรับเพิ่ม Feature หลายๆอย่างเข้ามาเพื่อให้ผู้พัฒนาสามารถใช้งานได้ง่ายมากยิ่งขึ้น

Continue reading “HTML5 คืออะไร ?”

ปัญหา Share Content บน Facebook แล้วเป็นภาษาต่างดาว

พอดี ลองทำเว็บไซต์ แล้วทดสอบ share content ขึ้นไปบน facebook แล้วปรากฎว่า กลายเป็นภาษาต่างดาว (อับราฮัม ยึกยือ)

เลยเช็คดูหลายอย่าง ทั้ง collation ของ database ก็เป็น UTF8 , ข้อมูลที่อยู่ในฐานข้อมูล ก็เป็นภาษาไทยปกติ , charset บน html ก็ตั้งเป็น tis-620 (ก็ไม่ได้) เป็น utf-8 (ก็ไม่ได้) , ซ้ำร้าย ดันมีผลเกิดขึ้นคือ design หน้าเว็บเปลี่ยน คือ มันจะ ร่นลงมาจากด้านบน เหมือนกับว่า มีอักขระอะไรอยู่ก่อน content น่ะ.. แต่เช็คหลายอย่างแล้วก็ไม่มี..

สุดท้าย ลองเช็คอีกรอบ ปรากฎว่า ถ้าเราจะทำให้มันเป็น utf8 ก็ต้องทำไปทั้งหมดเลย นั่นก็คือ

  1. <meta http-equiv=’Content-Type’ content=’text/html; charset=utf-8′ />
  2. ตอนที่ connect database ก็ต้อง SET NAMES utf8 ด้วย
  3. แล้วใน database ก็ต้อง collation เป็น UTF8 ไปด้วย
  4. ส่วนสุดท้ายที่สำคัญมากก็คือ เวลาเซฟไฟล์แล้ว ดูด้วยว่า Encoding ของไฟล์เป็น UTF8 ด้วย เพราะปกติ มันจะเป็น ANSI