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

ตอนนี้หากท่านใดติดตามข่าวสารเว็บดีไซน์ใหม่ ๆ จะเห็นว่ามีเทคนิค 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 ก็จะได้คำตอบที่เร็วขึ้นครับ

หมายเหตุ: บทความนี้เขียนโดย 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 นะครับ (แต่ถ้าเรื่องการจัดการมันยาว  ผมอาจจะตัดเรื่องการตกแต่งไปตอนที่สามนะครับ)

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

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

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

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

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

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

สวัสดีครับ ต้องขออภัยที่ช่วงนี้หมดมุขเล็กน้อย ไม่รู้จะอัพอะไรดี เนื่องจากเรามีการอัพเดท Content หลายช่องทางมากครับ เช่น บทความต่างประเทศเจ๋ง ๆ หรือเว็บสวย ๆ จะทวีตอยู่ใน @designil ครับ ส่วนหน้า Designil Fanpage ใน Facebook ก็จะมีการอัพเดท Status อะไรไปเรื่อยครับ แต่ก็จะเกี่ยวกับ เว็บดีไซน์ อยู่นะครับ

สำหรับหน้าเว็บหลักเราจะคัดสรรมาลงแค่ที่น่าสนใจจริง ๆ เท่านั้นครับ บางทีก็กรองออกมาจากทวีตใน @designil อีกทีนึง (จริง ๆ ที่ทวีตออกไปก็น่าสนใจในระดับหนึ่งอยู่แล้วครับผม)

Video สอนทำหน้า Facebook Fanpage

สิ่งที่ไปเจอมาเมื่อวานนี้เป็นวีดิโอสอนทำหน้า Facebook Fanpage ครับ ซึ่งที่บอกว่า “สอนทำ” หมายถึง สอนเอาดีไซน์ที่เสร็จเรียบร้อยแล้ว เข้ามาใช้ใน Facebook ครับผม

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

อันนี้เป็นหน้าที่ผมลองทำดู หลังจากดูวีดิโอจบครับ >> DesignIL Say Hi: Facebook Landing Page

สิ่งที่วีดิโอนี้จะสอน มีดังนี้ครับ:

• เอาดีไซน์ HTML CSS ที่เราทำเสร็จแล้ว เข้าไปใส่ใน Facebook Page
• สอนตั้งค่าตอนสร้าง Facebook App และตอนเอา App มาใส่ใน Page อีกที (Setting มันเยอะครับ ดูวีดิโอแล้วช่วยได้มาก)
• ปกติ Facebook App ยอมให้หน้าต่างสูงสุดแค่ 800px เท่านั้น วีดิโอนี้จะสอนวิธีแก้ให้มันยาวได้ตามดีไซน์เรา
• สอนดึงข้อมูลพื้นฐานจาก Facebook PHP SDK เช่น เช็คว่าถ้าคนยังไม่กด LIKE เพจเราให้แสดงรูปชวนกด LIKE

ถ้าสิ่งเหล่านี้เป็นสิ่งที่ยังไม่รู้ และสนใจอยากจะรู้ ดูวีดิโอได้เลยครับ

How to Design and Program a Facebook Landing Page from NoupeMag on Vimeo.

หากมีข้อสงสัยอะไรในการทำ Facebook Page ตามวีดิโอนี้ สามารถสอบถามได้เลยนะครับ ^^

เพียงไม่กี่ปีที่ผ่านมา การสร้างเว็บไซต์ส่วนตัวเริ่มเป็นมาตรฐานด้วยการเขียนแบบ HTML กับ CSS แต่รู้หรือไม่? ปัจจุบันนั้น เว็บไซต์ทั้งหมดกว่า 14% นั้นใช้ระบบเว็บไซต์ของ WordPress กันทั้งนั้น

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

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

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

ระบบ Permalink Structure for URLs

คุณสามารถหาระบบนี้โดยการปรับที่ Setting > Permalinks ซึ่งระบบ Permalink นี้จะทำให้คุณสามารถสร้าง URL เฉพาะให้กับ WordPress ของคุณ

