HTML

Web design : web designer ควรที่จะเขียน code เป็นหรือไม่?

เป็นเรื่องที่ผมเจอมาจากคนรอบ ๆ ตัวและผมคิดว่าน่าจะเขียนเก็บเอาไว้ เป็นแนวทางสำหรับ (drupal) web designer ครับ

ก่อนเริ่ม

ก่อนอื่น ที่บอกว่าเขียน code เป็นในที่นี้คือนอกจาก html, css พื้นฐานแล้ว web design ควรที่จะเข้าใจหรือว่าพอเขียน code พวก javascript, php หรืออื่น ๆ ในแบบที่พอจะแก้เว็บเองได้บ้าง ไม่จำกัดว่าจะต้องใช้ drupal แต่ไหน ๆ ผมก็ใช้ drupal เป็นหลัก และเนื้อหาเว็บนี้เกี่ยวเนื่องกับ drupal อยู่เนือง ๆ อยู่แล้ว ผมเลยคิดว่าจะเขียนในแง่มุมการใช้งานหรือว่าการออกแบบ เว็บที่ทำด้วย drupal เป็นหลักก็แล้วกันนะครับ

ภาพรวม

ปรกติโดยทั่วไป การจะทำเว็บ ๆ นึงมักจะประกอบด้วยสองส่วน คือส่วนหน้าตา และส่วนระบบของเว็บ สำหรับส่วนหน้าตาเว็บ พวก web designer นั้นสามารถจัดการได้อยู่แล้ว แต่ส่วนใหญ่พอมาถึงเรื่องระบบหลังบ้าน มักจะไม่ได้จับส่วนนี้ในการออกแบบเว็บด้วย ซึ่งผมคิดว่า ถ้า web designer สามารถเข้าใจ code ในระบบหลังบ้านของเว็บด้วย น่าจะทำให้งานออกแบบเว็บนั้นสมบูรณ์มากขึ้น

อุปสรรค

เรื่องนี้เปรียบเทียบง่าย ๆ เหมือนกับการที่เราวานให้เพื่อนไปซื้อของใน 7-11 ให้ ของบางอย่างอธิบายเป็นคำพูดได้ ของบางอย่างอธิบายเป็นคำพูดไม่ได้ ซึ่งผลที่ตามมาคือ ถ้าวานไปสิบอย่าง มักจะได้มาไม่ครบ ไม่ก็ไม่ได้อย่างที่เราต้องการเสมอ

การทำเว็บโดยที่ web designer ไม่มีความรู้ความเข้าใจในระบบหลังบ้านของเว็บที่ตัวเองทำอยู่ ผมคิดว่าคงคล้าย ๆ กับตัวอย่างนี้ คือตอนทำเว็บก็จะมีปัญหาเรื่องการสื่อสารระหว่างทีมออกแบบ และทีมที่ทำระบบหลังบ้านเป็นตัวคั่น ทำให้การออกแบบนั้นกินเวลามากเกินความจำเป็น เพราะ web designer ไม่รู้ข้อจำกัดของระบบเว็บที่ใช้ ไม่รู้ว่าอะไรทำได้บ้าง ไม่ได้บ้าง และผมเชื่อว่าบ่อยครั้งคนออกแบบมักจะคิดไปไกลเกินกว่าที่ระบบเว็บจะทำได้ .. และถึงตอนทำจริง ๆ มักจะเสียเวลา เพราะต้องมานั่งหาทางออกกันใหม่ ซึ่งถ้า web designer พอจะเขียน code หรือว่าเข้าใจข้อจำกัดตรงนี้ น่าจะสามารถเลือกทางออกทดแทนได้ง่าย และเร็วกว่า หรือเลือกที่จะใช้วิธีอื่น ซึ่งทำให้เสียเวลาในกระบวนการทำเว็บน้อยลง

ข้อดี -ข้อด้อย

