Top
 

DIGITAL KIDS (เทคโนโลยี) ป.5 หน่วย 5 เรื่อง การนำเสนอข้อมูลโดยใช้ Blog & Webpage และการสร้างเว็บเพจ

Imagineering Education / บทเรียนวิชาวิทยาการคำนวณ  / DIGITAL KIDS  / DIGITAL KIDS (เทคโนโลยี) ป.5 หน่วย 5 เรื่อง การนำเสนอข้อมูลโดยใช้ Blog & Webpage และการสร้างเว็บเพจ

DIGITAL KIDS (เทคโนโลยี) ป.5 หน่วย 5 เรื่อง การนำเสนอข้อมูลโดยใช้ Blog & Webpage และการสร้างเว็บเพจ

ระดับชั้น : ประถมศึกษาปีที่ 5
หน่วยที่ : 5
เรื่อง : การนำเสนอข้อมูลโดยใช้ Blog & Webpageและการสร้างเว็บเพจ
สาระ : สาระที่ 8 เทคโนโลยี
ตัวชี้วัด :
ว 4.2 ป 5/4 รวบรวม ประเมิน นำเสนอ ข้อมูลและสารสนเทศ ตามวัตถุประสงค์โดยใช้ซอฟต์แวร์หรือบริการบนอินเทอร์เน็ตที่หลากหลาย เพื่อแก้ปัญหาในชีวิตประจำวัน
บทนำของเรื่อง : ICT Literacy คือ ความรู้ความสามารถและทักษะในการประยุกต์ ใช้อุปกรณ์เทคโนโลยี ทั้ง Hardware และ Software ในการสร้าง จัดหมวดหมู่ ค้นหา จัดเก็บ เรียกใช้ข้อมูลได้ตามวัตถุประสงค์ให้เกิดประโยชน์สูงสุดทั้งกับตนเองและส่วนรวมได้อย่างมีประสิทธิภาพและเหมาะสม

การนำเสนอข้อมูล

การนำเสนองานในปัจจุบันในโลกที่การติดต่อสื่อสารก้าวหน้าไปไกล การนำเสนองาน ไม่ได้จำกัดอยู่แค่เพียงการนำเสนอ ด้วยการบอกเล่า โปสเตอร์ รายงานเอกสาร หรือการนำเสนอหน้าชั้นเรียนด้วยโปรแกรมนำเสนอ อีกต่อไป การนำเสนอในยุคประเทศไทย 4.0 จึงควรจะเป็นการนำเสนอผ่านระบบเครือข่ายอินเทอร์เน็ตจึงจะเหมาะสม ซึ่งการนำเสนอในรูปแบบนี้สามารถใช้ Blog หรือ เว็บเพจ สื่อสังคมออนไลน์ Youtube ซึ่งจะไม่ได้เป็นการนำเสนอเพียงแค่หน้าชั้นเรียน แต่สามารถนำเสนอข้อมูลไปยังชุมชนออนไลน์ต่าง ๆ ทำให้การนำเสนอสามารถไปไกลได้มากกว่าที่คิด

การนำเสนอด้วยบล็อก (Blog)
บล็อกเป็นเว็บไซต์รูปแบบหนึ่งที่ผู้เขียนสามารถบันทึกสิ่งที่ต้องการนำเสนอลงไปได้ง่าย รวดเร็ว สะดวกเหมาะสำหรับผู้ที่ไม่อยากสร้างเว็บไซต์เอง จึงเป็นสื่อนิยมใช้กันอย่างแพร่หลาย และหลายประเภท เช่น บล็อกการท่องเที่ยว, การทำอาหาร, งานอดิเรก หรือแม้แต่งานเขียนการ์ตูน, นิยาย ต่าง ๆ เป็นต้น จึงมีเว็บไซต์ที่ให้บริการบล็อกตัวอย่าง เช่น

บล็อก (Blog) ย่อมาจากศัพท์ว่า Weblog Web หมายถึง เว็บไซต์ : Log หมายถึง บันทึก

