ประเด็นร้อนล่าสุดในการทำเว็บไซต์ของต่างประเทศ คงหนีไม่พ้นเรื่องของ Responsive Web Design ครับ ซึ่งเป็นคอนเซปต์การทำเว็บที่น่าสนใจมาก และที่มีมาได้ระยะนึงแล้ว (จนเว็บอื่นเค้าเขียนถึงกันไปหมดแล้ว แต่แอดมินอู้อยู่ 555) ตอนแรกจะอัพเดทเรื่องของ Adobe Photoshop CS6 ครับว่ามันดีขึ้นยังไงบ้าง มีหลาย Features เลยที่ทำให้ทำงานเว็บดีไซน์ได้ดีขึ้น แต่จนแล้วจนรอดไม่ได้เขียน สุดท้ายเลยมาเขียนหัวข้อนี้แทนเพราะเห็นว่าน่าสนใจกว่าครับ

สำหรับท่านที่มี Facebook ตามไปทักทายแอดมินกันได้ที่ DesignIL Fanpage นะครับ ในหน้าเพจมีการอัพเดทบทความเว็บดีไซน์ที่น่าสนใจอยู่ตลอดเวลา มาพูดคุยกับแอดมินผ่านทาง Message หรือโพสบน Wall ก็ได้นะครับผม แลกเปลี่ยนความรู้กัน

คำว่า Responsive Web Design หลายคนอาจจะเคยเห็นในแฟนเพจกันมาแล้วนะครับ เพราะลงบทความเรื่องนี้ค่อนข้างบ่อย สำหรับบทความตอนที่ 1 เราจะมาดูกันว่ามันคืออะไร แล้วทำได้ยังไงกันบ้างครับ

Responsive Web Design คืออะไร

ปัจจุบันผู้คนเปิดเว็บจากเครื่องมือแตกต่างกันไป ไม่ว่าจะเป็นมือถือ, แท็บเล็ต, หรือโน้ตบุ๊ก ซึ่งเมื่อก่อนเรามองแค่ว่าขนาดหน้าจอคอมพิวเตอร์ขนาดเท่าไรบ้าง ขนาดเล็กสุดน่าจะเป็นเท่าไร แล้วต้องทำเว็บไซต์ขนาดไหนถึงจะดี (เมื่อก่อนมองว่า 1024×768 px นี่ดีครับ เลยสร้าง Layout ขนาด 960px ขึ้นมา อ่านเพิ่มเติมได้จากบทความ CSS Framework: 960gs นะครับผม)

ตอนนี้เราไม่ได้สนใจแค่ขนาดจอคอมแล้ว ต้องสนใจขนาดหน้าจอของมือถือ Smart Phone รุ่นต่าง ๆ ซึ่งความละเอียดก็ต่างกัน แล้วยังมี Tablet ที่มีหน้าจอตั้งแต่ 7 นิ้วยัน 10 นิ้วโผล่มาอีก การจะทำหน้าเว็บใหม่สำหรับมือถือหรือแท็บเล็ตเลยก็จะมีปัญว่าดูแลได้ยาก เวลาเปลี่ยนเนื้อหาทีต้องมาเปลี่ยนสองที่ เลยเกิดเทคนิค Responsive Web Design ขึ้นมา เพื่อให้หน้าเว็บเดียวสามารถแสดงผลในรูปแบบต่างกัน ให้เข้ากับขนาดหน้าจอของเครื่องที่ใช้เปิดเว็บได้

อันนี้เป็นตัวอย่างของเว็บที่เป็น Responsive Web Design นะครับผม ถ้าอ่านคำอธิบายด้านบนไม่รู้เรื่อง ดูรูปประกอบเลยครับ (คลิกดูรูปใหญ่นะครับ)

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

Responsive Web Design ทำอย่างไร

เวลาพูดถึง Responsive Web Design เนี่ย เราพูดถึง เทคนิคต่าง ๆ ที่ช่วยให้หน้าเว็บปรับเปลี่ยนการแสดงผลตามขนาดหน้าจอ ครับ

เพราะฉะนั้นมันจะแยกย่อยเป็นเทคนิคสำหรับการแก้ปัญหาต่าง ๆ ของ Responsive Web Design เช่น เทคนิคแสดงรูปแบบ Low Resolution บนมือถือ (เพื่อให้โหลดเร็วขึ้น เพราะอินเตอร์เน็ตมือถือ เช่น EDGE จะช้ากว่าเน็ตในคอม) หรือ เทคนิคซ่อนเนื้อหาบางส่วนในเว็บบนมือถือ

วันนี้จะมาแนะนำเทคนิคหลักของ Responsive Web Design ซึ่งถ้าเข้าใจเรื่องนี้จะสามารถนำไปทำ Responsive Web Design ได้ 80% แล้วครับ (อีก 20% คือเก็บรายละเอียดอื่น ๆ ที่อาจต้องใช้เทคนิคอื่นมาช่วย) นั่นก็คือ Media Query !!

CSS3 Media Query คืออะไร ดีตรงไหน

คนที่เคยเขียน HTML/CSS คงรู้จักโค้ดนี้ดีใช่มั้ยครับ

<link rel="stylesheet" type="text/css" href="core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

