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

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

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

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

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

สวัสดีครับ ขออภัยที่ไม่ค่อยได้มาเขียนนะครับ เพราะหลังจากปิดเทอมก็ต้องรีบปั่นงานให้ทัน Deadline ไม่ได้หยุดพักกันเลยทีเดียว

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

บทความนี้จะแบ่งเป็นหลายส่วน ภาค 1 นี้จะพูดถึงโปรแกรมที่ใช้เขียนโค้ด HTML & CSS กันก่อนว่าผมใช้โปรแกรมอะไร ต้องขออภัยคนที่ใช้ Mac OS ด้วยนะครับเพราะผมใช้ Windows เลยจะแนะนำแค่โปรแกรม Windows ครับผม

ออกตัวไว้ก่อนว่าเว็บดีไซเนอร์แต่ละคนมีความถนัดและไม่ความชอบไม่เหมือนกัน เพราะฉะนั้นเครื่องมือที่ใช้ทำเว็บจะแตกต่างกันบ้างครับ (เช่น บางคนถนัด Dreamweaver ที่มี Preview เว็บให้ดูด้วย แต่อีกคนชอบเขียนโค้ดใน Notepad มากกว่า เป็นต้นครับ)

โปรแกรมเขียนโค้ดที่ดีควรทำอะไรได้บ้าง

• Syntax-Highlight
  ใส่สีที่แตกต่างกันบนแท็ก HTML / CSS ช่วยให้โค้ดอ่านง่ายขึ้นครับ ตอนอ่านจะได้ไม่สับสน
• File Explorer
  หน้าต่างลิสต์โฟลเดอร์ / ไฟล์เอาไว้เลือกไฟล์ที่จะเปิดมาแก้ได้ง่าย ๆ เหมาะกับงานที่มีหลาย ๆ ไฟล์ เช่น ทำธีม WordPress
• Project Management
  แบ่งงานเป็นโปรเจค เหมาะกับคนที่รับทีละหลาย ๆ งาน ข้อดีคือเราจะแยกแยะได้ง่ายเวลาต้องทำโปรเจคนู้นแล้วกลับมาทำโปรเจคนี้ต่อ โปรแกรมจะเปิดไฟล์ / โฟลเดอร์ของโปรเจคนั้น ๆ ขึ้นมาให้เลย
• Themes
  โปรแกรมเปลี่ยนธีม (สีของ Background / สีของ Syntax-Highlight) ได้ อันนี้จริง ๆ แล้วแต่คนชอบครับ เพราะผมชอบเขียนโค้ดบน Background สีเข้ม ถ้าเป็น Background สีขาวมันดูแสบตา
• Autocomplete
  เป็นการเดาโค้ดได้ว่าเราจะพิมพ์อะไรต่อ แล้วเติมให้เลยครับ เช่นว่าผมจะพิมพ์ <div>บลาๆ</div> แต่แค่พิมพ์ถึง </ โปรแกรมก็รู้แล้วว่าจะพิมพ์ </div> เป็นต้นครับ
  อีกตัวอย่างนึงคือ พอพิมพ์โค้ด CSS ว่า list-style: เสร็จก็จะมี properties ต่าง ๆ ที่ไว้ใส่ใน list-style: โผล่ขึ้นมาให้เห็นเลย
• Multiple Files Opening
  เปิดได้ทีละหลาย ๆ ไฟล์พร้อมกัน โปรแกรมส่วนใหญ่จะทำได้อยู่แล้วครับ มีประโยชน์มากสำหรับงานใหญ่ ๆ เช่นงานแนว Web Application เราก็เลือกเปิดเฉพาะไฟล์ที่เกี่ยวกับฟังก์ชั่นที่กำลังทำอยู่ก็พอครับ
• Free or Affordable Price
  อันนี้สำคัญที่สุดเลยครับ (สำหรับคนที่ทำงานด้านนี้จริงจัง) โปรแกรมควรจะมีราคาในระดับที่รับได้ หรือถ้าฟรีเลยก็ยิ่งดีครับ ช่วยลด Cost ในการทำเว็บดีไซน์ได้มากเลย

ใช้โปรแกรมเขียนโค้ด HTML CSS ตัวไหนมาบ้าง แต่ละตัวเป็นยังไง?

