Tag: xhtml

เมื่อเดือนที่แล้วมีข่าวดีของคนรัก iPhone คือ App Store ได้อนุญาติให้มี 3rd party web browser ที่สามารถ install ลงในเครื่อง iPhone ได้แล้ว ผมเองก็ได้แต่เฝ้ารอดูอยู่ว่ามันจะออกมาในรูปแบบใด อย่างว่า ... ถ้าว่ากันด้วยเรื่องการตลาด และ ธุรกิจแล้ว iPhone กำลังจะครอบงำ trend การทำเวปสำหรับ mobile device หรือเปล่า (ลองจับตาดูกัน) เพราะในแง่ความคิดผมแล้วมันเป็นอะไรที่มาแรงเหลือเกินฉุดไม่อยู่จริง ๆ ไม่ว่าจะเป็นผลิตภัณฑ์ใดของ Apple มันมักจะสวนกระแส ป่วนกระแส และ สุดท้ายสร้าง กระแสได้ดีเสมอ กลับมาต่อกันด้วยเรื่องของเรา จากที่ผมติดค้างไว้ เมื่อปีที่แล้ว (ปีที่แล้วเลย) ว่าจะแนะนำให้รู้จักภาษาโครงสร้างใหม่ XHTML Basic 1.1 สำหรับ การทำเวปในส่วนของ mobile device นั้นบัดนี้ได้เพลาพอปลีกตัวพอหายใจได้ขยับขยายผายปอด ผายลม ออกมาแรด ๆ หายใจทิ้งทำนั่นทำนี่ได้หน่อย ก่อนจะเข้าสู่ห้วงยุ่งอีกครั้ง ก็ขอบ่น ๆ ไว้สักหน่อย สักบทความ

ผมขออนุญาติไม่พูดเรื่องวิธีการออกแบบ GUI ในการทำเวปสำหรับ mobile device ผมมีความเชื่อว่าถ้าเราเข้าใจธรรมชาติของ โครงสร้าง และ ตัวกำหนดการแสดงผล layout แล้วมันจะทำให้เราเข้าใจว่าเราจะต้อง ออกแบบ GUI ออกมาอย่างไรให้เหมาะสมกับ ธรรมชาติของภาษาโครงสร้าง และ ตัวกำหนดการแสดงผลนั้น ๆ ได้เป็นอย่างดีจากนั้นชีวิตก็มีความสุข แล้ว (ถ้าใครที่ทำงานบริษัท ที่ อยู่ในอุตสาหกรรม website งานต่อไปหลังจากออกแบบ GUI ก็คงจะเป็นการตรวจสอบว่าตรงกับแผนพัฒนา เศรษฐกิจ และ ผลิตภัณฑ์ หรือไม่) เริ่มเรื่องกันเลยดีกว่า

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

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

ผู้เชี่ยวชาญทางด้าน Internet Marketing คงทราบกันอยู่แล้วว่าสิ่งที่ทำให้ผลลัพธ์ทาง SEO สูง ๆ นั้น ไม่ใช่การมุ่งทำโฆษณากับ .... หรือ จ่าย pay per click มีอีกหลาย ๆ วิธีที่ไม่จำเป็นต้องไปเสียเงินเสียทองให้เปลืองไปเปล่า ๆ

ผมนึกถึงตอนที่ผมหัดเขียน CSS เมื่อสองสามปีที่ผ่านมา ตอนนั้นคิดอยู่อย่างเดียวว่า ต้องเขียนให้มันแสดงผลได้ใน IE ก่อน แต่พอศึกษาไป เรื่อยๆ กลับกลายเป็น ต้องเขียนให้ดูได้บน Modern Browsers ก่อน IE ค่อยตามมา ผ่านไปเกือบปี ถึงรู้ว่า ก่อนจะเขียน CSS ให้ไปหัดเขียน XHTML ใหม่เสียก่อน