ในที่นี้คือมี CSS 2 ไฟล์ โดยไฟล์ core.css จะใช้กับการแสดงผลบนหน้าจอ (media=”screen”) และ print.css จะใช้กับตอนสั่งปรินท์ (media=”print”) ซึ่งโดยปกติแล้ว CSS สำหรับปรินท์จะทำให้สะอาดตา ไม่มีส่วนที่รกหน้ากระดาษ เช่น Sidebar หรือ Background สีสด ๆ

ด้านบนเป็นความสามารถที่มีมาตั้งแต่ CSS2 แล้วครับ พอมาถึง CSS3 ทาง W3C ซึ่งเป็นคนกำหนดสเปคของ CSS3 ก็ได้สร้างสิ่งที่เรียกว่า Media Query ขึ้นมา โดยแทนที่กำหนดได้แค่ว่า อันนี้ใช้กับหน้าจอนะ อันนี้ใช้กับกระดาษนะ เราก็สามารถกำหนดเพิ่มได้อีก เป็น “ใช้กับหน้าจอที่มีขนาดสูงสุด 480px” หรือ “ใช้กับหน้าจอที่เป็นขาวดำ” หรือ “ใช้กับหน้าจอแนวนอน”

ซึ่งความสามารถทั้งหมดของมันสามารถไปอ่านได้ที่ W3C: Media Query ได้เลยครับ ต่อไปผมจะมาแนะนำวิธีใช้ CSS3 Media Query กันครับ ใช้ไม่ยากเลย

สอนวิธีใช้ CSS3 Media Query

อย่างที่บอกไว้เมื่อครู่ครับ ว่า CSS3 Media Query เป็นการกำหนด “กฏ” ในการแสดงผลขึ้นมาครับ เช่น “แสดงผลกับหน้าจอ ขนาด 480px” หรือ “แสดงผลกับหน้าจอ แนวนอน” มาดูกันว่าเราจะตั้งกฏได้ยังไง

การตั้งกฏ CSS3 Media Query นี่สามารถทำได้ 2 วิธีครับ

วิธีแรก คือใส่ในแท็ก link เพื่อเรียกโหลดไฟล์ที่เราต้องการเลย เช่น

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" />

(ไม่ต้องตกใจกับตรง media=”only screen and (max-device-width: 480px)” นะครับ ผมจะอธิบายในส่วนต่อไปครับ)

วิธีที่ 2 ในการใส่ CSS3 Media Query ก็คือ ใส่ลงไปในไฟล์ CSS ตรง ๆ แบบนี้เลยครับ

@media screen and (min-width: 800px) and (max-width: 1200px) {
     .test {
        font-size: 14pt;
     }
}

ซึ่งวิธีที่ 2 จะเหมาะกับการแก้ส่วนเล็ก ๆ น้อย ๆ ที่ไม่จำเป็นต้องสร้างไฟล์ CSS ใหม่มารองรับครับ

ทีนี้หลายท่านที่เห็นโค้ดด้านบน คงพอเดาวิธีใช้ออกแล้วใช่มั้ยครับ Media Query คือส่วนที่เติมเข้าไปหลังคำว่า screen นั่นเองที่ใช้กำหนดกฏในการแสดงผล และสามารถตั้งได้หลายกฏ แค่ใส่ and เพื่อเชื่อมระหว่างแต่ละกฏครับ ตามรูปแบบนี้นั่นเอง

@media screen and (กฏ 1) and (กฏ 2) and ... {
     /* CSS ที่ต้องการใส่ถ้าเครื่องตรงตามกฏด้านบน */
}

ต่อไปเรามาดูกันว่ามีกฏของ Media Query ไหนบ้างที่เราควรรู้ครับ:

1. max-width: __ px / min-width: __ px / max-height: __ px / min-height: __ px : 4 อันนี้คือความกว้าง-ยาวสูงสุด/ต่ำสุดครับ (แต่ปกติเค้าจะกำหนดกันแค่ความกว้างนะครับ) จะเช็คตามขนาดหน้าจอของ Browser เช่น ถ้าเราเปิด Google Chrome เต็มจอ มันก็จะมองว่าค่า width ตอนนี้เต็มจอ แต่ถ้าย่อเหลือครึ่งจอมันก็จะมองว่าค่า width เราน้อยลงครับ
   เช่น
   @media screen and (max-width: 600px)
2. max-device-width: __ px / min-device-width: __ px / device-width: __ px : ค่า device-width จะแตกต่างกับ width เฉย ๆ ตรงที่มันจะดูขนาดหน้าจอเครื่องแทนครับ เหมาะมากเวลาเราต้องการเจาะจงเครื่องที่เรารู้ขนาดหน้าจอของมันอยู่แล้ว
   เช่น เรารู้ว่า iPhone 3GS ความละเอียด 320x480px จะเขียนโค้ดได้ว่า
   @media screen and (device-width: 320px)
   
3. orientation: portrait / orientation: landscape : ค่า orientation เป็นการเช็คว่าหน้าจออยู่ในแนวไหน เวลาเปิดเว็บใน Tablet บางทีเราก็เปิดแนวตั้ง (portrait) หรือบางทีก็เปิดแนวนอน (landscape) ตัวนี้จะช่วยให้กำหนด CSS สำหรับแนวที่ต้องการได้ครับ (ตามปกติ แนวนอนจะเห็นเนื้อหาได้มากกว่าครับ)
   เช่น
   @media screen and (orientation: landscape)
