Radiz Sutthisoontorn

มาทำ Wire Frames กันเถอะ

ผมไม่ทราบว่าเพื่อน ๆ designer, Media Agency และ บริษัทต่าง ๆ ส่วนใหญ่ในประเทศเรามี process การทำงานกันอย่างไรบ้าง แต่เท่าที่สอบถามคนรอบข้างนั้น หลาย ๆ คนยังไม่เคยใช้หลักการระดมสมองที่เรียกว่า Wire Framing นี้ น้อยคนมากที่รู้จัก หรือ อาจจะทำอยู่เป็นนิจแต่ไม่รู้ว่า ไอ้สิ่งที่ทำนั้นมันคือ อะไร ผมเองก็เพิ่งรู้จักมาเมื่อไม่กี่เดือนนี้เหมือนกัน ว่าสิ่งที่เราทำบางครั้งก่อนลงมือทำงานขั้นตอนหนึ่ง มันเรียกว่า Web Wire Framing ต้องขอบพระคุณพี่เอ้ @DjFunkyDog ที่เปิดหูเปิดตา และ เอื้อเฟื้อเวลานั่งสอนน้องคนนี้มา ณ ที่นี้ เป็นอย่างมากครับ (สอนโดยไม่รู้ตัวบางทีก็มี เอิ๊ก ๆ) ก่อนอื่นผมจะขออนุญาติอธิบายเกี่ยวกับ Wire Frames ก่อนนะครับ

Wire Frame นั้นเป็นขั้นตอนที่ ทุกคนที่เกี่ยวข้องในตัวผลิตภัณฑ์นั้น ๆ ต้องร่วมกันแสดงความคิดเห็น ก่อนลงมือผลิตเจ้าผลิตภัณฑ์นั้น ๆ ขึ้น เหมือนเป็นการร่วมกันร่าง พิมพ์เขียวของเจ้าสิ่ง ๆ นั้นขึ้นมา โดยแต่ละทีมนั้นสามารถทำ Wire Frame ของแต่ละทีมมาก่อน ก่อนที่จะ Finalize Wire Frames ของเจ้าผลิตภัณฑ์ที่จะสร้างขึ้นนั้นอีกทีเป็นรอบปิดท้าย

เมื่อไหร่ จะเกิดการวิวัฒน์ อย่างถ่องแท้

ผมพยายามนั่งดู ความเป็นไปในวงการผู้ประกอบกิจการ ผู้ทำงานเกี่ยวกับ Website ในบ้านเราอยู่เป็นเวลานานพอสมควร เรียกว่าในระยะหนึ่งได้ และ สิ่งที่คิด และ เขียนออกมานั้นอาจจะเป็นความคิดที่เพื่อน ๆ พี่ ๆ น้อง ๆ หลาย ๆคนคิดกันไว้อยู่แล้วก็เป็นได้ ผมไม่อาจทราบได้เลยว่าปัญหาที่มันเกิดมันเกิดขึ้นเพราะ ระบอบสังคม วัฒธรรม ของบ้านเราหรือไม่ ที่ทำให้ทุก ๆ สิ่ง ทุก ๆ อย่างกลายมาเป็นเฉกเช่นทุกวันนี้ บริษัทที่อยากประกอบธุรกิจบนโลก online, Agency และ Freelancer หลาย ๆ แห่งในไทยกำลังย่ำอยู่กับบางสิ่งที่เขาเองเรียกว่าการพัฒนา สิ่งที่เขาเองเรียกว่า เขาทำได้ และ เข้าใจได้ถ่องแท้แล้ว นำมาประพฤติปฏิบัติกับลูกค้า หรือ งานของตน ซึ่งบางเรื่องเป็นเรื่องที่ควรหยิบยื่นให้โดยไม่จำเป็นต้องร้องขอค่าบริการ เลยก็ได้ เป็นเรื่องง่าย ๆ ที่ถ้าลูกค้าเขามาอ่านใน Internet เจอเอง หรือ วันหนึ่งเมื่อเขาเข้าใจได้เอง อาจจะทำได้เองโดยไม่ต้องร้องขอ สิ่งเหล่านี้ หรือ หันไปใช้บริการของฟรีจากที่อื่น ที่มีประสิทธิภาพ และ ผลลัพธ์เหมือนกัน ผมขอใช้คำนิยามเรื่องราวแบบนี้ว่า “การเอาเปรียบ” อันนี้รวมไปถึงกระทั่งบริษัทที่ประกอบธุรกิจ online / Agency ปฏิบัติต่อกันและกัน หรือปฏิบัติต่อ Freelancer เช่นเดียวกันรวมไปถึง Freelancer ปฏิบัติต่อ Freelancer ด้วยกันเองอีกด้วย

