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

jQuery เป็น 1 ใน Javascript Library ที่ดังมาก ในด้านการใช้งานง่าย เร็ว และความสามารถสูง ซึ่งเป็นหนึ่งในสิ่งที่ Front-End Developer ควรจะรู้วิธีใช้ไว้ครับ

วันนี้จะมาแนะนำคอร์สเรียน jQuery ฟรี ๆ ครับ ซึ่งเป็นของทางเว็บ TutsPlus นั่นเอง เชื่อว่าหลาย ๆ ท่านน่าจะรู้จักเว็บไซต์นี้กันดีครับ เป็นเว็บที่ให้ความรู้หลาย ๆ แขนงทั้งทำเว็บไซต์ เว็บดีไซน์ กราฟฟิกดีไซน์ ตัดต่อภาพ WordPress และอื่น ๆ อีกมากมาย

ปกติ TutsPlus จะมีส่วน Premium คือต้องจ่ายเงินเป็นรายเดือน / รายปี แล้วจะได้อ่านเนื้อหาพิเศษ สอนเป็นวีดิโอเลย คราวนี้ก็เป็นโอกาสอันดีที่เค้าแจกฟรีให้เราเรียน 1 คอร์ส นั่นก็คือคอร์ส Learn jQuery in 30 Days หรือ เรียนรู้ jQuery ใน 30 วัน

วิธีการสมัครก็ง่ายมาก:

1. เข้าไปกรอกอีเมลเราที่หน้า Learn jQuery in 30 Days แล้วยืนยันอีเมล
2. ระบบจะส่งอีเมลมาทุกวัน เป็นวีดิโอวันละ 1 ตอน แต่เราไม่ต้องเข้าไปดูทุกวัน รอเสาร์อาทิตย์แล้วเข้าไปดูทีเดียว 5 ตอนก็ได้

ผมลองไปนั่งเรียนมา 3 ตอนแล้ว สอนดี แนะนำให้ไปลงกันครับ เป็นภาษาอังกฤษก็จริงแต่เค้าพูดช้า เข้าใจง่ายครับ ถึงไม่เก่งภาษาอังกฤษก็อยากให้ลองไปเรียนดูก่อนครับผม

หากตรงไหนไม่เข้าใจยังไงไปโพสถามใน Facebook Page ของเราได้นะครับ เพราะผมก็คงนั่งเรียนจนจบคอร์สเหมือนกันครับ

สวัสดีครับ กลับมาอัพเดทอีกครั้งหลังจากทิ้งช่วงไปสักพัก ก็ต้องขออภัยด้วยนะครับ อย่างไรก็ตามหน้า Fanpage ของ DesignIL มีการอัพเดทบทความน่าสนใจอยู่ตลอดเวลานะครับ ท่านใดสนใจเรื่องเว็บดีไซน์ ไม่ว่าจะเป็นมือใหม่หัดดีไซน์เว็บไซต์ หรือมือเทพก็แล้วแต่ อยากให้ลองไปเยี่ยมเยียนกันสักครั้ง กด Like กันสักหน่อยก็จะดีมากครับ (แต่ไม่กดก็ไม่เป็นไรนะ)

วันนี้จะมาพูดถึงว่า Front End Developer (นักพัฒนาด้านหน้าเว็บไซต์) และ Web Designer (นักออกแบบเว็บไซต์) ควรจะเรียนรู้เรื่องอะไรบ้างสำหรับใช้ทำงาน เพื่อให้คนที่อยากทำงาน หรือทำงานสายนี้อยู่ ได้เข้ามาอ่านกันว่ามีอะไรตัวเองยังขาดความรู้ด้านไหนไปอีกครับ

โพสนี้ได้รับแรงบันดาลใจมากจาก ImpressiveWebs ครับผม เค้าลิสต์เอาไว้เยอะมาก ๆ ส่วนผมจะเอามาพูดถึงเฉพาะอันที่สำคัญ ๆ และอธิบายคร่าว ๆ ให้ฟังกันครับ

Front-End Developer ควรรู้อะไรบ้าง

หลายคนอาจจะไม่ชินกับศัพท์คำนี้ (Front-End Developer) จะอธิบายให้ฟังกันก่อนนะครับ

การทำเว็บไซต์เว็บนึงแบ่งได้ง่าย ๆ เป็น 2 ส่วน คือ Front-End (สิ่งที่แสดงผลบนบราวเซอร์ คือ HTML, CSS, Javascript) กับ Back-End (ส่วนประมวลผล หรือโปรแกรมมิ่งนั่นเอง เช่น PHP, Ruby)

เพราะฉะนั้น Front-End Developer จะเป็นคนที่สามารถเขียน HTML, CSS และ Javascript ได้คล่องเพื่อทำให้การแสดงผลบนเว็บบราวเซอร์ออกมาสวยครับ คนที่ทำงานด้านนี้อาจจะดีไซน์เว็บไซต์ได้ดีด้วย (หรืออาจทำไม่ได้เลยก็ไม่แปลกครับ) เช่นเดียวกับ Web Designer ที่ถ้าทำงาน Front-End ได้ด้วยก็จะหรูมาก แต่ทำไม่ได้ก็ไม่ผิดอะไรครับ

มาดูกันว่าสิ่งที่ควรรู้มีอะไรบ้าง

• HTML4 / XHTML / HTML5
  HTML4 กับ XHTML จะคล้าย ๆ กัน ส่วน HTML5 ก็จะเปลี่ยนไปในระดับนึงครับ
• CSS2 / CSS3
  CSS2 นี่ต้องรู้ครับ ส่วน CSS3 ถ้ารู้ไว้ก็ดี แต่ถึงไม่รู้ก็ยังทำงานได้ครับ
• Javascript / jQuery
  jQuery เป็น Library ของ Javascript ที่จำเป็นต้องรู้ครับ เรียนรู้ได้ง่าย + ใช้ดีมาก ส่วน Javascript แบบสด ๆ ถ้าเขียนเป็นก็ดี แต่ถ้าเขียนไม่เป็นก็ไม่ต้องฝืนครับ
• CSS Framework / CSS Grid Framework / CSS Reset
  พวก Framework นี่ไม่รู้ก็ไม่เป็นไรครับ แต่ว่าง ๆ อาจจะหามาลองใช้สักตัว เพราะถ้าใช้คล่องจะประหยัดเวลาชีวิตไปได้เยอะเลยครับ ส่วน CSS Reset นี่ต้องรู้ครับ
