Category Archives: XHTML

การเขียน XHTML

HTML กับ XHTML

Posted on by Sitthiphorn Anthawonksa

กลับมาที่ html กับ xhtml กันต่อ สองภาษานี้คล้ายกันแต่ไม่เหมือนกันและถูกแยกออกเป็นคนละภาษา แต่สร้างขึ้นมาจากโครงสร้างภาษาเดียวกัน งงไหมครับ ถ้างง ก็นี่เลยครับ “สองภาษานี้เขียนไม่เหมือนกัน อย่าเอาไปผสมกัน” ง่ายๆ เลย ถึงแม้ว่า DOCTYPE

คำว่ามาตรฐานกับความนิยมในสองอย่างนั้นแตกต่างกันยังไงผมขอเล่าความสั้นๆ ก่อนนะครับ ว่า html กับ xhtml จะอยู่ร่วมโลกกันอย่างไร การจะเขียนอะไรลงไปในหน้าเอกสาร หรือหน้าเว็บนั้นให้เหลือบมองไปที่ DOCTYPE กันก่อนว่าเอกสารนั้นอยู่ภายใต้ภาษาอะไร ประเภทไหน ถึงแม้ว่าเราจะใช้ Adobe Dreamweaver ในการเขียนหน้าเอกสารขึ้นมาก็ตาม ขอให้ลืมการแสดงผลหน้าเอกสารของ IE6 และ IE7 ไปก่อน การที่เราเขียนเอกสาร วางโครงสร้างให้ถูกต้องตามหลักมาตรฐาน ใน User Agents ที่ได้มาตรฐานจะ Render หน้าเอกสารออกมาได้อย่างถูกต้อง แล้วทำไม IE แสดงผลไม่ถูกต้อง ก็เพราะว่า IE6 และ IE7 ผลิตขึ้นมาไม่ได้เข้าหลักมาตรฐานตามที่ W3C กำหนดนั่นไงหละครับ จึงแสดงผลหน้าเอกสารที่เขียนแบบ ผิดๆ ได้ แต่ Firefox หรือ Opera แสดงผลเพี้ยน ก็เพราะหน้าเอกสารเขียนผิด User Agents ทั้งสองที่ยึดหลักมาตรฐานก็แสดงผลออกมาผิดๆ นั่นเอง ในขณะเดียวกัน ที่ผ่านมา คนนิยมใช้ IE กันทั่วโลก ความถูกต้องจึงถูกละเลย จะไปสนใจบราวเซอร์อื่นทำไม ในเมื่อไออีแสดงผลได้ถูกต้องใช่ไหมครับ แต่เราลืมไปว่า สักวันข้างหน้าความจริงจะปรากฎ เฉกเช่นชั่วโมงนี้ เมื่อบราวเซอร์อื่นๆ ที่ไม่ใช่ ไออีเริ่มแย่งส่วนแบ่งทางการตลาดและคำว่า Web Standards เริ่มแพร่กระจาย อ้าแขนต้อนรับ Semantic Web เพื่อที่จะไปยุค Web 3.0 ยุคที่ความสำคัญของทุกอย่างไม่ว่าจะหน้าบ้านหรือหลังบ้านเท่าเทียมกันหมด เข้าถึงข้อมูลได้เหมือนๆ กัน

รู้จักกับ Microformats

Posted on by Radiz Sutthisoontorn

ไม่ทราบว่าเคยได้ยินกันบ้างหรือยังกับคำคำนี้ Microformats และ งงกันบ้างไหมครับว่ามันคืออะไร ทำงานอย่างไร สำหรับเราหลาย ๆ คนคงเป็นเรื่องใหม่ ที่จะเข้ามาปั่นหัวให้วุ่นวายกันอีกแน่ Microformats เป็น “กลุ่มของข้อมูล ที่นำเอามาตรฐานเข้ามาใช้ ที่ถูกออกแบบโครงสร้างมาให้เป็นประโยชน์ต่อ มนุษย์ มากกว่า จักรกล” อย่างไรนะเหรอ? ในอนาคตอีกไม่นานนี้ (ในประเทศไทย) จะได้รู้ถึงคุณประโยชน์ของมันอย่างแน่นอน เมื่อ ICT รู้จักทำประโยชน์ให้ประเทศ รู้จักมองถึงปัญหาที่เกิดเกี่ยวกับโลก cyber อย่างแท้จริง รู้จักมองถึงประชาชนในประเทศ และ รักษาสิทธิ์ที่พวกเราพึงจะได้มากกว่านี้ … ทำไมผมถึงพูดออกมาอย่างนั้น ทำไมน่ะเหรอ เอาไว้จะสาธยายให้ฟัง หลังจากอธิบายเกี่ยวกับ Microformats ก่อนก็แล้วกันครับ

