1. ICT PROMOTES LEARNING
:HTML5 WEBSITE FOR 21ST
CENTURY LEARNERS
การพัฒนาเว็บไซต์ด้วย HTML5
อ.ดร. สุมาลี เฮงยศมาก
Email: sumalee.h@ubu.ac.th
1

2. เทคโนโลยีกับการศึกษาในศตวรรษที่ 21
 หลังจากปี ค.ศ. 2000 เทคโนโลยีทางด้านไอซีทีได้มีบทบาทเชื่อมโยง เกี่ยวพันไปใน
ทุกๆด้าน ไอซีทีมีบทบาทต่อการเปลี่ยนแปลงทั้งทางด้าน สังคม เศรษฐกิจ การเมือง
การศึกษา สาธารณะสุข และการเพิ่มคุณภาพชีวิตความเป็นอยู่ แม้แต่การศึกษา
เทคโนโลยีทางด้านไอซีทีก็มีบทบาทที่สาคัญ
 Digital Ecosystem เราอยู่ในสิ่งแวดล้อมข้อมูลข่าวสาร เป็นข้อมูลข่าวสาร
ความรู้ระบบเปิด ที่เข้าถึงได้ง่าย และรวดเร็ว มีเครื่องมือช่วยเรียนรู้ ทาให้รูปแบบ
การศึกษาเปลี่ยนไปจากเดิมมาก
 ทักษะทางด้านดิจิตอล Digital literacy จึงมีความสาคัญต่อการศึกษา
เพราะชีวิตในอนาคตจะเกี่ยวโยงกับเครื่องจักรเครื่องมือที่สมาร์ทมากขึ้น เป็น
เครื่องมือที่ช่วยให้เกิดการเรียนรู้ในวิชาการแขนงต่างๆ การเรียนรู้ต้องทาได้รวดเร็ว
เรียนรู้ได้มาก นาความรู้มาใช้ประโยชน์ โดยที่ต้นทุนของการศึกษาต้อ งต่าลง
2

3. เทคโนโลยีกับการศึกษาในศตวรรษที่ 21
 ในศตวรรษที่ 21 ผู้คนจึงต้องสามารถเรียนรู้สิ่งต่างๆได้เอง โดยมีเครื่องมือทาง
เทคโนโลยีช่วย สามารถนาความรู้มาคิด วิเคราะห์ สังเคราะห์หาความรู้ใหม่ๆ นา
ความรู้มาใช้ในการแก้ปัญหาการดาเนินงานในชีวิตประจาวัน ใช้ในการคิดริเริ่มให้
เกิดสิ่งใหม่ที่เป็นประโยชน์ต่อตนเองและสังคมหรือต่อยอดให้ดียิ่งๆขึ้นจากเดิม
 ทักษะทางด้านเทคโนโลยี โดยเฉพาะไอซีทีจึงมีความสาคัญที่จะต้องเตรียมให้กับ
ผู้คนในยุคนี้ เพื่อการดาเนินชีวิตที่ดีในอนาคต และพัฒนาการให้เรียนรู้ต่อๆไปได้
โดย ศ. ยืน ภู่วรวรรณ
3

4. การเรียนรู้ของนักเรียนในศตวรรษที่ 21
 ใช้เทคโนโลยีด้าน ICT เช่น tablet, smar tphone
 เรียนได้ทุกที่ทุกเวลา
4

5. เว็บไซต์เพื่อส่งเสริมให้เกิดการเรียนรู้
 เป็นช่องทางติดต่อสื่อสารระหว่างครู นักเรียน ผู้ปกครอง
 เป็นช่องทางในการประชาสัมพันธ์ กิจกรรม ข่าวสาร
 เผยแพร่บทเรียน สื่อการเรียนรู้ มัลติมิเดีย ต่าง ๆ
 เผยแพร่ผลงาน por tflol io ของครูและนักเรียน
5

6. เว็บไซต์ คืออะไร
 เว็บไซต์ (Website) และเว็บเพจ (Webpage)
