HTML5 Workshop วันที่ 3

วันที่สามนี้ ช่วงเช้า จะทบทวน CSS นิดหน่อย จาก Slide ที่เคยอธิบายไว้?แล้วหลังจากนั้น จะเป็นการเรียนรู้ jQuery ให้มากขึ้น โดยเร่ิมจาก API คือ

โดยทดลองเขียนโปรแกรมในเงื่อนไขต่างๆ เช่นกดปุ่ม แล้วให้เกิดอะไรขึ้นบ้าง, รู้จักกับ easing

แบบต่างๆ??(ตัวอย่าง?, รูปประกอบ, Download)

และทดลองใช้ jQuery Plugin ต่างๆ เพื่อเพิ่มความสามารถ เช่น

  • ทดลองใช้?slidesjs.com?เพื่อทำ Image Slider
  • ทดลองใช้ Parallax Slider?(สามย่านเคยใช้แนวทางของ parallax ทำการ์ดสวัสดีปีใหม่ ที่ สวัสดีปีใหม่ 2012)
  • ทดลองใช้ JMenu สร้างเมนูแบบ dropdown
  • ทดลองใช้ Coda Slider Effect ทำ content slider
  • ทดลองใช้ DataTables?เพื่อเปลี่ยนจาก Table ธรรมดา ให้กลายเป็นตารางที่เรียงลำดับได้ ค้นหาได้

ส่วนช่วงบ่าย จะเป็นการทดลองประกอบเว็บ โดยเริ่มจากการมี html/css มาให้เบื้องต้นก่อน (Download) แล้วหาทางสร้างให้ครอบคลุม

  • Responsive – รองรับหน้าจอคอมพิวเตอร์ทั่วไป, จอ tablet, จอ smartphone
  • มีการใช้ jQuery Plugin อย่างใดอย่างหนึ่ง
  • มีการใช้ jQuery ที่เขียนเอง โดยกดปุ่มแล้วแสดงผลบางอย่าง

คำแนะนำ

  • ลองปรับความกว้างจาก pixel ให้เป็น % เช่น กว้าง 30% แทนที่จะเป็นกว้าง 300%
  • รูป อย่าลืมใช้ max-width: 100%
  • ถ้า div ที่ครอบอยู่ (เช่น #wrap) ยังกว้าง 920px ของข้างในก็ย่อมไม่เปลี่ยน
  • การทำ style-responsive.css ถ้าทำทีละ “ช่วงความกว้างจอ” คือมีทั้ง min-width และ max-width – จะง่ายกว่าการสั่งให้มีแค่ max-width อย่างเดียว