โดยปกติ หน้าตา URL ของโพสใน WordPress จะเป็นแบบนี้

http://example.com/?p=123

โดยมุมมองของระบบ SEO นั้น ไม่สามารถวิเคราะห์ URL รูปแบบนี้ได้ เพราะหัว URL นั้นไม่มีคีย์เวิร์ด

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

ซึ่งบางระบบของ SEO ส่วนใหญ่จะมีผลกับโครงสร้าง URL แบบ single-level ของบล็อคโพส ยกตัวอย่างเช่นระหว่าง URL 2 อัน จากด้านล่างนี้

http://example.com/post-name/

กับ

http://example.com/post-category/post-name/

อันแรกเป็น URL แบบ single-level ของบล็อคโพส, เราสามารถปรับใน WordPress ตรงแผงเมนู Permalink คุณจะเห็นส่วนที่เขียนว่า Common settings ให้เลือกแบบ Custom Structure และใส่ข้อความนี้ลงไป

/%postname%/

เมื่อเลือกเสร็จแล้ว URL ของบล็อคโพสคุณจะขึ้นลักษณะนี้

http://example.com/post-name/

ระบบ Title Tag

แท็ค <title> ในภาษา HTML นั้นมีความสำคัญต่อระบบของ SEO มาก เพราะเว็บเพจทุกหน้าย่อมต้องมีแท็ค <title> เสมอ

ผลของระบบเซิร์จเอนจิ้นนั้น จะนำแท็ค <title> แสดงขึ้นในการค้นหา ยกตัวอย่างเช่น ลองเซิจสักคำใน Google ซึ่งผลที่ได้มาจะออกมาเป็นแบบนี้

เป็นเพราะระบบการค้นหาอันดับแรกนั้นจะขึ้นอยู่กับแท็ค <title> นั่นเอง เช่นที่ผมได้ทำการค้นหาคำว่า “designil” ลงไป ก็จะขึ้นเว็บของ DesigNIL.com ขึ้นมา ก็เพราะหัวแท็ค <title> นั้นมีคำว่า “DesigNIL” อยู่นั่นเอง

<head>
<title>DesigNIL: Web Design HTML5 CSS3 Tutorial รวมความรู้เว็บดีไซน์ สอนออกแบบเว็บไซต์</title>
</head>

โดยปกติระบบของ WordPress ตรงส่วนแท็ค <title> นั้นจะขึ้นแบบ “ชื่อบล็อค » ชื่อโพส” และเป็นเช่นนั้น ระบบเซิร์จเอนจิ้นต่างๆก็จะค้นหาและเก็บข้อมูลไว้

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

เราสามารถเปลี่ยนรูปแบบของ <title> ได้ โดยทำการติดตั้งปลั๊คอินตัวเสริมชื่อ All in One SEO Pack ลงไปในระบบ ซึ่งในส่วนของเมนูปลั๊คอินนี้จะทำการเซ็ทแท็ค <title> ให้อัตโนมัติ เพื่อสามารถให้ระบบ SEO ค้นหาได้ง่ายขึ้น

ซึ่งปลั๊คอิน All in One SEO Pack สามารถหาดาวโหลดได้ที่ http://wordpress.org/extend/plugins/all-in-one-seo-pack/

Meta Tags

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

แต่อย่าลืมว่ามีข้อตกลงด้าน Human-friendly, non-spammy way อยู่ด้วย ซึ่งคีย์เวิร์ดที่จะนำมาอธิบายในหน้าเว็บนั้นควรอยู่ระหว่าง 150-160 ตัวอักษร ถ้ามากกว่านั้น ระบบเซิร์จเอนจิ้นจะตัดการค้นหานั้นออกไปหรือจนกว่าระยะเวลาการค้นหาของมันหมดลง

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