4. aspect-ratio: __/__, device-aspect-ratio: __/__ :  ค่า aspect ratio เป็น Ratio กว้าง/สูง ของขนาดจอครับ เช่น 16/9 หรือ 1280/720 เป็นต้น
   เช่น
   @media screen and (aspect-ratio: 16/9)
5. min-color: _ / max-color: _ / color: _ : ค่าจำนวนบิทต่อสีที่เครื่องใช้แสดงผลครับ ถ้าเครื่องไหนไม่มีสีก็จะเป็น 0 ครับผม
   เช่น
   @media screen and (min-color: 2)
6. max-resolution: __dpi / min-resolution: __dpi / resolution: __dpi : ค่าความละเอียดของหน้าจอครับ เอาไว้ใช้แยกแยะหน้าจอความละเอียดสูง เพื่อแสดงรูปที่มีความละเอียดสูงได้
   เช่น
   @media screen and (max-resolution: 300dpi)

เว็บไซต์และบทความเกี่ยวกับ Responsive Web Design

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

• Responsive Web Design Technique Tools & Design Strategies
• Guidelines for Responsive Web Design
• Device Diagnostic Approach to Responsive Web Design
• Designing for touch screen
• How to effectively responsive web design
• A List Apart: Responsive Web Design
• 5 Really Useful Responsive Web Design Patterns
• Media Screen Size Reference
• Responsive Design with CSS3 Media Query

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

ขออภัยที่ไม่ได้โผล่มาอัพบลอคนานมาก ซึ่งผมก็ยังอัพเดทบทความน่าสนใจอยู่เรื่อย ๆ ใน Fanpage Designil บน Facebook นะครับ ซึ่งล่าสุดมีการปรับเปลี่ยนเป็น Timeline แล้ว ก็เลยถือโอกาสแต่ง Fanpage ใหม่ซะเลย ใครยังไม่ได้ดูลองแวะไปเยี่ยมชมกันได้นะครับ

วันนี้จะมาแนะนำเว็บไซต์ที่แจก Pattern ให้ดาวน์โหลดฟรีกัน โดยคัดมาแต่เว็บไซต์ที่น่าสนใจ 9 เว็บไซต์ครับ (อยากให้ครบ 10 เหมือนกันแต่ไม่รู้จะหาจากไหน)

1) Minimal-Patterns

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

Download Patterns

2) Subtle Patterns

เว็บนี้เว็บโปรดของผมเลยครับ มี Pattern สวย ๆ มากมายให้ดาวน์โหลดฟรี ๆ แถมยังใจดีแจกไฟล์ .PAT (Photoshop Pattern) ให้โหลดกันไปลงในโฟโต้ช็อปได้เลย สะดวกมาก ๆ ครับ มีปลั๊กอินเอาไว้ทดสอบใส่แพทเทิร์นจากเว็บนี้ลงในเว็บของเราด้วยนะ

Download Patterns

3) Everyday Icons

เว็บนี้เป็นเว็บของญี่ปุ่นครับ จะแจก Pattern น่ารัก ๆ สไตล์ญี่ปุ่น ซึ่งหาในเว็บฝรั่งไม่ได้เลยครับแนวนี้ ใครต้องการแพทเทิร์นสีสันสดใสห้ามพลาด รีบเข้าไปดาวน์โหลดเลย !

Download Patterns

4) Squid Fingers

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

Download Patterns

5) Din Patterns

เว็บนี้รวม Pattern โหลดฟรีสวย ๆ ไว้มากมาย บางอันดูมีสไตล์มาก ๆ ครับ มีทั้งแบบเรียบ ๆ และแบบรายละเอียดเยอะ ๆ สำหรับงานทุกรูปแบบเลยทีเดียว ห้ามพลาดครับเว็บนี้

Download Patterns

6) Pattern8

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

Download Patterns

7) Ava7

เว็บนี้แจกแพทเทิร์นฟรีหน้าตาเรียบร้อย minimal ครับ มันเจ๋งตรงที่เราเลือกสี เลือก shape ของ Pattern ที่เราต้องการได้ด้วย ใครอยากทำเว็บสีโทนไหนก็จิ้มเลือกได้เลย สะดวกมาก ๆ

Download Patterns

DeviantArt

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

Download Patterns

9) WebDesign Ledger

อันนี้เป็นโพสรวม 200 Texture Patterns สวย ๆ ให้ดาวน์โหลดกันฟรีครับ โดยจริง ๆ ก็ลิงค์จาก DeviantArt มานี่แหละ แต่เค้าคัดมาเฉพาะอันที่น่าดาวน์โหลดครับ

Download Patterns

หากท่านใดมีเว็บไหนดี ๆ สามารถแนะนำกันมาได้เลยนะครับผม ^^

สวัสดีครับ หลาย ๆ ท่านที่ได้ติดตาม 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 ก็ได้ครับ

หมายเหตุ: บทความนี้เขียนโดย Guest Writer @jirayu ครับ

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

เอาเถอะ  วันนี้ผมจะเริ่มซีรี่ย์ของบทความบนบล็อก (ซึ่งได้ข่าวว่าซีรี่ย์เก่าที่เริ่มไว้ก็ยังไม่ได้ทำต่อ) ว่าด้วยการจัดหน้าและตกแต่งเนื้อหาบนหน้าเว็บด้วย HTML