• UX (User Experience) / Usability
  เป็นเทคนิคในการทำเว็บให้ใช้ง่าย และคิดถึงผู้ใช้ครับผม หากไม่ทราบว่ามันคืออะไรแนะนำให้อ่านบทความ UX User Experience คืออะไร เป็นสิ่งที่ควรรู้จริง ๆ ครับ
• Website Speed / Performance Optimization
  หมายถึงการทำให้เว็บไซต์โหลดได้เร็วนั่นเองครับ เดี๋ยวนี้ Google จัดอันดับโดยคำนึงถึงความเร็วการโหลดเว็บไซต์ด้วยนะครับ
• Web Developer Tool / Firebug
  ควรจะศึกษาปลั๊กอินของเว็บบราวเซอร์ที่เอาไว้ช่วยทำเว็บไซต์ครับ ซึ่งทั้ง Firefox ทั้ง Chrome ก็มีปลั๊กอินดี ๆ เยอะแยะเลย สำหรับท่านที่ไม่รู้ว่ามีอะไรบางแนะนำให้อ่านบทความ รวมปลั๊กอิน Firefox เด็ด ๆ สำหรับทำเว็บไซต์ ครับผม
• Responsive Web Design
  เป็นเทคนิคใหม่ในการโค้ดเว็บไซต์ให้ Layout สามารถปรับเท่าขนาดจอได้ครับ คือเปิดในคอมหรือเปิดในมือถือก็ยังสามารถอ่านเนื้อหาได้ง่ายโดยไม่ต้องสร้างเว็บสำหรับ Mobile แยกออกมา
• Mobile Website Development
  หมายถึงการทำเว็บไซต์ใหม่สำหรับมือถือเลย โดยถ้าคนเข้าเว็บไซต์เราผ่านมือถือก็จะถูก redirect ไปยัง URL เว็บไซต์เวอร์ชั่นมือถือนั่นเอง เทคนิคนี้จะทำให้เราควบคุมการแสดงผลหน้าเว็บเวอร์ชั่นมือถือได้ดีกว่าเทคนิค Responsive Enhancement แต่ก็แลกกับเวลาที่ต้องทำหน้าเว็บใหม่
• Cross-Browser / Cross-Platform Development / Cross-Browser Bug (IE6)
  เป็นกรรมของคนทำเว็บไซต์ที่ 1 เว็บไซต์สามารถเปิดได้จากหลายทางเหลือเกิน ทั้ง Firefox, Chrome, Opera, Safari, iPhone, Blackberry etc. ซึ่งการทำให้สวยบนบราวเซอร์เดียวเป็นเรื่องง่าย แต่การทำให้สวยบนทุกบราวเซอร์นี่ยากเหลือเกิน โดยเฉพาะคู่ปรับอันดับ 1 อย่าง Internet Explorer 6 อย่างไรก็ตาม หากเจอปัญหากับ IE แนะนำให้อ่านบทความ เทคนิคสู้รบกับ IE6 IE7 IE8 ครับ
• CSS Preprocessor (LESS / SASS)
  หลายคนอาจเคยได้ยินชื่อ LESS CSS ผ่านหูมาบ้างนะครับ เป็นการเขียน CSS แบบผสมเทคนิคโปรแกรมมิ่งเข้าไปด้วย เช่น เก็บค่า Property ไว้ในตัวแปรแล้วนำมาใช้หลาย ๆ ที่ พอจะแก้ก็แก้ที่ตัวแปรอย่างเดียวพอ ว่าง ๆ จะนำมาเขียนวิธีใช้ให้อ่านกันครับ
• HTML5 Javascript API
  HTML5 ได้เพิ่มความสามารถมากมาย ทั้งการเล่นเพลง เล่นวีดิโอ การวาดรูป การจับที่อยู่ผู้ใช้ ซึ่งเทคนิคพวกนี้ถ้ารู้เอาไว้จะได้เปรียบมากครับ แทนที่เราจะพึ่ง Javascript Library หรือ Flash ในการทำพวกนี้ แนะนำให้ลองหันมาดู HTML5 บ้างครับ แนะนำให้อ่านบทความ ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 ครับผม
• CMS Theme (WordPress, Drupal, Joomla)
  CMS หมายถึงระบบจัดการเว็บสำเร็จรูปทั้งหลายครับ ซึ่งเว็บของเรา (designil.com) ก็ใช้ WordPress อยู่ การเรียนรู้วิธีทำธีมของ CMS ชื่อดังจะทำให้มีโอกาสด้านการหางานเพิ่มขึ้นไปอีกครับ โดยเฉพาะ WordPress มีการซื้อ-ขายธีมกันเยอะมาก
• Font Embedding (@font-face, Cufon, Google Web Font)
  เทคนิคในการใส่ฟ้อนต์หน้าตาประหลาด ๆ ไปใช้บนเว็บไซต์นี่สำคัญมากครับ ซึ่งก็มีหลาย ๆ เทคนิคให้เลือกใช้ หนึ่งในนั้นคือ Google Web Font ซึ่งเคยนำเสนอวิธีใช้กันไปในบทความ Google Font API คืออะไร ลองไปอ่านกันดูนะครับ ใช้ง่ายมาก ๆ เลย
• SEO (Search Engine Optimization)
  SEO คือ เทคนิคการทำเว็บไซต์ให้ Search Engine ชอบ (หลัก ๆ คือ Google) ซึ่งก็มีเทคนิคหลาย ๆ แบบทั้งสายมืดและสายสว่างครับ อย่างน้อยเราควรจะรู้พื้นฐาน SEO นิดหน่อยเพื่อให้เว็บไซต์ออกมาแล้ว Search Engine ไม่รังเกียจ สำหรับท่านที่ใช้ WordPress ลองอ่านบทความ เทคนิคจูน SEO ของ WordPress ให้เทพ ดูครับ รับรองว่ามีประโยชน์แน่นอน

หัวข้อต่าง ๆ ที่ลิสต์ไว้ได้ลองกันหมดหรือยังครับ ถ้าลองหมดแล้วและทำได้ดีทุกอัน ยอมรับว่าความสามารถด้าน Front-End ของคุณอยู่ในระดับสูง หางานได้สบายเลยครับ

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

ตอนนี้หากท่านใดติดตามข่าวสารเว็บดีไซน์ใหม่ ๆ จะเห็นว่ามีเทคนิค HTML5, CSS3 เท่ ๆ ใช้งานง่าย ๆ ออกมาเยอะมาก  โดยเฉพาะ CSS3 นี่น่าจะเป็นสวรรค์ของ Web Designer อย่างเรา ๆ กันเลย