คุณสามารถใส่คีย์เวิร์ดในเมต้าแท็คบทบล็อคโพสเพื่อจัดคีย์เวิร์ดที่มีวลีสำคัญต่างๆ แต่ควรพิจารณาการจัดลำดับเซิร์จเอนจินซึ่ง Google ได้บอกไว้ว่า no longer takes meta keyword tags into account แปลได้ว่า “จะไม่ให้ความสำคัญกับ meta keyword”

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

ซึ่งเช่นกัน คุณสามารถสร้างเมต้าแท็คคีย์เวิร์ดตามต้องการโดยใช้ปลั๊คอิน All in One SEO Pack

ใช้ noindex Meta Tag สำหรับหน้าที่ไม่ได้ใช้

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

สมมุติว่าคุณได้สร้างหน้าหมวดหมู่สำหรับบล็อคโพสหนึ่งใน URL

http://example.com/category/my-category/

กับหน้าที่เหมือนกันซึ่งดูได้จากตรงนี้

http://example.com/my-category/

ซึ่งไม่ดีแน่ ดังนั้นคุณจะทำอย่างไรต่อไป?

โดยการใช้ noindex HTML Meta Tag ทำให้คุณสามารถบอกเซิร์จเอนจิ้นว่า URL นี้ไม่ต้องจดจำไว้ ผลลัพท์คือช่วยลดโอกาสที่เว็บไซต์คุณจะโดนลงโทษในการจัดอันดับของเครื่องมือค้นหาสำหรับเนื้อหาที่เหมือนหรือซ้ำกัน (อาจหมายถึงทำให้เว็บของคุณตกอันดับ)

วิธีที่ง่ายที่สุดที่จะแก้ปัญหานี้คือใช้ปลั้กอิน All in One SEO Pack อีกแล้ว ในปลั้กอินนั้นจะมีตัวเลือกให้คุณกำหนดค่า noindex HTML Meta Tag ได้สามอย่างคือ Categories, Archives และ Tag Archives

ใช้ HTML Heading อย่างเหมาะสม

ส่วนใหญ่แท็ค HTML ที่ใช้ส่วนหัวคือ <h1>, <h2> , … , <h6> เพื่อแยกส่วนของเนื้อหาออกจากหัวของบทความ เป็น

วิธีที่ทำให้เนื้อหาของคุณอ่านง่ายขึ้น ไม่ใช่แค่นั้น ยังเป็นจุดสำคัญของการกำหนดคีย์เวิร์ดกับระบบจดจำเว็บไซต์ของเซิร์จเอนจิ้นต่างๆ ซึ่งแท็คส่วนหัวนี้มันมีค่ามากกว่าแท็ค HTML ทั่วๆไป (จำพวก <p> หรือ <blockquote> เป็นต้นฯ)

ซึ่งน่าแปลกที่ผู้สร้าง Themes ของ WordPress ปัจจุบันนี้ แทบทั้งหมดไม่ได้ให้ความสำคัญกับโครงสร้างเนื้อหาแบบที่ได้กล่าวข้างต้น

จากมุมมองของระบบ SEO นั้น แท็ค <h1> เป็นหัวข้อที่สำคัญมากที่สุดและควรมีเพียงแท็คนี้แท็คเดียวในหน้าเว็บ

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

หากคุณใช้ชุด Themes ของ WordPress ที่คุณไม่ได้สร้างขึ้นมาเอง ขอให้คุณตรวจสอบแม่แบบของ Themes นั้นๆ (เช่น header.php, single.php, post.php, home.php และ page.php) เพื่อให้มั่นใจว่าเขียนรูปแบบแท็ค HTML ที่ถูกต้องและจัดโครงสร้างให้อย่างดี

ใช้ Sitemap XML

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

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

ดังนั้นการใช้ปลั๊กอิน Google XML Sitemaps ของ WordPress นั้น จะช่วยสร้าง Sitemap XML ของเว็บไซต์โดยอัตโนมัติ แถมยังมีระบบแจ้งการอัพเดทด้วยอีกเมื่อระบบเซิร์จเอนจิ้นต่างๆได้เข้ามาดูการปรับปรุง XML ของเว็บไซต์คุณ

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

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

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

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

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

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

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

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

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

