Joomla

14,711 views
14,681 views

Published on

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

Published in: Education, Technology
2 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total views
14,711
On SlideShare
0
From Embeds
0
Number of Embeds
5,587
Actions
Shares
0
Downloads
740
Comments
2
Likes
6
Embeds 0
No embeds

No notes for slide

Joomla

  1. 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. 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. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี -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. 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. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี -5- รูปแสดงเบราวเซอรคาย Microsoft รูปแสดงเบราวเซอรคาย Mozilla เนื่องจากเว็บเบราวเซอรมีการพัฒนาออกมาจากหลากหลายบริษัท แตละบริษัทพัฒนา ฟงกชนการแสดงผลเอกสารเว็บที่แตกตางกันออกไป การพัฒนาเว็บไซตจึงจําเปนตองศึกษาถึง ั คุณสมบัติของเว็บเบราวเซอรแตละโปรแกรม ทั้งนี้ไดสรุปคุณสมบัติในการแสดงผลเอกสาร เว็บ ดังตาราง (ขอมูลจาก http://en.wikipedia.org/wiki/Comparison_of_web_browsers, 14 มิถุนายน 2551) บุญเลิศ อรุณพิบูลย
  6. 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. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี -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. 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. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี -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. 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. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 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. 12 เว็บไซตงาย รวดเร็วดวย Joomla การออกแบบเว็บเพจ การออกแบบและพัฒนาเว็บเพจ สามารถทําไดหลายระบบ ขึ้นอยูกบลักษณะของ ั ขอมูล ความชอบของผูพัฒนา ตลอดจนกลุมเปาหมายที่ตองการนําเสนอ เชน หาก กลุมเปาหมายเปนเด็กวัยรุน และนําเสนอขอมูลเกี่ยวกับความบันเทิง อาจจะออกแบบใหมี  ทิศทางการไหลของหนาเว็บที่หลากหลายใชลูกเลนไดมากกวาเว็บทีนําเสนอใหกับผูใหญ หรือ ่ เว็บดานวิชาการ ทั้งนี้การออกแบบเว็บเพจ สามารถแบงไดสามลักษณะ คือ • แบบลําดับขั้น (Hierarchy) เปนการจัดแสดงหนาเว็บเรียงตามลําดับกิ่งกานแตก แขนงตอเนื่องไปเหมือนตนไมกลับหัว เหมาะสําหรับการนําเสนอขอมูลที่มี การแบงเปนหมวดหมูทไมมากนัก และมีขอมูลยอยไมลกมาก เชนเว็บไซตแนะนํา ี่  ึ ประวัติสวนตัว ที่มีขอมูล 4 - 5 หนาเปนตน • แบบเชิงเสน (Linear) เปนการจัดแสดงหนาเว็บเรียงตอเนื่องไปในทิศทางเดียว เหมาะสําหรับการนําเสนอขอมูลที่เปนรูปภาพ เชนเว็บไซตนําเสนอสไลดจาก Microsoft PowerPoint • แบบผสม (Combination) เปนการจัดหนาเว็บชนิดผสมระหวางแบบลําดับขั้น และ แบบเชิงเสน มักจะเปนแบบที่นิยมใชกันอยางแพรหลายในปจจุบน เนืองจาก ั ่ สามารถควบคุมการนําเสนอและการเรียกดูไดสะดวก และรวดเร็ว
  13. 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. 14 เว็บไซตงาย รวดเร็วดวย Joomla ขั้นเตรียมการ การพัฒนาเว็บไซต ควรกําหนดวัตถุประสงค เปาหมายการจัดทํา ศึกษาจุดเดนจุดดอย ของเทคโนโลยีที่จะนํามาใชงาน เพื่อใหการพัฒนาเกิดผลสัมฤทธิ์สูงสุด คําถามเพื่อชวยในการวางแผนเว็บไซต • ชื่อโครงการ/เว็บไซต • กลุมเปาหมาย • วัตถุประสงค/เปาหมาย • ขอมูลที่ตองการนําเสนอตอกลุมเปาหมาย • ขอมูลใดที่พรอมสําหรับนําเสนอ • ขอมูลอื่นๆ ประกอบเว็บไซต • จํานวนหนาเว็บที่ตองการพัฒนา • หนวยงาน/กลุม/ทีมงานพัฒนาเว็บไซต  • หัวหนาโครงการ • ผูบริหารระบบ • ความถี่ในการปรับปรุงเว็บไซต • การตรวจสอบขอมูลยอนกลับจากกลุมเปาหมาย • ผูรับผิดชอบตรวจสอบขอมูลยอนกลับจากกลุมเปาหมาย/ตอบคําถาม • คียเวิรดสําหรับเว็บไซต • หมวดของเว็บไซต • การประชาสัมพันธเว็บไซต • ระบบคอมพิวเตอร เครือขายที่ตองการ • เทคโนโลยีที่ตองการ • Domain name สําหรับเว็บไซต กําหนดโครงรางของเว็บ การกําหนดโครงรางของเว็บ เปนขั้นตอนสําคัญขั้นแรกก็วาได เพราะเอกสารเว็บที่ สรางจะเพิ่มจํานวนเรื่อยๆ และมีจุดเชื่อม (Link) จํานวนมาก หากไมมการวางแผนไวกอน จะ ี ทําใหการปรับปรุง แกไขเกิดปญหาไดงาย ปญหาที่ประสบแนนอนคือ ลืมวาแฟมเอกสารที่เคย สรางไวแลว มีชื่ออะไรบาง ซึ่งจะสงผลใหการทําจุดเชื่อมเกิดปญหาตามไปดวย เพราะแฟม เหลานี้อาจจะทิ้งชวงเวลานานพอสมควร จึงจะปรับปรุงอีกครั้ง วิธีการที่ดีที่สดเพื่อปองกัน ุ
  15. 15. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 15 - ปญหาดังกลาว ควรวางแผนออกแบบเอกสารเว็บบนกระดาษ และกําหนดชื่อแฟมเอกสารเว็บ แตละแฟม จากขั้นตอนนีจะทําใหผูพฒนาสามารถมองเห็นภาพการไหล (Data Flow) ของ ้ ั เอกสารเว็บไดชัดเจน และพิจารณาตอไดวาเอกสารเว็บแตละแฟมมีความสัมพันธกบเอกสาร ั อื่นๆ อยางไร และสัมพันธกบแฟมเอกสารใดบาง ั การกําหนดชื่อแฟมเอกสารเว็บ มีขอกําหนดทีแตกตางไปจากการกําหนดชื่อแฟม ่ เอกสารปกติทวไป คือ ั่ ชื่อแฟมและนามสกุล จะถูกควบคุมจาก Web Administer ดังนั้นผูพฒนาที่ไมใช ั Web Administer จะตองสอบถามกฎการตั้งชื่อโดยละเอียด โดยปกติ มีหลักคราวๆ ดังนี้ - ควรใชตัวอักษร a – z หรือตัวเลข 0 – 9 หรือผสมกัน - ตัวอักษร a – z ควรเปนตัวพิมพเล็ก - หามใชเครื่องหมายอื่นใดรวมทั้งชองวาง ยกเวน Dash (ขีดกลาง) นอกจากนี้ยังจะตองพิจารณาถึงลักษณะหนาเว็บ, ลักษณะของสีพื้น, สีอักษรและสีของ จุดเชื่อม (Links) ดวย โดยสามารถรางหนาเว็บคราวๆ เพื่อใหเห็นภาพโดยรวมกอนสรางงาน จริง รวมทั้งการใชสีของหนาเว็บ ควรใชสีที่อานงาย สบายตา และมีลักษณะรวมกันในทุกๆ หนาเว็บ ไมควรเปลี่ยนสีพนใหฉดฉาด รวมทั้งศึกษาหนาเว็บไซตที่มการพัฒนาในเครือขายเพื่อ ื้ ู ี เปนแนวทางในการออกแบบ รูปแสดงภาพรางของหนาเว็บ บุญเลิศ อรุณพิบูลย
  16. 16. 16 เว็บไซตงาย รวดเร็วดวย Joomla กําหนดโฟลเดอร (Folder) ที่ใชเก็บเอกสารเว็บ การกําหนดโฟลเดอรกอนที่จะสรางชุดเอกสารเว็บเพจ เปนลําดับขั้นตอนที่ควรปฏิบัติ ดวยทุกครั้ง เพื่อใหเอกสารเว็บแตละชุดมีระบบการจัดเก็บที่เปนระบบ สามารถคนหา และ เรียกใชงานไดสะดวก ในการสรางชุดเอกสารเว็บแตละชุด จะมีไฟลตางๆ จํานวนมาก ทั้งไฟล เอกสาร HTML, ไฟลภาพกราฟก, ไฟลเสียง, ไฟลวดิทัศน และอื่นๆ ทีเ่ กี่ยวของ ไฟลทั้งหมดนี้ ี ควรจัดเก็บไวในที่ที่เดียวกัน อาจจะสรางโฟลเดอรยอยเพื่อแยกกลุมไฟลได แตจะตองสราง ภายใตโฟลเดอรหลักที่สรางไวกอนแลว ไมควรแยกไวคนละที่ เพราะจะทําใหการจัดการเว็บมี ปญหายุงยากได (การตั้งชื่อโฟลเดอรใชหลักการเดียวกับชื่อไฟล) การสรางโฟลเดอร เลือกไดรฟและโฟลเดอรหลักที่ตองการสรางโฟลเดอรยอย  เลือกเมนูคําสั่ง File, New, Folder ปรากฏไอคอนโฟลเดอร ชื่อ New Folder พิมพชื่อโฟลเดอรใหม หากไมสามารถพิมพได ใหกดปุมฟงกชัน @ กอน เมื่อพิมพชื่อโฟลเดอรเสร็จแลว ใหกดปุม E สามารถสรางโฟลเดอรยอยๆ ภายใตโฟลเดอรนี้ได
  17. 17. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 17 - สรางภาพหรือจัดหาภาพที่เกี่ยวของกับเนื้อหา เอกสารเว็บตองเกี่ยวของกับรูปภาพโดยตรง ดังนั้นควรสรางภาพ หรือจัดหาภาพ แลว คัดลอกมาไวในโฟลเดอรท่ไดจัดเตรียมไว เพื่อใหสะดวกในการเรียกใชงาน และการบริหาร ี เว็บไซตในอนาคตการจัดเก็บไฟลไวในโฟลเดอรที่เตรียมไว ยังรวมถึงไฟลตางๆ ที่จะนํามาใช ประกอบการสรางเว็บ เชนไฟลเอกสารจากเวิรด กระดาษคํานวณ นําเสนอผลงานตางๆ จะตอง ดําเนินการลักษณะเดียวกับไฟลภาพเชนกัน ทั้งนี้ชื่อไฟลตางๆ ที่นํามาใชประกอบการสรางเว็บ  ก็ตองตั้งโดยยึดหลักเดียวกับการตั้งชื่อไฟลเอกสารเว็บ ไฟลภาพที่ไมสามารถนํามาสรางเอกสารเว็บ เพราะมีสวนขยายเปน .bmp, .tif สรางเอกสารประกอบ นอกจากภาพแลว อาจจะมีไฟลประกอบอืนๆ เชน Word, PowerPoint, PDF Document ่ ก็จะตองเตรียมไวในโฟลเดอรที่สรางไวใหพรอม โดยอาจจะสรางเปนโฟลเดอรเฉพาะของแต ละไฟลฟอรแมต ไฟลเอกสารตางๆ ที่ผิดพลาด เพราะชื่อไฟลเปนภาษาไทย หรือมีชองวาง เลือกเครืองแมขาย WWW และระบบการสรางงาน การสรางเว็บไซตในปจจุบน ยอมหนีไมพนความตองการดานโปรแกรมมิ่ง เชน ั  ตองการตัวนับจํานวนการเขาชมเว็บไซต (Counter) ตองการกระดานขาว (Web board) ตองการ สมุดเยี่ยม (Guestbook) หรือฟงกชนสูงๆ เชน ระบบสมาชิก แตนักพัฒนาเว็บไซตมักจะลืมไป ั วาระบบโปรแกรมบนเว็บ เปนระบบที่สัมพันธกับระบบปฏิบัติการ ดังนั้นกอนสรางเว็บไซต ควรพิจารณาใหแนนอนวาเว็บที่พัฒนา จะนําไปเก็บไวบนเครื่องแมขายที่ใชระบบปฏิบัติการใด เพราะหากเลือกผิดพลาด ก็จะทําใหเว็บนั้นมีปญหาอีกมากมาย บุญเลิศ อรุณพิบูลย
  18. 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. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 19 - ตรวจสอบเอกสารเว็บ ขณะที่สรางเอกสารเว็บ ควรตรวจสอบผลผานโปรแกรมแสดงผลเบราวเซอรหลายคาย หลายรุน (หากทําได) เพราะโปรแกรมเบราวเซอรแตละคาย แตละรุน จะรูจก หรือใหผลลัพธ  ั จากคําสั่ง HTML ไมเหมือนกัน จะไดทราบขอบกพรอง ขอผิดพลาด และสามารถแกไขไดทัน กอนที่จะสงขึ้นไปแสดงผลจริงในระบบอินเทอรเน็ต ขอที่ควรคํานึงถึงในการทําเว็บเชิงพาณิชยกคือ ภาษา HTML เปนภาษาที่ยังไมตาย ยังมี ็ การพัฒนาชุดคําสั่งใหมๆ อยูเรื่อยๆ ดังนั้นอยาพยายามไลตามเทคโนโลยีใหมๆ เหลานี้ ควร พัฒนาเว็บเพจที่สามารถเรียกดูไดจากเบราวเซอรหลายๆ รุน หลายคาย ดีกวายึดคายใด คายหนึ่ง หรือรุนใด รุนหนึ่ง มิฉะนั้นอาจจะทําใหพลาดจากลูกคาบางกลุมไปได ขอมูลจาก http://truehits.net/ (วันที่ 14 มิถุนายน 2551) สงขอมูลขึ้นเครื่องบริการเว็บ เมื่อไดพัฒนาเอกสารเว็บ และตรวจสอบผลไดตามที่ตองการแลว ก็สามารถโอนขอมูล นั้นๆ ไปยังเครื่องบริการเว็บได โดยใชโปรแกรมกลุมถายโอนขอมูล (FTP Software) เชน WinFTP, CuteFTP รวมทั้งฟงกชัน FTP ของ Macromedia Dreamweaver เปนตน กอนโอนขอมูล จะตองขอสิทธิ์และพื้นที่จากผูดูแลระบบกอนเสมอ และตลอดจนตอง สอบถามขอมูลที่จําเปนในการโอนขอมูล เชนชื่อบัญชีของผูมสิทธิ์ (Login Name / Account ี Name), รหัสผานของบัญชี (Password) เปนตน บุญเลิศ อรุณพิบูลย
  20. 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. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 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. 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. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 23 - จอภาพโปรแกรม Yahoo Site Builder โปรแกรมบริหารจัดการเนื้อหาเว็บ (CMS) ปจจุบันมีการพัฒนาซอฟตแวรทําหนาที่บริหารจัดการเนื้อหาเว็บ (CMS: Content Mnagement System) ที่ประกอบดวยฟงกชันการทํางานตางๆ เชน การจัดการสมาชิก การ จัดการหมวดเนื้อหา การจัดทําแบบสํารวจพรอมใชงานอยางไรก็ตามผูใชจะตองมีความรูใน ดานระบบปฏิบัติการในระดับที่สูงมาก รวมทั้งตองมีเครื่องแมขายเว็บพรอมใชงาน โปรแกรม ในกลุมนี้ไดแก PHPNuke, PostNuke, Joomla, Mambo, Drupal รูปแสดงสวนควบคุมการจัดการเนื้อหาลักษณะตางๆ ของโปรแกรม PHPNuke บุญเลิศ อรุณพิบูลย
  24. 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. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 25 - รูปแสดงผลการเปรียบเทียบ CMS จากเว็บไซต cmsmatrix.org บุญเลิศ อรุณพิบูลย
  26. 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. ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 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. 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 เมื่อดับเบิลคลิกจะปรากฏสวน ติดตั้งโปรแกรม ดังนี้

×