โครงงานคอมพิวเตอร์ เรื่อง เว็บไซต์ NIFTY HEALTH ด้วยภาษา HTML การสร้างเว็บไวต์ด้วยการใช้ภาษา HTML5 และภาษา CSS

1. โครงงานคอมพิวเตอร์
เรื่อง เว็บไซต์ NIFTY HEALTH
จัดทาโดย
เด็กชายพีระวัฒน์ เวทวงษ์ เลขที่ 4
เด็กหญิงธณัชช์ภรณ์ ศิริวัชเดชากุล เลขที่ 25
ชั้นมัธยมศึกษาปีที่ 3
โครงงานฉบับนี้เป็นส่วนหนึ่งของรายวิชาการงานอาชีพและเทคโนโลยี
รหัสวิชา ง23101 ชั้นมัธยมศึกษาปีที่ 3 ภาคเรียนที่ 1 ปีการศึกษา 2560
โรงเรียนเฉลิมพระเกียรติสมเด็จพระศรีนครินทร์ ระยอง
ในพระราชูปถัมภ์สมเด็จพระเทพรัตนราชสุดาฯ สยามบรมราชกุมารี
สังกัดสานักงานเขตพื้นที่การศึกษามัธยมศึกษาเขต 18 (ชลบุรี-ระยอง)

2. โครงงานคอมพิวเตอร์
เรื่อง เว็บไซต์ NIFTY HALTH
จัดทาโดย
เด็กชายพีระวัฒน์ เวทวงษ์ เลขที่ 4
เด็กหญิงธณัชช์ภรณ์ ศิริวัชเดชากุล เลขที่ 25
ชั้นมัธยมศึกษาปีที่ 3
คุณครูที่ปรึกษา
คุณครูชนาธิป ปะทะดวง
โครงงานฉบับนี้เป็นส่วนหนึ่งของรายวิชาการงานอาชีพและเทคโนโลยี
รหัสวิชา ง23101 ชั้นมัธยมศึกษาปีที่ 3 ภาคเรียนที่ 1 ปีการศึกษา 2560
โรงเรียนเฉลิมพระเกียรติสมเด็จพระศรีนครินทร์ ระยอง
ในพระราชูปถัมภ์สมเด็จพระเทพรัตนราชสุดาฯ สยามบรมราชกุมารี
สังกัดสานักงานเขตพื้นที่การศึกษามัธยมศึกษาเขต 18 (ชลบุรี-ระยอง)

3. ก
เกี่ยวกับโครงงาน
โครงงานคอมพิวเตอร์
ชื่อโครงงาน เว็บไซต์ NIFTY HEALTH
ประเภทของโครงงาน โครงงานพัฒนาสื่อเพื่อการศึกษา
กลุ่มสาระการเรียนรู้ การงานอาชีพและเทคโนโลยี
ผู้จัดทา 1. เด็กชายพีระวัฒน์ เวทวงษ์ เลขที่ 4
2. เด็กหญิงธณัชช์ภรณ์ ศิริวัชเดชากุล เลขที่ 27
ระดับชั้น ชั้นมัธยมศึกษาปีที่ 3/5
คุณครูที่ปรึกษา คุณครูชนาธิป ปะทะดวง
สถานศึกษา โรงเรียนเฉลิมพระเกียรติสมเด็จพระศรีนครินทร์ ระยอง
ในพระราชูปถัมภ์สมเด็จพระเทพรัตนราชสุดาฯ สยามบรมราชกุมารี
ปีการศึกษา 2560

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

5. ค
สารบัญ
หน้า
กิตติกรรมประกาศ ก
บทคัดย่อ ข
สารบัญ ค
บทที่ 1 บทนา
1.1 ที่มาและความสาคัญ 1
1.2 จุดมุ่งหมายสาคัญของการทาโครงงาน 1
1.3 วัตถุประสงค์ 1
1.4 แหล่งข้อมูลที่ศึกษา 1
1.5 ขอบเขตการดาเนินงาน 2
บทที่ 2 เอกสารอ้างอิง
2.1 ความหมายของโครงงาน 3
2.2 ประเภทของโครงงาน 3
2.3 ขั้นตอนในการพัฒนาเว็บไซต์ 5
2.4 HTML5 7
2.5 ส่วนประกอบของ HTML5 9
2.6 CSS 18
2.7 CSS กับ HTML / XHTML 18
2.8 10 เรื่องลดความอ้วน ที่คนเข้าใจผิดมากที่สุด ตอนที่ 1 20
2.9 ภาวะโยโย่จากการอดอาหาร เป็นอันตรายต่อสุขภาพของคุณ 26
2.10 7 วิธีสู่การมีรูปร่างดีโดยไม่พึ่งฟิตเนส 29
2.11 8 อาหารที่อุดมไปด้วยแมกนีเซียม เหมาะกับการไดเอท 31
บทที่ 3 อุปกรณ์และวิธีดาเนินการศึกษา
3.1 อุปกรณ์และซอฟต์แวร์ที่ใช้ในการพัฒนา 38
3.2 วิธีดาเนินการ 39
3.3 วิธีการเก็บรวบรวมข้อมูล 40

6. ง
สารบัญ
หน้า
บทที่ 4 ผลการทดลอง
4.1 บันทึกผลการดาเนินงาน 40
4.2 ผลการดาเนินงาน 41
4.3 การปฏิบัติกิจกรรม 48
บทที่ 5 สรุปผลการทดลอง
5.1 สรุปผลการพัฒนาโครงงาน 49
5.2 อภิปรายผล 49
5.3 ข้อเสนอแนะจากการพัฒนาโครงงาน 49
5.4 ข้อเสนอแนะในการพัฒนาโครงงานครั้งต่อไป 49
บรรณานุกรม 50
ประวัติผู้เขียน 51

7. บทที่ 1
บทนา
1.1 จุดมุ่งหมายสาคัญของการทาโครงงาน
โครงงานพัฒนาสื่อเพื่อการศึกษา โครงงานนี้พัฒนาขึ้นเพื่อใช้ประกอบการเรียนรู้เกี่ยวกับการดูแลสุขภาพ
และการลดความอ้วน จุดสาคัญของโครงงานอยู่ที่เนื้อหาซึ่งมีความน่าสนใจ และส่วนติดต่อผู้ใช้ที่มีความ
สวยงาม โดยผู้จัดทาคัดเลือกหัวข้อที่โดยทั่วไปแล้ว มีแหล่งการเรียนรู้ และแหล่งข้อมูลอยู่หลายแหล่ง จึง
นามาจัดรวมกันเป็นเว็บไซต์ เพื่อให้มีความสะดวกในการค้นหาข้อมูลเกี่ยวกับการดูแลสุขภาพและการลด
ความอ้วน
1.2 วัตถุประสงค์
1.2.1. เพื่อจัดทาสื่อการเรียนรู้เกี่ยวกับการดูแลสุขภาพ
1.2.2. เพื่อจัดทาสื่อการเรียนรู้เกี่ยวกับการลดความอ้วน
1.2.3. เพื่อจัดทาสื่อการเรียนรู้ในรูปแบบของการทาเว็บไซต์
1.3 แหล่งข้อมูลที่ศึกษา
1.3.1. อาคารคอมพิวเตอร์ โรงเรียนเฉลิมพระเกียรติสมเด็จพระศรีนครินทร์ ระยอง
ในพระราชูปถัมภ์สมเด็จพระเทพรัตนราชสุดา ฯ สยามบรมราชกุมารี
1.3.2. บ้านของเด็กหญิงธณัชช์ภรณ์ ศิริวัชเดชากุล บ้านเลขที่ 10/18 หมู่บ้านโมเดิร์นซิตี้ ถนนราชชุม
พล ค.2 ตาบลเนินพระ อาเภอเมืองระยอง จังหวัดระยอง 21000
1.3.3. บ้านของเด็กชายพีระวัฒน์ เวทวงษ์ บ้านเลขที่ 215 หมู่ 8 ตาบลชากบก อาเภอบ้านค่าย จังหวัด
ระยอง 21000
1.3.4. หนังสือเทคโนโลยีสารสนเทศและการสื่อสาร ชั้นมัธยมศึกษาปีที่ 3
1.4 ขอบเขตการดาเนินงาน
ขอบเขตด้านเวลา
คณะผู้จัดทาใช้ระยะเวลาในการทาโครงงานฉบับนี้ตั้งแต่ วันจันทร์ที่ 11 กันยายน 2560 ถึงวันจันทร์ที่
18 กันยายน 2560

8. 2
1.5 ผลที่คาดว่าจะได้รับ
1.5.1. ได้เรียนรู้เกี่ยวกับการดูแลสุขภาพ
1.5.2. ได้เรียนรู้เกี่ยวกับการลดความอ้วน

