HTML5 Workshop วันที่ 1

สามย่านได้รับเกียรติเชิญไปเป็นวิทยากรอบรม HTML5 ที่ลาดกระบัง เป็นเวลา 3 วัน เลยมาบันทึกไว้ดังนี้นะครับ

วันที่แรก (6 มิ.ย. 2555)

ช่วงเช้า: ปูพื้นฐาน HTML และ CSS โดย @iannnnn
ช่วงบ่าย: รู้จักกับ HTML5 โดย @iannnnn

เดี๋ยวว่างๆ แอนมาเขียนต่อละกันนะ จากพี่เม่น มาแล้วจ้ะ อ่านต่อได้เลย

สำหรับวันแรกจะเป็นการปูพื้นฐานให้น้องๆ ได้รู้จักที่มาที่ไปของ HTML และ CSS กันก่อน

ย้อนประวัติศาสตร์ HTML

  • แนะนำพัฒนาการของมาตรฐาน HTML, XHTML, องค์กร W3C
  • Web Standards
  • สงครามเบราว์เซอร์ ที่เกี่ยวข้องกับมาตรฐานเว็บ ซึ่งผลกระทบโดยตรงต่อคนทำเว็บ
  • ธรรมชาติของการออกแบบ พัฒนาเว็บ ด้วยการเขียนให้เป็นมาตรฐาน เพื่อให้สามารถเปิดดูได้ทุกที่ทุกอุปกรณ์ และรองรับทั้งอดีตหรืออนาคต
  • ตัวอย่างเว็บในปัจจุบันที่เกิดขึ้นในยุคที่มาตรฐานเว็บกำลังเริ่มเปลี่ยนแปลงและวางรากฐานในช่วงสงครามเบราว์เซอร์ เช่น Pantip.com

รู้จัก HTML & CSS

ทำความเข้าใจเกี่ยวกับพื้นฐาน HTML ก่อนก้าวไปสู่ HTML5 (และ CSS3)

หัดเขียน CSS กัน

  • อะไรคือ CSS: หน้าที่ ลักษณะการทำงาน
  • ลักษณะการเรียก CSS มาใช้งาน
  • ไวยากรณ์ของ CSS (CSS Syntax)
    selector { property: value; }
  • รู้จัก Class และ ID
  • Unit ประเภทต่างๆ และความสำคัญในการใช้งานในแต่ละสถานการณ์
  • Properties ที่ใช้บ่อยๆ เช่น color, text-decoration, text-align, background, font, letter-spacing, line-height, ฯลฯ รวมถึงการเขียน Short-hand
  • CSS Box Model?และ Properties ที่เกี่ยวข้อง เช่นการกำหนดขนาด (width, height), margin, padding, border
  • Properties ที่เกี่ยวกับการจัดวาง เช่น float, overflow, position
  • ปัญหาที่พบบ่อยๆ แนวทางการป้องกัน และแก้ไข ทั้งแบบหล่อๆ และแบบบ้านๆ

สวัสดี HTML5

  • การสิ้นสุดของยุค Flash ครองโลก และวิสัยทัศน์ของศาสดาที่กล่าวว่าแฟลชไม่เวิร์กหรอก จนทำให้โลกทั้งใบต้องหันมาเดินตามรอยมาตรฐานเพื่อการแสดงผลได้อย่างถูกต้อง
  • HTML5 คือกลุ่มเทคโนโลยีที่ประกอบด้วย HTML(เวอร์ชันใหม่) + JavaScript API + CSS3
  • การเปลี่ยนแปลงที่เกิดขึ้นกับโค้ด HTML เมื่อเข้าสู่ยุคที่ 5 เช่น แท็กบางแท็กที่ถูกยกเลิกไป ที่เพิ่มเข้ามาใหม่ ลักษณะการเขียนกระกาศ DTD แบบเข้าใจง่าย ฯลฯ (ดูต่อได้ที่?w3.org/TR/html5-diff)
  • ความสามารถใหม่ๆ ที่มีใน HTML5
    • Semantics?อ่านโค้ดออก เขียนโค้ดได้ เข้าใจง่ายกว่าเดิม
    • Offline & Storage?ทำให้ Web = App แบบเนียนสุดๆ
    • Device Access เข้าถึง API ของระบบใดๆ ทำให้รองรับการทำงานร่วมกันกับอุปกรณ์แปลกๆ ใหม่ๆ ได้ลื่นปรื๊ด
    • Connectivity?ช่องทางสื่อสารกับเซิฟเวอร์แบบใหม่ที่รองรับการใช้งานของ user ได้สบายๆ
    • Multimedia?ดูหนังฟังเพลงง่ายๆ ผ่านแท็กพื้นๆ โดยไม่ต้องอาศัยปลั๊กอินใดๆ มาให้ยุ่งยากระบบ
    • 3D, Graphics, Effects?ใส่ลูกเล่นกราฟิกลงในเว็บได้แบบไร้ขีดจำกัด?ทั้ง SVG, <canvas>, WebGL, CSS 3D
    • Performance & Integration?ปรับปรุงการทำงานเบื้องหลังให้ประมวลผลและแสดงผลได้เนียนกริบ เหมือนเป็น Nature App ของระบบ
  • ความสามรถใหม่ๆ ที่มีใน CSS3
    • ลักษณะการแบ่งงานกันระหว่าง HTML และ CSS
    • ย้อนประวัติของ CSS ตั้งแต่รุ่น 1, 2, 2.1 และการกำเนิดของ CSS3
    • ฟีเจอร์สนุกๆ เช่น การทำวัตถุขอบมน,ภาพพื้นหลังหลายระดับ, ค่าสีแบบใหม่, เอฟเฟกต์วัตถุและตัวอักษร, Properties ใหม่ๆ ที่เห็นใน Box Model, Web Font, Transformation, Transitions, Animations, ฯลฯ
  • แนะนำเว็บช่วยทุ่นเวลาในการเขียนโค้ดทั้ง HTML5 และ CSS3 มากมาย
  • ทดลองเขียนเว็บหน้าแนะนำตัว โดยประยุกต์ใช้ความรู้ที่ได้ฟังการบรรยายตลอดทั้งวันที่ผ่านมา

จบคลาสวันแรกอย่างสนุกสนานครับ น้องๆ ตรงเวลา กระตือรือล้นและตั้งใจ “เล่น” กับของเล่นใหม่ๆ และมีผลงานติดไม้ติดมือกันกลับบ้านพอสมควร และเตรียมตัวพบกับคลาสที่จะปรับระดับให้ลึกขึ้นในวันถัดๆ ไป