ความรู้พื นฐานก่อนทาํเวบ็

� เว็บเบราเซอร (Web Browser)

� เว็บเซิรฟเวอร (Web Server)

� ยูอารแอล (Uniform Resource Locator – URL)

� การติดต,อระหว,างเว็บเบราเซอร กับ เว็บเซิรฟเวอร

พื้นฐานความรู8ที่จําเป?นก,อนทําเว็บไซต

� การติดต,อระหว,างเว็บเบราเซอร กับ เว็บเซิรฟเวอร

� โปรโตคอล (Protocol) ที่เกี่ยวข8อง

� ลักษณะภาษาที่ใช8ในการจัดทําเว็บ

� ลักษณะต,าง ๆ ของเว็บไซต

� นิยมเรียกว,า Browser

� เป?นซอฟตแวรสําหรับเรียกดูเว็บเพจ

เว็บเบราเซอร (Web Browser)

Internet

ผู้ใช้Web Server

เว็บเบราเซอร (Web Browser)

เว็บเซิรฟเวอร (Web Server)

� เครื่องคอมพิวเตอรแม,ข,าย ที่เก็บข8อมูลของเว็บไซต

� ส,งข8อมูลให8ผู8ใช8 ผ,านโปรโตคอล HTTP(Hypertext Transfer Protocol)

ต8องใช8โปรแกรมเว็บเซิรฟเวอร เพื่อใช8จัดการเครื่อง� ต8องใช8โปรแกรมเว็บเซิรฟเวอร เพื่อใช8จัดการเครื่อง(เช,น Apache, IIS-Internet Information Server,Sun Java)

� ชื่อเครื่องคอมพิวเตอร จะขึ้นต8นด8วย www

เว็บเซิรฟเวอร (Web Server)

โปรแกรมเว็บเซิรฟเวอร

เว็บเซิรฟเวอร (Web Server)

ยูอารแอล (URL)

� ย,อมาจาก Uniform Resource Locator

� ที่อยู,ของแต,ละเว็บเพจ (ซึ่งจะไม,ซ้ํากัน)

� ประกอบด8วย 2 ส,วน คือ โพรโตคอล และแหล,งที่อยู,

http://www.nrru.ac.th/website/nrru2013.phpโพรโตคอล ชื�อเวบ็เซริ์ฟเวอร์ ชื�อไดเรคทอรี ชื�อเวบ็เพจ

แหล่งที�อยู่

การติดต,อสื่อสารระหว,างเว็บเบราเซอรกับ เว็บเซริฟเวอร

การติดต,อสื่อสารระหว,างเว็บเบราเซอรกับ เว็บเซริฟเวอร

การติดต,อสื่อสารระหว,างเว็บเบราเซอรกับ เว็บเซริฟเวอร

� ติดต,อกันในรูปแบบของ Client/Server

� ใช8ตัวเลข IP Address ในการแลกเปลี่ยนข8อมูล

� IP Address คือ หมายเลขประจําเครื่อง � IP Address คือ หมายเลขประจําเครื่อง - หากเป?น IPv4 จะเป?นตัวเลข 4 ชุด เช,น 202.29.4.4- หากเป?น IPv6 จะเป?นตัวเลข 6 ชุด

� การพิมพชื่อ URL เพื่อช,วยให8การจดจําชื่อเว็บไซตง,ายขึ้น

การติดต,อสื่อสารระหว,างเว็บเบราเซอรกับ เว็บเซริฟเวอร

� ตัวที่ช,วยแปลงชื่อ URL เป?น IP Address คือ DNS (Domain Name Server)

� เช,น เว็บไซตของมหาวิทยาลัย http://www.nrru.ac.thสามารถพิมพเลข IP Address ว,า 202.29.4.4 แทนได8

การติดต,อสื่อสารระหว,างเว็บเบราเซอรกับ เว็บเซริฟเวอร