9. บทที่ 2
เอกสารอ้างอิง
ผู้จัดทาได้ความรู้จากทั้งเอกสารและแหล่งความรู้ เพื่อนาความรู้หล่านี้มาใช้เพื่อพัฒนาเว็ปไซต์ NIFTY
HEALTH ของโรงเรียนเฉลิมพระเกียรติสมเด็จพระศรีนครินทร์ ระยอง ในพระราชูปภัมภ์สมเด็จพระเทพ
รัตนราชสุดาฯ สยามบรมราชกุมารี
ความหมายของโครงงาน
โครงงาน (Project Approach) คือ การศึกษาค้นคว้าเกี่ยวกับสิ่งใดสิ่งหนึ่ง หรือหลาย ๆ สิ่งที่อยาก
รู้คาตอบให้ลึกซึ้ง ถือเป็นกิจกรรมที่เปิดโอกาสให้ ผู้เรียนได้ทาการศึกษาค้นคว้าและฝึกปฏิบัติด้วยตนเองตาม
ความสามารถ ความถนัด และความสนใจ โดยอาศัยกระบวนการทางวิทยาศาสตร์ หรือกระบวนการอื่น ๆ ไป
ใช้ในการศึกษาหาคาตอบ โดยมีครูผู้สอนคอยกระตุ้นแนะนาและให้คาปรึกษาแก่ผู้เรียนอย่างใกล้ชิด ตั้งแต่การ
เลือกหัวข้อที่จะศึกษา ค้นคว้า ดาเนินงานตามแผน กาหนดขั้นตอนการดาเนินงานและการนาเสนอผลงาน ซึ่ง
อาจทาเป็นบุคคลหรือเป็นกลุ่ม
ประเภทของโครงงาน
1. โครงงานพัฒนาสื่อเพื่อการศึกษา (Educational Media)
เป็นโครงงานที่ใช้คอมพิวเตอร์ในการผลิตสื่อเพื่อการศึกษา โดยการสร้างโปรแกรมบทเรียน หรือหน่วย
การเรียน ซึ่งอาจจะต้องมีภาคแบบฝึกหัด บททบทวน และคาถามคาตอบไว้พร้อม ผู้เรียนสามารถเรียนแบบ
รายบุคคลหรือรายกลุ่ม การสอนโดยใช้คอมพิวเตอร์ช่วยนี้ ถือว่าเครื่องคอมพิวเตอร์เป็นอุปกรณ์การสอน ไม่ใช่
เป็นครูผู้สอน ซึ่งอาจเป็นการพัฒนาบทเรียนแบบ Online ให้นักเรียนเข้ามาศึกษาด้วยตนเองก็ได้
โครงงานประเภทนี้สามารถพัฒนาขึ้นเพื่อใช้ประกอบการสอนในวิชาต่าง ๆ ไม่ว่าจะเป็นสาขา
คอมพิวเตอร์ วิชาคณิตศาสตร์ วิชาวิทยาศาสตร์ วิชาสังคม วิชาชีพอื่น ๆ ฯลฯ โดยนักเรียนอาจคัดเลือกหัวข้อ
ที่นักเรียนทั่วไปที่ทาความเข้าใจยาก มาเป็นหัวข้อในการพัฒนาโปรแกรมบทเรียน ตัวอย่างเช่น โปรแกรมสอน
วิธีการใช้งาน ระบบสุริยะจักรวาล โปรแกรมแบบทดสอบวิชาต่าง ๆ
2. โครงงานพัฒนาเครื่องมือ (Tools Development)
เป็นโครงงานเพื่อพัฒนาเครื่องมือมาใช้ช่วยสร้างงานประยุกต์ต่าง ๆ ซึ่งโดยส่วนใหญ่จะเป็นในรูป
ซอฟต์แวร์ ตัวอย่างของเครื่องมือช่วยงาน เช่น ซอฟต์แวร์วาดรูป ซอฟต์แวร์พิมพ์งาน ซอฟต์แวร์ช่วยการมอง
วัตถุในมุมต่าง ๆ เป็นต้น สาหรับซอฟต์แวร์เพื่อการพิมพ์งานนั้นสร้างขึ้นเป็นโปรแกรมประมวลผลภาษา ซึ่งจะ
เป็นเครื่องมือให้เราใช้งานในงานพิมพ์ต่าง ๆ บนเครื่องคอมพิวเตอร์เป็นไปได้โดยง่าย ซึ่งรูปที่ได้สามารถ

10. 4
นาไปใช้งานต่าง ๆ ได้มากมาย สาหรับซอฟต์แวร์ช่วยในการมองวัตถุในมุมต่าง ๆ ใช้สาหรับช่วยในการ
ออกแบบสิ่งของต่าง ๆ เช่น โปรแกรมประเภท 3D
3. โครงงานประเภทจาลองทฤษฎี (Theory Experiment)
เป็นโครงงานใช้คอมพิวเตอร์ในการจาลองการทดลองของสาขาต่าง ๆ เป็นโครงงานที่ผู้ทาต้องศึกษา
รวบรวมความรู้ หลักการ ข้อเท็จจริงและแนวความคิดต่าง ๆ อย่างลึกซึ้งในเรื่องที่ต้องการศึกษา แล้วเสนอเป็น
แนวคิด แบบจาลอง หลักการ ซึ่งอาจอยู่ในรูปของสมการ สูตร หรือคาอธิบายก็ได้ พร้อมทั้งนาเสนอวิธีการ
จาลองทฤษฎีด้วยคอมพิวเตอร์ การทาโครงงานประเภทนี้มีจุดสาคัญอยู่ที่ผู้ทาต้องมีความรู้เรื่องนั้น ๆ เป็น
อย่างดี ตัวอย่าง เช่น การทดลองเรื่องการไหลของเหลว การทดลองเรื่องพฤติกรรมของปลาอโรวาน่า ทฤษฎี
การแบ่งแยกดีเอ็นเอ เป็นต้น
4. โครงงานประเภทการประยุกต์ใช้งาน (Application)
เป็นโครงงานที่ใช้คอมพิวเตอร์ในการสร้างผลงานเพื่อประยุกต์ใช้งานจริงในชีวิตประจาวัน เช่น
ซอฟต์แวร์สาหรับการออกแบบและตกแต่งอาคาร ซอฟต์แวร์สาหรับการผสมสี ซอฟต์แวร์สาหรับการระบุ
คนร้าย เป็นต้น โครงงานงานประเภทนี้จะมีการประดิษฐ์ฮาร์ดแวร์ ซอฟต์แวร์ หรืออุปกรณ์ใช้สอยต่าง ๆ ซึ่ง
อาจจะสร้างใหม่หรือปรับปรุงดัดแปลงของเดิมที่มีอยู่แล้วให้มี ประสิทธิภาพสูงขึ้นก็ได้ โครงงานลักษณะนี้
จะต้องศึกษาและวิเคราะห์ความต้องการของผู้ใช้ก่อน แล้วนาข้อมูลที่ได้มาใช้ในการออกแบบ และพัฒนา
สิ่งของนั้น ๆ ต่อจากนั้นต้องมีการทดสอบการทางานหรือทดสอบคุณภาพของสิ่งประดิษฐ์แล้วปรับปรุงแก้ไขให้
มีความสมบูรณ์ โครงงานประเภทนี้นักเรียนต้องใช้ความรู้เกี่ยวกับเครื่องคอมพิวเตอร์ ภาษาโปรแกรม และ
เครื่องมือต่าง ๆ ที่เกี่ยวข้อง รวมทั้งอาจใช้วิธีทางวิศวกรรมฮาร์ดแวร์และซอฟต์แวร์ในการพัฒนาด้วย
5. โครงงานพัฒนาเกม (Game Development)
เป็นโครงงานพัฒนาซอฟต์แวร์เกมเพื่อความรู้ หรือ ความเพลิดเพลิน เช่น เกมหมากรุก เกมหมากฮอส
เกมการคานวณเลข ซึ่งเกมที่พัฒนาขึ้นนี้น่าจะเน้นให้เป็นเกมที่ไม่รุนแรง เน้นการใช้สมองเพื่อฝึกคิดอย่างมี
หลักการ โครงงานประเภทนี้จะมีการออกแบบลักษณะและกฎเกณฑ์การเล่น เพื่อให้น่าสนใจแก่ผู้เล่น พร้อมทั้ง
ให้ความรู้สอดแทรกไปด้วย ผู้พัฒนาควรจะได้ทาการสารวจและรวบรวมข้อมูลเกี่ยวกับเกมต่าง ๆ ที่มีอยู่ทั่วไป
และนามาปรับปรุงหรือพัฒนาขึ้นใหม่เพื่อให้ป็นเกมที่แปลกใหม่ และน่าสนใจแก่ผู้เล่นกลุ่มต่าง ๆ
ส่วนโครงงานของคณะจัดทาอยู่ในประเภทโครงงานพัฒนาสื่อเพื่อการศึกษา

