บ้านไกลสัญญาณน้อย

หากคุณพบปัญหามีฉากสีเขียวเมื่อส่งออกไฟล์ QuickTime สามารถแก้ไขได้โดยรัน Final Cut Pro X หรือ Motion 5 ในเครื่องที่มีการ์ดจอใบเดียว

Apple

พูดง่าย.. เอาคุณโอโล่ไปสิบตัวเลย

WMC Web Contest 2011

จริงๆ เรื่องการแข่งน่าจะเคลียร์จบไปใน Twitter แล้ว แต่บอก @winwanwon @Fantasier ไว้ว่าจะ blog ก็เลยต้องมา blog (ที่รับปากไว้คือไม่อยากพูดมากในงาน แต่สุดท้ายก็พูดซะยาว)

ท้าวความเดิม​ @Fantasier เอาลิงก์ IT-ThaiNichi มาแปะซึ่งเป็นการแข่งทำเว็บ ผมเองก็ว่า เออ น่าสนใจ เลยไปถามเพื่อนว่าใครจะมามั้ย แต่ก็เกรงใจต้นกล้าว่าเค้าเป็นคนชวนมาก็ไม่อยากไปแย่งเค้า (จริงๆ ผมก็กลัวเค้าเพราะเค้าทำ design สวยกว่า ส่วนเค้าก็กลัวผมว่าผมทำ code เก่งกว่า) ก็เลยบอกเพื่อนที่โรงเรียนว่าต้องให้ครบสามคนถึงจะไป ปรากฎว่าถามไปถามมาแล้ว ได้แค่ 2 คนเพราะมันเป็นวันชดเชย รด. พอดี วันต่อมา @onsanookza GTalk มาถามก็เลยตกลงไปกัน

ทีนี้จะไปกันก็ต้องตกลงกันก่อน ก็ประชุมทีมกันซึ่งเค้าผลักให้ผมเป็นหัวหน้าทีม ก็โอเค ถัดมาก็เรื่องชื่อทีม คิดกันมาหลายชื่อมากๆ อ้นเสนอ lol แต่เห็นต้นกล้าจะใช้ชื่อ lolz แล้วก็เลยเอา LOLWUT ไปเข้ารหัส base64 ได้ TE9MV1VU ซึ่งผมก็โอเคว่ามันจำง่าย ตัวอักษรสองตัวเลขหนึ่งตัว และไม่มีใหญ่เล็กสลับกัน (ถ้า LOL เฉยๆ เข้ารหัสแล้วมันคือ TE9M ซึ่งคนอาจจะเดาว่ามันมาจากเอา 9 แทนตัว A ซึ่งไม่ใช่ เลยเลี่ยง) การประชุมครั้งนั้นไม่ใช่ง่ายครับ เพราะ Google Talk มันประชุมกลุ่มไม่ได้ (XMPP น่ะทำได้ แต่ Google ดันทำครึ่งๆ กลางๆ) ก็เลยตกลงว่าจะใช้ Skype ขณะนั้นผมก็เพิ่งแข่ง Hackathon จบมา ก็เลยต้องหาสถานที่มีเน็ต มีข้าวกิน และมี Pump it up ก็คือ Esplanade ซึ่งนึกว่าเกมมันจะสั้นๆ ปรากฎว่าเล่นทีเป็นชั่วโมงครับ กว่าจะได้ประชุมอีกสองคนก็ใกล้เวลานอนกันแล้ว