หลายคนอาจจะคิดว่าการทำเรื่องพวกนี้อาจจะไม่จำเป็น  เพราะปัจจุบันเราใช้ CMS สำเร็จรูป (เช่น WordPress) กันแทบทั้งนั้น  การจัดหน้าและตกแต่งเนื้อหาก็ใช้ RTE ที่มากับ CMS เอา (หรืออย่าง Drupal ก็อาจจะใช้ markdown ได้) แล้วการจัดหน้าเองนั้นจำเป็นอย่างไร?

ผมคงตอบคำถามนี้ด้วยคำตอบสวยหรูที่อ้างอิงเหตุการณ์สมมติไม่ได้  ซึ่งผมจะตอบว่าเพราะ RTE มันจัดหน้าได้ไม่ได้ดั่งใจของผม  ก็แค่นั้นแหละ (อ้อ  แล้วผมยังใช้มันเวลาทำ static page เองด้วยนะ)

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

แท็กที่ใช้บ่อย

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

• <div> หลักๆคือใช้กำหนดเป็นพื้นที่ทั้งหมดของเนื้อหา  และใช้ในการหุ้มออพเจ็กท์บางอย่างในเนื้อหาด้วย (เช่นภาพหรือวิดีโอ)  และในบางกรณี  ก็ใช้สำหรับการทำเนื้อหาที่มีหลายคอลัมน์ด้วย
• <p> แท็ก p นั้นหมายถึง paragraph หรือย่อหน้า  ในแท็ก p นี้หลักๆผมจะใช้กำหนดความสูงของบรรทัดและระยะห่างระหว่างย่อหน้า
• <h1> – <h6> เป็นแท็กที่ใช้กำหนดหัวเรื่อง (เช่นตรง “แท็กที่ใช้บ่อย” ซึ่งผมกำหนดเป็น h2 เอาไว้) ซึ่งโดยปกติมันจะเรียงขนาดจากใหญ่สุด (h1) ไปหาเล็กสุด (h6) ซึ่งนั่นหมายถึงระดับความสำคัญของหัวเรื่องจากมากไปน้อยนั่นเอง
• <hr> มีไว้เพื่อขีดเส้นคั่นหน้า (บางคนก็เอาไว้แยกระหว่างเนื้อหาและแหล่งอ้างอิง)
• <b> หรือ <strong> เป็นแท็กที่ใช้ทำให้ตัวหนังสือแสดงผลเป็นตัวหนา  จะถามว่า p และ strong นั้นต่างกันอย่างไร  คือ strong นั้นจะใช้เน้นเข้มในกรณีที่ต้องการสื่อความหมายที่สำคัญกว่าปกติทั่วไป  ส่วน b นั้นใช้ในกรณีตกแต่งเสียมากกว่า  แต่เอาเข้าจริงใช้อันไหนมันก็เหมือนๆกันแหละครับ
• <i> หรือ <em> เป็นแท็กที่ใช้ทำให้ตัวหนังสือแสดงผลเป็นตัวเอียง  ควารมต่างของมันเหมือนกับ b และ strong นั่นแหละ
• <u> เป็นแท็กสำหรับขีดเส้นใต้ให้ข้อความ
• <span> ใช้หุ้มข้อความในส่วนที่เราจะทำอะไรพิเศษให้มัน  เช่นไฮไลต์  เปลี่ยนสีตัวอักษร  ลงเงา  บลาๆๆ
• <blockquote> ใช้ในการอ้างอิงคำพูด (สมัยก่อนผมใช้ div เอาดิบๆเลย ฮา)

แท็กที่กล่าวมานี้คือแท็กที่ใช้บ่อยๆครับ  ซึ่งในนี้จะมีแท็ก div, p, และ span ที่มักจะใช้ร่วมกับ CSS ในการแต่งหน้าทาปากให้มันด้วย (เช่นที่บอกไว้คือกำหนดระยะห่างย่อหน้า ความสูงบรรทัด  ไฮไลต์  ลงเงา  และอื่นๆ)

อันที่จริงยังมีแท็กอื่นๆที่ใช้ในการตกแต่งและจัดหน้าข้อความอีก และบางทีก็ออกจะซ้ำๆกับข้างบนนั่น  เช่น <cite> ที่ออกมาเป็นตัวเอียง หรือ <ins> ที่ออกมาเป็นขีดเส้นใต้ (ซึ่งมันใช้ร่วมกับ <del> เพื่อขีดฆ่า  แล้วใช้ <ins> เน้นคำที่แก้ลงไปแทน) หรือ <abbr> ที่ใช้กำหนดคำเต็มของตัวย่อ  (ซึ่งจะคล้ายกับ <acronym> ที่ใช้กำหนดคำเต็มเช่นกัน  แต่กรณี acronym จะใช้กำหนดให้คำที่ออกเสียงได้ เช่น ASAP หรือ NATO ในขณะที่ abbr จะใช้กับตัวย่อที่ไม่มีการออกเสียง  เช่น BKK)  หรืออย่างเช่น <sub> และ <sup> ที่ใชำเขียนตัวห้อย (เช่นเลขฐาน) หรือตัวยก (เช่นเลขชี้กำลัง)

โครงสร้างเนื้อหา

ในการจัดหน้าเนื้อหาบนหน้าเว็บ  โครงสร้างของโค๊ดถือว่าเป็นส่วนที่มีความสำคัญมากส่วนหนึ่งครับ  ประโยชน์ของมันมีหลายอย่างเลย  เช่นการอำนวยความสะดวกให้กับบรรดาโปรแกรมจำพวก screen reader ทั้งหลาย  ที่จะอ่านแต่ละส่วนได้ถูกต้องมากขึ้น  หรือระบบ Search Engine ที่จะเข้าใจส่วนต่างๆของหน้าเว็บเราได้ง่ายขึ้น  หรือแม้กระทั้งคนอื่นๆที่ทำเว็บกับเรา  จะได้อ่านโค๊ดและตามแก้ไขแต่ละส่วนได้ง่ายขึ้นนั่นเอง

สำหรับโครงสร้างเนื้อหาที่ผมมองว่ามันเป็นระัเบียบ  จะเป็นประมาณนี้ครับ

</pre>
<div>
<h1>Content title</h1>
 ...

 ...

<hr />

<h1>Content title 2</h1>
 ...

 ...</div>
<pre>

จากตัวอย่าง  ผมได้กำหนดให้ div เป็นพื้นที่ของเนื้อหาทั้งหมด  กำหนดให้ h1 เป็นหัวข้อเนื้อหา  กำหนดให้ p เป็นเนื้อหาแต่ละย่อหน้า  และให้ hr เป็นตัวเส้นขีดแยกเนื้อหาสองส่วนออกจากกัน

ซึ่งโค๊ดตัวอย่างด้านบน  เมื่อนำเนื้อหามาใส่แล้ว  จะออกมาเป็นอย่างตัวอย่างนี้ครับ example01.html

การเลือกใช้แท็ก

อีกเรื่องที่ค่อนข้างสำคัญ (ในสายตาของผม) คือการเลือกใช้แท็กให้เหมาะสมกับเนื้อหาจุดนั้นๆ

ในสายตาปกติของเรา  อาจจะแยกความต่างของข้อความที่ครอบด้วย <strong> กับการครอบด้วย <span> ที่ใช้ CSS ทำตัวหนาไม่ออก  แต่ว่าโปรแกรมจำพวก Screen Reader (ซึ่งเป็นโปรแกรมที่ผู้พิการทางสายตาใช้อ่านเว็บ)  และบรรดา Search Engine ทั้งหลาย  จะสัมผัสได้ในความต่างครับ

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

ส่งท้ายตอนแรก

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

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

อย่าลืมติดตามกันนะครับ  สวัสดีครับ

ปล.บทความนี้เขียนเรื่อยๆ  ไม่มีจำนวนตอนที่ชัดเจนครับ

Font เป็นหนึ่งใน  Element ที่สำคัญในการทำเว็บดีไซน์ รวมถึงกราฟฟิกดีไซน์ด้วยครับ แต่ปัญหาคือคนไม่ค่อยรู้ว่าจะดาวน์โหลดฟ้อนต์ฟรีได้จากที่ไหน และปัญหาที่สำคัญว่าคือลิขสิทธิ์ฟ้อนต์ ที่ถ้าไม่รู้เนี่ยมีโอกาสโดนปรับหลักหมื่นหลักแสนเลยทีเดียวครับ บางทีเค้าเขียนว่า Download Free Fonts แต่ก็ใช้ในงาน Commercial (ค้าขาย) ไม่ได้ครับ ต้องอ่านข้อตกลงดี ๆ ว่า ฟรี ขนาดไหน

แล้วก็ลิขสิทธิ์ของฟ้อนต์เนี่ย ถึงจะเป็น Commercial Fonts แต่ก็ไม่ได้หมายความว่าจะใช้ได้ในทุกกรณีนะครับ เช่น ฟ้อนต์ตระกูล DB ซึ่งปกติต้องเสียเงินซื้ออยู่แล้วถึงจะเอามาใช้ในงานได้ ชุดละ 5000 กว่าบาท (ใช้ได้ 5 คนครับ แปลว่าถ้าแชร์กับคนอื่นจะตกชุดละ 1000 บาท) ผมก็ไปอ่านเรื่องลิขสิทธิ์เจอมาจาก เว็บ F0nt ว่า

- ออกแบบและเลือกใช้ฟอนท์ใดฟอนต์หนึ่ง เป็นประจำให้กับลูกค้ารายใดรายหนึ่ง เพื่อสร้างเอกลักษณ์จดจำ ต้องชำระค่าลิขสิทธิ์

หมายถึง ถ้าใช้ฟ้อนต์เป็นโลโก้, identity ของเว็บนั้น ๆ เราจำเป็นต้องจ่ายค่าลิขสิทธิ์เพิ่มเติมจากค่าฟ้อนต์ด้วยครับ

เพราะฉะนั้นเวลาเล่นกับฟ้อนต์ในงาน Commercial เนี่ย ต้องเช็คให้ดี ๆ นะครับว่าลิขสิทธิ์ของฟ้อนต์เค้าเขียนไว้ว่าอะไรยังไงบ้าง

แจก Free Thai Fonts ฟ้อนต์ภาษาไทยฟรี

ฟ้อนต์ไทย เป็นหนึ่งในแรร์ไอเทม (สำหรับคนชอบของฟรี ที่ถูกลิขสิทธิ์) เลยครับ มาดูกันว่ามีที่ไหนที่มีฟ้อนต์ไทยให้ดาวน์โหลดฟรีกันบ้าง

