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

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

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

จริง ๆ แล้วช่วงนี้งานยุ่งมากจนไม่มีเวลามาอัพครับ ต้องขออภัยผู้อ่าน กราฟฟิกดีไซเนอร์ เว็บดีไซเนอร์ทุกคนด้วยครับ หลังจากเคลียร์งานก็จะกลับมาอัพเดทตามปกติครับผม เหลืออีกประมาณ 2-3 งานเท่านั้นเอง

แต่พอดี Envato Birthday Bundle 2010 วางขายครับ เลยต้องรีบมาอัพเดทกัน เพราะเค้าวางขายแค่ 5 วันเท่านั้น!!

หลายคนอาจสงสัยว่ามันคืออะไรกันแน่? Envato เป็นบริษัทที่เป็นเจ้าของเว็บขายกราฟฟิก ธีมเวิร์ดเพรส ธีม XHTML/CSS แฟลช เสียง Texture 3D Model ฯลฯ สำหรับเอาไว้ทำเว็บไซต์ล้วน ๆ เลยครับ

ผมก็ชอบไปเดินตลาดของเค้าบ่อย ๆ โดยเฉพาะที่ GraphicRiver ซึ่งขายกราฟฟิกสำหรับเว็บไซต์ราคาไม่แพง และ ThemeForest ซึ่งขายธีม XHTML/CSS รวมถึงธีม WordPress ในราคาพอรับได้ครับ

ทีนี้เนื่องจากครบรอบ 4 ปีของ Envato เค้าเลยเอาไฟล์ต่าง ๆ ที่เค้าขายแยกบนตลาด เอามาแพ็กขายในราคาพิเศษสุด ๆ ครับ แค่ $20 (630 บาท) เท่านั้น จากราคาเต็ม $400 (12,000 บาท) ครับ

คลิกรูปด้านล่างเพื่อเข้าไปดูเลยครับว่าในแพ็กมีอะไรบ้าง:

ไม่ใช่แค่ไฟล์กราฟฟิก ธีม แฟลช เพลง บลา ๆ ทั้งหมด 50 ไฟล์ที่มาในแพ็กเท่านั้นนะครับ ยังมีคูปองเงินสด $50 (1,500 บาท) สำหรับใช้เช่าโฮสต์ MediaTemple โฮสต์ต่างประเทศชื่อดังที่คุณภาพสูงมาก ๆ (ราคาก็สูงมาก ๆ เช่นกัน แบบถูกสุด $20 / เดือนเลยทีเดียว)

ตบท้ายด้วยคูปองเงินสด $10 (315 บาท) สำหรับซื้อ E-book จาก Rockable Press ครับ หนังสือที่น่าสนใจมาก ๆ สำหรับคนทำเว็บ หรือเว็บดีไซเนอร์ คือ Photoshop to HTML สอนเขียนโค้ด HTML จากไฟล์ PSD (Photoshop) ครับ เล่มนี้แถมวีดิโออีกด้วย

หนังสืออีกเล่มที่น่าสนใจก็คือ Rockstar WordPress Designer หนังสือสอนทำ Theme WordPress สวย ๆ ซึ่งเขียนดีมากจนทำให้การทำธีมเป็นเรื่องง่ายเลยครับ แถมล่าสุดนี้เพิ่งอัพเดทเนื้อหาของ WordPress 3.0 เข้าไป ไม่คุ้มก็ไม่รู้จะว่ายังไงแล้วคร้าบ

รีบ ๆ ซื้อกันนะครับสำหรับ Envato Birthday Bundle ขายแค่ 5 วันเท่านั้นนะครับ !!

สวัสดีครับ วันนี้มีของน่าสนใจเอามาแจกกันครับ โดยมันมีชื่อเรียกว่า Facebook GUI PSD Kit ครับ เป็นไฟล์ Photoshop (.psd) อินเตอร์เฟซ (GUI – Graphic User Interface) ของเว็บไซต์ Facebook.com นั่นเอง โดยมีทั้งอินเตอร์เฟซหน้าแรก หน้าเลือกเพื่อน รวมไปถึงกล่องเตือนต่าง ๆ ในเว็บไซต์ Facebook เลยครับ

ลองดูจากรูปด้านล่างได้เลยครับว่าในแพ็กนี้เค้าแจกอะไรบ้าง:

จะเห็นว่ามีให้ทุกอย่างขนาดที่จะสร้างเว็บ Facebook ของตัวเองได้เลยครับ ซึ่งเหมาะมากกับเว็บดีไซเนอร์ที่ชอบออกแบบเว็บไซต์ใน Photoshop ก่อนมาเขียน HTML/CSS จริง เพราะสามารถก็อปแปะส่วนที่ต้องการจากไฟล์โฟโต้ช็อปนี้ได้เลย

ข้อดีอีกอย่างที่ทำให้ไฟล์นี้น่าดาวน์โหลดมาก ๆ คือ UI (User Interface) ของเว็บ Facebook.com เป็นอินเตอร์เฟซที่ถูกใช้โดยคนทั่วทั้งโลกกว่า 500 ล้านคนครับ ทำให้มั่นใจได้ว่าถ้าเราเลียนแบบบางส่วนเอาไปทำคล้าย ๆ กันในเว็บเรา คนที่เข้าเว็บไซต์ของคุณจะไม่งงกับหน้าตาระบบแบบนี้แน่นอน!

ใครเอาไปใช้แล้วเป็นยังไงบ้างเอามาแชร์กันได้นะครับ ^^

>> Download Facebook GUI Kit <<

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

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

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

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

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