การนำเสนอด้วยเว็บเพจ (Webpage)
เป็นการนำเสนอข้อมูลหรือสารสนเทศที่ได้ผ่านการประมวลผลแล้ว นำมาสร้างเป็นเว็บเพจให้กับคนทั่วไปได้อ่าน โดยการสร้างเว็บเพจสามารถสร้างโดยใช้โปรแกรม ตัวอย่างเช่น Adobe Dreamweaver, Web Page Maker และยังมีเว็บไซต์สำเร็จรูป (Website Template) ที่ผู้นำเสนอสามารถสร้างเว็บไซต์ได้อย่างรวดเร็ว เช่น wix.com เป็นต้น

มารยาทและข้อควรปฏิบัติในการเขียนบล็อก

การเขียนงานลงในบล็อก Blog เหมือนกับงานเขียนที่ผู้แต่งหนังสือ จะต้องมีจรรยาบรรณในการเขียน มีความรับผิดชอบต่องานเขียนของตนเอง งานเขียนจึงต้องไม่เป็นงานที่คัดลอกผลงานของผู้อื่น ควรเขียนงานที่ใช้ภาษาของตนเอง เขียนโดยไม่สร้างให้เกิดความรุนแรงในสังคม และควรมีหลักฐานอ้างอิงงานเขียน และหากมีผู้วิจารณ์งานเขียนควรจะรับฟังและตอบข้อสงสัยให้กับผู้อ่าน

ตัวอย่างงานเขียนโดยใช้บล็อกของ gotoknow.org
รูปแบบการเขียนงานลงในบล็อก Blog ของเว็บไซต์ต่าง ๆ จะมีคำสั่งที่คล้ายกัน โดยเจ้าของเว็บไซต์บล็อกจะมีคำสั่งที่อำนวยความสะดวกให้ผู้ใช้งานสามารถใช้งานได้ง่าย

Technology Challenge

บล็อกเกอร์คืออะไรหรือ
ลิปดาและโพล่าดูข่าว บอกว่าขณะมีนี้อาชีพที่สามารถสร้างรายได้มากอย่างหนึ่ง คือ Blogger จึงไปถามคุณปู่ว่า บล็อกเกอร์นี้คืออาชีพอะไรหรือคะ คุณปู่บอกว่า บล็อกเกอร์ ก็คือนักเขียนบทความในโลกอินเทอร์เน็ต โดยเขียนบทความที่ผู้คนสนใจ แต่ข้อมูลที่เขียนนั้นต้องผ่านการประมวลผลเป็นสารสนเทศ หรือเป็นข้อมูลจากประสบการณ์ของตนเองโดยไม่มีการคัดลอก

Missions :
1. ให้นักเรียนหาวิธีการเป็น Blogger ที่ดี
2. ให้นักเรียนเลือกหัวข้อที่อยากนำเสนอด้วยการเขียน Blog
3. ให้นักเรียนหาเว็บไซต์ Blog ที่ตรงความต้องการ
4. ให้นักเรียนเขียน Blog และนำมาเสนอหน้าชั้นเรียน
Materials :
1. กระดาษเทาขาว
2. อุปกรณ์เครื่องเขียนอื่น ๆ
3. คอมพิวเตอร์
Ask : Blog และ Blogger คืออะไรมารยาทและข้อควรปฏิบัติในการนำเสนองานด้วย Blog
Plan & Design : ให้วางแผนและแบ่งหน้าที่เพื่อเขียน Blog ตามหัวข้อที่กำหนด

สร้างเว็บไซต์ด้วย Adobe Dreamweaver

เป็นโปรแกรมสำเร็จรูปสำหรับออกแบบเว็บไซต์ WYSIWYG (What – You-See-Is-What-You-Get) โดยผู้พัฒนาเว็บไซต์ สามารถจัดวางภาพหรือข้อความแล้ว โปรแกรมจะทำการเขียนโค้ด (HTML) ให้อัตโนมัติตามการจัดวาง ทำให้ผู้สร้างเว็บเข้ามาแก้ไขได้ง่ายถึงแม้ไม่ถนัดเขียนโค้ดก็ตาม ไม่เหมือนแต่ก่อนที่ผู้พัฒนาเว็บไซต์ต้องเขียนโค้ดเอง