รู้จัก XHTML Basic 1.1 (ตอนที่ 2)

เมื่อเดือนที่แล้วมีข่าวดีของคนรัก iPhone คือ App Store ได้อนุญาติให้มี 3rd party web browser ที่สามารถ install ลงในเครื่อง iPhone ได้แล้ว ผมเองก็ได้แต่เฝ้ารอดูอยู่ว่ามันจะออกมาในรูปแบบใด อย่างว่า … ถ้าว่ากันด้วยเรื่องการตลาด และ ธุรกิจแล้ว iPhone กำลังจะครอบงำ trend การทำเวปสำหรับ mobile device หรือเปล่า (ลองจับตาดูกัน) เพราะในแง่ความคิดผมแล้วมันเป็นอะไรที่มาแรงเหลือเกินฉุดไม่อยู่จริง ๆ ไม่ว่าจะเป็นผลิตภัณฑ์ใดของ Apple มันมักจะสวนกระแส ป่วนกระแส และ สุดท้ายสร้างกระแสได้ดีเสมอ กลับมาต่อกันด้วยเรื่องของเรา จากที่ผมติดค้างไว้ เมื่อปีที่แล้ว (ปีที่แล้วเลย) ว่าจะแนะนำให้รู้จักภาษาโครงสร้างใหม่ XHTML Basic 1.1 สำหรับ การทำเวปในส่วนของ mobile device นั้นบัดนี้ได้เพลาพอปลีกตัวพอหายใจได้ขยับขยายผายปอด ผายลม ออกมาแรด ๆ หายใจทิ้งทำนั่นทำนี่ได้หน่อย ก่อนจะเข้าสู่ห้วงยุ่งอีกครั้ง ก็ขอบ่น ๆ ไว้สักหน่อย สักบทความ

checklist เบื้องต้น กับ Web Accessibility (ตอนที่ 2)

กลับมากันอีกรอบครับ ต่อจาก ตอนที่ 1 ที่ได้เคยนำเสนอไปเมื่อเดือนที่แล้ว ทีนี้เราจะมาว่ากันในส่วนที่เหลือกันต่อว่าเราต้องตระเตรียมอะไรกันอีกบ้างสำหรับ Web Accessiblity ครับ

เนื้อหาที่เป็น Dynamic

  • เราไม่ควรใช้ JavaScript events ใด ๆ ใช้โหลดหน้าเวปใหม่ขึ้นมาแทนที่เมื่อคลิก หรือ (จะอธิบายอย่างไรให้เห็นภาพดี) เหมือนเปลี่ยนหน้าใหม่แต่อยู่ที่ที่เดิม เหมือนการใช้ tag iframe