11. 5
ขั้นตอนในการพัฒนาเว็บไซต์
การสร้างเว็บไซต์ที่มีคุณภาพแล้วนั้น จะมีองค์ประกอบที่เกี่ยวข้องอยู่มากมาย ซึ่งผู้พัฒนาเว็บไซต์จะต้อง
ศึกษาข้อมูล และวิเคราะห์ข้อมูล ก่อนถึงขั้นตอนลงมือปฏิบัติจริง ยกตัวอย่างเช่น วัตถุประสงค์ของเว็บไซต์คือ
อะไร และกลุ่มเป้าหมายของเว็บไซต์คือใคร และเทคโนโลยีที่จานามาใช้ รูปแบบของเว็บเพจควรจะเป็นอยาง
ไร ซึ่งที่ได้กล่าวมานี้เป็นสิ่งที่ให้ความสาคัญ ซึ่งวันนี้เราจะมาพูดในส่วนของขั้นตอนในการพัฒนาเว็บไซต์
1. กาหนดเป้าหมายและวางแผน ในการพัฒนาเว็บไซต์ เราควรกาหนดเป้าหมาย และควรวางแผน
ล่วงหน้า ซึ่งต้องมีขั้นตอนที่ชัดเจน ได้แก่
1. กาหนดวัตถุประสงค์ของเว็บไซต์
2. กาหนดกลุ่มเป้าหมาย
3. การเตรียมแหล่งข้อมูล
4. การพัฒนาทักษะของบุคลากร
5. การเตรียมทรัพยากรต่างๆที่จาเป็น
2. วิเคราะห์และจัดโครงสร้างของระบบพาณิชย์อิเล็กทรอนิกส์ ขั้นตอนนี้จะเป็นการนาข้อมูลต่างๆ ที่
รวบรวมได้จากขั้นแรก ไม่ว่าจะเป็น วัตถุประสงค์ของเว็บไซต์ คุณลักษณะ ข้อจากัดของกลุ่มเป้าหมาย
รวมไปถึงเนื้อหาหลักของเว็บไซต์ นามาประเมินวิเคราะห์ และจัดระบบ เพื่อให้ได้โครงสร้างข้อมูล
และข้อกาหนด โดยจะนาไปสร้างแผนผังเว็บไซต์ รูปแบบของเมนู รวมไปถึงองค์ประกอบต่างๆของ
เว็บ เช่น รูปภาพและกราฟฟิก, เสียง, วิดีโอ, มัลติมีเดีย
3. ออกแบบเว็บเพจและเตรียมข้อมูล ขั้นตอนนี้เป็นการออกแบบโครงหน้าตา และลักษณะในด้าน
กราฟฟิกของหน้าเว็บไซต์ เพื่อให้ผู้เข้าชมเว็บไซต์เกิดอารมณ์ในการรับรู้ ดังนั้นผู้ที่ทาหน้าที่นี้ควรมี
ความสามารถทางด้านศิลปพอสมควร โปรแกรมที่เหมาะจะใช้ในการออกแบบคือ Adobe
Photoshop หรือ Macromedia Fireworks

12. 6
4. ลงมือสร้างและทดสอบ เป็นขั้นตอนที่เว็บเพจจะถูกสร้างขึ้นมาจริงทีละหน้าๆ โดยการอาศัยเค้าโครง
และองค์ประกอบกราฟฟิกตามที่ออกแบบไว้ เนื้อหาต่างๆจะถูกนามาใส่และจัดรูปแบบ ลิงค์และ
ระบบนาทางถูกสร้างองคืประกอบเสริมต่างๆถูกวางเข้าที่ อย่างไรก็ตาม เมื่อลงมือสร้างเว็บเพจจริงๆ
เราอาจจะพบว่าสิ่งที่ได้ออกแบบไว้แล้ว บางอย่างไม่เหมาะสม หรือควรได้รับการปรับแต่ง ก็สามารถ
ทาได้เช่นกัน
5. เผยแพร่และส่งเสริมให้เป็นที่รู้จัก โดยทั่วไปการนาเว็บไซต์ขึ้นเผยแพร่บนอินเทอร์เน็ต จะทาด้วยการ
อัพโหลดไฟล์ทั้งหมด คือ HTML และไฟล์อื่นที่เกี่ยวข้อง ขึ้นไปแก้บนเซิร์ฟเวอร์ที่เราเปิดบริการไว้
การอัพโหลดเว็บไซต์หรือบางครั้งเราเรียกว่า “พับลิช” วึ่งอาจทาด้วยโปรแกรมสร้างเว็บไซต์เอง
6. การดูแลและพัฒนา เมื่อเว็บไซต์ถูกเผยแพร่ออกไป ควรดูแลโดยตลอด ซึ่งหน้าที่นี้ครอบคลุมหลาย
เรื่อง ตั้งแต่การตรวจสอบเว็บเซิร์ฟเวอร์ว่าไม่หยุดทางานบ่อยๆ ลิงค์ที่เชื่อมโยคไปภายนอกยังคงใช้ได้
หรือไม่ค่อยตอบคาถามที่มีผู้มาฝากไว้บนเว็บเพจ ถ้าเป็นเว็บข่าวสารก็ต้องปรับปรุงข้อมูลให้ทันสมัย
อยู่ตลอดเวลา และถ้ามีการใช้ฐานข้อมูลก็ต้องแบ็คอัพข้อมูลอย่างสม่าเสมอ
หลังจากเว็บไซต์ได้รับการเผยแพร่ไประยะหนึ่งแล้ว เราควรปรับปรุงเพื่อให้ผู้ชมรู้สึกว่ามีความเปลี่ยนแปลง
มีความสดใหม่ ทันสมัย ไม่ล้าหลัง โดยการที่เรานาข้อมูลสถิติที่รวบรวมไว้มาพิจารณาประกอบด้วย การ
เปลี่ยนแปลงทาได้ทั้งในส่วนของเนื้อหาโครงสร้างเว็บไซต์และการออกแบบหน้าตา โดยการนาเทคโนโลยีใหม่ๆ
เข้ามาเพิ่ม

13. 7
HTML5
HTML5 ย่อมาจาก Hyper Text Markup Language, version 5
คือ ภาษามาร์กอัป ที่ใช้สาหรับเขียน website ซึ่ง HTML5 เป็นภาษาคอมพิวเตอร์ที่พัฒนามาจาก
ภาษา HTML ที่มีจุดเด่นมากกว่าเวอร์ชั่นก่อนหน้านี้ HTML 4.01และ XHTML 1.1 แต่รูปแบบลักษณะของ
การใช้งานจะเป็นมาตรฐานเดียวกันกับ HTML4 ถึงแม้ว่า HTML5 จะเป็นเวอร์ชั่นที่ถูกพัฒนาให้มีการทางานที่
หลากหลายมากกว่ารุ่นอื่นแล้ว แต่กระนั้นก็ยังเป็นเวอร์ชั่นที่ยังไม่สมบูรณ์แบบซะทีเดียว สาเหตุมาจาก
หน่วยงานหลัก 2 หน่วยงานนั้นมีมาตราฐานไม่เหมือนกัน หน่วยงานหลัก 2 หน่วยที่ว่านี้คือ W3C (World
Wide Web Consortium) จะมีหน้าที่รับผิดชอบการพัฒนาเทคโนโลยี HTML อย่างเป็นทางการ แต่หลังจาก
ออก HTML4 ออกมาก็เกิดความล่าช้าในการพัฒนา HTML4 ของ W3C จึงทาให้ตัวแทนของบริษัทไอทียักษ์
ใหญ่ๆ เช่น แอปเปิล โอเปร่า มอซซิลลา ได้จับมือกันเป็นกลุ่ม WHATWG (Web Hypertext Application
Technology Working Group) พัฒนาสเป็คของ HTML5 ออกมาทาง WHATWG (Web Hypertext
Application Technology Working Group) ต้องการให้มาตราฐาน HTML 5 นั้นมีการเปลี่ยนแปลงได้อย่าง
สม่าเสมอไม่ตายตัว ซึ่งสามารถเปลี่ยนแปลงตามสถานะการณ์และความต้องการทางด้านเทคโนโลยี ผิดกับทาง
W3C (World Wide Web Consortium)ที่ต้องการพัฒนามาตราฐาน HTML 5 ให้มีความสาเร็จก่อน ซึ่งใน
ปัจจุบันก็ยังไม่สมบูรณ์ นี่คงเป็นสาเหตุที่ทาให้ HTML 5 ยังไม่ใช่เวอร์ชั่นที่สมบูรณ์นั้นเองแม้ว่า HTML 5 ยังไม่
สมบูรณ์ก็ตามแต่ผู้ที่พัฒนาอุปกรณ์ต่าง ๆ พร้อมทั้ง Browser ต่าง ๆ ก็เริ่มที่จะมาสนับสนุนการใช้งาน HTML
5 กันมากขึ้นแล้ว แม้กระทั่งผู้ที่พัฒนาเว็บเพจก็เริ่มที่จะศึกษาและพัฒนา HTML 5 กันมากขึ้นเพราะเริ่มมีการ
ใช้งานกันอย่างแพร่หลายมากยิ่งขึ้นนั้น

14. 8
ข้อดีของ HTML5
1. เว็บไซต์ที่สร้างจากภาษา HTML5 สามารถแสดงผลได้กับทุก web browser
2. HTML5 จะช่วยลดการใช้พวกปลั๊กอินพิเศษอย่างพวก Adobe Flash, Microsoft Silverlight,
Apache Pivot สนับสนุน วิดีโอ และ องค์ประกอบเสียง รวมทั้ง สื่อมัลติมีเดียต่าง ๆ มากขึ้น โดยไม่
ต้องใช้ Flash
3. มีการจัดการข้อผิดพลาดที่ดีขึ้น
4. สคริปต์ใหม่ ที่จะมาแทนที่สคริปต์เดิม (เขียนโค้ดสั้นลง)
5. HTML5 มีความเป็นอิสระสูง (คล้าย ๆ XML)
HTML5 ทางานควบคู่กับ CSS3 ได้ดี ช่วยให้สามารถเพิ่มลูกเล่นต่าง ๆ บนเว็บไซต์ได้สวยงามมากยิ่งขึ้น
(CSS คือส่วนแสดงผล ที่นักออกแบบสามารถกาหนดสีสัน ตาแหน่ง ลักษณะเวลานาเมาส์ไปแหย่แล้วมีกระต่าย
โผล่ออกมาจากโพรง หรือจับก้อนวัตถุในหน้าเว็บฯ ให้ชิดซ้ายชิดขวา ส่วน CSS3 คือเวอร์ชั่นที่ 3 ของ CSS)
HTML5 มีความสามารถอะไรบ้าง

