HTML5 Workshop วันที่ 2

Posted on by imenn

วันที่สองนี้ ช่วงเช้าจะเป็นเรื่อง Solution ที่สามย่านใช้ในการสร้างเว็บจาก HTML5 โดย @iMenn
ส่วนช่วงบ่าย จะเป็นเรื่อง Canvas ทั้ง 2D และ 3D โดย โพว จากหัวลำโพง

Sam Yarn HTML5 Starter Kit

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

ไฟล์งานสำหรับการบรรยายอยู่ที่ https://samyarn.com/share/smy-html5-demo.zip

ประเด็นที่น่าสนใจของ HTML5 Starter Kit

  1. การตั้งชื่อไฟล์งานและโฟลเดอร์ที่ใช้ ทั้ง js , images, 404.html, apple-thouch-icon แบบต่างๆ (รายละเอียดขนาดไอคอนในอุปกรณ์แต่ละชนิด ดูได้ที่?Specifying a Webpage Icon for Web Clip)
  2. สร้างไฟล์ robots.txt (ไว้ให้เหล่า robot จาก search engine ทั้งหลายมาดู) และ humans.txt?(ไว้ให้คนมาดู ถือเป็นการใส่เครดิตในเว็บอย่างสุภาพยิ่งนัก)
  3. CSS Reset การปรับให้ Browser แต่ละชนิด มีค่าเริ่มต้นที่ใกล้เคียงกัน สามย่านพยายามเสาะหาจากหลายที่ เอามาปรับจนถูกจริต และตั้งชื่อว่า start.css
  4. Responsive CSS สามย่านพยายามรวบรวมขนาดหน้าจอที่ใช้บ่อย มารอไว้ หากต้องการปรับแต่งเรื่อง Responsive ก็เริ่มจากใน style-responsive.css ได้ (ที่แยกออกมาอีกไฟล์ เพราะจะทำให้แบ่งการทำงานได้ง่ายขึ้น)
  5. jQuery แนบมาให้เป็นมาตรฐาน จะได้ใช้ได้ง่าย และยังตั้งชื่อไฟล์ plugins.js ไว้ให้ใส่ plugin ทั้งหมดในนี้ กับตั้งชื่อ scripts.js ให้ใส่ script ที่เราเขียนเอง
  6. modernizr เป็น javascript ที่ใส่มาให้ เพื่อทำให้เราจัดการกับ Browser เก่าๆ ได้ง่ายขึ้น ทำให้เราใช้ Tag สมัยใหม่ได้ แต่ก็ยืดหยุ่นพอจะไปเก็บ bug สำหรับ Browser ที่ไม่รองรับได้ด้วย
    • เช่น เราอาจใช้คำสั่ง CSS3 คือ box-shadow?เมื่อเจอ browser ที่รองรับ ก็จะแสดงผลสวยงาม แต่สำหรับ browser ที่ไม่รองรับ เราอาจตั้งให้แสดง border แทน ก็ได้ผลใกล้เคียงกัน โดยที่ไม่ต้องใช้รูปเลย
  7. โฟลเดอร์ fonts ไว้เก็บ font สำหรับเว็บ (@font-face) ซึ่งหากเรามีลิขสิทธิ์ สามารถไปสร้าง @font-face ได้ที่?@FONT-FACE GENERATOR?ในตัวอย่าง เราได้ใส่ฟ้อนท์ RSU มาให้

Workshop

  1. ทำความเข้าใจกับ Responsive แล้วลองปรับเว็บที่ทำเมื่อวาน ให้เป็น responsive แบบง่ายๆ
  2. ทำความเข้าใจกับ modernizr แล้วลองปรับเว็บที่ทำไป ให้ใช้ modernizr แบบง่ายๆ (เช่น ใช้ css คนละคำสั่ง สำหรับ browser คนละตัว)
  3. ทดลองใช้ jQuery แบบง่ายๆ เช่น Tabs, Accordion หรือ Draggable

HTML5 Canvas

อธิบายแนวคิดของ Canvas และดูตัวอย่างการนำไปใช้แบบต่างๆ

ไฟล์งานสำหรับการบรรยายอยู่ที่ https://samyarn.com/share/canvas-tutorial.zip

  1. Cloth Simulation
    • Canvas 2D
    • Mootools framework
    • Basic simulation
  2. Physic Sketch
    • Canvas 2D
    • Prototype framework
    • Box2D library
  3. Oak3D
    • Canvas 3D + WebGL
    • Oak3D framework
    • Basic 3D Model
  4. Water Simulation
    • Canvas 3D + WebGL
    • LightGL library
    • Raytrace
    • Shader
  5. Particle Simulation
    • Canvas 3D + WebGL
    • Three.js library
    • Sprite
  6. Special Technique with video + canvas
    • Canvas 2D
    • Copy Video data to Canvas

แล้วก็มี Demo ของ

  1. 3D Human Anatomy
  2. 3D Cloth Simulation + Texture
  3. JigLibJS2 Javascript 3D Physics Engine