วันพฤหัสบดีที่ 27 พฤษภาคม พ.ศ. 2553

การเขียนสมการในเว๊บและในบล๊อก

การเขียนสมการในบล๊อกหรือในเว๊บโดยทั่วไป (HTML) นั้น ทำไม่ได้เลย (หรือได้?) เมื่อมหาวิทยาลัยมีนโยบายให้ผู้สอนจัดสร้างสื่อ e-Learning สำหรับนักศึกษา เราก็อยากจะจัดทำเว๊บหรือเขียนบล๊อกที่บรรยายเนื้อหาที่สอน

แต่เนื้อหาที่สอนไม่มีทางหลีกเลี่ยงสมการได้ เราจะเขียนสมการลงในเว๊บหรือบล๊อกของเราอย่างไร? โชคดีที่มีคนคิดแก้ปัญหานี้ไว้แล้วครับ นั่นก็คือจาวาสคริปต์เพื่อการสร้างสมการโดยแปลงรหัสสมการให้เป็นภาพแบบ svg สคริปต์ดังกล่าวก็คือ ASCIIMathML.js สคริปต์ดังกล่าวนี้เขียนขึ้นและดูแลโดยนาย Peter Jibsen จากมหาวิทยาลัย Chapman University ครับ

วิธีใช้ก็ง่ายมาก (สำหรับเว๊บที่คุณมีอำนาจเต็ม) นั่นก็คือ
    • ดาวน์โหลดสคริปต์ดังกล่าวจาก ASCIIMathML 
    • อัพโหลดสคริปต์นันไปที่โฮสต์ของเว๊บไซต์ของคุณ เลือกไดเร็คตอรีได้ตามใจตราบใดที่ยังเป็นไดเร็คตอรีที่เข้าถึงได้ทาง www สมมติว่าเป็น webroot/ASCIIMathML.js ก็ได้ (เมื่อ webroot หมายถึงตำแหน่งรากของเว๊บของคุณ ไม่ใช่ตำแหน่ง root ของระบบ)
    • เติมแท็กสคริปต์ลงในส่วนหัวของไฟล์ HTML ของหน้าเว๊บที่ต้องการแสดงสมการดังต่อไปนี้
    <script> type="text/javascript" src="ASCIIMathML.js" </script>
    ลงในระหว่างแท็ก <head> ... </head> ในแฟ้ม HTML นั้น ๆ ซึ่งส่วนนี้อาจอยู่ในแม่แบบของเว๊บ หรือจะเป็น HTML โดยตรงก็ได้ แล้วแต่เว๊บของท่าน
    •  ในส่วนเนื้อความ ท่านก็สามารถเขียนสมการโดยใช้รหัสที่มีความคล้ายคลึงกันกับ LaTeX (เป็นส่วนใหญ่) ได้ โดยให้ครอบรหัสของสมการด้วย a``math ... enda``math
      เช่น a``math x^{2}=\frac{1}{y} enda``math จะให้ผลเป็น amath x^{2}=\frac{1}{y} endamath
    สำหรับกรณีการการเขียนสมการลงบล๊อก (เฉพาะที่รู้จักคือ blogger.com เท่านั้น) จะยุ่งนิดหน่อยเนื่องจาก
    1. หาทางแทรกแท็ก <script>...</script> เข้าไปใน Blog และ
    2. ต้องหาที่สำหรับเป็นโฮสของจาวาสคริปต์อันนี้ 
    ปัญหาแรกนั้นมีทางทำได้ไม่ยาก ให้ไปที่เมนูรูปแบบ (Template) ของบล๊อกของคุณ และแก้ไขแม่แบบแบบ HTML ดังรูป การแทรกโค้ดให้แทรกในแท็กส่วนหัว (Head) ซึ่งในนั้นจะมีโค้ดอื่น ๆ อีกเยอะ ก็เลือกแทรกตรงใกล้ ๆ กับท้าย ๆ แท็กก็ได้ครับ


    ส่วนปัญหาที่สอง เนื่องจากผมไม่สามารถอัพโหลดสคริปต์ตัวนี้ เข้าไปไว้ใน Blogger ได้ ทางออกก็คือหาเว๊บอื่นสำหรับใช้เป็นโฮสของสคริปต์ตัวนี้ และให้เรียกสคริปต์ตัวนี้จากโฮสดังกล่าวในแท็ก
    <script> type="text/javascript" src="http://www.yourhost.com/ASCIIMathML.js" </script>
     ในส่วนหัว (<head>...</head>) ของแฟ้ม HTML ของคุณ สังเกตว่า src ของสคริปต์กลายเป็น URL ของเว๊บที่ใช้โฮสแล้ว ปัญหาคือผมไม่มีโฮสแบบนั้นเป็นของตัวเองนี่สิ ผมมีแต่ Google Site จะทำยังไงดี?

    ทางออกง่ายอย่างคิดไม่ถึงครับ คำแนะนำอันนี้ผมพบที่ SOSwitch Blog ซึ่งขั้นตอนมีดังนี้ครับ (อนุมานว่ามีบัญชี Google Site และเปิดไซต์แล้วนะครับ)
    • ดาวน์โหลดสคริปต์มาไว้ที่เครื่องตนเองก่อน
    • เปลี่ยนนามสกุลแฟ้มเป็น txt เสีย
    • ไปที่ไซต์ของตนเองใน Google Site 
    • สร้างหน้าเว๊บใหม่ขึ้นมาโดยใช้แม่แบบตู้เอกสาร (File Cabinet) หรือถ้ามีอยู่แล้วและใช้รวมกันได้ก็ไม่ต้องสร้างใหม่ ข้ามขั้นตอนนี้ไปเลย
    • อัพโหลดแฟ้มสคริปต์ที่เปลี่ยนนามสกุลแล้วขึ้นไป
    • คัดลอกลิงก์ที่ชี้มาที่แฟ้มนี้ในตู้เอกสาร เอาเฉพาะ URL ส่วนขยายอื่น ๆ เช่น ?attredirects=0&d=1 ก็ตัดทิ้งไป ลิงก์ที่คัดลอกมานี้แหละครับ นำไปใช้ที่ scr ในแท็ก <script> ข้างบน
    เมื่อเสร็จแล้ว ก็สามารถสนุกสนานกับการเขียนสมการเพื่อประกอบการสอนได้ดังนี้
    amath P_{3}^{0}=A_{0}(x-x_{0})^{3}+B_{0}(x-x_{0})^{2}+C_{0}(x-x_{0})+D_{0} endamath
    อยากเขียนเท่าไรก็เขียนไป เขียนกันให้สะใจไปเลย!

    1 ความคิดเห็น:

    jark กล่าวว่า...

    แต่ยังเอาไปเขียนสมการใน Google Site ไม่ได้ คงต้องใช้ latex2html ไปก่อนละมั้ง