Web Technology. Thanupong Srikalsin

Transcription

1 Web Technology Thanupong Srikalsin

2 เทคโนโลย เว บเพจ การน าเสนอข อม ลในระบบ WWW (World Wide Web) พ ฒนาข นมาในช วง ปลายป 1989 โดยท ม เบอร เนอร ล น กว ศวกรรมซอฟต แวร จาก ห องปฏ บ ต การ ทางจ ลภาคฟ ส กส แห งย โรป (EuropeanParticle Physics Labs) หร อท ร จ กก นใน นาม CERN (Conseil European pour la Recherche Nucleaire) ประเทศ สว ตเซอร แลนด และได ม การพ ฒนาภาษา ท ใช สน บสน น การเผยแพร เอกสาร ของ น กว จ ย หร อเอกสารเว บ (Web Document) จากเคร องแม ข าย (Server) ไปย ง สถานท ต างๆ ในระบบ WWW เร ยกว า ภาษา HTML (HyperText Markup Language)

3 เทคโนโลย เว บเพจ การเผยแพร ข อม ลทางอ นเทอร เน ต ผ านส อประเภทเว บเพจ (WebPage) เป นท น ยม ก นอย างส งในป จจ บ น ไม เฉพาะข อม ลโฆษณาส นค า ย งรวมไปถ งข อม ลทาง การแพทย การเร ยน งานว จ ยต างๆ เพราะเข าถ งกล มผ สนใจได ท วโลก ตลอดจน ข อม ลท น าเสนอออกไป สามารถเผยแพร ได ท งข อม ลต วอ กษร ข อม ลภาพ ข อม ล เส ยง และภาพเคล อนไหว ม ล กเล นและ เทคน คการน าเสนอท หลากหลาย อ นส งผล ให ระบบ WWW เต บโตเป นหน ง ในร ปแบบบร การ ท ได ร บความน ยมส งส ด ของ ระบบอ นเทอร เน ต

4 เทคโนโลย เว บเพจ ล กษณะเด นของการน าเสนอข อม ลเว บเพจ ค อ สามารถเช อมโยงข อม ล ไปย งจ ด อ นๆ บนหน าเว บได ตลอดจนสามารถ เช อมโยงไปย งเว บอ นๆ ในระบบเคร อข าย อ นเป นท มาของค าว า HyperText หร อข อความท ม ความสามารถมากกว า ข อความ ปกต น นเอง จ งม ล กษณะคล ายก บว าผ อ านเอกสารเว บ สามารถโต ตอบก บเอกสาร น นๆ ด วยตนเอง ตลอดเวลาท ม การใช งานน นเอง

5 ภาษา HTML HTML หร อ HyperText Markup Language เป นภาษาคอมพ วเตอร ร ปแบบหน ง ท ม ล กษณะเป นภาษาในเช ง การบรรยายเอกสารไฮเปอร ม เด ย (Hypermedia Document Description Language) เพ อน าเสนอเอกสารน น เผยแพร ในระบบ เคร อข ายใยแมงม ม WWW (World Wide Web) ม โครงสร างการเข ยน ท อาศ ยต ว ก าก บ เร ยกว า แท ก (Tag) ควบค มการแสดงผลของข อความ, ร ปภาพ หร อว ตถ อ นๆ ผ านโปรแกรมเบราเซอร (Browser)

6 Tag Tag เป นล กษณะเฉพาะของภาษา HTML ใช ในการระบ ร ปแบบค าส ง หร อการลง รห สค าส ง HTML ภายในเคร องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยท Tag HTML แบ งได 2 ล กษณะ ค อ Tag เด ยว เป น Tag ท ไม ต องม การป ดรห ส เช น , <HR> เป นต น Tag เป ด/ป ด เป น Tag ท ประกอบด วย Tag เป ด และ Tag ป ด โดย Tag ป ด จะม เคร องหมาย slash (/) น าหน าค าส งใน Tag น นๆ เช น , เป นต น

7 Attributes Attributes เป นส วนขยายความสามารถของ Tag จะต องใส ภายในเคร องหมาย < > ในส วน Tag เป ดเท าน น Tag ค าส ง HTML แต ละค าส ง จะม Attribute แตกต างก นไป และม จ านวนไม เท าก น การระบ Attribute มากกว า 1 Attribute ให ใช ช องว างเป นต วค น เช น Tag ควบค มเก ยวก บร ปภาพ <IMG> ม Attributes ด งน <IMG SRC= filename WIDTH= n HEIGHT= n ALT= text BORDER= n > โดย SRC เป น Attribute ควบค มช อไฟล ภาพท จะน ามาแสดงผล WIDTH เป น Attribute ควบค มความกว างของภาพ HEIGHT เป น Attribute ควบค มความส งของภาพ ALT เป น Attribute ควบค มค าอธ บายภาพ BORDER เป น Attribute ควบค มขนาดของเส นขอบของภาพ ไฟล เอกสาร HTML เป นไฟล ข อความร ปแบบหน ง (Text File) ท เก บช ดค าส ง HTML ด งน นการ สร างเอกสาร HTML จ งสามารถใช Text Editor ต วใดก ได เช น NotePad หร อ WordPadThai

8 Web Browser เว บเพจท สร างข นมาเร ยบร อยแล ว จะต องอาศ ยโปรแกรมแสดงผลบนจอภาพ เร ยกว า Web Browser ป จจ บ นม ผ ผล ตโปรแกรมเบราเซอร ออกมาเผยแพร และ จ าหน ายหลายราย อาท Netscape Navigator, Netscape Communicator ของบร ษ ท Netscape หร อ Microsoft Explorer ของบร ษ ทไมโครซอฟต ตลอดจน Mosaic, Lynx, MacWeb, Cello, Opera

9 ท าความร จ กก บเอกสารเว บ เอกสารเว บม องค ประกอบคล ายคล งก บเอกสารงานพ มพ ท วไป ค อประกอบด วยหน าเว บ มากกว า 1 หน าโดยม หน าแรกเป นหน าปก แต ม การเร ยกช อแตกต างจากเอกสารงานพ มพ ท วไป ด งน ช ดเอกสารเว บ (Web Presentation) ช ดของข อม ลท ต องน าเสนอบนระบบอ นเทอร เน ต ประกอบด วยเว บเพจ (Web Page) ต งแต 1 หน าข นไป เว บเพจ (Web Pages หร อ Web Documents) เอกสารท น าเสนอผลงานบนระบบอ นเทอร เน ต โดยจะถ กเร ยกและจ ดร ปแบบการ น าเสนอด วยโปรแกรมเบราเซอร (Browser) Home Page หน าแรกของเอกสารเว บ

