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

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

บางคนก็บอกว่าไม่ต้องทำขนาดนั้นหรอก แต่ในความตั้งใจ หรือว่าหัวดื้อของผม คิดอยู่ว่าต้องทำให้ได้ ต้องมีคนให้ความสำคัญบ้างละ หรือไม่ก็ถือว่าเป็นกรณีศึกษาให้กับตัวเอง ทุกวันนี้รู้สึกว่าผมจะโดนใช้ให้ทำแต่เรื่องเดิม ๆ เลยอยากอ่านอะไรใหม่ ๆ ลองอะไรใหม่ ๆ บ้างก็ว่ากันไป งานที่มีคุณภาพ เป็นตัวบ่งบอกประสิทธิภาพ การทำงานของตัวเราเอง

ทีนี้มาดู code กันครับว่า ผมปรุงแต่งอะไรอย่างไร เพื่อน ๆ พี่ ๆ น้อง ๆ ช่วยแนะนำเพิ่มเติมด้วยนะครับ

ขอบพระคุณสำหรับ โอกาสแรกใน ThaiCSS ครับ

Click เพื่อชมตัวอย่างครับ Graph Page

Back to Top

2 Responses to การสร้าง Graph โดยใช้ XHTML CSS

  1. mook

    :)

    Reply

  2. Radiz Sutthisoontorn
    radiz

    อาจารย์ Max เริ่มได้ดี เริ่มได้ดี

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top