เอกสารหรือส่วนที่ติดต่อกับผู้ใช้ในเว็บ เรียกว่า เว็บ เพจ (Webpage) หมายถึงเอกสารหนึ่ง
หน้า การใช้เว็บก็คือการเปิดอ่านหรือเปิดใช้เว็บแต่ละหน้านั่นเอง เว็บเพจอาจสร้างขึ้นด้วย
ภาษาคอมพิวเตอร์ เช่น HTML, ASP, PHP, JAVA ฯลฯ
 เมื่อนาเว็บเพจหลาย ๆ หน้ามารวมกัน และระบุอยู่ในอินเตอร์เน็ต หรือ ยูอาร์แอล (Uni form
Resource Locator – URL) ให้กับเว็บเพจกลุ่มนั้นจะเรียกว่เว็บไซต์ (Web Site)
เมื่อเปิดเว็บไซต์ขึ้นมาจะพบกับหน้าแรกของเว็บไซต์ซึ่งเรียกว่าโฮมเพจ (Homepage) ซึ่ง
เป็นหน้าที่ สาคัญที่สุดและเป็นหน้าที่จะเชื่อมโยงไปยังเว็บเพจและเว็บไซต์อื่น ๆ
6

7. เว็บเบราเซอร์ (WEB BROWSER)
 เว็บเบราเซอร์ (Web Browser) คือโปรแกรมที่ใช้สาหรับเปิดเว็บเพจหรือ รับส่งข้อมูลตามที่
เครื่องลูกข่ายร้องขอเมื่อเราเปิดเข้าสู่อินเตอร์เน็ต เว็บเบราเซอร์ที่ได้รับความนิยมปัจจุบันมีหลาย
โปรแกรม เช่น Microsof t Internet Explorer ( IE) , Chrome, Safari,
Mozi lla Firefox, และ Opera
7

8. ภาษาที่ใช้สร้างเว็บไซต์
 ภาษา HTML ย่อมาจากคาว่า Hypertext Markup
Language เป็นภาษาที่ใช้สาหรับสร้างเว็บเพจ โดยจะได้รับการแปลหรือการ
แสดงผลโดยเว็บ เบราเซอร์ซึ่งสามารถแสดงได้ทั้งข้อความ ภาพ และเสียง
 ภาษา HTML5 คือภาษาที่ถูกพัฒนาขึ้นเพื่อใช้เป็นภาษามาร์กอัพ สาหรับการ
เขียน Website รุ่นล่าสุด ที่ได้ถูกพัฒนาขึ้นมาโดย WHATWG (The Web
Hyper text Application Technology Working Group)โดยได้
มีการปรับเพิ่ม Feature หลายๆอย่างเข้ามาเพื่อให้ผู้พัฒนาสามารถใช้งานได้ง่าย
มากยิ่งขึ้น
8

9. คุณสมบัติใหม่ของ HTML 5
คุณสมบัติใหม่ของ HTML 5
 Semantic Markup : การเพิ่ม Element ที่ อ่านง่ายมากขึ้น และช่วยให้ เราทา SEO
ได้มีประสิทธิภาพมากยิ่งขึ้น
 Form Enhancements : เพิ่มความสามารถของ Form ต่างๆ ไม่ว่าจะเป็น Input
type, Attribute หรือ แม้แต่ Element
 Audio / Video: รองรับการอ่านไฟล์เสียง และ วีดีโอ โดยไม่จาเป็นต้องใช้ Embed
Code ของ Third Par ty
 Canvas : ใช้ในการวาดรูป โดยจาเป็นต้องใช้ Javascript ช่วย
 ContentEditable : สามารถแก้ไข Content ได้โดยตรงผ่านทางหน้าเว็บ
 Drag and Drop : ลากวางObject ได้ เพื่อเพิ่มการ ตอบสนองระหว่างระบบกับผู้ใช้
 Persistent Data Storage : มีการจัดการที่ดีขึ้น โดยเก็บข้อมูลลงบนเครื่องของ ผู้ใช้
9