10 โปรแกรมสร างเอกสารเว บ การพ ฒนาเว บเพจ หร อเอกสารเว บน บเป นศาสตร หน งท น กคอมพ วเตอร และ ผ สนใจท วไปสนใจท จะศ กษา เพ อสร างสรรค ผลงานช นงานในดวงใจ ผ าน เคร อข ายอ นเทอร เน ต เผยแพร ส สายตามวลชนอย างกว างไกล แต เด มการพ ฒนาเว บ เพจจะอาศ ยโปรแกรมประเภท Text Editor โดยผ พ ฒนาจะต องศ กษาภาษา HTML (HyperText Markup Language) ซ งสร างภาระให ก บผ สนใจในกล มท ไม ได ศ กษา ด านไอท มาโดยตรง รวมท งป จจ บ นเทคโนโลย เว บเพจได เปล ยนร ปแบบ ม การน า ภาษาคอมพ วเตอร เช น VBScript, JavaScript, Java ฯลฯ มาผสมผสานเพ อเพ ม ประส ทธ ภาพของเว บเพจ และฟ งก ช นการท างานให ตรงก บความต องการมากข น กว าเด ม ด งน นเคร องม อพ ฒนาเว บเพจ จ งเป นห วข อหล กของโปรแกรมเมอร สาขา น ท จะพ ฒนาออกมาเผยแพร ให ก บผ สนใจเพ อเล อกใช งาน

11 เคร องม อพ ฒนาเว บเพจ ท ม ใช งานในป จจ บ น สามารถแบ งได ด งน Simple Text Editors HTML Enhanced Text Editors WYSIWYG HTML Generator & Website Managers Save AS HTML Capabilities Browser-based HTML Editors Web Server/Developer Platforms

12 การพ ฒนาเว บเพจด วยการลงรห ส HTML ด วยโปรแกรม Simple Text Editors เคร องม อพ ฒนาเว บล กษณะน น บเป นเคร องม อพ นฐานท ส ด โดยจะอาศ ยโปรแกรม Text Editor ต างๆ ท ม กต ดต งมาพร อมก บระบบปฏ บ ต การ (Operating System; OS) เช น QEdit, Editor, NotePad, WordPad, vi editor, pico editor, SimpleText เป นเคร องม อลง รห สค าส ง HTML หร อภาษาอ นๆ ตามแต ล กษณะของเว บท ต องการน าเสนอ โดยผ พ ฒนา จะต องม ความร เก ยวก บการใช งานโปรแกรมเหล าน ความร เก ยวก บภาษาพ ฒนาเว บต างๆ รวมท งความค ดจ นตนาการ ท ตรงก บแผนการพ ฒนาท ก าหนดไว ก อนหน า เน องจาก ผ พ ฒนาจะไม สามารถเห นผลล พธ ของเว บได ท นท อย างไรก ตามว ธ น ก ไม เหมาะส าหร บ ผ พ ฒนาในระด บต น เพราะต องศ กษาค าส ง HTML และใช เวลาในการพ ฒนาพอสมควร ในแต ละหน าเว บ ตลอดจนไม เห นผลล พธ จากการ ป อนค าส งท นท ต องเร ยกผ านโปรแกรมเบราเซอร

13 การพ ฒนาเว บเพจด วยการลงรห ส HTML ด วยโปรแกรม HTML Enhanced Text Editors จากจ ดอ อนของโปรแกรมพ ฒนาเว บแบบ Simple Text Editor จ งม การพ ฒนา โปรแกรม Text Editor ให ม ความสามารถรองร บภาษา HTML เพ อให สามารถ พ ฒนาเอกสารเว บได ง าย สะดวก และรวดเร ว โดยโปรแกรมเหล าน จะม การต ดต ง ช ดค าส งภาษา HTML และป มเคร องม อภาษา HTML เช น ป มเคร องม อต วอ กษร แบบหนา จะแทนค าส ง เป นต น โดยเม อผ พ ฒนาคล กท ป มเคร องม อ ใดๆ โปรแกรมจะน าค าส ง HTML ท ตรงก นมาแสดงผลในหน าเอกสาร ท าให ผ พ ฒนาไม ต องเส ยเวลาพ มพ ค าส งด วยตนเอง รวมท งไม ต องจดจ าร ปแบบของ ค าส งแต ละค าส งท ม หลากหลายอ กด วย โปรแกรมในกล มน ได แก EditPlus, UltraEdit

14 การพ ฒนาเว บเพจด วยโปรแกรมสร างงานอ ตโนม ต หร อ HTML Generator & Website Manager HTML Generator เป นโปรแกรมร นใหม ท ช วยให การพ ฒนาเอกสารเว บ กระท าได สะดวก และรวดเร ว เพราะการป อนข อม ลในโปรแกรมเหล าน จะกระท าคล ายก บการ ป อนข อม ลใน Microsoft Word ม ป มค าส งเช นเด ยวก น ตลอดจนผ ใช สามารถเห นผลจาก การใช ค าส งได ท นท ซ งเร ยกว าการท างานแบบ WYSIWYG (What You See Is What You Get) หล งจากน นโปรแกรม จะท าการแปลงเอกสารน นเป นเอกสาร HTML ให โดย อ ตโนม ต โดยท ผ ใช ไม ต องย งยากก บศ กษาช ดค าส ง HTML ตลอดจนการลงรห ส HTML อย างไรก ตามโปรแกรมกล มน ก ม จ ดด อยท ว า ช ดค าส ง HTML ในโปรแกรมแต ละ โปรแกรมจะม จ าก ด และบางโปรแกรมย งไม สน บสน น การท างานก บภาษาไทย หร อ อาจจะต องท าการปร บปร งโปรแกรมก อน จ งจะใช งานภาษาไทยได ซ งสร างความย งยาก ให ก บผ ใช ได พอสมควร ต วอย างโปรแกรมในกล มน เช น FrontPage, Macromedia Dreamweaver