15. 9
ส่วนประกอบของ HTML5
ส่วนการอธิบายส่วนประกอบของ HTML5 ก็ขึ้นกับว่าเราจะจัดหมวดหมู่มันอย่างไร มีหลายตาราให้
เลือก ในบทความนี้ผมขอเลือกตาม W3C ที่อุตส่าห์ออกแบบโลโก้-ไอคอนของ HTML5 เพื่อแสดงสัญลักษณ์
ของเทคโนโลยีเว็บแขนงต่างๆ เพื่อให้เข้าใจง่ายและแยกหมวดหมู่ตามกัน
W3C แบ่งเทคโนโลยีในชุด HTML5 ออกเป็น 8 หมวด พร้อมไอคอนประกอบทุกหมวด ขอใช้ชื่อ
ตามนั้น และเรียงลาดับกันไปเช่นเดียวกับเว็บ W3C HTML5 Logo
1. Semantics
เทคโนโลยีกลุ่ม Semantics คือตัว syntax ของภาษา HTML5 ที่แน่นอนว่าเปลี่ยนไปจาก HTML4
ซึ่งมีแท็กใหม่ ๆ และคุณสมบัติ (atrribute) ใหม่ๆ เพิ่มขึ้นอีกพอสมควร โดยโครงสร้างของภาษาแล้ว HTML5
ยังเหมือนกับ HTML ที่เราคุ้นเคย แต่เพิ่มแท็กใหม่ ตัดแท็กเก่า และเปลี่ยนวิธีใช้แท็กเก่าบางตัวออกไป
รายละเอียดอ่านได้จาก HTML5 differences from HTML4 ของ W3C
แท็กใหม่
แท็กกลุ่มนี้จะช่วยบ่งบอกความหมายของวัตถุในเว็บเพจได้ดีขึ้น เช่น จากเดิมเราใช้ <div
id="header"> ก็เปลี่ยนมาเป็น <header> ทาให้เบราว์เซอร์สามารถรับทราบความหมายของวัตถุแต่ละชิ้นได้
ดีขึ้น ตัวอย่าง
• section - บ่งบอกเซคชันของเนื้อหา
• article - กาหนดขอบเขตของตัวเนื้อบทความ
• aside - กาหนดขอบเขตของเนื้อหาเสริม (ล้อมกรอบ)
• header - กาหนดขอบเขตของส่วนเริ่มต้นหรือส่วนหัวของเว็บไซต์ (อย่าสับสนกับ <head>)
• footer - กาหนดขอบเขตของส่วนท้ายของเว็บไซต์ พวกข้อความกาหนดสิทธิ์ต่างๆ
• nav - บอกว่ามันเป็นส่วนนาทางของเว็บไซต์
• figure - บอกว่าเป็นภาพหรือวิดีโอประกอบเนื้อหา (ข้างในสามารถซ้อนแท็ก img หรือ video
พร้อมคาอธิบายได้อีกชั้น)

16. 10
นอกจากนี้ส่วนของฟิลด์ยังมี attribute ใหม่อีกกลุ่มสาหรับ input type ที่เจาะจงกว่าเดิม เช่น จาก
เดิมเราใช้ <input type="text" id="email"> ก็เปลี่ยนเป็น <input type="email"> แทน
• tel - เบอร์โทร
• search - ช่องค้นหา
• url
• email
• datetime
• date
• time
• color
แท็กที่ถูกตัดออก
ส่วนใหญ่เป็นแท็กเก่าที่ทาหน้าที่กาหนดฟอร์แมตการแสดงผล ซึ่งย้ายไปใช้ CSS แทนหมดแล้ว
นอกจากนี้ยังเอาแท็กที่เกี่ยวกับเฟรมทั้งหมดออกไป เพราะล้าสมัยแล้ว และแท็กที่ไม่ค่อยมีคนใช้อย่าง
acronym (ใช้ abbr แทน) หรือ applet (ใช้ object แทน)
• big
• center
• font
• strike
• frame
• frameset
• noframes
• acronym
• object
แท็กที่ถูกเปลี่ยนวิธีใช้
แท็กเก่าแต่เปลี่ยนความหมาย-วิธีใช้งาน
• i - ไม่ได้หมายถึงการทาตัวเอียง (เพราะอยู่ใน CSS) แต่หมายถึงโทนเสียงของตัวข้อความที่
เปลี่ยนแปลง
• small - หมายถึงข้อความหรือคอมเมนต์ประกอบเนื้อหาหลัก ที่ควรจะแสดงด้วยตัวเล็กกว่าปกติ
• strong - หมายถึงข้อความสาคัญ ไม่ใช่การเน้นด้วยตัวเข้ม

17. 11
• u - เป็นการบ่งชี้ว่าข้อความจุดนี้มีการแสดงผลแบบพิเศษ เช่น จงใจเขียนให้ผิดเพื่อเป็นตัวอย่าง
หรือ ชื่อในภาษาจีน เป็นต้น
นอกจากแท็กหลักที่เปลี่ยนแปลงแล้ว เทคโนโลยีในหมวดนี้ยังรวมไปถึงเทคโนโลยีเว็บหลายๆ ชนิดที่มีอยู่
แล้วในปัจจุบัน เช่น RDFa, Microdata, Microformats ที่ช่วยกาหนดความหมายให้กับเนื้อหา เพื่อนาไป
ประมวลผลต่อได้ง่ายขึ้น จะเห็นว่าในภาพรวมแล้ว HTML5 หมวด semantics จะช่วยให้ตัวโครงสร้างของเว็บ
เพจมีความหมาย (ในเชิงของ semantic web) มากขึ้น
2. Offline & Storage
เทคโนโลยีในหมวดนี้ก็ตรงตามชื่อหมวด นั่นคือช่วยให้เว็บสามารถทางานแบบออฟไลน์ได้ และเก็บ
ข้อมูลไว้ใช้งานบนเครื่องของผู้ชมเว็บได้ ผมเคยเขียนเนื้อหาในหมวดนี้ไปแล้วครั้งหนึ่งในบทความ รู้จักกับ
วิธีการเก็บข้อมูล Local Storage ของ HTML5 ก็ขอเอามารียูสเพราะเนื้อหาเหมือนกันทุกประการ
Web Storage
เทคโนโลยีแรกคือ Web Storage ซึ่งเป็นการเก็บข้อมูลแบบง่าย ๆ ในรูป key-value (ภาษาโปรแกรม
บางภาษาเรียก dictionary) ซึ่งแยกย่อยได้อีก 2 อย่าง คือ
• Session storage เก็บข้อมูลเฉพาะเซสชันการท่องเว็บนั้นๆ ปิดแท็บเมื่อไรข้อมูลก็หายไป ใช้
ออบเจคต์ชนิด sessionStorage อันนี้ไม่ซับซ้อน
• Local storage เก็บข้อมูลระยะยาว (persistence) โดยใช้ออบเจคต์ชื่อ localStorage ซึ่ง
จะซับซ้อนขึ้น เพราะเราสามารถเปิดเว็บเพจเดียวกันใน 2 แท็บหรือมากกว่า ซึ่งมันจะแชร์ข้อมูลก้อนเดียวกัน
ฟีเจอร์ Web Storage จะคล้ายกับ Google Gears เมื่อ 3-4 ปีก่อนหน้านี้ เพียงแต่ Web Storage รวมมากับ
HTML5 เลย ไม่ต้องลงปลั๊กอินเพิ่มเองแบบ Gears

18. 12
ฐานข้อมูล
การเก็บข้อมูลง่ายๆ แบบ key-value อาจไม่เพียงพอต่อความต้องการของนักพัฒนา HTML5 จึงเพิ่ม
วิธีการเก็บข้อมูลที่ซับซ้อนขึ้นมา ซึ่งก็คือฐานข้อมูลแบบที่เราคุ้นเคยนั่นเอง
ปัญหาของฐานข้อมูลใน HTML5 ก็คือมาตรฐานที่แยกเป็นสองทาง
• Web SQL Database มันคือการนา SQL มายัดใส่เบราว์เซอร์ (ส่วนมากนิยม SQLite)
ตอนนี้ใช้ได้แค่เบราว์เซอร์ตระกูล WebKit และ Opera แนวทางนี้มีข้อเสียตรงความซับซ้อนของ SQL และเริ่ม
หมดความนิยมแล้ว (ทั้งที่มาตรฐานยังไม่เสร็จ)
• IndexedDB แนวทางใหม่ที่สร้างขึ้นในภายหลัง ไม่ใช้ SQL แต่เก็บข้อมูลแบบ key-value
เหมือนกับ Web Storage เพียงแต่เพิ่มการทาดัชนี (index) ช่วยให้หาข้อมูลได้รวดเร็วขึ้น และเพิ่มเรื่อง
transactions เพื่อความปลอดภัยของข้อมูลมาด้วย
Blognone เคยลงเรื่อง Web SQL vs IndexedDB ไปครั้งหนึ่งแล้ว ย้อนอ่านรายละเอียดได้ในตอนเก่า
File API
เราพูดถึงการเก็บข้อมูลแบบง่ายๆ และการเก็บลงฐานข้อมูลไปแล้ว ลาดับถัดไปคือการจัดการกับ
"ไฟล์" นั่นเอง HTML5 มี API มาให้เราสองตัวคือ FileReader กับ FileWriter หน้าที่ก็ตามชื่อ
ปัญหาของ FileReader ที่จะต้องสนใจคือความแตกต่างระหว่างไฟล์ที่อยู่ในเครื่อง กับไฟล์ที่อยู่บน
เว็บ ซึ่งกาลังพัฒนากันอยู่ ส่วน FileWriter มีข้อกังวลเรื่องความปลอดภัย เพราะต่อจากนี้ไปเว็บเพจจะ
สามารถเขียนไฟล์ในเครื่องเราได้ มาตรการแก้ไขจุดอ่อนนี้ก็ต้องพัฒนากันต่อไป
เมื่อเว็บแอพพลิเคชันไม่ได้ต่อเน็ต ก็ต้องมีวิธีจัดการกับข้อมูลที่เกิดขึ้นระหว่างนั้น ซึ่งเป็นหน้าที่ของ
AppCaching API ที่บอกว่าเว็บแอพพลิเคชันจะถูกเก็บไว้บนเครื่องนานแค่ไหน ทาให้เว็บแอพมีลักษณะ
คล้ายๆ กับแอพที่ติดตั้งแบบปกติมากขึ้น
3. Device Access
เทคโนโลยีหมวดที่สามจะเน้นความเชื่อมโยงกับฟีเจอร์ของฮาร์ดแวร์ (โดยเฉพาะฮาร์ดแวร์แบบพกพา) เช่น
• Geolocation API เพื่อขอข้อมูลเชิงพิกัดของอุปกรณ์