รู้จักกับโปรแกรม Dreamweaver

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

ส่วนประกอบของโปรแกรม

1. Menu Bar เป็นส่วนของคำสั่งทั้งหมดของโปรแกรม
2. Insert Bar เป็นส่วนของชุดคำสั่งที่ใช้ในการออกแบบวางวัตถุ (Object)
3. Tool Bar Document เป็นส่วนชุดคำสั่งในการกำหนดมุมมองการแสดงผลของเว็บเพจ
4. Window Document เป็นพื้นที่สร้างงาน และการจัดองค์ประกอบ
5. Status Bar แถบสถานการณ์ทำงานของโปรแกรม
6. Propoties Inspector ส่วนแสดง หรือกำหนด และแก้ไขคุณสมบัติของวัตถุ
7. Insert Panels เป็นพาเนลที่รวบรวมเครื่องมือต่าง ๆ สำหรับการใช้งาน

Insert Bar เป็น เครื่องมือในการแทรกวัตถุต่าง ๆ เช่น ข้อความ รูปภาพ ตาราง ฟอร์ม ฯลฯ ซึ่งวัตถุเหล่านี้ เมื่อแทรกลงในเว็บเพจจะประกอบด้วย 9 แท็บ (Tab)

1. Tab Common กลุ่มคำสั่งแทรก เส้น ตาราง รูปภาพ ภาพเคลื่อนไหว วันที่และอื่น ๆ

2. Tab Layout กลุ่มคำสั่งที่ใช้ในการกำหนดโครงสร้าง เช่น ตาราง Frame ของหน้าเว็บเพจ

3. Tab Forms กลุ่มคำสั่งในการสร้างแบบฟอร์มเพื่อกรอกข้อมูล

4. Tab Data กลุ่มคำสั่งในการจัดวางและดึงข้อมูลจากฐานข้อมูลมาแสดงบนเว็บ

5. Tab Spry กลุ่มคำสั่งในการตรวจสอบก่อนประมวลผลในการสร้างฟอร์ม

6. Tab jQuery Mobile กลุ่มคำสั่งการใช้งานที่เกี่ยวกับแป้นพิมพ์บนมือถือ

7. Tab Incontext Editing กลุ่มคำสั่งการใช้งานที่เกี่ยวกับการแก้ไข Incontext

8. Tab Text กลุ่มคำสั่งการจัดข้อความภายในเว็บ

9. Tab Favorites กลุ่มคำสั่งที่เพิ่มปุ่มคำสั่งจากปุ่มอื่น เข้ามาเก็บเพื่อความสะดวกในการใช้งาน

Tool Bar Document (มุมมองการทำงาน)
ผู้พัฒนาเว็บไซต์ จะนิยมใช้มุมมองใดในการทำงาน ขึ้นอยู่กับความถนัด ใน CS5 ขึ้นไปจะมีส่วนเครื่องมือ Live เพิ่มขึ้นมาจากเดิม ใช้สำหรับการแสดงผลงานเสมือนจริง

การเตรียมโฟลเดอร์สำหรับการสร้างไซต์ (Site)

การสร้างไซต์ (Site) คือ การสร้างสถานที่(ตำแหน่ง)ที่เก็บข้อมูลของเว็บไซต์ที่จะถูกสร้างขึ้นมาเพื่อจะได้มีตำแหน่งและพื้นที่ในการเก็บข้อมูลอย่างเป็นระเบียบ ให้เป็นหมวดหมู่ ไม่นำไปปะปนกับข้อมูลอื่น และง่ายต่อการจัดการกับเว็บไซต์
ดังตัวอย่างต่อไปนี้

