Boonlert Aroonpiboon, profile picture
Uploaded byBoonlert Aroonpiboon
9,007 views

Joomla

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

Embed presentation

Downloaded 751 times
1 / 154
2 / 154
3 / 154
4 / 154
5 / 154
6 / 154
7 / 154
8 / 154
9 / 154
10 / 154
11 / 154
12 / 154
13 / 154
14 / 154
15 / 154
16 / 154
17 / 154
18 / 154
19 / 154
20 / 154
21 / 154
22 / 154
23 / 154
24 / 154
25 / 154
26 / 154
27 / 154
28 / 154
29 / 154
30 / 154
31 / 154
32 / 154
33 / 154
34 / 154
35 / 154
36 / 154
37 / 154
38 / 154
39 / 154
40 / 154
41 / 154
42 / 154
43 / 154
44 / 154
45 / 154
46 / 154
47 / 154
48 / 154
49 / 154
50 / 154
51 / 154
52 / 154
53 / 154
54 / 154
55 / 154
56 / 154
57 / 154
58 / 154
59 / 154
60 / 154
61 / 154
62 / 154
63 / 154
64 / 154
65 / 154
66 / 154
67 / 154
68 / 154
69 / 154
70 / 154
71 / 154
72 / 154
73 / 154
74 / 154
75 / 154
76 / 154
77 / 154
78 / 154
79 / 154
80 / 154
81 / 154
82 / 154
83 / 154
84 / 154
85 / 154
86 / 154
87 / 154
88 / 154
89 / 154
90 / 154
91 / 154
92 / 154
93 / 154
94 / 154
95 / 154
96 / 154
97 / 154
98 / 154
99 / 154
100 / 154
101 / 154
102 / 154
103 / 154
104 / 154
105 / 154
106 / 154
107 / 154
108 / 154
109 / 154
110 / 154
111 / 154
112 / 154
113 / 154
114 / 154
115 / 154
116 / 154
117 / 154
118 / 154
119 / 154
120 / 154
121 / 154
122 / 154
123 / 154
124 / 154
125 / 154
126 / 154
127 / 154
128 / 154
129 / 154
130 / 154
131 / 154
132 / 154
133 / 154
134 / 154
135 / 154
136 / 154
137 / 154
138 / 154
139 / 154
140 / 154
141 / 154
142 / 154
143 / 154
144 / 154
145 / 154
146 / 154
147 / 154
148 / 154
149 / 154
150 / 154
151 / 154
152 / 154
153 / 154
154 / 154
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี -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 เว็บไซตงาย รวดเร็วดวย 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- องคประกอบของเทคโนโลยีเว็บ เมื่อเว็บเพจเปนสื่อในการนําเสนอขอมูลที่ไดรบความสนใจมาก การเรียนรูเทคโนโลยี ั ดานนี้ เพื่อนํามาพัฒนาเว็บเพจดวยตนเอง จึงเปนสิ่งที่นาสนใจ ทั้งนี้การพัฒนาเว็บเพจ จะตอง  ทําความรูจักกับสวนประกอบตางๆ หลายสวนไดแก เว็บเบราวเซอร, ภาษากํากับ รวมทั้ง ฟอรแมตภาพตางๆ ที่เหมาะสมกับการพัฒนาเว็บ เทคโนโลยีอินเทอรเน็ต อินเทอรเน็ต (Internet) เปนระบบเครือขายที่เชื่อมโยงคอมพิวเตอรจากทุกระบบ ทุก รูปแบบ เขาสูระบบรวม ทําใหคอมพิวเตอรในระบบสามารถติดตอสื่อสารกันได อันเกิดใหเกิด ความสะดวก รวดเร็วในการติดตอประสานงาน เผยแพรขาวสาร การใชอินเทอรเน็ต มี หลากหลายลักษณะ เชนการใชอินเทอรเน็ตกับคอมพิวเตอรในสํานักงาน, ที่บาน, ระบบ เคลื่อนที่หรือพกพาดวย Notebook Computer/Palmtop รวมทั้งโทรศัพทมือถือบางรุน เอกสารเว็บ เอกสารเว็บ นับเปนหัวใจหลักของการเผยแพรขอมูลในเครือขายอินเทอรเน็ต ขอมูล ตางๆ จะถูกสรางและพัฒนาออกมาในรูปของเอกสารเฉพาะรูปแบบทีสามารถนําเสนอไดอยาง ่ เหมาะสม อยางไรก็ตามเอกสารเว็บก็มีลักษณะคลายคลึงกับเอกสารงานพิมพทั่วไป คือ ประกอบดวยหนาเว็บมากกวา 1 หนาโดยมีหนาแรกเปนหนาปก แตมีการเรียกชื่อแตกตางจาก เอกสารงานพิมพทั่วไป ดังนี้ ชุดเอกสารเว็บ (Web Presentation) – ชุดของขอมูลที่ตองนําเสนอบนระบบ อินเทอรเน็ต ประกอบดวยเว็บเพจ (Web Page) ตั้งแต 1 หนาขึ้นไป เว็บเพจ (Web Pages หรือ Web Documents) – เอกสารที่นาเสนอผลงานบนระบบ ํ อินเทอรเน็ต Home Page – หนาแรกของเอกสารเว็บ Homepage Webpage Webpage Webpage Webpage Webpage บุญเลิศ อรุณพิบูลย
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- รูปแสดงเบราวเซอรคาย Microsoft รูปแสดงเบราวเซอรคาย Mozilla เนื่องจากเว็บเบราวเซอรมีการพัฒนาออกมาจากหลากหลายบริษัท แตละบริษัทพัฒนา ฟงกชนการแสดงผลเอกสารเว็บที่แตกตางกันออกไป การพัฒนาเว็บไซตจึงจําเปนตองศึกษาถึง ั คุณสมบัติของเว็บเบราวเซอรแตละโปรแกรม ทั้งนี้ไดสรุปคุณสมบัติในการแสดงผลเอกสาร เว็บ ดังตาราง (ขอมูลจาก http://en.wikipedia.org/wiki/Comparison_of_web_browsers, 14 มิถุนายน 2551) บุญเลิศ อรุณพิบูลย
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- 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 เว็บไซตงาย รวดเร็วดวย 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- 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 เว็บไซตงาย รวดเร็วดวย 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 - • สามารถใชงานขามระบบ (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 เว็บไซตงาย รวดเร็วดวย Joomla การออกแบบเว็บเพจ การออกแบบและพัฒนาเว็บเพจ สามารถทําไดหลายระบบ ขึ้นอยูกบลักษณะของ ั ขอมูล ความชอบของผูพัฒนา ตลอดจนกลุมเปาหมายที่ตองการนําเสนอ เชน หาก กลุมเปาหมายเปนเด็กวัยรุน และนําเสนอขอมูลเกี่ยวกับความบันเทิง อาจจะออกแบบใหมี  ทิศทางการไหลของหนาเว็บที่หลากหลายใชลูกเลนไดมากกวาเว็บทีนําเสนอใหกับผูใหญ หรือ ่ เว็บดานวิชาการ ทั้งนี้การออกแบบเว็บเพจ สามารถแบงไดสามลักษณะ คือ • แบบลําดับขั้น (Hierarchy) เปนการจัดแสดงหนาเว็บเรียงตามลําดับกิ่งกานแตก แขนงตอเนื่องไปเหมือนตนไมกลับหัว เหมาะสําหรับการนําเสนอขอมูลที่มี การแบงเปนหมวดหมูทไมมากนัก และมีขอมูลยอยไมลกมาก เชนเว็บไซตแนะนํา ี่  ึ ประวัติสวนตัว ที่มีขอมูล 4 - 5 หนาเปนตน • แบบเชิงเสน (Linear) เปนการจัดแสดงหนาเว็บเรียงตอเนื่องไปในทิศทางเดียว เหมาะสําหรับการนําเสนอขอมูลที่เปนรูปภาพ เชนเว็บไซตนําเสนอสไลดจาก Microsoft PowerPoint • แบบผสม (Combination) เปนการจัดหนาเว็บชนิดผสมระหวางแบบลําดับขั้น และ แบบเชิงเสน มักจะเปนแบบที่นิยมใชกันอยางแพรหลายในปจจุบน เนืองจาก ั ่ สามารถควบคุมการนําเสนอและการเรียกดูไดสะดวก และรวดเร็ว
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 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 เว็บไซตงาย รวดเร็วดวย Joomla ขั้นเตรียมการ การพัฒนาเว็บไซต ควรกําหนดวัตถุประสงค เปาหมายการจัดทํา ศึกษาจุดเดนจุดดอย ของเทคโนโลยีที่จะนํามาใชงาน เพื่อใหการพัฒนาเกิดผลสัมฤทธิ์สูงสุด คําถามเพื่อชวยในการวางแผนเว็บไซต • ชื่อโครงการ/เว็บไซต • กลุมเปาหมาย • วัตถุประสงค/เปาหมาย • ขอมูลที่ตองการนําเสนอตอกลุมเปาหมาย • ขอมูลใดที่พรอมสําหรับนําเสนอ • ขอมูลอื่นๆ ประกอบเว็บไซต • จํานวนหนาเว็บที่ตองการพัฒนา • หนวยงาน/กลุม/ทีมงานพัฒนาเว็บไซต  • หัวหนาโครงการ • ผูบริหารระบบ • ความถี่ในการปรับปรุงเว็บไซต • การตรวจสอบขอมูลยอนกลับจากกลุมเปาหมาย • ผูรับผิดชอบตรวจสอบขอมูลยอนกลับจากกลุมเปาหมาย/ตอบคําถาม • คียเวิรดสําหรับเว็บไซต • หมวดของเว็บไซต • การประชาสัมพันธเว็บไซต • ระบบคอมพิวเตอร เครือขายที่ตองการ • เทคโนโลยีที่ตองการ • Domain name สําหรับเว็บไซต กําหนดโครงรางของเว็บ การกําหนดโครงรางของเว็บ เปนขั้นตอนสําคัญขั้นแรกก็วาได เพราะเอกสารเว็บที่ สรางจะเพิ่มจํานวนเรื่อยๆ และมีจุดเชื่อม (Link) จํานวนมาก หากไมมการวางแผนไวกอน จะ ี ทําใหการปรับปรุง แกไขเกิดปญหาไดงาย ปญหาที่ประสบแนนอนคือ ลืมวาแฟมเอกสารที่เคย สรางไวแลว มีชื่ออะไรบาง ซึ่งจะสงผลใหการทําจุดเชื่อมเกิดปญหาตามไปดวย เพราะแฟม เหลานี้อาจจะทิ้งชวงเวลานานพอสมควร จึงจะปรับปรุงอีกครั้ง วิธีการที่ดีที่สดเพื่อปองกัน ุ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 15 - ปญหาดังกลาว ควรวางแผนออกแบบเอกสารเว็บบนกระดาษ และกําหนดชื่อแฟมเอกสารเว็บ แตละแฟม จากขั้นตอนนีจะทําใหผูพฒนาสามารถมองเห็นภาพการไหล (Data Flow) ของ ้ ั เอกสารเว็บไดชัดเจน และพิจารณาตอไดวาเอกสารเว็บแตละแฟมมีความสัมพันธกบเอกสาร ั อื่นๆ อยางไร และสัมพันธกบแฟมเอกสารใดบาง ั การกําหนดชื่อแฟมเอกสารเว็บ มีขอกําหนดทีแตกตางไปจากการกําหนดชื่อแฟม ่ เอกสารปกติทวไป คือ ั่ ชื่อแฟมและนามสกุล จะถูกควบคุมจาก Web Administer ดังนั้นผูพฒนาที่ไมใช ั Web Administer จะตองสอบถามกฎการตั้งชื่อโดยละเอียด โดยปกติ มีหลักคราวๆ ดังนี้ - ควรใชตัวอักษร a – z หรือตัวเลข 0 – 9 หรือผสมกัน - ตัวอักษร a – z ควรเปนตัวพิมพเล็ก - หามใชเครื่องหมายอื่นใดรวมทั้งชองวาง ยกเวน Dash (ขีดกลาง) นอกจากนี้ยังจะตองพิจารณาถึงลักษณะหนาเว็บ, ลักษณะของสีพื้น, สีอักษรและสีของ จุดเชื่อม (Links) ดวย โดยสามารถรางหนาเว็บคราวๆ เพื่อใหเห็นภาพโดยรวมกอนสรางงาน จริง รวมทั้งการใชสีของหนาเว็บ ควรใชสีที่อานงาย สบายตา และมีลักษณะรวมกันในทุกๆ หนาเว็บ ไมควรเปลี่ยนสีพนใหฉดฉาด รวมทั้งศึกษาหนาเว็บไซตที่มการพัฒนาในเครือขายเพื่อ ื้ ู ี เปนแนวทางในการออกแบบ รูปแสดงภาพรางของหนาเว็บ บุญเลิศ อรุณพิบูลย
16 เว็บไซตงาย รวดเร็วดวย Joomla กําหนดโฟลเดอร (Folder) ที่ใชเก็บเอกสารเว็บ การกําหนดโฟลเดอรกอนที่จะสรางชุดเอกสารเว็บเพจ เปนลําดับขั้นตอนที่ควรปฏิบัติ ดวยทุกครั้ง เพื่อใหเอกสารเว็บแตละชุดมีระบบการจัดเก็บที่เปนระบบ สามารถคนหา และ เรียกใชงานไดสะดวก ในการสรางชุดเอกสารเว็บแตละชุด จะมีไฟลตางๆ จํานวนมาก ทั้งไฟล เอกสาร HTML, ไฟลภาพกราฟก, ไฟลเสียง, ไฟลวดิทัศน และอื่นๆ ทีเ่ กี่ยวของ ไฟลทั้งหมดนี้ ี ควรจัดเก็บไวในที่ที่เดียวกัน อาจจะสรางโฟลเดอรยอยเพื่อแยกกลุมไฟลได แตจะตองสราง ภายใตโฟลเดอรหลักที่สรางไวกอนแลว ไมควรแยกไวคนละที่ เพราะจะทําใหการจัดการเว็บมี ปญหายุงยากได (การตั้งชื่อโฟลเดอรใชหลักการเดียวกับชื่อไฟล) การสรางโฟลเดอร เลือกไดรฟและโฟลเดอรหลักที่ตองการสรางโฟลเดอรยอย  เลือกเมนูคําสั่ง File, New, Folder ปรากฏไอคอนโฟลเดอร ชื่อ New Folder พิมพชื่อโฟลเดอรใหม หากไมสามารถพิมพได ใหกดปุมฟงกชัน @ กอน เมื่อพิมพชื่อโฟลเดอรเสร็จแลว ใหกดปุม E สามารถสรางโฟลเดอรยอยๆ ภายใตโฟลเดอรนี้ได
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 17 - สรางภาพหรือจัดหาภาพที่เกี่ยวของกับเนื้อหา เอกสารเว็บตองเกี่ยวของกับรูปภาพโดยตรง ดังนั้นควรสรางภาพ หรือจัดหาภาพ แลว คัดลอกมาไวในโฟลเดอรท่ไดจัดเตรียมไว เพื่อใหสะดวกในการเรียกใชงาน และการบริหาร ี เว็บไซตในอนาคตการจัดเก็บไฟลไวในโฟลเดอรที่เตรียมไว ยังรวมถึงไฟลตางๆ ที่จะนํามาใช ประกอบการสรางเว็บ เชนไฟลเอกสารจากเวิรด กระดาษคํานวณ นําเสนอผลงานตางๆ จะตอง ดําเนินการลักษณะเดียวกับไฟลภาพเชนกัน ทั้งนี้ชื่อไฟลตางๆ ที่นํามาใชประกอบการสรางเว็บ  ก็ตองตั้งโดยยึดหลักเดียวกับการตั้งชื่อไฟลเอกสารเว็บ ไฟลภาพที่ไมสามารถนํามาสรางเอกสารเว็บ เพราะมีสวนขยายเปน .bmp, .tif สรางเอกสารประกอบ นอกจากภาพแลว อาจจะมีไฟลประกอบอืนๆ เชน Word, PowerPoint, PDF Document ่ ก็จะตองเตรียมไวในโฟลเดอรที่สรางไวใหพรอม โดยอาจจะสรางเปนโฟลเดอรเฉพาะของแต ละไฟลฟอรแมต ไฟลเอกสารตางๆ ที่ผิดพลาด เพราะชื่อไฟลเปนภาษาไทย หรือมีชองวาง เลือกเครืองแมขาย WWW และระบบการสรางงาน การสรางเว็บไซตในปจจุบน ยอมหนีไมพนความตองการดานโปรแกรมมิ่ง เชน ั  ตองการตัวนับจํานวนการเขาชมเว็บไซต (Counter) ตองการกระดานขาว (Web board) ตองการ สมุดเยี่ยม (Guestbook) หรือฟงกชนสูงๆ เชน ระบบสมาชิก แตนักพัฒนาเว็บไซตมักจะลืมไป ั วาระบบโปรแกรมบนเว็บ เปนระบบที่สัมพันธกับระบบปฏิบัติการ ดังนั้นกอนสรางเว็บไซต ควรพิจารณาใหแนนอนวาเว็บที่พัฒนา จะนําไปเก็บไวบนเครื่องแมขายที่ใชระบบปฏิบัติการใด เพราะหากเลือกผิดพลาด ก็จะทําใหเว็บนั้นมีปญหาอีกมากมาย บุญเลิศ อรุณพิบูลย
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 - ตรวจสอบเอกสารเว็บ ขณะที่สรางเอกสารเว็บ ควรตรวจสอบผลผานโปรแกรมแสดงผลเบราวเซอรหลายคาย หลายรุน (หากทําได) เพราะโปรแกรมเบราวเซอรแตละคาย แตละรุน จะรูจก หรือใหผลลัพธ  ั จากคําสั่ง HTML ไมเหมือนกัน จะไดทราบขอบกพรอง ขอผิดพลาด และสามารถแกไขไดทัน กอนที่จะสงขึ้นไปแสดงผลจริงในระบบอินเทอรเน็ต ขอที่ควรคํานึงถึงในการทําเว็บเชิงพาณิชยกคือ ภาษา HTML เปนภาษาที่ยังไมตาย ยังมี ็ การพัฒนาชุดคําสั่งใหมๆ อยูเรื่อยๆ ดังนั้นอยาพยายามไลตามเทคโนโลยีใหมๆ เหลานี้ ควร พัฒนาเว็บเพจที่สามารถเรียกดูไดจากเบราวเซอรหลายๆ รุน หลายคาย ดีกวายึดคายใด คายหนึ่ง หรือรุนใด รุนหนึ่ง มิฉะนั้นอาจจะทําใหพลาดจากลูกคาบางกลุมไปได ขอมูลจาก http://truehits.net/ (วันที่ 14 มิถุนายน 2551) สงขอมูลขึ้นเครื่องบริการเว็บ เมื่อไดพัฒนาเอกสารเว็บ และตรวจสอบผลไดตามที่ตองการแลว ก็สามารถโอนขอมูล นั้นๆ ไปยังเครื่องบริการเว็บได โดยใชโปรแกรมกลุมถายโอนขอมูล (FTP Software) เชน WinFTP, CuteFTP รวมทั้งฟงกชัน FTP ของ Macromedia Dreamweaver เปนตน กอนโอนขอมูล จะตองขอสิทธิ์และพื้นที่จากผูดูแลระบบกอนเสมอ และตลอดจนตอง สอบถามขอมูลที่จําเปนในการโอนขอมูล เชนชื่อบัญชีของผูมสิทธิ์ (Login Name / Account ี Name), รหัสผานของบัญชี (Password) เปนตน บุญเลิศ อรุณพิบูลย
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 - เครื่องมือพัฒนาเว็บ การพัฒนาเว็บเพจ สามารถกระทําไดโดยการใชภาษา HTML ซึ่งมีลักษณะการเขียน โปรแกรมภาษาดวยวิธีการลงรหัสคําสั่ง คลายกับการเขียนโปรแกรมภาษาคอมพิวเตอรทั่วๆ ไป แตในปจจุบันมีเครื่องมือชวยพัฒนาหลากหลายรูปแบบ ทั้งแบบชวยลงรหัส HTML และแบบ สรางงานอัตโนมัติ (Wizard) ทั้งนี้สามารถจําแนกการสราง/พัฒนาเว็บเพจดวยโปรแกรมตางๆ ได 4 วิธี คือ • การพัฒนาเว็บเพจดวยการลงรหัส HTML ดวยโปรแกรม Text Editor • การพัฒนาเว็บเพจดวยการลงรหัส HTML ดวยโปรแกรม HTML Editor • การพัฒนาเว็บเพจดวยโปรแกรมสรางงานอัตโนมัติ หรือ HTML Generator • การพัฒนาเว็บเพจดวยซอฟตแวรบริหารจัดการเนื้อหา (Content Management Software) Text Editor การใช Text Editor เชน NotePad, Qeditor เปนวิธีที่เหมาะสําหรับนักพัฒนาเว็บเพจทีมี ่ ความรูเกี่ยวกับภาษา HTML ในระดับสูง และตองการใสลูกเลนใหกบเว็บเพจ เพราะผูพัฒนา ั สามารถควบคุมตําแหนง และจํานวนรหัสคําสั่งไดอสระ อยางไรก็ตามวิธีนี้ก็ไมเหมาะสําหรับ ิ ผูพัฒนาในระดับตน เพราะตองศึกษาคําสัง HTML และใชเวลาในการพัฒนาพอสมควรในแต ่ ละหนาเว็บ ตลอดจนไมเห็นผลลัพธจากการปอนคําสั่งทันที ตองเรียกผานโปรแกรมเบราวเซอร บุญเลิศ อรุณพิบูลย
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 - จอภาพโปรแกรม Yahoo Site Builder โปรแกรมบริหารจัดการเนื้อหาเว็บ (CMS) ปจจุบันมีการพัฒนาซอฟตแวรทําหนาที่บริหารจัดการเนื้อหาเว็บ (CMS: Content Mnagement System) ที่ประกอบดวยฟงกชันการทํางานตางๆ เชน การจัดการสมาชิก การ จัดการหมวดเนื้อหา การจัดทําแบบสํารวจพรอมใชงานอยางไรก็ตามผูใชจะตองมีความรูใน ดานระบบปฏิบัติการในระดับที่สูงมาก รวมทั้งตองมีเครื่องแมขายเว็บพรอมใชงาน โปรแกรม ในกลุมนี้ไดแก PHPNuke, PostNuke, Joomla, Mambo, Drupal รูปแสดงสวนควบคุมการจัดการเนื้อหาลักษณะตางๆ ของโปรแกรม PHPNuke บุญเลิศ อรุณพิบูลย
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 - รูปแสดงผลการเปรียบเทียบ CMS จากเว็บไซต cmsmatrix.org บุญเลิศ อรุณพิบูลย
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 - ฟงกชันทํางานในสวน 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 เว็บไซตงาย รวดเร็วดวย 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 เมื่อดับเบิลคลิกจะปรากฏสวน ติดตั้งโปรแกรม ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 29 - จากจอภาพตอนรับการติดตั้ง AppServ ใหคลิกปุม Next เพื่อเขาสูสวนลิขสิทธิ์  คลิก I Agree เพื่อยอมรับลิขสิทธิ์การใชงานเชนกัน จอภาพถัดไปคือระบุไดรฟ และโฟลเดอรสําหรับติดตั้ง Appserv โดยโปรแกรม กําหนดไวทไดรฟ C โฟลเดอร AppServ ใหคลิก Next เพื่อยอมรับการกําหนดไดรฟและ ี่ โฟลเดอร บุญเลิศ อรุณพิบูลย
30 เว็บไซตงาย รวดเร็วดวย Joomla สวนนี้เปนการเลือกวาจะติดตั้งโปรแกรมใดบาง กรณีนใหคลิกเลือกทุกรายการ แลว ี้ คลิกปุม Next สวนสําคัญในการติดตั้ง คือ 1. การระบุชื่อเครื่องแมขายเว็บ (Server Name) กรณีที่เปนการติดตั้งจําลองมักจะ ระบุเปน localhost (สําหรับการติดตั้งจริง จะตองสอบถามจากผูดูแลเครื่องแม ขายเว็บโดยตรง) 2. การระบุอีเมลของผูดูแล (Administrator’s Email Address)
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 31 - 3. การระบุหมายเลขชองทางติดตอ (Apache HTTP Port) มักจะระบุเปนเลข 80 เมื่อกําหนดคาตางๆ แลวก็คลิกปุม Next เพื่อเขาสูสวนกําหนดคาควบคุมของฐานขอมูล MySQL 1. กําหนดรหัสผานของการเขาถึงฐานขอมูล MySQL ในรายการ Enter root password และระบุซ้ําในรายการ Re-enter root password 2. เลือกรหัสภาษาไทยใหถูกตองตามคากําหนดของเครื่องแมขาย กรณีนี้ควรระบุ เปน UTF-8 Unicode หรือ TIS-620 (ตามขอกําหนดของเครื่องแมขายเว็บ) Account ชุดแรกที่ตองจําคือ Account ควบคุมฐานขอมูล MySQL โดย User Name คือ root และรหัสผาน คือ .............................................. บุญเลิศ อรุณพิบูลย
32 เว็บไซตงาย รวดเร็วดวย Joomla เมื่อระบุคาเกียวกับการเขาถึงฐานขอมูล MySQL แลวใหคลิกปุม Install เพื่อเริ่มติดตั้ง ่ โปรแกรมตางๆ ของ AppServ จอภาพแสดงผลเมื่อการติดตังสมบูรณ ้ คลิกเลือก Start Apache และ Start MySQL เพื่อใหโปรแกรมทั้งสองทํางาน จากนัน ้ คลิกปุม Finish เพียงเทานี้ก็เสร็จสิ้นการติดตั้ง AppServ ซึ่งสามารถทดสอบไดโดยเปด เว็บเบราวเซอร จากนั้นพิมพคําสั่ง http://localhost หรือ http://127.0.0.1
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 33 - ติดตั้ง Joomla พีซีธรรมดาไดถูกจําลองเปนเครื่องแมขายเว็บแลว ตอนนีกถึงเวลาที่จะติดตั้ง Joomla ้็ เพื่อเนรมิตเว็บไซตภายในไมกี่นาที โดยเริมจากดาวนโหลดโปรแกรม joomla รุนลาสุด (1.5.2 ่ ณ วันที่ 1 เม.ย. 2551) จากเว็บไซต http://www.joomla.org/ ไฟลที่ดาวนโหลดมาไดคือ Joomla_1.5.2-Stable-Full_Package.zip ใหแตกไฟลซงจะ ่ึ ไดโฟลเดอรชอ ื่ ไฟลทั้งหมดในโฟลเดอรดังกลาวคือไฟลตนฉบับของ Joomla ใหคัดลอกโฟลเดอรนี้  ไปไวที่โฟลเดอร www ของ AppServ แลวเปลี่ยนชื่อโฟลเดอรตามตองการ เชน ถาตองการ สรางเว็บไซตของตนเอง ก็ใชชื่อตัวเปนชือโฟลเดอร หรือเว็บหนวยงาน ก็อาจจะใชชื่อยอของ ่ หนวยงานเปนชื่อโฟลเดอร (ตัวอยางขอใชชื่อ joomla15) ตอนนี้กพรอมจะติดตั้ง Joomla โดยเปดเบราวเซอร แลวพิมพคําสั่ง ็ http://localhost/ชื่อโฟลเดอร หรือ http://127.0.0.1/ชื่อโฟลเดอร (ตัวอยางคือ http://localhost/joomla15 หรือ http://127.0.0.1/joomla15) บุญเลิศ อรุณพิบูลย
34 เว็บไซตงาย รวดเร็วดวย Joomla ขั้นตอนแรกของการติดตั้งคือ การเลือกภาษาของการติดตั้ง โดยสามารถเลื่อนจอภาพ ลงมาเลือกภาษาไทย (th-TH – Thai)ได จากนั้นคลิกปุม Next เพื่อเขาสูการตรวจสอบสิทธิ์การติดตั้ง 
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 35 - ขั้นตอนนี้จะเปนการตรวจสอบสิทธิ์การเขียนลงในไฟล configuration.php และ ฟงกชันการทํางานของตัวแปลภาษา PHP แลวคลิกปุมถัดไปจะเขาสูสวนลิขสิทธิ์ของโปรแกรม ในหนานี้ก็คลิกปุมถัดไปไดเชนกัน สวนนี้เปนหัวใจของการติดตั้ง จะตอง 1. เลือกชนิดของฐานขอมูลที่ตองการใชงาน กรณีนใหเลือก mysql ี้ 2. ระบุช่อโฮสตของฐานขอมูล โดยพิมพ localhost ื 3. ระบุช่อผูใชฐานขอมูล ใหพมพ root ื ิ 4. กําหนดรหัสผานของฐานขอมูล mysql 5. ระบุช่อฐานขอมูล เชน joomla15 (แนะนําใหกําหนดชือเดียวกับชื่อโฟลเดอร) ื ่ เมื่อระบุขอมูลขางตนแลว ก็คลิกปุมถัดไป จะเขาสูสวนกําหนดคา FTP (File Transfer  Protocol) บุญเลิศ อรุณพิบูลย
36 เว็บไซตงาย รวดเร็วดวย Joomla ใหคลิกปุมถัดไปไดเลยครับ เพื่อกําหนดขอมูลเกี่ยวกับเว็บไซตที่ใกลจะเสร็จสมบูรณ คาที่ตองระบุไดแก • ชื่อเว็บไซต เชน Joomla15 : CMS for you • อีเมลของผูดูแลเว็บ • รหัสผานของผูดูแลเว็บ (จะตองจําใหไดดวยครับ)  • คลิกปุมติดตั้งขอมูลตัวอยาง
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 37 - จากนั้นคลิกปุมถัดไป เพื่อใหกระบวนการเสร็จสิ้นอยางสมบูรณ ควรลบโฟลเดอร  installation ดวยนะครับ คลิกปุมดูหนาเว็บไซตจะปรากฏเว็บไซตพรอมขอมูลตัวอยางดังนี้ บุญเลิศ อรุณพิบูลย
38 เว็บไซตงาย รวดเร็วดวย Joomla สํารวจเว็บใหม เว็บไซตตวอยางของ Joomla ไดติดตังเรียบรอยแลว การเขาสูเว็บไซตเมื่อติดตัง ั ้ ้ เรียบรอยแลวทําไดโดยพิมพ URL ดังนี้ http://localhost/ชื่อโฟลเดอร หรือ http://127.0.0.1/ชื่อโฟลเดอร ตัวอยาง http://localhost/joomla15 โดยจอภาพของเว็บไซตที่สรางจากขอมูลตัวอยาง ของ Joomla นับเปนเว็บตัวอยางทีนาสนใจ มีขอมูลหลากหลาย ทั้งนี้สวนแรกของเว็บคือ ่  Header ประกอบดวย Logo ของเว็บไซต ขาวประกาศ Navigation bar Top Menu Search box ขาวประกาศ หรือ New Flash แสดงขาวประกาศโดยการสุมขาว Navigation bar เมนูเขาถึงเนื้อหา เพิ่มความสะดวกในการกลับสู เนื้อหากอนหนาหนาหรือหนาหลัก สวนประกอบในหนาเว็บ ปรับเปลี่ยนตําแหนงและการนําเสนอตาม Template ที่เลือก โดยจะแนะนําในเนื้อหา “การปรับเปลี่ยนโฉมหนาเว็บไซต”
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 39 - สวนที่สองคือสวนเนื้อหาหลักของเว็บ ประกอบดวย Menu ตางๆ Module ตางๆ เนื้อหาหลัก Menu Menu ของ Joomla มีหลายหมวด และสามารถเพิ่มไดตามลักษณะ รวมทั้งสามารถกําหนดตําแหนงการแสดงผลไดตามงาย สะดวก Module กรอบเนื้อหาเล็กๆ ที่วางกระจายในหนาเว็บ แสดงเนื้อหาที่ หลากหลาย เชน Module Latest News แสดงขาวประกาศลาสุด Module Popular แสดง บทความที่นิยมอาน 5 อันดับแรก Module Polls สอบถามความคิดเห็นของผูใชเว็บ และ Module Who’s Online แสดงขอความจํานวนผูชมเว็บทั้งที่เปนผูเยียมชม (Guest) และสมาชิก ่ (Member) ณ เวลาปจจุบน โดย Module นี้สามารถควบคุมใหแสดง/ไมแสดง สรางใหม และ ั กําหนดตําแหนงใหมได Main Content พื้นที่กลางจอภาพของเว็บไซตที่แสดงบทความหลักของเว็บ โดย บทความลาสุด (หรือบทความหลัก) จะแสดงไวบนสุด และบทความที่มลําดับรองจะแสดงใน ี ลักษณะคอลัมนถัดลงมา บุญเลิศ อรุณพิบูลย
40 เว็บไซตงาย รวดเร็วดวย Joomla บทความแตละบทความ ประกอบดวยสวนประกอบดังนี้ Title Icons Author/Created date & time Read more link Modified date & time Content Title หัวเรื่องของบทความ สามารถกําหนดใหแสดง/ไมแสดง และเปน Link ไดดวยคาควบคุมของ Joomla Author/Created date & time ขอมูลแสดงผูสรางบทความ และวัน/เวลาที่สราง บทความ กําหนดใหแสดงหรือไมแสดงไดเชนกัน Icons ไอคอนสําหรับแปลงบทความ (Convert) ในรูปเอกสาร PDF ไอคอน สั่งพิมพบทความ และไอคอนแนะนําบทความทางอีเมล สามารถเลือกแสดง/ไมแสดงได ทั้งนี้ ไอคอนสั่งพิมพบทความนับเปนไอคอนทีมประโยชนมาก โดย Joomla จะตัด Menu และ ่ ี Header ออกเพื่อใหสามารถสั่งพิมพไดเฉพาะเนื้อหาบทความเทานั้น Read more link กรณีที่บทความยาว สามารถกําหนดใหแสดงสวนตนของบทความ และ Joomla จะสรางลิงก Read more เพื่อขยายอานเนื้อหาที่เหลือใหอัตโนมัติ Modified date & time ขอมูลแสดงวันที่/เวลาปรับปรุงเนื้อหา เปนสวน สําคัญที่ควรกําหนดใหแสดง เพื่อระบุความทันสมัยของบทความ Content พื้นที่แสดงเนือหาของบทความ ้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 41 - เขาสูระบบผาน Front-end เว็บไซตหนาแรกที่เขาถึงของ Joomla เรียกวาสวน Front-end ซึ่งก็คอ Home page ของ ื เว็บไซตนนเอง สมาชิกสามารถเขาสูระบบและปรับแกไขบทความ รวมทั้งนําเสนอบทความ ั่ ใหมไดตามสิทธิ์ของสมาชิกที่ถูกกําหนดไวโดยผูดูแลเว็บ (Web Administrator) สมาชิกชุดแรกของเว็บก็คือ admin นั่นเอง โดยการเขาสูระบบผาน Front-end ทําได โดยปอนชื่อผูใช (User name) และรหัสผาน (Password) ในสวน Login Form  เมื่อเขาสูระบบแลว สวน Login Form จะแสดงชื่อสมาชิกดังนี้ นอกจากนี้ยงปรากฏไอคอนสําหรับแกไขเอกสารบทความ ดังนี้ ั บุญเลิศ อรุณพิบูลย
42 เว็บไซตงาย รวดเร็วดวย Joomla แกไขขอมูลสมาชิก เมื่อสมาชิก Login เขาสูระบบผาน Front-end แลวจะปรากฏชุดกรอบเมนูเพิ่มอีก 1 ชุด คือ User Menu ซึ่งสมาชิกสามารถที่จะปรับแกไขขอมูลสวนตัว หรือแกไขรหัสผาน โดยคลิกที่รายการ เมนู Your Details จากชุดเมนู User Menu นอกจากนี้ยังสามารถเลือกรูปแบบเว็บไซตและการทํางาน ไดดังนี้ 1. Back-end Language การกําหนดภาษาของเว็บในสวน Back-end 2. Front-end Language การกําหนดภาษาของเว็บในสวน Front-end 3. User Editor เลือกประเภทของ Editor ในการสราง/แกไขบทความ กรณีนี้แนะนํา ใหเลือก TinyMCE 2.0 สําหรับเลือกใช Editor ในรูปแบบ WYSIWYG เพื่อความ สะดวกในการสราง/แกไขบทความโดยไมตองยุงยากกับการลงรหัส HTML 4. Help Site กําหนดความชวยเหลือจากเว็บที่ติดตั้ง Joomla หรือจากเว็บไซต ทางการของ Joomla (www.joomla.org) 5. Time Zone เลือก Time zone กรณีน้คือ UTC+07:00 ี
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 43 - แกไขบทความ การแกไขบทความผาน Front-end ทําไดโดยคลิกที่ปุม Edit Article ของบทความนั้นๆ ปรากฏจอภาพสวนแกไขบทความดังนี้ บุญเลิศ อรุณพิบูลย
44 เว็บไซตงาย รวดเร็วดวย Joomla ตองการแกไขชื่อบทความ ทําไดโดยแกไขในรายการ Title เมื่อคลิกปุม Save จะปรากฏผลลัพธทางเว็บไซตดังนี้ สําหรับการแกไขบทความ จอภาพแกไขบทความมีลักษณะคลายกับจอภาพการทํางาน ของ Word Processor ที่หลายๆ ทานคุนเคยเปนอยางดีมากแลว และการทํางานก็ใชหลักการ เดียวกัน จึงไมใชเรื่องยากทีจะแกไขผานปุมเครื่องมือ ดังนี้ ่  ไมควรปรับเปลี่ยนแบบอักษร (Font) และขนาดอักษร (Font size) สามารถทํางานในโหมด HTML ไดโดยคลิกปุม HTML ในแถบเครื่องมือ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 45 - แบงตอนเนื้อหาดวย Read more… กรณีที่เนื้อหาในบทความมีความยาวมากๆ การนําเสนอทั้งหมดผานเว็บไซตอาจจะไม นาสนใจเทาทีควร Joomla มีคําสั่งแบงตอนและแสดงลิงก Read more… กํากับเพื่อใหคลิก ่ แสดงเนื้อหาทีเ่ หลือ การแบงตอนเนื้อหา จากตัวอยางจะแสดงดวยเสนประสีแดง ซึ่งเกิดจากการคลิกบนปุม ดังนั้นถาตองการแบงตอนขอความ ณ ตําแหนงใด ก็ใหคลิกเมาส ณ ตําแหนง นั้นแลวคลิกปุม  เสนแบง Read more บุญเลิศ อรุณพิบูลย
46 เว็บไซตงาย รวดเร็วดวย Joomla การยกเลิกการแบงตอนเนื้อหา ก็สามารถทําไดโดยคลิกที่เสนประสีแดง แลวกดปุม <Delete> แลวบันทึก บทความจะแสดงผลยาวตอเนื่องไมมลิงก “Read more…” ดังนี้ ี
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 47 - สารบัญเนือหา ้ นอกจากการแสดงผลโดยแบงตอนดวย Read more… ยังสามารถแบงตอนเนื้อหา หลายๆ ตอนแลวแสดงผลในรูปแบบสารบัญเนื้อหา ดังตัวอยาง การสรางสารบัญเนื้อหาทําไดโดยคลิกเมาส ณ ตําแหนงที่ตองการแบงหนาเนื้อหา จากนั้นคลิกปุม โปรแกรมจะใหกําหนดชือกํากับสารบัญ จากนั้นคลิกปุม Insert ่ แลวทําซ้ํา ณ ตําแหนงอืนๆ ตามตองการ ่ • Page Title ควรระบุดวยภาษาอังกฤษ เปนชื่อกํากับตอนแตละตอน  • Table of Contents Alias สามารถใชภาษาไทยได จะเปนขอความที่ปรากฏใน รายการเมนูเลือก ตําแหนงทีกําหนดเปน Pagebreak จะแสดงดวยเสนประสีฟาออน สามารถลบไดโดย ่ ดับเบิลคลิกที่เสนแลวกดปุม <Delete> บุญเลิศ อรุณพิบูลย
48 เว็บไซตงาย รวดเร็วดวย Joomla แทรกรูปภาพ การแทรกรูปภาพในบทความ ใหคลิกเมาส ณ ตําแหนงที่ตองการวางภาพ แลวคลิกปุม จะปรากฏสวนนําเขาภาพดังนี้ คลิกเลือกภาพที่ตองการ แลวกําหนดรายละเอียดเกียวกับภาพ ่ • Image Description คําอธิบายภาพ • Image Title ชื่อกํากับภาพ ซึ่งสามารถกําหนดเปน Caption ได โดยคลิกเลือกเพิ่มเติม • Align ตําแหนงวางภาพ เมื่อคลิกปุม Insert จะปรากฏภาพดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 49 - เมื่อบันทึกจะแสดงผลดังนี้ ภาพที่นาเขาบทความ สามารถแกไขไดโดยคลิกที่ภาพ แลวคลิกปุม Insert/Edit Image ํ ในแถบเครื่องมือ โดยปรากฏสวนปรับแกไขดังนี้ บุญเลิศ อรุณพิบูลย
50 เว็บไซตงาย รวดเร็วดวย Joomla กรณีที่ตองการนําเขาภาพเพิมเติมจากที่ Joomla จัดเตรียมไว ทําไดโดยคลิกปุม ่  แลวเลื่อนจอภาพไปที่รายการ Upload คลิกปุม Browse Files เลือกไดรฟและโฟลเดอรที่เก็บภาพ แลวเลือกภาพจากนั้นคลิกปุม Open โปรแกรม Joomla อนุญาตใหเลือกไฟลภาพในการโอนเขาเว็บไซตไดครั้งละหลายภาพ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 51 - เมื่อไดภาพที่ตองการครบจํานวนแลวจึงคลิกปุม Start Upload  โปรแกรมจะแสดงภาพที่นําเขาเพื่อพรอมใชงานตอไป ไฟลภาพ ไฟลภาพที่นําเขาในเว็บควรปรับแตงดวยโปรแกรมตกแตงภาพใหมีขนาดที่เหมาะสม เชน ความกวางไมควรเกิน 500 pixel ความละเอียดภาพ (Resolution) 72 จุดตอนิ้ว และมีสวน  ขยายเปน .jpg, .gif หรือ .png ตามความเหมาะสมของภาพนั้นๆ นอกจากนี้ชื่อไฟลภาพควรเปน • ภาษาอังกฤษ ตัวพิมพเล็ก • หามเวนวรรค • ใชไดเฉพาะเครื่องหมาย Underscore ( _ ) บุญเลิศ อรุณพิบูลย
52 เว็บไซตงาย รวดเร็วดวย Joomla ควบคุมการแสดงผลบทความ บทความที่สรางไวแลวสามารถปดการแสดงผลหรือระบุวนสิ้นสุดการแสดงผลไดงาย ั และสะดวก ในโหมดการแกไขบทความ จะปรากฏสวนควบคุมการแสดงผล ดังนี้ รายการ • Published เลือกใหแสดง หรือไมแสดงบทความ • Show on Front Page เลือกใหแสดง หรือไมแสดงในหนาแรก • Start Publishing ระบุวัน/เวลาใหแสดงบทความ • Finish Publishing ระบุวัน/เวลาทีใหยติการแสดงบทความ ่ ุ • Access Level สิทธิ์ในการเขาถึงบทความ o Public ทุกคนเปดดูบทความได o Registered ใหสมาชิกที่ลอกอินเทานันเปดดูบทความได ็ ้ o Special ใหสมาชิกที่เปน Admin เทานั้นที่เปดดูบทความได
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 53 - สืบคนบทความไดงายๆ ดวย Metadata  Joomla ไดเตรียมฟงกชนสืบคนบทความผานชองสืบคน (Search) ั โดยโปรแกรมจะสืบคนทั้งจากชื่อเรื่อง (Title) เนื้อหาบทความ รวมทั้งสวนเพิม ่ ความสามารถการสืบคนในรูปแบบ Metadata ดังนั้นควรกําหนด Metadata ของบทความให สมบูรณ • Description ระบุคําอธิบายหรือเนื้อหาสรุปของบทความ • Keywords ระบุคําคนโดยใชเครื่องหมาย , คั่นแตละคํา บุญเลิศ อรุณพิบูลย
54 เว็บไซตงาย รวดเร็วดวย Joomla สรางบทความใหม การสรางบทความใหม ทําไดโดยคลิกเลือกรายการ Submit an Articles จาก User Menu ปรากฏสวนสรางบทความใหม ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 55 - การสรางบทความใหม มีการทํางานลักษณะเดียวกับการแกไขบทความเดิมที่ได แนะนําไปกอนหนาแลว แตจะตองเลือก Section และ Category ใหตรงกับหมวดเนื้อหา นอกจากนั้นผูใชตองกําหนดรายละเอียดเกียวกับการนําเสนอ  ่ (Publishing) และ Metadata ของบทความดวย เมื่อปอนเนื้อหาและบันทึก จะปรากฏผลดังนี้ บุญเลิศ อรุณพิบูลย
56 เว็บไซตงาย รวดเร็วดวย Joomla ปรับแตงเว็บไซตผาน Back-end การปรับแตงเว็บไซต เชน การเพิ่มสมาชิก การปรับเปลี่ยนโฉมหนาเว็บไซต การควบคุมเว็บไซต จะตองทําในโหมด Administrator โดยเขาสูเว็บไซตผาน Back-end ดวย คําสั่ง http://localhost/ชื่อโฟลเดอร/administrator จอภาพเขาสูระบบในโหมด Administrator ใหปอนบัญชีผูใชเปน admin และปอน รหัสผานตามที่ไดกาหนด เมื่อคลิกปุม Login จะเขาสูจอภาพ Control Panel ของเว็บไซต ดังนี้ ํ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 57 - การทํางานผาน Back-end สามารถดําเนินการผานแถบเมนู ซึ่งประกอบดวยคําสั่ง ควบคุมตามหมวดหมูดังนี้  หรือจะสั่งการผานไอคอนในสวน Control Panel นอกจากนี้ยงสามารถตรวจสอบสมาชิกที่ออนไลน การสรางบทความ หรือสถิติตางๆ ั ผานทางแท็บคําสั่งตอไปนี้ บุญเลิศ อรุณพิบูลย
58 เว็บไซตงาย รวดเร็วดวย Joomla ขอมูลประกอบการสืบคนของเว็บ ชื่อเว็บไซต หรือ Title ของเว็บเปนสวนสําคัญที่ทําใหเว็บไซตที่พัฒนาไดรับการสืบคน ผาน Search Engine ตางๆ ได ดังนั้นควรกําหนดชื่อเว็บไซตใหเหมาะสม โดยกําหนดดวยคํา ภาษาอังกฤษ ตามดวยคําภาษาไทย เชน STKS – Science and Technology Knowledge Services ศูนยบริการความรูทาง วิทยาศาสตรและเทคโนโลยี (ศวท.) สํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ ประเทศไทย ทั้งนี้ชื่อเว็บไซตจะปรากฏในแถวแรกของเว็บเบราวเซอร การปรับแกไขชื่อเว็บไซตของ Joomla ทําไดโดยคลิกไอคอน Global Configuration จากหนา Control Panel ของ Joomla โดยจะปรากฏจอภาพการทํางาน ดังนี้ คลิกเลือกแท็บ Site แลวปรับแกไขคา ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 59 - จากนั้นคลิกปุม Save เพื่อบันทึกการปรับแกไขชื่อเว็บไซต  นอกจากชื่อเว็บไซต ควรกําหนดคําอธิบายเว็บ และคําคน (Keyword) สําหรับเว็บไซต เพิ่มเติมจากรายการ โดย Global Site Meta Description เปนขอความอธิบายเว็บไซต โดยจะปรากฏผลผาน การสืบคนของ Search engine เชน Google ดังนี้ คําอธิบายเว็บไซต สําหรับคําคน (Keyword) เปนการระบุคําทีผูใชมักจะนึกถึงสําหรับการสืบคน โดยระบุ ่ ไดหลายคํา คันดวยเครื่องหมาย , แตควรขึ้นตนดวยภาษาอังกฤษ ่ ขอความอธิบายเว็บไซต และคําคนจะไมปรากฏผานเว็บเบราวเซอร แตจะ เปนขอมูลสําหรับ Search Engine บุญเลิศ อรุณพิบูลย
60 เว็บไซตงาย รวดเร็วดวย Joomla เขาถึงเนื้อหาไดงาย Joomla มีระบบสนับสนุนการเขาถึงเนื้อหาไดงายขึ้นดวยความสามารถ Search Engine Friendly ที่จะแปลงรหัสประจําบทความ (Article ID) เปนชื่อเรียก ตัวอยาง บทความชื่อ Joomla Overview ถูกสรางเปนลําดับที่ 19 ซึ่งเมื่อแสดงเนื้อหา บทความนี้ จะปรากฏ URL ดังภาพขางตน URL ดังกลาวเปนการสงคาพารามิเตอรของโปรแกรมภาษา PHP ที่จาไดยาก และทํา ํ ให Search Engine ไมบันทึกเพื่อสืบคน แต Joomla มีคําสั่งที่สนับสนุนการแปลงพารามิเตอร ของ PHP เปนการเขาถึงดวยชื่อบทความ (Article Title) แทน โดยคลิกเลือกไอคอน Global Configuration จากหนา Control Panel จากนั้นคลิกเลือกรายการ Search Engine Friendly URLs เปน Yes เมื่อบันทึกแลว Joomla จะแปลงคาพารามิเตอรของบทความเปนการเขาถึงดวยชื่อ บทความแทน ดังนี้ การใชงาน Search Engine Friendly ผูพัฒนาจะตองระบุ Alias ใหกับ บทความทุกบทความ และตองเปนภาษาอังกฤษตัวพิมพเล็ก หามเวนวรรค สามารถใช เครื่องหมาย Underscore หรือ Dash ไดเทานั้น
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 61 - การปรับเปลี่ยนโฉมหนาของเว็บไซต Joomla อนุญาตใหปรับเปลียนโฉมหนาของเว็บไดงายและสะดวกผาน Template โดย ่ Joomla เตรียม Template สําเร็จรูปใหใชงานหลากหลายรูปแบบ และสามารถดาวนโหลดติดตั้ง เพิ่มเติมได โดยการปรับเปลี่ยน Template คลิกเลือกเมนู Extensions, Template Manager ปรากฏรายการดังนี้ คลิกเลือก Template ที่ตองการใชงาน แลวคลิกปุม Default จากนั้นกลับไป Reload เว็บไซตอีกครัง ้ บุญเลิศ อรุณพิบูลย
62 เว็บไซตงาย รวดเร็วดวย Joomla เห็นไหมครับ การปรับเปลี่ยนหนาตาของเว็บไซตไมใชเรื่องยากเลย มี Template สําเร็จรูปใหดาวนโหลดและเลือกใชงานมากมายในเว็บไซต เนื่องจาก Template พัฒนาดวย ภาษา HTML, PHP & CSS แตสําหรับผูใชมือใหม ไมตองกังวลเพราะสามารถดาวนโหลด Template สําเร็จรูปไดมากมายหลายรอยจาก Google จะตองเลือก Template ใหตรงกับ Version ของ Joomla ที่ติดตั้ง เมื่อดาวนโหลดมาแลวจะไดไฟล Template ของ Joomla เปน Zip และสามารถนําเขา ไปใชงานไดงายผานระบบ Control Panel ของ Joomla ดังนี้ คลิกเลือกเมนู Extensions จากนั้น  เลือกคําสั่งยอย Install/Uninstall แลวคลิกเลือกรายการ Install จะปรากฏสวนติดตั้ง ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 63 - คลิกปุม Browse จากรายการ Upload Package File เลือกไฟล zip ของ Template แลว คลิกปุม Upload & Install จากนั้นคลิกแท็บ Templates จะปรากฏรายการ Template ที่นําเขา และรายการเดิมดังนี้ ถาตองการลบรายการใด ก็คลิกเลือกแลวคลิกปุม Uninstall บาง Template จะไมมีพื้นที่ดานขวามือ (Right Column) ทําให Module ที่ กําหนดใหแสดงดานขวาไมแสดงผล จึงตองระมัดระวังในการเลือกใช Template หรือใชวิธีการ ปรับเปลี่ยน Template ใหอยูตําแหนงอืน  ่ บุญเลิศ อรุณพิบูลย
64 เว็บไซตงาย รวดเร็วดวย Joomla จัดการบทความในเว็บไซต เนื้อหาในเว็บไซตเปนเนื้อหาจากขอมูลตัวอยาง เรียกวา Article หรือบทความ ซึ่ง สามารถปรับแกไขไดโดยเลือกเมนูคําสั่ง Content, Article Manager เมนูควบคุมการจัดการบทความประกอบดวยปุมตางๆ ดังนี้ Archive/Unarchive กําหนดใหบทความที่นําเสนอเก็บเขาคลังเอกสาร หรือยกเลิกจากคลังเอกสาร Publish/Unpublish กําหนดใหแสดงหรือไมแสดงบทความ Move ยายหมวดบทความ Copy คัดลอกบทความไปหมวดอืน ่ Trash ลบบทความ Edit แกไขบทความ New สรางบทความใหม Parameters คาควบคุมเกี่ยวกับการแสดงผลบทความ เชน ถาตองการแกไขบทความรายการใด ก็คลิกเลือกบทความนั้นๆ คลิกปุม Edit จะปรากฏสวนแกไขในโหมดการทํางานแบบ WYSIWYG ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 65 - แกไขชื่อบทความ (Title) จากรายการ ชื่อบทความสามารถระบุไดทั้งภาษาไทย และภาษาอังกฤษ แกไข URL ของบทความจากรายการ ขอความ Alias นี้ควรระบุเปนภาษาอังกฤษ ไมมีชองวาง ปรับแกไขหมวดเนื้อหาไดจากรายการ Section และ Category Section จะเปนหมวดใหญกวา Category บุญเลิศ อรุณพิบูลย
66 เว็บไซตงาย รวดเร็วดวย Joomla กําหนดการแสดงผลบทความไดจากรายการ • Published แสดงหรือไมแสดงบทความในเว็บไซต • Front Page แสดงหรือไมแสดงบทความผานหนาแรกของเว็บ ลําดับการแสดงบทความในหนา Front Page ควบคุมไดจากไอคอน Front Page Manager นอกจากนี้ยังสามารถกําหนดชวงเวลาในการบทความไดจากรายการ การแกไขเนื้อหา การแกไขเนื้อหา ใชหลักการลักษณะเดียวกับการแกไขใน Word Processor ทั่วไป และมีปุมจัดแตงรูปแบบลักษณะเดียวกัน
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 67 - กรณีที่เนื้อหามีความยาว และกําหนดใหแสดงผาน Front Page จะปรากฏผล ดังนี้ กรณีน้ควรเลือกแสดงผลเนื้อหาเพียงบางสวน และกํากับดวย Link ี โดย คลิกเมาส ณ ตําแหนงที่ตองการเลือกแสดงผล แลวคลิกปุม Read more… บุญเลิศ อรุณพิบูลย
68 เว็บไซตงาย รวดเร็วดวย Joomla เมื่อบันทึกจะแสดงผลผาน Front Page ดังนี้ จะปรากฏเนื้อหา ณ ตําแหนงที่ระบุ Read more และลิงก Read more: … เพื่อคลิกแสดง เนื้อหาสวนที่เหลือ นอกจากนี้ยังสามารถสรางสารบัญใหกับเอกสารได ดังนี้ การสรางสารบัญขางตน ก็ทําไดโดยคลิกเมาส ณ ตําแหนงที่ตองการ แลวคลิกปุม Pagebreak ทําซ้ํา ณ ตําแหนงอื่นๆ ที่ตองการ และถาตองการยกเลิกใหคลิกเมาส ณ เสนแบงแลว  กดปุม <Delete>
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 69 - นอกจากนี้ Joomla ยังอนุญาตใหระบุเงือนไขเกียวกับการแสดงผลบทความไดอิสระ ่ ่ จากกันจากการควบคุมของ Parameters - Advanced โดยรายการทีปรากฏบางรายการ อธิบายจากภาพประกอบ ดังนี้ ่ Title ของบทความ กําหนดใหแสดงหรือไมแสดงจากรายการ Show Title และกําหนดใหคลิกไดหรือไมได จากรายการ Title Linkable วันที่แกไข/วันที่สราง และผูสรางบทความ กําหนดใหแสดง หรือไมใหแสดงไดจากรายการ Author Name, Created Date and Time และ Modified Date and Time ไอคอนแปลงเปนเอกสาร PDF สั่งพิมพ และสงแนบอีเมล ควบคุมไดจากรายการ PDF Icon, Print Icon และ E-mail Icon บุญเลิศ อรุณพิบูลย
70 เว็บไซตงาย รวดเร็วดวย Joomla เพิ่มประสิทธิภาพการสืบคนใหกบบทความ ั การสืบคนบทความของ Joomla จะควบคุมดวย Metadata โดยแตละบทความสามารถ กําหนด Metadata ไดอิสระ รวมทั้งยังเปนขอมูลสําหรับ Search Engine ดวย การกําหนด Metadata ใหกบบทความทําไดโดยเขาสูโหมดแกไข/สรางบทความ จากนั้นคลิกขยาย Metadata ั Information ระบุรายละเอียดเกียวกับคําอธิบายบทความ/เนื้อหายอ (Description) และคําคน ่ (Keyword) รวมทั้งชื่อเจาของบทความ (Author) โดยการสืบคนสามารถปอนคําคนในชองรายการ Search ซึ่งจะปรากฏผลการสืบคน ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 71 - ตกแตงดวยรูปภาพ การนําเสนอผานเว็บไซตจําเปนตองสรางจุดเดนดวยรูปภาพ Joomla ทํางานกับรูปภาพ ไดงายและสะดวก โดยมีปุมเครื่องมือและระบบโอนภาพเขาสูเครื่องแมขายเว็บพรอมใชงาน เชน การนําเขาภาพในบทความเริ่มจากคลิกเมาส ณ ตําแหนงที่ตองการวางภาพ แลวคลิกปุม Image ที่ดานลางขวาของกรอบขอความ ปรากฏจอภาพทํางานเกียวกับภาพดังนี้ ่ คลิกเลือกภาพที่ตองการ แลวระบุคําอธิบายภาพในรายการ Image Description และ Image Title จัดตําแหนงภาพจากรายการ Align แลวคลิกปุม Insert หากยังไมมภาพที่ตองการก็สามารถคลิกปุม Browse แลว Upload ภาพเขาสูระบบก็ได ี หรือจะใชคําสั่ง Site, Media Manager เพื่อจัดการภาพและสื่ออื่นๆ ประกอบเว็บก็ได บุญเลิศ อรุณพิบูลย
72 เว็บไซตงาย รวดเร็วดวย Joomla Joomla แบงโฟลเดอรจัดการภาพไดดังนี้ โดยโฟลเดอรสําคัญที่ควรทราบคือ • Banners เก็บภาพสําหรับใชกับ Component Banner • Stories เก็บภาพสําหรับใชในบทความ อยางไรก็ตามสามารถสรางเพิ่มเติมไดโดยคลิกเลือกโฟลเดอรหลัก จากนั้นกําหนดชือ ่ โฟลเดอรใหม (ภาษาอังกฤษหรือผสมตัวเลข หามเวนวรรค ใชเฉพาะเครื่องหมาย Underscore) แลวคลิกปุม Create Folder ลบภาพ ภาพที่ไมตองการใชงานสามารถลบไดโดยคลิกที่ปุมเครื่องหมาย x สีแดงที่กากับภาพ ํ หรือคลิกเลือกหลายๆ ภาพแลวใชปุม Delete ภาพที่นําเขา Joomla จะตองตั้งชื่อเปนภาษาอังกฤษ หามเวนวรรค ใชเฉพาะ เครื่องหมาย Underscore และมีฟอรแมตเปน .jpg, .gif หรือ .png เทานั้น นอกจากการนําเขาภาพแลว Media Manager ยังสามารถนําเขา Flash Movie, PDF ไดเชนกัน
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 73 - ทํางานกับสื่อรูปแบบตางๆ Joomla สนับสนุนการทํางานกับสื่ออื่นๆ นอกจากรูปภาพ เชน Flash Movie, Song, Audio, Movie โดยมีหลักการทํางานดังนี้ 1. สรางโฟลเดอรสําหรับสื่อแตละประเภทผาน Media Manager 2. โอนสื่อเขาสูระบบ 3. เขาสูระบบสรางหรือแกไขบทความ คลิก ณ ตําแหนงทีตองการวางสือ คลิก ่ ่ ปุม Insert/Edit Embedded Media ระบุประเภทสื่อ พรอมทั้งระบุ path/filename.extension ของสื่อใหถูกตอง จากนันระบุความกวาง/ความสูงที่ ้ ตองการนําเสนอ 4. คลิกปุม Insert แลวบันทึก บุญเลิศ อรุณพิบูลย
74 เว็บไซตงาย รวดเร็วดวย Joomla ทํางานกับเมนู Joomla อนุญาตใหปรับแตงเมนูไดอิสระ ทั้งการสรางเมนูชุดใหม การปรับแตงเมนูชด ุ เดิม การสรางรายการเมนู หรือปรับยายตําแหนงการแสดงผลเมนู ปรับแกไขเมนู การปรับแกไขเมนู ทําไดโดยคลิกเลือกเมนูคําสั่ง Menus แลวคลิกเลือกที่ชื่อเมนูชดที่ ุ ตองการแกไข หรือคลิก Menu Manager เพือปรับแกไขชือเมนูรวมทั้งสราง/ลบเมนู ่ ่ ปรากฏจอภาพทํางานดังนี้ จะพบวาการทํางานกับรายการเมนู มีลกษณะเดียวกับการทํางานบทความใน Article ั Manager
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 75 - ตัวอยาง ตองการสรางรายการเมนูแสดงบทความในหมวด Media ทําไดโดย 1. คลิกปุม New 2. เลือกวาจะสรางเมนูลักษณะใด กรณีนี้คือ การสรางเมนูใหกับบทความ จึง เลือก Articles 3. เลือกรูปแบบของการเชื่อมกับบทความ กรณีนี้ตองการเชื่อมกับทุกบทความ ในหมวด Media จึงตองเลือก Category ซึ่งมี 2 รูปแบบยอย คือ Blog Layout โดยจะแสดงเนื้อหายอและลิงกอานตอในลักษณะกรอบเนื้อหา หรือจะเลือก List Layout โดยจะแสดงเปนรายการตามลําดับ 4. เมื่อเลือกรูปแบบของการเชื่อมกับบทความแลว ก็จะเปนสวนกําหนด รายละเอียดเกียวกับการแสดงผล ดังนี้ ่ บุญเลิศ อรุณพิบูลย
76 เว็บไซตงาย รวดเร็วดวย Joomla 5. เมื่อกําหนดรายละเอียดเชน Title แลวก็คลิกปุม Save เพือบันทึก ่ 6. และตรวจสอบการสรางรายการเมนูไดจากหนา Front end ของเว็บ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 77 - Components Components คือ ชุดโปรแกรมสําเร็จรูปที่ออกแบบพัฒนาขึ้นมาเพือรองรับการทํางาน ่ ใดๆ ในลักษณะโปรแกรมเสริม เพื่อให Joomla มีความสามารถเพิ่มขึ้น เชน โปรแกรมควบคุม การแสดงผลปายโฆษณา กระดานสนทนา Joomla มี Components ใหเลือกใชงานหลากหลาย ดาวนโหลดไดจากเว็บไซตของ Joomla หมวด Extensions โดย Extension ที่เปน Components จะแสดงดวยสัญลักษณ แบบสอบถามออนไลน (Poll) Poll เปน Component ที่มากับ Joomla เปนชุดคําสั่งสําหรับสรางแบบสอบถาม ออนไลนอยางงาย ปกติจะแสดงผลในรูปแบบ Module ดานขวาของหนาเว็บไซต เมื่อคลิกเลือก จะแสดงผลลัพธการเลือกเปนกราฟแทงแนวนอน (Bar chart) บุญเลิศ อรุณพิบูลย
78 เว็บไซตงาย รวดเร็วดวย Joomla การเพิ่มแบบสอบถามใหกับ Poll ทําไดโดยเลือกเมนูคําสั่ง Components, Polls คลิกปุม New ปอนคําถามในรายการ Title: ตัวเลือกในรายการ Options: และการนําเสนอจากรายการ Published: จากนั้นคลิกปุม Save จากนั้นเขาสูการกํากับการแสดงผล Polls ซึ่งควบคุมดวย Extensions, Module Manager
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 79 - เลื่อนหารายการ Polls แลวคลิกเขาสูการแกไข ตัวเลือกสําคัญคือ Module Parameters ในสวน Poll ผลลัพธของ Poll ที่สรางใหมในหนา Front end ปายโฆษณา (Banner) Joomla ยังเตรียมการจัดการเกี่ยวกับปายโฆษณาหรือ Banner ซึ่งมีความสามารถ แสดงผลแบบสุมในแตละการ Reload หนาเว็บ รวมทั้งสวนลิงกไปยังเว็บไซตที่เกี่ยวของ โดย ทํางานผาน Components, Banner 1. เตรียมภาพ Banner โดย Upload ดวย Media Manager ไปไวทโฟลเดอร ี่ banners 2. สราง Category ของ Banner ดวยคําสั่ง Components, Banner, Category บุญเลิศ อรุณพิบูลย
80 เว็บไซตงาย รวดเร็วดวย Joomla 3. สรางชุดยอยของ Banner ดวยคําสั่ง Components, Banner, Clients 4. สรางรายการ Banner ดวยคําสั่ง Components, Banner, Banners 5. ระบุรายละเอียดแลวคลิกปุม Save จากนั้นทําซ้ําจนครบทุกภาพที่ตองการ 6. ปรับแตงการนําเสนอดวยคําสั่ง Extension, Module Manager คลิกเลือก Banners ปรับแตงคาที่จําเปน เชน
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 81 - 7. จากนั้นคลิกปุม Save แลวดูผลที่ปรากฏในหนา Front page  ดึงขาวมาแสดงผลอัตโนมัติ ดวยเทคโนโลยี RSS หรือ Really Simple Syndication หรือ Rich Site Summary เปน รูปแบบในการนําเสนอขาวหรือบทความ ใหอยูในรูปแบบมาตรฐาน (xml format) เพื่อใหผูที่ สนใจสามารถติดตามขาวสารใหมๆไดทันที Joomla รองรับการสรางชุดขาว RSS อัตโนมัติผาน Components, News Feeds โดย เริ่มตนจะตองสราง Category กอนดวยคําสั่ง Components, News Feeds, Category จากนั้นจึงสรางรายการ RSS แตละรายการดวยคําสั่ง Components, News Feeds, Feeds บุญเลิศ อรุณพิบูลย
82 เว็บไซตงาย รวดเร็วดวย Joomla เว็บไซตที่สามารถดึงขาวมาได เชน • http://www.norsorpor.com/chooseRSS.php • http://www.rssthai.com ดาวนโหลด/ติดตั้ง Components นอกจากนี้ยังสามารถดาวนโฆลดมาติดตั้งเพิ่มได โดยComponents ที่ดาวนโหลดมา มักจะขึนตนดวย com เชน com_xmap-1.1_for_Joomla_1.5.zip การติดตั้งจะตองทํางานใน ้ โหมด Admin ผาน Control Panel โดยเลือกคําสั่ง Extensions, Install/Uninstall โดย Components ที่ติดตั้งแลวจะปรากฏรายการดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 83 - พัฒนาเว็บตามตองการ เมื่อทราบความสามารถของ Joomla แลวตอไปจะเปนการออกแบบพัฒนาเว็บไซตตาม ตองการ โดยไมใชขอมูลตัวอยางของ Joomla ดังนันจะตองเริ่มจากการวางแผนการพัฒนา ้ เว็บไซตกอน ดังนี้ ลักษณะของเว็บไซต กลุมเปาหมาย ชื่อเว็บ (Web Title) คําอธิบายเว็บ (Web Description) คําคน (Keywords) เนื้อหาที่ตองการนําเสนอ ความตองการเพิ่มเติม Poll Web Resources Banner คลังภาพ คลังดาวนโหลด RSS News feed … บุญเลิศ อรุณพิบูลย
84 เว็บไซตงาย รวดเร็วดวย Joomla จากตารางวิเคราะหความตองการพัฒนาเว็บขางตน สมมติเว็บที่ตองการพัฒนามีขอมูล ดังนี้ ลักษณะของเว็บไซต เว็บไซตนําเสนอสาระความรูทางดาน บรรณารักษศาสตร และสารสนเทศศาสตร กลุมเปาหมาย นักศึกษา ครูอาจารยสาขาบรรณารักษศาสตร และสารสนเทศศาสตร ชื่อเว็บ (Web Title) Lib4You : แหลงรวมสาระความรูสาขา บรรณารักษศาสตร และสารสนเทศศาสตร คําอธิบายเว็บ (Web Description) แหลงรวมสาระความรูสาขาบรรณารักษศาสตร และสารสนเทศศาสตรสาหรับครู อาจารย ํ นักศึกษา บรรณารักษ และนักสารสนเทศ คําคน (Keywords) Library, Information, Librarian, Information Officer, บรรณารักษศาสตร, สารสนเทศศาสตร, หองสมุด, ศูนยสารสนเทศ, สํานักวิทยบริการ เนื้อหาที่ตองการนําเสนอ แนะนําเว็บไซต ทีมพัฒนา คลังความรู ความตองการเพิ่มเติม Poll แบบสํารวจออนไลน Web Resources รวมลิงกเว็บไซตหองสมุด ศูนยสารสนเทศ สํานักวิทยบริการ และภาควิชา บรรณารักษศาสตร สารสนเทศศาสตร Banner Banner แนะนํากิจกรรมเดนของเว็บไซตใน ลักษณะแสดงผลแบบสุมเมื่อมีการโหลดหนาเว็บ คลังภาพ รวมภาพกิจกรรมและภาพอืนๆ ่ คลังดาวนโหลด แหลงดาวนโหลดเอกสาร ซอฟตแวร RSS News feed ดึงขาวนาสนใจจากเว็บไซตผูใหบริการ RSS เมื่อวิเคราะหความตองการไดแลว ขั้นตอนถัดไปก็จะเปนการติดตั้งเว็บไซต Joomla ใน โฟลเดอรใหมแบบวางเปลา (ไมเอาขอมูลตัวอยาง) ซึ่งมีขั้นตอนดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 85 - 1. สรางโฟลเดอรใหมภายใต C:AppServwww เชน lib4you 2. คัดลอกไฟลตนฉบับ Joomla 1.5 มาวางในโฟลเดอรใหม  3. เปดเว็บเบราวเซอรแลวพิมพ URL เปน http://127.0.0.1/lib4you 4. เลือกโหมดการติดตั้งเปนภาษาไทย 5. คลิกปุม Next เพื่อเขาสูขั้นถัดไปของการติดตั้ง คือ ขั้นตอนการตรวจสอบ ขอมูลกอนติดตั้ง หากเปนการติดตั้งใน Server จริงอาจจะตองเขาไปเปลี่ยน Permission ของโฟลเดอรและแฟมบางแฟมกอน ในกรณีนี้เปนการติดตั้งดวย Server จําลองใหคลิกปุม “ถัดไป” 6. จอภาพถัดไปคือ การยอมรับลิขสิทธิ์การใชงานโปรแกรม ใหคลิกปุม “ถัดไป” บุญเลิศ อรุณพิบูลย
86 เว็บไซตงาย รวดเร็วดวย Joomla 7. ขั้นตอนสําคัญของการติดตั้งคือ การกําหนดรายละเอียดเกี่ยวกับเครื่องแมขาย เว็บและฐานขอมูล MySQL ใหระบุขอมูลดังนี้ • ชนิดฐานขอมูล เลือกเปน mysql • ชื่อโฮสต ระบุเปน localhost • ชื่อผูใชฐานขอมูล ระบุเปน root • รหัสผาน ระบุรหัสผานตามที่กําหนดไวในขั้นตอน ติดตั้ง AppServ • ชื่อฐานขอมูล ระบุใหตรงกับชื่อโฟลเดอร ตัวอยางคือ lib4you 8. เมื่อกําหนดขอมูลเกี่ยวกับเครืองแมขายและฐานขอมูล MySQL แลวใหคลิก ่ ปุม “ถัดไป” เพื่อเขาสูขั้นตอนการตั้งคา FTP สําหรับ Server ที่อนุญาตใหผูใช โอนขอมูลดวยฟงกชน FTP ใหระบุคาใหถูกตอง แตกรณีนี้ใหเลือก “No” ั แลวคลิกปุม “ถัดไป” 9. ขั้นตอนนี้เปนการกําหนดขอมูลเกี่ยวกับเว็บไซต โดยมีรายการที่ตองกําหนด ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 87 - รายการที่ตองระบุไดแก • ชื่อเว็บไซต ใหระบุชื่อของเว็บ กรณีนี้คือ Lib4You : แหลงรวม สาระความรูสาขาบรรณารักษศาสตร และสารสนเทศศาสตร • ระบุอีเมลของผูดูแลเว็บ และรหัสผานของ Admin เว็บไซต 10. เมื่อกําหนดขอมูลชื่อเว็บไซต อีเมล และรหัสผานของผูดูแลเว็บแลว ใหคลิก ปุม “ถัดไป” ก็จะเปนขันตอนสุดทายของการติดตั้ง ้ ทั้งนี้บัญชีแรกของเว็บนี้คือ admin ซึ่งเปนบัญชีผูดูแลเว็บที่มีสิทธิ์เต็ม และ รหัสผานตามที่ระบุไวในขันตอนกอนหนา ้ 11. เมื่อติดตั้ง Joomla จนถึงขั้นตอนนี้แลว จะตองกลับไปลบโฟลเดอร Installation ออกจากโฟลเดอรเว็บใน C:AppServwwwlib4you บุญเลิศ อรุณพิบูลย
88 เว็บไซตงาย รวดเร็วดวย Joomla 12. เพียงเทานี้ก็จะไดเว็บไซตท่พรอมใชงาน และเขาถึงไดดวย URL ี  http://127.0.0.1/lib4you เว็บไซตใหมทไดจะไมมีขอมูลใดๆ เนื่องจากไมไดติดตั้งขอมูลตัวอยางของ Joomla ี่ ดังนั้นขั้นตอนถัดไป จะเปนการสรางเนื้อหา สรางเมนู และสวนจัดการเพิ่มเติม (Extension) ใหกบเว็บไซต โดยจะเริ่มตนกับการทํางานในโหมด Backend กอน ั
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 89 - ปรับเว็บไซตในโหมด Backend เว็บใหม ควรกําหนดคาควบคุมตางๆ ใหเหมาะสมกอนใชงาน โดยเขาสูสวนควบคุม เว็บไซตดวย URL http://127.0.0.1/lib4you/administrator  ปอนบัญชีผูใช (User name) เปน admin และรหัสผานที่กําหนดไว จากนันคลิกปุม ้ Logins เพื่อเขาสูระบบ Domain name และ ชื่อ lib4you ปรับเปลี่ยนไดตามจริง ปรับคาระบบเว็บไซต (Global Configuration) เริ่มตนควรปรับคาระบบเว็บไซตโดยคลิกที่ไอคอน Global Configuration บุญเลิศ อรุณพิบูลย
90 เว็บไซตงาย รวดเร็วดวย Joomla ปรากฏจอภาพสวนควบคุมคาระบบเว็บไซต ดังนี้ • Site Offline เลือกเปน No ทั้งนี้จะเลือกเปน Yes เมื่อตองการปดเว็บไซต เปนการชั่วคราว ซึ่งผูใชจะพบขอความตามที่กําหนดในรายการ Offline Message (ขอความดังกลาวปรับแกไขไดตามตองการ) • Site Name ชื่อเว็บไซต เปนสวนสําคัญมากที่ Search Engine จะเขาถึง จึงควรกําหนดดวยคําที่คนไดงาย นําดวยขอความภาษาอังกฤษเปนหลัก  • Default WYSIWYG Editor เลือกโปรแกรมที่ใชเปนสวนจัดการเนื้อหา (Editor) แบบ WYSIWYG (What You See Is What You Get) กรณีนใหเลือก ี้ เปน TinyMCE 2.0 • List Length จํานวนรายการที่จะใหแสดงผลกรณีที่เลือกรูปแบบการ แสดงผลแบบ List กรณีนี้คือ 20 รายการตอจอภาพ • Feed Length จํานวนรายการที่ดึงอัตโนมัตจาก RSS กรณีคือ 10 รายการ ตอจอภาพ • Global Site Meta Description คําอธิบายเว็บไซต ขอมูลสําคัญอีกสวน สําหรับ Search Engine กรณีนี้ใหปรับแกไขเปน แหลงรวมสาระความรูสาขา บรรณารักษศาสตร และสารสนเทศศาสตรสําหรับครู อาจารย นักศึกษา บรรณารักษ และนักสารสนเทศ • Global Site Meta Keywords คําคน (Keyword) สําหรับเว็บไซต ใช ประโยชนกับ Search Engine กรณีนใหปรับแกไขเปน Library, Information, ี้ Librarian, Information Officer, บรรณารักษศาสตร, สารสนเทศศาสตร, หองสมุด, ศูนยสารสนเทศ, สํานักวิทยบริการ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 91 - • Show Title Meta Tag อนุญาตใหนํา Title ของบทความแสดง ประกอบกับ Title เว็บไซตหรือไม กรณีนใหเลือกเปน No ้ี • Show Author Meta Tag อนุญาตใหนํา Author ของบทความแสดง ประกอบกับ Title เว็บไซตหรือไม กรณีนใหเลือกเปน No ี้ • Search Engine Friendly URLs กําหนดใหแสดงผล URL แบบสนับสนุน การสืบคนของ Search Engine หรือไม กรณีน้ใหเลือกเปน No (หากตองการ ี เลือกเปน Yes ทุกบทความจะตองกําหนด Alias Title เปนภาษาอังกฤษ หาม เวนวรรค ทุกบทความ) เมื่อกําหนดขอมูลขางตนจากชุดรายการ Site แลวใหคลิกที่ชุดรายการ System เพื่อกําหนดรายการเกียวกับ User Settings ่ • Allow User Registration อนุญาตใหผูใชลงทะเบียนเปนสมาชิกได หรือไม (กรณีนี้เลือกเปน Yes) • New User Registration Type ประเภทของสมาชิกที่ลงทะเบียน o Registered สมาชิกที่มีสิทธิ์สงลิงกเว็บแนะนํา และเขาถึงเนื้อหา เฉพาะสมาชิกไดเทานัน ้ o Author สมาชิกที่สามารถเขียนบทความใหมสงเขาสูระบบ ได แตไมมีสิทธิ์แกไขบทความ o Editor สมาชิกที่สามารถเขียนและแกไขบทความได o Publisher สมาชิกที่สามารถเขียน/แกไขบทความของสมาชิก คนอื่นได บุญเลิศ อรุณพิบูลย
92 เว็บไซตงาย รวดเร็วดวย Joomla • New User Account Activation ผูใชที่ลงทะเบียนจะตองยืนยันการเปน สมาชิกหรือไม (แนะนําใหเลือกเปน Yes) • Front-end User Parameters อนุญาตใหสมาชิกปรับคาควบคุมเกี่ยวกับ สมาชิกไดหรือไม เชน ระบบภาษา Editor ที่เลือกใชงาน (แนะนําใหเลือกเปน Hide) เมื่อกําหนดคาที่จําเปนดังที่อธิบายขางตน ใหคลิกปุม Save เพื่อบันทึกคา จากนั้นจะตองกําหนดใหแสดงผล Module การล็อกอินเขาสูระบบ (Login-form Module) โดย 1. เลือกเมนูคําสั่ง Extension, Module Manager 2. คลิกปุม New เพื่อเลือกพื้นทีแสดงผล Module ใหม ่ 3. เลือก Module ชื่อ Login 4. ตั้งชื่อใหกบ Module เชน Login Form และกําหนดตําแหนงทีจะแสดงผล ั ่ เชน Left
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 93 - 5. คลิกปุม Save แลวคลิกปุม Preview เพื่อสังเกตผลจากหนาเว็บไซต 6. ตอนนี้เว็บไซตก็พรอมจะรับสมาชิกที่สนใจเขารวมสรางสรรคเว็บไซตได แลว โดยคลิกที่ Create an account เพื่อสรางสมาชิกใหม บุญเลิศ อรุณพิบูลย
94 เว็บไซตงาย รวดเร็วดวย Joomla วิเคราะหเนื้อหาเว็บไซต การนําเนื้อหาเขาเว็บไซต จะตองวิเคราะหเนื้อหากอน โดยเนื้อหาที่กําหนดไว ไดแก แนะนําเว็บไซต เปนเนื้อหาเพียง 1 หนาจอ ใหขอมูลเกี่ยวกับเว็บไซต ที่มาของ เว็บไซต เชน เว็บไซต lib4you พัฒนาขึ้นมาเพื่อเปนสื่อกลาง สําหรับบุคลากรสาขาบรรณารักษศาสตร สารสนเทศ ศาสตรของประเทศไทย ไดมารวมสรางสรรค แบงปนบทความ เนื้อหาสาระ ประสบการณ และ ความรูรวมกัน ทีมพัฒนาขอขอบคุณผูเยี่ยมชม และ สมาชิกทุกทานที่รวมสงเสริม สรางสรรค lib4you ทีมพัฒนา เปนเนื้อหาเพียง 1 หนา นําเสนอขอมูลของทีมพัฒนา ประกอบดวยรูปภาพสมาชิกในทีมพัฒนา ชื่อ/นามสกุล สังกัด และความชํานาญ คลังความรู เปนหมวดเนื้อหาใหญ ประกอบดวยหมวดยอย คือ • หมวดบรรณารักษศาสตร • หมวดสารสนเทศศาสตร • หมวดสถานศึกษาที่เปดสอน จากตารางขางตน ผูพัฒนาจะตองวิเคราะห ออกแบบเนื้อหาใหเหมาะสมกอน เพือให ่ สอดคลองกับรูปแบบการพัฒนา ดังนันจากตารางขางตน เมื่อนํามาวิเคราะหลักษณะรูปแบบ ้ เนื้อหาของ Joomla จะไดผลดังนี้ แนะนําเว็บไซต เปนเนื้อหาเพียง 1 หนาจอ ใหขอมูลเกี่ยวกับเว็บไซต ที่มาของ เว็บไซต เนื้อหาแบบ Static Content ไมตองกําหนด Section และ  Category ทีมพัฒนา เปนเนื้อหาเพียง 1 หนา นําเสนอขอมูลของทีมพัฒนา เนื้อหาแบบ Static Content ไมตองกําหนด Section และ Category
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 95 - คลังความรู เปนหมวดเนื้อหาใหญ ประกอบดวยหมวดยอย คือ • หมวดบรรณารักษศาสตร • หมวดสารสนเทศศาสตร • หมวดสถานศึกษาที่เปดสอน เนื้อหาแบบ Dynamic Content ตองกําหนด Section และ Category โดย Section ซึ่งเปนหมวดใหญ กําหนดดวยชือ Knowledge ่ Category ซึ่งเปนหมวดยอยของ Section Knowledge กําหนด เปน • Library Science • Information Science • Institution Section Knowledge Category Category Category Library Science Information Science Institution บุญเลิศ อรุณพิบูลย
96 เว็บไซตงาย รวดเร็วดวย Joomla สรางเนื้อหา “แนะนําเว็บไซต” การสรางเนื้อหา “แนะนําเว็บไซต” ทําไดโดย 1. จากหนา Control Panel ใหคลิกไอคอน Add New Article 2. ปอนขอมูลดังนี้ หมายเหตุ ทุกบทความควรกําหนด Metadata โดยคลิกจากชุดรายการ Metadata Information 3. คลิกปุม Save เพื่อบันทึกขอมูล
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 97 - เมื่อสรางเนื้อหา “แนะนําเว็บไซต” แลวขันตอนถัดไปคือ การสรางเมนูควบคุมเนื้อหา ้ สวนนี้ โดย 1. คลิกเลือกเมนู Menus, Main Menu* เพื่อสรางรายการเมนูเพิ่มในเมนูหลักของ เว็บไซต 2. ปรากฏสวนควบคุมการสรางรายการเมนูของเมนูหลัก (Main Menu) ดังนี้ 3. คลิกปุม New เพื่อสรางรายการคําสั่งใหม 4. เลือกประเภทของรายการเมนู กรณีนี้เลือกเปน Articles 5. เมื่อคลิก Articles แลวจะปรากฏรายการเลือกดังนี้ บุญเลิศ อรุณพิบูลย
98 เว็บไซตงาย รวดเร็วดวย Joomla คลิกเลือก Article Layout เนื่องจากเนื้อหาที่จะเชื่อมมายังรายการเมนูนี้ เปน เนื้อหาแบบ Static ที่ไมไดกําหนด Section และ Category ซึ่งจะปรากฏ รายการเลือก ดังนี้ 6. เลือกเนื้อหาทีตองการเชื่อมกับรายการเมนู โดยคลิกปุม Select จากรายการ ่  Select Article ปรากฏรายการบทความ ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 99 - คลิกเลือกบทความ “แนะนําเว็บไซต” 7. เมื่อเลือกบทความที่ตองการแลว ก็มาถึงขั้นตอนกําหนดขอความกํากับรายการ เมนู • Title ขอความที่ตองการใหปรากฏ ไมควรยาวเกินไป (ตัวอยางระบุเปน แนะนําเว็บไซต) • Alias ขอความที่ระบุในรายการนีตองเปนภาษาอังกฤษ ้ หามเวนวรรค ใชเปนสวนควบคุมเมื่อเลือกคา Global Configuration ใน สวน SEO (กรณีนี้ไมตองระบุ) • Link URL ที่เขาถึงเนื้อหา (ไมตองปรับแกไข) • Parent Item ลําดับการนําเสนอเมนู ใหแสดงเปนรายการหลักตอจาก รายการเมนู Home จึงเลือกเปน Top • Published กรณีที่ไมตองการแสดงรายการคําสั่งใหเลือกเปน No (กรณี นี้ใหเลือกเปน Yes เพื่อใหแสดงผล) • Order กรณีที่มีรายการเมนูมากกวา 2 รายการ สามารถ เลือกลําดับไดวาตองการใหแสดงตอทายรายการใด • Access Level สิทธิ์ในการเขาถึงรายการเมนูนี้ กรณีนี้ใหเลือกเปน Public คือทุกคนสามารถคลิกเลือกรายการเมนูนี้ได • On Click, Open in เมื่อคลิกเลือกรายการเมนูนี้ ตองการใหเปดเนื้อหา ลักษณะใด กรณีนี้ใหเลือกเปน Parent Window with Browser Navigation คือ แสดงในหนาตางเดิมพรอมแถบควบคุม บุญเลิศ อรุณพิบูลย
100 เว็บไซตงาย รวดเร็วดวย Joomla เมื่อกําหนดคาดังขางตนแลว ก็คลิกปุม Save เพื่อบันทึกการสรางรายการเมนูเพิ่มเติม ในเมนูหลัก จากนั้นตรวจสอบการสรางรายการเมนูเพิมเติมโดยคลิกเลือกรายการ ่ Preview ที่ ปรากฏมุมขวาของจอภาพ จะปรากฏรายการคําสั่งเพิ่มในแถบเมนูหลัก ดังนี้ เมื่อคลิกที่รายการเมนู “แนะนําเว็บไซต” จะปรากฏเนื้อหาดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 101 - สรางเนื้อหา “ทีมพัฒนา” การสรางเนื้อหา “ทีมพัฒนา” ใชหลักการเดียวกับ “แนะนําเว็บไซต” แตเนื่องจากขอมูล ประกอบดวยภาพ ชื่อ/นามสกุล สังกัด และความเชียวชาญ จึงตองเตรียมภาพกอน โดยภาพที่ ่ เตรียมควรมีขนาดความกวางไมเกิน 150 pixels ตั้งชื่อแฟมภาพเปนภาษาอังกฤษ หามเวนวรรค (ตัวอยางใชภาพในโฟลเดอร image ที่จัดเตรียมไวให) 1. นําเขาภาพเขาสู Joomla ดวยคําสั่ง Site, Media Manager 2. คลิกเลือกโฟลเดอรยอย stories บุญเลิศ อรุณพิบูลย
102 เว็บไซตงาย รวดเร็วดวย Joomla 3. เลื่อนจอภาพมาดานลาง แลวคลิกที่ปุม Browse Files 4. คลิกเลือกภาพที่เตรียมทีละภาพ จนครบทุกภาพ หากเลือกภาพผิด สามารถลบภาพจากรายการไดโดยคลิกปุม ทายภาพ 5. เมื่อเลือกภาพไดครบตามตองการแลว ใหคลิกปุม Start Upload เพื่อนําเขาภาพ 6. จากนั้นสรางเนื้อหาใหม โดยคลิกไอคอน Add New Article หรือเลือกเมนู Content, Article Manager จากนั้นคลิกปุม New
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 103 - 7. ปอนขอมูล Title และ Metadata ดังนี้ 8. สรางตารางขนาด 2 คอลัมน 3 แถว โดยคลิกปุม Insert New Table กําหนดจํานวน Columns เทากับ 2 และจํานวน Rows เทากับ 3 ระบุคาความ กวางตาราง (Width) เทากับ 100% เพื่อใหตารางยาวเต็มจอภาพ จากนั้นคลิก ปุม Insert เพื่อแทรกตาราง 9. ตารางที่ไดจะปรากฏดังนี้ บุญเลิศ อรุณพิบูลย
104 เว็บไซตงาย รวดเร็วดวย Joomla 10. คลิกเมาสในเซลลแรก (แถวแรกคอลัมนแรก) เลือกภาพที่ตองการแสดง โดย คลิกปุม ปรากฏจอภาพเลือกภาพดังนี้ คลิกเลือกภาพที่ตองการ ปอนคําอธิบายภาพในรายการ Image Description และ Image Title จากนันคลิกปุม Insert ้ คลิกเมาสในคอลัมนดานขวาของแถวแรก พิมพขอมูลทีมพัฒนาคนที่ 1 จัด แตงตามเหมาะสม เชน ทําซ้ํากับรายการอื่นจนครบ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 105 - 11. คลิกปุม Save เพื่อบันทึกขอมูล เมื่อสรางเนื้อหา “ทีมพัฒนา” แลวขั้นตอนถัดไปคือ การสรางเมนูควบคุมเนื้อหาสวนนี้ โดย 1. คลิกเลือกเมนู Menus, Main Menu* เพื่อสรางรายการเมนูเพิ่มในเมนูหลักของ เว็บไซต 2. ปรากฏสวนควบคุมการสรางรายการเมนูของเมนูหลัก (Main Menu) ดังนี้ 3. คลิกปุม New เพื่อสรางรายการคําสั่งใหม 4. เลือกประเภทของรายการเมนู กรณีนี้เลือกเปน Articles บุญเลิศ อรุณพิบูลย
106 เว็บไซตงาย รวดเร็วดวย Joomla 5. เมื่อคลิก Articles แลวจะปรากฏรายการเลือกดังนี้ คลิกเลือก Article Layout เนื่องจากเนื้อหาที่จะเชื่อมมายังรายการเมนูนี้ เปน เนื้อหาแบบ Static ที่ไมไดกําหนด Section และ Category ซึ่งจะปรากฏ รายการเลือก ดังนี้ 6. เลือกเนื้อหาทีตองการเชื่อมกับรายการเมนู โดยคลิกปุม Select จากรายการ ่  Select Article ปรากฏรายการบทความ ดังนี้ คลิกเลือกบทความ “ทีมพัฒนา”
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 107 - 7. เมื่อเลือกบทความที่ตองการแลว ก็มาถึงขั้นตอนกําหนดขอความกํากับรายการ  เมนู เมื่อกําหนดคาดังขางตนแลว ก็คลิกปุม Save เพื่อบันทึกการสรางรายการเมนูเพิ่มเติม ในเมนูหลัก จากนั้นตรวจสอบการสรางรายการเมนูเพิมเติมโดยคลิกเลือกรายการ ่ Preview ที่ ปรากฏมุมขวาของจอภาพ จะปรากฏรายการคําสั่งเพิ่มในแถบเมนูหลัก และเมื่อคลิกที่รายการเมนู “ทีมพัฒนา” จะ ปรากฏเนื้อหาดังนี้ บุญเลิศ อรุณพิบูลย
108 เว็บไซตงาย รวดเร็วดวย Joomla เนื้อหาหมวดคลังความรู การสรางเนื้อหาหมวดคลังความรู ตามที่ไดออกแบบไวจะประกอบดวยหมวดยอย 3 หมวด ซึ่ง Joomla ไดกําหนดหมวดเนื้อหาหมวดใหญเปน Section และเนื้อหาหมวดยอยใน แตละ Section เปน Category Articles Section A Section B Static Content Category A-1 Category A-2 Category B-1 Content 1 Content 1 Content 1 Content 2 Content 2 รูปแสดงโครงสรางการจัดการเนื้อหาของ Joomla จากแผนการวิเคราะหดังกลาว จึงตองสราง Section กอน โดย 1. เลือกเมนูคําสั่ง Content, Section Manager 2. คลิกปุม New เพื่อสราง Section ใหม
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 109 - 3. กําหนดชื่อ Section และรายละเอียดเพิ่มเติมไดจากรายการ Description ตัวอยางระบุชอ Section เปน Knowledge แลวคลิกปุม Save ื่ 4. เมื่อสราง Section แลวขั้นตอนถัดไปเปนการสราง Category ใหกับ Section Knowledge จํานวน 3 Categories โดยคลิกเลือกเมนูคําสั่ง Content, Category Manager คลิกปุม New แลวกําหนดชือ Category ่ ตัวอยางกําหนดชื่อ Category เปน Library Science และเลือก Section เปน Knowledge จากนั้นคลิกปุม Save เพื่อบันทึกและทําซ้ําจนครบทั้ง 3 Categories บุญเลิศ อรุณพิบูลย
110 เว็บไซตงาย รวดเร็วดวย Joomla 5. เมื่อสราง Section และ Categories แลวขั้นถัดไปเปนการสรางเนือหาตาม ้ หมวดดวยวิธีการเดียวกับทีไดแนะนําไปกอนหนานี้ แตจะตองเลือก Section ่ และ Category ใหตรงกับเนือหา ดังนี้ ้ ปกติเนื้อหาลักษณะนี้ มักจะนําเสนอในหนาแรกของเว็บไซต (Front Page) จึง ควรคลิกเลือกรายการ Front Page เปน Yes ดวย จากนั้นปอนเนื้อหา จัดรูปแบบการแสดงผลใหเหมาะสม จึง Save เนือหา ้ 6. เนื้อหาที่สรางจะปรากฏผาน Articles Manager ดังนี้ 7. และเมื่อคลิกปุม Preview จะแสดงผลหนาเว็บ ดังนี้  8. จากหนาเว็บไซตดังกลาว ยังไมมีเมนูควบคุมการแสดงผล จึงควรสรางเมนู ควบคุม
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 111 - 9. จากหนา Control Panel คลิกเลือกคําสั่ง Menu, Main Menu 10. คลิกปุม New เพื่อสรางรายการเมนูใหมแบบ Articles 11. ตองการสรางรายการเมนู “คลังความรู” ซึ่งเปนการโยงไปหา Section Knowledge จึงตองคลิกเลือก Section และมีรายการยอย 2 ตัวเลือกคือ Section Blog Layout เพื่อตองการใหแสดงขอมูลในลักษณะ Blog หรือ Section Layout เพื่อตองการใหแสดงขอมูลในลักษณะลําดับรายการ (List) กรณีนี้ให คลิกเลือกเปน Section Layout บุญเลิศ อรุณพิบูลย
112 เว็บไซตงาย รวดเร็วดวย Joomla 12. จากนั้นปอนชือรายการเมนูเปน “คลังความรู” และเลือก Section เปน ่ Knowledge คลิกปุม Save เพื่อบันทึก แลวคลิกปุม Preview เพื่อตรวจสอบผล 13. เพื่อใหเขาถึงขอมูลไดตรงมากขึ้น สามารถสรางรายการเมนูยอยภายใต “คลัง ความรู” ตัวอยางตองการสรางรายการเมนูยอย ชื่อ “บรรณารักษ” ซึ่งทําได ดังนี้ 14. จากหนา Control Panel คลิกเลือกคําสั่ง Menu, Main Menu 15. คลิกปุม New เพื่อสรางรายการเมนูใหมแบบ Articles
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 113 - 16. ตองการสรางรายการเมนู “บรรณารักษ” ซึ่งเปนการโยงไปหา Category Library Science จึงตองคลิกเลือก Category และมีรายการยอย 2 ตัวเลือกคือ Category Blog Layout เพื่อตองการใหแสดงขอมูลในลักษณะ Blog หรือ Category Layout เพื่อตองการใหแสดงขอมูลในลักษณะลําดับรายการ (List) กรณีนใหคลิกเลือกเปน Category Blog Layout ี้ 17. ระบุช่อรายการเมนูเปน “บรรณารักษ” และเนื่องจากเปนรายการเมนูยอยของ ื “คลังความรู” จึงตองคลิกเลือก คลังความรู จากรายการ Parent Item 18. เลือก Category เปน Library Science จากรายการ Category บุญเลิศ อรุณพิบูลย
114 เว็บไซตงาย รวดเร็วดวย Joomla 19. คลิกปุม Save เพื่อบันทึกและทําซ้ํากับ Category ที่เหลือจนครบทั้ง 3 หมวด ยอย 20. เมื่อคลิกปุม Preview จะปรากฏผลหนาเว็บ ดังนี้ เพียงเทานี้กไดเนื้อหาและเมนูที่สรางดวยงานของตนเองจาก Joomla อยางรวดเร็ว ที่ ็ เหลือก็คอการปรับแตงและเพิ่มเนื้อหาใหเหมาะสม กอนเผยแพรใหผสนใจเขาถึงได ื ู นําเนื้อหาจากโฟลเดอร data สรางเปนบทความตามหมวดเนื้อหาทีกําหนดไว ่
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 115 - แบบสอบถามออนไลน (Poll) เว็บไซตในปจจุบันควรใหความสําคัญกับผูชมเว็บ และมีขอมูลความคิดเห็นจากผูชม  เว็บประกอบการพัฒนาปรับปรุง Poll เปน Components ที่มากับ Joomla สําหรับสราง แบบสอบถามออนไลนจากผูใชอยางงาย แสดงผลลัพธเปนกราฟแทงแนวนอน (Bar chart) ดวย สีสันที่สวยงาม การสรางแบบสอบถามออนไลนทําไดโดยเลือกเมนูคําสั่ง Components, Polls คลิกปุม New ปอนคําถามในรายการ Title: ตัวเลือกในรายการ Options: และการนําเสนอจากรายการ Published: โดยคลิกเลือกรายการ Published เปน Yes เพื่อให Poll ที่สรางเผยแพรใหกับผูชม จากนั้นคลิกปุม Save  เมื่อสราง Poll แลวขั้นถัดไปเปนการแสดงผล Polls บนหนาเว็บ โดยเลือกคําสั่ง Extensions, Module Manager จากนั้นคลิกปุม New เพื่อสราง Module ใหม บุญเลิศ อรุณพิบูลย
116 เว็บไซตงาย รวดเร็วดวย Joomla คลิกที่รายการ Poll ตั้งชื่อ Poll ในรายการ Title และเลือก Poll จากรายการ Select poll ทั้งนี้สามารถเลือกตําแหนงที่จะแสดงผล Poll ดานซายหรือดานขวาของจอภาพจากรายการ Position คลิกปุม Save และคลิกปุม Preview เพื่อแสดงผลจากหนาเว็บไซต
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 117 - Web Resources เกือบทุกเว็บไซตมักจะหนีไมพนกับการนําเสนอเว็บเครือขายที่คดสรรแลว ั โดย แสดงผลเปนลิงกเว็บไซตแยกหมวดหมู Joomla เตรียมความสามารถจัดการเว็บไซตไดงายๆ ดวย Components ชื่อ Web Links การสราง Web Resources จะตองเริ่มจากการสรางหมวดหมูของเว็บ (Categories) กอน โดยคลิกเลือกคําสั่ง Components, Web Links, Categories คลิกปุม New เพื่อสรางหมวดเว็บ ปอนชื่อหมวดเว็บในรายการ Title: แลวคลิกปุม Save และทําซ้ํากับหมวดอื่นๆ จนครบ ตามตองการ บุญเลิศ อรุณพิบูลย
118 เว็บไซตงาย รวดเร็วดวย Joomla เมื่อสรางหมวดเว็บแลว ขันถัดไปจะเปนการสรางรายการลิงกเว็บไซตตามหมวดเว็บ ้ โดยเลือกคําสั่ง Components, Web Links, Links คลิกปุม New เพื่อสรางรายการลิงกเว็บไซต • ระบุช่อรายการลิงกเว็บใน Name ื • ระบุ URL ของเว็บใน URL • คําอธิบายเว็บใน Description • เลือกรายการ Target เปน New Window with Browser Navigation เพื่อใหแสดงผล เว็บในจอภาพใหม เมื่อบันทึกจะปรากฏรายการลิงกเว็บไซต ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 119 - ตอนนี้ก็ไดคลังเว็บไซตแลว แตการนําเสนอใหผูชมเขาถึงไดแลว จะตองสรางเมนู ควบคุมแสดงผลกอน โดย 1. เลือกเมนูคําสั่ง Menu, Main Menu แลวคลิกปุม New 2. คลิกรายการ Web Links 3. คลิกรายการ All Categories, Web Link Category List Layout บุญเลิศ อรุณพิบูลย
120 เว็บไซตงาย รวดเร็วดวย Joomla 4. ระบุคําอธิบายรายการเมนูในรายการ Title เชน คลังเว็บไซต แลวคลิกปุม Save จากนั้นคลิกปุม Preview เพือแสดงผล  ่
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 121 - ปายโฆษณา (Banner) เนื้อหาเดน หรือกิจกรรมเดนมักจะนําเสนอในรูปแบบภาพโฆษณาที่สามารถสุม แสดงผลอัตโนมัติเมื่อมีการโหลดหนาเว็บไซต (Re-load) Joomla จึงไดเตรียมการจัดการ เกี่ยวกับปายโฆษณาหรือ Banner รวมทั้งสวนลิงกไปยังเว็บไซตที่เกี่ยวของ โดยทํางานผาน Components, Banner การสรางปายโฆษณา จะตองเตรียมภาพใหมีขนาดที่เหมาะสมกอน เชน ภาพฟอรแมต JPEG ขนาด 450 × 100 พิกเซล ภาพตัวอยางอยูที่โฟลเดอร image/banner เมื่อเตรียมภาพแลวขั้นถัดไปให Upload ภาพดวย Media Manager ไปไวที่โฟลเดอร banners จากนั้นเริ่มเขาสูการสรางปายโฆษณา โดย 1. สราง Category ของปายโฆษณาดวยคําสั่ง Components, Banner, Category 2. สรางชุดยอยของปายโฆษณาดวยคําสั่ง Components, Banner, Clients เชน บุญเลิศ อรุณพิบูลย
122 เว็บไซตงาย รวดเร็วดวย Joomla 3. สรางรายการปายโฆษณาดวยคําสั่ง Components, Banner, Banners • Name: ระบุชื่อปายโฆษณา • Category เลือกหมวดปายโฆษณา • Client Name เลือกชุดยอยของปายโฆษณา • Click URL ระบุ URL ที่ตองการใหแสดงผล กรณีไมมี URL ให  ระบุ URL ของเว็บไซตหลักหรือระบุดวย # ก็ได  • เลือกภาพปายโฆษณาใหตรงกับเนื้อหาในรายการ Banner Image Selector 4. ระบุรายละเอียดแลวคลิกปุม Save จากนั้นทําซ้ําจนครบทุกภาพที่ตองการ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 123 - 5. กําหนดการนําเสนอดวยคําสั่ง Extension, Module Manager คลิกเลือก Banners 6. ปรับแตงคาที่จาเปน ํ • Title ระบุชื่อ Module เชน Banner • Show Title ใหเลือกเปน No • Position ใหเลือกเปน user1 • Randomise เลือกเปน Sticky, Randomise 7. จากนั้นคลิกปุม Save แลวดูผลที่ปรากฏในหนา Front page  การระบุตําแหนง (Position) ในการแสดงผล Module จะตองเลือกใหเหมาะสม กรณี เชน Banner ควรเลือกเปน user1 ทั้งนี้เจาหนาที่ที่ดูแลเว็บจะตองตรวจสอบตําแหนงของ Template แตละ Template ที่เลือกใชวากําหนดตําแหนงไวอยางไร โดยคลิกเลือกคําสั่ง Extensions, Template Manager บุญเลิศ อรุณพิบูลย
124 เว็บไซตงาย รวดเร็วดวย Joomla จากนั้นคลิกที่ Radio Box หนา Template ที่เลือก แลวคลิกปุม Edit ปรากฏจอภาพดังนี้ คลิกปุม Preview โปรแกรม Joomla จะแสดงชื่อตําแหนง (Position Name) ดวยอักษรสีแดงใน กรอบดังตัวอยาง จากภาพตัวอยาง จะพบวา • Main Menu, Login Form แสดงผล ณ ตําแหนง Left • Poll แสดงผล ณ ตําหนง Right • Banner แสดงผล ณ ตําแหนง user1
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 125 - คลังภาพออนไลน “ภาพ” สื่อแทนขอความที่ไดรับความสนใจมากสื่อหนึ่ง เว็บไซตหากไมนําเสนอภาพก็ คงไมสามารถเรียกผูชมไดมากเทาที่ควร ดังนั้นการสรางคลังภาพออนไลนจึงเปนแนวทางหนึ่ง ที่ชวยใหจํานวนผูชมเว็บสูงขึ้นได Joomla เตรียม Extension ที่เกี่ยวกับ Photo Gallery ไวใหเลือกใชหลากหลายโดยดาวน โหลดไดจากเว็บ http://www.joomla.org ทั้งนี้จะขอแนะนําการสรางคลังภาพออนไลนดวย  Extension ชื่อ Ozio Gallery โดยไฟลติดตั้งคือ com_oziogallery-0.24.zip การใชงานจะตองเริ่มจากการติดตั้ง Components กอนดวยคําสั่ง Extension, Install/Uninstall จากนั้น Browse เลือกไฟลแลวคลิกปุม Upload File & Install เพื่อติดตั้ง Component ที่ติดตั้งแลวจะไปแสดงผลที่เมนู Components บุญเลิศ อรุณพิบูลย
126 เว็บไซตงาย รวดเร็วดวย Joomla เมื่อคลิกเลือก Components, Ozio Gallery จะปรากฏจอภาพดังนี้ แสดงวา Components Ozio Gallery ติดตั้งไดสมบูรณ ขันตอนถัดไปคือการเตรียมภาพ ้ ที่จะแสดงผล โดยควรเปนภาพฟอรแมต JPEG (.jpg) ขนาดความกวางไมเกิน 640 พิกเซล ชื่อ ไฟลภาพจะตองเปนภาษาอังกฤษ หามเวนวรรค และ Upload ดวย Media Manager ไปไวที่ โฟลเดอร images/oziogallery ขั้นตอนสุดทายคือ การสรางรายการเมนูควบคุม Ozio Gallery โดยเลือกคําสั่ง Menu, Main Menu แลวคลิกปุม New เลือก Ozio Gallery
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 127 - กําหนดขอความกํากับรายการเมนูในรายการ Joomla Ozio Gallery Components for Joomla เชน คลังภาพ แลวบันทึกดวยปุม Save เมื่อแสดงผลทางหนาเว็บจะปรากฏรายการเมนู และปรากฏผลคลังภาพดังนี้ เพียงเทานี้ก็ไดคลังภาพไมยาก อีกทั้งมีลูกเลนในการนําเสนอที่นาสนใจมาก บุญเลิศ อรุณพิบูลย
128 เว็บไซตงาย รวดเร็วดวย Joomla นอกจากนี้โปรแกรมยังอนุญาตใหปรับเปลี่ยนรูปแบบการแสดงผลไดโดยเลือกเมนู คําสั่ง Components, Ozio Gallery จากนั้นคลิกปุม Settings ปรากฏรายการเลือกรูปแบบการแสดงผลในรายการ Skin  รวมทั้งแท็บ Skin ยอยทีใชปรับแตงการแสดงผลแตละ Skin ที่เลือก ่
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 129 - คลังเอกสาร คลังดาวนโหลด คลังเอกสาร คลังดาวนโหลดฟงกใจอีกฟงกชันทีเ่ ปนหัวใจของระบบจัดการเอกสาร ออนไลน เพราะเอกสารในระบบเว็บไซตมักจะมีจํานวนเพิ่มขึ้นตามเวลา การจัดหมวดหมู เอกสารใหคนหาไดงายจึงมีความสําคัญมาก Joomla ไดเตรียม Extension บริหารจัดการเอกสาร พรอมความสามารถอื่นๆ ไวหลากหลายโปรแกรม โปรแกรมที่จะนําเสนอเปนตัวอยางคือ IonFiles ดาวนโหลดไดจาก Extensions ของ http://www.joomla.org และไดไฟลดังนี้ ionFiles-4[1].2.zip การติดตั้งก็คลายคลึงกับการติดตั้ง Extension อื่นๆ ที่ไดแนะนําไปแลว คือ Extension, Install/Uninstall เมื่อติดตั้งแลวจะปรากฏสวนควบคุมในเมนู Components, ionFiles เริ่มตนจะตองปรับแตงระบบใหเหมาะสมกอน โดยคลิก Configuration บุญเลิศ อรุณพิบูลย
130 เว็บไซตงาย รวดเร็วดวย Joomla แท็บ Configuration เลือกวาจะแสดงหรือไมใหแสดงขอมูลตามรายการเลือกหรือไม เมื่อปรับคาตามตองการแลวใหคลิกปุม Save ขั้นตอนถัดไปคือ สรางหมวดเอกสาร (Categories) โดยคลิกที่แท็บ Manage Categories สรางหมวดเอกสารโดยคลิกปุม New แลวปอนชื่อหมวดเอกสาร คลิกปุม Save เพื่อบันทึก แลวสรางหมวดเอกสารอื่นตามตองการ เมื่อสรางหมวดเอกสารไดแลว ขั้นตอนสุดทายคือ การนําเขาแฟมเอกสาร โดยสามารถ นําเขาแฟมเอกสารไดหลายฟอรแมตทั้ง .pdf, .doc, .xls, .ppt, .odt เปนตน การนําเขาเอกสารมี 2 ขั้นตอนคือ 1. การ Upload แฟมเอกสารเขาสูระบบเว็บ Joomla ผานทาง Media Manager 2. การสรางคลังดาวนโหลดเอกสารดวย ionFiles
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 131 - Upload เอกสารดวย Media Manager การ Upload แฟมเอกสารดวย Media Manager ทําไดโดยเลือกคําสั่ง Site, Media Manager และสรางโฟลเดอรสําหรับเอกสารโดยเฉพาะ เชน documents คลิกเลือกโฟลเดอร Media แลวระบุชื่อโฟลเดอรใหมเปน document จากนันคลิกปุม ้ Create Folder จากนั้นคลิกเลือกโฟลเดอร documents เลือกไฟลที่ตองการ Upload แลวคลิกปุม Start Upload สรางคลังดาวนโหลดเอกสาร เมื่อนําเขาแฟมเอกสารเขาสู Media Manager แลวขั้นถัดไปคือการนําลิงกเอกสารไปยัง ionFiles โดยเลือกคําสั่ง บุญเลิศ อรุณพิบูลย
132 เว็บไซตงาย รวดเร็วดวย Joomla ปรากฏสวนควบคุมการจัดการแฟมเอกสารดังนี้ คลิกปุม New แลวระบุขอมูลเอกสารประกอบการทําลิงกแฟมเอกสาร ดังนี้ ปอนขอมูลรายการที่จําเปน ดังนี้ • File Title ชื่อเอกสารที่ตองการใหแสดงในหนาเว็บ • File Name ชื่อแฟมเอกสาร • Description คําอธิบายเอกสาร
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 133 - • Version รุนของเอกสาร • Licenses type ประเภทลิขสิทธิ์ เชน (c) คือ Copyright, (cc) คือ Creative Commons, Public Domain คือ ของสาธารณะ หรืออื่นๆ • Category หมวดของแฟมเอกสาร • Size ขนาดแฟมเอกสาร (ระบุหนวยตอทายเปน KB หรือ MB) • Release Date วันที่เผยแพรแฟมเอกสาร • File URL สวนสําคัญมากจะตองระบุเปน images/documents/ชื่อแฟม เอกสาร.สวนขยาย • Author เจาของแฟมเอกสาร เมื่อระบุขอมูลจําเปนดังกลาวแลวก็คลิกปุม Save เพื่อบันทึก  ขั้นตอนสุดทายคือการสรางรายการเมนูควบคุม ionFiles ดวยวิธีการสรางเมนูที่เคย แนะนําไปกอนแลว คือ เลือกคําสั่ง Menu, Main Menu คลิกปุม New บุญเลิศ อรุณพิบูลย
134 เว็บไซตงาย รวดเร็วดวย Joomla เลือก ionFiles กําหนดชื่อรายการเมนู เมื่อคลิกปุม Save จะปรากฏรายการเมนูเพิมใน Main Menu และจะแสดงผลเมื่อคลิก ่ เลือก ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 135 - ขาวประกาศอัตโนมัติแบบ RSS Feed RSS ยอมาจาก “Really Simple Syndication” ซึ่งอาจแปลเปนไทยไดวา “การกระจาย ขาวสารอยางงายๆ” เปนเทคโนโลยีที่นําขอมูลที่ผูพฒนาสรางขึ้น ดึงมานําเสนอบนเว็บไซตของ ั เราโดยอัตโนมัติ ทําใหลดภาระในการคัดลอกขาวหรือเนื้อหา ไดขาวหรือเนื้อหาทีปรับปรุงได ่ ตลอดเวลาเมื่อตนฉบับเปลี่ยนแปลง Joomla รองรับการทํางาน RSS โดยผานทาง Components, News Feed โดยจะตองเริ่มจากการสรางหมวดขาวกอน คลิกที่ Categories จากนันคลิกปุม News ้ ระบุชื่อหมวดขาว ดังตัวอยาง • Title ชื่อหมวดขาว • Published เลือก Yes เพื่อใหหมวดขาวทํางาน บุญเลิศ อรุณพิบูลย
136 เว็บไซตงาย รวดเร็วดวย Joomla เมื่อคลิกปุม Save จะปรากฏหมวดขาว ดังนี้ สามารถสรางหมวดขาวประเภทอื่นๆ ไดตามตองการ เมื่อเรียบรอยแลวก็จะเปน การระบุ URL ของ RSS Feed จากเว็บผูใหบริการดวยคําสั่ง Components, News Feeds, Feeds คลิกปุม New เพื่อสรางรายการขาวใหม • Name ชื่อขาวที่จะดึง เชน ผูจัดการ • Published เลือก Yes เพื่อใหรายการนี้ทางานํ • Category เลือกหมวดขาว • Link ระบุ URL ของ RSS Feeds ที่ตองการดึง • Number of Articles จํานวนขาวที่ตองการใหแสดงในหนาเว็บ  • Cache Time เวลา (วินาที) ที่ตองการใหปรับปรุงรายการขาว เมื่อไดกําหนดขอมูลแลวจึงคลิกปุม Save การหา URL ของ RSS Feeds ทําไดโดยเขาไปยังเว็บไซต (แนะนําใหใช Firefox) เชน หนังสือพิมพผูจัดการ ดวย URL http://www.manager.co.th แลวเลื่อนหา สัญลักษณ ในหนาเว็บ ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 137 - คลิกปุมขวาของเมาสที่สัญลักษณ ในหมวดขาวที่ตองการ แลวเลือกคําสั่ง Copy Link Location เพื่อคัดลอก URL ของ RSS ขาวในหมวดที่เลือก จากนั้นจึงนํา URL ที่คัดลอกไป Paste ในรายการ Link ของ News Feeds เมื่อไดหมวดขาว RSS Feeds ตามตองการแลว จึงสรางเมนูควบคุมการแสดงผลตอไป บุญเลิศ อรุณพิบูลย
138 เว็บไซตงาย รวดเร็วดวย Joomla ติดตอทีมพัฒนา ผูดแลเว็บ ู เว็บไซตควรจะมีเนื้อหาที่แสดงถึงขอมูลการติดตอสื่อสาร อยาใหความสําคัญกับการ ติดตอดวย e-Mail หรือ Web board เพียงอยางเดียว การระบุขอมูลการติดตอทีมพัฒนา หรือ ผูดูแลเว็บมีความสําคัญมาก Joomla ไดเตรียม Components Contact เปนสวนควบคุมโดย สามารถสรางเนื้อหาไดหลายหมวด จึงตองเริ่มจากการสรางหมวดขอมูลการติดตอกอน ดวย คําสั่ง Components, Contacts, Categories สามารถสรางไดหลายหมวดดังนี้ เมื่อสรางหมวดขอมูลการติดตอแลว ก็จะเปนการสรางรายการติดตอดวยคําสั่ง Components, Contacts, Contacts โดยรายการระบุเมื่อคลิกปุม New ไดแก
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 139 - • Name ระบุชื่อรายการติดตอ เชน Web Master • Category เลือกหมวดการติดตอที่สรางไวกอนหนา • Links to User กรณีที่มีการสรางสมาชิกมากกวา 1 สามารถระบุไดวาการ ติดตอนี้ จะหมายถึงสมาชิกใด จากนั้นก็ระบุขอมูลการติดตอ ดังนี้ เมื่อระบุขอมูลที่จําเปนครบแลวจึงคลิกปุม Save และสราง Menu ควบคุมการแสดงผล ตอไป บุญเลิศ อรุณพิบูลย
140 เว็บไซตงาย รวดเร็วดวย Joomla เพิ่มชุดเมนู ปกติ Joomla ไดเตรียมชุดเมนูไวใหแลว 1 ชุดมาตรฐานคือ ชุดเมนูหลัก (Main Menu) แตผูพัฒนาสามารถสรางชุดเมนูเพิ่มไดตามตองการ เชน ตองการเพิ่มชุดเมนูในแนวนอนวางไว ที่ตําแหนง user3 ประกอบดวยรายการ Home, RSS News และ Contact Us 1. เลือกเมนูคําสั่ง Menu, Menu Manager คลิกปุม New เพือสรางชุดเมนูชุดใหม ่ 2. กําหนดชื่อชุดเมนูเปน Top Menu ทั้ง 4 รายการ แลวจึงคลิกปุม Save 3. คัดลอกรายการเมนู Home จาก Main Menu ไปยัง Top Menu โดย 1) เลือกคําสั่ง Menu, Main Menu 2) คลิก Radio Box หนา Home แลวคลิกปุม Copy 3) เลือก Top Menu แลวคลิกปุม Copy  4) รายการเมนู Home จะถูกคัดลอกมาไวที่ Top Menu ดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 141 - 4. ถัดไปก็สรางรายการเมนู RSS News และ Contact Us ดวยวิธีการที่ไดแนะนํา ไปกอนแลว แตใหเลือกชุดเมนูเปน Top Menu ดังนี้ 5. กําหนดการแสดงผล Top Menu ณ ตําแหนง user3 โดยเลือกคําสั่ง Extension, Module Manager 6. คลิกเลือก Top Menu 7. เลือก Enabled เปน Yes และ Position เปน user3 8. เมื่อบันทึกการปรับแสดงผล Top Menu จาก Module Manager แลวแสดงผล เว็บ เมนูใหมทสรางจะปรากฏในหนาเว็บ ดังนี้ ี่ บุญเลิศ อรุณพิบูลย
142 เว็บไซตงาย รวดเร็วดวย Joomla สรางบัญชีสมาชิก จุดเดนของ CMS คือการอนุญาตใหสมาชิกมีสวนรวมสรางสรรค ปรับปรุงเว็บไซตทํา ใหเว็บไซตมีความเคลื่อนไหวอยูตลอดเวลาจากกลุมสมาชิก การสรางสมาชิกสามารถทําได หลายวิธี เชน เปดระบบลงทะเบียนสมาชิกอัตโนมัติจากหนาเว็บ หรือ Admin ของเว็บเปน ผูสรางบัญชีสมาชิก การลงทะเบียนสมาชิกอัตโนมัติจากหนาเว็บ จะทําไดเมื่อ Admin กําหนดคา Global Configuration ในสวน User Settings ดังนี้ Allow User Registration เลือกเปน Yes และสราง Module Login ใหทํางานในหนา Front-end ของเว็บ Module Login โดยจะปรากฏสวน Login ในหนา Front-End ของเว็บดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 143 - เมื่อผูสนใจคลิกรายการเมนู Create an account จะปรากฏจอภาพลงทะเบียนเปน สมาชิกดังนี้ ผูสมัครปอนขอมูลตามฟอรมลงทะเบียน และคลิกปุม Register กรณีที่ Web Server และเว็บไซตไดกําหนดคา Mail Server ไวถูกตองระบบจะสงอีเมลไปยังผูสมัครตามอีเมลที่ระบุ เพื่อใหยืนยันการสมัคร การกําหนดคา Mail Server ใหระบุที่ Global Configuration ในสวน Server, Mail Settings กรณีที่ Web Server และเว็บไซตไมไดกําหนดคา Mail Server ไวผูสมัครจะไมไดรับ อีเมลยืนยัน Admin จะตองเปนผูแจงผูสมัครดวยวิธีการอื่นแทน โดย Admin เขาไปตรวจสอบ บัญชีผูสมัครไดทาง Control Panel คลิกที่ไอคอน User Manager บุญเลิศ อรุณพิบูลย
144 เว็บไซตงาย รวดเร็วดวย Joomla จากภาพตัวอยางจะพบวามีบญชีใหมคือ courseware2u ที่ยังไมไดเปดใช สังเกตุไดที่ ั รายการ Enabled เปนกากบาทสีแดง หาก Admin ตองการใหสมาชิกนีมสิทธิ์ทํางานกับเว็บไซต ้ ี ก็ใหคลิกกากบาทสีแดง ใหเปนเครื่องหมายถูกสีเขียว การแกไขขอมูลสมาชิก ทําไดโดยคลิกที่ชอสมาชิกนั้นๆ ื่ สําหรับการสรางบัญชีสมาชิกใหมโดย Admin ทําไดโดยเขามาที่ User Manager แลว คลิกปุม New แลวปอนขอมูลสมาชิก ในสวน Group เปนสวนสําคัญมากคือการสิทธิ์ของสมาชิกวามี สิทธิ์อยางไรกับเว็บไซต โดยกําหนดสิทธิไดดังนี้ ์
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 145 - • Public Front-end สิทธิ์เฉพาะการล็อกอินทางหนาเว็บ Front-end o Registered มีสิทธิ์เฉพาะสง URL เว็บแนะนํา และอานเนื้อหาบางสวนที่ กําหนดไวเฉพาะสมาชิก o Author มีสิทธิ์สรางเนื้อหาและเหมือนกับ Registered o Editor มีสิทธิ์สราง/แกไขเนื้อหาและเหมือนกับ Author o Publisher มีสิทธิ์สราง/แกไขเนื้อหาทั้งของคนเองและสมาชิกทานอื่น รวมทั้งสิทธเหมือนกับ Author • Public Back-end สิทธิ์ล็อกอินทางหนาเว็บ Front-end และ Back-end ของเว็บไซต o Manager มีสิทธิ์เหมือน Publisher แตสามารทํางานจาก Back-end Control Panel ของเว็บได o Administrator มีสิทธิ์คลายกับ Super Admin แตยังไมสิทธิ์เปลี่ยน คา Configuration ของระบบ o Super Administrator มีสิทธิ์ทุกอยางในการจัดการเว็บไซต บุญเลิศ อรุณพิบูลย
146 เว็บไซตงาย รวดเร็วดวย Joomla เมนูเฉพาะสมาชิก การเขาทํางานสําหรับสมาชิกในโหมด Front-end ผูพัฒนาเว็บควรสรางเมนูการทํางาน เฉพาะสมาชิกขึ้นมา เชน การปรับแกไขขอมูลสมาชิก (Updated Profile) การสงบทความเขาสู เว็บ (Submit Article) การสงเว็บไซตแนะนํา เปนตน โดยชุดเมนูนจะแสดงเมื่อสมาชิกล็อกอิน ี้ เทานั้น การสรางชุดเมนูเฉพาะสมาชิกทําไดโดยเลือกคําสั่ง Menu, Menu Manager แลวคลิก ปุม New สรางชุดเมนูใหม เชน User Menu เมื่อสรางชุดเมนูใหมแลว จะตองเปดใหแสดงผลดวยโดยคลิกเมนูคําสั่ง Extension, Module Manager แลวคลิก Enabled แตเนื่องจากชุดเมนูนจะอนุญาตเฉพาะสมาชิกเทานั้น จึงตองปรับคา Access Level ดวย ้ี โดยคลิกที่ Module User Menu เพื่อเขาไปปรับคา Access Level เปน Registered รวมทั้งปรับ ตําแหนง (Position) และ Order ใหเหมาะสมดวย
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 147 - เพิ่มรายการคําสั่งใน User Menu เชน รายการคําสั่งสําหรับปรับปรุงขอมูลของสมาชิก โดยคลิกเลือกคําสั่ง Menu, User Menu แลวคลิกปุม New เลือกคําสั่ง User บุญเลิศ อรุณพิบูลย
148 เว็บไซตงาย รวดเร็วดวย Joomla เลือกคําสั่งยอยเปน User Form Layout จากนั้นระบุชื่อรายการเมนู เชน Update Profile เมื่อคลิกปุม Save จากนันกลับไปทํางานในหนา Front-end แลว Login เขาสูระบบจะ ้ ปรากฏชุดเมนูใหม และรายการเมนูดังนี้ เพียงเทานี้ก็ไดเมนูและคําสั่งสําหรับสมาชิกพรอมใชงานแลว แตยงไมครบนะครับ ั ควรสรางรายการเมนูอื่นๆ ดวย เชน แนะนําเว็บไซต หรือสงบทความเขาสูเว็บเพือกําหนดให ่ เปนเว็บที่สมาชิกมีสวนรวมในการสรางสรรคอยางแทจริง  คําสั่งแนะนําเว็บไซตสําหรับสมาชิก เลือกไดดังนี้
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 149 - คําสั่งสงบทความเขาสูระบบ คือ บุญเลิศ อรุณพิบูลย
คํานํา การพัฒนาเว็บไซตในปจจุบนไดมีการพัฒนาไปอยางมาก โดยเฉพาะเมื่อมีการสราง ั เครื่องมือชวยจัดการเนื้อหาของเว็บไซตทเี่ รียกวา CMS: Content Management System สงผล ใหการออกแบบพัฒนาเว็บเปนเรื่องงาย สะดวกและรวดเร็วมากขึ้น Joomla นับเปน CMS ที่มีความสามารถสูงมากโปรแกรมหนึ่ง มีจุดเดนในการจัดการ เนื้อหาบทความที่หลากหลายรูปแบบ รองรับสื่อหลายฟอรแมต อีกทั้งมีหนาตาของเว็บที่ สวยงาม พรอมดวยโปรแกรมเสริมใหเลือกตามความตองการของหนวยงาน โดยเฉพาะ จุดสําคัญคือ เปนซอฟตแวรในกลุมเปดเผยตนฉบับ (Source Code) หรือ Open Source Software ทําใหไมมีคาใชจายในการจัดหาซอฟตแวร อีกทั้งสามารถปรับประยุกตแกไขใหเหมาะสมกับ แตละหนวยงานได ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี เห็นความสําคัญของการจัดสื่อและ คูมือเผยแพรการใชงาน Joomla จึงไดจัดทําคูมอฉบับนี้ขึ้นมาเพื่อเปนเอกสารตั้งตนสําหรับ ื ผูสนใจทุกทาน ทั้งนี้เนื้อหาและเทคนิคเพิ่มเติมทานที่สนใจสามารถติดตามไดจากเว็บไซต http://stks.or.th/elearning หากคูมอนี้มีขอผิดพลาดประการใด ผูเขียนขออภัยไว ณ ที่น้และขอขอบคุณสําหรับ ื  ี คําแนะนําจากทุกทานเพื่อปรับปรุงในโอกาสตอไป บุญเลิศ อรุณพิบูลย 16 เมษายน 2551
สารบัญ เทคโนโลยีเว็บเพจ .............................................................................................................................................1 องคประกอบของเทคโนโลยีเว็บ .......................................................................................................................3 เทคโนโลยีอนเทอรเน็ต...............................................................................................................................3 ิ เอกสารเว็บ ..................................................................................................................................................3 เว็บเบราวเซอร (Web Browser)..................................................................................................................4 Markup Language ......................................................................................................................................7 HTML ...................................................................................................................................................7 SGML....................................................................................................................................................8 XML......................................................................................................................................................8 Style Sheet Technology .............................................................................................................................9 CSS........................................................................................................................................................9 XSL .......................................................................................................................................................9 รูปภาพ ......................................................................................................................................................10 ไฟลสกุล GIF (Graphics Interlace File)..............................................................................................10 ไฟลสกุล JPG (Joint Photographer’s Experts Group)........................................................................10 ไฟลสกุล PNG (Portable Network Graphics).....................................................................................11 การออกแบบเว็บเพจ........................................................................................................................................12 หลักการพัฒนาเว็บเพจ.....................................................................................................................................13 ขั้นเตรียมการ ............................................................................................................................................14 คําถามเพื่อชวยในการวางแผนเว็บไซต ...............................................................................................14 กําหนดโครงรางของเว็บ ...........................................................................................................................14 กําหนดโฟลเดอร (Folder) ที่ใชเก็บเอกสารเว็บ .......................................................................................16 สรางภาพหรือจัดหาภาพที่เกี่ยวของกับเนื้อหา .........................................................................................17 สรางเอกสารประกอบ...............................................................................................................................17 เลือกเครืองแมขาย WWW และระบบการสรางงาน .................................................................................17 สรางเอกสารเว็บ .......................................................................................................................................18 ตรวจสอบเอกสารเว็บ ...............................................................................................................................19 สงขอมูลขึ้นเครื่องบริการเว็บ ...................................................................................................................19 เครื่องมือพัฒนาเว็บ ..........................................................................................................................................21 Text Editor................................................................................................................................................21 HTML Editor ......................................................................................................................................22 HTML Generator ................................................................................................................................22 โปรแกรมบริหารจัดการเนื้อหาเว็บ (CMS).........................................................................................23 CMS เครื่องมือเด็ดพัฒนาเว็บไซต ...................................................................................................................24
Joomla: CMS เด็ดนาใช...................................................................................................................................26 ติดตั้ง Joomla บนพีซีจําลอง............................................................................................................................28 ติดตั้ง Joomla...................................................................................................................................................33 สํารวจเว็บใหม .................................................................................................................................................38 เขาสูระบบผาน Front-end ...............................................................................................................................41 แกไขขอมูลสมาชิก ..........................................................................................................................................42 แกไขบทความ .................................................................................................................................................43 แบงตอนเนื้อหาดวย Read more…..................................................................................................................45 สารบัญเนื้อหา..................................................................................................................................................47 แทรกรูปภาพ ...................................................................................................................................................48 ไฟลภาพ ...................................................................................................................................................51 ควบคุมการแสดงผลบทความ..........................................................................................................................52 สืบคนบทความไดงายๆ ดวย Metadata...........................................................................................................53 สรางบทความใหม...........................................................................................................................................54 ปรับแตงเว็บไซตผาน Back-end......................................................................................................................56 ขอมูลประกอบการสืบคนของเว็บ...................................................................................................................58 เขาถึงเนื้อหาไดงาย..........................................................................................................................................60 การปรับเปลี่ยนโฉมหนาของเว็บไซต .............................................................................................................61 จัดการบทความในเว็บไซต..............................................................................................................................64 การแกไขเนื้อหา .......................................................................................................................................66 เพิ่มประสิทธิภาพการสืบคนใหกับบทความ............................................................................................70 ตกแตงดวยรูปภาพ...........................................................................................................................................71 ลบภาพ......................................................................................................................................................72 ทํางานกับสื่อรูปแบบตางๆ ..............................................................................................................................73 ทํางานกับเมนู ..................................................................................................................................................74 ปรับแกไขเมนู...........................................................................................................................................74 Components ....................................................................................................................................................77 แบบสอบถามออนไลน (Poll) ..................................................................................................................77 ปายโฆษณา (Banner)...............................................................................................................................79 ดึงขาวมาแสดงผลอัตโนมัติ ......................................................................................................................81 ดาวนโหลด/ติดตั้ง Components...............................................................................................................82 พัฒนาเว็บตามตองการ ....................................................................................................................................83 ปรับเว็บไซตในโหมด Backend ......................................................................................................................89 ปรับคาระบบเว็บไซต (Global Configuration).........................................................................................89 วิเคราะหเนื้อหาเว็บไซต ..................................................................................................................................94 สรางเนื้อหา “แนะนําเว็บไซต” ........................................................................................................................96
สรางเนื้อหา “ทีมพัฒนา” ...............................................................................................................................101 เนื้อหาหมวดคลังความรู ................................................................................................................................108 แบบสอบถามออนไลน (Poll)........................................................................................................................115 Web Resources..............................................................................................................................................117 ปายโฆษณา (Banner) ....................................................................................................................................121 คลังภาพออนไลน ..........................................................................................................................................125 คลังเอกสาร คลังดาวนโหลด .........................................................................................................................129 Upload เอกสารดวย Media Manager .....................................................................................................131 สรางคลังดาวนโหลดเอกสาร .................................................................................................................131 ขาวประกาศอัตโนมัติแบบ RSS Feed ...........................................................................................................135 ติดตอทีมพัฒนา ผูดูแลเว็บ .............................................................................................................................138 เพิ่มชุดเมนู .....................................................................................................................................................140 สรางบัญชีสมาชิก ..........................................................................................................................................142 เมนูเฉพาะสมาชิก ..........................................................................................................................................146
เว็บไซตงาย รวดเร็วดวย Joomla (version 1.5) บุญเลิศ อรุณพิบูลย ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี (http://stks.or.th) สํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ

More Related Content

PDF
คู่มือการสร้างเว็บDreammx2004
bykernger99
 
PDF
Desktop Author 5
byBoonlert Aroonpiboon
 
PDF
หมวย
bysirinet
 
PDF
หวิว
byViewMik
 
PDF
Yuu
bysirinet
 
PDF
Ten
bysirinet
 
PDF
New
bysirinet
 
PDF
Web 2.0 & Social Networking
byBoonlert Aroonpiboon
 
คู่มือการสร้างเว็บDreammx2004
bykernger99
 
Desktop Author 5
byBoonlert Aroonpiboon
 
หมวย
bysirinet
 
หวิว
byViewMik
 
Yuu
bysirinet
 
Ten
bysirinet
 
New
bysirinet
 
Web 2.0 & Social Networking
byBoonlert Aroonpiboon
 

What's hot

PDF
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
bySamorn Tara
 
PDF
Joomla CMS
byBoonlert Aroonpiboon
 
PDF
Internet
bySupatra Thomya
 
PDF
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
bySatapon Yosakonkun
 
PPT
Library 2.0
bySatapon Yosakonkun
 
PDF
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
bySamorn Tara
 
PDF
แนะนำ ePub และการสร้าง ePub ด้วย Sigil
byBoonlert Aroonpiboon
 
PDF
20110201 drupal-ir
byBoonlert Aroonpiboon
 
PDF
โบ
bysirinet
 
PDF
ดรีม
bysirinet
 
PDF
นุ๊ก
bysirinet
 
PDF
รออกแบบเว็บไซต์
bysirinet
 
PDF
Best
bysirinet
 
PDF
How to design library website
byMaykin Likitboonyalit
 
PDF
Web 2.0 Apply for KM & Education
byBoonlert Aroonpiboon
 
PPT
e-Publishing
byBoonlert Aroonpiboon
 
PDF
OAI-PMH with Drupal + XAMPP Portable + PKP OHS
byBoonlert Aroonpiboon
 
PDF
04แผนการจัดการเรียนรู้1 ความรู้เกี่ยวกับเว็บเพจ
byTarinee Bunkloy
 
PPT
20080620 E Publishing
bySatapon Yosakonkun
 
PPT
E book flip5555
byKru MikeKung Tatthawit Pumwatchara
 
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
bySamorn Tara
 
Joomla CMS
byBoonlert Aroonpiboon
 
Internet
bySupatra Thomya
 
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
bySatapon Yosakonkun
 
Library 2.0
bySatapon Yosakonkun
 
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
bySamorn Tara
 
แนะนำ ePub และการสร้าง ePub ด้วย Sigil
byBoonlert Aroonpiboon
 
20110201 drupal-ir
byBoonlert Aroonpiboon
 
โบ
bysirinet
 
ดรีม
bysirinet
 
นุ๊ก
bysirinet
 
รออกแบบเว็บไซต์
bysirinet
 
Best
bysirinet
 
How to design library website
byMaykin Likitboonyalit
 
Web 2.0 Apply for KM & Education
byBoonlert Aroonpiboon
 
e-Publishing
byBoonlert Aroonpiboon
 
OAI-PMH with Drupal + XAMPP Portable + PKP OHS
byBoonlert Aroonpiboon
 
04แผนการจัดการเรียนรู้1 ความรู้เกี่ยวกับเว็บเพจ
byTarinee Bunkloy
 
20080620 E Publishing
bySatapon Yosakonkun
 
E book flip5555
byKru MikeKung Tatthawit Pumwatchara
 

Viewers also liked

PDF
คู่มือการใช้ Google Docs
byKanda Runapongsa Saikaew
 
PDF
Microsoft Office Excel 2007
byBoonlert Aroonpiboon
 
PPT
Ebook flip
bypeeranan kesthongma
 
PDF
Microsoft Office PowerPoint 2007
byBoonlert Aroonpiboon
 
PDF
หลักสูตรกลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี
bykruwaeo
 
PDF
Flipalbum6
byBoonlert Aroonpiboon
 
PDF
Macromedia Captivate
byBoonlert Aroonpiboon
 
คู่มือการใช้ Google Docs
byKanda Runapongsa Saikaew
 
Microsoft Office Excel 2007
byBoonlert Aroonpiboon
 
Ebook flip
bypeeranan kesthongma
 
Microsoft Office PowerPoint 2007
byBoonlert Aroonpiboon
 
หลักสูตรกลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี
bykruwaeo
 
Flipalbum6
byBoonlert Aroonpiboon
 
Macromedia Captivate
byBoonlert Aroonpiboon
 

Similar to Joomla

PDF
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต
byPrapatsorn Keawnoun
 
PPT
Websitebasic
byNaresuan University Library
 
PDF
เวิลด์ไวด์เว็บ
byปิยะดนัย วิเคียน
 
PDF
ความรู้พื้นฐานเกี่ยวกับการสร้างเว็บไซต์
byไกรลาศ จิบจันทร์
 
PDF
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไขแล้ว)
byPrapatsorn Keawnoun
 
