การพัฒนาเว็บไซต์ด้วย Joomla

1. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี -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 รอสักครูจะปรากฏรายงาน ดังนี้

25. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 25 -
รูปแสดงผลการเปรียบเทียบ CMS จากเว็บไซต cmsmatrix.org
บุญเลิศ อรุณพิบูลย

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 เมื่อดับเบิลคลิกจะปรากฏสวน
ติดตั้งโปรแกรม ดังนี้