ตอนทำเว็บแรกเริ่มเลยผมใช้ EditPlus ครับ เชื่อว่าน่าจะเคยได้ยินกัน และบางคนคงใช้อยู่ด้วย แต่มันเป็นโปรแกรมเสียตังค์ครับ และฟีเจอร์ต่าง ๆ ของโปรแกรมสามารถหาได้ในโปรแกรมเขียนโค้ดแจกฟรีทั่วไปแล้วครับ (ยกเว้นเอามา Compile Java ซึ่งสะดวกดี… แต่ไม่เกี่ยวกับ HTML CSS นี่เนอะ)

ต่อมาหลังจากผมได้รู้จัก Notepad++ ก็ใช้โปรแกรมนี้ทำงานมายาวเลยครับ ข้อดีคือธีมสวย (ชอบธีม Monokai ของมันมาก) โปรแกรมเบา โหลดเร็ว ฟังก์ชั่นพร้อมมาก ๆ แต่ข้อเสียคือทำเป็นโปรเจคไม่ได้ และความสามารถด้าน Autocomplete ไม่ค่อยเวิร์กครับ (เช่นว่าไฟล์ .php จะไม่มี autocomplete โค้ด HTML ให้เลย)

หลังจากนั้นผมก็หนีไปใช้ Mac OS ชั่วคราวครับ ใช้โปรแกรมชื่อ Coda ที่อินเตอร์เฟซสวยงาม + FTP เข้าไปแก้ไฟล์ได้เลย ชอบมากครับ ก่อนจะมาเจอ Espresso ที่ชอบระบบโปรเจคของโปรแกรมนี้มากกว่า ซึ่งใช้ไปสักพักนึง Macbook พังแถม Apple ไม่แคร์ครับ เลยกลับมาใช้ Windows

แน่นอนว่าใช้ Notepad++ เหมือนเดิมครับ โปรแกรมนี้โหลดเร็วดีชอบมากครับ เปลี่ยนธีมได้ด้วย แต่ด้วยเรื่อง Autocomplete นี่แหละที่เป็นปัญหาใหญ่ (จริง ๆ ก็ไม่ใหญ่ครับ แต่ถ้า Autocomplete ได้รับรองงานเร็วกว่าเดิมมากครับ)

เพื่อนแนะนำ Dreamweaver ให้ลองใช้ครับ ส่วนตัวไม่ชอบ Dreamweaver ตรงที่ดูมันใหญ่ โหลดช้า และฝังใจมาตั้งแต่ตอนเรียนว่าโปรแกรมนี้ไว้ใช้ด้าน WYSIWYG (What you see is what you get คือตกแต่งเหมือนใน Word เลย ไม่ต้องรู้โค้ด จิ้ม ๆ เครื่องมืออย่างเดียว)

อย่างสุดท้ายที่ไม่ชอบคือ มันเปลี่ยนธีมไม่ได้ครับ ไม่ชอบเขียนโค้ดใน Background ขาวครับ (แอบ Art 55)

แต่มารู้ทีหลังว่า Dreamweaver ทำธีมเองได้นะครับ เพื่อนคนที่แนะนำทำธีมสีดำมาให้ใช้เลย ก็เลยเอาไปใช้กับโปรเจค Web Application เว็บนึงครับ ชอบมาก ๆ โปรแกรมมี File Explorer ให้พร้อม และ Autocomplete ได้เทพมาก เสียอย่างเดียวตรงที่ราคาออกจะสูงไปนิดครับ

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

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

สนใจ Komodo Edit 6 ไปหาได้ที่ไหน?

สำหรับท่านที่สนใจดาวน์โหลดโปรแกรมนี้ไปลองใช้กัน ไปที่
Komodo Edit: Free Open Source Editor

กดที่ปุ่ม Download Komodo Edit นะครับ ส่วนโปรแกรม Komodo IDE จะเป็นโปรแกรมเสียตังค์ของตระกูล Komodo ครับ เราเขียนโค้ด HTML & CSS ใช้แต่ตัว Edit ก็พอครับ

สำหรับท่านที่ต้องการดาวน์โหลดธีมสำหรับใช้ใน Komodo Edit เข้าไปโหลดที่: Kolormodo.com ได้เลยครับ มีธีมสวย ๆ ให้เลือกโหลดไปใช้กันฟรี ๆ

แล้วถ้าเขียน PHP ใช้โปรแกรมอะไรดี?

โปรแกรม Komodo Edit ไว้เขียน PHP ได้ด้วยครับ และมี Autocomplete เรียบร้อยเลย เรียกได้ว่าโปรแกรมเดียวทำได้ทั้ง Backend / Frontend เลยครับ