• F0nt.com
  เว็บไซต์นี้คือสุดยอดของแหล่งแจกฟ้อนต์ไทยฟรีแล้วครับ นอกจากนั้นยังมีบทความเกี่ยวกับฟ้อนต์ที่น่าอ่าน และเว็บบอร์ดที่ให้คนชอบฟ้อนต์เข้าไปพูดคุยกันครับ ฟ้อนต์เด็ด ๆ ของที่นี่คือ Circular, Supermarket ครับ
• 13 ฟ้อนต์ไทย โดย SIPA
  สำหรับคนที่กำลังหาฟ้อนต์ไทยสวย ๆ ที่เหมาะกับเว็บแนวไทย ๆ ทาง SIPA ได้แจก Fonts ไทยฟรีถึง 13 ตัวด้วยกันครับ ตอนที่ผมหาฟ้อนต์มาทำเว็บส่งประกวดโครงการเว็บในหลวงและพระราชินี ก็หาเอาจากที่นี่เช่นกันครับ
• RSU Fonts
  ทางมหาวิทยาลัยรังสิตได้ทำฟ้อนต์แจกฟรี 2 ตัวครับ ซึ่งตัวนึงเป็นฟ้อนต์แนวโมเดิร์นชื่อ RSU กับอีกตัวเป็นฟ้อนต์ลายมือครับ ที่เจ๋งคือฟ้อนต์ RSU ซึ่งทั้งฟรีและสวยงามระดับฟ้อนต์เสียตังค์เลยครับ งานหลาย ๆ ตัวที่ผม (designil) ทำใช้ฟ้อนต์นี้แล้วลูกค้าชอบมากครับ
• รวมฟ้อนต์ฟรี ตระกูล JS, DS, PLE และอื่น ๆ
  ทาง f0nt.com ได้รวมฟ้อนต์ตระกูลต่าง ๆ ที่ผู้ใช้อนุญาตให้นำไปใช้ได้ โดยไม่ต้องจ่ายค่าลิขสิทธิ์ไว้ที่นี่ครับ (เป็นคนละตัวกับบนหน้าเว็บ F0nt นะครับ ฟ้อนต์ในนี้จะไม่ใช่ฟ้อนต์ที่สมาชิก F0nt.com เป็นคนทำ) ซึ่งตระกูลหลัก ๆ ที่น่าจะเคยเห็นเคยใช้กัน คือฟ้อนต์ JS หรือ DS ครับ

ถ้าใครรู้แหล่งโหลดฟ้อนต์ไทยอื่น ๆ บอกมาได้นะครับ ^^

รวมฟ้อนต์ไทยที่ไม่ฟรี

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

• DB Fonts
  เจ้านี้ฟ้อนต์สวยงามมากครับ ราคาชุดละ 5000 บาท แต่ใช้ได้ 5 คนต่อ 1 ชุด เพราะฉะนั้นหาคนแชร์ก็จะได้ราคา 1000 บาทต่อชุดเท่านั้น อย่าเข้าใจผิดว่า 1 ชุดมี 1 ฟ้อนต์นะครับ ชุดนึงมีฟ้อนต์ 5 ตัวบ้าง 10 ตัวบ้างครับ
• PSL Fonts
  ฟ้อนต์เจ้านี้คุณภาพดีครับ เสียดายที่เค้าไม่ค่อยแยกขาย ขายที 50 ฟ้อนต์อะไรแบบนี้ครับ ดีไซเนอร์บางคนเลยไม่มีทุนพอจะสอยมาใช้ได้ แต่ใครอยากลองใช้ดูในหน้าโปรโมชั่นครับ เหมือนว่าเค้าจะมีให้ใช้ฟ้อนต์ในราคาประหยัด ฟ้อนต์ตระกูลนี้ต้องระวังเรื่องลิขสิทธิ์มากครับ รวมถึง DB Fonts ด้วย เพราะ 2 เจ้านี้เอาเรื่องลิขสิทธิ์หนักครับ
• คัดสรรดีมาก
  ที่นี่ฟ้อนต์คุณภาพดีครับ แต่ส่วนใหญ่เห็นว่าเค้าจะทำฟ้อนต์ให้แบรนด์ไปเลยมากกว่าจะทำฟ้อนต์ขายทั่วไป เพราะฉะนั้นถ้าต้องการซื้อฟ้อนต์อาจจะเน้นดูจาก 2 เจ้าบนเป็นหลักครับ

แจก Free English Fonts ฟ้อนต์ภาษาอังกฤษฟรี

มาดูกันบ้างว่าจะดาวน์โหลดฟ้อนต์ฟรีที่เป็นภาษาอังกฤษได้จากที่ไหนครับ

• DaFont.com (ไม่แนะนำ)
  เว็บนี้หลายคนคงรู้จักอยู่แล้วครับ เพราะเข้าไปโหลดฟ้อนต์กันเยอะมาก แต่อยากให้ระวังไว้ว่า ฟ้อนต์แต่ละตัวในเว็บนี้ลิขสิทธิ์ไม่เหมือนกันครับ ดูลิขสิทธิ์ได้จากตัวอักษรด้านบนปุ่มดาวน์โหลดครับ บางตัวก็ Free for Persona use (แปลว่าใช้ในงานค้าขายไม่ได้) บางตัวเป็น Donationware (ต้องบริจาคถึงจะใช้ได้) เวลาโหลดให้เลือกดี ๆ ครับ หรือถ้าเป็นไปได้อย่าโหลดจากเว็บนี้เลยดีที่สุดครับ