Microformats นั้นหมายถึงการใช้ Standard ที่เรารัก (ไม่รู้ว่ารักจริงไหมนะ เฉพาะชาว ThaiCSS หรือเปล่า?) ให้มีความหมายมากที่สุด (semantic มากที่สุด) เท่าที่จะทำได้ มองง่าย ๆ ไปเลยเสียว่า มันคือแบบฝึกหัดในการทำให้ Website ของคุณนั้นมี Accessibility ที่สูง ๆ นั่นเอง Microformats ใช้ XHTML tags หลาย ๆ ตัวเช่น address, cite และ blockquote และ XHTML attributes หลาย ๆ ตัวเช่น rel, rev และ title เอามาทำให้ข้อมูลของคุณนั้นเกิดความหมาย เกิดประโยชน์มากที่สุด (ถ้าอ่านมาถึงตรงนี้ คุณมีความคิดในใจเกิดขึ้นว่า อะไรของมันวะเดี๋ยว tags เดี๋ยว attributes ให้ลองอ่าน ความหมายของมันในกระทู้นี้ Microformats ใช้ยากไหม? ไม่ยากครับ มันใช้ tags และ attribute ที่เราคุ้นเคยนี่แหละ นำมาใช้ในทางที่ดีที่สุด เกิดประโยชน์ที่สุด

การจัดการ font ในเอกสาร XHTML โดยใช้ CSS

Posted on by Radiz Sutthisoontorn

เป็นที่ทราบกันอยู่แล้วว่าขนาด default ของ font ในแต่ละ browser เวลาที่เรากด small, smaller, medium, larger และ largest นั้นอยู่ในหน่วย % คือ 90%, 100%, 110% และ 120% แต่ขนาด zoom นั้นจะเป็นเอกลักษณ์ของแต่ละ browser

HTML5 XHTML2 และ อนาคตของเวป (3)

Posted on by Radiz Sutthisoontorn

W3C กับ HTML

W3C ได้เปิดโอกาสให้กลุ่มผู้พัฒนาอื่น ๆ ที่สนใจได้เข้ามาพัฒนา HTML ต่อจากตัว W3C เอง ซึ่งทาง W3C เองนั้นจะเริ่มการพัฒนา XHTML 2  ต่อ โดยกลุ่มที่นำ HTML ไปพัฒนาต่อนี้ได้แยกออกจาก W3C โดยสิ้นเชิง และ ประกาศสถาปนาตนเป็นองค์กรใหม่ภายใต้ชื่อว่า WHATWG ดังใน บทความตอนก่อนหน้าที่ผมได้กล่าวเอาไว้ ซึ่ง WHATWG นี้นำโดย Chris Wilson ผู้พัฒนา Platform ของ Internet Explorer และ Dan Connolly แห่ง W3C (ทีนี้ พอจะได้คำตอบในสิ่งที่ผมถามไว้คราวที่แล้วแล้ว หรือ ยัง ให้ลองอ่าน บทวิจารณ์ของ พร ไม่ว่าจะใน blog ส่วนตัว ใน บทความก่อนหน้าของผม และ ในบทความ web standard บนเวทีการเมือง ซึ่งล้วนแล้วเกี่ยวเนื่องกันทั้งสิ้น)

HTML5 XHTML2 และ อนาคตของเวป (2)

Posted on by Radiz Sutthisoontorn

โลกปัจจุบัน XML

XHTML ส่วนใหญ่ในเวปที่เราเห็น ๆ กันอยู่นั้นใช้ content type แบบ "text/html" พูดง่าย ๆ มันก็ยังเป็น ต้มยำ tag ที่ทำงานในแบบ XML ไม่ได้เป็น XML ไปเสียทีเดียว

ทำไมน่ะเหรอ? เพราะถ้าเป็น XML จริง ๆ นั้นถ้ามี error แม้เพียงแค่จุดเล็ก ๆ จุดเดียวมันก็จะไม่แสดงผลใดใดเลยทันที จะบอกแต่ว่ามี error อยู่ที่ใด ซึ่งบางทีนั้นก็ดูจะเรื่องมากไปหน่อยสำหรับการนำมาใช้งานจริง ๆ ซึ่งคุณลองคิดดูว่าถ้าเราแบ่งงานกันเป็นส่วน ๆ ในทีมแล้วเมื่อเรานำงานของแต่ละคนที่ทำนั้นเข้ามารวบรวมกัน เราคงต้องลุ้นกันตัวงอ ว่าจะมีส่วนของใครที่ผ่าน และ ส่วนของใครที่นำพาความหายนะมาสู่เพื่อนพ้อง นั่นเป็นเหตุผลว่าทำไมความนิยมของมันจึงลดถอยลงคงเหลือไว้ใช้เพียงบางกรณี ต่างกับเจ้าต้มยำ Tag ของเราถึงแม้ว่าเราจะไม่รู้ตัวว่าเราน่ะ code ไม่ผ่านมาตรฐาน แต่มันก็ยังน่ารักแสดงผลให้เราเห็นอยู่ (อืม ปลื้มดีมั้ยนะ)

ปัญหาใหญ่ คือ เราจะทำไงให้ต้มยำเรามันทำงานแบบ XML จริง ๆ จัง ๆ ซึ่งยังไง๊ ยังไง ก็ทำไม่ได้เพราะ IE6 มันไม่สนับสนุน content type ที่ XHTML 1.0 ต้องใช้จริง ๆ ซึ่งนั่นก็คือ "application/xhtml+xml" ซึ่งเป็นที่ทราบกันแล้วว่าไม่ว่าจะประกาศอะไรอย่างไร IE6 มันก็ดึง Engine เดิมมาประมวลผลในการแสดงผล หาเปลี่ยนไปตามค่า content type ที่เราประกาศไม่ แถมยังไม่สนับสนุนคำสั่ง XML ทั่วไปด้วย ลามไปถึง XHTML namespace อีกต่างหาก และ แค่นั้นยังไม่พอ มันยังไม่รู้จักความเป็น semantics ของแต่ละ elements ใน XHTML ด้วย (เกลียดมันบ้างรึยัง) แถมนิดนึง default browser style sheet ก็เปลี่ยนไม่ได้ด้วยนะ

อย่างไรก็ตาม XHTML 1.0 อนุญาติให้ใช้ content type แบบ "text/html" ซึ่งหมายถึงมัน อนุโลมให้ตัวมันเองสามารถทำงานเหมือนกับ HTML 4.01 ได้ (เพื่อป้องกันการแสดงผลที่ผิดพลาด หรือ การไม่เข้าใจ content type ของบาง browser) ซึ่งนั่นหมายถึง มันก็สามารถเป็นต้มยำ tag ได้เฉกเช่นเดียวกับ HTML 4.01 หรือ ไม่จำเป็นจะต้องทำอะไรเป็นกฏเป็นเกณฑ์เหมือน XML ไปหมด

HTML5 XHTML2 และ อนาคตของเวป (1)

Posted on by Radiz Sutthisoontorn

เพื่อน ๆ หลาย ๆ คนที่ทำงานในสายงานเดียวกันกับผม (หมายถึง ใน field งานของเวปทั้งหมด) รู้ตัวหรือไม่ว่าเรา ได้ทำงานร่วมกับเทคโนโลยี ที่พัฒนากันมาเนิ่นนาน อย่างไม่รู้เนื้อรู้ตัว (มันก็เปลี่ยนแปลงของมันน่ะนะ แต่บางทีเราก็ไม่รู้ ไม่ว่าจะด้วยสาเหตุใดก็ตาม)

HTML 4.01 ได้ถูกพัฒนาขึ้นมาในปี 1999 และ XHTML 1.0 อีกร่างหนึ่งของ HTML 4.01 ในการทำงานแบบ XML ก็ถูกพัฒนาต่อขึ้นมาในปี 2000 และ ได้ถูกแก้ไขกันอีกทีในปี 2002 นั่นคือ สิ่งที่ผมจะบอกว่า XHTML ไม่ได้เป็นเรื่องใหม่เลยจริง ๆ พูดกันง่าย ๆ ว่าเทคโนโลยีเหล่านี้นั้น ถูกพัฒนามาแล้วไม่ต่ำกว่า 8 ปี

อาจจะพูดได้ว่า HTML 4.01 เป็นพื้นฐานที่ดีพอสมควรที่นักพัฒนา นักสร้าง นักออกแบบ website นั้นสมควรที่จะต้องเรียนรู้ และ HTML 4.01 ก็เป็นเครื่องมือหากินที่ดีตลอดระยะเวลา 8 ปีที่ผ่านมา แต่เวลามันเปลี่ยนไป อะไร ๆ มันก็ไม่มีที่จีรังยั่งยืน มันก็ต้องเปลี่ยนแปลง หรือ ค่อย ๆ เปลี่ยนไปบ้างเล็ก ๆ น้อย ๆ ตามกาลเวลา และ ณ บัดนี้ เชื่อว่า ทุก ๆ คนคงได้เห็นว่า HTML 4.01 นั้นถูกพัฒนามาในทางที่ผิด หรือ ครอบคลุมความต้องการ หรือ ให้ประโยชน์กับเราได้ไม่เต็มที่ หรือ ดีเท่าที่ควรแล้ว จึงเกิดเป็นคำถาม ในใจของทุก ๆ คน ต้องมีบ้างไม่ว่าผมหรือใคร ว่าจะมีทางที่มันจะพัฒนาขึ้นมาได้อีกไหม? หรือ มันต้องหยุดเพียงเท่านี้ แล้วเราต้องไปพึ่งพาในสิ่งใหม่

XHTML 1.0 Strict ความก้ำกึ่ง คาราคาซัง ที่ต้องเรียนรู้ เข้าใจ และปฏิบัติตาม

Posted on by Sitthiphorn Anthawonksa

สุดท้ายแล้ว สิ่งที่ผมเจออยู่ในตอนนี้ คืออาการ มึนงง คล้ายๆ กับการหลงทาง เพราะอะไรนั่นหรือ เพราะ การเขียนเว็บนี่แหละครับ มันไม่เหมือนเดิม มันไม่เหมือนเมื่อก่อน ไม่เหมือนโดยสิ้นเชิง “ใครๆ ก็ทำเว็บได้” คำๆ นี้คุ้นๆ เหมือนผมเคยได้ยินจากที่ไหนมาก่อน แต่ อยากจะเพิ่มเติมคำนี้เข้าไปด้วย “ใครๆ ก็ควรเข้าใจในหลักการทำเว็บพื้นฐาน& อยากให้เข้าใจ เข้าใจจริงๆ ก่อน ก่อนที่จะเริ่มลงมือทำเว็บสักเว็บ

เคยลองเขียนหน้าเว็บแบบ XHTML 1.1 แล้วเกิดข้อผิดพลาดจนหน้าเว็บไม่แสดงผลบ้างไหมครับ หรือ แสดงผล แต่ผิดเพี้ยน ความหงุดหงิด งุ่นง่านเกิดขึ้นกับผมทุกครั้งที่คิดอยากจะเขียนเว็บแบบ XHTML 1.1 แต่ในชีวิตจริง ถ้าหากคุณยังทำงานกับโปรแกรมเมอร์ที่ยังไม่เข้าใจว่า XHTML 1.1 กับ HTML 4.01 มันต่างกันอย่างไรหละก็ บอกคำเดียวครับ ว่าคุณ ไม่ต้องไปแสดงกล้ามดากอะไรกับเขาเหล่านั้นอีกแล้ว หยิบยื่น XHTML 1.0 Transitional ให้เขาเหล่านั้นก็พอ โลกแห่งความฝันแตกต่างกับความเป็นจริงฉันใด ก็ฉันนั้น โลกแห่งธุรกิจและความสามารถในการพัฒนาตัวตน ของคนทำงานมักไม่เท่ากันเสมอ คำแนะนำคือ เก็บความขมขื่นเอาไว้คนเดียว แล้วไปเขียนระบายความรู้ กู้ความเครียดใน Web Log ของตัวเองซะ

SEO ผลพลอยได้จากการทำ Website ให้เกิด Accessibility สูง ๆ

Posted on by Radiz Sutthisoontorn

เจ้าของ Website หลาย ๆ คนต่างก็อยากได้ผลลัพธ์ทาง SEO ที่สูง ๆ บางคนใช้วิธีการโกงต่าง ๆ นานา เพื่อให้ Website ของพวกเขานั้นได้ผลลัพธ์ทาง SEO อย่างที่คาดหวังไว้ ในทางเดียวกัน ด้วยเหตุผลเดียวกันนี้จึงทำให้เกิดอาชีพ search engine optimizer เพื่อสนองตอบความต้องการ เจ้าของ Website ต่าง ๆ ที่ต้องการผลลัพธ์ทาง SEO สูง ๆ เช่นนี้ ซึ่งหลาย ๆ ผู้ให้บริการในส่วนนี้ใช้เทคนิคที่ไม่ค่อยจะดีต่าง ๆ นานา อาทิ การ spam ตัวอย่างเช่น เอา Link ไปแปะไว้ในเวปที่มี page ranking สูง ๆ ซึ่งสร้างความเดือดร้อนให้กับคนอื่นมาก หรือ การซ่อนข้อมูล ที่ไม่เกี่ยวข้องกับเนื้อหาใน Website (User มองไม่เห็นแต่ Search Engine นั้นมองเห็น) หรือ Trick อื่น ๆ ต่าง ๆ ที่เยอะแยะมากมายอธิบายไม่หมด เหล่านี้เรียกว่า Black Hat ผมคิดว่าบางท่านที่กำลังอ่านนั้นก็คงใช้กันอยู่ด้วยความเคารพจะขอเอ่ยไว้ ก่อนว่าผมไม่ได้ต้องการโจมตี หรือ แฉใคร เพียงแต่อยากให้หันมาลองพิจารณาวิธีนี้ที่ผมจะเขียนให้ท่านอ่านกันบ้าง

การทำ SEO แบบ Black Hat นั้นเป็นอันตรายทั้งต่อ User และ Search Engine อธิบายคร่าว ๆ ง่าย ๆ สั้น ๆ ว่า การกระทำแบบนี้จะส่งผลให้ Search Engine นั้นต้องทำงานหนักมากขึ้น และ User อาจจะได้รับข้อมูลที่ไม่ถูกต้องอีกด้วย สิ่งที่ผมกำลังจะกล่าวถึงนั้นคือ White Hat SEO ซึ่งเป็นการพัฒนา Website ของคุณง่าย ๆ ด้วยการเขียน code ให้สนับสนุนกับระบบของ Search Engine เช่น แยก Style ออกจาก html code ลดการใช้ JavaScript ที่ไม่จำเป็น และ ลดความหนาแน่นของ code (ใช้เท่าที่จำเป็น) เหล่านี้ จะทำให้ง่ายต่อการ Spider ของ Search Engine ง่ายต่อการ index และ ง่ายต่อการจัดอันดับ Page Rank

List หรือ ข้อมูลที่เป็นลิสต์ (ol, ul, dl)

Posted on by Sitthiphorn Anthawonksa

ในขั้นต้นของการคิดวิเคราะห์ข้อมูลที่จะนำมาทำเป็น list ในรูปแบบต่างๆ ความเข้าใจในพื้นฐานของความเป็น list คือสิ่งสำคัญ เราจะรู้ได้อย่างไรว่าอันไหนคือ list ที่ต้องเรียงลำดับ (ol) อันไหนคือ list ที่ไม่ต้องเรียงลำดับ (ul)

HTML, XML, XHTML และ CSS คืออะไร ต่างกันอย่างไร และใช้อย่างไร

Posted on by มิสเตอร์ ผ่านมา

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

HTML (Hyper Text Markup Language)

ภาษานี้คงคุ้นกันดีอยู่ในหมู่นักเขียนเว็บทั้งหลาย HTML ภาษานี้เป็นภาษาที่ Browser ส่วนใหญ่เข้าใจดีว่าคืออะไรและสามารถประมวลผลได้อย่างถูกต้อง Browser ส่วนมากนั้นจะรันบนคอมพิวเตอร์ที่มีหน่วยความจำมาก จึงไม่ค่อยเป็นปัญหามากนักในการประมวลผลแม้ว่าบางครั้งผู้เขียนโค้ดอาจเขียนโค้ดผิดพลาดก็ตาม แต่ Browser ก็สามารถเดาได้และแสดงผลได้อย่างถูกต้องเป็นส่วนมาก แต่ปัญหาก็คือ หากต้องการใส่แท็กใหม่ ๆ ลงไป เอกสาร HTML จะไม่สามารถประมวลผลได้ มันจะประมวลผลเฉพาะแท็กที่มันรู้จักเท่านั้น นั่นคือตัว HTML มีความจำกัด นอกจากนี้แล้วเอกสาร HTML ยังถูกเอาไปใช้อย่างผิดความหมายและผิดวัตถุประสงค์ ทำให้เอกสารมีความยุ่งยาก ทำความเข้าใจยาก ต้องใช้เวลามากในการเขียนหรือออกแบบเนื่องจากมีการปนกันของเนื้อหาและการตกแต่งเอกสาร เอกสาร HTML ส่วนมากจึงเกิดสภาพที่เรียกว่า malformed ซึ่งตรงข้ามกับคำว่า well-formed ซึ่งหมายถึง เอกสารมีความถูกต้อง ไม่มีข้อผิดพลาดและไม่ฝืนข้อกำหนดของตัว DTD

TEXT & text Effectes

Layout and Box Model

Transitions and Animations