19. 13
• เข้าถึงไมโครโฟนและกล้องถ่ายภาพของอุปกรณ์
• เข้าถึงข้อมูลภายในตัวอุปกรณ์ เช่น สมุดที่อยู่ หรือข้อมูลการเอียงเครื่อง (tilt orientation)
ฟีเจอร์ในกลุ่มนี้จะไม่ได้อยู่ในรูปของแท็ก HTML โดยตรง แต่จะเป็น API ที่ฝั่งเบราว์เซอร์ต้องเตรียมไว้ให้
แล้วเว็บเพจค่อยเรียกใช้ผ่านจาวาสคริปต์อีกทีหนึ่ง ในการใช้งานจริงๆ เราคงใช้ผ่านเฟรมเวิร์คจาวาสคริปต์ที่
เตรียมเรื่องพวกนี้ไว้ให้แล้วมากกว่า เช่น jQuery Mobile, Sencha Touch หรือ SproutCore เป็นต้น
4. Connectivity
เทคโนโลยีกลุ่มที่สี่เน้นการเชื่อมต่อกับเครือข่ายที่ดีขึ้น มี 2 อย่างที่สาคัญ
WebSockets เป็น API ที่ออกมาเพื่อต่อยอดแนวทางของ AJAX ในอดีต อธิบายง่ายๆ มันคือการ
push ข้อมูลจากเซิร์ฟเวอร์มายังไคลเอนต์ (แบบเดียวกับ push mail ที่เรารู้จักกัน)
ในแง่เทคนิค การส่งข้อมูลแบบ HTTP แบบดั้งเดิมจะเปิดการเชื่อมต่อกับเซิร์ฟเวอร์เพื่อส่งข้อมูล แล้ว
ตัดการเชื่อมต่อเมื่อใช้เสร็จ ดังนั้นการขอข้อมูลจากเซิร์ฟเวอร์เป็นระยะจึงทาได้ยาก เพราะต้องดึงข้อมูลจาก
เซิร์ฟเวอร์ (polling) เป็นระยะ ซึ่งเปลืองโหลดของเซิร์ฟเวอร์ไม่น้อย โดยเฉพาะกรณีที่ต้องเปิดการเชื่อมต่อ
HTTP ค้างเอาไว้ (Long polling หรือ COMET)
WebSockets เกิดมาเพื่อแก้ปัญหานี้ โดยสร้างการเชื่อมต่อแบบ (เกือบ) ถาวรระหว่างเซิร์ฟเวอร์กับ
ไคลเอนต์ เพื่อให้สองฝั่งส่งข้อมูลกันได้ตลอด ทั้งหมดรันอยู่บนโพรโตคอล TCP อีกชั้นหนึ่ง และไม่ได้วิ่งบน
โพรโตคอล HTTP เพื่อประหยัดโหลดของ HTTP ในการใช้งานเราจะเรียก WebSockets ด้วย หรือถ้าต้องการ
การเชื่อมต่อแบบปลอดภัย ข้อดีคือเบากว่า HTTP แต่ข้อเสียคือทั้งสองฝั่ง (โดยเฉพาะเซิร์ฟเวอร์) ต้องรองรับ
WebSockets ด้วย จึงอาจจะใช้ไม่ได้ในทุกกรณี ปัจจุบัน WebSockets เป็นมาตรฐานที่รับรองโดย IETF และ
กาลังผ่านกระบวนการเข้าเป็นมาตรฐานของ W3C
WebSockets เป็นการส่งข้อมูลแบบสองทาง แต่ถ้าเราต้องการส่งข้อมูลทางเดียวจากเซิร์ฟเวอร์มายัง
ไคลเอนต์ (เช่น notification ของ Facebook/Twitter) เราสามารถใช้เทคโนโลยีอีกตัวชื่อ Server-sent
Events (SSE) แทนได้

20. 14
SSE ถูกออกแบบมาเพื่อแก้ปัญหา polling ของ AJAX เช่นเดียวกับ WebSockets หลักการทางาน
ของ SSE คือเซิร์ฟเวอร์สามารถส่งข้อมูลไปยังไคลเอนต์ได้โดยตรง โดยที่ไคลเอนต์ไม่ต้องร้องขอ (GET
Request) ก่อน
ความต่างของ SSE กับ WebSockets นอกจากจะเป็นเรื่องการส่งข้อมูลแบบทางเดียว/สองทางแล้ว
ยังต่างกันที่ตัวโพรโตคอล เพราะ SSE จะรันอยู่บน HTTP ตามปกติ ทาให้สามารถใช้กับเซิร์ฟเวอร์ในปัจจุบัน
ได้ทันที
ในการใช้งานจริง เราอาจเลือกได้ระหว่าง
• การส่งข้อมูลด้วย WebSockets ทั้งสองทาง (บน WebSockets)
• การรับข้อมูลจากเซิร์ฟเวอร์ด้วย SSE แล้วส่งกลับด้วย XMLHttpRequest (บน HTTP)
5. Multimedia
อธิบายแบบสั้นๆ คือเดิมที่ HTML4 ขึ้นไปไม่สามารถแสดงผลเสียง-วิดีโอได้โดยตรง ต้องใช้วิธีฝัง
<object> แล้วติดตั้งปลั๊กอินเพื่อช่วยเล่นมัลติมีเดีย ซึ่งทางานได้ตามนั้นแต่ก็มีปัญหายิบย่อยมากมายตามมา
เช่นกัน แต่พอเป็น HTML5 ได้กาหนดให้ HTML ต้องเล่นไฟล์เสียงและวิดีโอได้ในตัว จึงเป็นที่มาของแท็กใหม่
<audio> และ <video> ที่หลายคนคงลองใช้กันแล้ว ดังนั้นต่อไปเสียงและวิดีโอจะกลืนเป็นเนื้อเดียวกับเว็บ
เพจโดยตรง เราสามารถปรับเปลี่ยนการแสดงผลของมันได้เฉกเช่นเดียวกับส่วนอื่นๆ ของเว็บเพจ เช่น ย้าย
ตาแหน่ง ซ้อนฉากหลัง หาอย่างอื่นมาบัง ฯลฯ
อย่างไรก็ตาม เรื่องมัลติมีเดียของ HTML5 กลับมีปัญหาประการใหม่เพิ่มเข้ามา นั่นคือ "สงคราม
codec" ระหว่างเบราว์เซอร์สองค่ายใหญ่ ดังที่เราเห็นจากข่าว WebM+Ogg (สนับสนุนโดย
Chrome/Firefox/Opera) vs H.264 (สนับสนุนโดย IE/Safari) นั่นเอง

