สวัสดีครับ กลับมาอัพเดทอีกครั้งหลังจากทิ้งช่วงไปสักพัก ก็ต้องขออภัยด้วยนะครับ อย่างไรก็ตามหน้า 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 ของคุณอยู่ในระดับสูง หางานได้สบายเลยครับ

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

สวัสดีครับ วันนี้ไปเจอ 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 สำหรับเทคนิคดี ๆ ครับ

สไลด์นี้เก็บตกมาจากงาน WPDevNight ครับ เป็นงานพบปะพูดคุยของคนทำเว็บไซต์ด้วย WordPress ครับผม (เว็บไซต์นี้ก็รันบน WordPress เหมือนกันครับ) โดยเนื้อหาจะเน้นเกี่ยวกับคนที่ “ทำ” เว็บไซต์ หรือ Web Developer ครับ ถ้าใครที่เป็นคนเขียนบลอคเฉย ๆ ไม่มีความรู้พวก HTML CSS PHP นิดหน่อยอาจงง ๆ ได้ครับ

สำหรับเนื้อหางานสามารถตามไปอ่านได้ที่ลิงค์เว็บไซต์หลักด้านบนได้เลยครับ ใครที่พลาดงานนี้ไปเอาไว้เจอกันใน Wordcamp (งานที่รวมทั้ง Developer & Blogger ที่ใช้ WordPress มาพูดคุยกัน) ครับผม

ผมเองก็พลาด WPDevNight เหมือนกัน แต่ไม่เป็นไรครับ ดีที่งานนี้ใช้การเขียนสิ่งที่บรรยาย (อาจจะไม่หมด) เข้าไปในเว็บ Smallpad.org ซึ่งเปิดให้ทุกคนสามารถเข้าไปอ่านได้ครับ มาดูกันเลยครับว่ามีอะไรที่น่าอ่านกันบ้าง

1. Web Design Business with WordPress

เปรียบเทียบ WordPress กับ CMS ตัวอื่น ๆ, วิธีการทำให้ลูกค้าเข้าใจเกี่ยวกับ CMS, ข้อดีของ WordPress, รูปแบบเว็บไซต์ที่ควรใช้ WordPress ทำ อ่านเนื้อหา Web Design Business with WordPress

2. WordPress Showcase & Plugin

รวมปลั๊กอินเวิร์ดเพรสต่าง ๆ ที่น่าสนใจ โดยแบ่งเป็นหมวดหมู่ และถ้าที่ลิสต์เอาไว้มีไม่พอ ก็มีลิงค์ให้ตามเข้าไปดูคลังปลั๊กอินเจ๋ง ๆ รวบรวมโดย @iannnnn ครับผม อ่านเนื้อหา WordPress Showcase & Plugin

3. WordPress Theme Design

สอนทำธีม WordPress โดยพูดถึง CSS และ Template Tag สำคัญ ๆ ต่าง ๆ ในธีม WP ดูสไลด์ได้ด้านล่างเลยครับผม อ่านเนื้อหา WordPress Theme Design

4. Interview with @ipeerapong

เชื่อว่าเว็บดีไซเนอร์หลาย ๆ คนที่ติดอกติดใจกับ WordPress น่าจะรู้จักเว็บไซต์ themeforest.net บ้างครับ เป็นเว็บไซต์ขายธีม WP ที่ใหญ่และคุณภาพดีมากเว็บหนึ่ง แล้วก็เคยมีการเอา Theme WordPress มาเซลล์ด้วย

ผมเคยได้ยินมาบ้างว่ามีคนไทยไปขายอยู่ด้วย ซึ่งคุณ @ipeerapong นี่แหละครับที่เป็นคนไทยที่ขายธีมเวิร์ดเพรสใน themeforest แล้วได้กำไรเป็นกอบเป็นกำ ใครสนใจอยากลองหรืออยากรู้ว่าเป็นยังไง ต้องอ่านครับ อ่านเนื้อหา Interview with @ipeerapong

5. WordPress Plugin Development

แนะนำพื้นฐานสำหรับคนที่สนใจอยากเขียนปลั๊กอิน WordPress เป็นครับ คนที่อยากทำแต่ไม่รู้จะเริ่มต้นยังไงสามารถเข้าไปอ่านได้เลยครับผม อ่านเนื้อหา WordPress Plugin Development

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

