Weitere ähnliche Inhalte
Ähnlich wie Ict promotes learning (1) (20)
Ict promotes learning (1)
- 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
- 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
- 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