21. 15
6. 3D, Graphics & Effects
หมวดที่หกเกี่ยวกับเรื่องกราฟิก แบ่งเป็น 4 ประการย่อย ๆ
1. SVG (Scalable Vector Graphics) เป็นภาษาตระกูล XML ที่ออกแบบมาสาหรับการวาดกราฟิก
แบบเวกเตอร์ (พอเทียบเคียงได้กับ SWF ของ Adobe หรือ XAML ของไมโครซอฟท์) เทคโนโลยี
นี้มีมานานพอสมควรแล้ว คงไม่ต้องลงรายละเอียดนะ
2. Canvas แท็ก <canvas> ถือเป็นของใหม่ที่สาคัญใน HTML5 เพราะมันช่วยเปลี่ยนลูกเล่นการ
แสดงผลของเว็บเพจไปอีกมาก
เดิมที HTML เป็นการวาดออบเจคต์ (เช่น ข้อความ รูป กล่องข้อความ ฯลฯ) ขึ้นมาเป็นหน้าจอ และ
สามารถตกแต่งออบเจคต์แต่ละตัวได้ในระดับหนึ่งผ่าน CSS (เช่น ใส่สีพื้น วาดเส้นขอบ ทามุมโค้ง) แต่ใน
ภาพรวม HTML ยังไม่สามารถแสดงกราฟิกแบบราสเตอร์ (raster) ได้ด้วยตัวมันเอง ต้องทาภาพมาแปะอีก
ทอดหนึ่ง
3. แท็ก canvas ที่ถูกเพิ่มเข้ามาช่วยให้เราสามารถ "วาดภาพ" ลงบนเว็บเพจได้โดยตรง (กาหนด
canvas ในเพจ แต่สั่งวาดด้วยจาวาสคริปต์นะ) โดยขอบเขตของภาพที่วาดก็จะอยู่ในออบเจคต์
ชื่อ canvas นั่นเอง
สิ่งที่เราสามารถใส่ลงไปในกรอบ canvas ได้แก่
• รูปทรงพื้นฐาน สี่เหลี่ยม วงกลม เส้นตรง เส้นโค้ง พาธ (รูปทรงมีไม่เยอะเท่ากับ SVG)
• ไฟล์รูปภาพ จะซ้อนกันกี่ชั้นก็ได้ตามสะดวก
• แอนิเมชัน กาหนดให้วัตถุต่างๆ เคลื่อนไหว
• แปลงสภาพวัตถุ (transformation) จะกาหนดให้หมุน เอียง บิดเบี้ยว ได้เหมือนกัน
• ประกอบ-ซ้อนภาพวัตถุ (composition) เช่น นาสี่เหลี่ยมกับสามเหลี่ยมมา intersect เพื่อสร้าง
วัตถุแบบใหม่
• ความต่างที่สาคัญของ SVG กับ canvas คือ
• SVG ได้ผลลัพธ์เป็นเวกเตอร์ ส่วน canvas ได้ผลลัพธ์เป็นราสเตอร์ (ภายในกรอบวัตถุ canvas)
• SVG สั่งวาดด้วยแท็กแบบ markup (ซับเซ็ตของ XML) ส่วน canvas สั่งวาดด้วยจาวาสคริปต์

22. 16
WebGL
โดยทั่วไปแล้ว การวาดภาพ-แสดงผลใน canvas เรามักใช้กับภาพ 2 มิติเป็นหลัก แต่ถ้าต้องการวาด
ภาพ 3 มิติ เราจะใช้ส่วนขยายของ canvas ที่เรียกว่า WebGL (Web-based Graphics Library)
WebGL เป็นไลบรารีกราฟิกที่พัฒนาอยู่บน OpenGL ES 2.0 ซึ่งเป็นไลบรารีกราฟิก 3 มิติมาตรฐาน
ของวงการไอที แต่ดัดแปลงให้เรนเดอร์ภาพออกมาบนออบเจคต์ canvas ภายในเบราว์เซอร์ และสั่งงานได้
ผ่านจาวาสคริปต์ ตอนเรนเดอร์ก็ทาผ่าน GPU ตามปกติ (ดูข่าวเก่าหมวด WebGL ประกอบ)
ขั้นตอนการวาดภาพ 3 มิติบน WebGL แทบไม่ต่างอะไรกับ canvas ปกติ เพราะเราต้องกาหนด
บริเวณที่เป็น canvas ในเว็บเพจขึ้นมาก่อน เพียงแต่ตอนวาดในจาวาสคริปต์ เราจะสร้างออบเจคต์ชนิด
WebGL ขึ้นมาแทน canvas ปกติ ส่วนหลักการวาดวัตถุ 3 มิติคงไม่ต่างอะไรกับ OpenGL ใครเคยเขียน
โปรแกรมกับ OpenGL คงใช้ WebGL ได้แทบจะทันที สถานะตอนนี้ของ WebGL คือเบราว์เซอร์ทุกค่าย
สนับสนุนแล้ว ยังเหลือฝั่งไมโครซอฟท์ที่ยังไม่ยอมสนับสนุน (เหตุผลหนึ่งเพราะอยู่บน OpenGL ไม่ใช่
DirectX)
CSS3 3D
CSS3 นั้นต่างไปจาก CSS2 มาก เพราะมันไม่ใช่มาตรฐานเดี่ยว ๆ แต่ประกอบด้วยมาตรฐานย่อย ๆ
จานวน "หลายสิบ" ชนิด ซึ่งหนึ่งในนั้นคือ CSS3 3D Transforms ที่สามารถแปลงสภาพวัตถุบนเว็บเพจใน
แบบต่าง ๆ เช่น ขยายขนาด หมุนเอียงตามแกน xyz

23. 17
7. Performance & Integration
หมวดที่เจ็ดเป็นการปรับปรุงประสิทธิภาพการทางานของเว็บแอพแบ่งออกเป็น 2 ส่วนใหญ่ ๆ Web
Worker อธิบายง่าย ๆ Web Worker คือจาวาสคริปต์ที่ทางานแบบมัลติเธร็ด เพื่อให้สคริปต์สามารถทางาน
เบื้องหลังได้หลาย ๆ งานพร้อมกัน การใช้งานเราสามารถสั่งได้ที่ตัวโค้ดจาวาสคริปต์โดยตรง โดยสร้างตัวแปร
ชนิด worker ขึ้นมาบอกเบราว์เซอร์ว่า โค้ดจาวาสคริปต์ส่วนนี้ ขอให้ทางานแบบ Web Worker เพื่อ
ประสิทธิภาพที่ดีขึ้น
XMLHttpRequest Level 2
XHR เป็นวิธีการโหลดข้อมูลเฉพาะบางส่วนของเว็บเพจ (ไม่ใช่ทั้งหน้า) ช่วยให้เราสามารถปรับปรุง
ข้อมูลบางส่วนของเพจได้ โดยไม่ต้องโหลดใหม่ทั้งหน้า ผลคือเว็บเพจที่อินเตอร์แอคทีฟมากขึ้นนั่นเอง
XMLHttpRequest Level 2 เป็นความพยายามของ W3C ที่จะพัฒนา XMLHttpRequest รุ่นแรก
ให้มีประสิทธิภาพ-ความสามารถมากขึ้น แบ่งได้ง่าย ๆ 3 อย่าง ได้แก่
• การแยกแยะเหตุการณ์ (event) แต่ละชนิดออกจากกัน ช่วยให้โปรแกรมเมอร์ติดตามและควบคุม
การส่งข้อมูลได้ง่ายขึ้น
• รองรับการอัพโหลดไฟล์จากฝั่งไคลเอนต์ (เดิมที่ไม่รองรับการส่งไฟล์) ซึ่งจะใช้ควบคู่กับ File API
ในหัวข้อก่อน
• ส่งข้อมูลแบบข้ามหลายโดเมน ซึ่งรุ่นก่อนเรียกได้เฉพาะโดเมนเดียวกัน

24. 18
8. CSS3
CSS3 มีความสามารถเพิ่มขึ้นจาก CSS2 ในปัจจุบันมาก เพิ่มฟีเจอร์ของแวดวงสิ่งพิมพ์ที่เกี่ยวข้องกับ
การจัดหน้า การควบคุมการไหลของข้อความ และฟอนต์เข้ามาอีกมาก แต่ก็ยังมีเรื่องอื่นๆ เช่น 3D, เสียงพูด,
แอนิเมชัน ฯลฯ (ดูข่าวเก่าเรื่อง CSS3 Regions ประกอบ) เทคโนโลยีอีกตัวที่เกี่ยวข้องกันคือ Web Open
Font Format (WOFF) ที่ช่วยให้เราฝังฟอนต์เข้ามาในเว็บเพจได้ด้วย
CSS
CSS คืออะไร
CSS ย่อมาจาก Cascading Style Sheet มักเรียกโดยย่อว่า "สไตล์ชีต" คือภาษาที่ใช้เป็นส่วนของ
การจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กาหนดกฏเกณฑ์ในการระบุรูปแบบ (หรือ "Style")
ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ ซึ่งการ
กาหนดรูปแบบ หรือ Style นี้ใช้หลักการของการแยกเนื้อหาเอกสาร HTML ออกจากคาสั่งที่ใช้ในการ
จัดรูปแบบการแสดงผล กาหนดให้รูปแบบของการแสดงผลเอกสาร ไม่ขึ้นอยู่กับเนื้อหาของเอกสาร เพื่อให้ง่าย
ต่อการจัดรูปแบบการแสดงผลลัพธ์ของเอกสาร HTML โดยเฉพาะในกรณีที่มีการเปลี่ยนแปลงเนื้อหาเอกสาร
บ่อยครั้ง หรือต้องการควบคุมให้รูปแบบการแสดงผลเอกสาร HTML มีลักษณะของความสม่าเสมอทั่วกันทุก
หน้าเอกสารภายในเว็บไซต์เดียวกัน โดยกฏเกณฑ์ในการกาหนดรูปแบบ (Style) เอกสาร HTML ถูกเพิ่มเข้ามา