ท่านใดที่ไม่ค่อยได้ติดตามข่าวสารเกี่ยวกับการออกแบบเว็บไซต์ใหม่ ๆ แนะนำให้แวะไปที่ Fanpage ของ DesignIL ครับ ผมจะนำบทความที่น่าอ่าน หรือของฟรีดี ๆ เอามาแจกกันเรื่อย ๆ ครับ

จนถึงตอนนี้ ศัตรูอันยาวนานของนักออกแบบเว็บไซต์ ที่ชื่อว่า Internet Explorer 6 ก็ยังตามรังควานเราอยู่ครับ แน่นอนว่าด้วยความเก่าของมัน มันจึงไม่รองรับ HTML5, CSS3 เท่ ๆ ที่เราอยากใช้เลยครับ (แค่ CSS 2 ก็เรนเดอร์แปลกกว่าชาวบ้านแล้ว)

บทความนี้จึงเขียนขึ้นมาโดยรวบรวมจากทั้งประสบการณ์ และบทความต่าง ๆ ที่ผมได้อ่าน เพื่อใช้วางแผนต่อสู้กับ IE เวอร์ชั่นเก่า ๆ ครับ เพราะเว็บบราวเซอร์ (Web Browser - โปรแกรมที่ใช้เปิดเว็บไซต์) ตระกูล Internet Explorer นี่จะเริ่มรองรับ HTML5 กับ CSS3 จริง ๆ จัง ๆ ที่ IE9 นู่นเลย

ผมจะเขียนโดยแบ่งเป็น 2 ตอนครับ ตอนที่ 1 นี้จะเปิดเผยเทคนิค CSS, Javascript และวิธีการเช็คหน้าเว็บที่เรนเดอร์ใน IE เวอร์ชั่นเก่า ๆ ว่าเน่าไม่เน่ายังไงบ้าง ส่วนตอนที่ 2 จะพูดถึงการจัดการลูกค้าที่ต้องการให้เว็บรองรับ IE เวอร์ชั่นเก่าครับ (โดยเฉพาะ IE6)

เคลียร์สนามรบด้วย CSS Reset

หลาย ๆ คนอาจจะทราบกันอยู่แล้วว่า Web Browser แต่ละตัวเนี่ยจะกำหนด CSS พื้นฐานไม่เหมือนกัน เช่น Google Chrome อาจจะกำหนดขนาดฟ้อนต์เริ่มต้นไว้ใหญ่กว่า Internet Explorer(สมมตินะครับ)

CSS Reset เป็นชื่อที่เราใช้เรียกไฟล์ CSS ที่รวมกฎพื้นฐานต่าง ๆ เพื่อจะไปเขียนทับกฎพื้นฐานของแต่ละบราวเซอร์ ทำให้ทุกบราวเซอร์ใช้กฎ CSS พื้นฐานชุดเดียวกันนั่นเอง

โดยไฟล์ตระกูล CSS Reset ก็มีออกมาของหลายเจ้าให้เลือกใช้ครับ อันที่ดัง ๆ ที่คนใช้กันบ่อย ๆ คือEric Meyer CSS Reset (ปกติผมใช้ตัวนี้), HTML5Doctor, Blueprint Reset.css (Blueprint เป็น CSS Framework ที่ดังมาก ๆ) เลือกใช้กันได้ตามสะดวกเลยครับ

ปิดจุดอ่อนของ IE6 ด้วย IE9.js

อันนี้เป็นเครื่องมือที่อยากแนะนำมากครับ เป็น Javascript ที่ช่วยแก้บั๊ก HTML, CSS บางส่วนของ IE6-8 ที่เราเจอกันประจำ (โดยเฉพาะ IE6) และยังเอาไว้แก้ปัญหา PNG พื้นหลังไม่ใสใน IE6 ได้ด้วยครับ สรุปว่าโปรเจคไหนที่ลูกค้าอยากให้ซัพพอร์ท IE เวอร์ชั่นเก่าแนะนำให้แปะอันนี้ไปก่อนเลย

เดิมทีสคริปต์นี้ชื่อ IE7.js ครับ เอาไว้ทำให้ IE6 เรนเดอร์เว็บไซต์ออกมาใกล้เคียงกับ IE7 ซึ่งคนเขียนเค้าได้พัฒนาต่อมาเป็น IE8.js และ IE9.js ตามลำดับครับ ให้เลือกใช้อันใดอันหนึ่งเท่านั้นนะครับ ผมแนะนำให้ใช้ IE9.js ไปเลย จะได้เรนเดอร์ออกมาดีที่สุดครับ

สามารถดาวน์โหลดได้ที่ Google Code: IE7.js เลยครับ อยากได้ IE8 หรือ IE9 ก็โหลดได้จากในเว็บนั้นเลย อย่าลืมอ่านตรงหัวข้อ Usage ด้วยครับ เป็นการอธิบายวิธีใช้ให้ถูกต้อง

สอน IE เก่า ๆ ให้เรนเดอร์ CSS3 ด้วย Library ต่าง ๆ

ปัจจุบันมีสคริปต์ต่าง ๆ ที่ช่วยให้ IE เวอร์ชั่นเก่าแสดงผล CSS3 ได้ออกมาหลายตัวด้วยกันครับ ผมจะแนะนำตัวที่น่าสนใจให้นำไปลองใช้ดูกันครับ

CSS3PIE เป็นเครื่องมือสำหรับทำให้ IE6-8 เรนเดอร์ CSS3 สวย ๆ ต่าง ๆ ได้ครับ เช่น border-radius (ทำกรอบมน) ที่หลาย ๆ คนชอบใช้กัน ลองดู ฟังก์ชั่นที่ CSS3PIE รองรับ กันก่อนเลยครับ

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

cssSandPaper เป็นสคริปต์ที่รวมฟังก์ชั่น CSS3 ให้เรนเดอร์ใน IE เวอร์ชั่นเก่าได้เช่นกัน โดยมีข้อดีที่แตกต่างจากอันอื่น คือ มันรองรับ CSS3 Transform ด้วย (เอาไว้หมุน ๆ ครับ) ซึ่งสามารถเอาไปใช้พลิกแพลงได้เยอะมากครับสำหรับฟังก์ชั่นนี้

รวมวิธีดูหน้าเว็บไซต์เรนเดอร์ใน IE เวอร์ชั่นเก่า

มาถึงปัญหาสำคัญสำหรับคนเขียน HTML/CSS กันเลยครับ ว่าจะเช็คหน้าเว็บไซต์ใน Internet Explorer เวอร์ชั่นเก่า ๆ ได้ยังไงในเครื่องที่ IE เป็นเวอร์ชั่น 8 เวอร์ชั่น 9 กันแล้ว หรือแม้แต่ใน Mac OS ที่ไม่มี IE ใช้ (จริง ๆ มี IE5 for Mac นะครับถ้าจำไม่ผิด)