โปรโตคอลที่เกี่ยวข8อง (Protocol)

อยู,ในกลุ,มของ TCP/IP (Transmission Control Protocol/Internet Protocol)

� HTTP – Hypertext Transfer Protocol

- ข8อกําหนดในการส,งข8อมูลไปยังเว็บเบราเซอร- ข8อกําหนดในการส,งข8อมูลไปยังเว็บเบราเซอร- บางครั้งอาจเรียกเว็บเซิรฟเวอรว,า http server

� FTP – File Transfer Protocol- ข8อกําหนดในการส,งข8อมูลจากเครื่องหนึ่ง ไปยังอีก เครื่องหนึ่ง

ลักษณะภาษาที่ใช8ในการจัดทําเว็บ

� ภาษาคอมพิวเตอรพื้นฐานที่ใช8ในการจัดทําเว็บ คือ ภาษาเอชทีเอ็มแอล(HTML – Hypertext Markup Language)

� ต,อมา มีการพัฒนาการเขียนโปรแกรมบนเว็บมากขึ้น จึงมีการพัฒนาภาษาคอมพิวเตอรต,าง ๆ เช,น Perl, ASP, PHP , JAVA , XML เป?นต8น

ลักษณะต,าง ๆ ของเว็บไซต

อาจแบ,งเป?น 2 ประเภท ได8แก,

� เว็บไซตที่ไม,มีการเปลี่ยนแปลงข8อมูล (Static Website)

� เว็บไซตที่มกีารรับส,งข8อมูล (Dynamic Website)

ลักษณะต,าง ๆ ของเว็บไซต

แต,ละประเภท อาจแบ,งย,อย ได8แก,

� เว็บไซตที่ไม,มีการเปลี่ยนแปลงข8อมูล (Static Website) (แบ,งอีก 2 ประเภท)

– เว็บไซต�ที่ไม มกีารเปลี่ยนแปลงข�อมูล (Static website)– เว็บไซต�ที่ไม มกีารเปลี่ยนแปลงข�อมูล (Static website)

– เว็บไซต�ที่ไม มกีารเปลี่ยนแปลงข�อมูลแต มีฟอร�มกรอกข�อมูล(Static Website with entry form)

ลักษณะต,าง ๆ ของเว็บไซต

แต,ละประเภท อาจแบ,งย,อย ได8แก,

� เว็บไซตที่มกีารรับส,งข8อมูล (Dynamic Website)(แบ,งอีก 3 ประเภท)