• FontSquirrel
  เว็บนี้รวมฟ้อนต์ฟรี ที่สามารถใช้ในงาน Commercial ได้ แถมทุกฟ้อนต์ในเว็บนี้ยังเอาไปใช้ได้เป็น Web Font (เอาฟ้อนต์ไปใช้แทนตัวอักษรบนเว็บ ซึ่งเป็นการเอาไฟล์ฟ้อนต์มาใช้เลย ไม่ใช่การเซฟฟ้อนต์เป็นรูปนะครับ) ได้ด้วยครับ นอกจากนั้นยังมีเครื่องมือ Web Font Generator เอาไว้แปลงฟ้อนต์ไหนก็ได้ให้ใช้บนเว็บได้ เราสามารถโหลดฟ้อนต์จาก F0nt.com มาแปลงที่นี่ เพื่อใช้บนเว็บได้อย่างถูกลิขสิทธิ์ ครับ ซึ่งฟ้อนต์อื่น ๆ ถ้าจะเอามาแปลงต้องดูลิขสิทธิ์ฟ้อนต์นั้น ๆ ด้วยนะ
• FontFabric
  รวมฟ้อนต์ฟรีสวย ๆ มากมายเลยครับที่นี่ ในเครื่องผม (designil) มีฟ้อนต์ของเจ้านี้หลายตัวเลย หลาย ๆ ตัวเป็นฟ้อนต์แนว Experimental คือ ฟ้อนต์แปลก ๆ ใช้ในงานได้เฉพาะบางชนิด อะไรประมาณนี้ครับ ที่สำคัญฟ้อนต์ในเว็บนี้ใช้ในงาน Commercial ได้นะครับ
• Lost Type
  ฟ้อนต์สวย ๆ แจกฟรีครับ ผมโหลดจากเว็บไซต์นี้ไป 3-4 ฟ้อนต์แล้ว ยอมรับว่าฟ้อนต์เค้าดีจริง และข้อดีอีกอย่างของเว็บไซต์นี้ คือ ก่อนโหลดเค้าจะมีให้ใส่ราคาว่าจะให้คนทำฟ้อนต์เท่าไร (ถ้าจะโหลดฟรีก็ใส่ 0 ไป) ถ้าใครเอาไปใช้ในงานของลูกค้าลองบริจาคสักนิดนึงครับ ช่วยให้เค้ามีแรงทำฟ้อนต์สวย ๆ ต่อไปด้วยครับ แน่นอนว่าใช้ในงานค้าขายได้ครับ
• League of Movable Type
  ที่นี่แจกฟ้อนต์ Open Source ครับ ดาวน์โหลดไปใช้กันได้ฟรี ๆ และใช้ในงาน Commercial ก็ได้ ฟ้อนต์ของที่นี่สวย ๆ หลายตัว ผมเคยมาโหลดจากที่นี่ตั้งแต่เมื่อก่อนตอนที่ฟ้อนต์ยังน้อย ๆ อยู่เลยครับ สวยมาก ๆ
• Google Web Fonts
  เมื่อก่อนเคยเขียนไปแล้วครับเกี่ยวกับเรื่อง Google Font API ซึ่งอันนี้ก็เป็นตัวเดียวกันครับ แต่เป็น Version 2 ทำใหม่ดูดีขึ้นมาก และฟ้อนต์มีให้เลือกเยอะขึ้นด้วยครับ แล้วก็ไม่จำเป็นต้องใช้โค้ด Google เพื่อเอามาใส่บนเว็บอย่างเดียว ฟ้อนต์พวกนี้แจกฟรีครับ ถ้าอยากใช้ในงานกราฟฟิกก็ดาวน์โหลดไปใช้ได้อีกด้วย

ทั้งหมดก็มีเท่านี้ครับ สำหรับแหล่งดาวน์โหลดฟ้อนต์ฟรีต่าง ๆ ทั้งฟ้อนต์ไทยและฟ้อนต์อังกฤษ ที่ผมได้ไปรวบรวมมา ถ้าใครมีเว็บแจกฟ้อนต์ฟรีที่น่าสนใจสามารถแนะนำมาได้เลยครับ ขอบคุณมากครับ

วันนี้มี Free WordPress Theme มาแจกกันฟรี ๆ ครับ สำหรับท่านที่พยายามหาธีมเวิร์ดเพรสสวย ๆ มาใช้งาน แต่พอลองหาดูใน WordPress.org แล้วไม่ค่อยมีธีมสวย ๆ เลย วันนี้รับรองว่าได้เจอธีมเจ๋ง ๆ เอาไปใช้ในเว็บไซต์ของคุณแน่นอนครับ

ปกติการหาดาวน์โหลดธีมฟรี ผ่านทาง Google มักจะได้เว็บไซต์ที่แจกธีมเถื่อน ไม่ถูกลิขสิทธิ์ (อันนี้เข้าใจว่าถ้าเป็นเว็บส่วนตัวคนจะไม่ค่อยสนใจเรื่องลิขสิทธิ์ แต่ถ้าเป็นเว็บที่ทำให้บริษัทหรือโปรเจคค่อนข้างใหญ่ ยังไงก็ต้องใช้ธีมถูกกฎหมายครับ) หรือบางทีได้ Theme ฟรีมาก็จริง แต่แถมไวรัสมาใส่ Server ด้วย