ลองดูกันว่ามีวิธีไหนน่าสนใจบ้างในการดูเว็บไซต์เราว่า เปิดใน IE เวอร์ชั่นเก่าแล้วจะเน่ามั้ย

เครื่องมือที่หลาย ๆ คนน่าจะเคยใช้กัน น่าจะเป็น IETester และ MultipleIE ครับ ซึ่งจะมีปัญหาตรงที่เรนเดอร์ได้ไม่ตรงตามจริงครับ หลายท่านอาจจะเคยเจอปัญหานี้มากับตัวแล้ว จึงไม่แนะนำให้ใช้ครับ อีกอย่างคือ Javascript Engine ที่ใช้จะไม่ตรงตามจริงครับ ทำให้เวลาเทสพวก Interaction อาจไม่ตรงกับบราวเซอร์จริง

โปรแกรมที่แนะนำ คือ  IE Collection ครับ การใช้งานจะเหมือนกับ MultipleIE คือเลือกลง Internet Explorer เวอร์ชั่นที่เราต้องการทดสอบได้เลย โดยมีให้ลงตั้งแต่ IE 1.0 เลยทีเดียว (แต่ใครจะไปลงละนั่น) นอกจากนั้น Javascript Engine ที่ใช้ก็เป็นตัวต้นฉบับ ทำให้แน่ใจได้ว่าเรนเดอร์ได้ตรงตามจริง และตรวจเช็ค Interaction ได้ตามจริงเลยครับ

ถ้าเราต้องการเทสเว็บไซต์แบบต้องการแค่ดูว่าเรนเดอร์ออกมาแล้วเป็นอย่างไร ไม่สนใจเรื่อง Interaction บนเว็บไซต์ แนะนำให้ใช้ Browserlab ของ Adobe ครับ อันนี้จะเป็นเครื่องมือออนไลน์สำหรับเรนเดอร์หน้าเว็บไซต์ได้หลายบราวเซอร์ เหมาะมากสำหรับคนที่ใช้ Mac OS ด้วยครับ

สำหรับท่านที่ใช้ Windows และมี IE9 ลงอยู่ ในกรณีที่จะเทสเรนเดอร์เว็บใน IE7-8 สามารถให้Developer Tools ช่วยได้ครับ โดยเปิด IE9 แล้วกด F12 ก็จะมี Developer Tools เด้งขึ้นมา ให้คลิกตรง Browser Mode แล้วเปลี่ยนเป็น Internet Explorer 7 หรือ Internet Explorer 8 ครับ

บทความอ้างอิง และบทความต่าง ๆ ที่น่าอ่าน

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

• Reliable Cross-Browser Testing Part 1 – Smashing Magazine
• CSS Differences in Internet Explorer 6, 7, and 8 – Smashing Magazine
• CSS Reset for HTML5? – Stack Overflow

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

สวัสดีครับ เมื่อปีที่แล้วก็มาแนะนำกันไปแล้วนะครับ กับค่าย INET Young Webmaster Camp หรือ IYWC 8 ซึ่งปีนี้ก็จัดขึ้นเป็นครั้งที่ 9 แล้วครับ

ค่ายนี้จัดขึ้นเพื่อสอนน้อง ๆ นิสิตนักศึกษาให้ทำเว็บไซต์ในแบบธุรกิจจริง ๆ หรือพูดง่าย ๆ ว่า ทำเว็บไซต์ที่สร้างเงินได้ นั่นเอง โดยมีการเชิญกูรู และเจ้าของเว็บไซต์ดัง ๆ ในแวดวงออนไลน์ เช่น พี่ปอนด์ เจ้าของเว็บไซต์ Dek-D.com, พี่ป้อม เจ้าของเว็บไซต์ TARAD.com, พี่โก๋ พิธีกรรายการแบไต๋ไฮเทค, พี่เจ ผู้บริหารเว็บไซต์ Sanook.com และท่านเทพอีกหลาย ๆ ท่านที่ไม่ได้กล่าวถึงครับ

เชื่อว่าหลาย ๆ คน (รวมทั้งผม ก่อนหน้านี้) มองว่าการทำเว็บไซต์เป็นแค่งานอดิเรก ทำชิว ๆ ไม่ต้องคิดอะไรมาก ถ้าเว็บดังแล้วคงติดโฆษณาหาเงินอะไรงี้ ซึ่งความจริงถ้าได้เข้าไปในค่ายจะรู้ว่าเว็บไซต์ = ธุรกิจ อย่างนึงได้เลย ทำยังไงให้เว็บไซต์ดัง ทำยังไงให้เว็บไซต์มีรายรับหล่อเลี้ยงตัวเองได้ ครับ

YWC แบ่งเป็นสาขาอะไรบ้าง

ค่าย Young Webmaster Camp แบ่งเป็น 4 สาขา ดังนี้:

• Web Marketing – เว็บไซต์ทุกเว็บมีรายรับรายจ่ายครับ ต่อให้เป็นเว็บเล็ก ๆ ก็ต้องจ่ายค่าโดเมน ค่าโฮสติ้ง ซึ่งสาขานี้จะสอนว่าทำยังไงให้เว็บไซต์มีรายได้ โปรโมทเว็บไซต์อย่างไร โมเดลธุรกิจแบบรอแปะโฆษณาบนเว็บนี่พอมั้ย (อย่าเอาไปรวมกับวิธี Black Hat ทำเว็บปั่น SEO ติด Adsense นะครับ ค่ายเราไม่สนับสนุนให้สร้างเว็บที่ทำแต่เงิน ไม่ทำประโยชน์ให้คนเข้าครับ)
• Web Design – สาขานี้คนอ่านเว็บไซต์นี้ต้องเข้าครับ!! เว็บดีไซน์ที่ดีเนี่ยนอกจากจะสวยงามแล้ว ต้องใช้งานง่ายด้วยครับ ถ้าลองมองดูดี ๆ จะเห็นว่าเว็บที่ดีไซน์ที่ดี ทุกรายละเอียดจะมีความสำคัญครับ เช่น ทำไมต้องใช้สีโทนนี้ ทำไมต้องจัดวางเมนูนี้ไว้ตรงนี้ ทำไมต้องใช้คำ ๆ นี้บนปุ่ม มาเข้าค่ายนี้แล้วจะได้เรียนรู้เรื่องพวกนี้เพิ่มอีกเยอะเลยครับ
• Web Content – คงเคยได้ยินครับกับประโยคที่ว่า CONTENT is KING หมายความว่าเว็บไซต์ (บางประเภทนะครับ) เนื้อหาบนเว็บสำคัญกว่าส่วนอื่น ๆ ทั้งหมด เพราะทำให้คนที่เข้าติดใจ ถ้าเว็บเราทำเนื้อหาดี ใครชอบเขียนบทความ เขียนบลอค หรือเรียนคณะอักษรศาสตร์ แนะนำให้ลองมาเข้าสาขานี้ จะได้เรียนรู้ว่าเขียนบทความบนเว็บอย่างไรให้น่าสนใจครับ
• Web Programming – สาขานี้ยอดฮิตครับ ตอนผมเข้าค่ายนี้เมื่อ 2 ปีก่อน ก็เข้าสาขานี้ครับ (พอจบค่ายเลยทำให้รู้ว่าตัวเองกากดีไซน์มาก จนต้องมาเปิดเว็บนี้) ใครชอบเขียนโค้ด PHP, MySQL และอยากรู้ว่าการใช้ CMS มันดีมั้ย การทำเว็บให้รองรับคนเข้าเยอะ ๆ โดยไม่ล่มต้องทำยังไง ต้องมาเข้าค่ายนี้เลยครับ !!