ใครที่ได้ไปงานนี้มาแล้วรบกวนช่วยบอกเล่ากันหน่อยนะครับว่าในงานเป็นอย่างไรบ้าง ขอบคุณมากคร้าบ

ถ้าใครเคยใช้สินค้าของ 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 สวย ๆ มาให้ชมกันครับ พวกนี้นอกจากแอพจะมีอินเตอร์เฟซน่าใช้แล้ว เว็บไซต์ขายแอพก็ดีไซน์ออกมาได้ดีด้วย ลองคลิกเข้าไปดู รับรองว่าต้องเจอเว็บที่ถูกใจอย่างน้อยสองสามเว็บแน่นอนครับ

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

Young Webmaster Camp 8 คืออะไร?

ค่ายนี้เรียกย่อ ๆ ว่า IYWC8 หรือ INET Young Webmaster Camp 8 นั่นเองครับ เป็นค่ายสอนทำเว็บฟรี ๆ สำหรับนิสิต-นักศึกษาระดับปริญญาตรี (หรือเทียบเท่า) ครับ ไม่จำกัดว่าเรียนมหาวิทยาลัยไหน คณะอะไร ขอแค่มีความสามารถในการทำเว็บก็พอครับ

ค่ายนี้แบ่งผู้เข้าสมัครเป็น 4 สาขาตามความสามารถที่ถนัด ตามนี้เลย:

1. Web Marketing
   การตลาดของเว็บไซต์ ทำยังไงให้เว็บดัง คนเข้าเยอะแยะ โดยไม่ได้สนใจเฉพาะ SEO นะครับ แต่เน้นเรื่องการคิดแผนการตลาดจริง ๆ ที่กลุ่มเป้าหมายเป็นคน ไม่ใช่ Search Engine ครับ สอนโดยผู้มีประสบการณ์จริง ปั่นเว็บไซต์เป็นเงินหลักล้านมาแล้ว
2. Web Design
   สอนการออกแบบเว็บไซต์อย่างเทพ เลือกสีอย่างไร เลือกกราฟฟิกอย่างไร จัดวางเลย์เอาท์เว็บไซต์อย่างไรให้ดึงดูดคน ทำอย่างไรให้ดีไซน์ไม่ใช่แค่ดูดี สวยงาม แต่สื่อความหมายได้ดีอีกด้วย ใครชอบอ่านบลอคนี้ควรไปสมัครอย่างด่วนเลยครับ!
3. Web Content
   เนื้อหาบนเว็บไซต์สำคัญถึงขนาดมีคำกล่าวไว้ว่า “Content is King” แต่ Content จะเป็น King ไม่ได้เลย ถ้าคนที่ทำ Content ไม่มีความสามารถพอ ค่ายนี้จะสอนว่าทำ Content อย่างไรให้เป็น King!
4. Web Programming
   สอนทิป-เทคนิคลับ ๆ ในการเขียนโปรแกรมบนเว็บไซต์ แนะนำเครื่องมือเด็ด ๆ ที่ช่วยทุ่นแรง ลดเวลาการทำ รวมไปถึงเทคโนโลยีใหม่ ๆ ในการทำเว็บไซต์ที่มีมาเรื่อย ๆ ไม่มีสิ้นสุด ใครชอบเขียนโค้ดไม่ควรพลาด!

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

Young Webmaster Camp 8 จัดขึ้นเมื่อไร ที่ไหน

ค่ายนี้จัดขึ้นในวันที่ 22-25 ตุลาคม 2553 ครับ โดยจัดขึ้นที่ มหาวิทยาลัยนเรศวร จ.พิษณุโลก ภาคเหนือเลยครับ แต่ไม่ต้องห่วงเรื่องการเดินทางนะครับ เรานัดพบกันที่กรุงเทพก่อนเดินทางไป จ.พิษณุโลก อยู่แล้ว ค่าเดินทางไม่ต้องเสียสักบาทเลยครับผม!

วีดิโอโปรโมท IYWC8 แบ่งตามสาขา

วีดิโอโปรโมทค่ายจัดทำโดยทีมงาน Eventpro.in.th ครับ ขอขอบคุณมา ณ ที่นี้ด้วย โดยในวีดิโอจะมีรุ่นพี่มาแนะนำว่าสาขานั้น ๆ เป็นยังไง และแอบบอกด้วยว่าการคัดเลือกแต่ละสาขาทำกันยังไง ใครสนใจอยากสมัครก็ลองไปดูกันนะครับ

ตอนนี้มีวีดิโอออกมาทั้งสิ้น 2 สาขาครับ โดยอีก 2 สาขาที่เหลือจะตามมาเร็ว ๆ นี้ครับ:

IYWC8 – Web Content

Powered by www.eventpro.in.th

IYWC8 – Web Design (ใครชอบเว็บนี้ ต้องดู!!)

Powered by www.eventpro.in.th

อยากสมัคร IYWC8 แล้ว ต้องไปสมัครที่ไหน?

คลิกเข้าไปตามแบนเนอร์ด้านล่างเลยครับ!!

มีข้อสงสัยอะไรเกี่ยวกับค่ายนี้ ถามในส่วนคอมเม้นท์ได้เลยนะครับ! รับรองว่าตอบทุกคอมเม้นท์คร้าบ!!

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

สิ่งสำคัญในการหารูปประกอบมาใส่เว็บที่เหมาะ ๆ คือ สวย และ ฟรี ครับ ซึ่งส่วนใหญ่รูปที่เราเจอมันจะมีแค่อย่างใดอย่างหนึ่งครับ สวยแต่ไม่ฟรี หรือไม่ก็ฟรีแต่ไม่ค่อยสวย อย่างผมก็ชอบเข้าเว็บไซต์ DeviantArt ไปดูรูปสวย ๆ ครับ โดยส่วนใหญ่มันจะติดลิขสิทธิ์ Creative Commons ให้เอามาเผยแพร่โดยให้เครดิตได้ แต่เอาไปใช้ในงานค้าขาย (Commercial Works) ไม่ได้ครับ

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

>> 12 แหล่งดาวน์โหลดฟรี Stock Photo ฟรี ๆ คุณภาพสูง <<

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

วันนี้ผมไปเจอบทความสอนดีไซน์เว็บไซต์ด้วย Photoshop ในบลอคของเพื่อน Kotzhul ครับ ซึ่งเขียนเป็นภาษาไทยล้วน ๆ ผมเลยไม่รอช้าที่จะเอามาแบ่งปันกันครับ บทความนี้จะสอนดีไซน์เว็บไซต์สำหรับขายโฮสติ้งหน้าตา Modern แต่ก็สามารถนำไปเปลี่ยนเป็นเว็บไซต์อย่างอื่นได้ครับ เช่น ขายบริการบนอินเตอร์เน็ตต่าง ๆ ที่มีแบ่งเป็นแพ็กเกจ

ไม่ต้องกลัวว่าใช้ Photoshop ไม่ค่อยเป็นแล้วจะงงกันนะครับ เค้าสอนแบบละเอียดมาก ๆ ครับ

สำหรับงานดีไซน์ตอนเสร็จแล้วจะเป็นแบบนี้ครับ:

>> อ่านบทความสอนเว็บดีไซน์ใน Photoshop โดย Kotzhul ได้ที่นี่ครับ <<

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

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

1. ดูว่าตามองที่ไหนเป็นที่แรก?

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

2. อ่านเว็บไซด์จากซ้ายบน -> ขวาล่าง

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

3. ทริค “5 อย่าง”

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

เพิ่มเติม: เว็บไซด์ FiveSecondTest ให้บริการคล้าย ๆ อันนี้ ฟรี! (แบบเสียเงินก็มี) โดยเราสามารถโพสรูปหน้าเว็บไซด์ของเรา รอให้คนมาทำการทดสอบด้วยวิธีดูหน้าเว็บเรา 5 วินาที แล้วคลิกบนจุดที่เด่นที่สุดบนเว็บไซด์เรา (เราสามารถเป็นฝ่ายทำการทดสอบเว็บไซด์คนอื่นได้ เพื่อเก็บเครดิตมาซื้อบริการแบบเสียเงินบนเว็บไซด์นี้)

เทคนิคที่ผมคิดว่าน่าสนใจก็มีเท่านี้ครับ ใครที่มีเทคนิคในการเช็คของตัวเองแบบไหนก็เอามาแบ่งปันกันหน่อยนะครับ~!!