More Related Content More from Boonlert Aroonpiboon (20) Joomla1. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี -1-
เทคโนโลยีเว็บเพจ
การนําเสนอขอมูลในระบบ WWW (World Wide Web) พัฒนาขึ้นมาในชวงปลายป
1989 โดยทีมงานจากหองปฏิบัติการทางจุลภาคฟสิกสแหงยุโรป (European Particle Physics
Labs) หรือที่รูจักกันในนาม CERN (Conseil European pour la Recherche Nucleaire) ประเทศ
สวิตเซอรแลนด ทีมงานไดคดคนวิธการถายทอดเอกสารขอมูลที่อยูในรูปแบบ HyperText ไป
ิ ี
ยังระบบคอมพิวเตอรอื่นๆ และเครือขายอินเทอรเน็ต ผลที่ไดคอ โปรโตคอล HTTP
ื
(HyperText Transport Protocol) และภาษาที่ใชสนับสนุนการเผยแพรเอกสารของนักวิจัย หรือ
เอกสารเว็บ (Web Document) จากเครื่องแมขาย (Server) ไปยังสถานที่ตางๆ ในระบบ WWW
เรียกวา ภาษา HTML (HyperText Markup Language)
ดวยเทคโนโลยี HTTP และ HTML ทําให
การถายทอดขอมูลเอกสารมีความคลองตัว สามารถเชื่อมไปยังจุด
ตางๆ ของเอกสาร เพิ่มความนาสนใจในการอานเอกสาร ใชงาน
เอกสาร จนไดรบความนิยมอยางสูงในปจจุบน การเผยแพรขอมูล
ั ั
ทางอินเทอรเน็ตผานสื่อประเภทเว็บเพจ (Webpage) เปนที่นยม ิ
กันอยางสูง ไมเฉพาะขอมูลโฆษณาสินคา ยังรวมไปถึงขอมูลทางการแพทย การเรียน งานวิจย ั
ตางๆ เพราะเขาถึงกลุมผูสนใจไดทั่วโลก ตลอดจนขอมูลที่นําเสนอออกไป สามารถเผยแพรได
ทั้งขอมูลตัวอักษร ขอมูลภาพ ขอมูลเสียง และภาพเคลื่อนไหว มีลูกเลนและเทคนิคการนําเสนอ
ที่หลากหลาย อันสงผลใหระบบ WWW เติบโตเปนหนึ่งในรูปแบบบริการที่ไดรับความนิยม
สูงสุดของระบบอินเทอรเน็ต
ลักษณะเดนของการนําเสนอขอมูลเว็บเพจ คือ สามารถเชื่อมโยงขอมูลไปยังจุดอืนๆ
่
บนหนาเว็บได ตลอดจนสามารถเชื่อมโยงไปยังเว็บอืนๆ ในระบบเครือขาย อันเปนทีมาของคํา
่ ่
วา HyperText หรือขอความที่มีความสามารถมากกวาขอความปกติน่นเอง จึงมีลกษณะคลาย
ั ั
กับวาผูอานเอกสารเว็บ สามารถโตตอบกับเอกสารนั้นๆ ดวยตนเอง ตลอดเวลาที่มการใชงาน
ี
นั่นเอง ดวยความสามารถดังกลาวขางตน จึงมีผูใหคํานิยาม Web ไวดังนี้
The Web is a Graphical Hypertext Information System. การนําเสนอขอมูลผาน
เว็บ เปนการนําเสนอดวยขอมูลที่สามารถเรียกหรือโยงไปยังจุดอืนๆ ในระบบกราฟก ซึ่งทําให
่
ขอมูลนั้นๆ มีจุดดึงดูดใหนาเรียกดู
บุญเลิศ อรุณพิบูลย
2. 2 เว็บไซตงาย รวดเร็วดวย Joomla
The Web is Cross-Platform. ขอมูลบนเว็บไมยดติดกับระบบปฏิบัติการ (Operating
ึ
System: OS) เนื่องจากขอมูลนั้นๆ ถูกจัดเก็บเปน Text File ดังนั้นไมวาจะถูกเก็บไวใน
คอมพิวเตอรทใช OS เปนUNIX หรือ Windows NT ก็สามารถเรียกดูจากคอมพิวเตอรที่ใช OS
ี่
ตางจากคอมพิวเตอรที่เปนเครื่องแมขายได
The Web is distributed. ขอมูลในเครือขายอินเทอรเน็ตมีปริมาณมากจากทัวโลก และ
่
ผูใชจากทุกแหงหนที่สามารถตอเขาระบบอินเทอรเน็ตได ก็สามารถเรียกดูขอมูลไดตลอดเวลา
ดังนั้นขอมูลในระบบอินเทอรเน็ตจึงสามารถเผยแพรไดรวดเร็ว และกวางไกล
รูปแสดงการเชื่อมตอของคอมพิวเตอรหลากหลายรูปแบบ (Cross-platform)
The Web is interactive. การทํางานบนเว็บเปนการทํางานแบบโตตอบกับผูใชโดย
ธรรมชาติอยูแลว ดังนันเว็บจึงเปนระบบ Interactive ในตัวมันเอง เริ่มตั้งแตผูใชเปดโปรแกรมดู
้
ผลเว็บ (Browser) พิมพชอเรียกเว็บ (URL: Uniform Resource Locator) เมื่อเอกสารเว็บ
ื่
แสดงผลผานเบราวเซอร ผูใชก็สามารถคลิกเลือกรายการ หรือขอมูลที่สนใจ อันเปนการทํางาน
แบบโตตอบไปในตัวนั่นเอง
3. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี -3-
องคประกอบของเทคโนโลยีเว็บ
เมื่อเว็บเพจเปนสื่อในการนําเสนอขอมูลที่ไดรบความสนใจมาก การเรียนรูเทคโนโลยี
ั
ดานนี้ เพื่อนํามาพัฒนาเว็บเพจดวยตนเอง จึงเปนสิ่งที่นาสนใจ ทั้งนี้การพัฒนาเว็บเพจ จะตอง
ทําความรูจักกับสวนประกอบตางๆ หลายสวนไดแก เว็บเบราวเซอร, ภาษากํากับ รวมทั้ง
ฟอรแมตภาพตางๆ ที่เหมาะสมกับการพัฒนาเว็บ
เทคโนโลยีอินเทอรเน็ต
อินเทอรเน็ต (Internet) เปนระบบเครือขายที่เชื่อมโยงคอมพิวเตอรจากทุกระบบ ทุก
รูปแบบ เขาสูระบบรวม ทําใหคอมพิวเตอรในระบบสามารถติดตอสื่อสารกันได อันเกิดใหเกิด
ความสะดวก รวดเร็วในการติดตอประสานงาน เผยแพรขาวสาร การใชอินเทอรเน็ต มี
หลากหลายลักษณะ เชนการใชอินเทอรเน็ตกับคอมพิวเตอรในสํานักงาน, ที่บาน, ระบบ
เคลื่อนที่หรือพกพาดวย Notebook Computer/Palmtop รวมทั้งโทรศัพทมือถือบางรุน
เอกสารเว็บ
เอกสารเว็บ นับเปนหัวใจหลักของการเผยแพรขอมูลในเครือขายอินเทอรเน็ต ขอมูล
ตางๆ จะถูกสรางและพัฒนาออกมาในรูปของเอกสารเฉพาะรูปแบบทีสามารถนําเสนอไดอยาง
่
เหมาะสม อยางไรก็ตามเอกสารเว็บก็มีลักษณะคลายคลึงกับเอกสารงานพิมพทั่วไป คือ
ประกอบดวยหนาเว็บมากกวา 1 หนาโดยมีหนาแรกเปนหนาปก แตมีการเรียกชื่อแตกตางจาก
เอกสารงานพิมพทั่วไป ดังนี้
ชุดเอกสารเว็บ (Web Presentation) – ชุดของขอมูลที่ตองนําเสนอบนระบบ
อินเทอรเน็ต ประกอบดวยเว็บเพจ (Web Page) ตั้งแต 1 หนาขึ้นไป
เว็บเพจ (Web Pages หรือ Web Documents) – เอกสารที่นาเสนอผลงานบนระบบ
ํ
อินเทอรเน็ต
Home Page – หนาแรกของเอกสารเว็บ
Homepage
Webpage Webpage Webpage Webpage Webpage
บุญเลิศ อรุณพิบูลย
4. 4 เว็บไซตงาย รวดเร็วดวย Joomla
ปจจุบันมีหลายคนที่มักสับสนกับการใชคําวา เว็บเพจ เว็บไซด และโฮมเพจ โฆษณา
หลายแหงลงประกาศรับจางสรางโฮมเพจ ถาแปลกันตรงๆ หมายถึงวา เขารับจางสรางกันแค
หนาโฮมเพจหนาเดียว หนาเว็บเพจอื่นๆ ไมรับ? บางคนใชเว็บไซดแทนเว็บเพจ ใชโฮมเพจ
แทนเว็บไซด ปนกันไป อยางไรก็ดคนไทยหลายคนคุนเคยกับคําวา โฮมเพจ มากกวา เว็บเพจ
ี
ดังนั้นการสื่อสารบางครั้งตองระวัง
เว็บเบราวเซอร (Web Browser)
เอกสารเว็บทีพัฒนาแลวสามารถเรียกดูไดดวยโปรแกรมเว็บเบราวเซอร
่ (Web
Browser) โดยโปรแกรมจะทําหนาแปลภาษา HTML หรือภาษาอืนๆ ที่นํามาสรางเอกสารเว็บ
่
แลวแสดงผลดวยขอกําหนดบนจอภาพ โปรแกรมเบราวเซอรตัวแรกไดแก Mosaic ซึ่งพัฒนา
โดยทีมงานจาก NCSA (National Center for Supercomputing Application) มหาวิทยาลัย
อิลลินอยส ประเทศสหรัฐอเมริกา เปนโปรแกรมที่ทําหนาที่แปลคําสั่ง และขอมูลที่อยูในรูป
ของภาษา HTML ใหเปนรูปแบบที่นาสนใจบนจอคอมพิวเตอร
โปรแกรมเบราวเซอรตัวแรกไดแก Mosaic ซึ่งพัฒนาโดยทีมงานจาก NCSA (National
Center for Supercomputing Application) มหาวิทยาลัยอิลลินอยส ประเทศสหรัฐอเมริกา เปน
โปรแกรมที่ทําหนาที่แปลคําสั่ง และขอมูลที่อยูในรูปของภาษา HTML ใหเปนรูปแบบที่
นาสนใจบนจอคอมพิวเตอร (http://archive.ncsa.uiuc.edu/SDG/Software/Mosaic/NCSAMosaicHome.html)
รูปแสดงโลโกของเว็บเบราวเซอร Mosaic
ในปจจุบนมีผผลิตโปรแกรมเบราวเซอรออกมาเผยแพรหลายราย เว็บเบราวเซอรแตละ
ั ู
คายแขงขันกันในเรื่องความเร็ว ขนาดแฟมภาพที่มีขนาดเล็ก ฟงกชันชวยเหลือตางๆ เชน ระบบ
ปองกันการบุกรุก การจดจําขอมูลของผูใช การตรวจสอบและปรับปรุงอัตโนมัติ ตัวอยางเว็บเบ
ราวเซอรที่มีการใชกันในปจจุบัน ไดแก
Internet Explorer www.microsoft.com/ie
Netscape www.netscape.com
Mozilla www.mozilla.org
Opera www.opera.com
American Online www.aol.com
Lynx lynx.browser.org
Amaya www.w3.org/amaya
5. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี -5-
รูปแสดงเบราวเซอรคาย Microsoft
รูปแสดงเบราวเซอรคาย Mozilla
เนื่องจากเว็บเบราวเซอรมีการพัฒนาออกมาจากหลากหลายบริษัท แตละบริษัทพัฒนา
ฟงกชนการแสดงผลเอกสารเว็บที่แตกตางกันออกไป การพัฒนาเว็บไซตจึงจําเปนตองศึกษาถึง
ั
คุณสมบัติของเว็บเบราวเซอรแตละโปรแกรม ทั้งนี้ไดสรุปคุณสมบัติในการแสดงผลเอกสาร
เว็บ ดังตาราง (ขอมูลจาก http://en.wikipedia.org/wiki/Comparison_of_web_browsers, 14 มิถุนายน 2551)
บุญเลิศ อรุณพิบูลย
6. 6 เว็บไซตงาย รวดเร็วดวย Joomla
VoiceXML/X
XHTML 1.0
XHTML 1.1
Web Forms
Nav LINKs
MathML
XForms
CSS2.1
Frames
Atom
WML
XSLT
Browser
RSS
Java
Amaya Yes No No ? No Yes Yes Yes No No No No No No
AOL Explorer Partial Yes Yes No Yes No No No † No Yes Yes No No No
Avant Partial Yes Yes ? Yes No No No No Yes Yes No No No
Camino Yes Yes Yes No Yes Yes Yes Yes No Partial Partial No No No
Dillo No Partial † No No No No No No No No No No No No
ELinks Partial Yes No ? No No No No No No No No No ?
Epiphany Yes Yes Yes No Yes Yes Yes Yes Yes Partial † Partial † No † No No
Flock Yes Yes Yes ? Yes Yes Yes Yes Yes Yes Yes No No No
Galeon Yes Yes Yes ? Yes Yes Yes Yes No No No No No No
iCab Yes Yes Yes Yes No No No No No Yes No No No No
Internet
Partial Yes Yes No † Yes No No No † No Yes † Yes † No † No No
Explorer
Internet
Explorer for Partial Yes Yes ? Partial No Yes No No No No No No No
Mac
K-Meleon Yes Yes Yes ? Yes Yes Yes No No Yes Yes No No No
Konqueror Yes Yes Yes Yes No Yes Yes No No Yes † Yes † No No No
Links No Yes No Yes No No No No No No No No No No
Lynx No Partial No Yes No No No No No No No No No No
Maxthon Partial Yes Yes ? Yes No No No No Yes Yes No No No
Mosaic No No No ? No No No No No No No No No No
Mozilla Yes Yes Yes Yes Yes Yes Yes Yes No No No No No No
Mozilla Firefox Yes Yes Yes No † Yes Yes Partial † Yes Yes Yes Yes No † No No
Netscape Yes Yes Yes ? Yes Yes Yes Yes No No No No No No
Netscape
Depends Yes Yes ? Yes Depends Depends Depends No Yes Yes No No No
Browser
Netscape
No Yes Yes No No No No No No No No No No No
Navigator
Netscape
Yes Yes Yes No Yes Yes Yes Yes Yes Yes Yes No No No
Navigator 9
OmniWeb Yes Yes Yes ? No Yes Yes No No Yes Yes No No No
Opera Yes Yes Yes Yes Yes Yes Yes Yes † No Yes Yes Yes Yes Yes
e-Capsule TM
Yes Yes Yes Yes Yes Yes Yes Yes Partial No No No No No
Private Browser
Safari Yes Yes Yes No Yes Yes Yes No No Yes Yes No No No
7. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี -7-
VoiceXML/X
XHTML 1.0
XHTML 1.1
Web Forms
Nav LINKs
MathML
XForms
CSS2.1
Frames
Atom
WML
XSLT
Browser
RSS
Java
SeaMonkey Yes Yes Yes Yes Yes Yes Yes Yes Yes No No No No No
Shiira Yes Yes Yes ? Yes Yes Yes No No Yes Yes No No No
WorldWideWeb No No No ? No No No No No No No No No ?
w3m ? Yes No ? No Yes ? No ? No No No No No
Markup Language
Markup Language หรือภาษากํากับ เปนภาษาทีนิยมใชในการพัฒนาเอกสารเว็บ
่
มีลักษณะโครงสรางคือ พิมพในเครื่องหมาย < > และมีการเปด/ปดคําสั่ง เพื่อระบุตําแหนง
เริ่มตนคําสั่ง และตําแหนงสุดทายของคําสั่ง ภาษากํากับที่รูจักกันดีในการพัฒนาเว็บ ก็คอภาษา
ื
HTML ในปจจุบันมีการพัฒนาภาษากํากับหลายลักษณะ นอกเหนือจาก HTML เชน ภาษา
XHTML (eXtensible HTML), XML (eXtensible Markup Language), MathML (Math Markup
Language)
HTML
HTML หรือ HyperText Markup Language เปนภาษาคอมพิวเตอรรปแบบหนึ่ง ทีมี
ู ่
ลักษณะเปนภาษาในเชิงการบรรยายเอกสารไฮเปอรมีเดีย (Hypermedia Document Description
Language) เพือนําเสนอเอกสารนั้นเผยแพรในระบบเครือขาย WWW (World Wide Web) มี
่
โครงสรางการเขียนที่อาศัยตัวกํากับ เรียกวา แท็ก (Tag) ควบคุมการแสดงผลของขอความ,
รูปภาพหรือวัตถุอื่นๆ ผานโปรแกรมเบราวเซอร (Browser)
HTML มีพัฒนาจากภาษา SGML (Standardized General Markup Language) โดย
นํามาปรับปรุงใหใชงานไดงายขึ้น สะดวกกวา SGML พัฒนามาเรื่อยๆ จาก HTML 2 จนถึง
4.01 ในปจจุบน รายละเอียดการพัฒนาภาษา HTML สามารถศึกษาไดจาก http://www.w3.org
ั
<HTML>
<HEAD>
<TITLE>ทดสอบการสรางเอกสารเว็บ</TITLE>
</HEAD>
<BODY>
ทดสอบการสรางเอกสารเว็บ<BR>
การสรางเอกสารเว็บ จะอาศัยภาษา HTML
<IMG SRC= “image.jpg”>
</BODY>
</HTML>
บุญเลิศ อรุณพิบูลย
8. 8 เว็บไซตงาย รวดเร็วดวย Joomla
SGML
SGML (Standardized Markup Language) เปนภาษาตนแบบของภาษากํากับทั้งหมด
พัฒนามาในป ค.ศ. 1986 เนื่องจากปญหาในการแลกเปลี่ยนเอกสารขอมูลระหวางกันในระบบ
เครือขายอินเทอรเน็ตยุคแรกๆ จึงมีนักวิจยกลุมหนึ่ง พัฒนาเครื่องมือในการแลกเปลี่ยนขอมูล
ั
ระหวางกัน ซึงคุณสมบัติเบืองตนของเครื่องมือดังกลาว คือ ตองยืดหยุน สามารถรองรับขอมูล
่ ้
รูปแบบแปลกๆ ในอนาคตได ใชไดทวโลก และในคอมพิวเตอรทุกรูปแบบ จากขอกําหนด
ั่
ดังกลาว จึงเกิดภาษา SGML มีการเก็บขอมูลในรูปรหัส ASCII เพราะคอมพิวเตอรทั่วไป
สามารถอานขอมูลลักษณะนีไดเหมือนๆ กัน และแบงการทํางานของ SGML เปน 2 สวนคือ
้
สวนประกาศโครงสรางขอมูล (DTD: Document Type Definition) ทําหนาที่
ประกาศรายละเอียดของแท็กี่จะใชแสดงขอมูล
สวนตัวเอกสาร (Document Body) เปนสวนหลักของเอกสาร ประกอบดวยแท็ก
คําสั่งตางๆ
ภาษา SGML เปนขอกําหนด (เชนเดียวกับมาตรฐาน ISO) ที่กาหนดวิธีการอธิบาย
ํ
โครงสรางของเอกสารฝงไวในตัวเอกสารเอง หมูนักศึกษา อาจารยและผูจดทําเอกสาร
ั
อิเล็กทรอนิกส นิยมใช SGML ในการสรางรูปแบบตางๆ จากเอกสารฉบับเดียว และใชในการ
นําเอาเอกสารมาใชใหม อยางไรก็ตาม SGML ไมไดรบความนิยมมากนัก เพราะมีความยุงยาก
ั
ในการนําไปประยุกตใชงาน การจัดเก็บขอมูล ความยืดหยุนและลักษณะเฉพาะที่เกินความ
ตองการ ทําใหยากตอการเขียนโปรแกรม
XML
XML (eXtensible Markup Language) ถูกออกแบบมาเพื่อใหผูสรางเอกสารสามารถ
นําไปใชงานในรูปแบบวิธีการที่งาย มีความชัดเจนและเปนเซตยอยของ SGML (Standard
Generalized Markup Language) ซึ่งเปนภาษาที่นยมใชและไดรับการพัฒนาใหมีประสิทธิภาพ
ิ
สูงสุดในการทํางานบนเว็บ โดย XML ประกอบดวย 3 สวนพื้นฐานดวยกัน คือ เอกสารขอมูล
(Data document) เอกสารนิยามความหมาย (definition document) และนิยามภาษา (definition
language)
XML เปนภาษาที่กําลังมาแรงมากที่สุด สําหรับใชในการพัฒนาระบบขอมูลขาวสารใน
ปจจุบัน ดวยความงายในการนําไปใชงานสําหรับการแลกเปลี่ยนขอมูลขาวสารทาง
อิเล็กทรอนิกสหรือ EDI ทําใหสามารถนํารูปแบบขอมูลกลับมาพัฒนาใชใหมได จึงทําใหลด
เวลาในการพัฒนาและการสรางขึ้นมาใหม
9. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี -9-
Style Sheet Technology
เทคโนโลยีสไตลชีท เปนสวนเพิ่มเติมขยายความสามารถของ Markup Language ชวย
ใหการแสดงผลเอกสารเว็บ มีความสวยงาม มาตรฐาน ระบบระเบียบในทิศทางเดียวกัน
CSS
CSS (Cascading Style Sheet) ถูกนํามาใชในการควบคุมการแสดงผลเอกสารของ
เอกสาร HMTL และ XML ทั้งนี้ CSS มีจดเดน คือ การควบคุม HTML แท็กแตละตัว และการ
ุ
ควบคุมการแสดงผลกราฟกตางๆ ที่สามารถทําไดงาย นอกจากนี้เมื่อมีการเปลี่ยนแปลง
ขอกําหนดของ CSS ในเอกสารหลัก ก็จะมีผลตอเพจอื่นๆ ทั้งหมด ทําใหประหยัดเวลาในการ
ปรับเปลี่ยนแกไขเว็บไซต อยางไรก็ตาม CSS ก็ยังมีปญหาการแสดงบนเบราวเซอรตางคายตาง
รุน กอนใชงาน CSS จึงควรตรวจสอบผลกับเว็บเบราวเซอรใหครบ หรือมากที่สุด
<STYLE TYPE="text/css">
<!--
body { text-decoration: none;
color: navy;
font-family: "arial";
font-size: 12pt;
font-weight: medium; }
-->
</STYLE>
XSL
XSL ยอมาจาก the eXtensible Style Language เปนมาตรฐานใหมที่เกิดขึ้นมาเพือ ่
รองรับกับขอมูลที่เปน XML ทั้งนี้ XSL จะเปนสวนทีบอกวาขอมูล หรือเอกสารที่จดเก็บเปน
่ ั
แฟมเอกสาร XML จะมีการแสดงผลเปนรูปรางหนาตาเชนไร นอกจากนี้ยังใช XSL ในการ
แปลงรูปแบบ (format) ของขอมูลไดดวย เชน แปลงเอกสาร XML ไปเปน HTML หรือ PDF
เปนตน
เอกสาร XSL คลายกับเอกสาร CSS ในกรณีที่ทั้งสองเอกสารมีการกําหนดสไตลที่
ประยุกตไปยัง element ที่แนนอน แตมีสงแตกตางกันเล็กนอย CSS จะกําหนดสไตลการพิมพ
ิ่
เฉพาะ HTML Element เทานั้น ในทางตรงขาม XSL สามารถที่จะควบคุมขอมูลที่สงออกมาได
อยางสมบูรณกวา อีกทั้งขอมูลที่จะนําเสนอนั้นจะมีอิสระตอการปรับปรุงหรือเพิ่มขอมูล XSL
ใหสามารถจัดเรียงและกรองขอมูล XML ไดงายกวาดวย
บุญเลิศ อรุณพิบูลย
10. 10 เว็บไซตงาย รวดเร็วดวย Joomla
รูปภาพ
เอกสารเว็บคงขาดสวนแสดงผลดวยรูปภาพมิไดอยางแนนอน อยางไรก็ตามการ
นําเสนอรูปภาพสําหรับเอกสารเว็บก็มีฟอรแมตภาพเฉพาะ ภาพกราฟก หรือรูปกราฟกที่
นํามาใชในการทําเว็บเพจ หรือนํามาใชในอินเทอรเน็ต จะตองเปนแฟมลักษณะเฉพาะ ปจจุบนั
นิยมใชกัน 3 ฟอรแมต คือ
• แฟมภาพฟอรแมต JPEG (Joint Photographer’s Experts Group File)
• แฟมภาพฟอรแมต GIF (Graphics Interlace File)
• แฟมภาพฟอรแมต PNG (Portable Network Graphics)
แฟมภาพสกุล GIF (Graphics Interlace File)
ภาพกราฟกสกุล GIF พัฒนาโดยบริษัท CompuServe จัดเปนแฟมภาพสําหรับ
การเผยแพรผานอินเทอรเน็ตตั้งแตยุคแรก เนื่องจากมีลักษณะเดน คือ
• สามารถใชงานขามระบบ (Cross Platform) ไมวาจะใช Windows หรือ Unix ก็
สามารถเรียกใชแฟมภาพสกุลนี้ได
• มีขนาดแฟมเอกสารเล็กจากเทคโนโลยีการบีบอัดภาพ ทําใหสามารถสงแฟม
ภาพไดรวดเร็ว
• สามารถทําพื้นของภาพใหเปนพื้นแบบโปรงใสได (Transparent)
• มีระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสูละเอียดในระบบ Interlace
• มีโปรแกรมสนับสนุนการสรางจํานวนมาก
• เรียกดูไดกับ Graphics Browser ทุกตัว
• ความสามารถดานการนําเสนอแบบภาพเคลื่อนไหว (GIF Animation)
• แฟมภาพชนิดนี้ก็มีจุดดอยในเรื่องของการแสดงสี ซึ่งแสดงไดเพียง 256 สี
แฟมภาพสกุล JPG (Joint Photographer’s Experts Group)
เนื่องจากแฟมภาพสกุล GIF แสดงผลไดเพียง 256 สี จึงมีการพัฒนาแฟมภาพสกุล
JPEG เพื่อสนับสนุนสีไดถง 24 bit และคุณสมบัติอื่นๆ อีกคือ
ึ
11. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 11 -
• สามารถใชงานขามระบบ (Cross Platform) หมายความวา ระบบคอมพิวเตอร
ทุกระบบ ไมวาจะใช Windows, Unix ก็สามารถเรียกใชแฟมภาพสกุลนีได
้
• สามารถกําหนดคาการบีบแฟมไดตามที่ตองการ ดวยเทคนิคการบีบอัดคง
สัญญาณหลัก (Lossy compression) โดยนําบางสวนของภาพที่ซําซอนออกไป
้
คงไวเฉพาะขอมูลสําคัญเทานั้น
• มีระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสูละเอียดในระบบ Progressive
คลาย Interlaced
• มีโปรแกรมสนับสนุนการสรางจํานวนมาก
• เรียกดูไดกับ Graphics Browser ทุกตัว
อยางไรก็ตามแฟมภาพสกุลนี้ก็มีจุดดอย คือ
• พื้นของภาพโปรงใสไมได
• ถามีการบันทึกซ้ําหลายๆ ครั้ง จะทําใหคณภาพของภาพลดลงไปดวย
ุ
แฟมภาพสกุล PNG (Portable Network Graphics)
แฟมภาพสกุลลาสุดที่นําจุดเดนของแฟมภาพ GIF และ JPEG มาพัฒนารวมกัน ทําให
ภาพในสกุลนีแสดงผลสีไดมากกวา 256 สี และยังสามารถทําพื้นภาพใหโปรงใสได จึงเปนไฟล
้
ภาพที่ไดรับความนิยมมากในปจจุบันดวยอีกสกุลหนึ่ง คุณสมบัติของภาพคือ
• สามารถใชงานขามระบบ (Cross Platform) หมายความวา ระบบคอมพิวเตอรทุก
ระบบ ไมวาจะใช Windows, Unix ก็สามารถเรียกใชแฟมภาพสกุลนี้ได
• ขนาดแฟมภาพเล็ก ดวยเทคนิคการบีบอัดคงสัญญาณ LZW
• สามารถทําภาพโปรงใสจากสีพื้น 256 ระดับ
• แสดงภาพแบบสอดประสานเชนเดียวกับ GIF โดยมีความคมชัดที่ดีกวา
• มีคุณสมบัติ Gamma ทําใหภาพสามารถปรับตัวเองไดตามจอภาพ และปรับระดับ
ความสวางที่แทจริงตามที่ควรจะเปน
บุญเลิศ อรุณพิบูลย
12. 12 เว็บไซตงาย รวดเร็วดวย Joomla
การออกแบบเว็บเพจ
การออกแบบและพัฒนาเว็บเพจ สามารถทําไดหลายระบบ ขึ้นอยูกบลักษณะของ
ั
ขอมูล ความชอบของผูพัฒนา ตลอดจนกลุมเปาหมายที่ตองการนําเสนอ เชน หาก
กลุมเปาหมายเปนเด็กวัยรุน และนําเสนอขอมูลเกี่ยวกับความบันเทิง อาจจะออกแบบใหมี
ทิศทางการไหลของหนาเว็บที่หลากหลายใชลูกเลนไดมากกวาเว็บทีนําเสนอใหกับผูใหญ หรือ
่
เว็บดานวิชาการ ทั้งนี้การออกแบบเว็บเพจ สามารถแบงไดสามลักษณะ คือ
• แบบลําดับขั้น (Hierarchy) เปนการจัดแสดงหนาเว็บเรียงตามลําดับกิ่งกานแตก
แขนงตอเนื่องไปเหมือนตนไมกลับหัว เหมาะสําหรับการนําเสนอขอมูลที่มี
การแบงเปนหมวดหมูทไมมากนัก และมีขอมูลยอยไมลกมาก เชนเว็บไซตแนะนํา
ี่ ึ
ประวัติสวนตัว ที่มีขอมูล 4 - 5 หนาเปนตน
• แบบเชิงเสน (Linear) เปนการจัดแสดงหนาเว็บเรียงตอเนื่องไปในทิศทางเดียว
เหมาะสําหรับการนําเสนอขอมูลที่เปนรูปภาพ เชนเว็บไซตนําเสนอสไลดจาก
Microsoft PowerPoint
• แบบผสม (Combination) เปนการจัดหนาเว็บชนิดผสมระหวางแบบลําดับขั้น และ
แบบเชิงเสน มักจะเปนแบบที่นิยมใชกันอยางแพรหลายในปจจุบน เนืองจาก
ั ่
สามารถควบคุมการนําเสนอและการเรียกดูไดสะดวก และรวดเร็ว
13. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 13 -
หลักการพัฒนาเว็บเพจ
การพัฒนาเว็บเพจ ควรมีการวางแผนกอนเสมอ เพื่อใหการแสดงผลเว็บถูกตอง ตรงกับ
ความตองการ เพราะขบวนการพัฒนาเว็บเพจ จะตองเกียวของกับระบบปฏิบัติการหลายระบบ
่
กลาวคือ ขณะที่สรางเอกสารเว็บ ผูพฒนาอาจจะใชคอมพิวเตอรทมระบบปฏิบัติการ MS
ั ี่ ี
Windows แตหลังจากทีพัฒนาเสร็จแลวจะตองโอนเอกสารเว็บไปเก็บไวในเครื่องบริการเว็บ
่
(Web Server) ซึ่งมักจะเปนเครื่องที่ใชระบบปฏิบัติการ UNIX หรือไมก็ Windows 2000
เอกสารเว็บที่โอนไปยังเครื่องบริการเว็บนี้ อาจจะถูกเรียกดูจากคอมพิวเตอรระบบอื่นๆ เชน
Macintosh ซึ่งใชระบบปฏิบัติการ System 7 จะเห็นไดวาเอกสารเว็บจะตองเกี่ยวของกับ
ระบบปฏิบัติการหลายระบบ ดังนั้นการพัฒนาเว็บเพจตองคํานึงถึงสิ่งเหลานี้ดวย
Macintosh
FTP Browse
PC: Win Me Intranet
พัฒนาเว็บบนระบบ Win98/Me/XP Web Server
Win2000/Unix
รูปแสดงการทํางานของเอกสารเว็บที่สัมพันธกับระบบปฏิบัตการตางๆ
ิ
จากความสัมพันธดงกลาว นักพัฒนาเว็บเพจ จึงควรจะศึกษาถึงขอกําหนดพืนฐานที่
ั ้
ควรทราบกอน อันไดแก การกําหนดชื่อโฟลเดอร แฟมเอกสารเว็บ แฟมภาพกราฟก ตลอดจน
แฟมเอกสารอืนๆ ที่จะนํามาใชในการทําเว็บเพจ เพราะระบบปฏิบัติการ UNIX มีลักษณะการ
่
ตั้งชื่อแบบ Case-Sensitive หมายถึง ตัวอักษรตัวพิมพใหญ และตัวพิมพเล็ก (A และ a) จะถือวา
เปนตัวอักษรคนละตัวกัน ไมเหมือนกับระบบปฏิบัติการดอส และวินโดวส จะถือวาเปน
ตัวอักษรตัวเดียวกัน
Index.html ≠ index.html
ดังนั้นหากผูพฒนาใชระบบปฏิบัติการดอส และวินโดวส สรางเอกสารเว็บ และ
ั
กําหนดชื่อไฟล Index.htm แตขณะที่ปอนคําสั่งเพื่อลิงกแฟมเอกสารผานแปนพิมพเปน
index.html เมือโอนถายเอกสารเว็บนั้นๆ ไปยังเครื่องบริการเว็บที่ใช UNIX เปนระบบปฏิบัติ
่
จะเกิดปญหาในการเรียกดูได เพราะระบบปฏิบัตการที่เครื่องบริการเว็บจะเห็นเปนแฟมคนละ
ิ
แฟม เนื่องจากชื่อแฟมเอกสารไมเหมือนกัน
บุญเลิศ อรุณพิบูลย
14. 14 เว็บไซตงาย รวดเร็วดวย Joomla
ขั้นเตรียมการ
การพัฒนาเว็บไซต ควรกําหนดวัตถุประสงค เปาหมายการจัดทํา ศึกษาจุดเดนจุดดอย
ของเทคโนโลยีที่จะนํามาใชงาน เพื่อใหการพัฒนาเกิดผลสัมฤทธิ์สูงสุด
คําถามเพื่อชวยในการวางแผนเว็บไซต
• ชื่อโครงการ/เว็บไซต
• กลุมเปาหมาย
• วัตถุประสงค/เปาหมาย
• ขอมูลที่ตองการนําเสนอตอกลุมเปาหมาย
• ขอมูลใดที่พรอมสําหรับนําเสนอ
• ขอมูลอื่นๆ ประกอบเว็บไซต
• จํานวนหนาเว็บที่ตองการพัฒนา
• หนวยงาน/กลุม/ทีมงานพัฒนาเว็บไซต
• หัวหนาโครงการ
• ผูบริหารระบบ
• ความถี่ในการปรับปรุงเว็บไซต
• การตรวจสอบขอมูลยอนกลับจากกลุมเปาหมาย
• ผูรับผิดชอบตรวจสอบขอมูลยอนกลับจากกลุมเปาหมาย/ตอบคําถาม
• คียเวิรดสําหรับเว็บไซต
• หมวดของเว็บไซต
• การประชาสัมพันธเว็บไซต
• ระบบคอมพิวเตอร เครือขายที่ตองการ
• เทคโนโลยีที่ตองการ
• Domain name สําหรับเว็บไซต
กําหนดโครงรางของเว็บ
การกําหนดโครงรางของเว็บ เปนขั้นตอนสําคัญขั้นแรกก็วาได เพราะเอกสารเว็บที่
สรางจะเพิ่มจํานวนเรื่อยๆ และมีจุดเชื่อม (Link) จํานวนมาก หากไมมการวางแผนไวกอน จะ
ี
ทําใหการปรับปรุง แกไขเกิดปญหาไดงาย ปญหาที่ประสบแนนอนคือ ลืมวาแฟมเอกสารที่เคย
สรางไวแลว มีชื่ออะไรบาง ซึ่งจะสงผลใหการทําจุดเชื่อมเกิดปญหาตามไปดวย เพราะแฟม
เหลานี้อาจจะทิ้งชวงเวลานานพอสมควร จึงจะปรับปรุงอีกครั้ง วิธีการที่ดีที่สดเพื่อปองกัน
ุ
15. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 15 -
ปญหาดังกลาว ควรวางแผนออกแบบเอกสารเว็บบนกระดาษ และกําหนดชื่อแฟมเอกสารเว็บ
แตละแฟม จากขั้นตอนนีจะทําใหผูพฒนาสามารถมองเห็นภาพการไหล (Data Flow) ของ
้ ั
เอกสารเว็บไดชัดเจน และพิจารณาตอไดวาเอกสารเว็บแตละแฟมมีความสัมพันธกบเอกสาร
ั
อื่นๆ อยางไร และสัมพันธกบแฟมเอกสารใดบาง
ั
การกําหนดชื่อแฟมเอกสารเว็บ มีขอกําหนดทีแตกตางไปจากการกําหนดชื่อแฟม
่
เอกสารปกติทวไป คือ
ั่
ชื่อแฟมและนามสกุล จะถูกควบคุมจาก Web Administer ดังนั้นผูพฒนาที่ไมใช
ั
Web Administer จะตองสอบถามกฎการตั้งชื่อโดยละเอียด โดยปกติ มีหลักคราวๆ
ดังนี้
- ควรใชตัวอักษร a – z หรือตัวเลข 0 – 9 หรือผสมกัน
- ตัวอักษร a – z ควรเปนตัวพิมพเล็ก
- หามใชเครื่องหมายอื่นใดรวมทั้งชองวาง ยกเวน Dash (ขีดกลาง)
นอกจากนี้ยังจะตองพิจารณาถึงลักษณะหนาเว็บ, ลักษณะของสีพื้น, สีอักษรและสีของ
จุดเชื่อม (Links) ดวย โดยสามารถรางหนาเว็บคราวๆ เพื่อใหเห็นภาพโดยรวมกอนสรางงาน
จริง รวมทั้งการใชสีของหนาเว็บ ควรใชสีที่อานงาย สบายตา และมีลักษณะรวมกันในทุกๆ
หนาเว็บ ไมควรเปลี่ยนสีพนใหฉดฉาด รวมทั้งศึกษาหนาเว็บไซตที่มการพัฒนาในเครือขายเพื่อ
ื้ ู ี
เปนแนวทางในการออกแบบ
รูปแสดงภาพรางของหนาเว็บ
บุญเลิศ อรุณพิบูลย
16. 16 เว็บไซตงาย รวดเร็วดวย Joomla
กําหนดโฟลเดอร (Folder) ที่ใชเก็บเอกสารเว็บ
การกําหนดโฟลเดอรกอนที่จะสรางชุดเอกสารเว็บเพจ เปนลําดับขั้นตอนที่ควรปฏิบัติ
ดวยทุกครั้ง เพื่อใหเอกสารเว็บแตละชุดมีระบบการจัดเก็บที่เปนระบบ สามารถคนหา และ
เรียกใชงานไดสะดวก ในการสรางชุดเอกสารเว็บแตละชุด จะมีไฟลตางๆ จํานวนมาก ทั้งไฟล
เอกสาร HTML, ไฟลภาพกราฟก, ไฟลเสียง, ไฟลวดิทัศน และอื่นๆ ทีเ่ กี่ยวของ ไฟลทั้งหมดนี้
ี
ควรจัดเก็บไวในที่ที่เดียวกัน อาจจะสรางโฟลเดอรยอยเพื่อแยกกลุมไฟลได แตจะตองสราง
ภายใตโฟลเดอรหลักที่สรางไวกอนแลว ไมควรแยกไวคนละที่ เพราะจะทําใหการจัดการเว็บมี
ปญหายุงยากได (การตั้งชื่อโฟลเดอรใชหลักการเดียวกับชื่อไฟล)
การสรางโฟลเดอร
เลือกไดรฟและโฟลเดอรหลักที่ตองการสรางโฟลเดอรยอย
เลือกเมนูคําสั่ง File, New, Folder ปรากฏไอคอนโฟลเดอร ชื่อ New Folder
พิมพชื่อโฟลเดอรใหม หากไมสามารถพิมพได ใหกดปุมฟงกชัน @ กอน
เมื่อพิมพชื่อโฟลเดอรเสร็จแลว ใหกดปุม E
สามารถสรางโฟลเดอรยอยๆ ภายใตโฟลเดอรนี้ได
17. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 17 -
สรางภาพหรือจัดหาภาพที่เกี่ยวของกับเนื้อหา
เอกสารเว็บตองเกี่ยวของกับรูปภาพโดยตรง ดังนั้นควรสรางภาพ หรือจัดหาภาพ แลว
คัดลอกมาไวในโฟลเดอรท่ไดจัดเตรียมไว เพื่อใหสะดวกในการเรียกใชงาน และการบริหาร
ี
เว็บไซตในอนาคตการจัดเก็บไฟลไวในโฟลเดอรที่เตรียมไว ยังรวมถึงไฟลตางๆ ที่จะนํามาใช
ประกอบการสรางเว็บ เชนไฟลเอกสารจากเวิรด กระดาษคํานวณ นําเสนอผลงานตางๆ จะตอง
ดําเนินการลักษณะเดียวกับไฟลภาพเชนกัน ทั้งนี้ชื่อไฟลตางๆ ที่นํามาใชประกอบการสรางเว็บ
ก็ตองตั้งโดยยึดหลักเดียวกับการตั้งชื่อไฟลเอกสารเว็บ
ไฟลภาพที่ไมสามารถนํามาสรางเอกสารเว็บ เพราะมีสวนขยายเปน .bmp, .tif
สรางเอกสารประกอบ
นอกจากภาพแลว อาจจะมีไฟลประกอบอืนๆ เชน Word, PowerPoint, PDF Document
่
ก็จะตองเตรียมไวในโฟลเดอรที่สรางไวใหพรอม โดยอาจจะสรางเปนโฟลเดอรเฉพาะของแต
ละไฟลฟอรแมต
ไฟลเอกสารตางๆ ที่ผิดพลาด เพราะชื่อไฟลเปนภาษาไทย หรือมีชองวาง
เลือกเครืองแมขาย WWW และระบบการสรางงาน
การสรางเว็บไซตในปจจุบน ยอมหนีไมพนความตองการดานโปรแกรมมิ่ง เชน
ั
ตองการตัวนับจํานวนการเขาชมเว็บไซต (Counter) ตองการกระดานขาว (Web board) ตองการ
สมุดเยี่ยม (Guestbook) หรือฟงกชนสูงๆ เชน ระบบสมาชิก แตนักพัฒนาเว็บไซตมักจะลืมไป
ั
วาระบบโปรแกรมบนเว็บ เปนระบบที่สัมพันธกับระบบปฏิบัติการ ดังนั้นกอนสรางเว็บไซต
ควรพิจารณาใหแนนอนวาเว็บที่พัฒนา จะนําไปเก็บไวบนเครื่องแมขายที่ใชระบบปฏิบัติการใด
เพราะหากเลือกผิดพลาด ก็จะทําใหเว็บนั้นมีปญหาอีกมากมาย
บุญเลิศ อรุณพิบูลย
18. 18 เว็บไซตงาย รวดเร็วดวย Joomla
ระบบปฏิบัติการและอื่นๆ ระบบปฏิบัติ Windows ระบบปฏิบัติ UNIX
ภาษาโปรแกรมที่สนับสนุน ASP, VB Script, Java, Perl, PHP, JavaScript, Java
JavaScript
ชื่อไฟลแรก default.htm index.html
นามสกุล .htm, .html มักเปน .html
การตั้งชื่อไฟล, โฟลเดอร สนับสนุนภาษาไทย ภาษาอังกฤษเทานั้น
ดังนั้นการพิจารณาเลือกเครื่องแมขาย WWW และระบบปฏิบัติกอนสรางเว็บไซต จะ
ชวยใหเว็บไซตนั้น ไมเกิดปญหาตามมาทีหลัง เชน รันโปรแกรมไมได, มีปญหาเรื่องการเรียก
ไฟลตางๆ ซึ่งเปนปญหาที่นกพัฒนาเว็บมือใหมเกือบทุกรายประสบ
ั
สรางเอกสารเว็บ
ไฟลเอกสาร HTML เปนไฟลขอความปกติ (Text File) ดังนั้นสามารถใชโปรแกรม
สรางเอกสารโปรแกรมใดก็ได ชวยในการลงรหัสคําสั่ง HTML เชน NotePad, WordPad
นอกจากนี้ในปจจุบันมีโปรแกรมชวยในการสรางเอกสารเว็บอีกหลายระบบ ดังที่แนะนําไป
แลว
จากที่กลาวไววาไฟลเอกสาร HTML เปนไฟลขอความปกติ ดังนั้นเพือใหโปรแกรมเบ
่
ราวเซอรทราบวาไฟลเอกสารนี้ เปนไฟลเฉพาะสําหรับกําหนดรูปแบบการแสดงผลผาน
อินเทอรเน็ต จึงมีลักษณะเฉพาะของไฟลเอกสารรูปแบบนี้คือ ในการจัดเก็บไฟล จะตอง
กําหนดนามสกุล หรือสวนขยายของไฟล (File Extension) เปน .htm หรือ .html โดยขอกําหนด
เกี่ยวกับนามสกุลของไฟลนี้ ขึ้นอยูกับผูบริหารเครือขายเว็บ ดังนั้นกอนสรางเอกสาร HTML
ควรสอบถามจากผูบริหารเครือขายที่ทานจะนําขอมูลไปฝากไวกอนวาใหกําหนดนามสกุลของ
ไฟลอยางไร
นอกจากการกําหนดนามสกุลของไฟล ชื่อไฟลก็เปนอีกสวนหนึ่งที่ผูพัฒนาตอง
ตระหนักดวย เพราะผูใหบริการเผยแพรขอมูล หรือผูดูแลระบบเครือขาย อาจจะกําหนดชื่อไฟล
เอกสาร HTML แตกตางกันออกไป
สําหรับการตั้งชื่อและนามสกุลของไฟล HTML เปนภาษาไทย เปนสิ่งที่ไมควรกระทํา
เปนอยางยิ่ง เพราะระบบปฏิบัติการหลายระบบไมสนับสนุนภาษาไทย และควรใชตัวอักษร
ตัวพิมพเล็กในการกําหนดชื่อและนามสกุลของไฟลทุกครั้ง เพื่อปองกันปญหาการทํางานขาม
ระบบปฏิบัติการ เนื่องจากระบบปฏิบัติการหลายระบบ โดยเฉพาะ UNIX จะเห็นตัวอักษร
ตัวพิมพใหญ และตัวพิมพเล็กเปนคนละตัวกัน (Case-Sensitive)
19. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 19 -
ตรวจสอบเอกสารเว็บ
ขณะที่สรางเอกสารเว็บ ควรตรวจสอบผลผานโปรแกรมแสดงผลเบราวเซอรหลายคาย
หลายรุน (หากทําได) เพราะโปรแกรมเบราวเซอรแตละคาย แตละรุน จะรูจก หรือใหผลลัพธ
ั
จากคําสั่ง HTML ไมเหมือนกัน จะไดทราบขอบกพรอง ขอผิดพลาด และสามารถแกไขไดทัน
กอนที่จะสงขึ้นไปแสดงผลจริงในระบบอินเทอรเน็ต
ขอที่ควรคํานึงถึงในการทําเว็บเชิงพาณิชยกคือ ภาษา HTML เปนภาษาที่ยังไมตาย ยังมี
็
การพัฒนาชุดคําสั่งใหมๆ อยูเรื่อยๆ ดังนั้นอยาพยายามไลตามเทคโนโลยีใหมๆ เหลานี้ ควร
พัฒนาเว็บเพจที่สามารถเรียกดูไดจากเบราวเซอรหลายๆ รุน หลายคาย ดีกวายึดคายใด คายหนึ่ง
หรือรุนใด รุนหนึ่ง มิฉะนั้นอาจจะทําใหพลาดจากลูกคาบางกลุมไปได
ขอมูลจาก http://truehits.net/ (วันที่ 14 มิถุนายน 2551)
สงขอมูลขึ้นเครื่องบริการเว็บ
เมื่อไดพัฒนาเอกสารเว็บ และตรวจสอบผลไดตามที่ตองการแลว ก็สามารถโอนขอมูล
นั้นๆ ไปยังเครื่องบริการเว็บได โดยใชโปรแกรมกลุมถายโอนขอมูล (FTP Software) เชน
WinFTP, CuteFTP รวมทั้งฟงกชัน FTP ของ Macromedia Dreamweaver เปนตน
กอนโอนขอมูล จะตองขอสิทธิ์และพื้นที่จากผูดูแลระบบกอนเสมอ และตลอดจนตอง
สอบถามขอมูลที่จําเปนในการโอนขอมูล เชนชื่อบัญชีของผูมสิทธิ์ (Login Name / Account
ี
Name), รหัสผานของบัญชี (Password) เปนตน
บุญเลิศ อรุณพิบูลย
20. 20 เว็บไซตงาย รวดเร็วดวย Joomla
ตัวอยางขอมูลเครื่องบริการเว็บ (Web Server)
Site Name abc.com
Email Contact administrator@abc.com
DNS Primary Name Server:
ns5.thdns.net 111.111.111.111
Secondary Name Server:
ns6.thdns.net 222.222.222.22
Admin Site www.abc.com/admin
Administrator User Name abc
Password bbc9999
Mail Site www.abc.com/mail
User Site www.abc.com/user
Name Based Address 111.111.111.111
FTP 333.333.333.333
Username webmaster@abc.com
Password Abc9090
Disk Space 500.0 MB
21. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 21 -
เครื่องมือพัฒนาเว็บ
การพัฒนาเว็บเพจ สามารถกระทําไดโดยการใชภาษา HTML ซึ่งมีลักษณะการเขียน
โปรแกรมภาษาดวยวิธีการลงรหัสคําสั่ง คลายกับการเขียนโปรแกรมภาษาคอมพิวเตอรทั่วๆ ไป
แตในปจจุบันมีเครื่องมือชวยพัฒนาหลากหลายรูปแบบ ทั้งแบบชวยลงรหัส HTML และแบบ
สรางงานอัตโนมัติ (Wizard) ทั้งนี้สามารถจําแนกการสราง/พัฒนาเว็บเพจดวยโปรแกรมตางๆ
ได 4 วิธี คือ
• การพัฒนาเว็บเพจดวยการลงรหัส HTML ดวยโปรแกรม Text Editor
• การพัฒนาเว็บเพจดวยการลงรหัส HTML ดวยโปรแกรม HTML Editor
• การพัฒนาเว็บเพจดวยโปรแกรมสรางงานอัตโนมัติ หรือ HTML Generator
• การพัฒนาเว็บเพจดวยซอฟตแวรบริหารจัดการเนื้อหา (Content Management
Software)
Text Editor
การใช Text Editor เชน NotePad, Qeditor เปนวิธีที่เหมาะสําหรับนักพัฒนาเว็บเพจทีมี
่
ความรูเกี่ยวกับภาษา HTML ในระดับสูง และตองการใสลูกเลนใหกบเว็บเพจ เพราะผูพัฒนา
ั
สามารถควบคุมตําแหนง และจํานวนรหัสคําสั่งไดอสระ อยางไรก็ตามวิธีนี้ก็ไมเหมาะสําหรับ
ิ
ผูพัฒนาในระดับตน เพราะตองศึกษาคําสัง HTML และใชเวลาในการพัฒนาพอสมควรในแต
่
ละหนาเว็บ ตลอดจนไมเห็นผลลัพธจากการปอนคําสั่งทันที ตองเรียกผานโปรแกรมเบราวเซอร
บุญเลิศ อรุณพิบูลย
22. 22 เว็บไซตงาย รวดเร็วดวย Joomla
HTML Editor
โปรแกรม HTML Editor ที่นิยมกันอยางสูงในปจจุบน ไดแก โปรแกรม HomeSiteX,
ั
Coffee Cup HTML Editor, HTML Assistant, HotDog Professional โดยโปรแกรมเหลานี้ จะ
ชวยใหการลงรหัสกระทําไดสะดวก และรวดเร็ว เพราะมีปุมคําสั่งควบคุมรหัสคําสั่ง HTML
คลายๆ กับปุมคําสั่งใน Microsoft Office อยางไรก็ตามโปรแกรมกลุมนี้ก็มีจุดดอย คือ จะไม
รูจักคําสั่ง HTML ใหมๆ จึงไมมีปุมคําสั่งเหลานี้ ผูใชยังตองพิมพเองเชนเดิม
จอภาพโปรแกรม HTML Editor
HTML Generator
HTML Generator เปนโปรแกรมรุนใหม ที่ชวยใหการพัฒนาเอกสารเว็บ กระทําได
สะดวก และรวดเร็ว เพราะการปอนขอมูลในโปรแกรมเหลานีจะกระทําคลายกับการปอน
้
ขอมูลใน Microsoft Word มีปุมคําสั่งเชนเดียวกัน ตลอดจนผูใชสามารถเห็นผลจากการใชคําสั่ง
ไดทันที ซึ่งเรียกวาการทํางานแบบ WYSIWYG (What You See Is What You Get) หลังจาก
นั้นโปรแกรมจะแปลงเอกสารนั้นเปนเอกสาร HTML ใหโดยอัตโนมัติ โดยที่ผูใชไมตองยุงยาก
กับศึกษาชุดคําสั่ง HTML ตลอดจนการลงรหัส HTML อยางไรก็ตามโปรแกรมกลุมนี้ก็มีจุด
ดอยที่วา ชุดคําสั่ง HTML ในโปรแกรมแตละโปรแกรมจะมีจากัด และบางโปรแกรมยังไม
ํ
สนับสนุนการทํางานกับภาษาไทย หรืออาจจะตองปรับปรุงโปรแกรมกอน จึงจะใชงาน
ภาษาไทยได ซึ่งสรางความยุงยากใหกับผูใชไดพอสมควร ตัวอยางโปรแกรมในกลุมนี้ เชน
MS-Office 97/2000/XP, FrontPage 97/98, Netscape Editor, Netscape Composer, Macromedia
DreamWeaver และ Yahoo SiteBuilder
23. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 23 -
จอภาพโปรแกรม Yahoo Site Builder
โปรแกรมบริหารจัดการเนื้อหาเว็บ (CMS)
ปจจุบันมีการพัฒนาซอฟตแวรทําหนาที่บริหารจัดการเนื้อหาเว็บ (CMS: Content
Mnagement System) ที่ประกอบดวยฟงกชันการทํางานตางๆ เชน การจัดการสมาชิก การ
จัดการหมวดเนื้อหา การจัดทําแบบสํารวจพรอมใชงานอยางไรก็ตามผูใชจะตองมีความรูใน
ดานระบบปฏิบัติการในระดับที่สูงมาก รวมทั้งตองมีเครื่องแมขายเว็บพรอมใชงาน โปรแกรม
ในกลุมนี้ไดแก PHPNuke, PostNuke, Joomla, Mambo, Drupal
รูปแสดงสวนควบคุมการจัดการเนื้อหาลักษณะตางๆ ของโปรแกรม PHPNuke
บุญเลิศ อรุณพิบูลย
24. 24 เว็บไซตงาย รวดเร็วดวย Joomla
CMS เครื่องมือเด็ดพัฒนาเว็บไซต
การออกแบบพัฒนาเว็บไซตในปจจุบันไดกาวไปอีกขัน จากเดิมทีที่ผูพัฒนาจะตอง
้
ศึกษาภาษา HTML หรือเว็บโปรแกรมมิ่งเชน PHP ASP แตดวยพัฒนาการของเทคโนโลยีเว็บ
ในดานเครื่องมือออกแบบเว็บไซตสําเร็จรูปที่เรียกวา ซอฟตแวรบริหารจัดการเนือหาเว็บไซต
้
(Content Management System: CMS) ทําใหการออกแบบพัฒนาเว็บไซตเปนเรื่องงาย สะดวก
และรวดเร็ว
CMS เปนซอฟตแวรที่ออกแบบมาเพื่อชวยอํานวยความสะดวกในการบริหารจัดการ
เอกสารและเนือหารูปแบบตางๆ โดยเฉพาะสื่อดิจิทัลของเว็บไซต โดยมาก CMS จะเปน
้
ซอฟตแวรที่ทางานผานระบบเครือขาย พัฒนาดวยภาษาคอมพิวเตอรสําหรับเว็บ (Web
ํ
Programming) เชน PHP, ASP ผสานกับระบบจัดการฐานขอมูล ปจจุบัน CMS ที่ชวยในการ
ออกแบบเว็บไซตมีหลากหลาย เชน Joomla, Mambo, PHPNuke, PostNuke, Drupal ซึ่งทานที่
สนใจสามารถเปรียบเทียบความสามารถของ CMS ไดที่เว็บไซต http://www.cmsmatrix.org
รูปแสดงเว็บไซต www.cmsmatrix.org
การเปรียบเทียบก็ทําไดไมยาก โดยคลิกเลือก CMS ที่ตองการเชน Drupal กับ Joomla
แลวคลิกปุม compare รอสักครูจะปรากฏรายงาน ดังนี้
26. 26 เว็บไซตงาย รวดเร็วดวย Joomla
Joomla: CMS เด็ดนาใช
Joomla นับเปน CMS ที่มีความโดดเดนมากโปรแกรมหนึ่ง เนื่องจากรองรับงานที่
หลากหลาย และเนื้อหาหลากฟอรแมต ดวยการพัฒนาในรูปแบบเปดเผยตนฉบับ (Open
Source) ทําใหมีชุมชนนักพัฒนาขนาดใหญที่รวมกันพัฒนาโปรแกรมเสริม (Extensions)
ตลอดเวลา
รูปแสดงการเลือกใช Joomla, Mambo และ Drupal จากเว็บ trends.google.com
(ณ วันที่ 13 กรกฎาคม 2551)
Joomla เปนซอฟตแวรทมีระบบจัดการเนื้อหาอยางเปนระบบ ทั้งการจัดหมวดหมู
ี่
การนําเขา การเผยแพร และกระบวนการทํางานกับผูใชประเภทตางๆ สามารถนําไปประยุกตใช
กับงานไดหลากหลาย ทั้งเว็บสวนตัว เว็บหนวยงาน เว็บจัดการความรู เว็บทางการคา และ
การศึกษา สําหรับทานที่สนใจเลือกใช Joomla สามารถดาวนโหลดที่ http://www.joomla.org
รูปแสดงเว็บ joomla.org
27. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 27 -
ฟงกชันทํางานในสวน CMS ของ Joomla มีลักษณะเปน Graphics User Interface ทํา
ใหงายตอการจัดการเนื้อหาที่มีความหลากหลายทางดานรูปแบบ โดยมีจดเดนดังนี้
ุ
1. Front-end และ Back-end
Joomla มีหนาเว็บไซตสําหรับการเขาชมของผูเยี่ยมชมและสามารถล็อกอิน
เพื่อเขาทํางานของสมาชิก เรียกวา Front-end รวมทั้งไดออกแบบสวนทํางาน
เบื้องหลังที่เรียกวา Back-end เพื่อควบคุมระบบการทํางานในภาพรวมของ
Joomla โดยแยก URL ออกจากกันอยางชัดเจน
2. Access rights
Joomla กําหนดสิทธิ์ในการเขาถึงเนื้อหาของเว็บไวหลายรูปแบบ โดยแยกเปน
สิทธิ์เขาถึงจากหนาเว็บ Front-end และ Back-end แตกตางกันออกไป
3. Content
Joomla แบงประเภทของเนื้อหาออกเปนหลากหลายประเภท เชน บทความ
เว็บแนะนํา แบบสอบถาม แตจัดการไดงายดวยสวนบริหารจัดการทีจดเตรียม
่ั
มาใหเฉพาะและพรอมใชงาน พรอมระบบติดตาม/นําเสนอเนื้อหาอยางงาย
(Simple workflow system) และการสรุปเนือหาในรูปแบบ RSS
้
จากจุดเดนดังกลาวขางตนสงผลให Joomla เปน CMS ที่ไดรับความนิยมอยางมาก จน
ไดรับรางวัล The Best CMS Award ป 2550
ที่มา: http://www.packtpub.com/article/joomla-wins-best-php-open-source-content-management-system
บุญเลิศ อรุณพิบูลย
28. 28 เว็บไซตงาย รวดเร็วดวย Joomla
ติดตั้ง Joomla บนพีซีจําลอง
หลายๆ ทานทีสนใจใชงาน Joomla คงมีปญหาเกี่ยวกับพื้นที่บริการเว็บ (Web Hosting)
่
เนื่องจากตองอาศัยเครื่องแมขายเว็บ (Web Server) ที่ติดตั้งโปรแกรมภาษา PHP ฐานขอมูล
MySQL แตปญหานี้หมดไปไดโดยการจําลองเครื่องพีซีธรรมดาใหเปนเครื่องแมขายเว็บ
แบบจําลอง ทังนี้โปรแกรมจําลองเครื่องพีซีเปนเครื่องแมขายเว็บจําลอง มีหลายโปรแกรม เชน
้
XAMPP หรือ AppServ ทั้งนี้โปรแกรมทีจะแนะนําในเอกสารคูมือนี้คือ AppServ โปรแกรม
่
สําเร็จรูปที่ประกอบดวยโปรแกรมจําลองเครื่องแมขายเว็บ Apache โปรแกรมจัดการฐานขอมูล
MySQL และโปรแกรมแปลภาษา PHP ไวดวยกัน รุนปจจุบนดาวนโหลดไดที่เว็บไซต
ั
http://www.appservnetwork.com
ไฟลที่ดาวนโหลดมาได คือ appserv-win32-2.5.9.exe เมื่อดับเบิลคลิกจะปรากฏสวน
ติดตั้งโปรแกรม ดังนี้