– เว็บไซต�ที่มีการรับส งข�อมูลและโต�ตอบกันได� (Website with – เว็บไซต�ที่มีการรับส งข�อมูลและโต�ตอบกันได� (Website with dynamic data access)

– เว็บไซต�ที่มีการเปลี่ยนแปลงรูปแบบตามกลุ มผู�ชม (Dynamic generated website)

– แอปพลิเคชันบนเว็บ (Web based application)

อ8างอิงทธฤษพงศ� เฟ� องวฒุิ. เว็บดีไซน. กรุงเทพฯ : โรงพิมพ� ดี เอส แอล

กรุงเทพฯ, 2543.

สมลักษณ� ละอองศรี. หน,วยที่ 8 เทคโนโลยีเว็บ ในเอกสารการสอนชุดวิชาเทคโนโลยีสารสนเทศเบื้องต8น. นนทบุรี : มหาวทิยาลัยสุโขทัยธรรมาธิราช, 2554.มหาวทิยาลัยสุโขทัยธรรมาธิราช, 2554.

Andrews, Jean. i-Net+ Guide to the internet. 2nd ed. Boston : Course Technology, 2002.

พัฒนาการของเว็บไซต�

พัฒนาการของเวบ็ไซต�

�ความหมายและความสําคัญ� เทคโนโลยีที่สําคัญในแต"ละยุค� ตัวอย"างการใช%งานและเว็บไซต�ในแต"ละยุค� ตัวอย"างการใช%งานและเว็บไซต�ในแต"ละยุค

เว็บ 1.0

�ความหมายและความสําคัญ–เชื่อมโยงโดยใช% Hypertext–สื่อสารทางเดียว–สื่อสารทางเดียว–เป4นเว็บแบบอ"านเท"านั้น (read-only)–ผู%ปรับปรุงข%อมูล ทําได%เฉพาะคนดูแลเว็บไซต�

(Webmaster) เท"านั้น

เว็บ 1.0� เทคโนโลยีที่สําคัญ

ใช�ภาษา HTML เป�นภาษาหลักมีการทําให�เป�นเว็บไซต�ในลักษณะ dynamic โดยเขียน

โปรแกรมภาษาต.าง ๆ แทรกเข�าไป – HTML (Hypertext Markup Language) มีรูปแบบไฟล�เป4น – HTML (Hypertext Markup Language) มีรูปแบบไฟล�เป4น

.htm หรือ .html ปMจจุบัน มีการพัฒนาภาษา XHTML เพิ่มขึ้นจากเดิม

– CGI (Common Gateway Interfaces) เป4นภาษาที่ทํางานในฝM[งเครื่องเว็บเซิร�ฟเวอร� (Server side) เพื่อให%เซิร�ฟเวอร�สามารถตอบสนองการทํางานของผู%ใช%ได%

เว็บ 1.0

� เทคโนโลยีที่สําคัญ (ต.อ)– Applet เป4นโปรแกรมขนาดเล็ก เขียนด%วยภาษาจาวา (JAVA) เป4น

ภาษาที่ทาํงานในฝM[งเซิร�ฟเวอร� (Server side) ช"วยตกแต"งลูกเล"นให%เว็บไซต�มีความน"าสนใจมากขึ้นเว็บไซต�มีความน"าสนใจมากขึ้น

– Servlet คล%าย Applet แต"ใช%สําหรับติดต"อกับฐานข%อมูล– Script โปรแกรมสั้นๆ มีตัวแปลภาษาช"วยในการทํางาน (ต%องมีการ

ติดตั้งโปรแกรมแปลภาษา) เช"น CGI Script, Java Script, VB Script

เว็บ 1.0

� ตัวอย"างการใช%งาน– มักเป4นเว็บไซต�ที่มีวัตถุประสงค�หลักในการนําเสนอข%อมูล เช"น

เว็บไซต�ของหน"วยงาน การสืบค%นข%อมูล การใช%อีเมล– นําเสนอข%อมูลฝgายเดียว โดยผู%ใช%เป4นผู%สร%างระบบและเนื้อหาบนเว็บ– นําเสนอข%อมูลฝgายเดียว โดยผู%ใช%เป4นผู%สร%างระบบและเนื้อหาบนเว็บ– เว็บไซต�อีคอมเมิร�ซต"าง ๆ

เว็บ 1.0

� ตัวอย"างการใช%งาน

เว็บ 1.0� ตัวอย"างการใช%งาน

เว็บ 2.0� ความหมายและความสําคัญ

– การประยุกต�บนเว็บที่เน%นการมีส"วนร"วมจากผู%ใช%ในการสร%างหรือปรับปรุงเนื้อหาบนเว็บ

– ผู%ใช%สามารถโต%ตอบได%– มีลักษณะการแบ"งปMนความรู%และแลกเปลี่ยนความคิดเห็น– มีลักษณะการแบ"งปMนความรู%และแลกเปลี่ยนความคิดเห็น– ผู%ใช%สามารถใส"เนื้อหา และให%คะแนนเนื้อหา เช"น การแนะนําผู%อื่นต"อ– ผู%ใช%ไม"จําเป4นต%องมีความรู%ในภาษาเทคนิคที่ใช%ในการสร%างเว็บ

เว็บ 2.0� เทคโนโลยีที่สําคัญ

ตัวอย.างกิจกรรมบนเว็บ 2.0 เช.น เขียนวิจารณ�บทความในบล็อก (blog) แบ.งป>นวิดีโอ รับข�อมูลจาก RSS

– เทคโนโลยีที่สําคัญคือ เอแจกซ� (Ajax- Asynchronous JavaScript and XML)and XML)

• ใช%หลักการร%องขอ/ตอบสนอง (request/response)• ไม"จําเป4นต%องรอการประมวลผลจนเสร็จทั้งเว็บ (asynchronous)• ใช%มาตรฐานของเอกซ�เอ็มแอล (XML – eXtensible Markup Language)

– XML จะรวมมาตรฐานของ XHTML, CSS เพื่อช"วยสร%างรูปแบบการนําเสนอเว็บ

– XML ใช%มาตรฐาน DOM : Document Object Model ในการสร%างปฏิสัมพันธ�กับผู%ใช%

เว็บ 2.0� ตัวอย"างการใช%งาน

– วิกิ (wiki) - ให�บริการในการสร�างและปรับปรุงเนื้อหาร�วมกัน

– โซเชียลบุกมาร�กกิง (social bookmarking)- บริการในการทําbookmark และแบ�งป"น bookmark นั้นแก�ผู�ใช�อื่น ๆ เช�น Delicious, Digg, StumbleUpon

– โซเชียลเน็ตเวิร�ก (social network) – บริการให�ผู�ใช�สามารถรู�จักและ– โซเชียลเน็ตเวิร�ก (social network) – บริการให�ผู�ใช�สามารถรู�จักและเชื่อมโยงเป:นเครือข�ายสังคม สามารถขยายกลุ�มไปได�เรื่อย ๆ เช�น Facebook, Hi5, LinkedIn, Avatars United

– บล็อกกิง (blogging) – บริการสร�างเนื้อหา และเขียนบทความ โดยที่ผู�ใช�คนอื่นเข�ามาร�วมแสดงความคิดเห็นด�วยได� เช�น GotoKnow, Wordpress, Blognone สามารถสร�างด�วยโปรแกรมเช�น Drupal, Wordpress, Joomla, Mambo

เว็บ 2.0� ตัวอย"างการใช%งาน

– ไมโครบล็อกกิง (microblogging) – เป:นบล็อกที่ให�บริการข�อความสั้น เช�น Twitter, Friendfeed, Tubmlr, Jaiku

– การแบ"งปMนข%อมูลมัลติมีเดีย (multimedia sharing)- บริการรับฝากและแสดงภาพถ�าย วิดโีอ ไฟลVข�อมูลอื่น ๆ และสามารถใส�คําจํากัดความและแสดงภาพถ�าย วิดโีอ ไฟลVข�อมูลอื่น ๆ และสามารถใส�คําจํากัดความหรือ Tag เพื่อช�วยในการจัดระบบและค�นหาข�อมูล เช�น Flickr, YouTube, Vimeo, slideshare

– อาร�เอสเอส (RSS-Really Simple Syndication) – เป:นรูปแบบการกระจายข�าวด�วยมาตรฐาน XML โดยดึงข�าวจากเว็บต�นทางมาแสดงยังปลายทาง

เว็บ 2.0� ตัวอย"างการใช%งาน

– บริการซอฟต�แวร� (Software as a Service-SasS) – ซอฟตVแวรVที่ใช�งานบนเว็บ โดยจะให�บริการตั้งแต�ติดตั้ง ดูแลและจัดเก็บรักษา ผู�ใช�เพียงชําระค�าบริการและสามารถใช�ผ�านระบบเครือข�ายได�

เว็บ 2.0

� ตัวอย"างการใช%งาน

เว็บ 2.0

� ตัวอย"างการใช%งาน

เว็บ 2.0

� ตัวอย"างการใช%งาน

เว็บ 2.0• ตัวอย"างการใช%งาน

เว็บ 2.0� ตัวอย"างการใช%งาน

เว็บ 3.0� ความหมายและความสําคัญ

– แนวคิดในการทําให%เว็บไซต�เข%าใจข%อมูลเชิงความหมาย (semantic)– เน%นการเชื่อมโยงข%อมูลที่สัมพันธ�กัน และสร%างเครือข"ายข%อมูล– ช"วยให%เกิดความสะดวกในการสืบค%น และเข%าถึงอย"างรวดเร็ว– เน%นให%ตอบโต%ผู%ใช%อย"างชาญฉลาด สามารถเข%าใจความต%องการของ– เน%นให%ตอบโต%ผู%ใช%อย"างชาญฉลาด สามารถเข%าใจความต%องการของ

ผู%ใช% และแสดงผลให%ตรงความต%องการ– สามารถคาดเดาความต%องการของผู%ใช%แต"ละคนได%

เว็บ 3.0� ความหมายและความสําคัญ

– ผู%ใช%สามารถ อ"าน เขียน ปฏิบัติการ (read-write-execute) – ผู%ใช%สามารถ อ"าน เขียน เชื่อมโยง (read-write-relate)– มีลักษณะเป4นซีแมนทิกเว็บ (semantic web) – เป:นการสร�างเครือข�าย

ของข�อมูล เป:นลักษณะของป"ญญาประดิษฐVของข�อมูล เป:นลักษณะของป"ญญาประดิษฐV

เว็บ 3.0� เทคโนโลยีที่สําคัญ

เว็บ 3.0 เป�นการสร�างเว็บเพื่อให�เข�าใจข�อมูลเชิงความหมาย เน�นการให�บริการแบบรู�ใจผู�ใช�มากขึน้ เทคโนโลยีที่สําคัญคือ เว็บเชิงความหมาย ร.วมกับ ป>ญญาประดิษฐ�

– เทคโนโลยีเว็บเชิงความหมาย (semantic web)– เทคโนโลยีเว็บเชิงความหมาย (semantic web)• ประมวลผล “ความหมาย” แทนการกํากับเอกสารด�วย “ข�อความ”

• ต�องใช�ออนโทโลยี (ontology) และ มาตรฐานภาษาที่ใช�ในการพัฒนาออนโทโลยี คือ OWL (Web Ontology Language)

• ใช� metadata แทน tags

เว็บ 3.0• เทคโนโลยีที่สําคัญ (ตวัอย�างออนโทโลยี)

เว็บ 3.0

� เทคโนโลยีที่สําคัญ– เทคโนโลยีปMญญาประดิษฐ� (Artificial Intelligence- AI)

• สร�างความฉลาดให�ระบบคอมพิวเตอรV

• เครื่องคอมพิวเตอรVจะสามารถคิดหาเหตุผล เรียนรู� คาดเดา• เครื่องคอมพิวเตอรVจะสามารถคิดหาเหตุผล เรียนรู� คาดเดาพฤติกรรม และวิเคราะหVความต�องการของผู�ใช�เว็บได�

• ช�วยในการค�นหาข�อมูลจํานวนมาก เพื่อให�ได�ข�อมูลที่ตรงกับความต�องการของผู�ใช�มากที่สุด

เว็บ 3.0� ตัวอย"างการใช%งาน

เว็บ 3.0

� ตัวอย"างการใช%งาน (www.wolframalpha.com)

เว็บ 3.0

� ตัวอย"างการใช%งาน (www.wolframalpha.com)

กิจกรรม

� จงเปรียบเทียบลักษณะสําคัญของเว็บในแต"ละยุค

อ8างอิง

สมลักษณ� ละอองศรี. หน,วยที่ 8 เทคโนโลยีเว็บ ในเอกสารการสอนชุดวิชาเทคโนโลยีสารสนเทศเบื้องต8น. นนทบุรี : มหาวิทยาลัยสุโขทัยธรรมาธิราช, 2554.