DOC
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
bySutin Yotyavilai
 
PDF
หมวย
bysirinet
 
PPT
08 W3 Browser
byTippawan Rotcha
 
DOC
Internet
bySutin Yotyavilai
 
PDF
ความรู้เบื้องต้นอินเตอร์เน็ต
byเขมิกา กุลาศรี
 
PDF
Ict
byHansaschool SuphanOne
 
PDF
Websitebasic
byคุณครู ดอทคอม
 
PDF
หนังงสือเล่มเล็ก
byJirawat Fishingclub
 
PPT
Grossary
byAttaporn Ninsuwan
 
PDF
อินทรอเน็ต
byYongyut Nintakan
 
PDF
Unit2
byPhannee Yenbamroong
 
PDF
Webbasic
bykhon Kaen University
 
PPT
ICT with Web site
byBoonlert Aroonpiboon
 
PDF
Web 2.0 to LIbrary 2.0
byBoonlert Aroonpiboon
 
PDF
Website for public_relations
byajpeerawich
 
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต
byPrapatsorn Keawnoun
 
Websitebasic
byNaresuan University Library
 
เวิลด์ไวด์เว็บ
byปิยะดนัย วิเคียน
 
ความรู้พื้นฐานเกี่ยวกับการสร้างเว็บไซต์
byไกรลาศ จิบจันทร์
 
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไขแล้ว)
byPrapatsorn Keawnoun
 
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
bySutin Yotyavilai
 