15 การพ ฒนาเว บเพจด วย Browser-Based HTML Editor โดยปกต โปรแกรมสร างเอกสารเว บม กจะท างานบนเคร องคอมพ วเตอร ส วนบ คคล ซ งเป นภาระของผ พ ฒนาเอกสารเว บ ท จะต องจ ดหาซอฟต แวร หร อเคร องม อพ ฒนา เอกสารเว บ ป จจ บ นม หน วยงานหลายหน วยงาน ท พ ฒนาโปรแกรมสร างเอกสาร เว บให บร การผ านเว บไซต ซ งผ สร างสามารถพ มพ รห สค าส ง HTML จากหน า เว บไซต แล วโอนกล บไปย งเคร องแม ข าย (Server) ได ท นท

16 การพ ฒนาเว บเพจด วยค าส ง Save as HTML... ช ดโปรแกรมจ ดการงานส าน กงาน เช น MS Office, PladaoOffice, OfficeTLE ได เตร ยมค าส ง Save as HTML ท ช วยให การสร างเอกสารเว บ ม ความสะดวกรวดเร ว โดยผ พ ฒนาเพ ยงแต น าเอกสารต างๆ ท สร าง มาบ นท กใหม ด วยค าส ง Save as HTML... โปรแกรมน นๆ จะท าการแปลงเอกสารปกต ให เป นเอกสารเว บ พร อม สร างไฟล ประกอบ เช น ไฟล ร ปภาพ ไฟล เส ยง ให โดยอ ตโนม ต ค าส งน ม กน ยมใช ก บการสร างเอกสารเว บจากโปรแกรมน าเสนอผลงาน เช น MS PowerPoint

17 การพ ฒนาเว บเพจด วยค าส ง Web Server/Developer Platforms การสร างเอกสารเว บล กษณะน จะอาศ ยซอฟต แวร ท ท าหน าท เป นท ง Web Editor และ Web Server โดยโปรแกรมจะท าการก าหนดให คอมพ วเตอร น นๆ เป นเคร อง แม ข ายโดยอ ตโนม ต ท าให สามารถสร างเอกสารเว บ แล วน าเสนอได ท นท โดยไม ต องย งยากหร อเส ยเวลาก บการโอนข อม ลไปย งเคร องแม ข ายระบบอ น ท งน เคร อง แม ข ายท ต ดต งระบบน จะม การควบค มช ดค าส ง HTML ตามร ปแบบของตนเอง ต วอย างซอฟต แวร ในกล มน ได แก Cold Fusion Suite, WebObjects, MS Back Office Server เป นต น

18 หล กการออกแบบเว บเพจ การออกแบบและพ ฒนาเว บเพจ สามารถท าได หลายระบบ ข นอย ก บล กษณะของ ข อม ล ความชอบของผ พ ฒนา ตลอดจนกล มเป าหมาย ท ต องการน าเสนอ เช น หาก กล มเป าหมายเป นเด กว ยร น และน าเสนอข อม ลเก ยวก บ ความบ นเท ง อาจจะ ออกแบบให ม ท ศทางการไหลของหน าเว บ ท หลากหลายใช ล กเล นได มากกว าเว บ ท น าเสนอ ให ก บผ ใหญ หร อเว บด านว ชาการ ท งน หล กการออกแบบเว บเพจ สามารถแบ งได สามล กษณะ ค อ

19 หล กการออกแบบเว บเพจ แบบล าด บข น (Hierarchy) เป นการจ ดแสดงหน าเว บ เร ยงตามล าด บก งก าน แตก แขนงต อเน องไปเหม อนต นไม กล บห ว

20 หล กการออกแบบเว บเพจ แบบเช งเส น (Linear) เป นการจ ดแสดงหน าเว บเร ยงต อเน องไปในท ศทางเด ยว

21 หล กการออกแบบเว บเพจ แบบผสม (Combination) เป นการจ ดหน าเว บชน ดผสมระหว างแบบล าด บข น และแบบเช งเส น

22 ข นตอนการพ ฒนาเว บเพจ ข นตอนการพ ฒนาเว บเพจ เพ อให ได ผลล พธ ท ถ กต อง และตรงก บความต องการของผ ใช สามารถจ าแนกเป นห วข อได ด งน วางแผนการพ ฒนาเว บเพจ ก าหนดไดเร กทรอร หร อโฟลเดอร (Directory/Folder) ท ใช เก บเอกสารเว บ สร างภาพ หร อจ ดหาภาพท เก ยวข องก บเน อหา แล วจ ดเก บไว ในไดเร กทรอร ท สร างไว สร างเอกสารเว บ โดยก าหนดช อไฟล เอกสารเว บ ตามข อก าหนดของผ ด แลระบบ เคร อข าย (Web System Administrator) และจ ดเก บไว ในไดเร กทรอร ท สร างไว ตรวจสอบผลเอกสารเว บผ านเบราเซอร ส งข อม ลข นเคร องแม ข าย (Server) และท าการตรวจสอบผลการเร ยกด จากเคร องแม ข าย

23 การวางแผนพ ฒนาเว บเพจ การวางแผนเพ อพ ฒนาเว บเพจ เป นข นตอนส าค ญข นตอนหน ง เพราะเอกสารเว บท สร าง จะเพ มจ านวนเร อยๆ และม จ ดเช อม (Link) จ านวนมาก หากไม ม การวางแผน ไว ก อน จะท าให การปร บปร ง แก ไขเก ดป ญหาได ง าย ป ญหาท ประสบแน นอนค อ ล มว าไฟล ท เคยสร างไว แล ว ม ช ออะไรบ าง ซ งจะส งผลให การท าจ ดเช อมเก ด ป ญหาตามไปด วย เพราะไฟล เหล าน อาจจะท งช วงเวลานานพอสมควร จ งจะ ปร บปร งอ กคร ง ว ธ การท ด ท ส ด เพ อป องก นป ญหาด งกล าว ควรวางแผนออกแบบ เอกสารเว บบนกระดาษ และก าหนดช อไฟล ของเอกสารเว บแต ละไฟล จากข น ตอนน จะท าให ผ พ ฒนาสามารถมองเห น ภาพการไหล (Data Flow) ของเอกสาร เว บได ช ดเจน และพ จารณาต อได ว า เอกสารเว บแต ละไฟล ม ความส มพ นธ ก บ เอกสารอ นๆ อย างไร และส มพ นธ ก บไฟล เอกสารใดบ าง