ใครอ่านถึงตรงนี้แล้วสนใจอยากสมัคร มาสมัครกันได้เลยครับที่ http://www.ywc.in.th/

YWC เข้าค่ายนี้แล้วได้อะไร

รวบรวมจากประสบการณ์ของผมนะครับ ว่าทำไมถึงอยากแนะนำให้เข้าค่ายนี้

• การทำเว็บให้เป็นธุรกิจไม่ค่อยมีที่ไหนสอนหรอกครับ พวกโรงเรียนสอนคอมอย่าง NetDesign ก็จะเน้นสอนพวกเทคนิคต่าง ๆ มากกว่า เค้าไม่สอนว่าจะเอาความสามารถนี้ไปทำเงินได้ยังไง แต่ค่ายนี้สอนคุณได้เพราะกูรูที่เชิญมาแต่ละคนล้วนสร้างตัวได้จากเว็บไซต์ทั้งนั้นครับ
• ในค่ายจะมีการแบ่งเป็นหลาย ๆ ทีมแข่งกันทำเว็บไซต์ โดยทีมที่ได้รางวัลเว็บไซต์ยอดเยี่ยมจะได้เงินรางวัลถึง 10,000 บาท เพิ่งมีเงินรางวัลปีนี้ด้วย แอบอิจฉาตาร้อนครับ 55
• ฝึกการทำงานเป็นทีม โดยเฉพาะอย่างยิ่ง Web Programmer ที่ทำงานคนเดียวมาตลอด ถ้าได้มาลองทำงานเป็นทีม มี Web Marketing ช่วยทำการตลาด มี Web Designer ช่วยออกแบบเว็บไซต์ มี Web Content ช่วยเตรียมเนื้อหาให้ จะรู้ว่าผลงานจะออกมาดีกว่าทำคนเดียวหลายเท่าครับ
• ถ้าเข้าค่ายนี้จบมามีงานทำชัวร์ครับ เพราะพี่ ๆ ในค่ายที่เป็นเจ้าของเว็บไซต์ดังต่าง ๆ พร้อมรับน้อง ๆ ค่ายเข้าไปร่วมงานครับ หรือถ้าน้องคนไหนสนใจฝึกงานในบริษัทเหล่านั้น ถ้าบอกว่ามาจากค่ายนี้โอกาสได้เข้าไปฝึกงานจะง่ายขึ้นมาก ๆ
• ได้รู้ตัวเองว่าถนัดด้านไหนกันแน่ บางทีเข้าไปเป็น Web Programmer ออกมากลายเป็น Web Designer ก็มีครับ

ใครที่ยังเป็นนิสิต-นักศึกษาอยู่ รีบสมัครเลยครับ !! โอกาสดี ๆ แบบนี้ไม่มีอีกแล้ว ค่ายฟรี ถือว่าได้ไปเปิดโลกใหม่ ๆ ด้วยครับ สมัครเลยที่ http://www.ywc.in.th/

หากมีข้อสงสัยเกี่ยวกับค่ายก็ถามที่นี่ได้เลยนะครับ ^^ หรือไปถามที่ เว็บบอร์ด YWC9 ก็ได้ครับ

สวัสดีครับ วันนี้ไปเจอ Tutorial (บทความสอน) ทำ Effect ตัวหนังสือ ใน Photoshop เจ๋ง ๆ เลยเอามาแบ่งปันกัน ปกติก็เจอใน Feed เป็นธรรมดาอยู่แล้ว แต่ส่วนใหญ่คุณภาพไม่ค่อยเวิร์กแบบสุด ๆ ครับ เลยจะโพสใน @designil บน Twitter ซะมากกว่า วันนี้เจออันที่คิดว่าเด็ดจริง ๆ เลยเอามาแบ่งปันกันครับ

บทความสอนมีอยู่ 10 บทความครับ ซึ่งก็จะมีดีไซน์หลายแนว ทั้งแบบ น่ารัก สดใส ไปจนถึงแนวหรู ๆ ตัวหนังสือ 3D หรือตัวหนังสือแนวโลกอนาคต (Futuristic) เทคนิคในการตกแต่งตัวอักษรพวกนี้ ยังเอาไปใช้กับงานประเภทกราฟฟิกดีไซน์ (Graphic Design) ได้ด้วย เรียกได้ว่าอ่านทีเดียวได้ประโยชน์สองต่อเลย (แถมงานใน Tutorial นี้ก็สวยพอที่จะเอาไปใช้กับงานจริงได้สบายเลยครับ)

ไปดูกันเลยครับว่ามี Tutorial อะไรกันบ้าง:

รวม 10 บทความสอนแต่งตัวอักษรใน Photoshop

สวัสดีครับ วันนี้มีค่ายฟรี ๆ ดี ๆ มาแนะนำกันครับ สำหรับน้อง ๆ มอปลายตั้งแต่เพิ่งขึ้นม. 3 ไปจนถึงคนที่เพิ่งจบม. 6 เตรียมขึ้นมหาลัย ก็สามารถมาเข้าค่ายนี้กันได้ทุกคนครับ ^^ (คนที่เข้ามหาลัยไปแล้วก็ไม่ต้องเสียใจไปครับ เรามีค่าย YWC ที่จะจัดขึ้นในช่วงท้ายปี สำหรับเด็กมหาลัยครับ) เรามาดูกันว่าค่าย JWC3 นี้เกี่ยวกับอะไรครับ