สุดท้ายนี้ถ้าท่านใดมีโปรแกรมที่ใช้อยู่แล้วถนัดมือ สามารถแนะนำมาได้เลยครับ ผมจะได้ไปลองแล้วเอามาเขียนบอกครับ ^^

ขอบคุณที่ติดตามอ่านมาจนจบคร้าบ ตอนต่อไปจะพูดถึงเครื่องมือไว้เทสดีไซน์ใน Browser ต่าง ๆ

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

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

ตอนนี้การเขียน HTML5 และ CSS3 ก็มาแรงมาก ๆ ถ้ามี Editor เอาไว้ช่วยเขียนจะทำงานได้เร็วขึ้นมากเลยครับ

โปรแกรมที่ผมใช้บ่อย ๆ ตอนเขียน HTML กับ CSS บน Windows ก็คือ:

Notepad++ สุดยอด Text Editor สำหรับเขียน HTML/CSS/PHP

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

• Highlight Syntax (ใส่สี syntax แต่ละส่วนแยกเป็นคนละสี เพื่อให้อ่านโค้ดได้สะดวกขึ้น) ได้หลายภาษาเลยครับ ตั้งแต่ Assembly ยัน PHP เพราะงั้นโปรแกรมเมอร์ทั้งมือเก่ามือใหม่ ทั้งคนที่เขียนเว็บหรือเขียนโปรแกรมทั่วไป ก็ได้ประโยชน์จากโปรแกรมนี้แน่นอน!!
• ขนาดโปรแกรมเพียง 14 mb และถ้าอัด Zip เหลือ 4 mb เท่านั้น!
• ไม่ต้องติดตั้ง เป็นโปรแกรมแบบ Portable ใส่ในแฟลชไดรฟ์ก็พกพาไปใช้ได้ทุกที่ (แบบติดตั้งก็มีให้ใช้ครับ แล้วแต่ชอบเลย)
• ความสามารถต่าง ๆ เทียบเท่าโปรแกรมเสียเงิน โดยเฉพาะอย่างยิ่งความสามารถพิเศษมากมายในเมนู TextFX และ Plugins ของโปรแกรมทำให้จัดการโค้ดสะดวกขึ้นมาก และมีความสามารถที่โปรแกรมเสียเงินหลาย ๆ ตัวไม่มีอีกด้วย
• เปลี่ยน Theme ได้! สำหรับคนที่เบื่อการเขียนโค้ดตัวอักษรสีดำบน Background สีขาวแล้ว ลองมาเขียนโค้ดใน Background เข้ม ๆ บ้างจะติดใจครับ (ตอนนี้ผมก็ใช้แบบ Background สีดำอยู่ครับ ชื่อธีม Monokai)
• ข้อสุดท้าย มันเป็นโปรแกรมฟรี ฟรีและดีจริง ๆ ช่วยให้งานทำเว็บไซต์สบายขึ้นอีกเยอะเลยครับ และด้วยความที่มันไม่มีเวอร์ชั่นเสียตังค์ ความสามารถทุกอย่างของโปรแกรมใช้ได้เต็มที่ ไม่มีล็อคครับ ไม่เหมือนอีกหลาย ๆ โปรแกรมที่มีทั้งเวอร์ชั่นฟรี กับเวอร์ชั่นเสียตังค์

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

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

โปรแกรมที่อยู่ในลิสต์นี้มีทั้งโปรแกรมฟรี และไม่ฟรีครับ นอกจากนั้นบางตัวก็ไม่ใช่แค่ Text Editor แต่ทำหน้าที่เป็น IDE (integrated development environment) หรืออธิบายง่าย ๆ ว่ามันเป็น Text Editor ที่สามารถ compile/debug/version control และอื่น ๆ อีกมากมายครับ ซึ่งเอาจริง ๆ เราใช้แค่ Text Editor ก็เพียงพอแล้วครับ เพราะ IDE จะเหมาะกับโปรแกรมเมอร์มากกว่า

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

หลายคนอาจจะเคยได้ยินข่าวนานมาแล้วว่า มีคนทำเกมส์แบบ DOOM ด้วย HTML5 ซึ่งความจริงแล้วก็ไม่เชิงเป็นเกมครับ เป็นการทดลองใช้ความสามารถ Canvas ใน HTML5 ซึ่งเขียนมาตั้งแต่ปี 2005 แล้ว!!

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

