โดย Radiz เมื่อ 2008-07-02 18:14:25 ดูทั้งหมด 1478 ครั้ง
สร้าง 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 ครับ
<div id="wrapper">
<h1 title="Graph">Graph <span>Create Graph with xhtml + css</span></h1>
<div id="graph">
<ul id="rateGraph">
<li><em>200</em></li>
<li><em>150</em></li>
<li><em>100</em></li>
<li><em>50</em></li>
</ul><!-- end rateGraph -->
<ul id="type">
<li>type1</li>
<li>type2</li>
</ul><!-- end type -->
<dl>
<dt>graph result</dt>
<dd>
<ul id="detailsGraph">
<li>
<em>col 1</em><br />
<span class="rate50"><strong>type1</strong> 50</span>
<span class="rate100"><strong>type2</strong> 100</span>
</li>
<li>
<em>col 2</em><br />
<span class="rate75"><strong>type1</strong> 75</span>
<span class="rate150"><strong>type2</strong> 150</span>
</li>
<li>
<em>col 3</em><br />
<span class="rate120"><strong>type1</strong> 120</span>
<span class="rate75"><strong>type2</strong> 75</span>
</li>
<li>
<em>col 4</em><br />
<span class="rate100"><strong>type1</strong> 100</span>
<span class="rate170"><strong>type2</strong> 170</span>
</li>
</ul><!-- end detailsGraph -->
</dd>
</dl>
</div><!-- end graph -->
</div><!-- end wrapper -->
Click เพื่อชมตัวอย่างครับ Graph Page
บทความโดย : Mc_Cathie ครับ
Post โดย : รดิส (เฉย ๆ)
Tags:
Unknown Version Unknown
