Skip To Content

  1. • การสร้างแบบฟอร์มอย่างถูกวิธี 2

    โดย radiz เมื่อ 2008-07-22 17:51:57

    ความเดิมจากตอนที่แล้ว จากตัวอย่างเมื่อคราวที่แล้ว ขออนุญาติตอบคำถามของคุณ​ mabonic ก่อนนะครับ ว่าใน IE6 ถ้าไม่สามารถกำหนด attribute selector ได้จะทำอย่างไร คำตอบมีสอง Case ครับ Case1: คือ เขียน class selector เพื่อกำหนดคุณสมบัติให้มันครับ ส่วน Case2: ก็คือ ใช้ JavaScript ที่ชื่อ ie7-js สำหรับ reset ค่า default ต่าง ๆ ในการ render และ ทำให้มันรู้จักคำสั่งของ CSS level ใหม่ ๆ ที่มันไม่รู้จัก (อย่าลืมนะครับว่า IE6 มันแก่แล้ว) JavaScript ตัวนี้ให้กำเนิดโดย Dean Edwards แต่ข้อจำกัดหลายอย่างก็ยังมีอยู่ ถ้าผู้ใดสนใจเป็นหนึ่งในทีมพัฒนาก็สามารถเข้าร่วมได้นะครับ

    Tags:

    1. xhtml
    2. valid
    3. form

  2. • การสร้าง Graph โดยใช้ XHTML CSS

    โดย MC_Cathie เมื่อ 2008-07-02 18:14:25

    สร้าง 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 ได้หลาย ๆ ทาง และรับรู้ข้อมูลได้เหมือน ๆ กัน ไม่ว่าจะเป็นการเข้าดูกับอุปกรณ์ อิเล็กทรอนิคต่าง ๆ ก็จะได้ข้อมูลที่ตรงกับความต้องการ และตรงกับการสื่อของผู้ส่งสาร (ดีไหมครับ ^^)

    Tags:

    1. Graph
    2. XHTML
    3. CSS

  3. • การสร้างแบบฟอร์มอย่างถูกวิธี

    โดย radiz เมื่อ 2008-05-29 12:28:09

    ผมติดมาไว้นานมากตั้งแต่ปีที่แล้ว ที่บอกว่าถ้ามีเวลาผมจะแนะแนวทางการใช้ form ให้ถูกต้อง สะอาด และ accessibility วันนี้ก็คิดว่าคงได้เวลาแล้วล่ะ เพราะกว่าจะว่างอีกคงนานแน่ ๆ เลย เพราะตอนนี้ผมเองก็ไปมุ่งศึกษาในส่วนของ Semantic Web และ Mobile Web Technology แล้วมากกว่า อีกอย่างฝันอยากจะทำ free PDF Magazine เกี่ยวกับการสร้างสรรค์ การจุดประกาย ส่งเสริมให้เกิดความคิดสร้างสรรค์ คิดต่อยอด ให้มีในประเทศไทยบ้างแต่คงจะเริ่มจากกรอบของสิ่งที่ผมทำอยู่ รู้จัก และ ถนัด ซึ่งคิดว่าคงจะได้เห็นกันในเร็ว ๆ วันนี้ แต่อย่างไรก็ตาม ผมก็จะมาบ่น ๆ แบบเรื่อย ๆ เอื่อย ๆ ของผมแบบนี้ ต้องขออภัยที่อาจจะทำให้ ThaiCSS ดูเงียบเหงาไป อาจจะเห็นผมคนเดียวอย่างนี้บ่อย ๆ เพราะพรคงอาจจะนาน ๆ แวะเข้ามาทีแล้ว เพราะมีหน้าที่รับผิดชอบอันยิ่งใหญ่กว่าไว้รอ Surprise กันในเร็ว ๆ วัน สำหรับคนที่รัก Tweeter สามารถพูดคุยกับผมได้ทั้งวันทั้งมีสาระ และ ไม่มีสาระได้เลย (อย่างหลังคงไม่บ่อย หะ หะ) ผมใช้ username ว่า radiz ชื่อผมนี่แหละครับ แนะนำว่าให้ใช้ SNS ในทางที่มีประโยชน์นะครับ อย่าเอามันมาทำลายเวลา และ ขดสมอง

    เข้าเรื่องกันดีกว่าครับ ก่อนเราจะเขียนโครงสร้างแบบฟอร์มใน xhtml นั้นเรามารู้จัก tag ต่าง ๆ ที่จะทำงานร่วมกับโครงสร้างแบบฟอร์มกันก่อนโดยผมจะกล่าวแบ่งตามประเภทของมันนะครับ (Block Element และ Inline Element) และ สิ่งที่ผมกล่าวถึงจะเป็นส่วนที่ทำงานเกี่ยวกับ Data Entry (การใส่ข้อมูล) ของแบบฟอร์มส่วนโครงสร้างร่วมอื่น ๆ ให้พิจารณาตามความเหมาะสมครับ บางคนอาจจะใช้ ul, ol หรือ dl ไม่แนะนำให้ใช้ table ในการจัด layout ของ form ครับผม มาทำความรู้จักกับ tag ที่ทำงานร่วมกับ Data Entry ต่าง ๆ กันเลยครับ

    Tags:

    1. xhtml
    2. valid
    3. form

  4. • รู้จักกับ common attribute ของ xhtml

    โดย radiz เมื่อ 2008-05-07 00:09:17

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

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

    Tags:

    1. xhtml
    2. i18n Attribute
    3. Core Attribute

  5. • เมื่อ Crawler ต้องเจอ XHTML ป่วยๆ

    โดย พร อันทะ เมื่อ 2008-03-03 00:59:59

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

    Tags:

    1. crawler
    2. xhtml
    3. markup

  6. • Accessibility หน้าทีเ่ราไม่ใช่หน้าที่ใคร | วิธีง่าย ๆ ในการทำ Web Accessibility

    โดย radiz เมื่อ 2008-02-22 23:25:23

    เรามาต่อกันจากตอนที่แล้วที่ผมเขียนไว้เมื่อ เดือน หรือ สองเดือนที่แล้วกัน กับบทความนี้ผมจะเรียบเรียงรวบขั้นตอนเบื้องต้นของการทำ Web Accessibility ง่าย ๆ มาแลกเปลี่ยนกัน

    Tags:

    1. aceesibility
    2. css
    3. xhtml

  7. • รู้จักกับ XHTML Syntax

    โดย radiz เมื่อ 2008-02-17 14:33:14

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

    Tags:

    1. xhtml
    2. syntax
    3. html

  8. • แค่ไหนกัน

    โดย พร อันทะ เมื่อ 2008-01-11 21:43:27

    อยู่ อยู่ ผมก็เกิดคำถามขึ้นมาในหัวเฉยๆ ว่า เราเข้าใจหลักการการใช้งาน CSS และ XHTML แค่ไหนกัน หรือคิดว่าทั้งสองอย่างนั้นมันไม่สำคัญ คนที่กำลังเขียน CSS ทั้งหลายนั้นกำลังหัดเขียน โดยที่ไม่ได้สนใจโครงสร้างและขอบข่ายของงาน จริงๆ

    Tags:

    1. xhtml
    2. ทำความเข้าใจ xhtml
    3. พื้นฐาน

  9. • HTML กับ XHTML

    โดย พร อันทะ เมื่อ 2007-12-31 16:05:44

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

    Tags:

    1. xhtml
    2. html
    3. div

  10. • รู้จักกับ Microformats

    โดย radiz เมื่อ 2007-12-16 17:02:08

    ไม่ทราบว่าเคยได้ยินกันบ้างหรือยังกับคำคำนี้ Microformats และ งงกันบ้างไหมครับว่ามันคืออะไร ทำงานอย่างไร สำหรับเราหลาย ๆ คนคงเป็นเรื่องใหม่ ที่จะเข้ามาปั่นหัวให้วุ่นวายกันอีกแน่

    Tags:

    1. microformats
    2. xhtml
    3. hCard

  11. • ลดปัญหาโลกร้อนด้วยการเขียน XHTML, CSS อย่างถูกวิธี

    โดย พร อันทะ เมื่อ 2007-12-14 13:48:42

    เกาะกระแสโลกร้อนกันดีกว่าครับ ปัญหาที่ทั่วโลกให้ความสนใจ เมืองไทยไม่ยอมน้อยหน้า แล้วอันใด เราชาว XHTML, CSS จะยอมน้อยหน้า มาช่วยกันเขียนเว็บเพื่อลดปัญหาโลกร้อนกันดีกว่า

    Tags:

    1. xhtml
    2. css
    3. web standards

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

    โดย radiz เมื่อ 2007-12-11 16:24:29

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

    Tags:

    1. font
    2. xhtml
    3. css

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

    โดย radiz เมื่อ 2007-12-03 23:09:27

    W3C ได้เปิดโอกาสให้กลุ่มผู้พัฒนาอื่น ๆ ที่สนใจได้เข้ามาพัฒนา HTML ต่อจากตัว W3C เอง ซึ่งทาง W3C เองนั้นจะเริ่มการพัฒนา XHTML 2 ต่อ โดยกลุ่มที่นำ HTML ไปพัฒนาต่อนี้ได้แยกออกจาก W3C โดยสิ้นเชิง

    Tags:

    1. xhtml
    2. html5
    3. xhtml2

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

    โดย radiz เมื่อ 2007-11-30 22:46:27

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

    Tags:

    1. xhtml
    2. html5
    3. xhtml2

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

    โดย radiz เมื่อ 2007-11-21 09:37:13

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

    Tags:

    1. xhtml
    2. html5
    3. xhtml2