ตัวอย่างเกมส์ที่อาจจะเคยเล่นกันมาแล้วก็คือ Pacman ที่อยู่ในโลโก้ Google ซึ่งทำด้วย HTML5 ครับ ตัวนี้กลายเป็นกระแสใน Twitter ไปพักนึงเลยครับ

อย่าเพิ่งคิดว่าเกมส์ที่สร้างด้วย HTML5 จะต้องใช้กราฟฟิกประมาณเกมส์ 8-bit เก่า ๆ นะครับ ถึงตัว Canvas จะเอาไว้วาดรูปแบบง่าย ๆ ได้ก็จริง แต่ก็สามารถนำกราฟฟิกที่ทำไว้แล้วมาใช้ได้นะครับ เพราะบางเกมส์ใช้กราฟฟิกแบบ 3 มิติสวยสด อนิเมชั่นเนียนมาก (เนียนไม่เนียนนี่คิดว่าขึ้นอยู่กับ RAM ของเครื่องครับ แล้วก็ขึ้นอยู่กับบราวเซอร์ด้วย ผมใช้ Google Chrome เล่นแล้วลื่นกว่าเล่นบน Firefox เยอะเลยครับ)

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

[button color=green size=medium link=http://www.webdeveloperjuice.com/2011/01/09/14-html5-games-to-make-you-stand-still/ target=blank]14 เกมส์สร้างด้วย HTML5 ที่จะทำให้คุณติดใจ[/button]

[button color=orange size=medium link=http://html5games.com/ target=blank]รวมเกมส์ HTML5 ทุกประเภท ทุกรูปแบบ[/button]

]]> http://www.designil.com/%e0%b9%81%e0%b8%99%e0%b8%b0%e0%b8%99%e0%b8%b3-%e0%b9%80%e0%b8%81%e0%b8%a1%e0%b8%aa%e0%b9%8c-html5-canvas.html/feed 8 http://www.designil.com/%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-javascript-css3-ecsstender.html http://www.designil.com/%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-javascript-css3-ecsstender.html#comments Wed, 23 Jun 2010 05:13:44 +0000 designil http://www.designil.com/?p=396

สวัสดีครับ คราวนี้ไปเจอบทความในเว็บไซต์ 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 โพสก่อนนะคร้าบ)

สำหรับใครที่ยังไม่รู้ว่า CSS3 คืออะไร และทำอะไรได้บ้าง แนะนำให้ไปลองอ่านบทความสอนพื้นฐาน CSS3 กันก่อนครับ

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

สนใจคำสั่งไหนก็คลิกบนหัวข้อคำสั่งนั้นเลยครับ จะมีโค้ดตัวอย่างอย่าง และข้อมูลเกี่ยวกับคำสั่งนั้นโผล่ขึ้นมาให้ดู

ในการเข้าชมเว็บไซด์นี้ แนะนำให้ใช้บราวเซอร์ใหม่ ๆ หน่อยนะครับ เว็บบราวเซอร์ที่เค้าแนะนำก็คือ Chrome 4+, Safari 4+, หรือ Firefox 3.6+ ครับผม (สำหรับคนที่อยากเป็นเว็บดีไซน์เนอร์ แต่ใช้ Internet Explorer มาตลอด… แนะนำให้เปลี่ยนด่วนเลยครับ!)

>> CSS3 Click Chart by Impressive Webs <<

สำหรับท่านที่ไม่ได้อ่านตอนที่ 1 สามารถตามอ่านได้ที่นี่เลยครับ: [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 1)

บทความและภาพประกอบบางส่วนนำมาจาก บลอค W3Avenue หากท่านใดชำนาญภาษาอังกฤษ อยากฝึกภาษา ก็สามารถตามลิงค์ไปอ่านบทความต้นฉบับได้เลยครับ

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

คราวที่แล้วเราพูดถึงเรื่องการเขียน Semantic Markup ใน HTML5 กันไปแล้ว คราวนี้มาพูดถึง Form (แบบฟอร์มที่กรอก ๆ กันบนหน้าเว็บไซต์นั่นเอง) มาดูกันว่าใน HTML5 ฟอร์มจะเจ๋งขึ้นขนาดไหน

HTML5 Form

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

ความสามารถใหม่ ๆ ของฟอร์ม HTML5

• Input Type แบบใหม่
  color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, และ url
• Attribute ใหม่
  required, autofocus, pattern, list, autocomplete และ placeholder
• Element ใหม่
  <keygen>, <datalist>, <output>, <meter> และ <progress>

เนื่องจากว่าบทความนี้อธิบายความสามารถของ HTML5 คร่าว ๆ เลยยังไม่ขอลงรายละเอียดนะครับ เอาไว้โอกาสหน้าจะนำแต่ละตัวมาให้ดูกันแบบละเอียดครับ

เราลองมาดูโค้ดตัวอย่างของการใช้ความสามารถใหม่ ๆ ของ HTML5 กันนะครับ เมื่อแสดงผลในเว็บบราวเซอร์ที่รองรับ HTML5 Form ได้ (ในตอนนี้คือ Opera) ก็จะแสดงผลตามในรูป HTML5 Form Demo Image เลยครับ

ส่วนคนที่อยากลองเทสในบราวเซอร์ตัวเองว่าซัพพอร์ท HTML5 Form ได้ขนาดไหน (ลองเอาไปเปรียบเทียบกับในรูป) ก็เชิญที่ HTML5 Form Demo Page เลยครับ

<form>
 <fieldset>
 <legend>New Attributes</legend>
 <p>
 <label>Required:</label>
 <input type="text" name="html5requied" required="true">
 <small>Works in Opera & Chrome</small>
 </p>
 <p>
 <label>AutoFocus:</label>
 <input type="text" name="html5autofocus" autofocus="true">
 <small>Works in Opera, Chrome & Safari</small>
 </p>
 <p>
 <label>PlaceHolder:</label>
 <input type="text" name="html5placeholder" placeholder="This Will Show in WebKit">
 <small>Works in Chrome & Safari</small>
 </p>
 <p>
 <label>Input Pattern:</label>
 <input type="text" pattern="[0-9][A-Z]{3}" name="html5pattern" required title="Enter a digit followed by three uppercase letters"/>
 <small>Works in Opera & Chrome</small>
 </p>
 <p>
 <label>Multiple Files:</label>
 <input type="file" name="html5multiplefileupload" multiple>
 <small>Works in Chrome, Safari & Firefox</small>
 </p>
 <p>
 <label>List:</label>
 <input type="text" name="html5textwithdatalist" list="colors">
 <datalist id="colors">
 <option value="Red">
 <option value="Green">
 <option value="Blue">
 </datalist>
 <small>Works in Opera</small>
 </p>
 </fieldset>

 <fieldset>
 <legend>New Input Types</legend>
 <p>
 <label>Email:</label>
 <input type="email" name="html5email">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>URL:</label>
 <input type="url" name="html5url">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Number:</label>
 <input type="number" name="html5number" min="1" max="10" step="1" value="1">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Range:</label>
 <input type="range" name="html5range" min="-100" max="100" value="0" step="10">
 <small>Works in Opera, Chrome & Safari</small>
 </p>
 <p>
 <label>Time:</label>
 <input type="time" step="900" name="html5time">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Date:</label>
 <input type="date" name="html5date">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Month:</label>
 <input type="month" name="html5month">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>Week:</label>
 <input type="week" name="html5week">
 <small>Works in Opera</small>
 </p>
 <p>
 <label>DateTime:</label>
 <input type="datetime" name="html5datetime">
 <small>Works in Opera</small>
 </p>
 </fieldset>

 <div><button>Submit</button></div>
</form>

HTML5 Audio & Video

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

หมายเหตุ: ไฟล์เสียง/วีดิโอพวกนี้ใช้ Firefox ก็รันได้นะครับ ไม่ต้องใช้ Opera อย่างเดียวเหมือน HTML5 Form

ก่อนอื่นมาดูกันว่าไฟล์เสียง/วีดิโอนามสกุลไหนบ้างที่ซัพพอร์ทบนเว็บบราวเซอร์:

• ไฟล์เสียง: ogg (ogg, oga), mp3, wav, AAC
• ไฟล์วีดิโอ: ogg (ogv), H.264 (mp4)

เราสามารถตั้งไฟล์ได้มากกว่า 1 นามสกุลในแท็กอันเดียว เพื่อให้บราวเซอร์เลือกไปเล่นไฟล์นามสกุลอื่นกรณีที่ไม่ซัพพอร์ทไฟล์แรกได้อีกด้วย ลองดูตัวอย่างโค้ดสำหรับรันไฟล์เสียงอันนี้:

Audio Player