จึงอยากแนะนำให้เวลาโหลด Theme ฟรี ให้เลือกดาวน์โหลดจากเว็บไซต์ของคนทำธีมตัวจริง หรือเว็บไซต์ที่เชื่อถือได้ (เช่น WordPress.org หรือ Themeforest.net) จะปลอดภัยที่สุดครับ แน่นอนว่าบางธีมจะติด Credit ของคนทำธีมมาด้วยใน Footer เว็บไซต์ ก็อยากให้เราให้เกียรติคนทำธีมนิดนึงโดยการไม่เอา Credit ออกครับ (บางธีมถึงกับใส่โค้ด php ป้องกันการเอาออกด้วย)

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

ธีมที่จะแจกในวันนี้คัดสรรมาเฉพาะธีมสวย ๆ คุณภาพดีทั้งนั้นครับ และที่สำคัญคือแจกฟรีแบบถูกกฎหมายด้วย โดยมี Themes หลากหลายสไตล์ตั้งแต่แนว Minimalists (Minimal คือแนวชิว ๆ สบาย ๆ โล่ง ๆ โปร่ง ๆ แต่ดูดี) ไปจนถึงแนวกราฟฟิกดีไซน์หรูอลังการ แน่นอนว่าทุกธีม Support WP เวอร์ชั่น 3.0+ ครับ

มาดูกันดีกว่าว่าแบ่งธีมเป็นหัวข้ออะไรบ้าง:

• Portfolios, Galleries And Showcases – แน่นอนว่า Portfolio WordPress Theme เป็นที่นิยมมากครับ เพื่อเอามาใช้ทำเว็บรวมผลงานตัวเอง หัวข้อนี้เลยรวมธีม WordPress หลากหลายแบบสำหรับเอามาทำเว็บโชว์ผลงาน เหมาะมากสำหรับคนทำงานสายกราฟฟิก หรือคนที่อยากทำเว็บที่มีรูปประกอบเยอะ
• Business And Corporate Websites – รวมธีมที่ดูน่าเชื่อถือ เหมาะกับทำเว็บบริษัท หรือสำหรับทำธุรกิจออนไลน์ครับ
• Minimalist Themes – สำหรับคนที่ชอบอะไรโล่ง โปร่งสบาย รายละเอียดน้อย ธีมแนวนี้เหมาะกับเว็บที่ต้องการให้คนอ่านเน้นด้านเนื้อหา (แต่บางครั้งผมก็มองว่ามันออกจะจืดชืดไปหน่อย) หรือเว็บที่เน้นรูปใหญ่ ๆ เยอะ ๆ ครับ เพราะรูปจะเด่นขึ้นมาจากหน้าเว็บเลย เหมาะมากสำหรับนักถ่ายภาพ
• Blogs And Personal Websites - รวมธีมสำหรับเว็บบลอค หรือเว็บส่วนตัว ใครที่เขียนบลอคอยู่พลาดไม่ได้ครับ อาจจะได้เจอกับธีมใหม่ของบลอคคุณในนี้ก็ได้
• Shopping/Ecommerce Theme – ธีมสำหรับเว็บขายของ แนว E-Commerce ใครว่า WordPress เอาไว้เขียนบลอคอย่างเดียวครับ มันเอามาใช้ได้หลากหลายมากเลยนะ
• Mobile-Optimized Themes – ธีมสำหรับ Mobile ครับ เหมาะมากถ้าเอาไปเปิดใน Smartphone ต่าง ๆ (iPhone, มือถือ Android ต่าง ๆ เช่น HTC, Samsung)
• Magazine-Layout Themes – อีกหนึ่งประเภทธีมที่ขายดีครับ Magazine WordPress Theme เหมาะกับเว็บอารมณ์นิตยสาร ถ้าคิดไม่ออกให้นึกถึงบลอคปกติ แต่ว่าทุกโพสจะมีภาพประกอบสวยงาม ธีมพวกนี้จะโชว์โพสต่าง ๆ ให้น่าสนใจที่สุดเพื่อให้คนคลิกเข้าไปอ่านครับ
• “Coming Soon” And Landing Pages – ธีมแนวนี้ได้รับความนิยมมากขึ้นเพราะธุรกิจออนไลน์สมัยนี้นิยมทำ Landing Page เพื่อให้คนมาลงอีเมลของตัวเองไว้ (เอาไว้ดูยอดว่ามีคนสนใจเยอะแค่ไหน + อีเมลหาคนที่ลงชื่อไว้เมื่อถึงวันเปิดเว็บ) ซึ่งธีมแนวนี้จะวัดกันที่ดีไซน์และความง่ายในการลงอีเมลครับ เพื่อให้ยอดคนลงชื่อสูงที่สุด
• Theme Development Frameworks And Bare-Bone Themes – รวมพวก Theme Framework สำหรับคนทำธีมครับ ให้ทำธีมออกมาได้ง่ายขึ้น ใครอยากลองทำธีมเองจะศึกษาไว้ก็ไม่เสียหายครับ

พอรู้แล้วว่าแต่ละหัวข้อเกี่ยวกับอะไรกันบ้าง ก็ไปดาวน์โหลดธีมกันเลยครับ !

Download Free WordPress Theme แห่งปี 2011

หากเลือกธีมได้แล้วแต่ขาดปลั๊กอิน คลิกเลย รวมปลั๊กอิน (Plugin) เจ๋ง ๆ ของ WordPress แห่งปี 2011 !!

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

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

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

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