24 การวางแผนพ ฒนาเว บเพจ ต วอย างต องการสร างเว บเพจเพ อน าเสนอความร เก ยวก บ HTML อาจจะออกแบบ ได ด งน

25 การก าหนดช อไฟล และนามสก ลของไฟล เอกสารเว บ ม ข อก าหนดท แตกต างไปจากการก าหนดช อไฟล ปกต ท วไป ค อ ช อไฟล และนามสก ลของ ไฟล เอกสารเว บ จะถ กควบค มจาก Web Administor ด งน นผ พ ฒนาท ไม ใช Web Administor จะต องสอบถามกฎการต งช อโดยละเอ ยด โดยปกต ม หล กคร าวๆ ด งน ควรใช ต วอ กษร a - z หร อต วเลข 0-9 หร อผสมก น ต วอ กษร a - z ควรเป นต วพ มพ เล ก ห ามเว นวรรค ห ามใช เคร องหมายอ นใด ยกเว น Underscore (ข ดล าง) หร อ Dash (ข ดกลาง) ช อไฟล แรกของเอกสารเว บ ม กจะใช ช อ index นามสก ลของเอกสารเว บ ม สองร ปแบบ ค อ.htm และ html ด งน นผ พ ฒนาควรสอบถาม จาก Web Administor ก อนว าเคร องแม ข าย (Server) ท ใช เก บเอกสารเว บ ร จ กนามสก ล ไฟล ร ปแบบใด

26 ก าหนดไดเร กทรอร หร อโฟลเดอร การก าหนดไดเร กทอรร หร อโฟลเดอร ก อนท จะท าการสร างช ดเอกสารเว บเพจ เป น ล าด บข นตอน ท ควรปฏ บ ต ด วยท กคร ง เพ อให เอกสารเว บแต ละช ด ม ระบบการ จ ดเก บท เป นระบบ สามารถค นหา และเร ยกใช งานได สะดวก ในการสร างช ด เอกสารเว บแต ละช ด จะม ไฟล ต างๆ จ านวนมาก ท งไฟล เอกสาร HTML, ไฟล ภาพกราฟ ก, ไฟล เส ยง, ไฟล ว ด โอ และอ นๆ ท เก ยวข อง ไฟล ท งหมดน ควรจ ดเก บ ไว ในท ท เด ยวก น อาจจะสร างไดเร กทรอร ย อย เพ อแยกกล มไฟล ได แต จะต อง สร างภายใต ไดเร กทรอร หล ก ท สร างไว ก อนแล ว ไม ควรแยกไว คนล ะท เพราะจะ ท าให การจ ดการเว บม ป ญหาย งยากได