ปฐมบทจิตวิทยาของมนุษย์

จิตวิทยา คือศาสตร์ที่ว่าด้วยการศึกษาเกี่ยวกับจิตใจ (กระบวนการของจิต) , กระบวนความคิด, และพฤติกรรม ของมนุษย์ด้วยกระบวนการทางวิทยาศาสตร์ เนื้อหาที่นักจิตวิทยาศึกษาเช่น การรับรู้ (กระบวนการรับข้อมูลของมนุษย์) , อารมณ์, บุคลิกภาพ, พฤติกรรม, และรูปแบบความสัมพันธ์ระหว่างบุคคล จิตวิทยายังมีความหมายรวมไปถึงการประยุกต์ใช้ความรู้กับกิจกรรมในด้านต่าง ๆ ของมนุษย์ที่เกิดขึ้นในชีวิตประจำวัน (เช่นกิจกรรมที่เกิดขึ้นในครอบครัว, ระบบการศึกษา, การจ้างงานเป็นต้น) และยังรวมถึงการใช้ความรู้ทางจิตวิทยาสำหรับการรักษาปัญหาสุขภาพจิต นักจิตวิทยามีความพยายามที่จะศึกษาทำความเข้าใจถึงหน้าที่หรือจุดประสงค์ ต่าง ๆ ของพฤติกรรมที่เกิดขึ้นจากตัวบุคคลและพฤติกรรมที่เกิดขึ้นในสังคม ขณะเดียวกันก็ทำการศึกษาขั้นตอนของระบบประสาทซึ่งมีผลต่อการควบคุมและ แสดงออกของพฤติกรรม^[1]

จิตวิทยาเป็นศาสตร์ที่ศึกษาค้นคว้าเพื่อนำข้อมูลความรู้มาเสนอ อธิบาย และเพื่อควบคุมและเปลี่ยนแปลงพฤติกรรมของมนุษย์และสัตว์ จิตวิทยามุ่งศึกษาด้านความสัมพันธ์ระหว่างกระบวนการของร่างกายกับจิตใจ ด้วยวิธีการทางวิทยาศาสตร์ที่เป็นระเบียบแบบแผน เพราะร่างกายและจิตใจมักมีการแสดงออกร่วมกัน อีกทั้งยังแสดงออกในแนวทางที่สามารถทำนายได้^[1]

จิตของมนุษย์

มีอยู่ 3 แบบด้วยกันคือ

1.จิตสำนึก (Conscious) คือจิตที่เราสามารถระลึกได้ คิดได้ ควบคุมได้ เป็นจิตที่เสมือนอยู่บนผิวน้ำ
2.จิตใต้สำนึก (Subconscious) คือจิตที่เราไม่สามารถระลึกได้ ควบคุมไม่ได้ แต่จะทำได้ก็ต่อเมื่อมีสมาธิในระดับหนึ่ง หรือถูกระลึกขึ้นมาโดยสิ่งเร้า เช่น รูปภาพตอนคุณยังเด็กๆ เป็นต้นฯ จิตนี้เสมือนปลาที่ว่ายอยู่ภายในน้ำ อยู่ระหว่างผิวน้ำและก้นบึง
3.จิตไร้สำนึก (Unconscious) คือจิตที่เราไม่สามารถระลึกได้ เป็นจิตที่ไร้การควบคุม ไร้ความคิด ไร้ตัวตน เป็นจิตที่อยู่ลึกที่สุด เสมือนก้นบึงมหาสมุทร

จิตวิทยาที่สัมพันธ์กับกราฟฟิกดีไซน์

แบ่งออกเป็น 4 อย่างด้วยกัน คือ

1.สี (Color)
2.ขนาด (Size)
3.ลักษณะปรากฎ (Texture)
4.รูปแบบการทำงาน (Technical)