ข้อดี

  • ถ้านักออกแบบเว็บสามารถเขียน code หลังบ้านเองได้บ้าง ทำให้งานออกแบบทำได้ง่ายขึ้น เพราะคนทำเข้าใจตัวเว็บในภาพรวมมากขึ้น และการออกแบบในภาพรวม ผมเชื่อว่าน่าจะให้ผลลัพธ์ที่ดีกว่า เพราะมีการคิดและวางแผนตั้งแต่ต้นจนจบ

  • นักออกแบบทราบปัญหาและข้อจำกัดของระบบที่ใช้ - ตรงนี้ ถึงจะไม่ได้ทำระบบหลังบ้านเองทั้งหมด แต่น่าจะช่วยให้การทำงานง่ายเข้าเวลาทำงานร่วมกับนักพัฒนาคนอื่น เพราะรู้ว่าอะไรทำได้บ้าง ไม่ได้บ้าง

  • ทำเว็บได้อย่างใจมากขึ้น เพราะเราสามารถแก้ code เองได้บ่อยเท่าที่ต้องการ โดยที่ไม่ต้องรอใครมาทำให้

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

ข้อด้อย

  • คงจะมีข้อจำกัดในเรื่องระบบหลังบ้านบ้าง เพราะ web designer ที่มาจับระบบหลังบ้านเอง คงเขียน code ขึ้นมาแบบคนที่เรียนมาทางนี้โดยตรงไม่ได้ คงมีน้อยคนที่จะเรียนรู้ตรงนี้จนถึงขั้นเขียนโมดุลเองได้

ความคิดเห็น

ตัวผมเองมาจากสายงานออกแบบก่อนที่จะมาจับระบบหลังบ้านของ drupal ผมพบว่าผมสามารถทำเว็บในรูปแบบที่ผมต้องการได้ง่ายและรวดเร็วกว่าการร้องของนักพัฒนาคนอื่นให้ทำให้ และการพัฒนาเว็บในลักษณะนี้ทำให้ผมมองการออกแบบเว็บในแง่มุมใหม่

เป็นแง่มุมที่การออกแบบนั้นไม่ได้คิดถึงเรื่องหน้าตาเว็บเพียงอย่างเดียว แต่จะรวมไปถึงการได้มาซึ่งเนื้อหา และการทำงานหลังบ้านตั้งแต่คนเริ่มส่งเนื้อหาเข้าเว็บ -> เป็นการออกแบบในภาพรวมที่สมบูรณ์มากขึ้น และเข้าใจเว็บที่ผมทำอยู่มากขึ้น มีหลายมิติที่ถ้าผมยังเป็นนักออกแบบที่คิดแต่เรื่องหน้าตาเว็บเพียงอย่างเดียว หรือถ้าผมเป็นนักพัฒนาระบบหลังบ้านของเว็บเพียงอย่างเดียว จะไม่มีโอกาสได้สัมผัส

ผมชอบครับ :)

ข้อเสนอแนะ สำหรับนักออกแบบเว็บทั่วไป ที่ออกแบบอย่างเดียว

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

คุณจะเริ่มหัดจากตัว cms ตัวไหนก็ได้ครับ หลักการคล้ายกัน

ถ้าคุณอยากพัฒนางานออกแบบเว็บของคุณเอง ไม่ว่าจะเป็นเว็บส่วนตัว หรือเว็บที่ทำให้คนอื่น ผมคิดว่าการเรียนรู้ code หรือระบบหลังบ้านของเว็บบ้าง เป็นเรื่องที่ไม่น่ามองข้ามนะครับ

:)

Zen Coding : A new way of coding

Zen Coding — a new way of writing HTML and CSS code

การใช้งานเป็นประมาณว่า เขียนคำสั่งย่อ แล้วกดปุ่ม shortcut เพื่อให้โปรแกรมทำการเขียน HTML/CSS code ฉบับเต็ม ๆ ให้ เช่น

เขียนชุดคำสั่งย่อติดกันแบบนี้

 div#page>div.logo+ul#navigation>li*5>a

แล้วสั่งให้ zen coding ทำงานผ่าน shortcut เราจะได้ code เต็ม ๆ เป็น

 <div id="page">
    <div class="logo"></div>
    <ul id="navigation">
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
    </ul>
 </div>

โชคดีว่าโปรแกรมที่ผมใช้ทำเว็บอยู่นี้มี zen coding มาให้ในตัวเลย

แต่ทั้งนี้ทั้งนั้นคนคิดนี่.. สุดยอดจริง ๆ :)