รูปภาพ และ multimedia (ขออนุญาติทับศัพท์ครับ)

  • ต้องแน่ใจว่าคุณใส่ attribute alt ให้กับรูปภาพครบถ้วนแล้ว ถ้าเป็นไปได้พยายามใส่ข้อความอธิบายแบบกระชับได้ใจความ ลงไปด้วยนะครับ
  • ถ้ามี link ที่รูปภาพ ต้องใส่ alt เพื่ออธิบาย link นั้น ๆ นะครับ
  • ว่าด้วยเรื่อง คำอธิบายที่กระชับ อาทิ มีรูป ๆ หนึ่งที่ผมถ่ายคู่กับพร ควรจะอธิบายให้เข้าใจได้ว่า รดิส และ พร อันทะ เดินท่องไปตามถนน ม.ขอนแก่น ไม่ใช่แบบนี้ รูปถ่ายของอีปลา และ อีพร
  • ในกรณีของไฟล์ vdo หรือ ไฟล์เสียง เป็นไปได้ควรทำบรรยายเป็นภาษานั้น ๆ (ตามกลุ่มเป้าหมายก็พอนะครับ หรือ ใครจะฟิตทำให้รองรับทุกประเทศก็ได้ ผมช่วยเชียร์) อาทิ เช่น vdo สอน photoshop ที่เป็นภาษาอังกฤษ จะเอามาสอนคนไทยก็เอามาพากย์ เป็นภาษาไทยเสีย หรือ ใส่ subtitle บรรยายไปด้วย
  • อีกวิธีหนึ่งคือ ทำไฟล์บรรยายเกี่ยวกับไฟล์ vdo นั้น ๆ แยกออกมาต่างหากสำหรับผู้ที่ไม่สามารถมองเห็น เพื่อที่จะให้เขาได้เข้าใจไฟล์ vdo นั้น ๆ อย่างแจ่มแจ้ง (อาจจะไม่จำเป็นต้องทำเป็นไฟล์เสียงก็ได้ ทำเป็นเอกสาร .html อธิบายโดยละเอียดก็ได้ แยกกัน)
  • ถ้าไฟล์ vdo นั้นไม่สามารถ autoplay ได้คุณต้องแน่ใจด้วยว่า มีปุ่มกด vdo panel (play, pause, stop …) ที่สามารถเข้าถึงได้ ใช้งานได้จริง ๆ
  • การใช้ background image แทนตัวหนังสือควรใช้อย่างเหมาะสมนะครับ เอาเท่าที่จำเป็น
  • ตรวจสอบให้แน่ใจว่า text ที่คุณใช้สามารถแสดงผลได้ดีในทุก ๆ browser ต้องตรวจสอบให้แน่ใจว่า font ตระกูลที่ใช้นั้นแสดงผลได้ดี มีในทุก ๆ OS (เรื่องลิขสิทธิ์ต้องช่วยตัวเองครับ ฮ่า ๆ)
  • อย่าใช้ CAPCHA ถ้าไม่จำเป็นจริง ๆ ครับ ถ้าจะต้องใช้ควรจะเป็น audio CAPCHA ด้วยนะครับ

แจ้งยกเลิกการปฐมนิเทศน์ วันอาทิตย์นี้ครับ

เรียนสมาชิกทุกท่านครับ

เนื่องจากมีสายด่วนจากสงขลาถึงผมจาก พร ว่ายังตัดต่องานไม่เสร็จสิ้นครับ
เลยต้องรีบแจ้งให้ทุกท่านทราบด่วนมากถึงด่วนที่สุด
ต้องกราบขออภัยเพื่อน ๆ พี่ ๆ น้อง ๆ ทุกท่านมา ณ ที่นี้ด้วยครับ

ส่วนวาระการประชุมนั้นอาจจะเลื่อนไปเป็นอาทิตย์ หรือ อาทิตย์ถัดไปแทน
ซึ่งผมจะแจ้งให้ทราบอีกครั้งครับผม

จึงเรียนมาเพื่อทราบโดยทั่วกัน

ปล. ฝากกระจายข่าวให้ สมาชิกทุกคนที่รู้จักกันด้วยนะครับ

ขอบพระคุณมากครับ

รดิส สุทธิสุนทร

Thai Web Standards Group (TWG) orientation

จากผลโหวตใน Forum ของ ThaiCSS ก็ได้วัน และ เวลาที่ลงตัวกันแล้วนะครับ Thai Web Standards Group จะจัดประชุมปฐมนิเทศน์ ชี้แจงรายละเอียดต่าง ๆ จุดประสงค์ เป้าหมาย และ ความคาดหวังที่ กลุ่ม ๆ นี้จะร่วมกันดำเนินงาน ผมจึงใคร่ขอแจ้งให้สมาชิก และ ทั้งที่สมัคร และ ได้รับ Email แจ้งแล้วใน Google Group และ ผู้ที่สมัครใหม่ใน Forum ครั้งล่าสุดให้ทราบอีกครั้งนะครับว่า

เราจะประชุมปฐมนิเทศน์กันในวันอาทิตย์ ที่ 12 ตุลาคม 2551 เวลา 13.00น. จนถึง เวลา 16.00น. สถานที่ก็ขออนุญาติยืนยันตรงนี้เลยละกันนะครับ เป็นห้องประชุม ศูนย์ประสานงานเครือข่ายจิตอาสา คุณสามารถคลิกเพื่อดูแผนที่ได้ที่นี่ครับ ทั้งนี้ต้องขอขอบคุณ poakpong และ เหล่า OpenDream Team มา ณ ที่นี้ด้วยครับ สำหรับการช่วยประสานงานต่าง ๆ

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial