24 เมษายน 2555

Internship, DAY 5

วันนี้เราได้เจอกับงาน Database แล้ว พี่ต้องให้ไฟล์ SQL เอาไปยัดไว้ใน Database ของเรา ข้อมูลที่ได้มีแค่ table เดียว แต่ record เป็นล้าน การ query ก็ง่านแสนง่าย เพราะโจทย์คือ "ค้นหารหัสไปรษณีย์" แต่ดันไปติดบั๊กโง่เง่าอยู่ 2 เรื่อง คือ


  • โค้ด SQL ที่ได้มานั้น support InnoDB engine ซึ่งใน phpMyAdmin ของเรามัน disable หน้าตาเฉย ตอนที่เกิดปัญหานี้แรกๆก็พยายามลง Appserv ใหม่แต่ก็ยังไม่ได้เรื่อง สุดท้ายก็ไปใช้ google ให้เกิดประโยชน์และเจอวิธีแก้ไขแบบไม่ต้องลง Appserv ใหม่ มันสุดยอดมากเลยล่ะตัวเธอว์
  • พิมพ์ผิด ... อันนี้ความโก๊ะส่วนตัว แต่ใช้เวลานานมากกว่าจะแก้ได้ ต้องตั้งสติก่อนสตาร์ทนิดนึง

หลังจากจัดการปัญหา Database เรียบร้อย ทดสอบ query ผ่านเป็นที่น่าพอใจ ก็มาทบทวนโจทย์ที่พี่ต้องให้อย่างกว้างๆว่า ให้ใช้งานง่ายๆ ผู้สูงอายุก็ใช้ได้ (แต่ไปๆมาๆ requirement change ไม่ต้องทำเผื่อผู้สูงอายุก็ได้ แต่ concept ยังเหมือนเดิมคือเรียบง่าย) โดยพี่ต้องแนะนำ Auto-complete Suggestion ยกตัวอย่างง่ายสุดๆคือ เข้า google ตั้งแต่ google มีเจ้านี่มาชีวิตมันช่างสะดวกสบายซะเหลือเกิน แต่เราจำไม่ได้แฮะว่า google มีตั้งแต่เมื่อไหร่ เหมือนเราอยู่กับน้องจนโตไม่เห็นความเปลี่ยนแปลงทั้งที่จริงก็เปลี่ยนไปมากยังไงยังงั้น

คุยเสร็จก็กลับมานั่งคิดว่าจะเอาไงดีหว่า ก็เลยไปคุ้ยหาการออกแบบเว็บสำหรับผู้สูงอายุ เจอเว็บที่ scope เนื้อหาดูเข้าที เว็บที่ใช้งานง่ายมีอีกชื่อเก๋ๆว่า Web Accessibility แต่เว็บที่เราเจอนั้นยังมีเสริมท้ายอีกว่า for older users (คลิกเลย แค่เห็นชื่อเว็บก็เชื่อถือได้แล้ว 555) สรุปก็คือ 

  • คนแก่ชอบอะไรสะดวกๆ ไม่ชอบของลูกเล่นเยอะ เช่นพวก pull-down menus, scrolling-list แม้กระทั่ง scrolling page ก็ยังไม่เหมาะ ยิ่งไอประเภทเอา cursor วางบนตัวอักษรแล้วมี Effects นี่ยิ่งไม่เหมาะเข้าไปใหญ่ เม้าส์ควรมีไว้คลิกโง่ๆเท่านั้น
  • Link และ Text ต่างๆ ควรชัดเจน เข้าใจง่าย ตัวใหญ่ๆ พวก headings, menu items ไรงี้สำคัญ ควรจัดลำดับความสำคัญของข้อมูลด้วย (information hierachy) และไม่ควรมีอะไรซ้ำซ้อน
  • ไม่ควรมี Link หรือ page อะไรที่มันทำให้คนแก่สับสน ยกตัวอย่างง่ายๆเช่น เข้าเว็บจะไปโหลดอะไรซักอย่าง แล้วเจอพวกโฆษณาแฝง ทำให้เพจนั้นมีคำว่า 'Download' อยู่สี่ห้าอัน อย่าว่าแต่คนแก่เลย วัยรุ่นอย่างเรายังมึน
  • Content เองก็สำคัญ ควรจะมีเนื้อหาสอดคล้องกับหัวข้อของ page นั้น หรือวัตถุประสงค์ของเพจด้วย