<audio controls>
<source src="demo-audio.ogg" />
<source src="demo-audio.mp3" />
</audio>

จะเห็นได้ชัดว่าโค้ด HTML5 สั้นมาก ๆ และยังรองรับการกำหนดหลายไฟล์อีกด้วย

ด้านบนนี้เป็นรูปนะครับ สามารถเข้าไปดูของจริงบนบราวเซอร์ได้ที่ HTML5 Audio Demo

Video Player

<video width="320" height="240" controls preload="none" poster="videoframe.jpg">
 <source src="demo-video.mp4" type="video/mp4" />
 <source src="demo-video.ogv" type="video/ogg" />
</video>

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

โดยถ้าอยากลองทดสอบของจริงบนเว็บบราวเซอร์ของคุณ ก็ลองแวะไป HTML5 Video Demo ได้เลยครับ

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

HTML5 Graphics with Canvas

นอกจากเรื่องของ HTML5 Video ที่โด่งดังแล้ว ความสามารถในการวาดรูปบน HTML5 ก็เป็นที่พูดถึงไม่แพ้กัน โดยเท่าที่ผมลองไปศึกษามาดูนั้น การวาดรูปใน Canvas ต้องใช้ Javascript วาดอีกที เพราะฉะนั้นควรเขียน Javascript พื้นฐานเป็นนิดหน่อย และมีความรู้เรขาคณิตเบื้องต้นครับ

ข้อดีของ Canvas ก็คือ บราวเซอร์ที่รองรับมีเยอะมากครับ (Firefox 3, Safari 3.1, Chrome 2, และ Opera 9.6) ซึ่งสำหรับ Internet Explorer ที่ไม่รองรับ เราสามารถใช้เทคนิค Javascript ที่เรียกว่า ExplorerCanvas ในการแสดงผลบน IE ได้ครับ

เราลองมาดูตัวอย่างโค้ดการใช้ Canvas กันครับ โค้ดจะยาวสักหน่อยครับ:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>HTML5 Canvas Demo</title>
 <link rel="stylesheet" href="html5reset.css" type="text/css" />
 <link rel="stylesheet" href="html5simple.css" type="text/css" />
 <!--[if lt IE 9]>
 <script src="html5.js"></script>
 <script src="excanvas.js"></script>
 <![endif]-->
 <script type="text/javascript">
 function draw(){
 var canvas = document.getElementById('mycanvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');

 // Draw Rectangle
 ctx.fillStyle = "rgb(255,0,0)";
 ctx.fillRect (10, 10, 100, 100);

 // Draw Circle
 ctx.fillStyle = "rgb(0,255,0)";
 ctx.beginPath();
 ctx.arc(125,100,50,0,Math.PI*2,true);
 ctx.fill();
 ctx.closePath();

 // Draw Custom Shape With Lines
 ctx.fillStyle = "rgb(0,0,255)";
 ctx.beginPath();
 ctx.moveTo(125,100);
 ctx.lineTo(175,50);
 ctx.lineTo(225,150);
 ctx.fill();
 ctx.closePath();

 // Draw Image From External File
 var myImage = new Image();
 myImage.onload = function(){
 ctx.drawImage(myImage, 220, 10);
 }
 myImage.src = "sample.jpg";

 }
 }
 </script>
 <style type="text/css">
 canvas {
 border: 5px solid #ccc;
 background: #000;
 }
 </style>
</head>
<body onload="draw();">
 <header>
 <h1>HTML5 Canvas Demo</h1>
 </header>

 <figure>
 <canvas id="mycanvas" width="300" height="200">Fallback content, in case the browser does not support Canvas.</canvas>
 <figcaption>Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)</figcaption>
 </figure>
</body>
</html>

เวลาแสดงผลจะออกแบบเป็นแบบนี้รูปด้านล่างนี้ครับ

จากโค้ด จะเห็นได้ว่าเราใช้วิธีสร้าง <canvas> ขึ้นมา แล้วเอา Javascript วาดรูปลงไปในแท็ก <canvas> ครับ ใครอยากลองเทสบนบราวเซอร์ตัวเองก็แวะไปที่ HTML5 Canvas Demo นะครับ

สำหรับบทความตอนที่ 2 ก็ขอจบลงแต่เพียงเท่านี้ก่อนครับ ในตอนหน้าจะเป็นตอนสุดท้ายแล้วครับ (ถ้ายังมีคนอ่าน)

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