หมวย
bysirinet
 
08 W3 Browser
byTippawan Rotcha
 
Internet
bySutin Yotyavilai
 
ความรู้เบื้องต้นอินเตอร์เน็ต
byเขมิกา กุลาศรี
 
Ict
byHansaschool SuphanOne
 
Websitebasic
byคุณครู ดอทคอม
 
หนังงสือเล่มเล็ก
byJirawat Fishingclub
 
Grossary
byAttaporn Ninsuwan
 
อินทรอเน็ต
byYongyut Nintakan
 
Unit2
byPhannee Yenbamroong
 
Webbasic
bykhon Kaen University
 
ICT with Web site
byBoonlert Aroonpiboon
 
Web 2.0 to LIbrary 2.0
byBoonlert Aroonpiboon
 
Website for public_relations
byajpeerawich
 

More from Boonlert Aroonpiboon

PDF
Local Wisdom Information : How to
byBoonlert Aroonpiboon
 
PDF
20190220 digital-archives
byBoonlert Aroonpiboon
 
PDF
201403 etda-library-settup
byBoonlert Aroonpiboon
 
PDF
digital law for GLAM
byBoonlert Aroonpiboon
 
PDF
LAM Code of conduct
byBoonlert Aroonpiboon
 
PDF
20190726 icde-session-chularat-nstda-4
byBoonlert Aroonpiboon
 