สี (Color)

สีเป็นสิ่งสำคัญสำหรับการกำหนดภาพลักษณ์ (Imagination) ของผลงาน เป็นสิ่งที่มีการเชื่อมต่อ (Resonance) ระหว่างผลงานและผู้สัมผัส (Human) โดยผู้สัมผัสจะถูกคล้อยตามไปทางจิตวิทยาด้านสีที่กำหนดในผลงาน เช่น ถ้าสีใช้โทนร้อน (Hot-Tone Color) ผู้สัมผัสจะมีกระบวนการทางความคิดภายในจิตสำนึกหรือจิตใต้สำนึก สร้างอารมณ์และความคิดขึ้นมาต่อชิ้นงาน โดยในที่นี้หมายถึงผลงานคือสิ่งเร้านั่นเอง

ผลงานหรือชิ้นงานของคุณอาจเป็นรูปปั้น รูปวาด รูปถ่าย หรือ รูปแบบเว็บไซท์ที่ได้ออกแบบไว้ก็ได้

บทบาทของสี อย่างที่ได้กล่าวมาข้างต้น สีมีบทบาทด้านการแสดงอารมณ์และความคิดมาเป็นอันดับหนึ่ง รองลงมาเป็นขนาดและลักษณะปรากฎ สีเป็นพื้นฐานเกี่ยวกับการควบคุมระบบในสมอง มีการเชื่อมต่อกับสิ่งเร้าตลอดเวลา เมื่อขณะคุณใช้สายตามอง กระบวนการทางสมองก็จะแปรตามความคิดที่เกิดขึ้น เช่น เด็กอายุ 3-4 เดือนที่นั่งเล่นของเล่นหลากสี เหตุที่ทำแบบนั้นก็เพื่อให้เด็กมีการควบคุมระบบในสมองด้วยตนเองตั้งแต่เกิด

เราต้องรู้จักการควบคุมสี ซึ่งเป็นปัจจัยสำคัญต่อการออกแบบหรือดีไซน์ชิ้นงานหรือผลงาน การหัดมองสีและเรียกชื่อจึงเป็นสิ่งสำคัญ คุณต้องรู้การควบคุมโทนสี การกะโทนสี การวางโทนสี การเรียงโทนสี เป็นต้นฯ

http://www.colourlovers.com/ เป็นเว็บไซท์หนึ่งที่มีนักเชี่ยวชาญด้านการออกแบบโทนสี จัดสรรโทนสีให้กับนักดีไำซน์เนอร์ทั้งมือใหม่และผู้ที่คิดโทนสีไม่ออก ซึ่งท่านสามารถเข้าไปดู และสังเกตการออกแบบโทนสีได้เป็นตัวอย่าง

ทฤษฎีสี

มีอยู่หลายทฤษฎี ซึ่งท่านสามารถหารายละเอียดได้ที่ Google แต่ในที่นี้ผมจะยกตัวอย่างทฤษฎีแค่ 2 อย่างที่ผมใช้อยู่เป็นประจำ

1.Percentage Color & Lightening

การกำหนดค่าสีออกมาเป็นสัดส่วนร้อยละ (เปอร์เซ็นท์) และการกำหนดความสว่างของสี เช่น 60/30/10 ที่ใช้กันทั่วไปตามการตกแต่งห้องหรือตกแต่งบ้าน^[2] หรือ 50/30/20 ที่ใช้กันตามเว็บไซท์ชื่อดัง (เช่น Facebook) หรือ 90/4/4/2 ซึ่งเป็นทฤษฎีสีของเว็บไซท์ Google นั่นเอง

การกำหนดค่าออกมาเป็นสัดส่วนร้อยละ มีประโยชน์ด้านการวัดขนาดและลักษณะด้วย อาจทำให้การทำงานง่ายขึ้น และมองภาพลักษณ์ได้ชัดเจนมากขึ้น

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

Verdin
by pinkcoma