25. 19
ครั้งแรกใน HTML 4.0 เมื่อปีพ.ศ. 2539 ในรูปแบบของ CSS level 1 Recommendations ที่กาหนดโดย
องค์กร World Wide Web Consortium หรือ W3C
ประโยชน์ของ CSS
1. 1.CSS มีคุณสมบัติมากกว่า tag ของ html เช่น การกาหนดกรอบให้ข้อความ รวมทั้งสี รูปแบบ
ของข้อความที่กล่าวมาแล้ว
2. 2.CSS นั้นกาหนดที่ต้นของไฟล์ html หรือตาแหน่งอื่น ๆ ก็ได้ และสามารถมีผล กับเอกสาร
ทั้งหมด หมายถึงกาหนด ครั้งเดียวจุดเดียวก็มีผลกับการแสดงผลทั้งหมด ทาให้เวลาแก้ไขหรือ
ปรับปรุงทาได้สะดวก ไม่ต้องไล่ตามแก้ tag ต่างๆ ทั่วทั้งเอกสาร
3. 3.CSS สามารถกาหนดแยกไว้ต่างหากจาก ไฟล์เอกสาร html และสามารถนามาใช้ร่วม กับ
เอกสารหลายไฟล์ได้ การแก้ไขก็แก้เพียง จุดเดียวก็มีผลกับเอกสารทั้งหมด
CSS กับ HTML / XHTML นั้นทาหน้าที่คนละอย่างกัน โดย HTML / XHTML จะทาหน้าที่ในการวาง
โครงร่างเอกสารอย่างเป็นรูปแบบ ถูกต้อง เข้าใจง่าย ไม่เกี่ยวข้องกับการแสดงผล ส่วน CSS จะทาหน้าที่ในการ
ตกแต่งเอกสารให้สวยงาม เรียกได้ว่า HTML /XHTML คือส่วน coding ส่วน CSS คือส่วน design

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

27. 21
2. อาหารหรือเครื่องดื่มที่มี ไขมัน 0% ไม่ทาให้อ้วน
ความจริง: ในโลกนี้มีสารอาหารที่ให้พลังงานหลักอยู่ 3 ชนิด คือ คาร์โบไฮเดรต โปรตีน และ ไขมัน
การบริโภคสารอาหารทั้งสามมากเกินกว่าที่ร่างกายนาไปเผาผลาญได้ จะถูกเก็บสะสมเป็นไขมันทั้งหมด ดังนั้น
ถึงแม้ขนมที่เขียนติดไว้ว่า ไขมัน 0% ถ้ามันยังมีน้าตาลอยู่ก็ทาให้อ้วนได้ ดังนั้นให้สังเกตุจากแคลอรี่รวมที่
ฉลากข้างหลังกล่องเป็นหลักว่าแคลอรี่มากน้อยเท่าไร (เดี๋ยวนี้การตลาดเค้าบิ้วเก่งมากๆ เราจะต้องหยุด
ไตร่ตรองให้รอบคอบก่อนจะตัดสินใจซื้อนะ)
3. ซิทอัพ ช่วยลดพุงและสร้าง ซิกแพค
ความจริง: มีคากล่าวของฝรั่งว่า “abs are made in the kitchen” หรือ “กล้ามท้องอันสวยงาม
สร้างจากห้องครัว” ต่อให้เราเล่นกล้ามท้องหนักเท่าไรก็ตาม แต่ถ้าไม่ควบคุมอาหาร ยังไงก็ไม่มีทางที่จะพุงจะ
ยุบแน่นอน การเล่นกล้ามท้อง ช่วยสร้างกล้ามเนื้อภายในก็จริง แต่มันถูกครอบไว้ด้วยชั้นไขมัน เราจึงต้องทาให้
ชั้นไขมันหายไปก่อนจึงจะเห็นกล้ามเนื้อที่ซ่อนอยู่ได้ (โดยปกติคนทั่วไปผู้ชายจะต้องมี Body Fat น้อยกว่า
12% และผู้หญิงน้อยกว่า 20% ถึงจะเริ่มเห็นกล้ามหน้าท้อง) ดังนั้นการทาให้ไขมันหายไป และเห็นกล้าม
ท้องที่ชัดเจน จึงต้องใช้การควบคุมอาหาร บวกกับการทาคาร์ดิโอ เป็นหลัก

28. 22
4. ทาคาร์ดิโอในช่วง Fat-Burning Zone เผาผลาญไขมันได้ดีที่สุด
ความจริง: Fat-Burning Zone ที่เราเห็นเป็นกราฟแปะอยู่บนเครื่องวิ่งไฟฟ้า ซึ่งแสดงให้เห็นถึงช่วง
การเต้นของหัวใจที่ประมาณ 60-70% ของอัตราการเต้นของหัวใจสูงสุด เป็นช่วงที่ร่างกายใช้ไขมันเป็น
เปอร์เซนต์ส่วนมากในการเผาผลาญพลังงาน อย่างไรก็ตาม มันไม่ได้หมายถึงจานวนแคลอรี่สุทธิทั้งหมดที่ใช้
ไป ความเป็นจริงนั้นคุณสามารถเบิร์นแคลอรี่โดยรวมได้มากกว่าด้วยการฝึกแบบหนักสลับเบา (วิ่งเร็วเต็มสปีด
1 นาที วิ่งช้า 1 นาทีสลับกันไป) หรือการฝึกแบบ HIIT เพราะการฝึกพวกนี้จะช่วยให้ร่างกายมีเมตาบอลิซึมที่
สูงต่อเนื่องไปแม้จะออกกาลังกายเสร็จแล้ว โดยรวมทั้งหมดร่างกายจึงใช้แคลอรี่ไปมากกว่า
อย่างไรก็ตาม อาจจะเป็นการหนักเกินไปที่จะฝึก HIIT ทุกวัน ดังนั้นในวันที่อยากสบายๆ การทาคาร์ดิ
โอในช่วง Fat-Burning Zone ก็เป็นตัวเลือกที่ดี

29. 23
5. ผู้หญิงไม่ควรเล่นเวท เพราะจะทาให้กล้ามใหญ่
ความจริง: หนึ่งในตัวแปรที่สาคัญที่สุดที่จะทาให้กล้ามเนื้อเกิดอาการบวม (Hypertrophy) คือ
ฮอร์โมนเทสโทสเทอร์โรนที่มีมากในเพศชาย ฮอร์โมนตัวนี้เป็นตัวทาให้เกิดการเติบโตของกล้ามเนื้อ นั่น
หมายความว่า ถึงแม้ผู้หญิงจะยกน้าหนักเท่าผู้ชาย แต่กล้ามเนื้อก็จะไม่โตเท่าผู้ชายอยู่ดี (ผู้หญิงที่เป็นนักเพาะ
กายตัวใหญ่เพราะเขามียีนที่ไม่เหมือนคนทั่วไป และยังอาจจะต้องกินฮอร์โมนเพศชายเข้าช่วยเพิ่มไปอีกด้วย)
6. ถ้าอยากจะลดความอ้วน ทาคาร์ดิโอจนได้น้าหนักที่คุณต้องการ แล้วค่อยเริ่มเล่นเวทก็ได้
ความจริง: การทาคาร์ดิโอโดยไม่เล่นเวทเทรนนิ่งเลย ร่างกายมีแนวโน้มที่จะสลายกล้ามเนื้อเพื่อมา
แปลงเป็นพลังงาน ทาให้คุณสูญเสียมวลกล้ามเนื้อไปได้ง่ายๆ ดังนั้นเพื่อให้ร่างกายรับรู้ว่าเราต้องการกล้ามเนื้อ
อยู่ เราจาเป็นจะต้องเล่นเวทเทรนนิ่งหรือออกกาลังกายที่มีแรงต้าน แถมข้อดีอีกอย่างคือกล้ามเนื้อที่เพิ่มมาก
ขึ้นจะช่วยเพิ่มอัตราเผาผลาญพลังงานของร่างกายให้สูงอยู่ตลอดเวลา ถึงแม้ว่าการเล่นเวทจะไม่เบิร์นแคลอรี่
มากนักในขณะเล่น แต่เมื่อคิดถึงแคลอรี่รวมทั้งหมดที่มันเบิร์นขณะพักทั้งวันด้วยแล้ว มันจะยิ่งช่วยให้คุณลด
น้าหนักได้มากขึ้นเสียด้วยซ้าไป

30. 24
7. การกินผลไม้ทุกชนิดดีต่อสุขภาพ
ความจริง: ผลไม้บางชนิดมีแคลอรี่สูงเพราะเต็มไปด้วยน้าตาล แน่นอนว่ามันดีกว่าขนมเค้กหวานๆ
หลายเท่าเพราะมีวิตามิน แต่ถ้าคุณต้องการลดน้าหนักอย่างมีประสิทธิภาพ การกินมะม่วง ลาไย ทุเรียน หรือ
ผลไม้ที่มีรสหวานอาจยิ่งเพิ่มความอ้วนเข้าไปใหญ่ ถ้าต้องการจะกินเพื่อให้อิ่มท้องควรจะทานพวกผักใบเขียว
แครอท บล็อคโคลี่ หรือผลไม้ที่ไม่หวานและมีกากใยอยู่เป็นจานวนมากอย่าง แก้วมังกร แตงโม สตอเบอรรี่ จะ
ดีกว่า
8. เราสามารถลดไขมันเฉพาะส่วนได้
ความจริง: การบังคับให้ร่างกายลดไขมันเฉพาะส่วนที่เราต้องการนั้นเป็นไปไม่ได้ ไขมันไม่เหมือน
กล้ามเนื้อที่เราเล่นตรงไหนก็จะโตตรงนั้น ไขมันเป็นเสมือนแผ่นผ้าใหญ่ๆที่คลุมร่างกาย เราไม่สามารถบังคับได้
ว่าจะให้นาส่วนไหนมาใช้ก่อน พันธุกรรมของแต่ละคนจะเป็นตัวกาหนดเองว่ามันชอบที่จะใช้ไขมันส่วนไหน
มาเบิร์นก่อนเพื่อน การลดต้นขา การลดพุง การลดต้นแขน ก็ต้องทาเหมือนกันคือ ควบคุมอาหาร และออก
กาลังกาย ไขมันจะค่อยๆหายไปทั่วทั้งร่างกายเอง (การลดไขมันเฉพาะจุดมีวิธีเดียวคือไปดูดไขมันออกที่คลีนิค)
9. กล้ามเนื้อที่ชัดเจนมาจากการยกน้าหนักเบาแต่หลายๆครั้ง
ความจริง: กล้ามเนื้อที่ชัดมาจากการที่เรามีกล้ามเนื้อและมีชั้นไขมันที่บางมาก ถ้าคุณฝึกด้วยน้าหนัก
ที่เบาตลอดเวลาเพราะไม่ต้องการให้กล้ามใหญ่ คุณจะไม่มีทางสร้างกล้ามเนื้อได้ การสร้างกล้ามเนื้อให้ชัดเจน
จริงๆแล้วจะต้องมาจากการเล่นเพื่อสร้างกล้ามเนื้อ (8-12 ครั้ง หนักเท่าที่จะทาได้) รวมกับการทายังไงก็ได้ให้
เปอร์เซนต์ไขมันในร่างกายต่ามากๆ (ค่าประมาณ ผู้ชาย < 12% , ผู้หญิง < 20%) ซึ่งหลักๆก็คือการควบคุม
อาหารนั่นเอง