พอได้เนื้อหามาดังนี้แล้วก็คิดว่า การทำช่อง search ไม่ควรซับซ้อน ให้คนแก่มานั่งติ๊กว่าจะ search อะไร ขอแค่รู้ keyword ก็พอแล้วดีกว่า พอคิดแบบนี้แล้วไอเดีย Auto-complete Suggestion ก็สำคัญขึ้นมาทันที ก็ไล่ Search กันมันมือ ไปเจอ jQuery plugin สำหรับงานนี้ ในใจคิดว่าหวานหมู แต่มันบอกว่าเลิกใช้ไปแล้ว ย้ายไปอยู่กับ jQuery UI แทน ณ ขณะนั้นเริ่มอับจนหนทาง ลองเข้า w3school ไปอ่านเพิ่มเติมก็ไม่รู้เรื่อง คงเป็นเพราะพื้นเดิมไม่แน่นพอ จนสุดท้ายหนุ่มโรงงานจากอยุธยาผู้ว่างงาน (แบบนี้มันน่าจะตกงานแล้วมากกว่านะ = =") ก็ได้แนะนำ UI สำหรับงานนี้ ทำให้ใจชื้นขึ้นมาหน่อย นั่งเลือก UI กันสนุกสนาน แต่พออ่าน code ก็ม่องเท่งเหมือนเดิม มี Ajax เพิ่มมาอีกอย่างที่ไม่รู้เรื่องหนักกว่า jQuery อีก

พี่ต้องเข้ามาดูงาน ประมาณว่าออกแบบเสร็จยังน้อง น้องก็เฮือกสิ มัวแต่คุ้ยหาอะไรไม่รู้ ไม่ได้ออกแบบเป็นชิ้นเป็นอันเลย พี่เค้าก็เลยแนะนำโปรแกรมฟรีสำหรับออกแบบเว็บง่ายๆ หน้าตาน่ารักๆ ชื่อ pencil project มาลองเล่น พอออกแบบเสร็จคร่าวๆง่าวๆ ออกมาหน้าตาแบบนี้ ก็ให้พี่เค้าดู

รูปบน: ขณะ search มี suggestion ตำบล, เมือง, จังหวัด ให้
รูปล่าง: แสดงผลลัพธ์เป็นตาราง

ก็ได้ suggestion เพิ่มอีกว่า แถบด้านขวาควรจะมีลิ้งแบบที่ไม่ต้องกด search ด้วย เราก็เสนอไปว่าควรเป็นจังหวัดเรียงตามตัวอักษร พี่แกก็คุยไปๆมาๆประมาณว่า หรือจะแยกตามภาค หรือจะเอาแผนที่ประเทศไทยมาจิ้มเลือกจังหวัดเอาเลย สุดท้ายก็กลับเข้าฝั่ง 5555 พอออกแบบไปตาม requirement ใช้ 960 grid ให้เกิดประโยชน์ด้วย และแถม Header กับ Footer พอเป็นพิธี สุดท้ายก็พอว่า แม่ง scroll เยอะไปป่าววะ มันชักจะขัดกับที่พิมพ์ไว้ข้างต้นซะแล้วสิ แต่พี่ต้องมาเห็นก็ไม่ว่าอะไร แค่บอกว่าโทนสีควรจะเรียบๆ โทนสีเทาประมาณนั้น แล้วก็ควรมีข้อความกับ Logo อะไรบ้างตรง Header เราก็แค่จับไล่เฉดสี เทา-ขาว ตรง Header ใส่สิ่งที่ควรจะเป็น Logo ไว้มุมขวาบนแล้วก็เพิ่มข้อความอีกนิดหน่อย ใส่ไปมั่วๆเท่านั้น



ก็มันยังไม่ใช่ของจริงนี่นา :P


ปล.ลิ้งเหล่านี้มีประโยชน์



Internship, DAY 4

เช้าวันจันทร์... ไม่อยากลุกจากเตียงเลยให้ตาย

เมื่อคืนนั่งปั่นงานที่พี่เค้ามอบหมายให้ตั้งแต่วันศุกร์ แต่ดันดองไว้ทำวันอาทิตย์ เนื่องจากวันเสาร์ดู The Voice, The Star, Travel Chanel, อาหารเมนูไข่, Harry Potter ภาค 3 ฯลฯ สรุปคือเหลวไหลสุดๆ พอวันอาทิตย์ก็ติดบั๊กทั้งบ่าย แถมตอนกลางคืนยังแรดไป Festival Walk กับมังกรอีก

อะไรมันจะชิวขนาดน้าน...

ดีที่กลับมาหอมายยังไม่นอน ให้มายแก้บั๊กให้เลย แป๊บเดียวเสร็จ = =" แต่ก็นั่งทำต่อเท่าที่ทำไว้ถึงตี 2 ก็ต้องยอมแพ้ไปนอน

พอตอนเช้าไปถึงออฟฟิศ พี่ต้องก็ขอดูงาน แล้วก็ตื่นตะลึงในความโหดของเว็บที่เราดูเป็นตัวอย่าง (เช่น เฮียเจ้าของเว็บประหยัด Header สุดๆ ชอบเอารูป 2 รูปรวมเป็นรูปเดียวแล้ว sprites เอา) แล้วพี่แกก็ให้เราอธิบายแต่ละส่วนที่ทำมาพอสังเขป จากนั้นพี่เค้าก็เริ่มเอาลิ้งต่างๆที่น่าสนใจมาให้เราดู เช่น สามย่าน นอกจาก content มันจะน่าสนใจแล้ว รูปแบบการ scroll เปลี่ยนเพจก็น่าสนใจอีกด้วย ประมาณว่า พี่เค้าแอบอยากได้แบบนี้ ให้เราไปศึกษามา แต่ยังไม่ได้สั่งงานเป็นชิ้นเป็นอันหรอกนะ 5555

 เว็บตัวอย่าง และสอนทำ คลิกที่นี่ ซึ่งเข้าไปแล้วก็ได้แต่ดูวิวัฒนาการอีกขั้นของเว็บไซต์ แต่ให้ทำ ทำไม่ได้หรอกนะ Orz

ลิ้งที่น่าสนใจก็เช่น บันทึกการบรรยายเรื่อง HTML5-CSS3 อันนี้เฉยๆ เพราะว่าตัวเองก็ได้ไปฟังมาเหมือนกัน 5555

แต่ที่โหดสุดๆเห็นจะเป็น E-Card อวยพรวันปีใหม่ ซึ่ง No Flash เจ้าค่ะ โหดสลัดเป็ดสลัดไก่ ยิ่งไปอ่านเบื้องหลังการทำและบันทึกอื่นๆแล้วรู้สึกตื่นตะลึงถึงความเจ๋งของ Creative ชาวไทย โดยเจ้า E-Card ที่ว่านี้ใช้ Technique ที่เรียกว่า Parallax Scrolling พออ่านไปคุ้ยไปก็พบว่าจริงๆแล้วมันก็มีมาตั้งแต่นานนม เช่น เกมมาริโอ้สุดฮิตนั่นเองงง

อ้ะ ตัวอย่างงง


โอ๊ะ จู่ๆก็อยากเล่นขึ้นมาทันใด 5555 สังเกตว่า BG หลังสุด พวกวิวทิวทัศน์ทั้งหลายจะขยับด้วยความเร็วต่ำสุด เหมือนเวลาเรานั่งรถตอนกลางคืนแล้วมองพระจันทร์ พระจันทร์ก็ไม่หายไปไหนซักที ยังอยู่ที่เดิมนั่นแหละ ในขณะที่ของใกล้ๆตัวเช่นตึกรามบ้านช่องต่างก็ผ่านมาแล้วก็ผ่านไปอย่างรวดเร็ว Parallax Scrolling ก็ใช้หลักการบ้านๆอันนี้ในการทำภาพเคลื่อนไหว 2 มิติให้ดูสมจริงนิดนึง มักจะเจอในเกมเดินหน้าล่าแต้มแบบ 2D อย่าง Mario หรือ Metal Slug

หลังจากได้ศึกษาจนอิ่มหนำแล้ว (แต่ไม่แกะโค้ดหรอกนะ ขี้เกียจ = =") ก็รู้สึกว่าถ้าเจองานพวกนี้เข้าจริงๆ คงต้องศึกษาพวก javascript, jquery ติดตัวไว้มั่ง ก็เลยนั่งอ่านของพื้นฐานไปก่อน ซักพักพี่ต้องก็ส่งลิ้งนี้มาให้

ลองคลิกดูแล้ว ภาพสวยใช่ไหมล่า เกมมันเจ๋งใช่ป่ะล่า ไม่ได้เอาไว้ศึกษาหรอก พี่เค้าสั่งให้เล่นแข่งกันทั้งออฟฟิศ ใครแต้มสูงสุดชนะ ><

ก่อนกลับ พี่ต้อง Assign ไว้เลยว่าพรุ่งนี้เตรียมตัวเจอ Database ได้ พี่จะให้ฐานข้อมูลที่ไว้ใช้งานจริงลองให้เรา query ดูก่อน ดูว่าพื้นฐานมีอยู่ประมาณไหน

พรุ่งนี้ก็เจอของจริงแล้วสินะ :D