การจัดการกับไซต์ (Manage Site)

เป็นชุดคำสั่งในการบริหารจัดการระบบการจัดเก็บข้อมูลในตำแหน่งต่าง ๆ ซึ่งสามารถจัดการกับไซต์ได้ทั้งการลบ การแก้ไข การคัดลอกไซต์ หรือการส่งออกไฟล์ไซต์ แล้วแต่จุดประสงค์ที่ต้องการ

การสร้างโฟลเดอร์เพิ่ม
ในไซต์ที่สร้างขึ้นมานั้นบางครั้ง สามารถสร้างโฟลเดอร์ไว้เพื่อเก็บข้อมูลแยกประเภทตามที่ต้องการได้โดยการสร้าง โฟลเดอร์ใหม่ ซึ่งสามารถทำได้ดังต่อไปนี้

1. คลิกขวา ที่ site ที่ต้องการสร้างโฟลเดอร์
2. คลิกที่ New Folder สร้างโฟลเดอร์ใหม่
3. ตั้งชื่อโฟล์เดอร์ใหม่ตามต้องการ

การกำหนดคุณสมบัติพื้นฐานของเว็บเพจ

คือ การกำหนด การแสดงผล ขนาดตัวอักษร รูปแบบตัวอักษร ทั้งแบบ HTML และ CSS, การกำหนดการเชื่อมโยง (Link), หัวเรื่อง (Heading), ชื่อและภาษาของเพจ (Title) และ การวางภาพโครงร่าง (Tracing Image) โดยสามารถเข้าไปดูในรายละเอียดได้ที่ Page Properties… หรือกดปุ่ม Ctrl+J แล้วคลิกที่แท็บเพื่อตั้งค่าพื้นฐานดังนี้

กำหนดขนาดหน้าเว็บเพจ

เริ่มสร้างเว็บไซต์

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

การตกแต่งข้อความ

การตกแต่งข้อความจะทำให้การนำเสนอข้อมูลมีความน่าสนใจมากยิ่งขึ้น ไม่ควรพิมพ์เนื้อหาข้อความที่มากเกินไป ควรเว้นระยะเพื่อให้ผู้อ่านสามารถจับใจความได้ โดยทั่วไปจะมีการแบ่งออกเป็น ส่วนของเนื้อหา (Paragraph) , หัวข้อหลัก 1 (Heading 1), หัวข้อหลัก 2 (Heading 2) เป็นต้น ซึ่งแต่ละส่วนจะมีรูปแบบ ขนาด และสีที่แตกต่างกันเพื่อง่ายต่อการอ่าน

วิธีการแทรกพื้นหลังหน้าเว็บเพจ

รูปภาพที่จะนำมาใช้ควรเป็นสีอ่อน ไม่มีลวดลายมากเกินไป เพราะพื้นหลังที่เด่นเกินไป อาจทำให้อ่านเนื้อหาไม่เข้าใจและลายตาได้

1. คลิกที่คำสั่ง Page Properties
2. คลิกปุ่ม Browse เพื่อค้นหารูปภาพ
3. เลือกรูปภาพ ที่ต้องการแล้วคลิกปุ่ม OK
4. เลือกรูปแบบพื้นหลังที่ต้องการแสดง
no-repeat ไม่ทำซ้ำ
repeat ทำซ้ำแบบเต็มหน้า
repeat-x ทำซ้ำแนวตั้งเรียงด้านบน
repeat-y ทำซ้ำแนวตั้งเรียงด้านซ้าย
5. เมื่อต้องการแสดงผลบน Web Browser ให้กดปุ่ม F12 รูปภาพจะปรากฏในหน้าเว็บเพจ

เมื่อเด็ก ๆ แทรกรูปภาพในเว็บเพจแล้วอย่าลืมว่าไฟล์รูปที่นำมาใช้นั้นต้องอยู่ใน Local root folder เท่านั้นนะครับ

ไฮเปอร์ลิงก์ (Hyperlink)