Junior Webmater Camp 3 คืออะไร?

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

สำหรับปีที่แล้วในค่าย JWC2 เราไม่มีการแบ่งรับสมัครเป็นสาขาครับ แต่ปีนี้พิเศษหน่อยมีการแบ่งเป็น 3 สาขาดังนี้

1. Web Design – อยากดีไซน์เว็บไซต์ให้สวย ดึงดูดคนเข้า ดีไซน์อย่างไรให้เว็บออกมาดูดีและสื่อความหมายได้ดี อยากรู้ต้องสมัครเข้าสายนี้เลยครับ!
2. Web Content – เคยได้ยินมั้ยครับว่า “Content is King” เนื้อหาของเว็บเป็นส่วนสำคัญมากครับ ถ้าอยากรู้ว่าต้องเขียนอย่างไรให้น่าสนใจ คนอ่านติดงอมแงม ต้องมาสมัครสายนี้กันครับ
3. Web Marketing – การตลาดของเว็บก็สำคัญไม่แพ้ด้านอื่น ๆ เลย การทำให้เว็บมูลค่า 10,000 บาทกลายเป็น 10 ล้านบาทก็ต้องมาจากการตลาดนี่แหละ อยากรู้ความลับของสายนี้ก็ต้องสมัครกันเลย!

แต่ละสาขารับ 20 คนนะครับ ยกเว้น Web Marketing สายนี้โหดจริง ๆ รับแค่ 10 คนเท่านั้นครับ!

นอกจากนี้ยังได้พบปะพูดคุยกับเว็บมาสเตอร์ชื่อดัง และคนในวงการจากหลาย ๆ เว็บไซต์ เช่น Dek-D.com, Sanook.com, Tarad.com, Designil.com (อันหลังไม่ใช่แล้วครับ 55)

Junior Webmaster Camp 3 จัดที่ไหน เมื่อไร?

ค่ายนี้เป็นค่าย 2 วัน 1 คืน จัดขึ้นในวันเสาร์-อาทิตย์ที่ 7-8 พฤษภาคม 2554 ครับ โดยจัดขึ้นที่ มหาวิทยาลัยราชภัฏจันทรเกษม ถนนรัชดาภิเษก กรุงเทพ สำหรับน้อง ๆ ที่ต้องเดินทางมาจากต่างจังหวัดก็ไม่ต้องกลัวครับ เพราะก่อนวันค่ายจะมีบอกวิธีเดินทางมาอย่างละเอียดครับผม

สมัครค่าย Junior Webmaster Camp 3 ได้ที่ไหน?

สามารถคลิกได้ที่แบนเนอร์ด้านข้าง หรือลิงค์ด้านล่างนี้เลยครับ:

สมัครเข้าค่าย Junior Webmaster Camp 3 ที่นี่!

หากมีข้อสงสัยอะไรเกี่ยวกับค่ายนี้ สามารถไปสอบถามได้ใน เว็บบอร์ด ของค่ายได้เลยครับผม

สวัสดีครับ เนื่องจากช่วงนี้ก็ติดภารกิจอะไรหลาย ๆ อย่างเลยมาอัพช้าสักหน่อยก็ต้องขออภัยด้วยนะครับ วันนี้พอดีไปเจอเทคนิค CSS เจ๋ง ๆ โดยบังเอิญระหว่างการเล่นกับ HTML5 เลยเอามาแบ่งปันกันครับ ก่อนอื่นมาดูกันก่อนว่าบราวเซอร์มีปัญหาอะไร ทำไมถึงต้องใช้ CSS Versioning นะครับ

Web Browser ไม่ยอมรีเฟรชไฟล์ CSS?

โดยปกติแล้วเนี่ย ถ้าเราไม่สั่งให้บราวเซอร์เปิดระบบ No Cache บราวเซอร์จะทำการแคช (เก็บ) ไฟล์ CSS ไว้ (สำหรับ Firefox ผมใช้วิธีลงปลั๊กอินชื่อ Web Developer แล้วไปตั้งค่า ส่วนบราวเซอร์อื่นผมไม่ทราบครับ) ซึ่งพอเว็บบราวเซอร์แคชไฟล์ไว้จะทำให้เกิดปัญหาว่า พอเข้าเว็บไซต์เดิมอีกรอบ ก็จะทำการรีโหลดใหม่เฉพาะโค้ด HTML เท่านั้น ส่วนไฟล์ CSS จะนำมาจากที่เก็บแคชเอาไว้แล้ว

ถ้าใครเคยนั่งแก้ธีมในบลอคสำเร็จรูปอย่าง Exteen.com ก็น่าจะทราบกันดีว่า แก้ไข CSS ทีนึงก็ต้องบอกผู้อ่านที่เคยเข้าเว็บเรามาก่อนให้ทำการ Refresh แบบเคลียร์ Cache ทั้งหมด โดยการกด Ctrl+F5 ครับ เพื่อที่เค้าจะได้เห็นหน้าตา CSS ใหม่ของเรา

ทีนี้เมื่อก่อนผมก็ไม่ทราบวิธีแก้ครับ ได้แต่อัพบลอคใหม่เพื่อบอกว่าเปลี่ยนธีมใหม่แล้ว ใครยังไม่เห็นให้กดรีเฟรชแบบเคลียร์แคชเอา แต่วันนี้ไปเจอกับวิธีที่ง่ายและเจ๋งมากครับ (แต่ใช้กับที่ Exteen ไม่ได้นะครับ ต้องใช้กับเว็บที่เราแก้ HTML ได้เอง) นั่นก็คือวิธีที่เรียกว่า CSS Versioning ครับ

CSS Versioning คืออะไร และทำอย่างไร

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

สมมติว่าโค้ด HTML ที่เอาไว้เรียกไฟล์ CSS ในส่วน <head> ของเราเป็นแบบนี้นะครับ:

<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />

สังเกตตรง href=”css/style.css” นะครับ เราก็แก้ส่วนนี้เป็นแบบด้านล่างเลยครับ (ตรง … ไม่ต้องสนใจครับ)

<link ... href="css/style.css?v=1001" />

ใช่แล้วครับ แค่เติม ?v=เลขเวอร์ชั่น เข้าไปด้านหลังชื่อไฟล์ CSS ก็เป็นการตั้งเวอร์ชั่นได้แล้ว

