ย้ายบล็อกไปที่ bact.cc แล้วนะครับ

พ.ร.บ.คอมพิวเตอร์
หยุด ร่างพ.ร.บ.คอมพิวเตอร์
พื้นที่เก็บข้อมูลออนไลน์ ฟรี 2GB จาก Dropbox (sync กับ Windows, Linux, Mac, iPhone, Android ฯลฯ ได้)
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

2009-12-07

Web Character Simplification Chart 0.1 #opendream

ก่อนจะประมวลผลข้อความ เราจำเป็นต้องทำความสะอาดข้อความเสียหน่อย ทั่ว ๆ ไปที่จำเป็นต้องทำ ก็เช่น แปลง new line (\r\n หรือ \n), หรือแปลงให้อยู่ในชุดอักขระ (character set) ที่โปรแกรมใน processing pipeline จะทำงานได้ เช่นแปลง ä เป็น ae หรือแปลง “ ” เป็น " ", หรือการ normalize ลำดับอักขระ เช่น น.หนู+สระอำ+ไม้โท → น.หนู+ไม้โท+สระอำ, หรือไปถึงขั้นซับซ้อน อย่างแก้ตัวสะกด

(กรณีเป็นงานลักษณะจดหมายเหตุ หรือ archival ก็อาจจำเป็นต้องเก็บตัว raw text ก่อนแปลงเอาไว้ด้วย เพราะการแปลงอาจจะ(และมักจะ)เป็น lossy คือแปลงไปแล้วแปลงกลับมาได้ไม่เหมือนเดิม เช่นตัวอย่างข้างบน ที่แปลง “ ” เป็น " ")

การทำความสะอาดข้อความ หรือ text cleansing นี้ มีจุดประสงค์หลายอย่าง อย่างหนึ่งก็เพื่อเพิ่มความต้องตรงกัน (integrity) ภายในเนื้อข้อความ ซึ่งกรณีถ้าจะเอาข้อความนี้ไปประมวลผลทางสถิติ เช่นเอาไปฝึกเครื่อง (machine learning) ความต้องตรงกันภายในข้อความนี้ ก็มีผลต่อความแม่นยำของตัวแบบที่จะฝึกได้

จุดประสงค์อีกอย่างของการทำความสะอาดข้อความ ก็เพื่อลดความซับซ้อนของการประมวลผลด้วย ไม่ว่าจะเป็นการลดความซับซ้อนของตัวแบบ หรือการลดความซับซ้อนของเงื่อนไขในโปรแกรม เช่น ทำให้เขียน regular expression ได้สะดวกขึ้น

สำหรับแอปพลิเคชั่นการค้นหาและการทำดัชนี การทำความสะอาดข้อความ รวมไปถึงการทำให้ข้อความมันซับซ้อนน้อยลง (ไม่ว่าจะในทางลำดับอักษร ซึ่งจะมีผลต่อขนาดของ word set หรือการลดขนาดของ character set ด้วยการยุบตัวอักษรบางตัวเข้าด้วยกัน) จะช่วยให้ดัชนีมีขนาดเล็กลงด้วย และถ้าใช้ประกอบกับตารางการแทนอักษร/คำ (replacement table) ก็จะช่วยให้โอกาสการเจอคำที่ค้นหา มีมากขึ้น เนื่องจากลดผลกระทบจากการสะกดไม่ตรงกัน (spelling variations) (จริง ๆ จะใช้ replacement table อย่างเดียวก็ได้ แต่กรณีนั้น search space ก็จะใหญ่ขึ้น มีผลต่อประสิทธิภาพ)

ในตอนที่เขียน JavaScript สำหรับใช้กับ Roti ก็คิดไว้าว่าจะเจอปัญหาลักษณะนี้ ซึ่งจะมีผลต่อการคำนวณหาบล็อกโพสต์ที่ใกล้เคียง (ดูตัวอย่างได้ที่ท้ายโพสต์นี้ ตรงที่เขียนว่า 'roti thinks you may like these posts...') เลยให้จาวาสคริปต์ทำความสะอาดข้อความนิดหน่อย ก่อนจะส่งไปเซิร์ฟเวอร์

