วันที่สองนี้ ช่วงเช้าจะเป็นเรื่อง Solution ที่สามย่านใช้ในการสร้างเว็บจาก HTML5 โดย @iMenn
ส่วนช่วงบ่าย จะเป็นเรื่อง Canvas ทั้ง 2D และ 3D โดย โพว จากหัวลำโพง
Sam Yarn HTML5 Starter Kit
การสร้างเว็บนั้น ถ้าเริ่มเขียนจากศูนย์มันช้าไป สามย่านเลยพยายามรวบรวมไอเดีย แล้วมาประกอบร่างเป็นชุดเริ่มต้นสำหรับเริ่มโปรเจ็คของเรา แต่จริงๆ แล้วเราก็ไม่ถึงกับสร้างขึ้นใหม่เลย ส่วนใหญ่แล้วก็เดินตามรอย HTML5Bolierplate อยู่ดี
ไฟล์งานสำหรับการบรรยายอยู่ที่ https://samyarn.com/share/smy-html5-demo.zip
ประเด็นที่น่าสนใจของ HTML5 Starter Kit
- การตั้งชื่อไฟล์งานและโฟลเดอร์ที่ใช้ ทั้ง js , images, 404.html, apple-thouch-icon แบบต่างๆ (รายละเอียดขนาดไอคอนในอุปกรณ์แต่ละชนิด ดูได้ที่?Specifying a Webpage Icon for Web Clip)
- สร้างไฟล์ robots.txt (ไว้ให้เหล่า robot จาก search engine ทั้งหลายมาดู) และ humans.txt?(ไว้ให้คนมาดู ถือเป็นการใส่เครดิตในเว็บอย่างสุภาพยิ่งนัก)
- CSS Reset การปรับให้ Browser แต่ละชนิด มีค่าเริ่มต้นที่ใกล้เคียงกัน สามย่านพยายามเสาะหาจากหลายที่ เอามาปรับจนถูกจริต และตั้งชื่อว่า start.css
- Responsive CSS สามย่านพยายามรวบรวมขนาดหน้าจอที่ใช้บ่อย มารอไว้ หากต้องการปรับแต่งเรื่อง Responsive ก็เริ่มจากใน style-responsive.css ได้ (ที่แยกออกมาอีกไฟล์ เพราะจะทำให้แบ่งการทำงานได้ง่ายขึ้น)
- jQuery แนบมาให้เป็นมาตรฐาน จะได้ใช้ได้ง่าย และยังตั้งชื่อไฟล์ plugins.js ไว้ให้ใส่ plugin ทั้งหมดในนี้ กับตั้งชื่อ scripts.js ให้ใส่ script ที่เราเขียนเอง
- modernizr เป็น javascript ที่ใส่มาให้ เพื่อทำให้เราจัดการกับ Browser เก่าๆ ได้ง่ายขึ้น ทำให้เราใช้ Tag สมัยใหม่ได้ แต่ก็ยืดหยุ่นพอจะไปเก็บ bug สำหรับ Browser ที่ไม่รองรับได้ด้วย
- เช่น เราอาจใช้คำสั่ง CSS3 คือ box-shadow?เมื่อเจอ browser ที่รองรับ ก็จะแสดงผลสวยงาม แต่สำหรับ browser ที่ไม่รองรับ เราอาจตั้งให้แสดง border แทน ก็ได้ผลใกล้เคียงกัน โดยที่ไม่ต้องใช้รูปเลย
- โฟลเดอร์ fonts ไว้เก็บ font สำหรับเว็บ (@font-face) ซึ่งหากเรามีลิขสิทธิ์ สามารถไปสร้าง @font-face ได้ที่?@FONT-FACE GENERATOR?ในตัวอย่าง เราได้ใส่ฟ้อนท์ RSU มาให้
Workshop
- ทำความเข้าใจกับ Responsive แล้วลองปรับเว็บที่ทำเมื่อวาน ให้เป็น responsive แบบง่ายๆ
- ทำความเข้าใจกับ modernizr แล้วลองปรับเว็บที่ทำไป ให้ใช้ modernizr แบบง่ายๆ (เช่น ใช้ css คนละคำสั่ง สำหรับ browser คนละตัว)
- ทดลองใช้ jQuery แบบง่ายๆ เช่น Tabs, Accordion หรือ Draggable
HTML5 Canvas
อธิบายแนวคิดของ Canvas และดูตัวอย่างการนำไปใช้แบบต่างๆ
ไฟล์งานสำหรับการบรรยายอยู่ที่ https://samyarn.com/share/canvas-tutorial.zip
- Cloth Simulation
- Canvas 2D
- Mootools framework
- Basic simulation
- Physic Sketch
- Canvas 2D
- Prototype framework
- Box2D library
- Oak3D
- Canvas 3D + WebGL
- Oak3D framework
- Basic 3D Model
- Water Simulation
- Canvas 3D + WebGL
- LightGL library
- Raytrace
- Shader
- Particle Simulation
- Canvas 3D + WebGL
- Three.js library
- Sprite
- Special Technique with video + canvas
- Canvas 2D
- Copy Video data to Canvas
แล้วก็มี Demo ของ
- 3D Human Anatomy
- 3D Cloth Simulation + Texture
- JigLibJS2 Javascript 3D Physics Engine