2.Luvi’s Color Creation Laws

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

การทำตามทฤษฎีนี้จะต้องทำเป็นลำดับขั้นตอนอย่างน้อย 4 ขั้นตอนจาก 7 ขั้นตอน ซึ่งจะมีดังนี้

1.กำหนดขอบเขตของโทนสี คิดถึงอารมณ์และความรู้สึกของสี จากนั้นร่างสีออกมาตามจินตนาการที่คุณเห็น
2.วางสีโดยใช้สีที่คุณจินตนาการไว้ จากมากที่สุดไล่ไปจนถึงน้อยที่สุด (จะได้ออกมาเป็นสัดส่วนร้อยละ)
3.ค่อยๆเรียบเรียงสีที่ไม่มีความจำเป็นออกไป หรือมีความจำเป็นน้อยให้ไปอยู่ด้านหลังสุดของลำดับ
4.ลองค้นหาสีที่ใกล้เคียงกับสีหลัก แล้วค่อยๆใส่ลงไป อาจใช้ทฤษฎี Secant, Triangle, Quadable, Gradient ช่วยก็ได้ (โดยเทียบกับวงกลมสี) จากนั้นใส่เข้าไปในชุดสีที่คุณได้เรียงไว้
5.ใส่สีที่อยู่ตรงข้ามกับสีหลักของคุณอย่างน้อย 1 สีเข้าไป (เช่นสีหลังคุณเป็นสีน้ำเงิน คุณต้องใส่สีเหลืองเข้าไปด้วย)
6.ปรับความสว่างและความเข้มให้ไล่เรียงกัน ไม่ควรนำสีหลักของคุณเป็นสีสว่าง (ควรเข้มไว้เพื่อให้สีเด่น)
7.ถ้าเป็นคอมพิวเตอร์กราฟฟิก ให้จดจำ HEX Color Code ไว้ (เป็นเลขฐาน 16 เรียงกัน 6 ตัว) ส่วนถ้าเป็นกราฟฟิกที่ไม่เกี่ยวกับคอมพิวเตอร์ ให้หาชื่อสีที่ค้างเคียงและจดจำ (ซึ่งขั้นตอนนี้เป็นสิ่งสำคัญที่สุด เพราะคุณอาจนำกลับมาใช้ใหม่ได้อีกครั้ง)

บทความหน้า ผมจะมาสอนเกี่ยวกับการควบคุมสีและการเลือกใช้สี โดยใช้ Color Circle และการใช้ตารางสี HEX Color Code โดยใช้ชื่อสามัญในการเทียบ ซึ่งจะเป็นขั้น Advance สำหรับผู้เชี่ยวชาญด้วย (อาจมีการใช้ศัพท์เฉพาะปะปนเข้าไป) ส่วนวันนี้ผมขอตัวไปทำงานต่อละครับ

ป.ล. ก่อนไปจากบทความนี้ ให้สังเกตดีๆครับ เกี่ยวกับหน้าแรกของบทความนี้ จะเห็นว่ามีความผิดปกติไปเกี่ยวกับตัวอักษร “อ่านบทความนี้…” ซึ่งจะใหญ่กว่าทั่วไปที่เคยทำมา นั่นก็เป็นจิตวิทยาครับ แต่อยู่ในหมวดหมู่ของขนาดและลักษณะปรากฎ ซึ่งจะทำให้เนื้อหาดูน่าอ่านมากขึ้นครับ

LuviKunG

อ้างอิง :

[1] http://th.wikipedia.org/wiki/%E0%B8%88%E0%B8%B4%E0%B8%95%E0%B8%A7%E0%B8%B4%E0%B8%97%E0%B8%A2%E0%B8%B2

[2] http://www.thaihomelist.com/viewarticle.php?lg=th&pid=33

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

ปัญหา CSS3 ใน IE6

