Introduction
ปัจจุบันเว็บไซต์ต่างๆ มีจุดประสงค์และรูปแบบการนำเสนอเนื้อหาของเว็บไซต์ที่ต่างกันออกไป เช่น Facebook เป็นเว็บไซต์ในรูปแบบ Social Network สำหรับการพบปะพูดคุยกัน, Bloggang เป็นเว็บไซต์สำหรับให้สมาชิกสร้างพื้นที่ส่วนตัวในการนำเสนอเนื้อหาต่างๆ หรือ Weloveshoping เป็นเว็บไซต์สำหรับการนำเสนอสินค้าและซื้อขายสินค้าแบบออนไลน์ เป็นต้น รวมไปถึงเว็บไซต์ขององค์กรต่างๆ ก็ถูกพัฒนาขึ้นเพื่อใช้สำหรับการโฆษณา ประชาสัมพันธ์และส่งเสริมภาพลักษณ์ขององค์กรด้วย
เทคโนโลยีในปัจจุบันช่วยเอื้อให้เว็บไซต์ต่างๆ สามารถนำเสนอเนื้อหาได้อย่างมีสีสันและมีลูกเล่นเพิ่มมากขึ้น ภาษาที่ใช้สำหรับพัฒนาเว็บไซต์ เช่น JavaScript และ CSS รวมไปถึง HTML ก็ถูกพัฒนาให้มีความสามารถมากขึ้น จาก HTML 4.0 มาเป็น HTML5 ซึ่งเป็นเวอร์ชั่นล่าสุดที่เรียกได้ว่าเป็นการปรับปรุงการพัฒนาเว็บไซต์ให้ก้าวหน้าไปอีกขั้น เนื่องจากคุณสมบัติใหม่ของ HTML5 ช่วยให้การพัฒนาเว็บไซต์นั้นมีลูกเล่นต่างๆ ที่สามารถรองรับการทำงานของผู้ใช้งานได้มากขึ้น
หนังสือเล่มนี้จะนำเสนอเนื้อหาเกี่ยวกับ HTML5, JavaScript, และ CSS3 โดยจะแนะนำคุณสมบัติใหม่ของ HTML5 เช่น Canvas, Semantic Markup, Geolocation, Local Storage เป็นต้น โดยเริ่มอธิบายตั้งแต่ลักษณะเด่นของคุณสมบัติแต่ละประเภท รูปแบบการนำคุณสมบัติแต่ละประเภทไปใช้งาน รวมถึงตัวอย่างโค้ดโปรแกรมแบบง่ายๆ ไปจนถึงขั้นสูง นอกจากนี้ยังมีการปูพื้นฐานสำหรับผู้เริ่มต้นซึ่งอาจยังไม่เคยศึกษาภาษา HTML, JavaScript, หรือ CSS ในเวอร์ชั่นเดิมมาก่อนด้วย
ผู้เขียนหวังเป็นอย่างยิ่งว่าหนังสือเล่มนี้จะช่วยให้ผู้อ่านมีความรู้ความเข้าใจเกี่ยวกับภาษา HTML5 เป็นอย่างดี และสามารถนำความรู้ที่ได้รับไปพัฒนาเว็บไซต์ตามที่ต้องการ
กังวาน อัศวไชยวศิน
Contents
CHAPTER 01 : เปิดตัว HTML5
เหตุผลที่ควรศึกษา HTML5
- HTML5 เป็นเทรนใหม่ของการพัฒนาเว็บไซต์- รู้ HTML ก็สร้างรายได้ง่ายๆ
- HTML5 มีคุณสมบัติใหม่ที่โดดเด่นช่วยให้การพัฒนาเว็บเพจเป็นเรื่องง่าย
- Canvas
- Audio/Video
- Semantic markup
- Geolocation
- Drag and Drop
- Local Storage
- ContentEditable
- Form Enhancement
HTML5 แตกต่างจาก HTML เวอร์ชั่นก่อนอย่างไร?
Modernnizr... ตรวจสอบว่า HTML5 ทำงานบนเว็บบราวเซอร์ใดได้บ้าง
- วิธีการดาวน์โหลด Modernizr
- วิธีเรียกใช้งาน Modernizr
Dreamveaver กับการสร้างเว็บเพจด้วย HTML5
- เริ่มต้นใช้งาน Dreamweaver
- สร้างเว็บเพจใหม่ด้วย HTML5 โดยใช้โปแกรม Dreamweaver
- บันทึกเว็บเพจในโปรแกรม Dreamweaver
- การเรียกดูผลลัพธ์ของเว็บเพจ
CHAPTER 02 : ปรับแต่งเว็บเพจด้วย CSS3
CSS3
- Selector
- Background, Border และ Text
- Multicolumn Layout
- Web Font
- RGBA, HSL, HSLA
- Gradient
CHAPTER 03 : Canvas วาดภาพสารพัดนึกบนเว็บเพจ
Canvas คืออะไร
- การเรียกใช้งาน Canvas ในเว็บเพจ
Canvas กับเว็บบราวเซอร์
Canvas Context
พิกัดของ Canvas
การลากเส้น วาดรูป และระบายสีบน Canvas
- การระบายสีบนพื้นที่ภายใน Path
- การวาดสี่เหลี่ยม
- การลบสีและเส้นบน Canvas
- การวาดเส้นโค้งและวงกลม
การแสดงข้อความบน Canvas
การแสดงรูปภาพบน Canvas
วาดการ์ตูนบน Canvas
จาก Flash สู่ HTML5
- Wallaby
- Google Swiffy
CHAPTER 04 : Audio & Video เสียงและภาพแบบไม่ต้องพึ่งพา Plug-in
ทำไมต้องเพิ่มแท็ก <VIDEO> และ <AUDIO>?
การเรียกใช้งานแท็ก <VIDEO> และ <AUDIO> ในเว็บเพจ
- เรียกใช้งานแท็ก <VIDEO>
- เรียกใช้งานแท็ก <AUDIO>
ตรวจสอบการรองรับการทำงานของแท็ก <VIDEO> และ <AUDIO>
Format และ Codec ของไฟล์วิดีโอและไฟล์เสียง
- Format และ Codec เกี่ยวข้องกันอย่างไร?
- ประเภทของไฟล์วิดีโอและไฟล์เสียงสำหรับแท็ก <VIDEO> และ <AUDIO>
- การเรียกใช้แท็ก <VIDEO>
- การเรียกใช้แท็ก <AUDIO>
Modernizr กับการตรวจสอบประเภทของไฟล์
การให้เว็บบราวเซอร์เลือกโหลดไฟล์ด้วยแท็ก <SOURCE>
คุณสมบัติต่างๆ ของแท็ก <VIDEO>
- ตัวอย่างการใช้งานคุณสมบัติต่างๆ ของแท็ก <VIDEO>
- กำหนดคุณสมบัติ Autoplay
- กำหนดคุณสมบัติ Muted
- กำหนดคุณสมบัติ Poster
คุณสมบัติต่างๆ ของแท็ก <AUDIO>
ควบคุมการทำงานของแท็ก <VIDEO> และ <AUDIO> ด้วย JavaScript
- การโหลดไฟล์วิดีโอหรือไฟล์เสียงให้แสดงผล
- การสั่งเล่น/หยุดเล่นไฟล์วิดีโอชั่วคราว
- การปิด/เปิดเสียง
- การปรับระดับความดังของเสียง
- การสั่งให้แสดงผลไฟล์วิดีโอแบบวนซ้ำ
- การเลื่อนเนื้อหาไฟล์วิดีโอไปยังตำแหน่งที่ต้องการ
<CANVAS> ช่วยเพิ่มลูกเล่นการแสดงผลไฟล์วิดีโอ
- หลักการทำงานของการแสดงผลไฟล์วิดีโอ
- หลักการกำหนดเอฟเฟ็คต์ให้กับไฟล์วิดีโอด้วย Canvas
- การประกาศแท็ก <CANVAS> ให้ทำงานร่วมกับแท็ก VIDEO
- การดึงภาพในแต่ละเฟรมของไฟล์วิดีโอเพื่อนำไปกำหนดเอฟเฟ็คต์
- โครงสร้างของภาพในแต่ละเฟรม
- การกำหนดเอฟเฟ็คต์ให้กับภาพในแต่ละเฟรม
ตรวจสอบข้อผิดพลาดในการแสดงผลไฟล์วิดีโอหรือไฟล์เสียง
- Streaming กับ HTML5
CHAPTER 05 : Semantic Markup แท็กใหม่ไฉไลกว่าเดิม
Semantic Markup คืออะไร
แท็ก <DIV> กับ Semantic Markup
Semantic Markup กับ Search Engine
การใช้งาน Semantic Element
- แท็ก <HEADER>
- แท็ก <FOOTER>
- แท็ก <NAV>
- แท็ก <ARTICLE>
- แท็ก <SECTION>
- แท็ก <ASIDE>
- แท็ก <HGROUP>
- แท็ก <FIGURE> และ <FIGCAPTION>
CHAPTER 06 : คุณอยู่ที่ไหน? บอกง่ายๆ ได้ด้วย Geolocation
Geolocation คืออะไรLatitude Longitude
Geolocation กับการ check-in ตำแหน่งที่อยู่
การทำงานของ Geolocation API
การใช้งาน Geolocation API
รายละเอียดของข้อมูลพิกัด
จัดการกับ Error กรณีค้นหาข้อมูลพิกัดไม่สำเร็จ
กำหนดรายละเอียดของการค้นหาพิกัดด้วย Options
การค้นหาพิกัดขณะเคลื่อนที่
การทำงานร่วกับแผนที่
- รู้จักกับ Google Maps
- การแสดงผล Google Maps ในหน้าเว็บเพจ
- การปักหมุดแสดงตำแหน่งบนแผนที่
- สร้าง GPS แบบง่ายๆ ด้วย Google Maps
CHAPTER 07 : Drag and Drop ลากวางง่าย ๆ อย่างใจคิด
ทำไมต้อง Drag and Drop?
ทำอย่างไรให้เนื้อหาบนหน้าเว็บเพจถูกลากได้
วางเนื้อหาที่คลิกลากมาบนหน้าเว็บเพจได้อย่างไร
Drag and Drop กับการทำงานร่วมกับ Canvas
- อธิบายการทำงานของโปรแกรม
CHAPTER 08 : Local Storage เก็บข้อมูลแบบถาวรบนเครื่องผู้ใช้งาน
การเก็บข้อมูลส่วนตัวของผู้ใช้งานด้วยคุกกี้
- คุกกี้คืออะไร
- การทำงานของคุกกี้
- ข้อจำกัดและช่องโหว่ของคุกกี้
HTML5 Web Storage
LocalStorage เก็บ้อมูลแบบถาวรบนเครื่องผู้ฝช้งาน
- ความแตกต่างระหว่างคุกกี้และ LocalStorage
- ตรวจสอบการรองรับคุณสมบัติ LocalStorage ของเว็บบราวเซอร์
- การเก็บและเรียกใช้ข้อมูลใน LocalStorage
- ตัวอย่างที่ 1 : การเก็บและดึงค่าสีพื้นหลังของเว็บเพจใน localStorage
- การเรียกใช้งาน localStorage แบบอาร์เรย์
- ตัวอย่างที่ 2 : การเก็บและดึงค่าสีพื้นหลังของเว็บเพจใน localStorage แบบอาร์เรย์
- การเก็บและดึงค่าข้อมูลชนิดออบเจ็คใน localStorage
- ตัวอย่างที่ 3 : การเก็บและดึงค่าคะแนนซึ่งเป็นข้อมูลชนิดออบเจ็คใน localStorage
- การลบข้อมูลใน localStorage
- ตัวอย่างที่ 4 : การเคลียร์ค่าคะแนนใน localStorage
sessionStorage : เก็บข้อมูลชั่วคราวบนเครื่องผู้ใช้งาน
การเลือกใช้งาน localStorage หรือ sessionStorage
เก็บข้อมูลในแบบฐานข้อมูลด้วย Web SQL Database และ IndexedDB
- Web SQL Database
- IndexedDB
- อนาคตของ Web SQL Database และ IndexedDB
CHAPTER 09 : ContentEdiatable แก้ไขข้อมูลได้ทันใจต้องการ
การแก้ไขข้อมูลบนหน้าเว็บเพจ
ContentEdiatable กับแท็ก HTML
- การกำหนดค่าให้กับคุณสมบัติ ContentEditable
- การแสดงผลของเว็บบราวเซอร์เมื่อกำหนด contenteditable=trueเหตุการณ์ของเว็บบราวเซอร์ที่เกี่ยวข้องกับคุณสมบัติ ContentEdiatable
ContentEditable กับการทำงานร่วมกับ Local Storage
การประยุกต์ใช้งานคุณสมบัติ ContentEditable
CHAPTER 10 : เพิ่มประสิทธิภาพการทำงานของฟอร์มด้วย Form Enhancement
HTML Form และ Input Element คืออะไร
HTML Form กับ JavaScript
ทำไมจึงต้องเพิ่ม Input Element ใหม่ใน HTML5
Input Element ใหม่ใน HTML5 มีอะไรบ้าง
- ตัวอย่างที่ 1 : ประยุกต์การทำงานของเกม TicTacToe
- ตัวอย่างที่ 2 : เว็บไซต์รับสมัครงาน
- Search element
- Number element
- Email element
- Telephone element
- Telephone element
- URL element
- Range element
- Date element
- Datetime element
- Datetime-local element
- Time element
- Month element
- Week element
แท็กใหม่ใน HTML5 ที่ช่วยเสริมการทำงานของฟอร์ม
- แท็ก <DATALIST>
- แท็ก <OUTPUT>
คุณสมบัติใหม่ใน HTML5 ที่ช่วยเสริมการทำงานของฟอร์ม
- valueAsNumber
- Placeholder
- Autofocus
- Required
- Novalidate
CHAPTER 11 : สร้าง Mobile Website ด้วย HTML5
สมาร์ตโฟนและแท็บเล็ตคืออะไร
- Mobile Website คืออะไร
- ความละเอียดหน้าจอของอุปกรณ์พกพา
เตรียมพร้อมก่อนสร้าง Mobile Website
- การติดตั้ง JDK (Java Development Kit)
- การติดตั้ง Android SDK
- การสร้าง Android Emulator
- การเรียกใช้งาน Android Emulator
การเรียกเปิดเว็บเพจด้วย Android Emulator
เริ่มต้นสร้าง Mobile Website
การเลือกแสดงผลระหว่างเว็บไซต์ปกติและ Mobile Website
APPENDIX A: พื้นฐาน HTML
HTML คืออะไร
คอมเมนต์ใน HTML
โครงสร้างของภาษา HTML
- ส่วนหัวของเอกสาร HTML (เรียกว่า HEAD)
- ส่วนเนื้อหาของเอกสาร HTML (เรียกว่า BODY)
สรุปแท็กของภาษา HTML
- แท็กสำหรับการแสดงผล
- แท็กของฟอร์ม
- แท็กของรูปภาพ
- แท็กของตาราง
- แท็กของการจัดกลุ่มข้อความ
- แท็กของการแสดงรายการ
APPENDIX B : พื้นฐาน CSS
คอมเมนต์ใน CSS
วิธีการกำหนดสไตล์ของ CSS
การนำ CSS ไปใช้งานกับ HTML
- External Style Sheet
- Internal Style Sheet
- Inline Style Sheet
การกำหนดค่าคุณสมบัติใน CSS
- ค่าคุณสมบัติที่ระบุขนาด
- ค่าคุณสมบัติเพื่อระบุฟอนท์
- ค่าคุณสมบัติเพื่อระบุสี
รูปแแบบการประกาศ Selector ใน CSS
- Contextual Selector
- ID Selector
- Class Selector
APPENDIX C : พื้นฐาน JavaScript
JavaScript คืออะไร
- ตำแหน่งของ JavaScript ในเว็บเพจ
หลักการเขียนโปรแกรมภาษา JavaScript
รูปแบบไวยากรณ์ (Syntax) ของคำสั่งใน JavaScript
ตัวแปรของภาษาใน JavaScript
กฎการตั้งชื่อตัวแปรภาษา JavaScript
Operator ใน JavaScript
การทำงานแบบวนซ้ำใน JavaScript
- การทำงานของลูป While
- การทำงานของลูป for
การกำหนดเงื่อนไขการทำงานใน JavaScript
ฟังก์ชั่นใน JavaScript
- การประกาศฟังก์ชั่น
- ตัวแปรในฟังก์ชั่น
ออบเจ็ค(Object) ใน JavaScript
- Built-in Object
- Built-in Function
- Custom Object
- DOM Object
- การเรียกใช้งานออบเจ็คบน DOM
- การสร้างออบเจ็คเพิ่มเข้าไปในโครงสร้างของ DOM
- Event ของออบเจ็ค DOM
01 : เปิดตัว HTML5
HTML5 เป็นภาษา HTML (HyperText Markup Language) เวอร์ชั่นใหม่ล่าสุดที่ W3C พัฒนาขึ้นต่อจาก HTML 4.01 ซึ่งเป็นตัวมาตรฐานก่อนหน้านี้ โดย HTML5 ได้เพิ่มคุณสมบัติต่างๆ ขึ้นมามากมาย เพื่อช่วยให้การพัฒนาเว็บเพจสามารถตอบสนองต่อการใช้งานได้มากขึ้น
 |
|
วีดีโอสอน HTML5 1-10
0 ความคิดเห็น:
แสดงความคิดเห็น