สร้าง Graph กับ xhtml + css ผมลองนั่งคิด หาวิธีการ และจนกระทั่งทดลองทำ ใช้กลยุทต่าง ๆ ที่พอจะมีหาได้สะสมมาจากการทำงาน ประยุคเข้าไปให้มันใช้งานได้คงเคยเห็นมาบ้างแล้วการสร้าง Graph กับ css มีบทความให้เห็นกันอยู่มากพอสมควร อาจจะใช้ java script เข้าช่วยบ้างในบางแทคนิค แต่ก็ยังรู้สึกว่า มันค่อนข้างที่จะซับซ้อนมาก ทำความเข้าใจยากมากกับ Code ของหลาย ๆ ท่าน ผมก็เลยคิดหาทางสร้างขึ้นมาใหม่ตัวหนึ่ง ซึ่งคิดว่าน่าจะเป็น Code ง่าย ๆ ที่ผมเองพอจะทำได้ และ ลองเอามาแนะนำ เผื่อเอาไปต่อยอดความคิด ประยุคใช้เผื่อจะเกิดความคิดใหม่ ๆ ในงานของเรา เป็นการคิดนอกกรอบต่อยอดไปเรื่อย ๆ ครับ

ส่วนใหญ่ที่ผ่านมาเราจะเห็นเป็นการนำเอารูปภาพสำเร็จมาวางแล้วใช้ attribute alt หรือ title เป็นตัวขยายความบ่งบอกความหมายของรูปนั้น ๆ หรือ ใช้ flash หรือ Ajax, Javascript อย่างที่เกริ่นไว้ข้างต้น (อนาคตอันใกล้ Flash จะสามารถมองเห็นได้ด้วย Search Engine แล้ว ถ้าเป็นความจริง Flash Web Designer ก็คงจะได้เฮกันล่ะครับ) แต่ผมมุ่งประเด็นไปตรงที่ว่า หากทำให้ Graph สื่อช้อมูลได้ตรงประเด็นจริง ๆ รับรู้ข้อมูลได้จริง ๆ อ่านค่าได้จริง ว่าในแต่ละข้อมูลนั้นได้เปรียบเทียบกันแล้วเป็นอย่างไร และถ้าหากว่าวันใดวันหนึ่ง file css หายไป การเรียงของข้อมูล และการให้ข้อมูลจะยังคง ปะติดปะต่อ เหมือนเดิม หรือเปล่า ไม่ใช้เป็นแค่รูปภาพที่แสดงขึ้นมาเฉย ๆ ไม่ได้บอกข้อมูล หรือรายละเอียดแต่อย่างได (ก็คือความเป็น semantic นั่นแหละ) ทำให้ข้อมูลเป็นประโยชน์ที่สุด มีประสิทธิภาพที่สุด ในการให้ข้อมูลแก่บุคคลทั่วไปที่ค้นหาข้อมูล ทั้งนี้จะได้ในเรื่องความเป็น Accessibility ในการให้ข้อมูล รายละเอียดต่าง ๆ ที่สามารถเข้าดูข้อมูลได้หลาย User ได้หลาย ๆ ทาง และรับรู้ข้อมูลได้เหมือน ๆ กัน ไม่ว่าจะเป็นการเข้าดูกับอุปกรณ์ อิเล็กทรอนิคต่าง ๆ ก็จะได้ข้อมูลที่ตรงกับความต้องการ และตรงกับการสื่อของผู้ส่งสาร (ดีไหมครับ ^^)

ทำไมถึงขั้น ต้องรู้ด้วยหละ เพราะอะไร ผมว่ามีน้อยคนนักที่แวะเวียนเข้ามา เว็บไทยซีเอสเอสและจะไม่มีพื้นฐานเรื่อง html เลย

หลายท่านคงยังงเรื่อง SEO หรือ Search Engine Optimize เผอิญมีหนุ่มนิรนาม ผู้ซึ่งมีความสามารถและให้ความสนใจ แถมอยากถ่ายทอดพลังให้คนตาดำๆ ทั่วๆ ไปอย่างเราให้ทราบด้วย