เนื่องจาก Roti ทำงานกับเอกสารเว็บ ซึ่งมี 'ปัญหา' อีกอย่าง คือการใช้ HTML/XML entities แทนตัวอักษร เช่นใช้ & เพื่อแทนอักษร & ดังนั้นก่อนจะทำอะไรกับข้อความ จึงควร decode entities พวกนี้ออกมาก่อน

กรณีของ HTML entities ถ้าใช้ PHP สามารถใช้ฟังก์ชั่น html_entity_decode($text) ได้เลย แต่ในจาวาสคริปต์มันไม่มี (หรือผมไม่รู้ว่ามันมี) ก็เลยใช้แทนที่สตริงแบบบ้าน ๆ ไป

ตารางข้างล่างปรับแก้มาจากตัวจาวาสคริปต์ roticlient.js และใส่รายละเอียดเพิ่มเติมนิดหน่อย ยินดีรับคำแนะนำครับ

possible replacements ในตารางนั้น เป็นเพียงคำแนะนำตั้งต้น การจะเลือกใช้อะไร ขึ้นอยู่กับแอปพลิเคชั่นด้วย เช่น ตัวเลือกที่เหมาะกับการเอาไปทำดัชนี ก็อาจจะไม่เหมือนกับตัวเลือกที่เหมาะกับการเอาไปแสดงผล เช่น zero-width space ถ้าทำดัชนี การแทนด้วย space น่าจะเหมาะ แต่ถ้าจะเอาไปแสดงผล การลบมันทิ้งไปเลย น่าจะเหมาะกว่า

Web Character Simplification Chart 0.1

Throw away extra semantics for a simpler text processing. This is only a suggestion. Apply to your needs accordingly.

Character NameCharacterUnicodeASCII range?HTML EntitiesPossible Replacements
Space  yes  
Non-breaking space U+00A0yes (space)
Zerowidth space U+200B  (space), <delete>
 
Soft hyphen U+00ADyes&shy;<delete>
 
Hyphen-Minus-U+002Dyes  
Hyphen-U+2010  - (hyphen-minus)
Minus signU+2212 &minus;-
Figure dashU+2012  -
En dashU+2013 &ndash;-, --
Em dashU+2014 &mdash;-, ---
Horizontal barU+2015  -
Armenian hyphen֊U+058A  -
Hebrew magaf־U+05BE  -
Mongolian todo hyphenU+1806  -
Japanese chōonpuU+30FC  -
 
Hyphen bulletU+2043  * (star), -, <delete>
Small bulletU+2022  *, -, <delete>
 
Tilde~U+007Eyes&tilde; 
Swung dash˜U+2053  ~ (tilde)
Wave dashU+301C  ~
Wavy dashU+3030  ~

ด้านล่างนี้ เป็นตัวอย่างโค้ดที่แทนที่ตัวอักษรต่าง ๆ จาก roticlient.js

