responsive web design

นักศึกษาเขียนเว็บแบบ responsive web design

เล่าสู่กันฟัง
ว่า 13-16ธ.ค.59 พบ น.ศ.ที่ Lab1 หลังอบรม น.ศ.ทำ Responsive web design ซึ่งมีเนื้อหาสำคัญ ทางเทคนิค 2 เรื่อง คือ การเขียน html ร่วมกับ css ให้รองรับ multi device ก็รวบรวมผลงานที่เค้านำเสนอ จากผลการอบรม ฝากไว้ที่
http://thaiall.somee.com
มีนักศึกษาหลายคนติดตามงานที่คั่งค้าง เพราะอบรม และทำผลงานมีเวลากระชั้นชิด ทำให้ผลงานยังไม่เป็นที่พึงใจ จึงปรับปรุงใหม่ แล้วอัพโหลดมาให้ชมภายหลังการอบรม ผมก็อัพโหลดเข้าไปอัพเดทให้เรียบร้อยแล้ว การสื่อสาร เราคุยกันผ่าน facebook group เพราะข้อมูลการสนทนา และรูปภาพจะไม่หายไป และระบบรับงาน .zip ได้ดี สูงสุดถึง 100 MB ไฟล์ไม่ถูกกำหนดเวลาลบออกจากระบบเหมือน Line

หลังจากการอบรมแล้วเสร็จ ผมได้กลับไปพัฒนา Responsive Web Design ของตนเอง เริ่มจากการพัฒนาแบบ Prototype ขึ้นมาก่อน แล้วทำแบบ Water fall คือ ทีละหน้า ขยายไปเว็บเพจอื่น และทำแบบ Build and fix คือ ทำไปซ่อมไป ตอนนี้ขยายผลไป /os, /digitallogic และ /data มีรุ่นของ Prototype ใน /web2 เป็น 6.2 ส่วนของ Footer อัพเดทอีกครั้งเมื่อวันที่ 26ธ.ค.59 หลังพบปัญหาที่ทำให้ต้องเพิ่ม class ให้ footer ต่อจากนี้คงกลับมาปรับเนื้อหา (Content) ในเว็บต่าง ๆ ข้างต้น เพราะ design เสร็จแล้ว แต่ภาค content ที่มีอยู่ ยังไม่ได้นำเข้าไปจัดลง ในเหล่าเว็บที่เป็น static webpage ให้เรียบร้อย

ในวันสุดท้ายของการอบรม มีนักศึกษาได้รับการพิจารณารับรางวัลผลงานเว็บ จำนวน 2 คน ที่ได้คะแนนรวมสูงสุดจากกรรมการ คือ นายวรวัช ไชยธิ และนายสุรวิชญ์ สุริยะวงค์

ผลงานนักศึกษา

ได้ศัพท์จากข้อสอบอังกฤษระดับอุดมศึกษามาแปลงเป็นข้อสอบออนไลน์

เล่าเรื่องต่อยอดงานเดิม
เมื่อวาน (10 ธ.ค.59) แชร์ศัพท์ 200 คำ ไว้ใน blog
เพื่อให้นักศึกษาได้อ่าน ได้ท่อง เตรียมพร้อม
ก่อนการสอบ English Proficiency ในเทอมต่อไป
เพราะเชื่อว่าการเตรียมพร้อมด้วยเอกสารที่ตรง
จะทำให้การวัดผลที่เตรียมพร้อมมาตรงเป้า
จะทำให้บรรลุเป้าหมายได้เร็ว และมีพลัง
http://thainame.net/edu/?p=4259

การท่องศัพท์ก็ต้องมีการประเมินว่าท่องได้กี่ตัว
วันนี้ (11 ธ.ค.59) นำคำศัพท์มาแปรรูป (Transform)
เป็นข้อสอบ 4 ตัวเลือกแบบจับคู่ จำนวน 400 ข้อ
โดนใช้ code เก่าใน http://www.thaiall.com/quiz
แล้วเพิ่มเป็นชุดที่ 12 จึงอยู่ในหัวข้อ 3.12
ชื่อชุดข้อสอบว่า “ศัพท์อุดมศึกษาอย่างง่าย”

แล้วถือโอกาสปรับ /quiz
ให้เป็นแบบ responsive web design
ตามแนวโน้มชาวโลกที่จะใช้ mobile กันมากขึ้น

ถึงยุค responsive web design มาได้พักหนึ่งแล้ว

เดี๋ยวนี้ .. เขียนเว็บหนึ่งหน้า ต้องนั่งออกแบบกันหน่อยว่า
จะให้เข้ากับอุปกรณ์ใด ขนาดเท่าใด
สมัยก่อน คิดว่าจะให้เข้ากับจอขนาดเท่าใด
เช่น ใคร ๆ ก็ใช้จอใหญ่ ออกแบบให้มี 4 คอลัมก็จบ
ก็จะได้รูปแบบที่เหมาะสมกับจอขนาดใหญ่เท่านั้น
เมื่อเปลี่ยนจอภาพเป็นขนาดอื่น ก็จะไม่เปลี่ยนไปตามอุปกรณ์
เช่น ใช้สมาร์ทโฟน แต่แสดง 4 คอลัม เค้าก็จะเห็นได้ไม่หมด
หรือต้องคอยเลื่อน scroll bar ขยับไปมา ซึ่งไม่สะดวก

แต่เดี๋ยวนี้ ต้องคิดว่าจะให้เข้ากับจอขนาดเท่าใดบ้าง
โดยเขียนเว็บเพจ 1 หน้า แต่ปรับการแสดงผลอัตโนมัติ
ให้เหมาะสมกับแต่ละจอ
จอเล็กก็แสดง 1 คอลัม
จอกลางอย่างแท็บเล็กก็แสดง 2 คอลัม
จอคอมพิวเตอร์ตั้งโต๊ะก็แสดง 3 คอลัม
ส่งไปแสดงทางโปรเจคเตอร์ก็แสดง 4 คอลัม

พบฟังก์ชันใน css คือ @media ()
ใน () ห้ามมีเครื่องหมาย ; ต่อท้าย
ถ้ามีก็จะทำให้ responsive ไม่ทำงาน
แต่ ; ใช้กับการแบ่งระหว่าง properties อื่นใน css ได้
ยกเว้นอย่าใช้ ; ปิดท้ายค่าที่ส่งไปใน ()

ตัวอย่าง code

<html><head><style type=”text/css”>
.m_still, .m_hidden{width:728px;}
/* @media screen and (max-width:320px;) { */
@media screen and (max-width:320px) {
.m_still{visibility:visible;width:300px;}
.m_hidden{visibility:hidden;display:none;}
}</style></head><body>
<table class=”m_still” style=”background:yellow;”><tr><td>a</td></tr></table>
<table class=”m_hidden” style=”background:green;”><tr><td>b</td></tr></table>
</body></html>