10. หลักการออกแบบเว็บไซต์
หลักการออกแบบเว็บไซต์สามารถแบ่งออกเป็นขั้นตอนต่าง ๆ เพื่อให้เหมาะสมกับผู้
เริ่มต้นใช้เป็นแนวทาง ในการสร้างและพัฒนาเว็บไซต์
1. การวางแผน
2. การกาหนดเนื้อหาและจุดประสงค์ของเว็บไซต์
3. การกาหนดกลุ่มเป้าหมาย
4. การเตรียมข้อมูล
5. การเตรียมสิ่งต่าง ๆ ที่จาเป็น
10

11. หลักการออกแบบเว็บไซต์
การกาหนดเนื้อหาและจุดประสงค์ของเว็บไซต์
 การกาหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ที่จะสร้าง นับเป็นสิ่งสา คัญอย่างมากในการเริ่มต้น
สร้างเว็บไซต์เลยทีเดียว เพื่อให้เห็นภาพว่าเราต้องการนาเสนอข้อมูลแบบใด เช่น เว็บไซต์เพื่อให้
ข้อมูลข่าวสาร การบริการด้านต่าง ๆ หรือขายสินค้า เป็นต้น เมื่อสามารถกาหนดจุดประสงค์ของ
เว็บไซต์ได้แล้ว เงื่อนไขเหล่านี้จะเป็นตัวกาหนดโครง สร้างรูปแบบรวมถึงหน้าตา และสีเว็บไซต์
ของเราด้วย
11

12. การกา หนดกลุ่มเป้าหมาย
 เพื่อให้การสร้างและออกแบบเว็บไซต์ได้รับความนิยม การกาหนดกลุ่มเป้าหมายใน
การเข้าชมเว็บไซต์ก็นับว่ามีส่วนสาคัญไม่น้อย เช่น เว็บไซต์สาหรับเยาวชน นักเรียน
นักศึกษาในการค้นหาข้อมูล หรือเว็บไซต์สาหรับบุคคลทั่วไปที่เข้าไปใช้บริการต่าง ๆ
เป็นต้น
 นักเรียน ? ระดับชั้น?
หลักการออกแบบเว็บไซต์
12

13.  การเตรียมข้อมูล
หลักการออกแบบเว็บไซต์
เนื้อหาหรือข้อมูลจัดว่าเป็นสิ่งที่เชิญชวนให้ผู้อื่นเข้ามาเ ยี่ยมชมเว็บไซต์ และ
ต้องทราบว่าข้อมูลข่าวสารต่าง ๆ สามารถนามาจากแหล่งใดบ้าง เช่น การคิดนา เสนอ
ข้อมูลด้วยตัวเอง หรือนาข้อมูลที่น่าสนใจมาจากสื่ออื่น เช่น หนังสือพิมพ์ แมกกาซีน
เว็บไซต์ และที่สาคัญ ขออนุญาตเจ้าของบทความก่อนเพื่อป้ องกันเรื่องลิขสิทธิดด้วย
13

14. หลักการออกแบบเว็บไซต์
 การเตรียมสิ่งต่าง ๆ ที่จาเป็น
ในการออกแบบเว็บไซต์ต้องอาศัยความสามารถต่าง ๆ เช่น
- โปรแกรมสาหรับสร้างเว็บไซต์
- ภาพเคลื่อนไหว มัลติมีเดีย
- การจดโดเมนเนม
- การหาผู้ให้บริการรับฝากเว็บไซต์ (Web Hosting) เป็นต้น
14

15. เมื่อได้ข้อมูลต่าง ๆ เช่น กาหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ การกาหนดกลุ่มเ ป้าหมาย การ
เตรียมข้อมูล การเตรียมสิ่งต่าง ๆ ที่จาเป็นจากขั้นแรกเรียบร้อยแล้ว ในขั้นตอนนี้ เราจะจัดระบบเพื่อ
ใช้เป็นกรอบสาหรับการออกแบบและดาเนินการในขั้นตอนต่อไป ซึ่งมีรายละเอียด ดังนี้
1. โครงสร้างและสารบัญของเว็บไซต์
2. การใช้ระบบนาผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่าระบบนา ทาง
(Navigation)
3. องค์ประกอบที่ต้องนามาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่าง ๆ
4. การกาหนดรูปแบบและลักษณะของเว็บ เพจ
5. การกาหนดฐานข้อมูล ภาษาสคริปต์หรือ แอปพลิเคชันที่นามาใช้ในเว็บไซต์
6. การบริการเสริมต่าง ๆ
7. การออกแบบเว็บไซต์
15
การจัดโครงสร้างข้อมูล