31. 25
10. ยิ่งเหงื่อออกมายิ่งลดไขมันได้มาก
ความจริง: เหงื่อไม่เกี่ยวกับไขมันที่เบิร์นออกไปเลย เหงื่อเป็นสิ่งที่ร่างกายของเราใช้ขับความร้อน
เท่านั้น การสังเคราะห์ไขมันเป็นพลังงานเกิดภายในร่างกาย ไม่เกี่ยวกัน ดังนั้นการอบซาวน่า การใส่เสื้อกัน
หนาววิ่งเพื่อให้เหงื่อออกมากๆ ไม่ทาให้ไขมันลดได้มากขึ้น (อาจจะเห็นว่าน้าหนักลดลง เพราะเป็นน้าหนักของ
น้าที่สูญเสียออกจากร่างกายในรูปของเหงื่อ เมื่อดื่มน้ากลับเข้าไปก็จะน้าหนักเท่าเดิม)

32. 26
ภาวะโยโย่จากการอดอาหาร เป็นอันตรายต่อสุขภาพของคุณ
เมื่อคุณต้องการลดน้าหนักให้รูปร่างดูดี การอดอาหารมักจะเป็นเรื่องที่ดึงดูดใจของใครหลายๆคน ซึ่ง
เป็นการลดน้าหนักที่ง่ายและรวดเร็ว (ในระยะเวลาสั้นๆ) ซึ่งในการทดลองพบว่ามีโอกาสที่จะได้ผลลัพธ์ที่ไม่ดี
นัก วิธีการลดน้าหนักที่ช้าและคงที่ ยังคงเป็นวิธีที่ดีต่อสุขภาพในการจัดการกับน้าหนัก การศึกษาล่าสุดพบว่า
การอดอาหารจะทาให้เกิดภาวะโยโย่ที่จะทาให้น้าหนักขึ้นๆลงๆ และยังมีความสัมพันธ์กับความเสี่ยงในการ
เป็นโรคหลอดเลือดสมอง หัวใจวาย และการเสียชีวิตจากโรคหัวใจในผู้ที่เป็นโรคหัวใจ
Yo-Yo Effect อันตรายต่อสุขภาพ
การวิจัยก่อนหน้านี้พบว่า ภาวะของ Yo-Yo Effect อาจเป็นอันตรายต่อกลุ่มต่างๆ เช่น สตรีวัยหมด
ประจาเดือน การศึกษาใหม่ได้รับการตีพิมพ์ใน New England Journal of Medicine บอกว่า การเกิด Yo-
Yo Effect เป็นผลจากการขาดแคลอรี่มากเกินไป ทาให้ร่างกายได้รับสารอาหารไม่เพียงพอ จึงทาให้ระบบ
ต่างๆ ทางานผิดปกติ ภาวะนี้จะลดการทางานระบบเผาผลาญให้ต่าลงอย่างรวดเร็ว แม้ว่าไขมันก็มีส่วนหายไป
บ้าง แต่กล่ามเนื้อก็หายไปด้วย
ซึ่งการศึกษาครั้งใหม่นี้ มีข้อมูลจากการทดลองทางคลินิกซึ่งมีชายและหญิงจานวน 9,509 คนที่มีอายุ
ระหว่าง 35 ถึง 75 ปี ซึ่งทั้งหมดได้รับการวินิจฉัยว่าเป็นโรคหลอดเลือดหัวใจและคอเลสเตอรอลสูง ผู้เข้าร่วม
การศึกษาได้รับการกาหนดปริมาณยาลดระดับไขมันในเลือดที่แตกต่างกัน และการทดลองเดิมได้รับการ
สนับสนุนโดยไฟเซอร์ (ผู้เชี่ยวชาญด้านการค้นคว้าวิจัยยาระดับโลก)

33. 27
ผู้เข้าร่วมประชุมได้ติดตามผลมาประมาณห้าปี และมีการประเมินน้าหนักทุกหกเดือน ในเวลานั้น
นักวิจัยพบว่าการเปลี่ยนแปลงของน้าหนักตัวซ้าๆ มีปัญหาที่เกี่ยวข้องกับโรคหัวใจและหลอดเลือดมากขึ้น
แม้ว่าการเชื่อมโยงจะมีนัยสาคัญโดยเฉพาะในคนที่เป็นโรคอ้วนหรือมีน้าหนักเกินในช่วงเริ่มต้นของการศึกษา
และมีการพบว่าโรคเบาหวานนั้นก็มีส่วนในการเกี่ยวข้องกับภาวะนี้ด้วย
โดยรวมคนที่มีการเปลี่ยนแปลงน้าหนักเฉลี่ยที่มากที่สุด (มากถึง 8.6 ปอนด์ระหว่างการศึกษา) มี
ประสบการณ์เป็นลมหมดสติจากโรคหัวใจมากกว่า 136% อาการหัวใจวาย 117% และเสียชีวิต 124% ใน
ระหว่างการศึกษามากกว่าคนที่มีการเปลี่ยนแปลงน้อยที่สุด (ไม่ถึง 2 ปอนด์) ในน้าหนักปัจจุบัน สาหรับความ
ผันผวนของน้าหนักทุก 1.5 ถึง 2 ปอนด์ จะมีความเสี่ยงของโรคหลอดเลือดหัวใจเพิ่มขึ้น 4% และความเสี่ยง
ต่อการเสียชีวิตถึง 9%
Dr. Sripal Bangalore ผู้อานวยการที่ NYU Langone Medical Center กล่าวว่า ตัวเลขเหล่านี้ดูน่า
แปลกใจ “เราคาดหวังว่ามันจะมีความสัมพันธ์กัน แต่ก็ไม่คิดว่าจะเป็นเรื่องที่สาคัญอะไร” เขากล่าว
การศึกษาไม่สามารถระบุได้ว่า ทาไมคนถึงต้องสูญเสียน้าหนักไม่ว่าจะโดยเจตนาไม่ตั้งใจ หรือเป็นผล
มาจากการเจ็บป่วย และไม่สามารถยืนยันความสัมพันธ์ระหว่างเหตุและผลระหว่างการขี่จักรยานอย่างหนักกับ
ปัญหาหัวใจในอนาคตได้ แต่ผลการวิจัยชี้ให้เห็นว่าแพทย์ควรกังวลเกี่ยวกับความผันผวนของน้าหนักในผู้ที่เป็น
โรคหัวใจซึ่งเป็นกลุ่มที่มีความเสี่ยงสูงต่ออาการหัวใจวายและภาวะแทรกซ้อนที่เป็นอันตรายอื่นๆ
ดร. Bangalore กล่าวว่า “เมื่อเราเห็นผู้ป่วยโรคหัวใจหรือผู้ป่วยโรคอ้วนที่เป็นโรคหลอดเลือดหัวใจตีบ
เรามักแนะนาให้ลดน้าหนัก” “แต่การบอกด้วยเหตุนี้ นั่นเป็นเพราะว่าเรารู้ว่าผู้ป่วยไม่เพียงแค่น้าหนักลดลง
เท่านั้น แต่อาจจะมีภาวะที่น้าหนักกลับมา เรารู้ว่านี่เป็นความเครียดที่สาคัญต่อร่างกาย ดังนั้นเราจึงจาเป็นที่
จะต้องค้นหาว่าเราสามารถป้องกันได้อย่างไรบ้าง”

34. 28
ดร. Bangalore กล่าวว่า ข้อความที่นี่ควรใช้กับทุกคนที่พยายามจะลดน้าหนัก ไม่ใช่แค่คนที่เป็น
โรคหัวใจเท่านั้น “ฉันมักจะเห็นผู้ป่วยที่พยายามลดน้าหนักและเมื่อพวกเขาบรรลุเป้าหมายแล้ว พวกเขาก็
พยายามที่จะผ่อนคลายและกลับไปใช้นิสัยเก่าๆ” เขากล่าว “สิ่งที่คุณสามารถทาได้เพื่อลดน้าหนักนั้นเป็นสิ่ง
สาคัญ แต่เมื่อคุณทาทุกอย่างอย่างหนักแล้วก็เป็นสิ่งสาคัญที่จะอยู่ห่างๆ มันเอาไว้”