Adobe CS4 Web 2.0 Design Workflow
เนื่องจากว่าได้ทราบลิงค์งานนี้ Adobe CS4 Web 2.0 Design Workflow จาก twitter และด้วยความที่งานของผมก็เกี่ยวข้องกับการออกแบบ ก็เลยอยากไปดู workflow ว่าคนอื่นเขามีเทคนิคอะไรเพิ่มเติมรึเปล่า ก็เลยเข้าไปนั่งฟังด้วยครับ
งานนี้จัดขึ้นที่ หอศิลป์กรุงเทพมหานคร โดย Thai Adobe Flex User Group ผู้บรรยาย : Jedt Sitthidumrong
เนื้อหาหลักๆคือแนะนำ Workflow ในการออกแบบเว็บไซต์ที่ถูกต้องเพื่อความรวดเร็ว และลดขั้นตอนยุ่งยากในการทำงานในฝั่งการออกแบบ โดยใช้ Software หลักๆคือ
โดยใช้ Fireworks ในฝั่งการออกแบบ mockup และใช้ dreamweaver/firebug ในฝั่ง coding/debugging
เนื้อหาด้าน Adobe Fireworks CS4
- ระวังการใช้ Stoke ในการออกแบบ mockup เพราะถ้าออกแบบผิดแล้วต้องการขยาย scale ที่ดูสวยงามในแต่ละ resolution จะแตกต่างกันโดยสิ้นเชิง
- อย่าใช้ Adobe Illustrator ในการออกแบบโดยเด็ดขาด เนื่องจากปัญหาเรื่อง scaling และความไม่เท่ากันในหน่วย point/pixel (ลองจากทำ stoke แล้วยืดขยายดู)
- สร้าง Master Page ใน Adobe Fireworks ทุกครั้งที่ทำงาน เพื่อลดความซ้ำซ้อนของ element หลักในหน้าเว็บ(หน้าอื่นๆก็จะ inherit จาก Master Page)
- ฝัง Meta Data(Description, Tagging, Copyright, Author, etc.) ทุกครั้งเมื่อทำงาน เพื่อความสะดวกในการค้นหา ลดความซ้ำซ้อน
- Stoke แบบ Hardline ขอบจะคมเต็ม pixel, Softline ขอบจะฟุ้ง(เกิดจากการทำ Anti Aliasing)
- การทำ Roll-Over ให้ใช้การสร้าง State แล้วค่อยไปสร้าง Behavior (เทคนิคนี้เหมือนทำบน Dreamweaver แต่ส่วนตัวผมไม่แนะนำในการทำงานจริง เพราะ coding ที่ Adobe ใช้ปรับแต่งต่อยาก)
- Graphic Library มีแถมมาให้ใน Adobe Fireworks ใช้งานได้เลยจาก common library
- Adobe Fireworks CS4 มีฟังก์ชั่น “Export to Flex Skin” เพื่อเพิ่มความง่ายในการออกแบบ Flex Application โดยทำ template ในหน้าเดียว
- ใช้ฟังก์ชั่น Align เพื่อจัดการเรื่องตำแหน่งและขนาดของ element ทั้งหมด(แนะนำเทคนิคนี้ เพราะง่ายมาก ไม่ต้องไปเล็ง)
- ควรใช้การ Export to PDF เพื่อให้ลูกค้ารีวิว (เนื่องจาก pdf สามารถให้ลูกค้าวาด comment ในตัว viewer แล้วบันทึกส่งกลับมาพิจารณาต่อได้ (โปรแกรม Preview ในแมคใช้ฟังก์ชั่น Annotate)
- สามารถสร้าง Popup menu โดยการใช้เทคนิค swap image ใน behavior อีกเช่นเคย
เนื้อหาด้าน Adobe Dreamweaver CS4
- เวลาทำเว็บทุกครั้ง ต้องประกาศ tag <!DOCTYPE> ทุกครั้ง เพื่อบอก version ของ html และแนะนำให้ใช้ “XHTML”
- ใช้ cmd+option+click เพื่อดูรายละเอียดของ element ต่างๆ (คล้ายๆ Firebug)
- ลดขั้นตอนในการทำงานโดยการใช้การ Edit Original ที่ Fireworks แล้วกด Done เพื่อกลับมาแก้ที่ Dreamweaver ต่อได้(ลดขั้นตอนการทำงานข้ามโปรแกรมได้ดีมาก)
- ใช้การ “Clocking” ไฟล์ เพื่อป้องกันการ Upload ไฟล์ขึ้นไปซ้อนทับกัน (แต่ผมแนะนำให้ใช้วิธีการทำ subversion เพื่อความคล่องตัวในการทำงาน)
- ให้ลูกค้าใช้ Firefox ในการรีวิวงาน(เนื่องจากพัฒนาบน Firefox เป็นหลักเนื่องจากได้มาตรฐาน Web Standard) เมื่อทำใกล้เสร็จค่อยให้แก้ Bug ในส่วนของ Internet Explorer (เพราะ IE มันเรื่องมากในมาตรฐานเว็บ ลูกค้าบางคนยังใช้ IE6 ซึ่งจะ 10 ปีเข้าไปแล้ว)
CSS Design Workflow – การทำงานกับการออกแบบ Style Sheet ให้ออกแบบใน Firefox เป็นหลักแล้วค่อยทำ css hacking กับ IE6,7,8 แยกไฟล์กัน เพื่อลดความซ้ำซ้อน
- Reset CSS
- CSS Layout (IE6,IE7,IE8(แยกแต่ละไฟล์เพื่อทำ Hacking))
- CSS Text (IE6,IE7,IE8(แยกแต่ละไฟล์เพื่อทำ Hacking))
จะว่าไปส่วนใหญ่ผมมักจะทำ mockup บน photoshop โดยอิงจาก 960.gs template เพื่อความสะดวกในการวาง grid เว็บ แล้วค่อยมา hardcode ใน TextMate (Dreamweaver จึงไม่ค่อยมีประโยชน์อะไรกับผมมากนัก) แต่หลังจากนี้คงจะลองเอา workflow นี้ไปทำงานดูครับ 
ด้วยทักษะอันน้อยนิดกับ wacom ขาวเนียนของผม ได้ออกมาเป็น 