PDF
Scival for Research Performance
byBoonlert Aroonpiboon
 
PDF
Field-Weighted Citation Impact (FWCI)
byBoonlert Aroonpiboon
 
PDF
Excel quiz
byBoonlert Aroonpiboon
 
PDF
OER KKU Library
byBoonlert Aroonpiboon
 
PDF
20190220 open-library
byBoonlert Aroonpiboon
 
PDF
20180828 digital-archives
byBoonlert Aroonpiboon
 
PDF
New Technology for Information Services
byBoonlert Aroonpiboon
 
PDF
20180919 digital-collections
byBoonlert Aroonpiboon
 
PDF
New Technology for Information Services
byBoonlert Aroonpiboon
 
PDF
201403 etda-library
byBoonlert Aroonpiboon
 
PDF
20190409 social-media-backup
byBoonlert Aroonpiboon
 
PDF
Museum digital-code
byBoonlert Aroonpiboon
 
PDF
OER MOOC - Success Story
byBoonlert Aroonpiboon
 
PDF
RLPD - OER MOOC
byBoonlert Aroonpiboon
 
Local Wisdom Information : How to
byBoonlert Aroonpiboon
 
20190220 digital-archives
byBoonlert Aroonpiboon
 
201403 etda-library-settup
byBoonlert Aroonpiboon
 
digital law for GLAM
byBoonlert Aroonpiboon
 
LAM Code of conduct
byBoonlert Aroonpiboon
 
20190726 icde-session-chularat-nstda-4
byBoonlert Aroonpiboon
 
Scival for Research Performance
byBoonlert Aroonpiboon
 
Field-Weighted Citation Impact (FWCI)
byBoonlert Aroonpiboon
 
Excel quiz
byBoonlert Aroonpiboon
 
OER KKU Library
byBoonlert Aroonpiboon
 
20190220 open-library
byBoonlert Aroonpiboon
 
20180828 digital-archives
byBoonlert Aroonpiboon
 
New Technology for Information Services
byBoonlert Aroonpiboon
 
20180919 digital-collections
byBoonlert Aroonpiboon
 
New Technology for Information Services
byBoonlert Aroonpiboon
 
201403 etda-library
byBoonlert Aroonpiboon
 
20190409 social-media-backup
byBoonlert Aroonpiboon
 
Museum digital-code
byBoonlert Aroonpiboon
 
OER MOOC - Success Story
byBoonlert Aroonpiboon
 
RLPD - OER MOOC
byBoonlert Aroonpiboon
 

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 เมื่อดับเบิลคลิกจะปรากฏสวน ติดตั้งโปรแกรม ดังนี้
  • 29.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 29 - จากจอภาพตอนรับการติดตั้ง AppServ ใหคลิกปุม Next เพื่อเขาสูสวนลิขสิทธิ์  คลิก I Agree เพื่อยอมรับลิขสิทธิ์การใชงานเชนกัน จอภาพถัดไปคือระบุไดรฟ และโฟลเดอรสําหรับติดตั้ง Appserv โดยโปรแกรม กําหนดไวทไดรฟ C โฟลเดอร AppServ ใหคลิก Next เพื่อยอมรับการกําหนดไดรฟและ ี่ โฟลเดอร บุญเลิศ อรุณพิบูลย
  • 30.
    30 เว็บไซตงาย รวดเร็วดวย Joomla สวนนี้เปนการเลือกวาจะติดตั้งโปรแกรมใดบาง กรณีนใหคลิกเลือกทุกรายการ แลว ี้ คลิกปุม Next สวนสําคัญในการติดตั้ง คือ 1. การระบุชื่อเครื่องแมขายเว็บ (Server Name) กรณีที่เปนการติดตั้งจําลองมักจะ ระบุเปน localhost (สําหรับการติดตั้งจริง จะตองสอบถามจากผูดูแลเครื่องแม ขายเว็บโดยตรง) 2. การระบุอีเมลของผูดูแล (Administrator’s Email Address)
  • 31.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 31 - 3. การระบุหมายเลขชองทางติดตอ (Apache HTTP Port) มักจะระบุเปนเลข 80 เมื่อกําหนดคาตางๆ แลวก็คลิกปุม Next เพื่อเขาสูสวนกําหนดคาควบคุมของฐานขอมูล MySQL 1. กําหนดรหัสผานของการเขาถึงฐานขอมูล MySQL ในรายการ Enter root password และระบุซ้ําในรายการ Re-enter root password 2. เลือกรหัสภาษาไทยใหถูกตองตามคากําหนดของเครื่องแมขาย กรณีนี้ควรระบุ เปน UTF-8 Unicode หรือ TIS-620 (ตามขอกําหนดของเครื่องแมขายเว็บ) Account ชุดแรกที่ตองจําคือ Account ควบคุมฐานขอมูล MySQL โดย User Name คือ root และรหัสผาน คือ .............................................. บุญเลิศ อรุณพิบูลย
  • 32.
    32 เว็บไซตงาย รวดเร็วดวย Joomla เมื่อระบุคาเกียวกับการเขาถึงฐานขอมูล MySQL แลวใหคลิกปุม Install เพื่อเริ่มติดตั้ง ่ โปรแกรมตางๆ ของ AppServ จอภาพแสดงผลเมื่อการติดตังสมบูรณ ้ คลิกเลือก Start Apache และ Start MySQL เพื่อใหโปรแกรมทั้งสองทํางาน จากนัน ้ คลิกปุม Finish เพียงเทานี้ก็เสร็จสิ้นการติดตั้ง AppServ ซึ่งสามารถทดสอบไดโดยเปด เว็บเบราวเซอร จากนั้นพิมพคําสั่ง http://localhost หรือ http://127.0.0.1
  • 33.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 33 - ติดตั้ง Joomla พีซีธรรมดาไดถูกจําลองเปนเครื่องแมขายเว็บแลว ตอนนีกถึงเวลาที่จะติดตั้ง Joomla ้็ เพื่อเนรมิตเว็บไซตภายในไมกี่นาที โดยเริมจากดาวนโหลดโปรแกรม joomla รุนลาสุด (1.5.2 ่ ณ วันที่ 1 เม.ย. 2551) จากเว็บไซต http://www.joomla.org/ ไฟลที่ดาวนโหลดมาไดคือ Joomla_1.5.2-Stable-Full_Package.zip ใหแตกไฟลซงจะ ่ึ ไดโฟลเดอรชอ ื่ ไฟลทั้งหมดในโฟลเดอรดังกลาวคือไฟลตนฉบับของ Joomla ใหคัดลอกโฟลเดอรนี้  ไปไวที่โฟลเดอร www ของ AppServ แลวเปลี่ยนชื่อโฟลเดอรตามตองการ เชน ถาตองการ สรางเว็บไซตของตนเอง ก็ใชชื่อตัวเปนชือโฟลเดอร หรือเว็บหนวยงาน ก็อาจจะใชชื่อยอของ ่ หนวยงานเปนชื่อโฟลเดอร (ตัวอยางขอใชชื่อ joomla15) ตอนนี้กพรอมจะติดตั้ง Joomla โดยเปดเบราวเซอร แลวพิมพคําสั่ง ็ http://localhost/ชื่อโฟลเดอร หรือ http://127.0.0.1/ชื่อโฟลเดอร (ตัวอยางคือ http://localhost/joomla15 หรือ http://127.0.0.1/joomla15) บุญเลิศ อรุณพิบูลย
  • 34.
    34 เว็บไซตงาย รวดเร็วดวย Joomla ขั้นตอนแรกของการติดตั้งคือ การเลือกภาษาของการติดตั้ง โดยสามารถเลื่อนจอภาพ ลงมาเลือกภาษาไทย (th-TH – Thai)ได จากนั้นคลิกปุม Next เพื่อเขาสูการตรวจสอบสิทธิ์การติดตั้ง 
  • 35.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 35 - ขั้นตอนนี้จะเปนการตรวจสอบสิทธิ์การเขียนลงในไฟล configuration.php และ ฟงกชันการทํางานของตัวแปลภาษา PHP แลวคลิกปุมถัดไปจะเขาสูสวนลิขสิทธิ์ของโปรแกรม ในหนานี้ก็คลิกปุมถัดไปไดเชนกัน สวนนี้เปนหัวใจของการติดตั้ง จะตอง 1. เลือกชนิดของฐานขอมูลที่ตองการใชงาน กรณีนใหเลือก mysql ี้ 2. ระบุช่อโฮสตของฐานขอมูล โดยพิมพ localhost ื 3. ระบุช่อผูใชฐานขอมูล ใหพมพ root ื ิ 4. กําหนดรหัสผานของฐานขอมูล mysql 5. ระบุช่อฐานขอมูล เชน joomla15 (แนะนําใหกําหนดชือเดียวกับชื่อโฟลเดอร) ื ่ เมื่อระบุขอมูลขางตนแลว ก็คลิกปุมถัดไป จะเขาสูสวนกําหนดคา FTP (File Transfer  Protocol) บุญเลิศ อรุณพิบูลย
  • 36.
    36 เว็บไซตงาย รวดเร็วดวย Joomla ใหคลิกปุมถัดไปไดเลยครับ เพื่อกําหนดขอมูลเกี่ยวกับเว็บไซตที่ใกลจะเสร็จสมบูรณ คาที่ตองระบุไดแก • ชื่อเว็บไซต เชน Joomla15 : CMS for you • อีเมลของผูดูแลเว็บ • รหัสผานของผูดูแลเว็บ (จะตองจําใหไดดวยครับ)  • คลิกปุมติดตั้งขอมูลตัวอยาง
  • 37.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 37 - จากนั้นคลิกปุมถัดไป เพื่อใหกระบวนการเสร็จสิ้นอยางสมบูรณ ควรลบโฟลเดอร  installation ดวยนะครับ คลิกปุมดูหนาเว็บไซตจะปรากฏเว็บไซตพรอมขอมูลตัวอยางดังนี้ บุญเลิศ อรุณพิบูลย
  • 38.
    38 เว็บไซตงาย รวดเร็วดวย Joomla สํารวจเว็บใหม เว็บไซตตวอยางของ Joomla ไดติดตังเรียบรอยแลว การเขาสูเว็บไซตเมื่อติดตัง ั ้ ้ เรียบรอยแลวทําไดโดยพิมพ URL ดังนี้ http://localhost/ชื่อโฟลเดอร หรือ http://127.0.0.1/ชื่อโฟลเดอร ตัวอยาง http://localhost/joomla15 โดยจอภาพของเว็บไซตที่สรางจากขอมูลตัวอยาง ของ Joomla นับเปนเว็บตัวอยางทีนาสนใจ มีขอมูลหลากหลาย ทั้งนี้สวนแรกของเว็บคือ ่  Header ประกอบดวย Logo ของเว็บไซต ขาวประกาศ Navigation bar Top Menu Search box ขาวประกาศ หรือ New Flash แสดงขาวประกาศโดยการสุมขาว Navigation bar เมนูเขาถึงเนื้อหา เพิ่มความสะดวกในการกลับสู เนื้อหากอนหนาหนาหรือหนาหลัก สวนประกอบในหนาเว็บ ปรับเปลี่ยนตําแหนงและการนําเสนอตาม Template ที่เลือก โดยจะแนะนําในเนื้อหา “การปรับเปลี่ยนโฉมหนาเว็บไซต”
  • 39.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 39 - สวนที่สองคือสวนเนื้อหาหลักของเว็บ ประกอบดวย Menu ตางๆ Module ตางๆ เนื้อหาหลัก Menu Menu ของ Joomla มีหลายหมวด และสามารถเพิ่มไดตามลักษณะ รวมทั้งสามารถกําหนดตําแหนงการแสดงผลไดตามงาย สะดวก Module กรอบเนื้อหาเล็กๆ ที่วางกระจายในหนาเว็บ แสดงเนื้อหาที่ หลากหลาย เชน Module Latest News แสดงขาวประกาศลาสุด Module Popular แสดง บทความที่นิยมอาน 5 อันดับแรก Module Polls สอบถามความคิดเห็นของผูใชเว็บ และ Module Who’s Online แสดงขอความจํานวนผูชมเว็บทั้งที่เปนผูเยียมชม (Guest) และสมาชิก ่ (Member) ณ เวลาปจจุบน โดย Module นี้สามารถควบคุมใหแสดง/ไมแสดง สรางใหม และ ั กําหนดตําแหนงใหมได Main Content พื้นที่กลางจอภาพของเว็บไซตที่แสดงบทความหลักของเว็บ โดย บทความลาสุด (หรือบทความหลัก) จะแสดงไวบนสุด และบทความที่มลําดับรองจะแสดงใน ี ลักษณะคอลัมนถัดลงมา บุญเลิศ อรุณพิบูลย
  • 40.
    40 เว็บไซตงาย รวดเร็วดวย Joomla บทความแตละบทความ ประกอบดวยสวนประกอบดังนี้ Title Icons Author/Created date & time Read more link Modified date & time Content Title หัวเรื่องของบทความ สามารถกําหนดใหแสดง/ไมแสดง และเปน Link ไดดวยคาควบคุมของ Joomla Author/Created date & time ขอมูลแสดงผูสรางบทความ และวัน/เวลาที่สราง บทความ กําหนดใหแสดงหรือไมแสดงไดเชนกัน Icons ไอคอนสําหรับแปลงบทความ (Convert) ในรูปเอกสาร PDF ไอคอน สั่งพิมพบทความ และไอคอนแนะนําบทความทางอีเมล สามารถเลือกแสดง/ไมแสดงได ทั้งนี้ ไอคอนสั่งพิมพบทความนับเปนไอคอนทีมประโยชนมาก โดย Joomla จะตัด Menu และ ่ ี Header ออกเพื่อใหสามารถสั่งพิมพไดเฉพาะเนื้อหาบทความเทานั้น Read more link กรณีที่บทความยาว สามารถกําหนดใหแสดงสวนตนของบทความ และ Joomla จะสรางลิงก Read more เพื่อขยายอานเนื้อหาที่เหลือใหอัตโนมัติ Modified date & time ขอมูลแสดงวันที่/เวลาปรับปรุงเนื้อหา เปนสวน สําคัญที่ควรกําหนดใหแสดง เพื่อระบุความทันสมัยของบทความ Content พื้นที่แสดงเนือหาของบทความ ้
  • 41.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 41 - เขาสูระบบผาน Front-end เว็บไซตหนาแรกที่เขาถึงของ Joomla เรียกวาสวน Front-end ซึ่งก็คอ Home page ของ ื เว็บไซตนนเอง สมาชิกสามารถเขาสูระบบและปรับแกไขบทความ รวมทั้งนําเสนอบทความ ั่ ใหมไดตามสิทธิ์ของสมาชิกที่ถูกกําหนดไวโดยผูดูแลเว็บ (Web Administrator) สมาชิกชุดแรกของเว็บก็คือ admin นั่นเอง โดยการเขาสูระบบผาน Front-end ทําได โดยปอนชื่อผูใช (User name) และรหัสผาน (Password) ในสวน Login Form  เมื่อเขาสูระบบแลว สวน Login Form จะแสดงชื่อสมาชิกดังนี้ นอกจากนี้ยงปรากฏไอคอนสําหรับแกไขเอกสารบทความ ดังนี้ ั บุญเลิศ อรุณพิบูลย
  • 42.
    42 เว็บไซตงาย รวดเร็วดวย Joomla แกไขขอมูลสมาชิก เมื่อสมาชิก Login เขาสูระบบผาน Front-end แลวจะปรากฏชุดกรอบเมนูเพิ่มอีก 1 ชุด คือ User Menu ซึ่งสมาชิกสามารถที่จะปรับแกไขขอมูลสวนตัว หรือแกไขรหัสผาน โดยคลิกที่รายการ เมนู Your Details จากชุดเมนู User Menu นอกจากนี้ยังสามารถเลือกรูปแบบเว็บไซตและการทํางาน ไดดังนี้ 1. Back-end Language การกําหนดภาษาของเว็บในสวน Back-end 2. Front-end Language การกําหนดภาษาของเว็บในสวน Front-end 3. User Editor เลือกประเภทของ Editor ในการสราง/แกไขบทความ กรณีนี้แนะนํา ใหเลือก TinyMCE 2.0 สําหรับเลือกใช Editor ในรูปแบบ WYSIWYG เพื่อความ สะดวกในการสราง/แกไขบทความโดยไมตองยุงยากกับการลงรหัส HTML 4. Help Site กําหนดความชวยเหลือจากเว็บที่ติดตั้ง Joomla หรือจากเว็บไซต ทางการของ Joomla (www.joomla.org) 5. Time Zone เลือก Time zone กรณีน้คือ UTC+07:00 ี
  • 43.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 43 - แกไขบทความ การแกไขบทความผาน Front-end ทําไดโดยคลิกที่ปุม Edit Article ของบทความนั้นๆ ปรากฏจอภาพสวนแกไขบทความดังนี้ บุญเลิศ อรุณพิบูลย
  • 44.
    44 เว็บไซตงาย รวดเร็วดวย Joomla ตองการแกไขชื่อบทความ ทําไดโดยแกไขในรายการ Title เมื่อคลิกปุม Save จะปรากฏผลลัพธทางเว็บไซตดังนี้ สําหรับการแกไขบทความ จอภาพแกไขบทความมีลักษณะคลายกับจอภาพการทํางาน ของ Word Processor ที่หลายๆ ทานคุนเคยเปนอยางดีมากแลว และการทํางานก็ใชหลักการ เดียวกัน จึงไมใชเรื่องยากทีจะแกไขผานปุมเครื่องมือ ดังนี้ ่  ไมควรปรับเปลี่ยนแบบอักษร (Font) และขนาดอักษร (Font size) สามารถทํางานในโหมด HTML ไดโดยคลิกปุม HTML ในแถบเครื่องมือ
  • 45.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 45 - แบงตอนเนื้อหาดวย Read more… กรณีที่เนื้อหาในบทความมีความยาวมากๆ การนําเสนอทั้งหมดผานเว็บไซตอาจจะไม นาสนใจเทาทีควร Joomla มีคําสั่งแบงตอนและแสดงลิงก Read more… กํากับเพื่อใหคลิก ่ แสดงเนื้อหาทีเ่ หลือ การแบงตอนเนื้อหา จากตัวอยางจะแสดงดวยเสนประสีแดง ซึ่งเกิดจากการคลิกบนปุม ดังนั้นถาตองการแบงตอนขอความ ณ ตําแหนงใด ก็ใหคลิกเมาส ณ ตําแหนง นั้นแลวคลิกปุม  เสนแบง Read more บุญเลิศ อรุณพิบูลย
  • 46.
    46 เว็บไซตงาย รวดเร็วดวย Joomla การยกเลิกการแบงตอนเนื้อหา ก็สามารถทําไดโดยคลิกที่เสนประสีแดง แลวกดปุม <Delete> แลวบันทึก บทความจะแสดงผลยาวตอเนื่องไมมลิงก “Read more…” ดังนี้ ี
  • 47.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 47 - สารบัญเนือหา ้ นอกจากการแสดงผลโดยแบงตอนดวย Read more… ยังสามารถแบงตอนเนื้อหา หลายๆ ตอนแลวแสดงผลในรูปแบบสารบัญเนื้อหา ดังตัวอยาง การสรางสารบัญเนื้อหาทําไดโดยคลิกเมาส ณ ตําแหนงที่ตองการแบงหนาเนื้อหา จากนั้นคลิกปุม โปรแกรมจะใหกําหนดชือกํากับสารบัญ จากนั้นคลิกปุม Insert ่ แลวทําซ้ํา ณ ตําแหนงอืนๆ ตามตองการ ่ • Page Title ควรระบุดวยภาษาอังกฤษ เปนชื่อกํากับตอนแตละตอน  • Table of Contents Alias สามารถใชภาษาไทยได จะเปนขอความที่ปรากฏใน รายการเมนูเลือก ตําแหนงทีกําหนดเปน Pagebreak จะแสดงดวยเสนประสีฟาออน สามารถลบไดโดย ่ ดับเบิลคลิกที่เสนแลวกดปุม <Delete> บุญเลิศ อรุณพิบูลย
  • 48.
    48 เว็บไซตงาย รวดเร็วดวย Joomla แทรกรูปภาพ การแทรกรูปภาพในบทความ ใหคลิกเมาส ณ ตําแหนงที่ตองการวางภาพ แลวคลิกปุม จะปรากฏสวนนําเขาภาพดังนี้ คลิกเลือกภาพที่ตองการ แลวกําหนดรายละเอียดเกียวกับภาพ ่ • Image Description คําอธิบายภาพ • Image Title ชื่อกํากับภาพ ซึ่งสามารถกําหนดเปน Caption ได โดยคลิกเลือกเพิ่มเติม • Align ตําแหนงวางภาพ เมื่อคลิกปุม Insert จะปรากฏภาพดังนี้
  • 49.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 49 - เมื่อบันทึกจะแสดงผลดังนี้ ภาพที่นาเขาบทความ สามารถแกไขไดโดยคลิกที่ภาพ แลวคลิกปุม Insert/Edit Image ํ ในแถบเครื่องมือ โดยปรากฏสวนปรับแกไขดังนี้ บุญเลิศ อรุณพิบูลย
  • 50.
    50 เว็บไซตงาย รวดเร็วดวย Joomla กรณีที่ตองการนําเขาภาพเพิมเติมจากที่ Joomla จัดเตรียมไว ทําไดโดยคลิกปุม ่  แลวเลื่อนจอภาพไปที่รายการ Upload คลิกปุม Browse Files เลือกไดรฟและโฟลเดอรที่เก็บภาพ แลวเลือกภาพจากนั้นคลิกปุม Open โปรแกรม Joomla อนุญาตใหเลือกไฟลภาพในการโอนเขาเว็บไซตไดครั้งละหลายภาพ
  • 51.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 51 - เมื่อไดภาพที่ตองการครบจํานวนแลวจึงคลิกปุม Start Upload  โปรแกรมจะแสดงภาพที่นําเขาเพื่อพรอมใชงานตอไป ไฟลภาพ ไฟลภาพที่นําเขาในเว็บควรปรับแตงดวยโปรแกรมตกแตงภาพใหมีขนาดที่เหมาะสม เชน ความกวางไมควรเกิน 500 pixel ความละเอียดภาพ (Resolution) 72 จุดตอนิ้ว และมีสวน  ขยายเปน .jpg, .gif หรือ .png ตามความเหมาะสมของภาพนั้นๆ นอกจากนี้ชื่อไฟลภาพควรเปน • ภาษาอังกฤษ ตัวพิมพเล็ก • หามเวนวรรค • ใชไดเฉพาะเครื่องหมาย Underscore ( _ ) บุญเลิศ อรุณพิบูลย
  • 52.
    52 เว็บไซตงาย รวดเร็วดวย Joomla ควบคุมการแสดงผลบทความ บทความที่สรางไวแลวสามารถปดการแสดงผลหรือระบุวนสิ้นสุดการแสดงผลไดงาย ั และสะดวก ในโหมดการแกไขบทความ จะปรากฏสวนควบคุมการแสดงผล ดังนี้ รายการ • Published เลือกใหแสดง หรือไมแสดงบทความ • Show on Front Page เลือกใหแสดง หรือไมแสดงในหนาแรก • Start Publishing ระบุวัน/เวลาใหแสดงบทความ • Finish Publishing ระบุวัน/เวลาทีใหยติการแสดงบทความ ่ ุ • Access Level สิทธิ์ในการเขาถึงบทความ o Public ทุกคนเปดดูบทความได o Registered ใหสมาชิกที่ลอกอินเทานันเปดดูบทความได ็ ้ o Special ใหสมาชิกที่เปน Admin เทานั้นที่เปดดูบทความได
  • 53.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 53 - สืบคนบทความไดงายๆ ดวย Metadata  Joomla ไดเตรียมฟงกชนสืบคนบทความผานชองสืบคน (Search) ั โดยโปรแกรมจะสืบคนทั้งจากชื่อเรื่อง (Title) เนื้อหาบทความ รวมทั้งสวนเพิม ่ ความสามารถการสืบคนในรูปแบบ Metadata ดังนั้นควรกําหนด Metadata ของบทความให สมบูรณ • Description ระบุคําอธิบายหรือเนื้อหาสรุปของบทความ • Keywords ระบุคําคนโดยใชเครื่องหมาย , คั่นแตละคํา บุญเลิศ อรุณพิบูลย
  • 54.
    54 เว็บไซตงาย รวดเร็วดวย Joomla สรางบทความใหม การสรางบทความใหม ทําไดโดยคลิกเลือกรายการ Submit an Articles จาก User Menu ปรากฏสวนสรางบทความใหม ดังนี้
  • 55.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 55 - การสรางบทความใหม มีการทํางานลักษณะเดียวกับการแกไขบทความเดิมที่ได แนะนําไปกอนหนาแลว แตจะตองเลือก Section และ Category ใหตรงกับหมวดเนื้อหา นอกจากนั้นผูใชตองกําหนดรายละเอียดเกียวกับการนําเสนอ  ่ (Publishing) และ Metadata ของบทความดวย เมื่อปอนเนื้อหาและบันทึก จะปรากฏผลดังนี้ บุญเลิศ อรุณพิบูลย
  • 56.
    56 เว็บไซตงาย รวดเร็วดวย Joomla ปรับแตงเว็บไซตผาน Back-end การปรับแตงเว็บไซต เชน การเพิ่มสมาชิก การปรับเปลี่ยนโฉมหนาเว็บไซต การควบคุมเว็บไซต จะตองทําในโหมด Administrator โดยเขาสูเว็บไซตผาน Back-end ดวย คําสั่ง http://localhost/ชื่อโฟลเดอร/administrator จอภาพเขาสูระบบในโหมด Administrator ใหปอนบัญชีผูใชเปน admin และปอน รหัสผานตามที่ไดกาหนด เมื่อคลิกปุม Login จะเขาสูจอภาพ Control Panel ของเว็บไซต ดังนี้ ํ
  • 57.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 57 - การทํางานผาน Back-end สามารถดําเนินการผานแถบเมนู ซึ่งประกอบดวยคําสั่ง ควบคุมตามหมวดหมูดังนี้  หรือจะสั่งการผานไอคอนในสวน Control Panel นอกจากนี้ยงสามารถตรวจสอบสมาชิกที่ออนไลน การสรางบทความ หรือสถิติตางๆ ั ผานทางแท็บคําสั่งตอไปนี้ บุญเลิศ อรุณพิบูลย
  • 58.
    58 เว็บไซตงาย รวดเร็วดวย Joomla ขอมูลประกอบการสืบคนของเว็บ ชื่อเว็บไซต หรือ Title ของเว็บเปนสวนสําคัญที่ทําใหเว็บไซตที่พัฒนาไดรับการสืบคน ผาน Search Engine ตางๆ ได ดังนั้นควรกําหนดชื่อเว็บไซตใหเหมาะสม โดยกําหนดดวยคํา ภาษาอังกฤษ ตามดวยคําภาษาไทย เชน STKS – Science and Technology Knowledge Services ศูนยบริการความรูทาง วิทยาศาสตรและเทคโนโลยี (ศวท.) สํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ ประเทศไทย ทั้งนี้ชื่อเว็บไซตจะปรากฏในแถวแรกของเว็บเบราวเซอร การปรับแกไขชื่อเว็บไซตของ Joomla ทําไดโดยคลิกไอคอน Global Configuration จากหนา Control Panel ของ Joomla โดยจะปรากฏจอภาพการทํางาน ดังนี้ คลิกเลือกแท็บ Site แลวปรับแกไขคา ดังนี้
  • 59.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 59 - จากนั้นคลิกปุม Save เพื่อบันทึกการปรับแกไขชื่อเว็บไซต  นอกจากชื่อเว็บไซต ควรกําหนดคําอธิบายเว็บ และคําคน (Keyword) สําหรับเว็บไซต เพิ่มเติมจากรายการ โดย Global Site Meta Description เปนขอความอธิบายเว็บไซต โดยจะปรากฏผลผาน การสืบคนของ Search engine เชน Google ดังนี้ คําอธิบายเว็บไซต สําหรับคําคน (Keyword) เปนการระบุคําทีผูใชมักจะนึกถึงสําหรับการสืบคน โดยระบุ ่ ไดหลายคํา คันดวยเครื่องหมาย , แตควรขึ้นตนดวยภาษาอังกฤษ ่ ขอความอธิบายเว็บไซต และคําคนจะไมปรากฏผานเว็บเบราวเซอร แตจะ เปนขอมูลสําหรับ Search Engine บุญเลิศ อรุณพิบูลย
  • 60.
    60 เว็บไซตงาย รวดเร็วดวย Joomla เขาถึงเนื้อหาไดงาย Joomla มีระบบสนับสนุนการเขาถึงเนื้อหาไดงายขึ้นดวยความสามารถ Search Engine Friendly ที่จะแปลงรหัสประจําบทความ (Article ID) เปนชื่อเรียก ตัวอยาง บทความชื่อ Joomla Overview ถูกสรางเปนลําดับที่ 19 ซึ่งเมื่อแสดงเนื้อหา บทความนี้ จะปรากฏ URL ดังภาพขางตน URL ดังกลาวเปนการสงคาพารามิเตอรของโปรแกรมภาษา PHP ที่จาไดยาก และทํา ํ ให Search Engine ไมบันทึกเพื่อสืบคน แต Joomla มีคําสั่งที่สนับสนุนการแปลงพารามิเตอร ของ PHP เปนการเขาถึงดวยชื่อบทความ (Article Title) แทน โดยคลิกเลือกไอคอน Global Configuration จากหนา Control Panel จากนั้นคลิกเลือกรายการ Search Engine Friendly URLs เปน Yes เมื่อบันทึกแลว Joomla จะแปลงคาพารามิเตอรของบทความเปนการเขาถึงดวยชื่อ บทความแทน ดังนี้ การใชงาน Search Engine Friendly ผูพัฒนาจะตองระบุ Alias ใหกับ บทความทุกบทความ และตองเปนภาษาอังกฤษตัวพิมพเล็ก หามเวนวรรค สามารถใช เครื่องหมาย Underscore หรือ Dash ไดเทานั้น
  • 61.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 61 - การปรับเปลี่ยนโฉมหนาของเว็บไซต Joomla อนุญาตใหปรับเปลียนโฉมหนาของเว็บไดงายและสะดวกผาน Template โดย ่ Joomla เตรียม Template สําเร็จรูปใหใชงานหลากหลายรูปแบบ และสามารถดาวนโหลดติดตั้ง เพิ่มเติมได โดยการปรับเปลี่ยน Template คลิกเลือกเมนู Extensions, Template Manager ปรากฏรายการดังนี้ คลิกเลือก Template ที่ตองการใชงาน แลวคลิกปุม Default จากนั้นกลับไป Reload เว็บไซตอีกครัง ้ บุญเลิศ อรุณพิบูลย
  • 62.
    62 เว็บไซตงาย รวดเร็วดวย Joomla เห็นไหมครับ การปรับเปลี่ยนหนาตาของเว็บไซตไมใชเรื่องยากเลย มี Template สําเร็จรูปใหดาวนโหลดและเลือกใชงานมากมายในเว็บไซต เนื่องจาก Template พัฒนาดวย ภาษา HTML, PHP & CSS แตสําหรับผูใชมือใหม ไมตองกังวลเพราะสามารถดาวนโหลด Template สําเร็จรูปไดมากมายหลายรอยจาก Google จะตองเลือก Template ใหตรงกับ Version ของ Joomla ที่ติดตั้ง เมื่อดาวนโหลดมาแลวจะไดไฟล Template ของ Joomla เปน Zip และสามารถนําเขา ไปใชงานไดงายผานระบบ Control Panel ของ Joomla ดังนี้ คลิกเลือกเมนู Extensions จากนั้น  เลือกคําสั่งยอย Install/Uninstall แลวคลิกเลือกรายการ Install จะปรากฏสวนติดตั้ง ดังนี้
  • 63.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 63 - คลิกปุม Browse จากรายการ Upload Package File เลือกไฟล zip ของ Template แลว คลิกปุม Upload & Install จากนั้นคลิกแท็บ Templates จะปรากฏรายการ Template ที่นําเขา และรายการเดิมดังนี้ ถาตองการลบรายการใด ก็คลิกเลือกแลวคลิกปุม Uninstall บาง Template จะไมมีพื้นที่ดานขวามือ (Right Column) ทําให Module ที่ กําหนดใหแสดงดานขวาไมแสดงผล จึงตองระมัดระวังในการเลือกใช Template หรือใชวิธีการ ปรับเปลี่ยน Template ใหอยูตําแหนงอืน  ่ บุญเลิศ อรุณพิบูลย
  • 64.
    64 เว็บไซตงาย รวดเร็วดวย Joomla จัดการบทความในเว็บไซต เนื้อหาในเว็บไซตเปนเนื้อหาจากขอมูลตัวอยาง เรียกวา Article หรือบทความ ซึ่ง สามารถปรับแกไขไดโดยเลือกเมนูคําสั่ง Content, Article Manager เมนูควบคุมการจัดการบทความประกอบดวยปุมตางๆ ดังนี้ Archive/Unarchive กําหนดใหบทความที่นําเสนอเก็บเขาคลังเอกสาร หรือยกเลิกจากคลังเอกสาร Publish/Unpublish กําหนดใหแสดงหรือไมแสดงบทความ Move ยายหมวดบทความ Copy คัดลอกบทความไปหมวดอืน ่ Trash ลบบทความ Edit แกไขบทความ New สรางบทความใหม Parameters คาควบคุมเกี่ยวกับการแสดงผลบทความ เชน ถาตองการแกไขบทความรายการใด ก็คลิกเลือกบทความนั้นๆ คลิกปุม Edit จะปรากฏสวนแกไขในโหมดการทํางานแบบ WYSIWYG ดังนี้
  • 65.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 65 - แกไขชื่อบทความ (Title) จากรายการ ชื่อบทความสามารถระบุไดทั้งภาษาไทย และภาษาอังกฤษ แกไข URL ของบทความจากรายการ ขอความ Alias นี้ควรระบุเปนภาษาอังกฤษ ไมมีชองวาง ปรับแกไขหมวดเนื้อหาไดจากรายการ Section และ Category Section จะเปนหมวดใหญกวา Category บุญเลิศ อรุณพิบูลย
  • 66.
    66 เว็บไซตงาย รวดเร็วดวย Joomla กําหนดการแสดงผลบทความไดจากรายการ • Published แสดงหรือไมแสดงบทความในเว็บไซต • Front Page แสดงหรือไมแสดงบทความผานหนาแรกของเว็บ ลําดับการแสดงบทความในหนา Front Page ควบคุมไดจากไอคอน Front Page Manager นอกจากนี้ยังสามารถกําหนดชวงเวลาในการบทความไดจากรายการ การแกไขเนื้อหา การแกไขเนื้อหา ใชหลักการลักษณะเดียวกับการแกไขใน Word Processor ทั่วไป และมีปุมจัดแตงรูปแบบลักษณะเดียวกัน
  • 67.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 67 - กรณีที่เนื้อหามีความยาว และกําหนดใหแสดงผาน Front Page จะปรากฏผล ดังนี้ กรณีน้ควรเลือกแสดงผลเนื้อหาเพียงบางสวน และกํากับดวย Link ี โดย คลิกเมาส ณ ตําแหนงที่ตองการเลือกแสดงผล แลวคลิกปุม Read more… บุญเลิศ อรุณพิบูลย
  • 68.
    68 เว็บไซตงาย รวดเร็วดวย Joomla เมื่อบันทึกจะแสดงผลผาน Front Page ดังนี้ จะปรากฏเนื้อหา ณ ตําแหนงที่ระบุ Read more และลิงก Read more: … เพื่อคลิกแสดง เนื้อหาสวนที่เหลือ นอกจากนี้ยังสามารถสรางสารบัญใหกับเอกสารได ดังนี้ การสรางสารบัญขางตน ก็ทําไดโดยคลิกเมาส ณ ตําแหนงที่ตองการ แลวคลิกปุม Pagebreak ทําซ้ํา ณ ตําแหนงอื่นๆ ที่ตองการ และถาตองการยกเลิกใหคลิกเมาส ณ เสนแบงแลว  กดปุม <Delete>
  • 69.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 69 - นอกจากนี้ Joomla ยังอนุญาตใหระบุเงือนไขเกียวกับการแสดงผลบทความไดอิสระ ่ ่ จากกันจากการควบคุมของ Parameters - Advanced โดยรายการทีปรากฏบางรายการ อธิบายจากภาพประกอบ ดังนี้ ่ Title ของบทความ กําหนดใหแสดงหรือไมแสดงจากรายการ Show Title และกําหนดใหคลิกไดหรือไมได จากรายการ Title Linkable วันที่แกไข/วันที่สราง และผูสรางบทความ กําหนดใหแสดง หรือไมใหแสดงไดจากรายการ Author Name, Created Date and Time และ Modified Date and Time ไอคอนแปลงเปนเอกสาร PDF สั่งพิมพ และสงแนบอีเมล ควบคุมไดจากรายการ PDF Icon, Print Icon และ E-mail Icon บุญเลิศ อรุณพิบูลย
  • 70.
    70 เว็บไซตงาย รวดเร็วดวย Joomla เพิ่มประสิทธิภาพการสืบคนใหกบบทความ ั การสืบคนบทความของ Joomla จะควบคุมดวย Metadata โดยแตละบทความสามารถ กําหนด Metadata ไดอิสระ รวมทั้งยังเปนขอมูลสําหรับ Search Engine ดวย การกําหนด Metadata ใหกบบทความทําไดโดยเขาสูโหมดแกไข/สรางบทความ จากนั้นคลิกขยาย Metadata ั Information ระบุรายละเอียดเกียวกับคําอธิบายบทความ/เนื้อหายอ (Description) และคําคน ่ (Keyword) รวมทั้งชื่อเจาของบทความ (Author) โดยการสืบคนสามารถปอนคําคนในชองรายการ Search ซึ่งจะปรากฏผลการสืบคน ดังนี้
  • 71.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 71 - ตกแตงดวยรูปภาพ การนําเสนอผานเว็บไซตจําเปนตองสรางจุดเดนดวยรูปภาพ Joomla ทํางานกับรูปภาพ ไดงายและสะดวก โดยมีปุมเครื่องมือและระบบโอนภาพเขาสูเครื่องแมขายเว็บพรอมใชงาน เชน การนําเขาภาพในบทความเริ่มจากคลิกเมาส ณ ตําแหนงที่ตองการวางภาพ แลวคลิกปุม Image ที่ดานลางขวาของกรอบขอความ ปรากฏจอภาพทํางานเกียวกับภาพดังนี้ ่ คลิกเลือกภาพที่ตองการ แลวระบุคําอธิบายภาพในรายการ Image Description และ Image Title จัดตําแหนงภาพจากรายการ Align แลวคลิกปุม Insert หากยังไมมภาพที่ตองการก็สามารถคลิกปุม Browse แลว Upload ภาพเขาสูระบบก็ได ี หรือจะใชคําสั่ง Site, Media Manager เพื่อจัดการภาพและสื่ออื่นๆ ประกอบเว็บก็ได บุญเลิศ อรุณพิบูลย
  • 72.
    72 เว็บไซตงาย รวดเร็วดวย Joomla Joomla แบงโฟลเดอรจัดการภาพไดดังนี้ โดยโฟลเดอรสําคัญที่ควรทราบคือ • Banners เก็บภาพสําหรับใชกับ Component Banner • Stories เก็บภาพสําหรับใชในบทความ อยางไรก็ตามสามารถสรางเพิ่มเติมไดโดยคลิกเลือกโฟลเดอรหลัก จากนั้นกําหนดชือ ่ โฟลเดอรใหม (ภาษาอังกฤษหรือผสมตัวเลข หามเวนวรรค ใชเฉพาะเครื่องหมาย Underscore) แลวคลิกปุม Create Folder ลบภาพ ภาพที่ไมตองการใชงานสามารถลบไดโดยคลิกที่ปุมเครื่องหมาย x สีแดงที่กากับภาพ ํ หรือคลิกเลือกหลายๆ ภาพแลวใชปุม Delete ภาพที่นําเขา Joomla จะตองตั้งชื่อเปนภาษาอังกฤษ หามเวนวรรค ใชเฉพาะ เครื่องหมาย Underscore และมีฟอรแมตเปน .jpg, .gif หรือ .png เทานั้น นอกจากการนําเขาภาพแลว Media Manager ยังสามารถนําเขา Flash Movie, PDF ไดเชนกัน
  • 73.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 73 - ทํางานกับสื่อรูปแบบตางๆ Joomla สนับสนุนการทํางานกับสื่ออื่นๆ นอกจากรูปภาพ เชน Flash Movie, Song, Audio, Movie โดยมีหลักการทํางานดังนี้ 1. สรางโฟลเดอรสําหรับสื่อแตละประเภทผาน Media Manager 2. โอนสื่อเขาสูระบบ 3. เขาสูระบบสรางหรือแกไขบทความ คลิก ณ ตําแหนงทีตองการวางสือ คลิก ่ ่ ปุม Insert/Edit Embedded Media ระบุประเภทสื่อ พรอมทั้งระบุ path/filename.extension ของสื่อใหถูกตอง จากนันระบุความกวาง/ความสูงที่ ้ ตองการนําเสนอ 4. คลิกปุม Insert แลวบันทึก บุญเลิศ อรุณพิบูลย
  • 74.
    74 เว็บไซตงาย รวดเร็วดวย Joomla ทํางานกับเมนู Joomla อนุญาตใหปรับแตงเมนูไดอิสระ ทั้งการสรางเมนูชุดใหม การปรับแตงเมนูชด ุ เดิม การสรางรายการเมนู หรือปรับยายตําแหนงการแสดงผลเมนู ปรับแกไขเมนู การปรับแกไขเมนู ทําไดโดยคลิกเลือกเมนูคําสั่ง Menus แลวคลิกเลือกที่ชื่อเมนูชดที่ ุ ตองการแกไข หรือคลิก Menu Manager เพือปรับแกไขชือเมนูรวมทั้งสราง/ลบเมนู ่ ่ ปรากฏจอภาพทํางานดังนี้ จะพบวาการทํางานกับรายการเมนู มีลกษณะเดียวกับการทํางานบทความใน Article ั Manager
  • 75.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 75 - ตัวอยาง ตองการสรางรายการเมนูแสดงบทความในหมวด Media ทําไดโดย 1. คลิกปุม New 2. เลือกวาจะสรางเมนูลักษณะใด กรณีนี้คือ การสรางเมนูใหกับบทความ จึง เลือก Articles 3. เลือกรูปแบบของการเชื่อมกับบทความ กรณีนี้ตองการเชื่อมกับทุกบทความ ในหมวด Media จึงตองเลือก Category ซึ่งมี 2 รูปแบบยอย คือ Blog Layout โดยจะแสดงเนื้อหายอและลิงกอานตอในลักษณะกรอบเนื้อหา หรือจะเลือก List Layout โดยจะแสดงเปนรายการตามลําดับ 4. เมื่อเลือกรูปแบบของการเชื่อมกับบทความแลว ก็จะเปนสวนกําหนด รายละเอียดเกียวกับการแสดงผล ดังนี้ ่ บุญเลิศ อรุณพิบูลย
  • 76.
    76 เว็บไซตงาย รวดเร็วดวย Joomla 5. เมื่อกําหนดรายละเอียดเชน Title แลวก็คลิกปุม Save เพือบันทึก ่ 6. และตรวจสอบการสรางรายการเมนูไดจากหนา Front end ของเว็บ
  • 77.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 77 - Components Components คือ ชุดโปรแกรมสําเร็จรูปที่ออกแบบพัฒนาขึ้นมาเพือรองรับการทํางาน ่ ใดๆ ในลักษณะโปรแกรมเสริม เพื่อให Joomla มีความสามารถเพิ่มขึ้น เชน โปรแกรมควบคุม การแสดงผลปายโฆษณา กระดานสนทนา Joomla มี Components ใหเลือกใชงานหลากหลาย ดาวนโหลดไดจากเว็บไซตของ Joomla หมวด Extensions โดย Extension ที่เปน Components จะแสดงดวยสัญลักษณ แบบสอบถามออนไลน (Poll) Poll เปน Component ที่มากับ Joomla เปนชุดคําสั่งสําหรับสรางแบบสอบถาม ออนไลนอยางงาย ปกติจะแสดงผลในรูปแบบ Module ดานขวาของหนาเว็บไซต เมื่อคลิกเลือก จะแสดงผลลัพธการเลือกเปนกราฟแทงแนวนอน (Bar chart) บุญเลิศ อรุณพิบูลย
  • 78.
    78 เว็บไซตงาย รวดเร็วดวย Joomla การเพิ่มแบบสอบถามใหกับ Poll ทําไดโดยเลือกเมนูคําสั่ง Components, Polls คลิกปุม New ปอนคําถามในรายการ Title: ตัวเลือกในรายการ Options: และการนําเสนอจากรายการ Published: จากนั้นคลิกปุม Save จากนั้นเขาสูการกํากับการแสดงผล Polls ซึ่งควบคุมดวย Extensions, Module Manager
  • 79.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 79 - เลื่อนหารายการ Polls แลวคลิกเขาสูการแกไข ตัวเลือกสําคัญคือ Module Parameters ในสวน Poll ผลลัพธของ Poll ที่สรางใหมในหนา Front end ปายโฆษณา (Banner) Joomla ยังเตรียมการจัดการเกี่ยวกับปายโฆษณาหรือ Banner ซึ่งมีความสามารถ แสดงผลแบบสุมในแตละการ Reload หนาเว็บ รวมทั้งสวนลิงกไปยังเว็บไซตที่เกี่ยวของ โดย ทํางานผาน Components, Banner 1. เตรียมภาพ Banner โดย Upload ดวย Media Manager ไปไวทโฟลเดอร ี่ banners 2. สราง Category ของ Banner ดวยคําสั่ง Components, Banner, Category บุญเลิศ อรุณพิบูลย
  • 80.
    80 เว็บไซตงาย รวดเร็วดวย Joomla 3. สรางชุดยอยของ Banner ดวยคําสั่ง Components, Banner, Clients 4. สรางรายการ Banner ดวยคําสั่ง Components, Banner, Banners 5. ระบุรายละเอียดแลวคลิกปุม Save จากนั้นทําซ้ําจนครบทุกภาพที่ตองการ 6. ปรับแตงการนําเสนอดวยคําสั่ง Extension, Module Manager คลิกเลือก Banners ปรับแตงคาที่จําเปน เชน
  • 81.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 81 - 7. จากนั้นคลิกปุม Save แลวดูผลที่ปรากฏในหนา Front page  ดึงขาวมาแสดงผลอัตโนมัติ ดวยเทคโนโลยี RSS หรือ Really Simple Syndication หรือ Rich Site Summary เปน รูปแบบในการนําเสนอขาวหรือบทความ ใหอยูในรูปแบบมาตรฐาน (xml format) เพื่อใหผูที่ สนใจสามารถติดตามขาวสารใหมๆไดทันที Joomla รองรับการสรางชุดขาว RSS อัตโนมัติผาน Components, News Feeds โดย เริ่มตนจะตองสราง Category กอนดวยคําสั่ง Components, News Feeds, Category จากนั้นจึงสรางรายการ RSS แตละรายการดวยคําสั่ง Components, News Feeds, Feeds บุญเลิศ อรุณพิบูลย
  • 82.
    82 เว็บไซตงาย รวดเร็วดวย Joomla เว็บไซตที่สามารถดึงขาวมาได เชน • http://www.norsorpor.com/chooseRSS.php • http://www.rssthai.com ดาวนโหลด/ติดตั้ง Components นอกจากนี้ยังสามารถดาวนโฆลดมาติดตั้งเพิ่มได โดยComponents ที่ดาวนโหลดมา มักจะขึนตนดวย com เชน com_xmap-1.1_for_Joomla_1.5.zip การติดตั้งจะตองทํางานใน ้ โหมด Admin ผาน Control Panel โดยเลือกคําสั่ง Extensions, Install/Uninstall โดย Components ที่ติดตั้งแลวจะปรากฏรายการดังนี้
  • 83.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 83 - พัฒนาเว็บตามตองการ เมื่อทราบความสามารถของ Joomla แลวตอไปจะเปนการออกแบบพัฒนาเว็บไซตตาม ตองการ โดยไมใชขอมูลตัวอยางของ Joomla ดังนันจะตองเริ่มจากการวางแผนการพัฒนา ้ เว็บไซตกอน ดังนี้ ลักษณะของเว็บไซต กลุมเปาหมาย ชื่อเว็บ (Web Title) คําอธิบายเว็บ (Web Description) คําคน (Keywords) เนื้อหาที่ตองการนําเสนอ ความตองการเพิ่มเติม Poll Web Resources Banner คลังภาพ คลังดาวนโหลด RSS News feed … บุญเลิศ อรุณพิบูลย
  • 84.
    84 เว็บไซตงาย รวดเร็วดวย Joomla จากตารางวิเคราะหความตองการพัฒนาเว็บขางตน สมมติเว็บที่ตองการพัฒนามีขอมูล ดังนี้ ลักษณะของเว็บไซต เว็บไซตนําเสนอสาระความรูทางดาน บรรณารักษศาสตร และสารสนเทศศาสตร กลุมเปาหมาย นักศึกษา ครูอาจารยสาขาบรรณารักษศาสตร และสารสนเทศศาสตร ชื่อเว็บ (Web Title) Lib4You : แหลงรวมสาระความรูสาขา บรรณารักษศาสตร และสารสนเทศศาสตร คําอธิบายเว็บ (Web Description) แหลงรวมสาระความรูสาขาบรรณารักษศาสตร และสารสนเทศศาสตรสาหรับครู อาจารย ํ นักศึกษา บรรณารักษ และนักสารสนเทศ คําคน (Keywords) Library, Information, Librarian, Information Officer, บรรณารักษศาสตร, สารสนเทศศาสตร, หองสมุด, ศูนยสารสนเทศ, สํานักวิทยบริการ เนื้อหาที่ตองการนําเสนอ แนะนําเว็บไซต ทีมพัฒนา คลังความรู ความตองการเพิ่มเติม Poll แบบสํารวจออนไลน Web Resources รวมลิงกเว็บไซตหองสมุด ศูนยสารสนเทศ สํานักวิทยบริการ และภาควิชา บรรณารักษศาสตร สารสนเทศศาสตร Banner Banner แนะนํากิจกรรมเดนของเว็บไซตใน ลักษณะแสดงผลแบบสุมเมื่อมีการโหลดหนาเว็บ คลังภาพ รวมภาพกิจกรรมและภาพอืนๆ ่ คลังดาวนโหลด แหลงดาวนโหลดเอกสาร ซอฟตแวร RSS News feed ดึงขาวนาสนใจจากเว็บไซตผูใหบริการ RSS เมื่อวิเคราะหความตองการไดแลว ขั้นตอนถัดไปก็จะเปนการติดตั้งเว็บไซต Joomla ใน โฟลเดอรใหมแบบวางเปลา (ไมเอาขอมูลตัวอยาง) ซึ่งมีขั้นตอนดังนี้
  • 85.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 85 - 1. สรางโฟลเดอรใหมภายใต C:AppServwww เชน lib4you 2. คัดลอกไฟลตนฉบับ Joomla 1.5 มาวางในโฟลเดอรใหม  3. เปดเว็บเบราวเซอรแลวพิมพ URL เปน http://127.0.0.1/lib4you 4. เลือกโหมดการติดตั้งเปนภาษาไทย 5. คลิกปุม Next เพื่อเขาสูขั้นถัดไปของการติดตั้ง คือ ขั้นตอนการตรวจสอบ ขอมูลกอนติดตั้ง หากเปนการติดตั้งใน Server จริงอาจจะตองเขาไปเปลี่ยน Permission ของโฟลเดอรและแฟมบางแฟมกอน ในกรณีนี้เปนการติดตั้งดวย Server จําลองใหคลิกปุม “ถัดไป” 6. จอภาพถัดไปคือ การยอมรับลิขสิทธิ์การใชงานโปรแกรม ใหคลิกปุม “ถัดไป” บุญเลิศ อรุณพิบูลย
  • 86.
    86 เว็บไซตงาย รวดเร็วดวย Joomla 7. ขั้นตอนสําคัญของการติดตั้งคือ การกําหนดรายละเอียดเกี่ยวกับเครื่องแมขาย เว็บและฐานขอมูล MySQL ใหระบุขอมูลดังนี้ • ชนิดฐานขอมูล เลือกเปน mysql • ชื่อโฮสต ระบุเปน localhost • ชื่อผูใชฐานขอมูล ระบุเปน root • รหัสผาน ระบุรหัสผานตามที่กําหนดไวในขั้นตอน ติดตั้ง AppServ • ชื่อฐานขอมูล ระบุใหตรงกับชื่อโฟลเดอร ตัวอยางคือ lib4you 8. เมื่อกําหนดขอมูลเกี่ยวกับเครืองแมขายและฐานขอมูล MySQL แลวใหคลิก ่ ปุม “ถัดไป” เพื่อเขาสูขั้นตอนการตั้งคา FTP สําหรับ Server ที่อนุญาตใหผูใช โอนขอมูลดวยฟงกชน FTP ใหระบุคาใหถูกตอง แตกรณีนี้ใหเลือก “No” ั แลวคลิกปุม “ถัดไป” 9. ขั้นตอนนี้เปนการกําหนดขอมูลเกี่ยวกับเว็บไซต โดยมีรายการที่ตองกําหนด ดังนี้
  • 87.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 87 - รายการที่ตองระบุไดแก • ชื่อเว็บไซต ใหระบุชื่อของเว็บ กรณีนี้คือ Lib4You : แหลงรวม สาระความรูสาขาบรรณารักษศาสตร และสารสนเทศศาสตร • ระบุอีเมลของผูดูแลเว็บ และรหัสผานของ Admin เว็บไซต 10. เมื่อกําหนดขอมูลชื่อเว็บไซต อีเมล และรหัสผานของผูดูแลเว็บแลว ใหคลิก ปุม “ถัดไป” ก็จะเปนขันตอนสุดทายของการติดตั้ง ้ ทั้งนี้บัญชีแรกของเว็บนี้คือ admin ซึ่งเปนบัญชีผูดูแลเว็บที่มีสิทธิ์เต็ม และ รหัสผานตามที่ระบุไวในขันตอนกอนหนา ้ 11. เมื่อติดตั้ง Joomla จนถึงขั้นตอนนี้แลว จะตองกลับไปลบโฟลเดอร Installation ออกจากโฟลเดอรเว็บใน C:AppServwwwlib4you บุญเลิศ อรุณพิบูลย
  • 88.
    88 เว็บไซตงาย รวดเร็วดวย Joomla 12. เพียงเทานี้ก็จะไดเว็บไซตท่พรอมใชงาน และเขาถึงไดดวย URL ี  http://127.0.0.1/lib4you เว็บไซตใหมทไดจะไมมีขอมูลใดๆ เนื่องจากไมไดติดตั้งขอมูลตัวอยางของ Joomla ี่ ดังนั้นขั้นตอนถัดไป จะเปนการสรางเนื้อหา สรางเมนู และสวนจัดการเพิ่มเติม (Extension) ใหกบเว็บไซต โดยจะเริ่มตนกับการทํางานในโหมด Backend กอน ั
  • 89.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 89 - ปรับเว็บไซตในโหมด Backend เว็บใหม ควรกําหนดคาควบคุมตางๆ ใหเหมาะสมกอนใชงาน โดยเขาสูสวนควบคุม เว็บไซตดวย URL http://127.0.0.1/lib4you/administrator  ปอนบัญชีผูใช (User name) เปน admin และรหัสผานที่กําหนดไว จากนันคลิกปุม ้ Logins เพื่อเขาสูระบบ Domain name และ ชื่อ lib4you ปรับเปลี่ยนไดตามจริง ปรับคาระบบเว็บไซต (Global Configuration) เริ่มตนควรปรับคาระบบเว็บไซตโดยคลิกที่ไอคอน Global Configuration บุญเลิศ อรุณพิบูลย
  • 90.
    90 เว็บไซตงาย รวดเร็วดวย Joomla ปรากฏจอภาพสวนควบคุมคาระบบเว็บไซต ดังนี้ • Site Offline เลือกเปน No ทั้งนี้จะเลือกเปน Yes เมื่อตองการปดเว็บไซต เปนการชั่วคราว ซึ่งผูใชจะพบขอความตามที่กําหนดในรายการ Offline Message (ขอความดังกลาวปรับแกไขไดตามตองการ) • Site Name ชื่อเว็บไซต เปนสวนสําคัญมากที่ Search Engine จะเขาถึง จึงควรกําหนดดวยคําที่คนไดงาย นําดวยขอความภาษาอังกฤษเปนหลัก  • Default WYSIWYG Editor เลือกโปรแกรมที่ใชเปนสวนจัดการเนื้อหา (Editor) แบบ WYSIWYG (What You See Is What You Get) กรณีนใหเลือก ี้ เปน TinyMCE 2.0 • List Length จํานวนรายการที่จะใหแสดงผลกรณีที่เลือกรูปแบบการ แสดงผลแบบ List กรณีนี้คือ 20 รายการตอจอภาพ • Feed Length จํานวนรายการที่ดึงอัตโนมัตจาก RSS กรณีคือ 10 รายการ ตอจอภาพ • Global Site Meta Description คําอธิบายเว็บไซต ขอมูลสําคัญอีกสวน สําหรับ Search Engine กรณีนี้ใหปรับแกไขเปน แหลงรวมสาระความรูสาขา บรรณารักษศาสตร และสารสนเทศศาสตรสําหรับครู อาจารย นักศึกษา บรรณารักษ และนักสารสนเทศ • Global Site Meta Keywords คําคน (Keyword) สําหรับเว็บไซต ใช ประโยชนกับ Search Engine กรณีนใหปรับแกไขเปน Library, Information, ี้ Librarian, Information Officer, บรรณารักษศาสตร, สารสนเทศศาสตร, หองสมุด, ศูนยสารสนเทศ, สํานักวิทยบริการ
  • 91.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 91 - • Show Title Meta Tag อนุญาตใหนํา Title ของบทความแสดง ประกอบกับ Title เว็บไซตหรือไม กรณีนใหเลือกเปน No ้ี • Show Author Meta Tag อนุญาตใหนํา Author ของบทความแสดง ประกอบกับ Title เว็บไซตหรือไม กรณีนใหเลือกเปน No ี้ • Search Engine Friendly URLs กําหนดใหแสดงผล URL แบบสนับสนุน การสืบคนของ Search Engine หรือไม กรณีน้ใหเลือกเปน No (หากตองการ ี เลือกเปน Yes ทุกบทความจะตองกําหนด Alias Title เปนภาษาอังกฤษ หาม เวนวรรค ทุกบทความ) เมื่อกําหนดขอมูลขางตนจากชุดรายการ Site แลวใหคลิกที่ชุดรายการ System เพื่อกําหนดรายการเกียวกับ User Settings ่ • Allow User Registration อนุญาตใหผูใชลงทะเบียนเปนสมาชิกได หรือไม (กรณีนี้เลือกเปน Yes) • New User Registration Type ประเภทของสมาชิกที่ลงทะเบียน o Registered สมาชิกที่มีสิทธิ์สงลิงกเว็บแนะนํา และเขาถึงเนื้อหา เฉพาะสมาชิกไดเทานัน ้ o Author สมาชิกที่สามารถเขียนบทความใหมสงเขาสูระบบ ได แตไมมีสิทธิ์แกไขบทความ o Editor สมาชิกที่สามารถเขียนและแกไขบทความได o Publisher สมาชิกที่สามารถเขียน/แกไขบทความของสมาชิก คนอื่นได บุญเลิศ อรุณพิบูลย
  • 92.
    92 เว็บไซตงาย รวดเร็วดวย Joomla • New User Account Activation ผูใชที่ลงทะเบียนจะตองยืนยันการเปน สมาชิกหรือไม (แนะนําใหเลือกเปน Yes) • Front-end User Parameters อนุญาตใหสมาชิกปรับคาควบคุมเกี่ยวกับ สมาชิกไดหรือไม เชน ระบบภาษา Editor ที่เลือกใชงาน (แนะนําใหเลือกเปน Hide) เมื่อกําหนดคาที่จําเปนดังที่อธิบายขางตน ใหคลิกปุม Save เพื่อบันทึกคา จากนั้นจะตองกําหนดใหแสดงผล Module การล็อกอินเขาสูระบบ (Login-form Module) โดย 1. เลือกเมนูคําสั่ง Extension, Module Manager 2. คลิกปุม New เพื่อเลือกพื้นทีแสดงผล Module ใหม ่ 3. เลือก Module ชื่อ Login 4. ตั้งชื่อใหกบ Module เชน Login Form และกําหนดตําแหนงทีจะแสดงผล ั ่ เชน Left
  • 93.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 93 - 5. คลิกปุม Save แลวคลิกปุม Preview เพื่อสังเกตผลจากหนาเว็บไซต 6. ตอนนี้เว็บไซตก็พรอมจะรับสมาชิกที่สนใจเขารวมสรางสรรคเว็บไซตได แลว โดยคลิกที่ Create an account เพื่อสรางสมาชิกใหม บุญเลิศ อรุณพิบูลย
  • 94.
    94 เว็บไซตงาย รวดเร็วดวย Joomla วิเคราะหเนื้อหาเว็บไซต การนําเนื้อหาเขาเว็บไซต จะตองวิเคราะหเนื้อหากอน โดยเนื้อหาที่กําหนดไว ไดแก แนะนําเว็บไซต เปนเนื้อหาเพียง 1 หนาจอ ใหขอมูลเกี่ยวกับเว็บไซต ที่มาของ เว็บไซต เชน เว็บไซต lib4you พัฒนาขึ้นมาเพื่อเปนสื่อกลาง สําหรับบุคลากรสาขาบรรณารักษศาสตร สารสนเทศ ศาสตรของประเทศไทย ไดมารวมสรางสรรค แบงปนบทความ เนื้อหาสาระ ประสบการณ และ ความรูรวมกัน ทีมพัฒนาขอขอบคุณผูเยี่ยมชม และ สมาชิกทุกทานที่รวมสงเสริม สรางสรรค lib4you ทีมพัฒนา เปนเนื้อหาเพียง 1 หนา นําเสนอขอมูลของทีมพัฒนา ประกอบดวยรูปภาพสมาชิกในทีมพัฒนา ชื่อ/นามสกุล สังกัด และความชํานาญ คลังความรู เปนหมวดเนื้อหาใหญ ประกอบดวยหมวดยอย คือ • หมวดบรรณารักษศาสตร • หมวดสารสนเทศศาสตร • หมวดสถานศึกษาที่เปดสอน จากตารางขางตน ผูพัฒนาจะตองวิเคราะห ออกแบบเนื้อหาใหเหมาะสมกอน เพือให ่ สอดคลองกับรูปแบบการพัฒนา ดังนันจากตารางขางตน เมื่อนํามาวิเคราะหลักษณะรูปแบบ ้ เนื้อหาของ Joomla จะไดผลดังนี้ แนะนําเว็บไซต เปนเนื้อหาเพียง 1 หนาจอ ใหขอมูลเกี่ยวกับเว็บไซต ที่มาของ เว็บไซต เนื้อหาแบบ Static Content ไมตองกําหนด Section และ  Category ทีมพัฒนา เปนเนื้อหาเพียง 1 หนา นําเสนอขอมูลของทีมพัฒนา เนื้อหาแบบ Static Content ไมตองกําหนด Section และ Category
  • 95.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 95 - คลังความรู เปนหมวดเนื้อหาใหญ ประกอบดวยหมวดยอย คือ • หมวดบรรณารักษศาสตร • หมวดสารสนเทศศาสตร • หมวดสถานศึกษาที่เปดสอน เนื้อหาแบบ Dynamic Content ตองกําหนด Section และ Category โดย Section ซึ่งเปนหมวดใหญ กําหนดดวยชือ Knowledge ่ Category ซึ่งเปนหมวดยอยของ Section Knowledge กําหนด เปน • Library Science • Information Science • Institution Section Knowledge Category Category Category Library Science Information Science Institution บุญเลิศ อรุณพิบูลย
  • 96.
    96 เว็บไซตงาย รวดเร็วดวย Joomla สรางเนื้อหา “แนะนําเว็บไซต” การสรางเนื้อหา “แนะนําเว็บไซต” ทําไดโดย 1. จากหนา Control Panel ใหคลิกไอคอน Add New Article 2. ปอนขอมูลดังนี้ หมายเหตุ ทุกบทความควรกําหนด Metadata โดยคลิกจากชุดรายการ Metadata Information 3. คลิกปุม Save เพื่อบันทึกขอมูล
  • 97.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 97 - เมื่อสรางเนื้อหา “แนะนําเว็บไซต” แลวขันตอนถัดไปคือ การสรางเมนูควบคุมเนื้อหา ้ สวนนี้ โดย 1. คลิกเลือกเมนู Menus, Main Menu* เพื่อสรางรายการเมนูเพิ่มในเมนูหลักของ เว็บไซต 2. ปรากฏสวนควบคุมการสรางรายการเมนูของเมนูหลัก (Main Menu) ดังนี้ 3. คลิกปุม New เพื่อสรางรายการคําสั่งใหม 4. เลือกประเภทของรายการเมนู กรณีนี้เลือกเปน Articles 5. เมื่อคลิก Articles แลวจะปรากฏรายการเลือกดังนี้ บุญเลิศ อรุณพิบูลย
  • 98.
    98 เว็บไซตงาย รวดเร็วดวย Joomla คลิกเลือก Article Layout เนื่องจากเนื้อหาที่จะเชื่อมมายังรายการเมนูนี้ เปน เนื้อหาแบบ Static ที่ไมไดกําหนด Section และ Category ซึ่งจะปรากฏ รายการเลือก ดังนี้ 6. เลือกเนื้อหาทีตองการเชื่อมกับรายการเมนู โดยคลิกปุม Select จากรายการ ่  Select Article ปรากฏรายการบทความ ดังนี้
  • 99.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 99 - คลิกเลือกบทความ “แนะนําเว็บไซต” 7. เมื่อเลือกบทความที่ตองการแลว ก็มาถึงขั้นตอนกําหนดขอความกํากับรายการ เมนู • Title ขอความที่ตองการใหปรากฏ ไมควรยาวเกินไป (ตัวอยางระบุเปน แนะนําเว็บไซต) • Alias ขอความที่ระบุในรายการนีตองเปนภาษาอังกฤษ ้ หามเวนวรรค ใชเปนสวนควบคุมเมื่อเลือกคา Global Configuration ใน สวน SEO (กรณีนี้ไมตองระบุ) • Link URL ที่เขาถึงเนื้อหา (ไมตองปรับแกไข) • Parent Item ลําดับการนําเสนอเมนู ใหแสดงเปนรายการหลักตอจาก รายการเมนู Home จึงเลือกเปน Top • Published กรณีที่ไมตองการแสดงรายการคําสั่งใหเลือกเปน No (กรณี นี้ใหเลือกเปน Yes เพื่อใหแสดงผล) • Order กรณีที่มีรายการเมนูมากกวา 2 รายการ สามารถ เลือกลําดับไดวาตองการใหแสดงตอทายรายการใด • Access Level สิทธิ์ในการเขาถึงรายการเมนูนี้ กรณีนี้ใหเลือกเปน Public คือทุกคนสามารถคลิกเลือกรายการเมนูนี้ได • On Click, Open in เมื่อคลิกเลือกรายการเมนูนี้ ตองการใหเปดเนื้อหา ลักษณะใด กรณีนี้ใหเลือกเปน Parent Window with Browser Navigation คือ แสดงในหนาตางเดิมพรอมแถบควบคุม บุญเลิศ อรุณพิบูลย
  • 100.
    100 เว็บไซตงาย รวดเร็วดวย Joomla เมื่อกําหนดคาดังขางตนแลว ก็คลิกปุม Save เพื่อบันทึกการสรางรายการเมนูเพิ่มเติม ในเมนูหลัก จากนั้นตรวจสอบการสรางรายการเมนูเพิมเติมโดยคลิกเลือกรายการ ่ Preview ที่ ปรากฏมุมขวาของจอภาพ จะปรากฏรายการคําสั่งเพิ่มในแถบเมนูหลัก ดังนี้ เมื่อคลิกที่รายการเมนู “แนะนําเว็บไซต” จะปรากฏเนื้อหาดังนี้
  • 101.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 101 - สรางเนื้อหา “ทีมพัฒนา” การสรางเนื้อหา “ทีมพัฒนา” ใชหลักการเดียวกับ “แนะนําเว็บไซต” แตเนื่องจากขอมูล ประกอบดวยภาพ ชื่อ/นามสกุล สังกัด และความเชียวชาญ จึงตองเตรียมภาพกอน โดยภาพที่ ่ เตรียมควรมีขนาดความกวางไมเกิน 150 pixels ตั้งชื่อแฟมภาพเปนภาษาอังกฤษ หามเวนวรรค (ตัวอยางใชภาพในโฟลเดอร image ที่จัดเตรียมไวให) 1. นําเขาภาพเขาสู Joomla ดวยคําสั่ง Site, Media Manager 2. คลิกเลือกโฟลเดอรยอย stories บุญเลิศ อรุณพิบูลย
  • 102.
    102 เว็บไซตงาย รวดเร็วดวย Joomla 3. เลื่อนจอภาพมาดานลาง แลวคลิกที่ปุม Browse Files 4. คลิกเลือกภาพที่เตรียมทีละภาพ จนครบทุกภาพ หากเลือกภาพผิด สามารถลบภาพจากรายการไดโดยคลิกปุม ทายภาพ 5. เมื่อเลือกภาพไดครบตามตองการแลว ใหคลิกปุม Start Upload เพื่อนําเขาภาพ 6. จากนั้นสรางเนื้อหาใหม โดยคลิกไอคอน Add New Article หรือเลือกเมนู Content, Article Manager จากนั้นคลิกปุม New
  • 103.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 103 - 7. ปอนขอมูล Title และ Metadata ดังนี้ 8. สรางตารางขนาด 2 คอลัมน 3 แถว โดยคลิกปุม Insert New Table กําหนดจํานวน Columns เทากับ 2 และจํานวน Rows เทากับ 3 ระบุคาความ กวางตาราง (Width) เทากับ 100% เพื่อใหตารางยาวเต็มจอภาพ จากนั้นคลิก ปุม Insert เพื่อแทรกตาราง 9. ตารางที่ไดจะปรากฏดังนี้ บุญเลิศ อรุณพิบูลย
  • 104.
    104 เว็บไซตงาย รวดเร็วดวย Joomla 10. คลิกเมาสในเซลลแรก (แถวแรกคอลัมนแรก) เลือกภาพที่ตองการแสดง โดย คลิกปุม ปรากฏจอภาพเลือกภาพดังนี้ คลิกเลือกภาพที่ตองการ ปอนคําอธิบายภาพในรายการ Image Description และ Image Title จากนันคลิกปุม Insert ้ คลิกเมาสในคอลัมนดานขวาของแถวแรก พิมพขอมูลทีมพัฒนาคนที่ 1 จัด แตงตามเหมาะสม เชน ทําซ้ํากับรายการอื่นจนครบ
  • 105.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 105 - 11. คลิกปุม Save เพื่อบันทึกขอมูล เมื่อสรางเนื้อหา “ทีมพัฒนา” แลวขั้นตอนถัดไปคือ การสรางเมนูควบคุมเนื้อหาสวนนี้ โดย 1. คลิกเลือกเมนู Menus, Main Menu* เพื่อสรางรายการเมนูเพิ่มในเมนูหลักของ เว็บไซต 2. ปรากฏสวนควบคุมการสรางรายการเมนูของเมนูหลัก (Main Menu) ดังนี้ 3. คลิกปุม New เพื่อสรางรายการคําสั่งใหม 4. เลือกประเภทของรายการเมนู กรณีนี้เลือกเปน Articles บุญเลิศ อรุณพิบูลย
  • 106.
    106 เว็บไซตงาย รวดเร็วดวย Joomla 5. เมื่อคลิก Articles แลวจะปรากฏรายการเลือกดังนี้ คลิกเลือก Article Layout เนื่องจากเนื้อหาที่จะเชื่อมมายังรายการเมนูนี้ เปน เนื้อหาแบบ Static ที่ไมไดกําหนด Section และ Category ซึ่งจะปรากฏ รายการเลือก ดังนี้ 6. เลือกเนื้อหาทีตองการเชื่อมกับรายการเมนู โดยคลิกปุม Select จากรายการ ่  Select Article ปรากฏรายการบทความ ดังนี้ คลิกเลือกบทความ “ทีมพัฒนา”
  • 107.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 107 - 7. เมื่อเลือกบทความที่ตองการแลว ก็มาถึงขั้นตอนกําหนดขอความกํากับรายการ  เมนู เมื่อกําหนดคาดังขางตนแลว ก็คลิกปุม Save เพื่อบันทึกการสรางรายการเมนูเพิ่มเติม ในเมนูหลัก จากนั้นตรวจสอบการสรางรายการเมนูเพิมเติมโดยคลิกเลือกรายการ ่ Preview ที่ ปรากฏมุมขวาของจอภาพ จะปรากฏรายการคําสั่งเพิ่มในแถบเมนูหลัก และเมื่อคลิกที่รายการเมนู “ทีมพัฒนา” จะ ปรากฏเนื้อหาดังนี้ บุญเลิศ อรุณพิบูลย
  • 108.
    108 เว็บไซตงาย รวดเร็วดวย Joomla เนื้อหาหมวดคลังความรู การสรางเนื้อหาหมวดคลังความรู ตามที่ไดออกแบบไวจะประกอบดวยหมวดยอย 3 หมวด ซึ่ง Joomla ไดกําหนดหมวดเนื้อหาหมวดใหญเปน Section และเนื้อหาหมวดยอยใน แตละ Section เปน Category Articles Section A Section B Static Content Category A-1 Category A-2 Category B-1 Content 1 Content 1 Content 1 Content 2 Content 2 รูปแสดงโครงสรางการจัดการเนื้อหาของ Joomla จากแผนการวิเคราะหดังกลาว จึงตองสราง Section กอน โดย 1. เลือกเมนูคําสั่ง Content, Section Manager 2. คลิกปุม New เพื่อสราง Section ใหม
  • 109.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 109 - 3. กําหนดชื่อ Section และรายละเอียดเพิ่มเติมไดจากรายการ Description ตัวอยางระบุชอ Section เปน Knowledge แลวคลิกปุม Save ื่ 4. เมื่อสราง Section แลวขั้นตอนถัดไปเปนการสราง Category ใหกับ Section Knowledge จํานวน 3 Categories โดยคลิกเลือกเมนูคําสั่ง Content, Category Manager คลิกปุม New แลวกําหนดชือ Category ่ ตัวอยางกําหนดชื่อ Category เปน Library Science และเลือก Section เปน Knowledge จากนั้นคลิกปุม Save เพื่อบันทึกและทําซ้ําจนครบทั้ง 3 Categories บุญเลิศ อรุณพิบูลย
  • 110.
    110 เว็บไซตงาย รวดเร็วดวย Joomla 5. เมื่อสราง Section และ Categories แลวขั้นถัดไปเปนการสรางเนือหาตาม ้ หมวดดวยวิธีการเดียวกับทีไดแนะนําไปกอนหนานี้ แตจะตองเลือก Section ่ และ Category ใหตรงกับเนือหา ดังนี้ ้ ปกติเนื้อหาลักษณะนี้ มักจะนําเสนอในหนาแรกของเว็บไซต (Front Page) จึง ควรคลิกเลือกรายการ Front Page เปน Yes ดวย จากนั้นปอนเนื้อหา จัดรูปแบบการแสดงผลใหเหมาะสม จึง Save เนือหา ้ 6. เนื้อหาที่สรางจะปรากฏผาน Articles Manager ดังนี้ 7. และเมื่อคลิกปุม Preview จะแสดงผลหนาเว็บ ดังนี้  8. จากหนาเว็บไซตดังกลาว ยังไมมีเมนูควบคุมการแสดงผล จึงควรสรางเมนู ควบคุม
  • 111.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 111 - 9. จากหนา Control Panel คลิกเลือกคําสั่ง Menu, Main Menu 10. คลิกปุม New เพื่อสรางรายการเมนูใหมแบบ Articles 11. ตองการสรางรายการเมนู “คลังความรู” ซึ่งเปนการโยงไปหา Section Knowledge จึงตองคลิกเลือก Section และมีรายการยอย 2 ตัวเลือกคือ Section Blog Layout เพื่อตองการใหแสดงขอมูลในลักษณะ Blog หรือ Section Layout เพื่อตองการใหแสดงขอมูลในลักษณะลําดับรายการ (List) กรณีนี้ให คลิกเลือกเปน Section Layout บุญเลิศ อรุณพิบูลย
  • 112.
    112 เว็บไซตงาย รวดเร็วดวย Joomla 12. จากนั้นปอนชือรายการเมนูเปน “คลังความรู” และเลือก Section เปน ่ Knowledge คลิกปุม Save เพื่อบันทึก แลวคลิกปุม Preview เพื่อตรวจสอบผล 13. เพื่อใหเขาถึงขอมูลไดตรงมากขึ้น สามารถสรางรายการเมนูยอยภายใต “คลัง ความรู” ตัวอยางตองการสรางรายการเมนูยอย ชื่อ “บรรณารักษ” ซึ่งทําได ดังนี้ 14. จากหนา Control Panel คลิกเลือกคําสั่ง Menu, Main Menu 15. คลิกปุม New เพื่อสรางรายการเมนูใหมแบบ Articles
  • 113.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 113 - 16. ตองการสรางรายการเมนู “บรรณารักษ” ซึ่งเปนการโยงไปหา Category Library Science จึงตองคลิกเลือก Category และมีรายการยอย 2 ตัวเลือกคือ Category Blog Layout เพื่อตองการใหแสดงขอมูลในลักษณะ Blog หรือ Category Layout เพื่อตองการใหแสดงขอมูลในลักษณะลําดับรายการ (List) กรณีนใหคลิกเลือกเปน Category Blog Layout ี้ 17. ระบุช่อรายการเมนูเปน “บรรณารักษ” และเนื่องจากเปนรายการเมนูยอยของ ื “คลังความรู” จึงตองคลิกเลือก คลังความรู จากรายการ Parent Item 18. เลือก Category เปน Library Science จากรายการ Category บุญเลิศ อรุณพิบูลย
  • 114.
    114 เว็บไซตงาย รวดเร็วดวย Joomla 19. คลิกปุม Save เพื่อบันทึกและทําซ้ํากับ Category ที่เหลือจนครบทั้ง 3 หมวด ยอย 20. เมื่อคลิกปุม Preview จะปรากฏผลหนาเว็บ ดังนี้ เพียงเทานี้กไดเนื้อหาและเมนูที่สรางดวยงานของตนเองจาก Joomla อยางรวดเร็ว ที่ ็ เหลือก็คอการปรับแตงและเพิ่มเนื้อหาใหเหมาะสม กอนเผยแพรใหผสนใจเขาถึงได ื ู นําเนื้อหาจากโฟลเดอร data สรางเปนบทความตามหมวดเนื้อหาทีกําหนดไว ่
  • 115.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 115 - แบบสอบถามออนไลน (Poll) เว็บไซตในปจจุบันควรใหความสําคัญกับผูชมเว็บ และมีขอมูลความคิดเห็นจากผูชม  เว็บประกอบการพัฒนาปรับปรุง Poll เปน Components ที่มากับ Joomla สําหรับสราง แบบสอบถามออนไลนจากผูใชอยางงาย แสดงผลลัพธเปนกราฟแทงแนวนอน (Bar chart) ดวย สีสันที่สวยงาม การสรางแบบสอบถามออนไลนทําไดโดยเลือกเมนูคําสั่ง Components, Polls คลิกปุม New ปอนคําถามในรายการ Title: ตัวเลือกในรายการ Options: และการนําเสนอจากรายการ Published: โดยคลิกเลือกรายการ Published เปน Yes เพื่อให Poll ที่สรางเผยแพรใหกับผูชม จากนั้นคลิกปุม Save  เมื่อสราง Poll แลวขั้นถัดไปเปนการแสดงผล Polls บนหนาเว็บ โดยเลือกคําสั่ง Extensions, Module Manager จากนั้นคลิกปุม New เพื่อสราง Module ใหม บุญเลิศ อรุณพิบูลย
  • 116.
    116 เว็บไซตงาย รวดเร็วดวย Joomla คลิกที่รายการ Poll ตั้งชื่อ Poll ในรายการ Title และเลือก Poll จากรายการ Select poll ทั้งนี้สามารถเลือกตําแหนงที่จะแสดงผล Poll ดานซายหรือดานขวาของจอภาพจากรายการ Position คลิกปุม Save และคลิกปุม Preview เพื่อแสดงผลจากหนาเว็บไซต
  • 117.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 117 - Web Resources เกือบทุกเว็บไซตมักจะหนีไมพนกับการนําเสนอเว็บเครือขายที่คดสรรแลว ั โดย แสดงผลเปนลิงกเว็บไซตแยกหมวดหมู Joomla เตรียมความสามารถจัดการเว็บไซตไดงายๆ ดวย Components ชื่อ Web Links การสราง Web Resources จะตองเริ่มจากการสรางหมวดหมูของเว็บ (Categories) กอน โดยคลิกเลือกคําสั่ง Components, Web Links, Categories คลิกปุม New เพื่อสรางหมวดเว็บ ปอนชื่อหมวดเว็บในรายการ Title: แลวคลิกปุม Save และทําซ้ํากับหมวดอื่นๆ จนครบ ตามตองการ บุญเลิศ อรุณพิบูลย
  • 118.
    118 เว็บไซตงาย รวดเร็วดวย Joomla เมื่อสรางหมวดเว็บแลว ขันถัดไปจะเปนการสรางรายการลิงกเว็บไซตตามหมวดเว็บ ้ โดยเลือกคําสั่ง Components, Web Links, Links คลิกปุม New เพื่อสรางรายการลิงกเว็บไซต • ระบุช่อรายการลิงกเว็บใน Name ื • ระบุ URL ของเว็บใน URL • คําอธิบายเว็บใน Description • เลือกรายการ Target เปน New Window with Browser Navigation เพื่อใหแสดงผล เว็บในจอภาพใหม เมื่อบันทึกจะปรากฏรายการลิงกเว็บไซต ดังนี้
  • 119.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 119 - ตอนนี้ก็ไดคลังเว็บไซตแลว แตการนําเสนอใหผูชมเขาถึงไดแลว จะตองสรางเมนู ควบคุมแสดงผลกอน โดย 1. เลือกเมนูคําสั่ง Menu, Main Menu แลวคลิกปุม New 2. คลิกรายการ Web Links 3. คลิกรายการ All Categories, Web Link Category List Layout บุญเลิศ อรุณพิบูลย
  • 120.
    120 เว็บไซตงาย รวดเร็วดวย Joomla 4. ระบุคําอธิบายรายการเมนูในรายการ Title เชน คลังเว็บไซต แลวคลิกปุม Save จากนั้นคลิกปุม Preview เพือแสดงผล  ่
  • 121.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 121 - ปายโฆษณา (Banner) เนื้อหาเดน หรือกิจกรรมเดนมักจะนําเสนอในรูปแบบภาพโฆษณาที่สามารถสุม แสดงผลอัตโนมัติเมื่อมีการโหลดหนาเว็บไซต (Re-load) Joomla จึงไดเตรียมการจัดการ เกี่ยวกับปายโฆษณาหรือ Banner รวมทั้งสวนลิงกไปยังเว็บไซตที่เกี่ยวของ โดยทํางานผาน Components, Banner การสรางปายโฆษณา จะตองเตรียมภาพใหมีขนาดที่เหมาะสมกอน เชน ภาพฟอรแมต JPEG ขนาด 450 × 100 พิกเซล ภาพตัวอยางอยูที่โฟลเดอร image/banner เมื่อเตรียมภาพแลวขั้นถัดไปให Upload ภาพดวย Media Manager ไปไวที่โฟลเดอร banners จากนั้นเริ่มเขาสูการสรางปายโฆษณา โดย 1. สราง Category ของปายโฆษณาดวยคําสั่ง Components, Banner, Category 2. สรางชุดยอยของปายโฆษณาดวยคําสั่ง Components, Banner, Clients เชน บุญเลิศ อรุณพิบูลย
  • 122.
    122 เว็บไซตงาย รวดเร็วดวย Joomla 3. สรางรายการปายโฆษณาดวยคําสั่ง Components, Banner, Banners • Name: ระบุชื่อปายโฆษณา • Category เลือกหมวดปายโฆษณา • Client Name เลือกชุดยอยของปายโฆษณา • Click URL ระบุ URL ที่ตองการใหแสดงผล กรณีไมมี URL ให  ระบุ URL ของเว็บไซตหลักหรือระบุดวย # ก็ได  • เลือกภาพปายโฆษณาใหตรงกับเนื้อหาในรายการ Banner Image Selector 4. ระบุรายละเอียดแลวคลิกปุม Save จากนั้นทําซ้ําจนครบทุกภาพที่ตองการ
  • 123.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 123 - 5. กําหนดการนําเสนอดวยคําสั่ง Extension, Module Manager คลิกเลือก Banners 6. ปรับแตงคาที่จาเปน ํ • Title ระบุชื่อ Module เชน Banner • Show Title ใหเลือกเปน No • Position ใหเลือกเปน user1 • Randomise เลือกเปน Sticky, Randomise 7. จากนั้นคลิกปุม Save แลวดูผลที่ปรากฏในหนา Front page  การระบุตําแหนง (Position) ในการแสดงผล Module จะตองเลือกใหเหมาะสม กรณี เชน Banner ควรเลือกเปน user1 ทั้งนี้เจาหนาที่ที่ดูแลเว็บจะตองตรวจสอบตําแหนงของ Template แตละ Template ที่เลือกใชวากําหนดตําแหนงไวอยางไร โดยคลิกเลือกคําสั่ง Extensions, Template Manager บุญเลิศ อรุณพิบูลย
  • 124.
    124 เว็บไซตงาย รวดเร็วดวย Joomla จากนั้นคลิกที่ Radio Box หนา Template ที่เลือก แลวคลิกปุม Edit ปรากฏจอภาพดังนี้ คลิกปุม Preview โปรแกรม Joomla จะแสดงชื่อตําแหนง (Position Name) ดวยอักษรสีแดงใน กรอบดังตัวอยาง จากภาพตัวอยาง จะพบวา • Main Menu, Login Form แสดงผล ณ ตําแหนง Left • Poll แสดงผล ณ ตําหนง Right • Banner แสดงผล ณ ตําแหนง user1
  • 125.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 125 - คลังภาพออนไลน “ภาพ” สื่อแทนขอความที่ไดรับความสนใจมากสื่อหนึ่ง เว็บไซตหากไมนําเสนอภาพก็ คงไมสามารถเรียกผูชมไดมากเทาที่ควร ดังนั้นการสรางคลังภาพออนไลนจึงเปนแนวทางหนึ่ง ที่ชวยใหจํานวนผูชมเว็บสูงขึ้นได Joomla เตรียม Extension ที่เกี่ยวกับ Photo Gallery ไวใหเลือกใชหลากหลายโดยดาวน โหลดไดจากเว็บ http://www.joomla.org ทั้งนี้จะขอแนะนําการสรางคลังภาพออนไลนดวย  Extension ชื่อ Ozio Gallery โดยไฟลติดตั้งคือ com_oziogallery-0.24.zip การใชงานจะตองเริ่มจากการติดตั้ง Components กอนดวยคําสั่ง Extension, Install/Uninstall จากนั้น Browse เลือกไฟลแลวคลิกปุม Upload File & Install เพื่อติดตั้ง Component ที่ติดตั้งแลวจะไปแสดงผลที่เมนู Components บุญเลิศ อรุณพิบูลย
  • 126.
    126 เว็บไซตงาย รวดเร็วดวย Joomla เมื่อคลิกเลือก Components, Ozio Gallery จะปรากฏจอภาพดังนี้ แสดงวา Components Ozio Gallery ติดตั้งไดสมบูรณ ขันตอนถัดไปคือการเตรียมภาพ ้ ที่จะแสดงผล โดยควรเปนภาพฟอรแมต JPEG (.jpg) ขนาดความกวางไมเกิน 640 พิกเซล ชื่อ ไฟลภาพจะตองเปนภาษาอังกฤษ หามเวนวรรค และ Upload ดวย Media Manager ไปไวที่ โฟลเดอร images/oziogallery ขั้นตอนสุดทายคือ การสรางรายการเมนูควบคุม Ozio Gallery โดยเลือกคําสั่ง Menu, Main Menu แลวคลิกปุม New เลือก Ozio Gallery
  • 127.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 127 - กําหนดขอความกํากับรายการเมนูในรายการ Joomla Ozio Gallery Components for Joomla เชน คลังภาพ แลวบันทึกดวยปุม Save เมื่อแสดงผลทางหนาเว็บจะปรากฏรายการเมนู และปรากฏผลคลังภาพดังนี้ เพียงเทานี้ก็ไดคลังภาพไมยาก อีกทั้งมีลูกเลนในการนําเสนอที่นาสนใจมาก บุญเลิศ อรุณพิบูลย
  • 128.
    128 เว็บไซตงาย รวดเร็วดวย Joomla นอกจากนี้โปรแกรมยังอนุญาตใหปรับเปลี่ยนรูปแบบการแสดงผลไดโดยเลือกเมนู คําสั่ง Components, Ozio Gallery จากนั้นคลิกปุม Settings ปรากฏรายการเลือกรูปแบบการแสดงผลในรายการ Skin  รวมทั้งแท็บ Skin ยอยทีใชปรับแตงการแสดงผลแตละ Skin ที่เลือก ่
  • 129.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 129 - คลังเอกสาร คลังดาวนโหลด คลังเอกสาร คลังดาวนโหลดฟงกใจอีกฟงกชันทีเ่ ปนหัวใจของระบบจัดการเอกสาร ออนไลน เพราะเอกสารในระบบเว็บไซตมักจะมีจํานวนเพิ่มขึ้นตามเวลา การจัดหมวดหมู เอกสารใหคนหาไดงายจึงมีความสําคัญมาก Joomla ไดเตรียม Extension บริหารจัดการเอกสาร พรอมความสามารถอื่นๆ ไวหลากหลายโปรแกรม โปรแกรมที่จะนําเสนอเปนตัวอยางคือ IonFiles ดาวนโหลดไดจาก Extensions ของ http://www.joomla.org และไดไฟลดังนี้ ionFiles-4[1].2.zip การติดตั้งก็คลายคลึงกับการติดตั้ง Extension อื่นๆ ที่ไดแนะนําไปแลว คือ Extension, Install/Uninstall เมื่อติดตั้งแลวจะปรากฏสวนควบคุมในเมนู Components, ionFiles เริ่มตนจะตองปรับแตงระบบใหเหมาะสมกอน โดยคลิก Configuration บุญเลิศ อรุณพิบูลย
  • 130.
    130 เว็บไซตงาย รวดเร็วดวย Joomla แท็บ Configuration เลือกวาจะแสดงหรือไมใหแสดงขอมูลตามรายการเลือกหรือไม เมื่อปรับคาตามตองการแลวใหคลิกปุม Save ขั้นตอนถัดไปคือ สรางหมวดเอกสาร (Categories) โดยคลิกที่แท็บ Manage Categories สรางหมวดเอกสารโดยคลิกปุม New แลวปอนชื่อหมวดเอกสาร คลิกปุม Save เพื่อบันทึก แลวสรางหมวดเอกสารอื่นตามตองการ เมื่อสรางหมวดเอกสารไดแลว ขั้นตอนสุดทายคือ การนําเขาแฟมเอกสาร โดยสามารถ นําเขาแฟมเอกสารไดหลายฟอรแมตทั้ง .pdf, .doc, .xls, .ppt, .odt เปนตน การนําเขาเอกสารมี 2 ขั้นตอนคือ 1. การ Upload แฟมเอกสารเขาสูระบบเว็บ Joomla ผานทาง Media Manager 2. การสรางคลังดาวนโหลดเอกสารดวย ionFiles
  • 131.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 131 - Upload เอกสารดวย Media Manager การ Upload แฟมเอกสารดวย Media Manager ทําไดโดยเลือกคําสั่ง Site, Media Manager และสรางโฟลเดอรสําหรับเอกสารโดยเฉพาะ เชน documents คลิกเลือกโฟลเดอร Media แลวระบุชื่อโฟลเดอรใหมเปน document จากนันคลิกปุม ้ Create Folder จากนั้นคลิกเลือกโฟลเดอร documents เลือกไฟลที่ตองการ Upload แลวคลิกปุม Start Upload สรางคลังดาวนโหลดเอกสาร เมื่อนําเขาแฟมเอกสารเขาสู Media Manager แลวขั้นถัดไปคือการนําลิงกเอกสารไปยัง ionFiles โดยเลือกคําสั่ง บุญเลิศ อรุณพิบูลย
  • 132.
    132 เว็บไซตงาย รวดเร็วดวย Joomla ปรากฏสวนควบคุมการจัดการแฟมเอกสารดังนี้ คลิกปุม New แลวระบุขอมูลเอกสารประกอบการทําลิงกแฟมเอกสาร ดังนี้ ปอนขอมูลรายการที่จําเปน ดังนี้ • File Title ชื่อเอกสารที่ตองการใหแสดงในหนาเว็บ • File Name ชื่อแฟมเอกสาร • Description คําอธิบายเอกสาร
  • 133.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 133 - • Version รุนของเอกสาร • Licenses type ประเภทลิขสิทธิ์ เชน (c) คือ Copyright, (cc) คือ Creative Commons, Public Domain คือ ของสาธารณะ หรืออื่นๆ • Category หมวดของแฟมเอกสาร • Size ขนาดแฟมเอกสาร (ระบุหนวยตอทายเปน KB หรือ MB) • Release Date วันที่เผยแพรแฟมเอกสาร • File URL สวนสําคัญมากจะตองระบุเปน images/documents/ชื่อแฟม เอกสาร.สวนขยาย • Author เจาของแฟมเอกสาร เมื่อระบุขอมูลจําเปนดังกลาวแลวก็คลิกปุม Save เพื่อบันทึก  ขั้นตอนสุดทายคือการสรางรายการเมนูควบคุม ionFiles ดวยวิธีการสรางเมนูที่เคย แนะนําไปกอนแลว คือ เลือกคําสั่ง Menu, Main Menu คลิกปุม New บุญเลิศ อรุณพิบูลย
  • 134.
    134 เว็บไซตงาย รวดเร็วดวย Joomla เลือก ionFiles กําหนดชื่อรายการเมนู เมื่อคลิกปุม Save จะปรากฏรายการเมนูเพิมใน Main Menu และจะแสดงผลเมื่อคลิก ่ เลือก ดังนี้
  • 135.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 135 - ขาวประกาศอัตโนมัติแบบ RSS Feed RSS ยอมาจาก “Really Simple Syndication” ซึ่งอาจแปลเปนไทยไดวา “การกระจาย ขาวสารอยางงายๆ” เปนเทคโนโลยีที่นําขอมูลที่ผูพฒนาสรางขึ้น ดึงมานําเสนอบนเว็บไซตของ ั เราโดยอัตโนมัติ ทําใหลดภาระในการคัดลอกขาวหรือเนื้อหา ไดขาวหรือเนื้อหาทีปรับปรุงได ่ ตลอดเวลาเมื่อตนฉบับเปลี่ยนแปลง Joomla รองรับการทํางาน RSS โดยผานทาง Components, News Feed โดยจะตองเริ่มจากการสรางหมวดขาวกอน คลิกที่ Categories จากนันคลิกปุม News ้ ระบุชื่อหมวดขาว ดังตัวอยาง • Title ชื่อหมวดขาว • Published เลือก Yes เพื่อใหหมวดขาวทํางาน บุญเลิศ อรุณพิบูลย
  • 136.
    136 เว็บไซตงาย รวดเร็วดวย Joomla เมื่อคลิกปุม Save จะปรากฏหมวดขาว ดังนี้ สามารถสรางหมวดขาวประเภทอื่นๆ ไดตามตองการ เมื่อเรียบรอยแลวก็จะเปน การระบุ URL ของ RSS Feed จากเว็บผูใหบริการดวยคําสั่ง Components, News Feeds, Feeds คลิกปุม New เพื่อสรางรายการขาวใหม • Name ชื่อขาวที่จะดึง เชน ผูจัดการ • Published เลือก Yes เพื่อใหรายการนี้ทางานํ • Category เลือกหมวดขาว • Link ระบุ URL ของ RSS Feeds ที่ตองการดึง • Number of Articles จํานวนขาวที่ตองการใหแสดงในหนาเว็บ  • Cache Time เวลา (วินาที) ที่ตองการใหปรับปรุงรายการขาว เมื่อไดกําหนดขอมูลแลวจึงคลิกปุม Save การหา URL ของ RSS Feeds ทําไดโดยเขาไปยังเว็บไซต (แนะนําใหใช Firefox) เชน หนังสือพิมพผูจัดการ ดวย URL http://www.manager.co.th แลวเลื่อนหา สัญลักษณ ในหนาเว็บ ดังนี้
  • 137.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 137 - คลิกปุมขวาของเมาสที่สัญลักษณ ในหมวดขาวที่ตองการ แลวเลือกคําสั่ง Copy Link Location เพื่อคัดลอก URL ของ RSS ขาวในหมวดที่เลือก จากนั้นจึงนํา URL ที่คัดลอกไป Paste ในรายการ Link ของ News Feeds เมื่อไดหมวดขาว RSS Feeds ตามตองการแลว จึงสรางเมนูควบคุมการแสดงผลตอไป บุญเลิศ อรุณพิบูลย
  • 138.
    138 เว็บไซตงาย รวดเร็วดวย Joomla ติดตอทีมพัฒนา ผูดแลเว็บ ู เว็บไซตควรจะมีเนื้อหาที่แสดงถึงขอมูลการติดตอสื่อสาร อยาใหความสําคัญกับการ ติดตอดวย e-Mail หรือ Web board เพียงอยางเดียว การระบุขอมูลการติดตอทีมพัฒนา หรือ ผูดูแลเว็บมีความสําคัญมาก Joomla ไดเตรียม Components Contact เปนสวนควบคุมโดย สามารถสรางเนื้อหาไดหลายหมวด จึงตองเริ่มจากการสรางหมวดขอมูลการติดตอกอน ดวย คําสั่ง Components, Contacts, Categories สามารถสรางไดหลายหมวดดังนี้ เมื่อสรางหมวดขอมูลการติดตอแลว ก็จะเปนการสรางรายการติดตอดวยคําสั่ง Components, Contacts, Contacts โดยรายการระบุเมื่อคลิกปุม New ไดแก
  • 139.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 139 - • Name ระบุชื่อรายการติดตอ เชน Web Master • Category เลือกหมวดการติดตอที่สรางไวกอนหนา • Links to User กรณีที่มีการสรางสมาชิกมากกวา 1 สามารถระบุไดวาการ ติดตอนี้ จะหมายถึงสมาชิกใด จากนั้นก็ระบุขอมูลการติดตอ ดังนี้ เมื่อระบุขอมูลที่จําเปนครบแลวจึงคลิกปุม Save และสราง Menu ควบคุมการแสดงผล ตอไป บุญเลิศ อรุณพิบูลย
  • 140.
    140 เว็บไซตงาย รวดเร็วดวย Joomla เพิ่มชุดเมนู ปกติ Joomla ไดเตรียมชุดเมนูไวใหแลว 1 ชุดมาตรฐานคือ ชุดเมนูหลัก (Main Menu) แตผูพัฒนาสามารถสรางชุดเมนูเพิ่มไดตามตองการ เชน ตองการเพิ่มชุดเมนูในแนวนอนวางไว ที่ตําแหนง user3 ประกอบดวยรายการ Home, RSS News และ Contact Us 1. เลือกเมนูคําสั่ง Menu, Menu Manager คลิกปุม New เพือสรางชุดเมนูชุดใหม ่ 2. กําหนดชื่อชุดเมนูเปน Top Menu ทั้ง 4 รายการ แลวจึงคลิกปุม Save 3. คัดลอกรายการเมนู Home จาก Main Menu ไปยัง Top Menu โดย 1) เลือกคําสั่ง Menu, Main Menu 2) คลิก Radio Box หนา Home แลวคลิกปุม Copy 3) เลือก Top Menu แลวคลิกปุม Copy  4) รายการเมนู Home จะถูกคัดลอกมาไวที่ Top Menu ดังนี้
  • 141.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 141 - 4. ถัดไปก็สรางรายการเมนู RSS News และ Contact Us ดวยวิธีการที่ไดแนะนํา ไปกอนแลว แตใหเลือกชุดเมนูเปน Top Menu ดังนี้ 5. กําหนดการแสดงผล Top Menu ณ ตําแหนง user3 โดยเลือกคําสั่ง Extension, Module Manager 6. คลิกเลือก Top Menu 7. เลือก Enabled เปน Yes และ Position เปน user3 8. เมื่อบันทึกการปรับแสดงผล Top Menu จาก Module Manager แลวแสดงผล เว็บ เมนูใหมทสรางจะปรากฏในหนาเว็บ ดังนี้ ี่ บุญเลิศ อรุณพิบูลย
  • 142.
    142 เว็บไซตงาย รวดเร็วดวย Joomla สรางบัญชีสมาชิก จุดเดนของ CMS คือการอนุญาตใหสมาชิกมีสวนรวมสรางสรรค ปรับปรุงเว็บไซตทํา ใหเว็บไซตมีความเคลื่อนไหวอยูตลอดเวลาจากกลุมสมาชิก การสรางสมาชิกสามารถทําได หลายวิธี เชน เปดระบบลงทะเบียนสมาชิกอัตโนมัติจากหนาเว็บ หรือ Admin ของเว็บเปน ผูสรางบัญชีสมาชิก การลงทะเบียนสมาชิกอัตโนมัติจากหนาเว็บ จะทําไดเมื่อ Admin กําหนดคา Global Configuration ในสวน User Settings ดังนี้ Allow User Registration เลือกเปน Yes และสราง Module Login ใหทํางานในหนา Front-end ของเว็บ Module Login โดยจะปรากฏสวน Login ในหนา Front-End ของเว็บดังนี้
  • 143.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 143 - เมื่อผูสนใจคลิกรายการเมนู Create an account จะปรากฏจอภาพลงทะเบียนเปน สมาชิกดังนี้ ผูสมัครปอนขอมูลตามฟอรมลงทะเบียน และคลิกปุม Register กรณีที่ Web Server และเว็บไซตไดกําหนดคา Mail Server ไวถูกตองระบบจะสงอีเมลไปยังผูสมัครตามอีเมลที่ระบุ เพื่อใหยืนยันการสมัคร การกําหนดคา Mail Server ใหระบุที่ Global Configuration ในสวน Server, Mail Settings กรณีที่ Web Server และเว็บไซตไมไดกําหนดคา Mail Server ไวผูสมัครจะไมไดรับ อีเมลยืนยัน Admin จะตองเปนผูแจงผูสมัครดวยวิธีการอื่นแทน โดย Admin เขาไปตรวจสอบ บัญชีผูสมัครไดทาง Control Panel คลิกที่ไอคอน User Manager บุญเลิศ อรุณพิบูลย
  • 144.
    144 เว็บไซตงาย รวดเร็วดวย Joomla จากภาพตัวอยางจะพบวามีบญชีใหมคือ courseware2u ที่ยังไมไดเปดใช สังเกตุไดที่ ั รายการ Enabled เปนกากบาทสีแดง หาก Admin ตองการใหสมาชิกนีมสิทธิ์ทํางานกับเว็บไซต ้ ี ก็ใหคลิกกากบาทสีแดง ใหเปนเครื่องหมายถูกสีเขียว การแกไขขอมูลสมาชิก ทําไดโดยคลิกที่ชอสมาชิกนั้นๆ ื่ สําหรับการสรางบัญชีสมาชิกใหมโดย Admin ทําไดโดยเขามาที่ User Manager แลว คลิกปุม New แลวปอนขอมูลสมาชิก ในสวน Group เปนสวนสําคัญมากคือการสิทธิ์ของสมาชิกวามี สิทธิ์อยางไรกับเว็บไซต โดยกําหนดสิทธิไดดังนี้ ์
  • 145.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 145 - • Public Front-end สิทธิ์เฉพาะการล็อกอินทางหนาเว็บ Front-end o Registered มีสิทธิ์เฉพาะสง URL เว็บแนะนํา และอานเนื้อหาบางสวนที่ กําหนดไวเฉพาะสมาชิก o Author มีสิทธิ์สรางเนื้อหาและเหมือนกับ Registered o Editor มีสิทธิ์สราง/แกไขเนื้อหาและเหมือนกับ Author o Publisher มีสิทธิ์สราง/แกไขเนื้อหาทั้งของคนเองและสมาชิกทานอื่น รวมทั้งสิทธเหมือนกับ Author • Public Back-end สิทธิ์ล็อกอินทางหนาเว็บ Front-end และ Back-end ของเว็บไซต o Manager มีสิทธิ์เหมือน Publisher แตสามารทํางานจาก Back-end Control Panel ของเว็บได o Administrator มีสิทธิ์คลายกับ Super Admin แตยังไมสิทธิ์เปลี่ยน คา Configuration ของระบบ o Super Administrator มีสิทธิ์ทุกอยางในการจัดการเว็บไซต บุญเลิศ อรุณพิบูลย
  • 146.
    146 เว็บไซตงาย รวดเร็วดวย Joomla เมนูเฉพาะสมาชิก การเขาทํางานสําหรับสมาชิกในโหมด Front-end ผูพัฒนาเว็บควรสรางเมนูการทํางาน เฉพาะสมาชิกขึ้นมา เชน การปรับแกไขขอมูลสมาชิก (Updated Profile) การสงบทความเขาสู เว็บ (Submit Article) การสงเว็บไซตแนะนํา เปนตน โดยชุดเมนูนจะแสดงเมื่อสมาชิกล็อกอิน ี้ เทานั้น การสรางชุดเมนูเฉพาะสมาชิกทําไดโดยเลือกคําสั่ง Menu, Menu Manager แลวคลิก ปุม New สรางชุดเมนูใหม เชน User Menu เมื่อสรางชุดเมนูใหมแลว จะตองเปดใหแสดงผลดวยโดยคลิกเมนูคําสั่ง Extension, Module Manager แลวคลิก Enabled แตเนื่องจากชุดเมนูนจะอนุญาตเฉพาะสมาชิกเทานั้น จึงตองปรับคา Access Level ดวย ้ี โดยคลิกที่ Module User Menu เพื่อเขาไปปรับคา Access Level เปน Registered รวมทั้งปรับ ตําแหนง (Position) และ Order ใหเหมาะสมดวย
  • 147.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 147 - เพิ่มรายการคําสั่งใน User Menu เชน รายการคําสั่งสําหรับปรับปรุงขอมูลของสมาชิก โดยคลิกเลือกคําสั่ง Menu, User Menu แลวคลิกปุม New เลือกคําสั่ง User บุญเลิศ อรุณพิบูลย
  • 148.
    148 เว็บไซตงาย รวดเร็วดวย Joomla เลือกคําสั่งยอยเปน User Form Layout จากนั้นระบุชื่อรายการเมนู เชน Update Profile เมื่อคลิกปุม Save จากนันกลับไปทํางานในหนา Front-end แลว Login เขาสูระบบจะ ้ ปรากฏชุดเมนูใหม และรายการเมนูดังนี้ เพียงเทานี้ก็ไดเมนูและคําสั่งสําหรับสมาชิกพรอมใชงานแลว แตยงไมครบนะครับ ั ควรสรางรายการเมนูอื่นๆ ดวย เชน แนะนําเว็บไซต หรือสงบทความเขาสูเว็บเพือกําหนดให ่ เปนเว็บที่สมาชิกมีสวนรวมในการสรางสรรคอยางแทจริง  คําสั่งแนะนําเว็บไซตสําหรับสมาชิก เลือกไดดังนี้
  • 149.
    ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 149 - คําสั่งสงบทความเขาสูระบบ คือ บุญเลิศ อรุณพิบูลย
  • 150.
    คํานํา การพัฒนาเว็บไซตในปจจุบนไดมีการพัฒนาไปอยางมาก โดยเฉพาะเมื่อมีการสราง ั เครื่องมือชวยจัดการเนื้อหาของเว็บไซตทเี่ รียกวา CMS: Content Management System สงผล ใหการออกแบบพัฒนาเว็บเปนเรื่องงาย สะดวกและรวดเร็วมากขึ้น Joomla นับเปน CMS ที่มีความสามารถสูงมากโปรแกรมหนึ่ง มีจุดเดนในการจัดการ เนื้อหาบทความที่หลากหลายรูปแบบ รองรับสื่อหลายฟอรแมต อีกทั้งมีหนาตาของเว็บที่ สวยงาม พรอมดวยโปรแกรมเสริมใหเลือกตามความตองการของหนวยงาน โดยเฉพาะ จุดสําคัญคือ เปนซอฟตแวรในกลุมเปดเผยตนฉบับ (Source Code) หรือ Open Source Software ทําใหไมมีคาใชจายในการจัดหาซอฟตแวร อีกทั้งสามารถปรับประยุกตแกไขใหเหมาะสมกับ แตละหนวยงานได ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี เห็นความสําคัญของการจัดสื่อและ คูมือเผยแพรการใชงาน Joomla จึงไดจัดทําคูมอฉบับนี้ขึ้นมาเพื่อเปนเอกสารตั้งตนสําหรับ ื ผูสนใจทุกทาน ทั้งนี้เนื้อหาและเทคนิคเพิ่มเติมทานที่สนใจสามารถติดตามไดจากเว็บไซต http://stks.or.th/elearning หากคูมอนี้มีขอผิดพลาดประการใด ผูเขียนขออภัยไว ณ ที่น้และขอขอบคุณสําหรับ ื  ี คําแนะนําจากทุกทานเพื่อปรับปรุงในโอกาสตอไป บุญเลิศ อรุณพิบูลย 16 เมษายน 2551
  • 151.
    สารบัญ เทคโนโลยีเว็บเพจ .............................................................................................................................................1 องคประกอบของเทคโนโลยีเว็บ .......................................................................................................................3 เทคโนโลยีอนเทอรเน็ต...............................................................................................................................3 ิ เอกสารเว็บ ..................................................................................................................................................3 เว็บเบราวเซอร (Web Browser)..................................................................................................................4 Markup Language ......................................................................................................................................7 HTML ...................................................................................................................................................7 SGML....................................................................................................................................................8 XML......................................................................................................................................................8 Style Sheet Technology .............................................................................................................................9 CSS........................................................................................................................................................9 XSL .......................................................................................................................................................9 รูปภาพ ......................................................................................................................................................10 ไฟลสกุล GIF (Graphics Interlace File)..............................................................................................10 ไฟลสกุล JPG (Joint Photographer’s Experts Group)........................................................................10 ไฟลสกุล PNG (Portable Network Graphics).....................................................................................11 การออกแบบเว็บเพจ........................................................................................................................................12 หลักการพัฒนาเว็บเพจ.....................................................................................................................................13 ขั้นเตรียมการ ............................................................................................................................................14 คําถามเพื่อชวยในการวางแผนเว็บไซต ...............................................................................................14 กําหนดโครงรางของเว็บ ...........................................................................................................................14 กําหนดโฟลเดอร (Folder) ที่ใชเก็บเอกสารเว็บ .......................................................................................16 สรางภาพหรือจัดหาภาพที่เกี่ยวของกับเนื้อหา .........................................................................................17 สรางเอกสารประกอบ...............................................................................................................................17 เลือกเครืองแมขาย WWW และระบบการสรางงาน .................................................................................17 สรางเอกสารเว็บ .......................................................................................................................................18 ตรวจสอบเอกสารเว็บ ...............................................................................................................................19 สงขอมูลขึ้นเครื่องบริการเว็บ ...................................................................................................................19 เครื่องมือพัฒนาเว็บ ..........................................................................................................................................21 Text Editor................................................................................................................................................21 HTML Editor ......................................................................................................................................22 HTML Generator ................................................................................................................................22 โปรแกรมบริหารจัดการเนื้อหาเว็บ (CMS).........................................................................................23 CMS เครื่องมือเด็ดพัฒนาเว็บไซต ...................................................................................................................24
  • 152.
    Joomla: CMS เด็ดนาใช...................................................................................................................................26 ติดตั้งJoomla บนพีซีจําลอง............................................................................................................................28 ติดตั้ง Joomla...................................................................................................................................................33 สํารวจเว็บใหม .................................................................................................................................................38 เขาสูระบบผาน Front-end ...............................................................................................................................41 แกไขขอมูลสมาชิก ..........................................................................................................................................42 แกไขบทความ .................................................................................................................................................43 แบงตอนเนื้อหาดวย Read more…..................................................................................................................45 สารบัญเนื้อหา..................................................................................................................................................47 แทรกรูปภาพ ...................................................................................................................................................48 ไฟลภาพ ...................................................................................................................................................51 ควบคุมการแสดงผลบทความ..........................................................................................................................52 สืบคนบทความไดงายๆ ดวย Metadata...........................................................................................................53 สรางบทความใหม...........................................................................................................................................54 ปรับแตงเว็บไซตผาน Back-end......................................................................................................................56 ขอมูลประกอบการสืบคนของเว็บ...................................................................................................................58 เขาถึงเนื้อหาไดงาย..........................................................................................................................................60 การปรับเปลี่ยนโฉมหนาของเว็บไซต .............................................................................................................61 จัดการบทความในเว็บไซต..............................................................................................................................64 การแกไขเนื้อหา .......................................................................................................................................66 เพิ่มประสิทธิภาพการสืบคนใหกับบทความ............................................................................................70 ตกแตงดวยรูปภาพ...........................................................................................................................................71 ลบภาพ......................................................................................................................................................72 ทํางานกับสื่อรูปแบบตางๆ ..............................................................................................................................73 ทํางานกับเมนู ..................................................................................................................................................74 ปรับแกไขเมนู...........................................................................................................................................74 Components ....................................................................................................................................................77 แบบสอบถามออนไลน (Poll) ..................................................................................................................77 ปายโฆษณา (Banner)...............................................................................................................................79 ดึงขาวมาแสดงผลอัตโนมัติ ......................................................................................................................81 ดาวนโหลด/ติดตั้ง Components...............................................................................................................82 พัฒนาเว็บตามตองการ ....................................................................................................................................83 ปรับเว็บไซตในโหมด Backend ......................................................................................................................89 ปรับคาระบบเว็บไซต (Global Configuration).........................................................................................89 วิเคราะหเนื้อหาเว็บไซต ..................................................................................................................................94 สรางเนื้อหา “แนะนําเว็บไซต” ........................................................................................................................96
  • 153.
    สรางเนื้อหา “ทีมพัฒนา” ...............................................................................................................................101 เนื้อหาหมวดคลังความรู................................................................................................................................108 แบบสอบถามออนไลน (Poll)........................................................................................................................115 Web Resources..............................................................................................................................................117 ปายโฆษณา (Banner) ....................................................................................................................................121 คลังภาพออนไลน ..........................................................................................................................................125 คลังเอกสาร คลังดาวนโหลด .........................................................................................................................129 Upload เอกสารดวย Media Manager .....................................................................................................131 สรางคลังดาวนโหลดเอกสาร .................................................................................................................131 ขาวประกาศอัตโนมัติแบบ RSS Feed ...........................................................................................................135 ติดตอทีมพัฒนา ผูดูแลเว็บ .............................................................................................................................138 เพิ่มชุดเมนู .....................................................................................................................................................140 สรางบัญชีสมาชิก ..........................................................................................................................................142 เมนูเฉพาะสมาชิก ..........................................................................................................................................146
  • 154.
    เว็บไซตงาย รวดเร็วดวย Joomla(version 1.5) บุญเลิศ อรุณพิบูลย ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี (http://stks.or.th) สํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