Embed Size (px)
Citation preview
1
อ.ดร. สุ�มาลี เฮงยศมากEmail: [email protected]
ICT PROMOTES LEARNING :HTML5 WEBSITE FOR 21ST
CENTURY LEARNERS การพั�ฒนาเว็�บไซต์�ด�ว็ย
HTML5
2
หลี�งจากปี� ค.ศ. 2000 เทคโนโลียทางด�านไอซทได�มบทบาทเชื่$% อม โยง เก%ยว็พั�นไปีในท�กๆด�าน ไอซทมบทบาทต์(อการเปีลี%ยนแปีลีงท�*ง
ทางด�าน สุ�งคม เศรษฐก-จ การเม$อง การศ.กษา สุาธารณะสุ�ข แลีะการ เพั-%มค�ณภาพัชื่ว็-ต์คว็ามเปี4นอย5( แม�แต์(การศ.กษา เทคโนโลียทางด�านไอ
ซทก�มบทบาทท%สุ6าค�ญDigital Ecosystem เราอย5(ในสุ-%งแว็ดลี�อมข�อม5ลีข(าว็สุาร เปี4น
ข�อม5ลีข(าว็สุาร คว็ามร5 �ระบบเปี8ด ท% เข�าถึ.งได�ง(าย แลีะรว็ดเร�ว็ มเคร$%อง ม$อชื่(ว็ยเรยนร5 � ท6าให�ร5ปีแบบการศ.กษาเปีลี%ยนไปีจากเด-มมาก
ท�กษะทางด�านด-จ-ต์อลี Digital literacy จ.งมคว็ามสุ6าค�ญต์(อการ ศ.กษา เพัราะชื่ว็-ต์ในอนาคต์จะเก%ยว็โยงก�บเคร$%องจ�กรเคร$%องม$อท%สุมา
ร�ทมากข.*น เปี4นเคร$%องม$อท%ชื่(ว็ยให�เก-ดการเรยนร5 �ในว็-ชื่าการแขนง ต์(างๆ การเรยนร5 �ต์�องท6าได�รว็ดเร�ว็ เรยนร5 �ได�มาก น6าคว็ามร5 �มาใชื่�
ปีระโยชื่น� โดยท%ต์�นท�นของการศ.กษาต์�องต์6%าลีง
เทคโนโลียก�บการศ.กษาในศต์ว็รรษท% 21
3
ในศต์ว็รรษท% 21 ผู้5�คนจ.งต์�องสุามารถึเรยนร5 �สุ-%งต์(างๆได�เอง โดยมเคร$%องม$อทางเทคโนโลียชื่(ว็ย สุามารถึน6าคว็ามร5 �มาค-ด
ว็-เคราะห� สุ�งเคราะห�หาคว็ามร5 �ใหม(ๆ น6าคว็ามร5 �มาใชื่�ในการแก� ปี;ญหาการด6าเน-นงานในชื่ว็-ต์ปีระจ6าว็�น ใชื่�ในการค-ดร-เร-%มให�เก-ด
สุ-%งใหม(ท% เปี4นปีระโยชื่น�ต์(อต์นเองแลีะสุ�งคมหร$อต์(อยอดให�ดย-%งๆข.*นจากเด-ม
ท�กษะทางด�านเทคโนโลีย โดยเฉพัาะไอซทจ.งมคว็ามสุ6าค�ญท%จะ ต์�องเต์รยมให�ก�บผู้5�คนในย�คน* เพั$% อการด6าเน-นชื่ว็-ต์ท%ดใน
อนาคต์ แลีะพั�ฒนาการให�เรยนร5 �ต์(อๆไปีได�
โดย ศ. ย$น ภ5(ว็รว็รรณ
เทคโนโลียก�บการศ.กษาในศต์ว็รรษท% 21
4
ใชื่�เทคโนโลียด�าน ICT เชื่(น tablet, smartphone เรยนได�ท�กท%ท�กเว็ลีา
การเรยนร5 �ของน�กเรยนในศต์ว็รรษท%21
5
เปี4นชื่(องทางต์-ดต์(อสุ$% อสุารระหว็(างคร5 น�กเรยน ผู้5�ปีกครอง เปี4นชื่(องทางในการปีระชื่าสุ�มพั�นธ� ก-จกรรม ข(าว็สุาร เผู้ยแพัร(บทเรยน สุ$% อการเรยนร5 � ม�ลีต์-ม-เดย ต์(าง ๆ เผู้ยแพัร(ผู้ลีงาน portflolio ของคร5แลีะน�กเรยน
เว็�บไซต์�เพั$% อสุ(งเสุร-มให�เก-ดการเรยนร5 �
6
เว็�บไซต์� (Website) และเว็�บเพจ (Webpage) เอกสุารหร$อสุ(ว็นท%ต์-ดต์(อก�บผู้5� ใชื่�ในเว็�บ เรยกว็(า เว็�บเพัจ (Webpage)
หมายถึ.งเอกสุารหน.% งหน�า การใชื่�เว็�บก�ค$อการเปี8ดอ(านหร$อเปี8ดใชื่�เว็�บ แต์(ลีะหน�าน�%นเอง เว็�บเพัจอาจสุร�างข.*นด�ว็ยภาษาคอมพั-ว็เต์อร� เชื่(น
HTML, ASP, PHP, JAVA ฯลีฯ เม$% อน6าเว็�บเพัจหลีาย ๆ หน�ามารว็มก�น แลีะระบ�อย5( ในอ-นเต์อร�เน�ต์ หร$อ ย5
อาร�แอลี (Uniform Resource Locator – URL) ให�ก�บเว็�บเพัจ กลี�(มน�*นจะเรยกว็( เว็�บไซต์� (Web Site) เม$% อเปี8ดเว็�บไซต์�ข.*นมาจะพับก�บ
หน�าแรกของเว็�บไซต์� ซ.%งเรยกว็(าโฮมเพัจ (Homepage) ซ.%งเปี4น หน�าท% สุ6าค�ญท%สุ�ดแลีะเปี4นหน�าท%จะเชื่$% อมโยงไปีย�งเว็�บเพัจแลีะเว็�บไซต์�อ$% น
ๆ
เว็�บไซต์� ค$ออะไร
7
เว็�บเบราเซอร� (Web Browser) ค$อโปีรแกรมท% ใชื่�สุ6าหร�บเปี8ดเว็�บเพัจ หร$อ ร�บสุ(งข�อม5ลีต์ามท% เคร$%องลี5กข(ายร�องขอเม$% อเราเปี8ดเข�าสุ5(
อ-นเต์อร�เน�ต์ เว็�บเบราเซอร�ท% ได�ร�บคว็ามน-ยมปี;จจ�บ�นมหลีายโปีรแกรม เชื่(น Microsoft Internet Explorer (IE), Chrome, Safari,
Mozilla Firefox, แลีะ Opera
เว็�บเบราเซอร� (WEB BROWSER)
8
ภาษา HTML ย(อมาจากค6าว็(า Hypertext Markup Language เปี4นภาษาท% ใชื่�สุ6าหร�บสุร�างเว็�บเพัจ โดยจะได�ร�บ
การแปีลีหร$อการแสุดงผู้ลีโดยเว็�บ เบราเซอร�ซ.%งสุามารถึแสุดง ได�ท�*งข�อคว็าม ภาพั แลีะเสุยง
ภาษา HTML5 ค$อภาษาท%ถึ5กพั�ฒนาข.*นเพั$% อใชื่�เปี4นภาษา มาร�กอ�พั สุ6าหร�บการเขยน Website ร� (นลี(าสุ�ด ท% ได�ถึ5กพั�ฒนา ข.*นมาโดย WHATWG (The Web Hypertext
Application Technology Working Group)โดยได�ม การปีร�บเพั-%ม Feature หลีายๆอย(างเข�ามาเพั$% อให�ผู้5�พั�ฒนา
สุามารถึใชื่�งานได�ง(ายมากย-%งข.*น
ภาษาท% ใชื่�สุร�างเว็�บไซต์�
9
คุ�ณสมบ�ต์�ใหม�ของ HTML 5
Semantic Markup : การเพั-%ม Element ท% อ( านง(ายมากข.*น แลีะชื่(ว็ยให� เราท6า SEO ได�มปีระสุ-ทธ-ภาพัมากย-%งข.*น
Form Enhancements : เพั-%มคว็ามสุามารถึของ Form ต์(างๆ ไม(ว็(าจะ เปี4น Input type, Attribute หร$อ แม�แต์( Element
Audio / Video: รองร�บการอ(านไฟลี�เสุยง แลีะ ว็ด โอ โดยไม(จ6าเปี4นต์�องใชื่�Embed Code ของ Third Party
Canvas : ใชื่�ในการว็าดร5ปี โดยจ6าเปี4นต์�องใชื่� Javascript ชื่(ว็ยContentEditable : สุามารถึแก�ไข Content ได� โดยต์รงผู้(านทางหน�าเว็�บDrag and Drop : ลีากว็างObject ได� เพั$% อเพั-%มการ ต์อบสุนองระหว็(างระบบก�บผู้5� ใชื่�
Persistent Data Storage : มการจ�ดการท%ดข.*น โดยเก�บข�อม5ลีลีงบนเคร$%องของผู้5� ใชื่�
คุ�ณสมบ�ต์�ใหม�ของ HTML 5
10
หลี�กการออกแบบเว็�บไซต์�สุามารถึแบ(งออกเปี4นข�*นต์อนต์(าง ๆ เพั$% อให�เหมาะสุมก�บผู้5�เร-%มต์�นใชื่�เปี4นแนว็ทาง ในการสุร�างแลีะ
พั�ฒนาเว็�บไซต์�
1. การว็างแผู้น2. การก6าหนดเน$* อหาแลีะจ�ดปีระสุงค�ของเว็�บไซต์�3. การก6าหนดกลี�(มเปี?าหมาย4. การเต์รยมข�อม5ลี5. การเต์รยมสุ-%งต์(าง ๆ ท%จ6าเปี4น
หลี�กการออกแบบเว็�บไซต์�
11
การก6าหนดเน$* อหาแลีะจ�ดปีระสุงค�ของเว็�บไซต์�
การก6าหนดเน$* อหาแลีะจ�ดปีระสุงค�ของเว็�บไซต์�ท%จะสุร�าง น�บเปี4นสุ-%งสุ6าค�ญ อย(างมากในการเร-%มต์�นสุร�างเว็�บไซต์�เลียทเดยว็ เพั$% อให�เห�นภาพัว็(าเรา
ต์�องการน6าเสุนอข�อม5ลีแบบใด เชื่(น เว็�บไซต์�เพั$% อให�ข�อม5ลีข(าว็สุาร การ บร-การด�านต์(าง ๆ หร$อขายสุ-นค�า เปี4นต์�น เม$% อสุามารถึก6าหนดจ�ดปีระสุงค�
ของเว็�บไซต์�ได�แลี�ว็ เง$% อนไขเหลี(าน*จะเปี4นต์�ว็ก6าหนดโครง สุร�างร5ปีแบบ รว็มถึ.งหน�าต์า แลีะสุเว็�บไซต์�ของเราด�ว็ย
หลี�กการออกแบบเว็�บไซต์�
12
การก าหนดกล��มเป้$าหมาย
เพั$% อให�การสุร�างแลีะออกแบบเว็�บไซต์�ได�ร�บคว็ามน-ยม การก6าหนดกลี�(มเปี?าหมายในการเข�าชื่มเว็�บไซต์�ก�น�บว็(ามสุ(ว็นสุ6าค�ญ
ไม(น�อย เชื่(น เว็�บไซต์�สุ6าหร�บเยาว็ชื่น น�กเรยน น�กศ.กษาในการ ค�นหาข�อม5ลี หร$อเว็�บไซต์�สุ6าหร�บบ�คคลีท�%ว็ไปีท% เข�าไปีใชื่�บร-การ
ต์(าง ๆ เปี4นต์�น
น�กเรยน ? ระด�บชื่�*น?
หลี�กการออกแบบเว็�บไซต์�
13
การเต์รยมข�อม5ลีเน$* อหาหร$อข�อม5ลีจ�ดว็(าเปี4นสุ-%งท% เชื่-ญชื่ว็นให�ผู้5�อ$% นเข�ามา
เย%ยมชื่มเว็�บไซต์� แลีะต์�องทราบว็(าข�อม5ลีข(าว็สุารต์(าง ๆ สุามารถึ น6ามาจากแหลี(งใดบ�าง เชื่(น การค-ดน6าเสุนอข�อม5ลีด�ว็ยต์�ว็เอง
หร$อน6าข�อม5ลีท%น(าสุนใจมาจากสุ$% ออ$% น เชื่(น หน�งสุ$อพั-มพั� แมกกาซน เว็�บไซต์� แลีะท%สุ6าค�ญ ขออน�ญาต์เจ�าของบทคว็าม
ก(อนเพั$% อปี?องก�นเร$%องลี-ขสุ-ทธ-@ด�ว็ย
หลี�กการออกแบบเว็�บไซต์�
14
การเต์รยมสุ-%งต์(าง ๆ ท%จ6าเปี4น ในการออกแบบเว็�บไซต์�ต์�องอาศ�ยคว็ามสุามารถึต์(าง ๆ
เชื่(น- โปีรแกรมสุ6าหร�บสุร�างเว็�บไซต์�- ภาพัเคลี$% อนไหว็ ม�ลีต์-มเดย- การจดโดเมนเนม- การหาผู้5�ให�บร-การร�บฝากเว็�บไซต์� (Web Hosting) เปี4นต์�น
หลี�กการออกแบบเว็�บไซต์�
15
เม$% อได�ข�อม5ลีต์(าง ๆ เชื่(น ก6าหนดเน$* อหาแลีะจ�ดปีระสุงค�ของเว็�บไซต์� การก6าหนด กลี�(มเปี?าหมาย การเต์รยมข�อม5ลี การเต์รยมสุ-%งต์(าง ๆ ท%จ6าเปี4นจากข�*นแรก เรยบร�อยแลี�ว็ ในข�*นต์อนน* เราจะจ�ดระบบเพั$% อใชื่�เปี4นกรอบสุ6าหร�บการออกแบบ
แลีะด6าเน-นการในข�*นต์อนต์(อไปี ซ.%งมรายลีะเอยด ด�งน*1. โครงสุร�างแลีะสุารบ�ญของเว็�บไซต์�2. การใชื่�ระบบน6าผู้5� เข�าชื่มไปีย�งสุ(ว็นต์(าง ๆ ภายในเว็�บไซต์�หร$อท% เราเรยกว็(า
ระบบน6าทาง (Navigation)3. องค�ปีระกอบท%ต์�องน6ามาใชื่� เชื่(น สุ$% อม�ลีต์-มเดย ภาพักราฟ8ก แบบฟอร�มต์(าง
ๆ4. การก6าหนดร5ปีแบบแลีะลี�กษณะของเว็�บเพัจ5. การก6าหนดฐานข�อม5ลี ภาษาสุคร-ปีต์�หร$อแอปีพัลี- เคชื่�นท%น6ามาใชื่�ในเว็�บไซต์�6. การบร-การเสุร-มต์(าง ๆ7. การออกแบบเว็�บไซต์�
การจ�ดโคุรงสร'างข'อม(ล
16
ในการออกแบบร5ปีร(าง โครงสุร�างแลีะลี�กษณะทางด�าน กราฟ8กของหน�าเว็�บเพัจโดย โปีรแกรมท% เหมาะสุมในการ
ออกแบบค$อ Photoshop หร$อ Fireworks ซ.%งจะชื่(ว็ยใน การสุร�างเค�าโครงของหน�าเว็�บแลีะองค�ปีระกอบต์(าง ๆ เชื่(น
ชื่$% อเว็�บไซต์� โลีโก� ร5ปีไอคอน ปี�Bมไอคอน ภาพัเคลี$% อนไหว็ แบนเนอร�โฆษณา เปี4นต์�น
ในการออกแบบเว็�บไซต์�น�*นย�งต์�องค6าน.งถึ.งสุสุ�นแลีะร5ปีแบบ ของสุ(ว็นปีระกอบต์(าง ๆ ท% ไม(ใชื่(ภาพักราฟ8ก เชื่(น ขนาดของต์�ว็
อ�กษร สุของข�อคว็าม สุพั$* น ลีว็ดลีายของเสุ�นกรอบเพั$% อคว็าม สุว็ยงามแลีะด.ง ด5ดผู้5�เย%ยมชื่มด�ว็ย
การออกแบบสุแลีะโครงสุร�าง
17
เราสุามารถึจ6าแนกสุ(ว็นปีระกอบของหน�าเว็�บเพัจ เปี4น 3 สุ(ว็น ด�งน*
1. ส�ว็นห�ว็ (Page Header) น(าจะอย5(บร-เว็ณบนสุ�ดของหน�า เว็�บเพัจ เปี4นสุ(ว็นท%แสุดงชื่$% อ เว็�บไซต์� โลีโก� แบนเนอร�โฆษณาลี-งก�
สุ6าหร�บข�ามไปีย�งหน�าเว็�บอ$% น2. ส�ว็นเน)* อหา (Page Body) จะอย5(บร-เว็ณต์อนกลีางของหน�า
เว็�บเพัจ ซ.%งเปี4นสุ(ว็นท%แสุดงเน$* อหาภายในหน�าเว็�บเพัจน�*น โดย ปีระกอบด�ว็ยข�อคว็าม ข�อม5ลี ภาพัเคลี$% อนไหว็ เปี4นต์�น
3. ส�ว็นท้'าย (Page Footer) จะอย5(บร-เว็ณด�านลี(างสุ�ดของ หน�าเว็�บเพัจ สุ(ว็นมากใชื่�สุ6าหร�บลี-งก�ข�อคว็ามสุ�*น ๆ เข�าใจง(าย หร$อจะ
มชื่$% อเจ�าของเว็�บไซต์� อเมลีแอดเดรสุของผู้5�ด5แลีเว็�บไซต์�สุ6าหร�บต์-ดต์(อ ก�บทางเว็�บไซต์�
ส�ว็นป้ระกอบของหน'าเว็�บเพจ
18
•อ-นเทอร�เน�ต์เร�ว็•คนใชื่�ม$อถึ$อเข�าเว็�บอย(างแพัร(หลีาย• คนสุมาธ-สุ�*น ยาว็ไปีไม(อ(าน• คอมพั-ว็เต์อร�แพัร(หลีาย คนค��นเคยก�บการใชื่�คอมพัอคว็ร
แนว็โน�มการออกแบบเว็�บไซต์� ปี� 2014
19
ท6าให�การท6าเว็�บในปี;จจ�บ�น สุามารถึใสุ(เน$* อหาได�หลีากหลีาย ท�*งข�อคว็าม / ร5ปีภาพั / ว็-ดโอ แต์(ว็(าต์�องสุ�*น กระชื่�บ เข�าใจง(าย แบ(งเน$* อหาเปี4นสุ(ว็นๆ
(section) โดยแต์(ลีะสุ(ว็นมปีระเด�นชื่�ดเจนเพัราะคนมสุมาธ-สุ�*น สุ�*นชื่นาด ท% The Next Web กลี(าว็ว็(า ถึ�าไม(ใชื่(บลี�อก การน6าเสุนอสุ(ว็นใหญ(ม�กจะ
ไม(เก-น 250 ต์�ว็อ�กษร การออกแบบกราฟฟ8ค การใชื่� icon ลีายเสุ�นท% เรยบง(าย แลีะนอกจากน�*น หลีายๆ เว็�บ คนเร-%มเข�าด�ว็ยม$อถึ$อมากกว็(าคอมพั-ว็เต์อร�
แลี�ว็ น�%นแปีลีว็(า เราต์�องเต์รยมเว็�บให�แสุดงผู้ลีบนม$อถึ$อได�เร�ว็แลีะอ(าน ง(ายด�ว็ย ซ.%งแนว็ทางหลี�กๆ เรยกว็(าการท6าเว็�บแบบ Responsive
แนว็โน�มการออกแบบเว็�บไซต์� ปี� 2014
20
ไปีท% www.wix.com เต์รยม facebook ACCOUNT
มาสุร�างเว็�บไซต์�ด�ว็ย WIX: HTML5 EDITOR
21