27 จ ดหาภาพท เก ยวข องก บเน อหา เอกสารเว บต องเก ยวข องก บร ปภาพโดยตรง ด งน นควรสร างภาพ หร อจ ดหาภาพ แล วท าการค ดลอก มาไว ในไดเร กทรอร หร อโฟลเดอร ท ได จ ดเตร ยมไว เพ อให สะดวกในการเร ยกใช งาน และการบร หารเว บไซต ในอนาคต ไฟล ภาพกราฟ กท น ามาใช ในการท าเว บ ภาพกราฟ ก หร อร ปกราฟ กท น ามาใช ในการท าเว บเพจ หร อน ามาใช ใน อ นเทอร เน ต จะต องเป นไฟล ล กษณะเฉพาะ ป จจ บ นน ยมใช ก น 3 ฟอร แมต ค อ ไฟล ฟอร แมต JPEG (Joint Photographer's Experts Group File) ไฟล ฟอร แมต GIF (Graphics Interlace File) ไฟล ฟอร แมต PNG (Portable Network Graphics)

28 สร างเอกสารเว บ สร างเอกสารเว บ โดยก าหนดช อไฟล เอกสารเว บ ตามข อก าหนดของ ผ ด แลระบบ เคร อข าย (Web System Administrator) และจ ดเก บไว ในไดเร กทรอร ท สร างไว ไฟล เอกสาร HTML เป นไฟล ข อความปกต (Text File) ด งน นสามารถใช โปรแกรม สร างเอกสาร โปรแกรมใดก ได ช วยในการลงรห สค าส ง HTML เช น RW, NotePad, WordPad, MS-Word, CU-Writer นอกจากน ในป จจ บ น ม โปรแกรมช วย ในการสร างเอกสารเว บ อ กหลายระบบ ด งท แนะน าไปแล ว

29 สร างเอกสารเว บ จากท กล าวไว ว าไฟล เอกสาร HTML เป นไฟล ข อความปกต ด งน นเพ อให โปรแกรมเบราเซอร ทราบว าไฟล เอกสารน เป นไฟล เฉพาะ ส าหร บก าหนด ร ปแบบการแสดงผล ผ านอ นเทอร เน ต จ งม ล กษณะเฉพาะ ของไฟล เอกสาร ร ปแบบน ค อ ในการจ ดเก บไฟล จะต องก าหนดนามสก ล หร อส วนขยายของไฟล (File Extension) เป น.htm หร อ.html โดยข อก าหนด เก ยวก บนามสก ลของไฟล น ข นอย ก บผ บร หารเคร อข ายเว บ ด งน นก อนท าการสร างเอกสาร HTML ควร สอบถามจากผ บร หารเคร อข าย ท ท านจะน าข อม ลไปฝากไว ก อน ว าให ก าหนด นามสก ลของไฟล อย างไร ส วนใหญ ก าหนดให ไฟล แรก ของเอกสารเว บ จะต องม ช อเป น index.html ส วน ไฟล ท เหล อก าหนดช อได อ สระ โดยใช นามสก ลเป น.htm หร อ.html ก ได

30 ตรวจสอบผลเอกสารเว บผ านเบราเซอร ขณะท ท าการสร างเอกสารเว บ ควรท าการตรวจสอบผลผ าน โปรแกรมแสดงผลเบ ราเซอร หลายค าย หลายร น (หากท าได ) เพราะโปรแกรมเบราเซอร แต ละค าย แต ละ ร น จะร จ ก หร อให ผลล พธ จากค าส ง HTML ไม เหม อนก น จะได ทราบข อบกพร อง ข อผ ดพลาด และสามารถแก ไขได ท น ก อนท จะส งข นไปแสดงผลจร งในระบบ อ นเทอร เน ต

31 ส งข อม ลข นเคร องแม ข าย ข อม ลท จ าเป นในการโอนข อม ล เช น ช อบ ญช ของผ ม ส ทธ (Login Name / Account Name) รห สผ านของบ ญช (Password) ช อเคร องแม ข าย (Host Name) ช อเคร องแม ข าย เป นส งจ าเป นท ต องทราบ เพราะเป นช อท จะใช ในการขอต ดต อ เพ อใช บร การฝากข อม ลน นเอง และช อน อาจจะม ช อแตกต างก บ ช อเว บไซต ท เรา เป นสมาช กอย ก ได เช น user.school.net.th เป นต น

32 ส งข อม ลข นเคร องแม ข าย เม อได พ ฒนาเอกสารเว บ และตรวจสอบผลได ตามท ต องการแล ว ก สามารถโอน ข อม ลน นๆ ไปย งเคร องแม ข าย (Server) ได โดยใช โปรแกรมกล มถ ายโอนข อม ล (FTP Software) เช น WinFTP, CuteFTP เป นต น ก อนท าการโอนข อม ล จะต องท าการขอส ทธ และพ นท จากผ ด แลระบบก อนเสมอ และตลอดจนต อง สอบถามข อม ลท จ าเป นในการโอนข อม ล

33 ส งข อม ลข นเคร องแม ข าย ไดเร กทรอร ท จะใช จ ดเก บข อม ลบนเคร องแม ข าย ไดเร กทรอร ส าหร บใช จ ดเก บข อม ลบนเคร องแม ข าย ก จ าเป นต องสอบถามด วย เพราะ ผ ด แลระบบ อาจจะก าหนดแตกต างก นออกไป เช น ผ ด แลระบบเคร อข าย SchoolNet ก าหนดให ใช ไดเร กทรอร ช อ www ในขณะท ผ ด แลระบบของเคร อข ายเอกชนบางแห ง ก าหนดให ใช ไดเร กทรอร เป น homepage เป นต น ช อเร ยกด เว บไซต ผ านเบราเซอร (URL) URL หร อ Uniform Research Locator หมายถ ง ช อเร ยกท อย ของเว บไซต เช น การก าหนด URL น ผ ด แลระบบอาจจะเป นผ ก าหนดให ด งน นผ พ ฒนาเว บเพจ ควร สอบถามจาก ผ ด แลระบบด วยเสมอ ว าเม อน าข อม ลข นไปเก บไว ท เคร องแม ข ายแล ว จะ เร ยกด ข อม ลได อย างไร

34 ข อแนะน าการพ ฒนาเว บเพจ ช อของเอกสารเว บ เอกสารเว บท กไฟล ควรม การก าหนดช อเอกสาร ไว ในส วนของแท ก <TITLE>.</TITLE> โดยช อท ก าหนดข นมาน จะเป นภาษาไทย หร อ ภาษาอ งกฤษก ได แต ควรม ความหมายอธ บายถ ง ภาพรวมของเว บเพจน นๆ ให ได มากท ส ด เน องจากข อความส วนน จะเป นข อความท จะถ กน ามาใช เป นค าส าค ญ (Keyword) ในการส บค นข อม ลจาก Search Engine ด วยเช น เช น ช อเอกสารเว บ ของโครงการคล งข อม ลอ เล กทรอน กส ของเคร อข าย SchoolNet สามารถก าหนด ช อของเอกสารเว บได ด งน <TITLE> Digital Library for Thai SchoolNet </TITLE>

35 ข อแนะน าการพ ฒนาเว บเพจ ค ย เว ร ดของเว บเพจ เว บไซต ท น าเสนอในเคร อข ายอ นเทอร เน ต ย อมต องการให เป นท ร จ กก นอย างแพร หลาย โดยเฉพาะเว บไซต ท า (Search Engine Website) ช นน า เช น Yahoo, Google, SiamGuru ว ธ หน งท จะช วยให เว บไซต ท าร จ กเว บไซต ท พ ฒนาข นมา ค อการก าหนดค ย เว ร ดให ก บ เว บเพจน นๆ โดยใช แท ก <META NAME = "Keyword" CONTENT = "ค ย เว ร ด 1, ค ย เว ร ด 2, "> ค ย เว ร ดท ก าหนดข นมาน สามารถก าหนดได ท งภาษาไทย และภาษาอ งกฤษ สามารถ ก าหนดค ย เว ร ดได มากกว า 1 ต ว โดยเข ยนค นด วยเคร องหมายจ ลภาค (,) เช น <META NAME = "Keyword" CONTENT = "การศ กษา, ประเทศไทย, Education, Thailand">

36 ข อแนะน าการพ ฒนาเว บเพจ การควบค มการเข ารห สภาษาไทย ป จจ บ นเบราเซอร แต ละต ว จะตรวจสอบการแสดงผลภาษาด วยค าการเข ารห ส ภาษา (Character Set) และหากเอกสารใด ก าหนดค าผ ดพลาด หร อไม ก าหนด อาจจะท าให โปรแกรมเบราเซอร แปลความหมายผ ดพลาด และแสดงผลภาษา ผ านเบราเซอร ไม ถ กต อง ด งน นเพ อให การแสดงผลภาษาไทยผ านเบราเซอร ต างๆ แสดงผลได อย างถ กต อง ควรก าหนดค าการเข ารห สภาษาไทยส าหร บเอกสารเว บ ด วยแท ก <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=tis- 620">

37 ข อแนะน าการพ ฒนาเว บเพจ ร ปแบบของเว บเพจ ส าหร บร ปแบบของเอกสารน น ในส วนของเน อหา ต วอ กษร และพ นหล ง (Background) ควรใช ส ท ด แล วสบายตาในการอ าน ยกเว นห วข อหร อข อความ บางส วนท ต องการเน น สามารถใช ส อ นได ตามความเหมาะสม

38 ข อแนะน าการพ ฒนาเว บเพจ การต งช อไฟล ช อไฟล สามารถประกอบด วยต วอ กษรภาษาอ งกฤษต วพ มพ เล ก (a - z) และต วเลข (0-9) ผสมก นได แต ไม ควรยาวจนเก นไป และส อความหมายถ งเน อหาของเว บ เพจด วย โดยนามสก ลของไฟล เอกสาร HTML ต องเป น.html หร อ.htm ท งหมด นอกจากน ไฟล เอกสาร HTML ไฟล แรก หร อไฟล ท ท าหน าท เป น Homepage จะต องต งช อเป น index.html เท าน น

39 ข อแนะน าการพ ฒนาเว บเพจ ระบ ท มาของเว บเพจ ท ายส ดของเว บเพจแต ละหน า ควรระบ ท มาของเว บเพจด วย ซ งม ร ปแบบการเข ยน ด งน ท มา: เร ยบเร ยงโดย ช อนามสก ลผ เร ยบเร ยงบทความน ว นท ท เร ยบเร ยง หร อสามารถด ต วอย างได จาก

40 ข อแนะน าการพ ฒนาเว บเพจ การก าหนดความกว างของเว บเพจ ความกว างของเว บเพจในกรณ ท เป นตาราง หร อเฟรมสามารถก าหนดได 2 หน วย ค อ หน วย pixel และหน วยเปอร เซ นต (%) โดยในหน วยของ pixel น นไม ควรเก น 750 pixel (ส าหร บการน าเสนอผ านจอภาพ 800 x 600 pixels) และในหน วยของ เปอร เซ นต ไม ควรเก น 90% เพ อไม ให เก ดสกอล บาร (Scrollbar) ทางด านล างของ โปรแกรมเว บบราวเซอร

41 ข อแนะน าการพ ฒนาเว บเพจ การก าหนดฟอนต เอกสารเว บท เป นภาษาไทย หร อภาษาไทยผสมภาษาอ งกฤษ นอกจากจะต องก าหนดแท ก ควบค มการเข ารห สตามข อ 3 แล วควรก าหนดแบบอ กษร (Font) ให ก บข อความใน เอกสารเว บด วย โดยการใช แท ก และควรก าหนดฟอนต ท สามารถแสดงผลได ท งเคร องคอมพ วเตอร ระบบ Macintosh และ PC พร อมท งระบ ขนาดท เหมาะสมด วย ร ปแบบ การก าหนดช อฟอนต ท เหมาะสมส าหร บข อม ลท เป นภาษาไทย ได แก ร ปแบบ การก าหนดช อฟอนต ท เหมาะสมส าหร บข อม ลท เป นภาษาอ งกฤษ ได แก

42 ข อแนะน าการพ ฒนาเว บเพจ การแสดงข อม ลประเภทรายการหร อตาราง การสร างล าด บรายการ (Order List/Unorder List) ซ งจะเป นการใช แท ก <OL>, <UL>, <DL> ไม ควรจะใช ซ อนก น หลายช นเก นไป เพราะอาจเป นผลท าให เอกสารน นกว างเก นหน าจอ ท าให เก ดสกอล บาร ทางด านล างของโปรแกรมเว บ บราวเซอร ซ งจะท าให ผ ใช ต องท าการเล อนด ข อม ลท ขาดหายไป และท าให เม อส ง พ มพ เว บเพจน นออกมาทางเคร องพ มพ ข อความบางส วนจะขาดหายไป (ส วนท เก นหน าจอ)

43 ข อแนะน าการพ ฒนาเว บเพจ การจ ดการเก ยวก บภาพ ภาพควรม ความส มพ นธ ก บเน อหา โดยค าน งถ งสาระส าค ญของเน อหาเป นหล ก ควรม จ านวนภาพพอเหมาะไม มากเก นไป เพ อความรวดเร วในการเคล อนย ายข อม ล (transfer) ความสวยงามของโฮมเพจ เพ อให สามารถใช ได ก บจอภาพของผ เข าชมโฮมเพจซ งอาจม ขนาดจอภาพต างๆ ก น ควร ใช ภาพประกอบขนาดเล ก (thumbnail) และสามารถคล กท ภาพเล กเพ อแสดงภาพท ใหญ ข นได เล อกใช ฟอร แมตของภาพท เหมาะสม เช น ภาพส หร อภาพท ต องการแสดงถ งความคมช ด ของเน อหา ควรใช ฟอร แมต.JPG ในขณะท ภาพขาวด า หร อภาพท ไม เน นรายละเอ ยด เก ยวก บส ควรใช ฟอร แมต.GIF เป น ข อม ลภาพฟอร แมต.JPG ข อม ลภาพฟอร แมต.GIF

44 ข อแนะน าการพ ฒนาเว บเพจ การจ ดการเก ยวก บภาพ ภาพท ม ขนาดโตมาก ควรแบ งซอยเป นภาพเล กๆ แล วใช เทคน คการประกบภาพด วย ตาราง ไม ควรใช ภาพโตเก นไปหลายๆ ภาพในหน าเอกสารเว บแต ละหน า ควรก าหนดแอทร บ วท WIDTH และ HEIGHT ให ก บภาพ (หร อในแท ก <img >)ด วย เพ อระบ ความกว างและความยาวของร ปภาพให เว บบราวเซอร ร ซ งม ผลให การปรากฏ ภาพบนจอเร วข น ควรก าหนดแอทร บ วท ALT ให ก บภาพ (หร อในแท ก <img >) เพ อแสดงข อความ อธ บายส าหร บเว บบราวเซอร ท ไม สามารถแสดงข อม ลท เป นร ปภาพได โดยข อความควร ม ความหมายเหมาะสมก บภาพสามารถอ านแล วเข าใจหร อเห นภาพ

45 ข อแนะน าการพ ฒนาเว บเพจ ขนาดข อม ลท เหมาะสม ควรจะควบค มให ม ขนาดไม เก น 150 ก โลไบต (ซ งจะใช เวลาประมาณ 60 ว นาท ในการเคล อนย ายข อม ล) เพราะหากม ขนาดใหญ กว า 150 ก โลไบต จะเส ยเวลาใน การเคล อนย ายข อม ลมาก ท าให ผ เข าชมเก ดความเบ อได

46 ข อแนะน าการพ ฒนาเว บเพจ การทดสอบการแสดงผล ควรแสดงผลด วยความสวยงามท ความละเอ ยดของหน าจออย างต า 800 x 600 จ ด และควรทดสอบก บเบราเซอร หลายๆ ค าย หลายๆ ร น

47 การเตร ยม Web server ส าหร บเผยแพร ผลงาน Web Server การสร างเว บไซต ในป จจ บ น ย อมหน ไม พ นความต องการด านโปรแกรมม ง เช น ต องการต วน บจ านวนการเข าชมเว บไซต (Counter) ต องการกระดานข าว (Web board) ต องการสม ดเย ยม (Guestbook) หร อฟ งก ช นส งๆ เช น ระบบสมาช ก แต น กพ ฒนาเว บไซต ม กจะล มไปว าระบบโปรแกรมบนเว บ เป นระบบท ส มพ นธ ก บ ระบบปฏ บ ต การ ด งน นก อนสร างเว บไซต ควรพ จารณาให แน นอนว าเว บท พ ฒนา จะน าไปเก บไว บนเคร องแม ข ายท ใช ระบบปฏ บ ต การใด เพราะหากเล อกผ ดพลาด ก จะท าให เว บน นม ป ญหาอ กมากมาย

48 การเตร ยม Web server ส าหร บเผยแพร ผลงาน ป จจ บ นคงม หลายๆ ท านท สนใจจะม เว บไซต เป นของตนเอง หร อต องร บผ ดชอบ ด าเน นการให ก บ หน วยงานท ท านส งก ด และคงม ค าถามว าจะต องด าเน นการ อย างไรก บ Web Server ซ งขอแนะน าไว คร าวๆ ด งน จ ดต ง Web server ข นมาเอง เช า Web server จากผ ให บร การ ขอใช พ นท จาก Web server จากหน วยงานท ส งก ด ขอใช พ นท ฟร จาก Free Web Server

49 การเตร ยม Web server ส าหร บเผยแพร ผลงาน การเตร ยมจ ดต ง Web server ข นมาเอง ถ าท านม งบประมาณท เพ ยงพอ ว ธ การน เป นว ธ การท น าสนใจท ส ด เพราะ เป น Web Server ของเราเอง สามารถควบค ม จ ดการได ตามท ต องการ ก าหนดช วงเวลาในการเป ดให บร การก บสมาช กได อ สระ โดย Web Server ท จ ดต งน จะต องเล อกร ปแบบการเช อมต อก บผ ให บร การ อ นเทอร เน ต ISP ท เหมาะสมเพ อให เก ดประโยชน ส งส ด ในขณะท ม รายจ ายน อย ท ส ด

50 การเตร ยม Web server ส าหร บเผยแพร ผลงาน การเตร ยมจ ดต ง Web server ข นมาเอง หม นแบบ Dial-up เป นร ปแบบการเช อมต อท ลงท นน อยท ส ด และสะดวกเพราะ Web server อย ท โต ะท างานของเราเอง โดย เพ ยงแต ม เคร องคอมพ วเตอร PC ท วไป แล วต ดต งระบบปฏ บ ต การท รองร บการท างาน เช น Linux, Windows NT, Windows 2000, Windows 98/ME + ISS แล วเช อมต อสายส ญญาณโทรศ พท ด วย อ ปกรณ MODEM ไปย ง ISP ด งร ป

51 การเตร ยม Web server ส าหร บเผยแพร ผลงาน การเตร ยมจ ดต ง Web server ข นมาเอง ใช สายเช าส ญญาณ (Leased Line) โดยเช อม Web Server ก บ ISP ด วยสายเช า ส ญญาณรายเด อน และม Router เป นอ ปกรณ เช อมต อ

52 การเตร ยม Web server ส าหร บเผยแพร ผลงาน การเตร ยมจ ดต ง Web server ข นมาเอง ใช บร การ Co-Location เป นการน า Web server ของเราไปฝากไว ก บ ISP โดยการ เช อมต อทาง ISP จะเป นผ ร บผ ดชอบ และเช อมต อกล บมาย งหน วยงานโดยผ าน MODEM ท าให การส งข อม ลไปย ง Web server อาจจะช ากว าแบบ Leased Line แต สามารถให บร การก บผ ท มาเย ยมชมเว บได ด เพราะใช ความเร วส งส ดของ ISP น นๆ

53 การเตร ยม Web server ส าหร บเผยแพร ผลงาน การเช า Web server จาก ISP การเช า Web Server จากผ ให บร การ น บเป นร ปแบบการฝากพ นท เว บไซต ท ได ร บ ความน ยมอ กร ปแบบหน ง เน องจากไม ต องย งยากก บการด แลร กษา และไม จ าเป นต องม ความร ทางเทคน คมากน ก รวมถ งไม ต องเส ยงบประมาณไปก บค าใช บ คลากรในหน วยงานท ม งบประมาณจ าก ด เน องจากป จจ บ นม ISP และ ผ ประกอบการรายย อยหลายรายท เป ดบร การเช าพ นท บน Web server ท าให ม ทางเล อกหลายทาง

54 การเตร ยม Web server ส าหร บเผยแพร ผลงาน การเช า Web server จาก ISP ป จจ ยท ควรทราบในการเล อกพ จารณาเช า Web server ความเร วในการเช อมต อส ญญาณ ความเร วในการร บส งข อม ล ปร มาณพ นท ท ให บร การ ความสามารถในการรองร บ Web Programming การสน บสน นระบบ Multimedia

55 การเตร ยม Web server ส าหร บเผยแพร ผลงาน การใช บร การ Free Web Server Free Web Server น บเป นบร การท ผ ใช อ นเทอร เน ตม อสม ครเล น (และหน วยงานท ม งบประมาณไม มากน ก) เล อก เน องจากไม ต องเส ยค าใช จ ายใดๆ (แต ต องยอมแลก ก บโฆษณาท ปรากฏข นมา) โดยม ข อควรพ จารณาด งน ขนาดพ นท ท ให บร การ การสน บสน น Web Programming การสน บสน น Multmedia

56 การเตร ยม Web server ส าหร บเผยแพร ผลงาน โดย Free Web Server ท ม ให บร การม ท งในและต างประเทศ เช น

57 เตร ยมเอกสารเว บส าหร บ Search Engine หลายๆ คนคงม ข อสงส ยว าท าไหมเว บไซต ท ต วเองสร าง จ งไม สามารถค นจาก Yahoo, Google ได ท งๆ ท เว บของคนอ นก ค นได ง าย รวดเร ว ค าตอบส าหร บเร องน ไม ยากเลย ค ณลองเป ดเว บไซต ท ค ณสร าง แล วเล อกเมน ค าส ง View, Source (จาก IE) แล วหาด ส คร บ ค ณได ใส Meta Tag ซ งม ล กษณะค าส งด งน <META...> ไว บ างไหม รวมถ ง Title Tag

58 เตร ยมเอกสารเว บส าหร บ Search Engine เห นไหมคร บ ไม ม หร อบางท านอาจจจะไม เคยได ย นแท กน มาก อนก ได บางท าน เคยได ย น แต ไม ร ว าม ประโยชน อย างไร แท กน ม ประโยชน มากส าหร บการ ประกาศข อม ลของเว บท เราสร างให ก บ Yahoo, Google หร อ Search Engine อ นๆ ในระบบเคร อข ายอ นเทอร เน ต ด งน นการสร างเอกสารเว บท กไฟล จะต องก าหนด Meta Tag ก าก บไว เสมอ

59 เตร ยมเอกสารเว บส าหร บ Search Engine Title Tag Title Tag เป นแท กแรกของเอกสารเว บ ท ท าหน าท แสดงช อเร อง หร อห วเร องของ เว บไซต ซ ง Search Engine ม กจะน าส วนน ไปเก บไว ในฐานข อม ลเพ อเป น Keyword ส าหร บผ ใช ด งน นเว บไซต ท กเว บไซต จะต องม การก าหนด Title ท เหมาะสม ผ ใช ค ดถ งค าได ง าย (หล กเล ยงภาษาไทย เพราะ Search Engine หลายต ว ย งไม สน บสน นภาษาไทย) แท กน จะปรากฏในแถวแรกของเบราเซอร รวมท งเป นข อความส าหร บ Bookmark เว บไซต เพ อเร ยกใช งานในคร งถ ดไปและ แสดงผลด วย Search Engine เม อม การค นค นเว บไซต โดยผ ใช

60 เตร ยมเอกสารเว บส าหร บ Search Engine

61 เตร ยมเอกสารเว บส าหร บ Search Engine Meta Tag ค ออะไร? Meta Tag ค อแท กท ใช ประกาศข อม ลส าค ญต างๆ ของเอกสารเว บ เช น ช อผ พ ฒนา, เจ าของเว บไซต, ค าส าค ญ (Keyword), ค าอธ บายย อของเว บไซต โดยจะปรากฏใน ส วนห วของเอกสารเว บ (Head Section) ม หน าท ส งข อม ลให ก บ Search Engine เพ อเก บไว ในฐานข อม ล ส าหร บการค นค นของผ ใช

62 เตร ยมเอกสารเว บส าหร บ Search Engine Description/Keyword Meta Tag Meta Tag ท ควรก าหนดในเอกสารเว บแท กหน งก ค อ Description และ Keyword Meta Tag ซ งม ร ปแบบการใช งานด งน <META NAME="description" CONTENT="ข อความอธ บาย"> <META NAME="keywords" CONTENT="ค าท 1, ค าท 2,...">

63 Web Master เว บมาสเตอร (Web Master) ค อ บ คคลท ท าหน าท วางแผน ด แล บร หาร และจ ดการ เว บไซต เพ อให เว บไซต น นๆ บรรล ว ตถ ประสงค ท ก าหนดไว ท งน หน วยงานหน งๆ อาจจะม เว บมาสเตอร ในล กษณะท แตกต างก นไป เช น ม บ คลากรเพ ยงคนเด ยวเป นเว บมาสเตอร ท ท าหน าท ท งพ ฒนาเว บไซต ออกแบบ เว บไซต ออกแบบกราฟ ก เข ยนโปรแกรมม ง ในขณะท บางหน วยงานอาจจะแยก หน าท ของกล มงานออกอย างช ดเจน และเว บมาสเตอร ม หน าเพ ยงเฉพาะด แลระบบ เท าน น

64 Web Master สร ปหน าท ของเว บมาสเตอร ได ด งน เร มจากออกแบบโครงสร าง ต อด วยออกแบบกราฟ ก พ ฒนาเอกสารเว บ ตรวจสอบ/ปร บปร ง น าเสนอผลงาน ประเม นผล ประช มท ม ผ จ ดการและล กค า ผ เช ยวชาญด านเน อหา ผ เช ยวชาญด านเทคน ค น กออกแบบกราฟ ก

65 Web Master สร ปหน าท ของเว บมาสเตอร ได ด งน พ ฒนาแนวค ด ท องเว บอ นๆ แหล งข อม ลใหม ๆ ก าหนดร ปแบบหล ก ร างโครงสร าง (Storyboard) เป นการร างภาพเพ อน าเสนอความค ด และให น กออกแบบกราฟ กน าไปพ ฒนางานต อไป วางแผนการน าทาง (Navigator) พ ฒนาต นแบบ อ านง าย ข อม ลกะท ดร ด บ งช เป าหมายอย างช ดเจน ออกแบบกราฟ ก

66 ความกว างของเว บเพจ ป ญหาหน งในการออกแบบเว บเพจ ก ค อ ความกว างเท าไร จ งจะเหมาะสม? ค าตอบ ส าหร บประเด นน แทบจะหาบทสร ปไม ได เลย เน องจาก ความกว างของเว บเพจ ข นอย ก บ "ค าต ดต งของจอภาพ (Screen Setting)" จอภาพแต ละจอ จะม ค าต ดต งเฉพาะของ ตนเอง โดยค าต ดต งของจอภาพท เก ยวก บขนาดของจอในป จจ บ น แบ งได ด งน 640 x 480 pixels 800 x 600 pixels 1024 x 768 pixels 1600x1200 pixels ซ งสามารถตรวจสอบได จากการคล กขวาบน Desktop ของจอภาพหล ก MS-Windows แล วเล อกค าส ง Properties คล กบ ตรรายการ Settings ปร บเปล ยนค าหร อตรวจสอบค าจาก รายการ Screen area