เป็นการเชื่อมโยงเว็บไซต์จาก จุดต้นทางโยงไปยัง จุดปลายทางหรือ เชื่อมต่อเข้าสู่ อีเมล (E-Mail) เพื่อติดต่อสื่อสารกัน การเชื่อมโยงในลักษณะนี้นับว่ามีประโยชน์อย่างมาก เนื่องจากทำให้ผู้เข้าชม สามารถเชื่อมโยงจากจุดหนึ่งไปอีกจุดหนึ่ง ทำให้การนำเสนอไม่ต่อเนื่องยาวในหน้าเดียว โดยการเชื่อมโยงสามารถเชื่อมโยงในเว็บเพจหน้าเดียวกัน หรือ เชื่อมโยงภายในเว็บไซต์เดียวกันและเชื่อมโยงไปยังเว็บไซต์อื่น

การเชื่อมโยงในเว็บเพจเดียวกัน

รายละเอียดการเชื่อมโยง
1. ต้นทาง (Source Anchor) หมายถึง ข้อความหรือรูปภาพที่เป็นลิงก์ เมื่อนำเมาส์ไปชี้จะเปลี่ยนเป็นรูปมือ และเมื่อคลิกจะปรากฏข้อมูลปลายทางขึ้นมา
2. ปลายทาง (Destination Anchor) หมายถึง เนื้อหาข้อมูลต่าง ๆ ไม่ว่าจะเป็นข้อความหรือรูปภาพ ซึ่งถูกเรียกให้ปรากฏขึ้นมาเมื่อมีผู้ชมคลิกที่ลิงก์ต้นทาง

การเชื่อมโยงหน้าเว็บเพจภายในเว็บไซต์เดียวกัน
ก่อนอื่นจะต้องสร้างหน้าเว็บเพจอีกหน้าหนึ่งขึ้นมา ซึ่งการสร้างเว็บเพจแต่ละหน้าจำเป็นต้องสร้างจากเนื้อหามีความเชื่อมโยงกันเพื่อให้ผู้ชมเว็บไซต์ค้นหาข้อมูลต่อเนื่องจากจุดหนึ่งไปอีกจุดหนึ่ง โดยมีขั้นตอนดังนี้

เมื่อต้องการแสดงผลอย่าลืมกดปุ่ม F12 จะเป็นการแสดงผล เว็บไซต์ออกมาให้ดูเป็นหน้าเว็บจริง ๆ ครับ

Target ในแถบ Properties ใช้เพื่อกำหนดแสดงหน้าเว็บเพจที่มารองรับไฟล์ที่เชื่อมโยงไปดังนี้
_blank ให้ทำการเปิด Browser ใหม่ สำหรับไฟล์ที่เชื่อมโยงไป
_self ให้เปิดไฟล์ที่เชื่อมโยงไปกับ Browser ที่เรียกใช้ไฟล์นั้น
_top ให้ทำการเปิดไฟล์ที่เชื่อมโยงไปกับ Browser ปัจจุบัน

การเชื่อมโยงไปยังเว็บไซต์อื่น

1. ลากเมาส์เลือกข้อความหรือรูปภาพสำหรับกำหนดให้เป็นจุดลิงก์ (Link)
2. พิมพ์ชื่อเว็บเพจปลายทาง ให้ใส่ http://จากนั้นตามด้วยชื่อเว็บไซต์ที่ต้องการ http://www.edukids.co.th/
3. กดปุ่ม F12 บนคีย์บอร์ด และคลิกข้อความที่ต้องการ จะแสดงผล Website ที่ต้องการเชื่อมโยง

เว็บไซต์สำเร็จรูป (Website template)