มาโพสต์ข้อความแสดงความคิดเห็นไว้ตาม บทความต่างๆ ที่ผมเขียน ก็เลยถือโอกาสเอามาแปะให้อ่านเพิ่มรอยหยักกัน ซะหน่อยครับ กับ XHTML, CSS, WCAG มันเกี่ยวกับ SEO ยังไง เซิญแซ่บ

เห็นด้วยกับทุกท่านครับ ดีใจที่เห็นคนไทยมีคนสนใจ XHTML กับ CSS และพยายามใช้ให้ถูกต้อง เพราะประเทศอื่น ๆ เขาไปกันไกลแล้ว จริง ๆ ผมเคยคิดที่จะทำเว็บเช่นนี้เหมือนกัน แต่ไม่มีเวลา ก็เลยล้มเลิกไป แต่ตัวผมเองนั้นก็ศึกษา XHTML, CSS และ WCAG 1.0 + WCAG 2.0 มามากกว่า 5 ปีแล้ว (พอดีว่าทำงานในองค์กรคนพิการ แล้วเขามีข้อบังคับว่า ต้องรู้จัก 3 ตัวนี้ซึ่งมีส่วนช่วยให้คนพิการเข้าถึงข้อมูลข่าวสารจากเว็บได้สะดวกขึ้น)

เคยได้ยินกันมาบ้างไหมครับ Common Attribute เป็นชื่อเรียกกลุ่ม Attribute ของ xhtml ที่เราจะพบเจอกับมันบ่อย ๆ ในการทำงาน หรือ ใน Website ของคนอื่น ๆ

attribute เหล่านี้จะถูกนำมาใช้กับ xhtml element ได้หลาย ๆ element เพื่อกำหนดบ่งชี้คุณสมบัติ หรือ คำอธิบายต่าง ๆ ให้กับ xhtml element นั้น ๆ ที่เรียกตัวมันไปใช้

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

XHTML Syntax หรือ หลักการณ์เขียน XHTML การเขียน XHTML ที่ถูกต้องนั้นง่ายนิดเดียวครับ จำง่าย ๆ เลยว่าข้อมูล จะเป็นตัวกำหนด elements ที่จะเอามาครอบมัน โดยเลือก tag และ attribute ของ XHTML มาอธิบายความหมายของมัน ให้เหมาะสม

เกริ่นเรื่อง

กาลปางก่อน เนิ่นนานมานั้น เหล่านักพัฒนาทั้งหลาย ที่พัฒนา Web site นั้นมีแนวทางในการแก้ไขปัญหาสำหรับผู้ใช้ที่เข้ามาเยี่ยมชม Website ของพวกเขาด้วย โทรศัพท์มือถือ, palm, pda และ/หรือ เหล่า Smartphone ต่าง ๆ คร่าว ๆ หลัก ๆ ดังนี้

1. 1. คือไม่สนใจอะไรทั้งสิ้น ปล่อยให้ Browser ของอุปกรณ์เหล่านั้นแสดงผล โครงสร้างหน้าตา Website ของพวกเขาไปตามยถากรรมที่มันถูกพัฒนามา
2. 2. ดัดแปลงหน้าตาให้ใกล้เคียงกับการออกแบบที่ ออกแบบมาสำหรับ desktop screen ทั้งหลาย ด้วย CSS (handheld)
3. 3. ทำแยกออกมาเป็น version ของอุปกรณ์เหล่านี้ไปเลย desktop screen ก็อีกแบบ สำหรับมือถือนั้นก็เป็นอีกแบบแยกออกจากกัน

ครั้งนี้ผมจะเขียนแนะนำเกี่ยวกับ markup ที่ w3 นั้นพัฒนามาเพื่อสนับสนุนอุปกรณ์เหล่านี้โดยเฉพาะ และ มี feature อะไรบ้างที่ w3 นั้นเตรียมให้เรานำมาใช้กัน