พอถึงวันก่อนแข่ง ทีมโน้นเค้าเตรียม CMS กันคร่ำเคร่ง ส่วนผมก็ใช้ Django ซึ่งมันมี admin สำเร็จรูป มี ORM ทำอะไรก็สบายไม่ต้องไปนั่งจิ้มโค๊ดเยอะๆ และก็เลยว่าให้สมาชิกเตรียมออกแบบกันมา โดยผมให้ดูตัวอย่างจากสุดยอดเว็บสวย 2 เว็บที่ผมอยากเจอคนเขียนมาก คือ [Lubd Hostel](http://siamsquare.lubd.com) และ [Cubiccreative](http://cubiccreative.org/creativecamp7/) โดยพ่อแนะนำอันหลังว่าน่าจะทำทันในเวลามากกว่า

พอมาถึงวันแข่ง เริ่มงานมาได้ concept ชื่อ “การศึกษาในฝัน” ตอนแรกผมยังนึกไม่ออกว่าจะทำเนื้อหายังไง จนพอเริ่มทำ mockup แล้วคำว่า ในอนาคต มันเข้ามาในหัว ก็เลยเขียนไปว่า ศึกษาต่อในประเทศ ศึกษาต่อต่างประเทศ และ นีท!! (เขียนจริงๆ เมนูนีทก็เคยมีมาแล้ว) แล้วก็ออกแบบคร่าวๆ มา ซึ่งอ้นติดใจหัวเว็บจากเว็บหลับดี ที่เห็นแล้วอยากได้มาก ก็เลยทำหัวโค้งสนอง need ให้มี fade เหมือนกัน

ถัดมาก็แบ่งกันทำงาน อ้นทำตัวหัวเว็บ เติมให้ไปค้นข้อมูลมาแล้วก็ทำหัวข้อ ทำภาพประกอบ ส่วนเราระหว่างนั้นก็ละเลง CSS ให้พร้อมรับหัวเว็บและ content ซึ่งตัว content เสร็จก่อน (ใช้เวลาเป็นชั่วโมง) ซึ่งก็ใส่ content ไปได้หลายอันแล้วกว่าหัวเว็บจะเสร็จ

ตัวหัวเว็บนี่ยากครับ เพราะสังเกตว่ามันจะ fade ได้ ฉะนั้นต้องมีหลายชิ้น ปัญหาที่เจอคือภาพพื้นหลังนี่แหละครับ ไม่รู้จะเอาภาพอะไร สุดท้ายภาพมันเลยเล็กๆ ทำให้ผมรู้สึกว่าการ fade มันไม่ wow เท่ากับของหลับดี ที่ fade จุดใหญ่ๆ ให้ตระการตาไปเลย

สำหรับ content ก็จัดปาซ้ายสลับขวาไปนั่นแหละครับ แต่คือต้องดูเรื่อง margin padding ให้ดีว่ามันสวยงามเหมาะสมแล้ว และกว่าจะทำเสร็จทั้งหมดก็เรียกได้ว่าไม่ทันในเวลาที่กำหนดเลยแหละครับ

ถัดมาเป็นการ present งานฉบับรวบรัดครับ คือกินข้าว 15 นาทีแล้วต้องลงมา present ฉะนั้นจะไม่ได้เตี๊ยมอะไรกันมาก ผมบอกว่าโอเค ผมจัดการทุกอย่างได้ ก็เลยเริ่มด้วยการแนะนำทีมทั้งแบบเป็นพิธีการและแบบไม่เป็นพิธีการ (ก็มีคนช่วยขำ ขอบคุณครับ) พอเข้าสู่เนื้อหา เนื่องจากว่าทีมอื่นๆ จะเน้นเรื่องเนื้อหาของเว็บซะมากกว่า ซึ่งผมไม่ค่อยคิดว่าเหมาะกับแข่งเว็บแบบนี้ที่เค้าเน้นการออกแบบเว็บ เลยพูดถึงโครงสร้างของเว็บมากกว่าที่ผมจะชูจุดขายว่า No Flash, Tableless, No Frame ซึ่งทีมอื่นๆ จะใช้กัน ตรงนี้พลาดไปว่ากรรมการที่ไม่ได้เขียนเว็บสมัยใหม่จะไม่เข้าใจว่าทำไม no frame สำคัญ no flash สำคัญ ผมก็ลืมอธิบายไป

สำหรับคำถามที่ถูกถามนะครับ คำถามแรกคือเรื่องการกลับหน้าแรกหาไม่เจอ ซึ่งผมก็ต้องสาธยายโดยยกตัวอย่างเว็บอย่าง Facebook ว่ามันไม่ต้องมี Home กดโลโก้ก็ได้ (ผมเพิ่งนึกออกว่า Facebook ที่ผมพูดถึงตอนนั้นคือ Facebook Touch ไม่ใช่รุ่นบนคอมฯ) แต่ก็ต้องยอมรับว่าโลโก้ไม่เด่นพอที่จะให้เห็นว่ามันคลิกได้ มันเหมือนเป็นเมนูอันนึงไปมากกว่า

คำถามถัดมาที่ถูกถามคือเรื่องเมนูว่าทำไมไว้ข้างบน ซึ่งเว็บที่มาแข่งอื่นๆ จะไม่ทำกัน ตรงนี้คิดนานอยู่กว่าจะตอบได้ โชคดีว่านึกถึงทีมนึงได้ที่แกใช้เมนูแล้วมันเว้นที่ไว้หลังเมนูสุด ก็เลยอธิบายไป (แต่ผมรู้สึกว่าดราม่านะ) ว่า “คนเข้าเว็บเราเข้ามาอ่านเนื้อหาครับ ฉะนั้นตรงนี้ก็เลยจะมีแต่เนื้อหา ถ้ามี sidebar ปุ๊บ พอเมนูสุดมันก็จะเป็นสีขาวครับ พอเลื่อนลงมาก็จะกินที่เนื้อหาไปให้ที่สีขาวอย่างไร้ประโยชน์ เกะกะ ฉะนั้นตัดออกดีกว่าครับ” (นึกถึง blog นี้ก็ได้ครับ สังเกตว่าหน้าเนื้อหาจะไม่มี sidebar และธีมนี้คือธีมมาตรฐานของ WordPress ซึ่งผมดัดแปลงแค่ในเมนูที่มีไม่ได้แก้โค้ด)

คำถามสุดท้ายที่ถูกถามคือเรื่องว่าผมบอกว่าใช้ HTML5 (จริงๆ ไม่ได้ใช้ HTML5 ถ้าพูดกันตามตัว standard เพราะผมลอง HTML5 Shim แล้วก็ยังไม่ได้ เลยว่าใช้ div ธรรมดา แต่คำนี้คนรู้จักมากกว่าถ้าจะพูดถึงการออกแบบเว็บสมัยใหม่ที่ใช้ div ไม่ใช่ table หรือ layer) กรรมการเลยเตือนว่าถ้าไปทำให้ลูกค้าต่อไปอย่าเอาเทคโนโลยีเป็นตัวตั้ง เพราะคนใช้งานบางคนไม่ได้อัพเดต browser ซึ่งตรงนี้ได้ยินคำว่า “อย่าเอาเทคโนโลยีเป็นตัวตั้ง” แล้วตะขิดตะขวงใจเพราะมันเหมือนบอกว่า “อย่าเอา best practice มาเป็นตัวตั้ง แต่ให้เห็นแก่ความ petdo ของ user” (Flash? แล้วโทรศัพท์หละ? Table? แล้วโค้ดจะอ่านยังไง?) ฉะนั้นเลยบอก “อ้น ขอ IE เปิดหน่อย” ปรากฎว่า IE เปิดได้ครับ ยกเว้น CSS overflow มันมีผลทั้งสองแกนทำให้ scrollbar หาย (ลืมเช็คตอนออก รีบเกินไป) และก็ shadow ไม่มี นอกนั้น IE แสดงผลได้ปกติ เป็นเครื่องยึนยันว่าเว็บผมไม่ใช่ว่า HTML5 อย่างเดียวแล้วจะยิง IE ทิ้งอย่างไร้ความปรานี

สิ่งที่พลาดไปตอน present ครับ คือการนำเสนอว่าทำไมต้อง tableless ต้อง no flash ต้อง no frame ซึ่งพวกนี้ผมว่าครูสอนทำเว็บตามโรงเรียนจะไม่เห็นความสำคัญกันเพราะถ้าจะทำพวกนี้ได้นักเรียนตายแน่เพราะ Tools ที่ใช้กันมันทำไม่ได้ง่ายๆ (ลองเอา android เข้าหน้ามี frame แล้วจะรู้ครับว่ามัน scroll frame ไม่ได้เพราะสิทธิบัตรการ scroll frame มันอยู่กับ Apple ส่วน Flash เอ่อ คงรู้ๆ กันดีว่า iOS ไม่มี Flash)

ผลปรากฎว่า ทีมที่ได้ที่ 1… Usability ห่วยขั้นเทพครับ เปิดมาภาพหัวเว็บยาวล้นจอ ตรงนี้ไม่ใช่ว่าแพ้แล้วจะมาเขียนโจมตีเขา เพราะทีมต้นกล้าก็เห็นด้วยกับผมว่าแค่ header ล้นจอมันก็เห็นแล้วว่าเว็บมันออกแบบมาแล้วใช้ไม่ได้จริงแค่ไหน สำหรับทีมอื่นๆ ที่ได้รางวัล ก็โอเคว่าเว็บพอใช้ได้ (ถึงจะไม่ได้นำสมัย) แต่มีการใช้ ​Flash วูบวาบ

“คนออกแบบเว็บน่ะมีสองประเภท ประเภทที่หนึ่งคือ Web Designer ที่มองเว็บไม่ใช่เป็นกราฟฟิคภาพหนึ่งแต่เป็น interactive ไม่ได้ว่าเว็บจะอยู่ตามที่ออกแบบตลอด เข้าใจเรื่อง Usability ส่วนอีกประเภทคือ Graphic Designer ที่มาออกแบบเว็บ เว็บอาจจะดูสวยกว่าเพราะภาพอลังการ แต่แน่หละเมื่อนำไปใช้งาน ความรู้สึกมันต่างกันนะ” — @manatsawin

[อ่านบล็อค @Fantasier](https://itongla.wordpress.com/2011/07/31/things-from-wmc3/)

ปล. ผมแนะนำว่า วิธีที่ยุติธรรมที่สุดคือเปิดเผยคะแนน หรือเขียนวิจารณ์ทีละเว็บ แบบ NSC ที่จะเขียนจุดเด่นด้อย คำแนะนำของกรรมการให้ในแต่ละรอบด้วย