คือ บริการเว็บไซต์สำเร็จรูปหรือเว็บไซต์อัตโนมัติ ที่มีรูปแบบ(Template) ให้ผู้ใช้งานได้เลือกตามความต้องการหรือประเภทของเว็บไซต์ที่ต้องการนำเสนอ เช่น เว็บไซต์เกี่ยวกับอาหาร ความงาม ดนตรี เป็นต้น โดยไม่จำเป็นต้องมีความรู้ในการสร้างเว็บไซต์มากมายก็สามารถทำได้ โดยมีผู้ให้บริการเว็บไซต์สำเร็จรูป เช่น www.wix.com เป็นต้น

เริ่มต้นการใช้งานเว็บไซต์สำเร็จรูป wix.com

1. พิมพ์ชื่อเว็บไซต์สำเร็จรูปที่ต้องการในตัวอย่างนี้คือ www.wix.com
2. คลิกปุ่ม Get started เริ่มต้นเข้าสู่การสร้างเว็บไซต์สำเร็จรูป
3. ให้สมัครสมาชิกหรือ Loginหากเป็นสมาชิกอยู่แล้ว
4. คลิกเลือกรูปแบบประเภทของเว็บไซต์ที่ต้องการ เช่น ธุรกิจ อาหาร ดนตรี
5. คลิกเลือกรูปแบบของ เว็บไซต์ที่ต้องการ แล้วกด Edit เพื่อทำการแก้ไขเว็บไซต์
6. จะสามารถเริ่มต้นสร้างเว็บไซต์สำเร็จรูปได้อย่างง่ายดาย

ภาษา HTML

เป็นภาษาที่ถูกกำหนดขึ้นให้เป็นมาตรฐานในการเขียนเว็บไซต์ ดังนั้นการศึกษาถึงโครงสร้างของภาษา HTML จึงถือเป็นพื้นฐานที่สำคัญอย่างหนึ่ง ในการต่อยอดเพื่อใช้เขียนภาษาคอมพิวเตอร์อื่น ๆ

Technology Challenge

เว็บไซต์ช่วยโลกของฉัน

Investigate Idea : ท่านเค้าท์กำลังทำอะไรอยู่หน้าคอมพิวเตอร์หรือคะลิปดาถาม อ๋อก็กำลังจัดเตรียมข้อมูลเพื่อจะทำเว็บไซต์ นำเสนอข้อมูลงานวิจัยเรื่องการปลูกพืชอย่างไรให้เหมาะกับสภาพอากาศที่จะเปลี่ยนไปในประเทศไทย ลิปดาอยากทำเว็บไซต์บ้างจัง ต้องเตรียมอะไรบ้างคะ
Missions:
1. ให้นักเรียนแต่ละกลุ่มนำข้อมูลจากการประมวลผลเรื่องการจัดการพื้นที่ว่างให้เกิดประโยชน์ในหน่วยที่ 4 มาทำข้อมูลนำเสนอด้วยเว็บเพจ
2. ให้นักเรียนนำเสนอหน้าชั้นเรียน
Materials : 1. คอมพิวเตอร์ 2. อุปกรณ์เครื่องเขียน 3. อุปกรณ์ที่คุณครูกำหนด
หมายเหตุ : หัวข้อคุณครูผู้สอนสามารถเปลี่ยนแปลงเพื่อบูรณาการกับวิชาอื่นตามความเหมาะสม
ASK :
1. การนำเสนอข้อมูลด้วยเว็บไซต์มีประโยชน์อย่างไร
2. ก่อนจะสร้างเว็บไซต์เว็บเพจ นักเรียนต้องเตรียมอะไรบ้าง
3. นักเรียนสามารถใช้โปรแกรมอะไรสร้างเว็บไซต์
Plan&Design : วางแผนและออกแบบการนำเสนอข้อมูลสารสนเทศด้วยการสร้างเว็บเพจ เว็บไซต์
Building&Testing : ให้นักเรียนลงมือทำตามแผนที่กำหนดไว้
Evaluation&Redesign : 
1. นักเรียนสามารถทำภารกิจนี้สำเร็จหรือไม่
2. นักเรียนพบปัญหาในการทำภารกิจนี้หรือไม่
3. นักเรียนมีวิธีการแก้ไขปัญหาอย่างไร