16.  ในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้านกราฟิกของหน้าเว็บเพจโดย
โปรแกรมที่เหมาะสมในการออกแบบคือ Photoshop หรือ Fireworks ซึ่ง
จะช่วยในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่าง ๆ เช่น ชื่อเว็บไซต์ โล
โก้ รูปไอคอน ปุ่มไอคอน ภาพเคลื่อนไหว แบนเนอร์โฆษณา เป็นต้น
 ในการออกแบบเว็บไซต์นั้นยังต้องคานึงถึงสีสันและรูปแบบของส่วนประก อบต่าง ๆ
ที่ไม่ใช่ภาพกราฟิก เช่น ขนาดของตัวอักษร สีของข้อความ สีพื้น ลวดลายของเส้น
กรอบเพื่อความสวยงามและดึง ดูดผู้เยี่ยมชมด้วย
16
การออกแบบสีและโครงสร้าง

17.  เราสามารถจาแนกส่วนประกอบของหน้าเว็บเพจ เป็น 3 ส่วน ดังนี้
1. ส่วนหัว (Page Header) น่าจะอยู่บริเวณบนสุดของหน้าเว็บเพจ เป็นส่วนที่
แสดงชื่อ เว็บไซต์ โลโก้ แบนเนอร์โฆษณาลิงก์สาหรับข้ามไปยังหน้าเว็บอื่น
2. ส่วนเนื้อหา (Page Body) จะอยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึ่งเป็น
ส่วนที่แสดงเนื้อหาภายในหน้าเว็บเพจนั้น โดยประกอบด้วยข้อความ ข้อมูล
ภาพเคลื่อนไหว เป็นต้น
3. ส่วนท้าย (Page Footer) จะอยู่บริเวณด้านล่างสุดของหน้าเว็บเพจ
ส่วนมากใช้สาหรับลิงก์ข้อความสั้น ๆ เข้าใจง่าย หรือจะมีชื่อเจ้าของเว็บไซต์ อีเมล
แอดเดรสของผู้ดูแลเว็บไซต์สาหรับติดต่อกับทางเว็บไซต์
17
ส่วนประกอบของหน้าเว็บเพจ

18.  •อินเทอร์เน็ตเร็ว
 •คนใช้มือถือเข้าเว็บอย่างแพร่หลาย
 •คนสมาธิสั้น ยาวไปไม่อ่าน
 •คอมพิวเตอร์แพร่หลาย คนคุ้นเคยกับการใช้คอมพอควร
18
แนวโน้มการออกแบบเว็บไซต์ ปี 2014

19.  ทาให้การทาเว็บในปัจจุบัน สามารถใส่เนื้อหาได้หลากหลาย ทั้งข้อความ / รูปภาพ / วิดีโอ แต่ว่า
ต้องสั้น กระชับ เข้าใจง่าย แบ่งเนื้อหาเป็นส่วนๆ (section) โดยแต่ละส่วนมีประเด็นชัดเจน
เพราะคนมีสมาธิสั้น สั้นชนาดที่ The Next Web กล่าวว่า ถ้าไม่ใช่บล็อก การนา เสนอส่วน
ใหญ่มักจะไม่เกิน 250 ตัวอักษร
 การออกแบบกราฟฟิค การใช้ icon ลายเส้นที่เรียบง่าย
 และนอกจากนั้น หลายๆ เว็บ คนเริ่มเข้าด้วยมือถือมากกว่าคอมพิวเตอร์แล้ว นั่นแปล ว่า เราต้อง
เตรียมเว็บให้แสดงผลบนมือถือได้เร็วและอ่านง่ายด้วย ซึ่งแนวทางหลักๆ เรียกว่าการทาเว็บแบบ
Responsive
19
แนวโน้มการออกแบบเว็บไซต์ ปี 2014

20.  ไปที่ www.wix.com
 เตรียม facebook ACCOUNT
20
มาสร้างเว็บไซต์ด้วย WIX: HTML5 EDITOR

21. 21