อย่างไรก็ตาม ไม่จำเป็นต้องใช้ v=เลขเวอร์ชั่น เสมอไปนะครับ อาจใช้เป็น d=เลขเวอร์ชั่น หรือ ver=เลขเวอร์ชั่น พูดง่าย ๆ ว่าเขียนตัวอักษรอังกฤษตัวไหนก็ได้หมดครับ ขอแค่ตามหลัง ? ก็พอ

ซึ่งตรง เลขเวอร์ชั่น ก็ไม่ได้กำหนดว่าต้องเป็น 1, 2, 3, 4, … นะครับ เราจะเริ่มจาก 1001 แบบที่ผมเขียนในตัวอย่างก็ได้ ขอแค่ว่าพอเราแก้ไข CSS เสร็จแล้วอยากให้ Web Browser ของคนเข้าอัพเดท CSS อัตโนมัติ ก็แก้เป็นเลขที่ไม่ซ้ำจากเดิมครับ เช่น 1002

*อ่านด้านล่างต่อนะครับ มีอัพเดทวิธีการทำให้เลขเวอร์ชั่นเปลี่ยนเองได้*

แค่นี้ทุกครั้งที่เราอัพเดท CSS คนเข้าก็จะเห็น CSS ใหม่แล้วครับ โดยสิ่งที่เราต้องทำก็แค่แก้เลขเวอร์ชั่นจุดเดียวเท่านั้นเอง

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

UPDATE วิธีที่ไม่ต้องมานั่งแก้ตัวเลขเวอร์ชั่นเอง

เนื่องจากว่า @dtinth แนะนำเทคนิคดี ๆ มาทางทวิตเตอร์ครับ โดยเป็นการใช้โค้ด PHP ในการตั้งเลขเวอร์ชั่น = วันเวลาที่อัพเดทไฟล์ CSS โดยอัตโนมัติครับ ซึ่งเทคนิคนี้จะใช้ได้เฉพาะกับไฟล์ PHP เท่านั้นนะครับผม โค้ดด้านล่างสามารถก็อปไปแปะใช้ได้เลยครับ

<link ... href="style.css?v=<?php echo filemtime('style.css'); ?>" />

ขอบคุณ @dtinth สำหรับเทคนิคดี ๆ ครับ

ถ้าใครเคยใช้สินค้าของ Apple มาก่อนน่าจะพอทราบกันนะครับว่าบริษัทนี้เน้นเรื่องการ ดีไซน์ มาเป็นอันดับต้น ๆ เลย ไม่ว่าจะเป็นสินค้าต่าง ๆ อย่าง Macbook หรือ iPhone ก็มีการดีไซน์ที่แม้จะเรียบง่าย แต่ก็ออกมาดูดี และใช้งานได้ดี

ผมเองเคยใช้ Macbook มาแล้วหลายปีอยู่ (และไม่ได้ใช้แล้วครับ พังไปซะก่อน) ก็พบว่าตัว Software ของ Mac OS มีการดีไซน์ที่ดีมากครับ ก่อนจะใช้ Macbook ตัวนี้ผมก็ใช้ Windows มาก่อน พอมาเทียบกันพบว่าโปรแกรมใน Mac OS ดีไซน์ได้เรียบง่ายและน่าใช้กว่ามากครับ แค่อินเตอร์เฟซก็กินขาดแล้ว

อันนี้ให้เป็นความรู้เผื่อใครจะสนใจซื้อ Mac สักเครื่องมาใช้ครับ สำหรับ Software ออกแบบเว็บไซต์ หรือเอาไว้เขียนโค้ด HTML / CSS ในงานเว็บดีไซน์ มีโปรแกรมที่น่าสนใจดังต่อไปนี้เลยครับ เท่าที่ผมเคยใช้นะครับ:

• Coda – เขียนโค้ด PHP/HTML/CSS โปรแกรมตัวนี้มี Autocomplete มี File Explorer มี FTP พร้อม
• Espresso – เขียนโค้ด PHP/HTML/CSS โปรแกรมนี้จะเน้นทำงานเป็น Project มี Autocomplete มี File Explorer แต่ FTP ของโปรแกรมนี้ใช้ยากสักหน่อยครับ
• CSSEdit – เขียนโค้ด CSS โปรแกรมช่วยเขียน CSS โดยเฉพาะ จากเจ้าเดียวกับที่ทำ Espresso ครับ

ถ้าคลิกเข้าไปดูจะเห็นว่าความสามารถและการดีไซน์อินเตอร์เฟซแต่ละโปรแกรมน่าใช้กันสุด ๆ เลย แต่ความจริง (ที่น่าเศร้า) ของพวกนี้คือ มันเป็นโปรแกรมเสียตังค์ทั้งหมดเลยครับ T_T

พวกโปรแกรมบน iPhone อินเตอร์เฟซนี่บางแอพก็ดีไซน์ออกมาได้ดีมากครับ ตัวอย่างเช่นโปรแกรมจดโน้ตชื่อ AwesomeNote เป็นโปรแกรมจดโน้ตที่ผมชอบมาก พอจดโน้ตในโปรแกรมสวย ๆ แล้วมันมีความสุขครับ

วันนี้ผมรวบรวมเว็บไซต์ที่ขาย App ของ iPhone และ iPad สวย ๆ มาให้ชมกันครับ พวกนี้นอกจากแอพจะมีอินเตอร์เฟซน่าใช้แล้ว เว็บไซต์ขายแอพก็ดีไซน์ออกมาได้ดีด้วย ลองคลิกเข้าไปดู รับรองว่าต้องเจอเว็บที่ถูกใจอย่างน้อยสองสามเว็บแน่นอนครับ

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

ฟ้อนต์ชื่อ Comic Sans คิดว่าคนส่วนใหญ่ต้องเคยได้ยิน หรือเคยใช้กันมาอยู่แล้วครับ ฟ้อนต์น่ารัก ๆ ที่ติดมากับ Windows ตัวนี้ตอนเด็ก ๆ ที่ผมทำรายงานก็ชอบใช้เหมือนกันครับ มันอ่านแล้วสบายตา แล้วก็ให้ความรู้สึกแบบชิว ๆ ดีด้วยครับ

สำหรับสาเหตุที่มาเขียนบทความนี้ เพราะหลงเข้าไปเจอเว็บ Comic Sans Criminal มาครับ เป็นเว็บไซต์อธิบายว่า ทำไมเราถึงควรเลิกใช้ฟ้อนต์ Comic Sans

ประวัติ: Comic Sans Font เกิดขึ้นมาได้ยังไง

