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

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

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: ,

2006-09-26

What is Web 2.0

Tim O'Reilly - What is Web 2.0 ?
Design Patterns and Business Models for the Next Generation of Software

via anon

tags:

2006-02-15

2005-06-07

free web design & photos

OSWD (web design templates) & Stock.XCHNG (photos stock)

2004-11-13

DevEdge หายต๋อม

เพิ่งจะรู้นะเนี่ย ตกข่าว

พอดีสองวันก่อนนึกอยากลองเขียน bookmarklet เล่นๆ ก็เอาโค้ดชาวบ้านมาแก้ๆ ลองเล่นดู ทีนี้ก็อยากจะรู้ว่า method เกี่ยวกับ DOM ของ JavaScript มันใช้ว่ายังไงบ้าง ก็จะเข้าไปดูที่ DevEdge นี่แหละ ตามปกติ ปรากฏว่าดูไม่ได้ เห็นแต่หน้าว่างๆ ก็นึกว่าเซิร์ฟเวอร์คงมีปัญหามั้ง ไม่ได้ติดใจอะไร

วันนี้ลองใหม่ ยังไม่ได้แฮะ .. แปลกๆ ละ เลยลองค้นใน Google ดู หาข่าวเกี่ยวกับเรื่องนี้ ปรากฏว่า มันหายไปจริงๆ (ลอง: devedge.netscape.com)

DevEdge เว็บไซต์สำหรับนักพัฒนาของ Netscape ที่มีบทความและเอกสารอ้างอิงดีๆ เกี่ยวกับเว็บเทคโนโลยีมากมาย โดยเฉพาะ JavaScript, DOM, CSS และ Gecko เรียกได้ว่าเป็นที่อ้างอิงหลักสำหรับนักพัฒนาด้านนี้เลยล่ะ (JavaScript นี่ Netscape ก็เป็นคนสร้างมาตั้งแต่แรกด้วย)

พอหายไปปุ๊บ คนก็เดือดร้อนกันถ้วนหน้า (น่าจะใช้คำว่า 'ถ้วนหน้า' มากกว่า 'ทั่วหน้า' นะ) ข่าวจาก MozillaZine เค้าว่าทาง Mozilla.org กำลังพยายามกู้คืนมาอยู่

ระหว่างนี้ ถ้าอยากดูอะไร ก็ไปดูได้ที่ Internet Archive แต่ไฟล์บางอันอาจจะดาวน์โหลดไม่ได้ เพราะว่าไม่ได้ archive เก็บเอาไว้ -- ถ้าเป็นไฟล์เกี่ยวกับ JavaScript ลองไปดูที่นี่ เค้าทำลิงก์ให้โหลดไว้ หรือ ที่นี่

งานนี้ AOL โดนด่าตายไปเลย น่าจ๋งจ๋าน

ป.ล. เขียนเว็บให้ตรงตามมาตรฐานนะครับ มีเว็บอ้างอิงให้ดูแล้วนะ

2004-11-11

Standard-compliant Web Design

มีเบราเซอร์ที่ทำตามมาตรฐานแล้ว ก็ต้องมีเว็บที่ทำตามมาตรฐานด้วย -- ไม่งั้นก็ไม่มีใครใช้

Standard-compliant web browser (like Firefox, Konqueror, Mozilla Suite, Netscape, Opera, and Safari) goes best with standard-compliant website.

Promoting standard-compliant browser alone is not enough. To gaining more momentum, and also general web audiences "peace of mind", we have to further promoting the web standards.

The more webs comply to the standards, the less trouble the user will faced with standard-compliant browsers -- the easier for users to switch.

For developers, here're few good books on designing website to comply with web standards: Eric Meyer on CSS, Designing with Web Standards, and HTML & XHTML: The Definitive Guide. Also please refers to the standard bodies like W3C, OASIS, etc.

WaSP: "The Web Standards Project is a grassroots coalition fighting for standards that ensure simple, affordable access to web technologies for all."

Btw, the standard encoding for Thai characters on the Internet (e.g. for webpages) is TIS-620. Read more about it, here. Or if your page is going to be multilingual, just use UTF-8.

charset ของตัวอักษรไทย คือ TIS-620 เขียนเว็บไทยทุกครั้ง อย่าลืม ตั้งให้ถูกต้อง

Use W3C Markup Validation Service to check if your web page is conform to web standards or not. ตรวจสอบว่าหน้าเว็บของคุณ เขียนขึ้นมาตรงตามมาตรฐานรึเปล่า

Update: แก้ทุก "complaint" เป็น "compliant", ขอบคุณพี่เทพครับ.