ช่วงนี้มีเทคนิคเจ๋ง ๆ โดยใช้ CSS3 ออกมาให้เห็นกันมากมายเลย (ใครสนใจเรียนรู้ CSS3 สามารถไปอ่านบทความสอน CSS ของเราได้เลยครับ) ซึ่งหลายคนคงทราบกันดีว่า CSS3 จะไม่ยอมแสดงผลในเว็บบราวเซอร์ชื่อดังอย่าง Internet Explorer 6-7 ครับ ก็เลยเกิดปัญหาเว็บดีไซเนอร์กล้า ๆ กลัว ๆ ไม่อยากใช้ CSS3 เพราะมันแสดงผลได้ไม่ครบทุกบราวเซอร์ โดยเฉพาะในประเทศไทยที่อัตราส่วนคนใช้ Internet Explorer เยอะจนน่าตกใจครับ

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

สำหรับวิธีแก้ปัญหาด้านบน เดี๋ยวไปอ่านทีเดียวครับ ตอนนี้มาดูอีกปัญหาหนึ่งของเว็บดีไซเนอร์ก่อน

ปัญหาการ Validate CSS ตระกูล -moz- หรือ -webkit

การที่เรา Validate CSS ผ่าน สำหรับเว็บดีไซเนอร์อย่างเราแล้วถือเป็นกำไรชีวิตอย่างนึงเลยครับ เป็นการแสดงฝีมือให้เห็นด้วยว่าเราเขียนโค้ดถูกต้องตามมาตรฐานนะ สำหรับใครไม่รู้ว่ามันคืออะไร ก็ไปอ่านที่ Validate CSS คืออะไร ได้เลยครับ ปัญหาที่เกิดขึ้น คือ ถ้าใครชอบใช้ CSS เฉพาะของบราวเซอร์ ตัวอย่างเช่นตระกูล -moz- หรือตระกูล -webkit- จะทำให้ Validate CSS ไม่ผ่านครับ (ใครอ่านบทความสอน CSS3 ของเราแล้วจะเห็นว่ามีการใช้ CSS พวกนี้ด้วย)

เรามาดูตัวอย่างโค้ดที่มี -moz- กับ -webkit- ก่อนครับ ถ้าเราต้องการทำขอบมน ๆ ในเว็บไซต์ด้วย CSS ปกติเราจะเขียนแบบนี้ครับ

#somebox {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

ซึ่ง border-radius บรรทัดแรก เป็นของ CSS3 ครับ หมายความว่าบรรทัดนี้จะ Validate ผ่าน แต่ปัญหาคือมันจะไม่แสดงผลขอบมนให้เห็นใน Firefox และบราวเซอร์ที่ใช้ Webkit ครับ เราเลยต้องใส่ -moz-border-radius กับ -webkit-border-radius ในบรรทัดต่อมาด้วย ซึ่งอันนี้ก็จะแสดงขอบมนใน Firefox และบราวเซอร์ที่ใช้ Webkit ครับ แต่สองบรรทัดนี้จะทำให้ Validate ไม่ผ่าน

ถ้าไม่สนเรื่อง Validate CSS ก็พอจะปล่อยผ่านไปได้ครับ ในเคสนี้ CSS ยังดูโอเค ไม่รกมากอยู่ แต่ถ้าอยากให้ขอบแต่ละด้านมนไม่เท่ากัน…

#this-is-ugly-code {
border-radius: 10px 5px;
-moz-border-radius:  10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius:  5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius:  5px;
}

จะเห็นว่าโค้ดเริ่มรกครับ เพราะ -webkit- กำหนดแบบบรรทัดเดียวไม่ได้นั่นเอง… คำถามต่อมา คือ แล้วถ้าเราต้องการให้มันแสดงผลบนบราวเซอร์อย่าง Opera และ Konquerer ด้วยล่ะ? โค้ดจะออกมาเป็นแบบนี้ (Konquerer เป็นเว็บบราวเซอร์ที่ไม่ค่อยดังครับ แต่ซัพพอร์ท CSS3 ได้ดีในระดับนึงเลย)

