วันที่สามนี้ ช่วงเช้า จะทบทวน 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 อย่างเดียว