return str.replace(/(&nbsp;|&#8208;|&#8210;|&ndash;|&#8211;|&mdash;|&#8212;|&#8213;|&#8275)/g, ' ') .replace(/(&shy;|&#xAD;|&#173;|&#x200B;|&#8203)/g,'') .replace(/[\u200b\u200d\u00ad]/g, '') .replace(/[!\?;:"'`“”^\*\+\-_\(\)\[\]\{\}#@&~\.,\\\/\|]/g, ' ') .replace(/\s+/g, ' ');

ติดตามการพัฒนา Roti ได้จาก Opendream's blog

(โพสต์นี้ให้ @pittaya เนื่องจากเคยถามเอาไว้เมื่อนานเมือกแล้ว)

technorati tags: , ,

2007-12-12

Provinces of Thailand HTML selection box

HTML option's values according to TIS 1099-2535 Standard for Province Identification Codes for Data Interchange

ค่า value ของแต่ละ option ตาม รหัสจังหวัดเพื่อการแลกเปลี่ยนข้อมูล (มอก. 1099-2535)

download: จังหวัดในประเทศไทย HTML selection box

technorati tags: , ,

2007-12-06

get semantic with HTML 5

Lachlan Hunt รีวิว HTML 5 ให้เราดูกันว่าจะมีอะไรเปลี่ยนแปลงไปในข้อกำหนด HTML รุ่นต่อไปบ้าง พร้อมตัวอย่างและภาพประกอบ (โดย Kevin Cornell) เข้าใจง่าย

เมื่อเทียบกับ HTML 4 (รุ่นปัจจุบัน) แล้ว HTML 5 นอกจากจะมีแท็กใหม่ ๆ ที่รองรับเทคโนโลยีเว็บที่พัฒนาขึ้น เช่นแท็กเกี่ยวกับไฟล์ภาพเคลื่อนไหวและเสียงแล้ว อีกจุดสำคัญของ HTML 5 ก็คือ มันจะมี โครงสร้าง (structure) และ ความหมาย (semantic) ที่ชัดเจนขึ้นด้วย

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

ปัจจุบันนี้ นักออกแบบ/พัฒนาเว็บส่วนหนึ่ง พยายามที่จะเขียนโค้ดหน้าเว็บที่แยกเอา หน้าตา (presentation) ออกมาจาก เนื้อหา (content) ไม่ให้ปะปนกัน โดยส่วนของหน้าตาจะนำไปใส่ใน Cascading Style Sheets (CSS) ส่วนเนื้อหาก็จะอยู่ในเซตย่อยของ HTML ที่ไม่ใช้แท็กที่เกี่ยวข้องกับหน้าตาเช่น center, b, i (โดยถ้าอยากเน้นข้อความไหน ก็ให้ใช้ strong และ em แทน)

นอกจากการแยกหน้าตากับเนื้อหาออกจากกันแล้ว ก็ยังมีความพยายามที่จะเขียนโค้ด HTML ที่มีโครงสร้างเป็นระบบขึ้น โดยอาศัยแท็กจำพวก h1, div และ li เป็นต้น และพยายามใส่ความหมายเข้าไปในโค้ด โดยอาศัยแอตทริบิวต์จำพวก class, rel และ id โดยกลุ่มนี้จะเรียกรวม ๆ ว่า Semantic HTML โดยมีแนวคิดหลักอย่างน้อยสองแบบคือ POSH และ Microformats ซึ่งทั้งสองอย่างนี้สามารถใช้ร่วมกันได้ โดยอย่างแรกจะเป็นคำแนะนำกว้าง ๆ สำหรับหน้าเว็บทั้งหมด ส่วนอย่างหลังจะเป็นข้อกำหนดที่ชัดเจนสำหรับข้อมูลแต่ละประเภทไปเลย — กล่าวโดยรวมคือ ทั้งหมดนี้เป็นการประยุกต์ใช้ HTML รุ่นปัจจุบันที่มีอยู่ ให้บันทึกความหมายบางอย่างได้

HTML 5 จะช่วยให้รูปแบบการเขียนโค้ดลักษณะ POSH เป็นไปด้วยความสะดวกมากขึ้น เขียนได้ตรง ๆ ขึ้น (ลองดูตัวอย่างจาก A Preview of HTML 5)

ร่างข้อกำหนดของ HTML 5 เริ่มพัฒนามาตั้งแต่ พ.ศ. 2547 และปัจจุบันยังอยู่ในระหว่างการพัฒนาโดยคณะทำงานสองกลุ่มคือ W3C HTML WG และ WHATWG ร่วมมือกัน — โดยคาดว่าจะสามารถประกาศเป็น W3C Recommendation ได้ประมาณปี พ.ศ. 2565 (อีกประมาณ 15 ปี! – ดู FAQ) อย่างไรก็ตาม ความสามารถของ HTML 5 จะค่อย ๆ ถูกนำไปใช้ในเว็บเบราว์เซอร์และเว็บไซต์ต่าง ๆ ทีละน้อย ๆ ตัวอย่างเช่นเว็บเบราว์เซอร์จำนวนหนึ่งในปัจจุบันก็รองรับแท็ก canvas หรือความสามารถด้าน autodiscovery แล้ว

ถ้าสนใจเรื่อง Semantic HTML (ซึ่งคุณสามารถนำแนวคิดนี้ไปใช้ได้ตั้งแต่ตอนนี้เลย ไม่ต้องมาตรฐานใหม่ ไม่ต้องรอเบราว์เซอร์ใหม่) ลองไปดูที่เว็บไซต์ semantichtml.org หรือค้นเว็บด้วยว่า “semantic html” ดู จะพบเว็บไซต์มากมาย ที่แนะนำและพูดคุยเกี่ยวกับเรื่องนี้

ผลพลอยได้อย่างหนึ่ง ที่น่าจะได้จากการเขียนหน้าเว็บตามแนว Semantic HTML ก็คือ โปรแกรมอ่านหน้าจอ (screen reader) สำหรับผู้พิการทางสายตา น่าจะทำงานได้ดียิ่งขึ้น เพราะมีข้อมูลมาช่วยตัดสินใจมากขึ้นในการอ่าน (คิดง่าย ๆ ว่า Semantic HTML เน้นว่าเนื้อหาหมายความว่าอะไร ไม่ใช่ว่าเนื้อหาจะถูกวาดยังไง การ‘อ่าน’โดยตรงจากเนื้อหาจริง ๆ ย่อมง่ายและถูกต้องกว่าการอ่าน+ตีความจากภาพวาดอยู่แล้ว)

[ ลิงก์ A List Apart | ผ่าน OSNews.com ]

technorati tags: ,

2007-10-11

Thammasat University international students 2006-2007

ทดสอบความรู้ HTML table — Tables in HTML documents, HTML 4.01 (W3 Recommendation)
นอกจากตัวนี้แล้ว ก็ยังมี Tables modules ใน XHTML2 (W3C Working Draft) และ Tabular data ใน HTML 5.0 (working draft) ที่อ่านแล้ว งง เอาไว้ก่อน - -"

และในโอกาสที่สภามหาวิทยาลัยธรรมศาสตร์อนุมัติจัดตั้ง “วิทยาลัยนานาชาติปรีดี พนมยงค์” เราก็จะเอาข้อมูลนักศึกษานานาชาติของมธ.มาเล่นกัน — Data taken from TU's Office for International Affairs


Table 1. Number of international students by field of study
Organization/Field of study Number of students
Total (17 fields of study) 309
Office of International Affairs 90
Thai Studies (TS) 90
Commerce and Accountancy 89
Business Administration (BBA) 87
Finance (MIF) 1
Marketing (MIM) 1
Sirindhorn International Institute of Technology 71
Communication 14
Civil Engineering 13
Common and Graduate Studies 10
Management Technology 9
Mechanical Engineering 9
Chemical Engineering 8
Industrial Engineering 8
Economics 23
Economics (BE) 23
Political Science 20
International Relations (MIR) 20
Liberal Arts 12
British and American Studies (BAS) 11
Southeast Asian Studies (SEAS) 1
Engineering 4
Civil Engineering 2
Mechanical Engineering 2

Table 2. Number of international students by continents
Continent Number of students
Americas 128
Belize, Canada, Mexico, USA
Europe 110
Austria, Belgium, Denmark, Finland, France, Germany, The Netherlands, Norway, Spain, Sweden, Switzerland, United Kingdom
Asia 65
Bangladesh, Burma, Cambodia, China, Egypt, India, Laos, Malaysia, South Korea, Sri Lanka, Taiwan, Uzbekistan, Vietnam
Oceania 5
Australia
Africa 1
Morocco

Table 3. Top 10 countries of where international students came from
Country Number of students
USA 112
Japan 24
Denmark 21
Germany 21
France 15
Sweden 13
Canada 12
Finland 11
Taiwan 11
Norway 7

ป.ล. [HTML table] เพิ่งรู้ว่า table มี tbody ได้หลายอัน และ tfoot ต้องมาก่อน tbody (ซึ่ง make sense เพราะตัวรับข้อมูลควรจะรู้ข้อมูลเกี่ยวกับตารางให้ครบทั้งหมดก่อน ก่อนจะรับข้อมูล tbody ที่เหลือ ซึ่งอาจจะใหญ่มาก ๆ) — ลองกดดูซอร์สโค้ด

technorati tags: , , ,