#this-is-the-end {
border-radius: 10px 5px;
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
-o-border-radius: 10px 5px;
-khtml-border-top-left-radius: 10px;
-khtml-border-top-right-radius: 5px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 5px;
}

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

eCSStender มาแล้ว แว้ว แว้ว แว้ว

สำหรับปัญหาต่าง ๆ ที่ผมอธิบายไปด้านบน ทั้งการใช้ CSS3 ใน IE6 และการ Validate CSS ตระกูล -moz- -webkit- สามารถแก้ได้ด้วย eCSStender ตัวนี้เลยครับ!

eCSStender เป็น Javascript Library ที่สร้างขึ้นมาเพื่อเว็บดีไซเนอร์โดยเฉพาะ ความสามารถหลักของมันมีเพียงอย่างเดียว คือ “แสดงผลความสามารถ CSS บางส่วนที่บราวเซอร์นั้น ๆ ยังไม่ซัพพอร์ท” ครับ

โดย eCSStender ซัพพอร์ทความสามารถ CSS ดังต่อไปนี้:

• CSS3 Selectors
• RGBa / HSLa (ทำสีโปร่งใส)
• @font-face (ใช้ฟ้อนต์นอกเหนือจาก Web-safe Fonts)
• border-radius (ใช้ทำขอบมน แต่ยังใช้ใน IE ไม่ได้)
• box-shadow (ใส่เงาให้กล่อง)
• CSS3 Transform (เปลี่ยนแปลงรูปร่างกล่องหรือตัวอักษร ตอนนี้ซัพพอร์ทแค่การหมุน เอาไว้หมุนใน IE6 ได้ด้วย)
• CSS3 Transition (เอาไว้เปลี่ยนแปลงรูปร่างเมื่อเราทำอะไรกับกล่อง เช่น ชี้กล่อง)

ความสามารถด้านบนทุกอัน ยกเว้น border-radius จะถูกทำให้ใช้ได้ใน Internet Explorer เวอร์ชั่น 6+ ทั้งหมดครับ

ปัญหาแรกแก้ไขได้แล้ว ทีนี้มาดูว่าปัญหาที่สองเราจะแก้ไขด้วย eCSStender ได้ยังไง…

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

#beautified-code {
border-radius: 10px 5px;
}

โดยสำหรับการแสดงผลในแต่ละบราวเซอร์ ตัว eCSStender จะไปจัดการให้เราเองครับ ทีนี้โค้ดของเราก็ Validate CSS ผ่านสบาย ๆ แล้ว

Download eCSStender + วิธีใช้

สามารถไปดาวน์โหลด eCSStender กันได้ที่ เว็บไซต์ eCSStender เลยครับ

สำหรับวิธีใช้ก็แกะซิปแล้วเอาไฟล์ .js ในนั้นไปใส่ในเว็บไซต์เราครับ จากนั้นใส่โค้ดเพื่อเรียกใช้ในหน้าเว็บไซต์เราเลย:

<script type="text/javascript" src="eCSStender.js"></script>
<script type="text/javascript" src="eCSStender.CSS3-backgrounds-and
-borders.js"></script>
<script type="text/javascript" src="eCSStender.CSS3-selectors.js">
</script>
<script type="text/javascript" src="eCSStender.CSS3-color.js"></script>

eCSStender จะแบ่งเป็นหลายส่วนครับ สามารถไปดูได้ว่า แต่ละส่วนของ eCSStender มีอะไรบ้าง ได้เลย ถ้าเราจะเลือกใช้แค่บางส่วนก็ใช้โค้ดแบบด้านล่างได้เลยครับ

<script type="text/javascript" src="eCSStender.js"></script>
<script type="text/javascript" src="eCSStender.CSS3-color.js"></script>

สำหรับบทความวันนี้ก็ขอจบแต่เพียงเท่านี้ครับ เขียนนานมาก ยังไงมีข้อสงสัยอะไรก็ถามได้เลยนะครับผม~!!

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