ฟ้อนต์ตัวนี้เกิดขึ้นมาจากฝีมือของพนักงานตำแหน่ง Typographic Engineer ใน Microsoft ครับ โดยเป็นคนเดียวกับที่ดีไซน์ font ชื่อ Trebuchet กับ Magpie สำหรับฟ้อนต์สุดแอ๊บแบ๊วตัวนี้เขาสร้างขึ้นมาเพราะอยากได้อะไรง่าย ๆ ที่มีส่วนโค้ง และให้ความรู้สึกนุ่มนวล ไม่แข็งกระด้างแบบ Times New Roman

ตอนแรกฟ้อนต์นี้ถูกโยนลงถังขยะเนื่องจากปัญหาด้านความสามารถของโปรแกรมในขณะนั้น เพราะฟ้อนต์นี้ไม่สามารถวางลงบนกริดได้ แต่หลังจากนั้นไม่นานก็ได้มีการถูกนำไปใช้กับโปรแกรม Microsoft Movie Maker เวอร์ชั่นแรก และถูกรวมเข้าไปเป็นฟ้อนต์ที่มากับ Windows ตั้งแต่ Windows 95

หลังจากนั้นเป็นต้นมา คนเริ่มแห่กันมาใช้ฟ้อนต์นี้ในงานหลายแบบ แต่ยิ่งคนใช้เยอะขึ้น คนชอบมากขึ้น คนที่เกลียดก็มากขึ้นตามไปด้วย…

(เล่าแล้วเหมือนดราม่าเลยครับ 55)

ทำไมดีไซเนอร์ถึงไม่ชอบฟ้อนต์ Comic Sans

ในช่วงแรกการดีไซน์บนคอมพิวเตอร์ยังไม่มีใครสนใจเรื่องการเลือก Font มากนักครับ ต่างกับตอนนี้ที่เรื่อง Typography เป็นเทรนด์เว็บดีไซน์อันดับต้น ๆ ของปี 2011 เลยทีเดียว

ต้องบอกก่อนว่าฟ้อนต์ Comic Sans นี่ออกแบบมาสำหรับ:

• ใช้ในกล่องคำพูดของตัวการ์ตูน
• ใช้สำหรับเด็กโรงเรียนประถม อนุบาล
• บัตรเชิญเด็ก ๆ มางานปาร์ตี้ของลูกตัวน้อย

แต่มันดันแพร่หลายมาก ๆ จนถูกนำไปใช้สำหรับโรงพยาบาล โบสถ์ ออฟฟิส ร้านอาหาร และข้อมูลต่าง ๆ ที่เป็นข้อมูลค่อนข้างซีเรียส เลยทำให้กลุ่มดีไซเนอร์ที่ให้ความสำคัญกับการใช้ Font ในการออกแบบมาก ๆ เกิดรับไม่ได้ครับ ต้องมาจัดแคมเปญต่อต้านการใช้ฟ้อนต์ Comic Sans กัน

อย่างไรก็ตาม ก็ปฏิเสธไม่ได้ว่าการต่อต้านของเค้าค่อนข้างมีเหตุผลครับ ลองมาดูตัวอย่างว่า Comic Sans ไม่เหมาะกับงานแบบไหน

จากรูปด้านบนเป็นการเปรียบเทียบระหว่างการใช้ฟ้อนต์ Comic Sans กับฟ้อนต์ที่ควรจะใช้จริง ๆ ครับ จะเห็นได้ว่าฟ้อนต์ Comic Sans ให้ความรู้สึกน่ารัก ๆ และไม่ทำให้เรารู้สึกว่าควรต้อง STOP เท่ากับป้ายด้านขวาที่ใช้กันตามปกติ

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

เว็บ Comic Sans Criminal นี่เกลียดฟ้อนต์นี้ถึงขนาดมีแนะนำ ฟ้อนต์แนวการ์ตูนน่ารัก ๆ ตัวอื่น ๆ ที่น่าใช้ให้ด้วยเลยครับ คนจะได้เลิกใช้ Comic Sans กัน ถ้าคุณเห็นด้วยก็ลองไปเช็คดูในเว็บไซต์ของเค้าได้ครับว่าจะใช้ฟ้อนต์ไหนแทนดี

สรุปว่าเราควรใช้ฟ้อนต์ Comic Sans มั้ย

ฟ้อนต์ Comic Sans ไม่ใช่ฟ้อนต์ที่ออกแบบมาแย่ครับ มันเป็นฟ้อนต์ที่ออกแบบมาดี และเหมือนกับฟ้อนต์ทั่ว ๆ ไปที่ต่างก็มีที่อยู่ที่เหมาะสมของมันครับ เราแค่ต้องเลือกใช้ให้ถูกกับงานเท่านั้น

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

อ่านแล้วคิดเห็นยังไงโพสคอมเม้นท์ไว้เลยครับ อยากทราบความคิดเห็นที่ทุกท่านมีต่อฟ้อนต์นี้ครับ

วันนี้ไปเจอของดีเลยเอามาแจกฟรี ๆ กันครับ เป็นไฟล์ PSD (สำหรับใช้ในโปรแกรมโฟโต้ช็อปนั่นเอง – อ่านบทความเกี่ยวกับการดีไซน์เว็บไซต์บนโฟโต้ช็อปที่ Photoshop) สำหรับเว็บดีไซเนอร์อย่างเรา ๆ ก็คงใช้ชีวิตอยู่กับ Adobe Photoshop / Illustrator วันละหลายชั่วโมงกันอยู่แล้ว ซึ่งบางครั้งเวลาเราอยากได้ส่วนแปลก ๆ ก็ต้องนั่งดีไซน์กันเอง หาบรัชหรือ Shape สำเร็จรูปมาใช้ไม่ได้

ลิสต์เว็บไซต์ที่ผมจะแจก เป็นเว็บไซต์ที่แจกไฟล์ PSD ให้โหลดกันไปใช้ดีไซน์หน้าเว็บไซต์ฟรี ๆ ครับ โดยมีทั้งหน้าเทมเพลตเว็บไซต์สวย ๆ (โดยบางอันเป็นเทมเพลตที่มีการทำเป็น Theme WordPress ของจริงมาแล้ว) และส่วนประกอบเว็บไซต์เล็ก ๆ เช่น ปุ่ม พื้นหลัง กล่องใส่ข้อมูล และอื่น ๆ อีกมากมาย อันนี้ต้องไปลองค้น ๆ ก้นดูครับ

โดยครั้งนี้แจกกันกว่า 30 เว็บไซต์ ให้ไปนั่งดาวน์โหลดกันจนปวดมือเลยทีเดียวครับ รีบคลิกลิงค์ด้านล่างกันได้เลย!

30+ เว็บไซต์สำหรับดาวน์โหลดไฟล์ Photoshop