CSS Design เพื่อคนไทย : ThaiCSS.com

เขียน CSS ให้แสดงผลหลายแบบ ใน HTML แบบเดียว

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

จากรูปที่เห็นอยู่ด้านบนนั้น คนส่วนใหญ่ที่เขียน HTML มานักต่อนักมักจะมองในรูปแบบการแสดงผลเพียงด้านเดียว คือ ให้แสดงผลสำหรับผู้บริโภคผ่านทาง Screen เท่านั้น โดยการวาง HTML จะนำ Element ที่เป็น <img/> ขึ้นก่อนเสมอ แต่ตามหลักการการเข้าถึงแล้ว เนื้อหาใดๆ ที่โผล่ขึ้นมานั้น ควร หรือ จะต้องมี heading level ลำดับ ใด ใด นำหน้าก่อนเสมอ เพื่อบ่งบอกว่า เนื้อหานั้น เป็นเนื้อหาที่เกี่ยวข้องกับอะไร

pornantha

HTML Accesskey CSS Image Replacement and Outline

จะมีสักกี่เว็บไซท์ในเมืองไทย ที่เราสามารถใช้ Keyboard กับ Attribute accessky ของ HTML ในหน้าเว็บนั้นได้ หรือว่าเราต้องการใช้ปุ่ม [TAB] ของ คีย์บอร์ด กดเดินหน้า ถอยหลังเพื่อที่จะไปยังเนื้อหาส่วนต่างๆ ในหน้าเว็บอย่างสบายอารมณ์

เพราส่วนใหญ่เวลาเรากด [TAB] ไปแล้วก็ยังไม่รู้ว่า จุดที่เรากำลัง :FOCUS นั้นมันอยู่หน้าไหน เพราะว่า ค่า outline มันไม่แสดงผลออกมา

วันนี้ผมขอพูดถึงเรื่อง Access Key ของ HTML และ Outline ของ CSS

[accesskey]

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

pornantha

CSS Horizontal Navigation หรือ การทำ CSS menu แบบ Dropdown

เรื่องมันมีอยู่ว่า ทำไม มันใช้ได้ กับการเขียน CSS Dropdown Navigation แบบนี้ เพราะก่อนหน้านี้ ผมก็เคยลองเขียนตาม ทฤษฎีและ Module ของ CSS ที่ W3C มีมาให้ทุกอย่าง มันก็แสดงผลไม่ถูกต้อง กับบราวเซอร์ อย่าง IE7 หรือ IE8

แต่ เมื่อสองสามวันที่ผ่านมา ผมลองเขียนดูอีกที "มันดันใช้ได้ ไม่มีปัญหา"

สำหรับคนที่เคยลองเขียน CSS Dropdown Menu มาแล้วคงจะเจอปัญหาที่มันเกิดขึ้นกับ IE7 หรือ IE8 เพราะ เมื่อเวลาที่เรา เอาเมาส์ ไป :hover ที่ <li> ซึ่งเป็น Nest Element ของ <ul> แล้ว มันโผล่ออกมา แต่พอเอาเมาส์เลื่อนไปจะไปคลิ๊กที่ลิงค์ มันดันหายไปก่อนที่เราจะได้คลิ๊กที่ ลิงค์ ตามที่เราต้องการ

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

ลองไปดูตัวอย่างกันก่อน

ตัวอย่าง CSS Navigation หรือ การทำ CSS menu แบบ Dropdown

ผมขออนุญาต ว่ากันสั้นๆ สำหรับเรื่องนี้นะครับ จากโค้ด CSS

pornantha

CSS Positioning Layout กับอนาคตที่ยังไม่แน่นอน

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

มันยังไงกันแน่ กับเรื่องการใช้ Position สำหรับหน้าเว็บ อาจจะงง งง กัน แน่หละครับ อะไรที่เรายังไม่รู้ ไม่ทราบ ไม่เห็น ไม่เข้าใจมันย่อม งง เป็นธรรมดา ค่อยๆ เรียนรู้ ค่อยๆ ทำความเข้าใจ เดี๋ยวมันก็หายงง ไปเอง

ไม่ใช่แค่ Position เท่านั้น ที่จะมาเป็น พระเอก สำหรับการเขียน Layout ของเว็บในอนาคต Display คืออีกหนึ่ง Property ที่มาร่วมด้วยช่วยกัน ทำตัวเป็นพระรองให้เราได้ใช้งาน

หลักการพื้นฐานง่ายๆ ก่อนที่จะเข้าสู่วังวนแห่งความมึนงง คือ "ให้เลิกคิดไปตั้งแต่ตอนนี้ว่า CSS เอาไว้จัดหน้าเว็บ อย่างเดียว" CSS มีไว้เพื่อจัดการหน้าเอกสารให้กับทุก Devices ที่ถูกวางโครงสร้างการนำเสนอด้วยภาษา HTML ในโลกของ http เพราะเมื่อขึ้นด้วย Hypertext Transfer แล้วหละก็ มันก็คือ HTML วันยังค่ำ

pornantha

การทำลิสต์รูปภาพขนาดย่อ โดยที่ไม่มีเครื่องมือย่อขนาด ด้วย css

ผมยังนั่งงงอยู่กับชื่อหัวข้อบทความที่ผมเพิ่งตั้งไป เพราะไม่รู้จริงๆ ว่าจะตั้งชื่อบทความนี้ว่ายังไง อาจจะด้วยเรื่องของความด้อยในด้านภาษาไทย ไม่แกร่งในภาษาอังกฤษ หัวเรื่องบทความก็เลยออกมาในลักษณะนี้ ในเมื่อหัวข้อเรื่องไม่สามารถที่จะอธิบายให้เห็นภาพได้ เอาเป็นว่า ดูภาพตัวอย่าง แล้วเดี๋ยวผมจะค่อยๆ สาธยายเอาเองแล้วกันครับ

จริงๆ แล้วมันไม่มีอะไรมากเลย ในเรื่องที่ผมเขียนในตอนนี้

ปัญหา

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

แต่โลกมันไม่ได้สวยงามอย่างนั้น เมื่อเราไม่มี Function การย่อ ขยาย หรือ Crop รูปภาพก่อนนำขึ้นไปบน Server เพื่อเอาไปแสดงผลทางหน้าเว็บ เรา เหล่า CSS Designer ต้องหาทางแก้ไขเอาเอง

pornantha

รู้จักการวางกลยุทธ์เนื้อหาสำหรับเว็บไซต์

การวางกลยุทธ์เนื้อหาที่ใช้กับเว็บไซต์นั้นมีมานมนานพอ ๆ กับการผลิตเว็บไซต์ออกไปสู่โลกออนไลน์ แต่บทบาทของการวางกลยุทธ์เนื้อหาจะเริ่มมามีบทบาทเด่นชัดมากขึ้นในช่วง 2 - 3 ปีที่ผ่านมา เพราะอะไร? ... แน่นอนครับจำนวนผู้ใช้งานของอินเตอร์เน็ต และ จำนวนผู้ประกอบการธุรกิจบนโลกออนไลน์ มีเพิ่มมากขึ้นเป็นหลายเท่าตัว ปี ต่อ ปี ทำให้การแข่งขันกันของผู้ประกอบการต่าง ๆ บนโลก online มีเพิ่มมากขึ้นเรื่อย ๆ อัตราที่จะเกิด และ ดับในวันเดียว 100 เปอร์เซ็นต์ ก็มีเช่นกัน

คนที่คิดริเริ่มก่อน คิดผลิตภัณฑ์ หรือ บริการ ออนไลน์ได้ก่อนใครก็จะมีภาษีได้ถือไพ่เหนือกว่า ยิ่งถ้าได้การวางแผนระบบโครงสร้างพื้นฐานมาอย่างดี (Infra Structure) ก็ยิ่งมีลุ้นว่าจะอยู่ได้ยืนยาว หรือ ตลอดไป แต่กระนั้นก็ยังคงต้องพึ่งพาเนื้อหา (Content) ที่ดีเพื่อดึงดูดใจกลุ่มเป้าหมายด้วย (End Users) คนที่มาทีหลังก็คงต้องทำการบ้านการอย่างหนักกันหน่อย ว่าจะทำอย่างไรให้เกิดความแตกต่างในผลิตภัณฑ์ของตน (Differentiate) กับบริษัทคู่แข่งเราทราบกันแล้วว่าปัจจุบันนี้ เนื้อหา สามารถถูกนำไปเผยแพร่ได้หลายช่องทาง (Channel) และ ในหลาย ๆ สื่อ (Media) ต่อไปนี้คงต้องวางแผนกันรอบคอบหน่อย ปวดหัวมากขึ้นกันหน่อย และ ต้องใช้ผู้เชี่ยวชาญฌฉพาะทางมากขึ้นหน่อย คงจะหมดยุคสมัยของมนุษย์เป็ดแล้วอย่างแท้จริง ต้องขอบคุณ Sir Tim Berners Lee ที่สร้าง WWW ให้เราได้ใช้กัน สื่อ ตัวนี้เป็นสื่อที่แพร่กระจายตัวได้รวดเร็ว และ เข้าถึงมนุษยชาติได้ทุกท้องที่ทุกเพศทุกวัย หลาย ๆ บริษัท หรือ นักธุรกิจคงเห็นแล้วว่ามันเป็นของที่ลงทุนถูกแสนถูกแต่กำไรที่จะได้กลับมานั้นมหาศาล ถ้าทำการบ้านมาดี

radiz

ยุคสมัยของ CSS HTML Layout

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

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

ผมขอแบ่งออกเป็น 3 ยุคใหญ่ๆ ดังนี้

Table Layout
Floating Layout (Tableless layout)
Positioning Layout

pornantha

อาชีพเขียน CSS

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

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

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

ไม่ฉะนั้น มันจะหลุดกลุ่มเป้าหมาย

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

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

อีกทั้ง ยังไม่มีงานวิจัยที่ระบุชัดเจนแน่นอน ว่าพืชชนิดนี้ ผ่าเหล่ามาจากสายพันธุ์ไหน แต่มีการยืนยันแล้วว่า "ไม่น่าจะสูญพันธุ์" ง่ายๆ แน่นอน

ช่วงนี้จึงจัดว่า เป็นยุคแรกของสิ่งมีชีวิตที่เรียกว่า "พืชสายพันธุ์ สยามเมี่ยน ซีเอสเอส" มีการลองผิดลองถูก อาจจะมีความเป็นกรด เป็นด่าง มากเกินกว่าค่ากลางที่ทาง W3C กำหนด แต่ก็ไม่ใช่ปัญหา ผมเชื่อว่า ค่า กรด-ด่าง จะคงที่ เมื่อการเมืองและเศรษฐกิจบ้านเราไม่แกว่ง มีรัฐบาลที่ไม่โกงกิน มีพระที่ไม่ขับรถไปซื้อเบียร์ที่ร้านสะดวกซื้อยามวิกาล

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

pornantha

แนวคิดการตั้งชื่อ Class และ ID ใน HTML เพื่อ Web 4.0 ตอนที่ 1

ปฏิเสธไม่ได้ว่า สิ่งที่ยากที่สุดสิ่งหนึ่งในการเขียน HTML และ CSS คือ การตั้งชื่อ Class และ ID ถึงแม้ว่า ในตอนนี้จะหมดยุคของการตั้งชื่อ Class เพื่อเขียน CSS แล้วก็ตาม เราสามารถเขียน Combinator selectors หรือ Simple selectors แบบ Type Selector ผสมกับ Child Selector กันไปได้ใน CSS2.1 ถึงกระนั้น เราก็ยังจำเป็นต้องสร้าง Class เพราะว่า การตั้งชื่อ Class และ ID ไม่ได้เกี่ยวอะไรโดยตรงกับ CSS

Class และ ID เป็นสิ่งจำเป็นอย่างยิ่ง ในยุคของ Web 4.0 (อย่างช้า ก็ 5.0) เป็นต้นไป เพราะ หน้าเว็บนั้นๆ หรือเอกสารนั้นๆ จะถือตนเป็นฐานข้อมูล HTML ด้วยตัวของมันเอง กฎของเว็บยุคใหม่ สามารถอนุญาตให้เข้าถึง และ Share ข้อมูลกันได้จากหน้าเว็บโดยตรง เช่น นาย ก ไก่ ทำเว็บเกี่ยวกับ "การปลูกผัดสวนครัว" นาย ข ไข่ ทำเว็บเกี่ยวกับการเลี้ยงปลา นาย ค "ทำเว็บเกี่ยวกับการ ทำอาหาร" ทั้งสามคนนี้ สามารถที่จะ เขียนชุดภาษาคอมพิวเตอร์ใดๆ เพื่อที่จะไป เก็บข้อมูลจากหน้าเว็บ ตามที่เว็บนั้นๆ "ได้ Markup เอาไว้อย่างถูกวิธี และแยก Class และ ID ของข้อมูลอย่างเป็นระเบียบ" ทั้งนี้ สามคนข้างต้น ต้องมีการตกลงเรื่องการเสนอข้อมูลทางกฎหมายต่อไป ว่าจะเอาไปแสดงยังไง อ้างอิงยังไง แต่เรื่องความปลอดภัยในการเข้าถึงข้อมูลก็เป็นอีกเรื่องหนึ่ง ซึ่งเมื่อไม่นานมานี้ "เซอร์ ทิม เบอร์นเนอส ลี" ก็ได้กล่าวเอาไว้ว่า เรื่องความเสี่ยงของการเข้าไปนำข้อมูลจากหน้าเว็บของคนอื่น แล้วเอาออกมาใช้นั้น จะทำอย่างไร หรือมีมาตรการใด เพื่อเป็นรับรองได้ว่า ไม่ได้เป็นการทำเพื่อการโกง แฮ๊ก ล่วงเกินข้อมูลของผู้อื่น

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

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

pornantha

วิวัฒน์ของเว็บ ณ คศ. 2009

กลับมาแล้ว :) ต้องขอโทษที่หายไปนานครับผม แต่สำหรับคนที่ follow ผมที่ Twitter หรือ อยู่ใน Facebook คงได้เห็นผม re-tweet หรือ share link บทความคนอื่นที่คิดว่าเป็นประโยชน์ให้อ่านอยู่นานนม เวลาในชีวิตมันคับแคบอึดอัดไปหน่อยต้องขออภัยมา ณ ที่นี้ด้วยนะครับ ช่วงที่หายไปก็ไปขุดคุ้ยทำงาน หมกมุ่นอยู่กับเทคโนโลยีที่มันผุดขึ้นมาใหม่ แล้วก็กระแส User Experience พิวัฒน์ในโลกกว้างทำให้ศาสตร์ต่าง ๆ เริ่ม ๆ เกิดขึ้นมาใหม่ หรือ บางอย่างที่มีมานานนมแล้วแต่ยังไม่ได้ บัญญัติ จำกัดความไว้ ก็ได้คำบัญัติ จำกัดความกันเสียที วันนี้ผมก็มาเขียนข่าว เชิงบ่น เป็น guideline แจ้งแถลงให้ได้รับรู้ว่าเราขยับกันไปที่ไหนกันได้บ้างแล้ว

ในสายงานการผลิตผมก็ขอพูดเต็ม ๆ ปากเสียทีว่า ขอต้อนรับเข้าสู่โลกของการทำงานเชิงวัตถุ จากที่ผมได้พูดคุย ถกปัญหา และ วิเคราะห์ร่วมกับพร (@pornAntha) เมื่อ W3C ได้ประกาศเทคโนโลยีต่าง ๆ ที่จะใช้กับ www มาเรื่อย ๆ เช่น EmotionML, HTML5 และ CSS3 จะเห็นได้ว่ามันเริ่มจะยาก และ ลงลึก และ ทำงานได้ละเอียดลึกซึ้งเชื่อมกันเป็นทอด ๆ ต่อไปนี้เราจะทำงานแยกเป็น unit กันชัดเจนมากขึ้นเพราะเทคโนโลยีบนโลก www นั้นเริ่มลึกซึ้งกันไปเรื่อย ๆ ยอดมนุษย์ (ในที่นี่ผมหมายถึง all in one people หรือ generalist) จะเริ่มลดลงคุณจะเห็นว่าหลาย ๆ บริษัทเริ่มที่จะทำงานแยกสัดส่วนกันชัดเจนแล้ว (ผมขอกล่าวถึงแต่อาชีพใหม่ และ อาชีพที่ต้อง update นะครับ) เช่น

radiz

ข่าวสั้น มาก จาก ThaiCSS

ไม่เป็นที่น่าแปลกใจ ที่อยู่ดีดี ข่าว IE9 ก็โผล่มาให้เราได้งงงวย และมันก็น่าจะเป็นเช่นนั้น เพราะว่า ทั้ง IE6, IE7 และ IE8 ตามใครเขาไม่ทันสักอัน ใครอยากอ่านเพิ่มเติม ก็ตามลิงค์ไปครับ (An Early Look At IE9 for Developers)

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

หน้าเว็บมันอาจจะยังเละๆ เพราะยังไม่ได้เขียน CSS ไปใส่ ลำพังแค่เขียน PHP กับ HTML ก็ ลืมหน้าลืมหลัง เขียนไปเขียนมา เล่นทำให้ผมเกลียด HTML5 ไปในบัดดล อันความง่ายของภาษาทำให้มันยากไปเสียฉิบ

ใช่ครับ ผมเปลี่ยนชุดภาษาโครงสร้างหน้าเว็บ เป็น HTML5 และเขียน CSS2.1 ซึ่ง ที่ยังเขียน CSS2.1 นั้นเพราะว่า ยังห่วง IE7 อยู่นั่นเอง ขนาดห่วง มันยังเละ เอาไว้แก้กันทีหลัง อยากเห็นว่ามันเป็นยังไง ก็ View Source ดูครับ (จริงๆ แล้ว ผมว่า คนที่นั่ง View Source เว็บ ThaiCSS บ่อยๆ น่าจะได้อะไรเยอะว่ามานั่งตามอ่านบทความที่ผมเขียนนะเนี่ย)

คิดเอาไว้เยอะ ทำได้นิดเดียว อย่างน้อยก็ดีกว่าไม่ได้ทำอะไรเลย

pornantha

Clear (fix) ทำไม และ ทำไมต้อง clearfix

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

อาการ ไม่ไหวจะเคลียร์ เกิดขึ้นเมื่อ เลย์เอ้าท์ ที่อยู่ติดกันสองอัน กระโดดไป"ซ้นดากกัน" หรือภาษากลางเรียก ไปซ้อนกัน ทำให้หน้าเว็บเละ และพัง ดูแล้วเหมือนใส่น้ำปลาเยอะไป สาเหตุเกิดมาจากการใช้ Float property ของ CSS นั่นเอง

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

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

pornantha

ทำความเข้าใจ Attribute Selector ของ CSS

การเขียน CSS แบบ Attribute Selector มีประโยชน์มากมาย มหาศาล แต่เรายังไม่ค่อยเห็นว่ามันแพร่หลายหรือเกลื่อนกลาดมากนัก นั่นก็เพราะว่า Attribute Selector เป็น CSS Version 2.1-3.0 ซึ่ง IE6 ไม่รองรับนั่นเอง จึงยังไม่เป็นที่นิยม

แต่สำหรับ CSS3 แล้ว ความหลากหลายของ Attribute Selector ได้ถูกเพิ่มเข้ามา คนที่ยังไม่เคยเห็น ผมขอแนะนำเอาไว้ตรงนี้ครับ

pornantha

CSS3 Combinators Selector กับการทำ Floating layout 3 คอลัมน์

บทที่ 1: เกริ่น

ถ้าหากจะบอกว่าการทำความเข้าใจความหมายและรูปแบบการเขียน Selector ของ CSS นั้นมันไม่สำคัญ ก็คงจะไม่ใช่ เพราะว่าแท้จริงแล้วมันก็สำคัญในระดับพื้นฐาน บางคนอาจจะหลงลืมไป หลายๆ คนอาจจะไม่อยากใส่ใจมัน เพราะว่า "คิดว่า" มันไม่สำคัญ เพราะว่ามันก็แค่ชื่อเรียกใช่หรือไม่ เพราะในความเป็นจริงแล้ว ลูกค้าหน้าไหนจะเข้าใจถ้าเราไปนั่งอธิบายว่า อันนั้นคืออะไร อันนี้คืออะไร

เมื่อไม่นานมานี้ ผมเพิ่งเข้าใจว่า ผมไม่ได้เขียนเรื่องราวการทำเว็บ แต่เป็นเพียงแค่ส่วนหนึ่ง ผมกำลังพูดถึงการเขียนภาษาที่เกี่ยวข้องกับการทำเว็บอยู่ 2 ภาษา นั่นคือ HTML กับ CSS จึงสรุปได้ว่า นั่นคือสิ่งที่ผมกำลังทำ และจะทำต่อไป ผมไม่ได้เขียนบทความ หรือสร้างเนื้อหา พาคนมาทำเว็บ แต่กำลังแลกเปลี่ยนความรู้ ประสบการณ์ ของการเขียน CSS และ HTML ผมจึงไม่ค่อยสนใจเรื่องการทำเว็บ แต่ใส่ใจในหน้าที่ที่ต้องทำ เพราะอาชีพของผมคือ "เขียน HTML และ CSS" เพราะฉะนั้น ผมจึงขอพูดแค่นั้น เพราะอย่างอื่นไม่สันทัด

หลายๆ คนอาจจะสับสน ตีเหมารวมไปหมดว่า แค่สองอย่างนี้มันคือการทำเว็บทั้งหมด ซึ่งมันไม่ใช่ในความรู้สึกของผม ไม่ว่ามันจะใหม่ จะเก่าในเรื่องเนื้อหา บราวเซอร์ไม่รองรับ ลูกค้าไม่ต้องการ หรือคนอื่นมันยังไม่รู้เรื่อง แต่ผมก็คิดว่า นั่นมันเรื่องของเว็บ หรือเรื่องของคนทำเว็บ ไม่ใช่เรื่องของ "CSS หรือ HTML" ที่ผมทำอยู่ เพราะฉะนั้น ในเมื่อภาษามันเปลี่ยนแปลง มันก้าวหน้าไป ผมก็ต้องทำหน้าที่เพื่อที่จะศึกษาและพัฒนาในส่วนของงาน

pornantha

เล็ก เล็ก น้อย น้อย Hack นิดหน่อยเพื่องาน เพื่อเงิน

วันนี้ มาดูกันแค่สั้นๆ กันลืม

จำเป็นแค่ไหน ที่เราต้อง Hack บราวเซอร์ เมื่อมาเขียน CSS

- จำเป็นมาก จนถึงมากที่สุด เพราะเราต้องทำมาหาเลี้ยงชีพ ลูกค้ายังจุดธูปเทียนบูชา IE6 กับ IE7 ทุกวันอย่างนี้ ไม่ Hack ได้ไง
- ไม่จำเป็น Hack ทำไม เพราะเว็บที่กำลังทำอยู่ไม่ได้ต้องการทำมาค้าขาย ไม่เน้นการแสดงผลทางสายตา แต่เน้นด้านการสื่อสารข้อมูลเป็นสำคัญ
- ไม่รู้ว่าจะเลือกอธิบาย หรือเอาคำตอบไหน พี่ๆ เขาพาทำอย่างนี้ พี่ๆ เขาบอกว่า ฝรั่งทำเอาไว้ ทำตามไป ส่งงานได้เหมือนกัน

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

ถ้าถามว่า ทำไมต้อง Hack ผมขอตอบไปข้อเดียวแบบเหมารวมเลยคือ IE6 และ IE7 ต่างด้อยมาตรฐาน ข้อนี้ทุกคนรู้กันดีอยู่แล้ว ส่วนที่ว่า จุดไหนบ้างในการประมวลผลเพื่อแสดงหน้าเว็บที่บราวเซอร์ทั้งสองตัวนั้นมีปัญหา ผมขออภัย หลายๆ ที่เขาพูดถึงกันแล้ว ขอบอกผ่านขอเชิญ Google it!! เอาเอง

pornantha

dialog เพื่อนใหม่ใน HTML5

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

บทสนทนาระหว่าง คนสองคน หรือ หลาย ๆ คน
บทสัมภาษณ์
บทละคร ที่เป็นการสนทนากันระหว่างตัวละคร
และ อื่น ๆ ที่เกี่ยวข้องกับการสนทนา ปฏิสัมพันธ์ระหว่างคนสองคนขึ้นไป

ใน HTML5 นั้น dialog จัดอยู่ในหมวดของ Flow Content ชนิด Grouping Content (@pornAntha จะอธิบายเกี่ยวกับหมวด และ ชนิดของ elements ใน HTML5 เร็ว ๆ นี้ครับ)

radiz

การเขียน Attribute Class อย่างสื่อความหมาย

บางคน หรือหลายคน หรือส่วนใหญ่ เอาเป็นว่าส่วนใหญ่แล้วกันครับ สำหรับคนที่รู้สึกด้วยตังเองแบบไม่อ้างตนว่าเขียน HTML เป็น คงรู้กันว่า class ของ HTML ไม่ได้เอาไว้ให้ CSS ใช้งานเป็นหลัก

class ของ HTML คือภาษา HTML ไม่เกี่ยวกับภาษา CSS ภาษา CSS นั้นมาขอใช้งานภาษา HTML ด้วยการสั่งงานผ่าน HTML Attribute ที่ชื่อ class เท่านั้น และหรือในกรณีเดียวกัน CSS ก็ขอเอี่ยวกับ Attribute id ของ HTML ไปด้วย

อย่างที่บทความก่อนหน้านี้เรื่อง class ที่ รดิส ได้เขียนเอาไว้ เรื่อง "attribute class และ การใช้งานอย่างถูกต้อง" class ของ HTML มีเอาไว้เพื่อจำแนก "ของที่มีอยู่ในหน้าเอกสาร ที่มีพฤติกรรมแบบเดียวกัน" ส่วน id มีเอาไว้เรียกชื่อเพื่อระบุการมีตัวตอนของ ของ แต่ละชิ้น เช่น ในห้องเรียนชั้น ม.5 ห้อง 5/3 มีเด็กแนวกลุ่มหนึ่ง ชื่อ "เกรียนเมพ" ในกลุ่มนั้น มีนักเรียนชาย5 คน นักเรียนหญิง 5 คน ถ้าเรามาเขียน HTML ก็จะจำแนกออกเป็นสอง classes คือ class="นักเรียนชาย" และ class="นักเรียนหญิง"

ถ้าเราจะระบุ การเรียกชื่อกลุ่มนี้ เราจะเรียกกลุ่มนี้ว่า "เกรียนเมพ" สังเกตว่า คำว่า "เกรียนเมพ" คือ คำที่ใช้เรียกแทนชื่อของ คน สัตว์ หรือสิ่งของ มันคือ "คำสรรพนาม" ภาษาไทยเรียนกันมาแล้วใช่ไหมครับ เพราะฉะนั้น ID มันก็คือ คำสรรพนามที่เราใช้เรียกชื่อกลุ่มนั่นเอง เด็กกลุ่มนี้ ก็จะได้ ID เป็น id="เกรียนเมพ"

pornantha

HTML5 กับ CSS3 อนาคตที่จะมาบรรจบกัน ตอนที่ 1

คำเตือน บทความนี้เป็นบทความเฉพาะกลุ่มเป้าหมาย เนื้อหาส่วนใหญ่ไม่ได้อยู่ในโลกปัจจุบัน ไม่ค่อยเหมาะสำหรับคนที่มองอนาคตระยะ 15 เมตร

คำเตือนที่สอง เนื้อหานี้ ไม่เหมาะสำหรับผู้ใช้ทั่วไป และ ตัวอย่างทั้งหมด ไม่สามารถใช้ User Agent ที่เป็น Browsers อย่าง IE ทั้ง 6-7-8 เรียกดูได้ เพราะฉะนั้น กรุณาใช้ Firefox, Opera, Safari, หรือ Chrome เข้าชม

คำเตือนที่สาม ผมเกรียน...

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

-1-

คำถามชุดที่หนึ่ง ราคา สี่ร้อยเก้าสิบเก้าบาท

ถามว่า HTML5 จะใช้ได้ในเร็ววันนี้หรือไม่

คำตอบคือ ทั้งใช่ และไม่ใช่ อย่างไรบ้างหละ

สำหรับคำตอบที่บอกว่า ยังไม่ได้ใช้ในเร็ววันนี้ ก็คงจะเอนเอียงไปทางผู้ที่ทำเว็บเพื่อรองรับเนื้อหาข่าวสารที่พึ่งพิงผู้ที่ใช้ IE เข้าท่องเว็บไซท์เป็นหลัก เพราะ HTML5 บางElement (ส่วนใหญ่) ยังคงเป็นบรุษนิรนาม ใน IE8 เราอาจจะต้องรอจนถึง IE9 นั่นอาจจะเป็น ปลายปี 2012 หรือ ช้ากว่า

สำหรับคนที่บอกว่า จะได้ใช้แล้วแน่ๆ ก็คงเป็นนักพัฒนา นักแสวงหาความรู้ใหม่ๆ ทั้งหลาย เจ้าของ Web Log ที่อยากจะลองเล่นเพื่อศึกษาหาประสบการณ์ เพื่อเตรียมความพร้อมสำหรับอนาคตที่ไม่รู้ว่ามันจะมาถึงเมื่อไหร่ เช่น ป๋า Bruce Lawson ที่ลองเล่นไปก่อนใครแล้ว (ใช่สิ เพราะลุงแกพัฒนาเอง เล่นเองนี่)

ใครจะเลือกแบบไหน ก็ตามสบายครับ ไม่ว่ากัน บ้านเราสิทธิและเสรีภาพ เข้าถึงแล้ว เหลือเพียงแค่ความเท่าเทียม ที่มันยังไม่มี

คำถามชุดที่ 2 ราคา สองพันสามบาท

ถามว่า CSS3 ใกล้จะได้ใช้หรือยัง

คำตอบ เอาเป็นว่า เราอาจจะได้ใช้พร้อมๆ กับวันที่บ้านเรามีรถไฟความเร็วสูงจากกรุงเทพ ไปเชียงใหม่ นั่นแหละ แต่สำหรับคนที่ใฝ่หาและอยากลอง ?คุณได้สิทธิ์นั้น เดี๋ยวนี้? แค่เปลี่ยนจากการถามสาวยาคูลล์เป็นถามพี่กูเกิลแทน คำตอบจะหลั่งไหลเลยทีเดียว

pornantha

มาทำ Wire Frames กันเถอะ

ผมไม่ทราบว่าเพื่อน ๆ designer, Media Agency และ บริษัทต่าง ๆ ส่วนใหญ่ในประเทศเรามี process การทำงานกันอย่างไรบ้าง แต่เท่าที่สอบถามคนรอบข้างนั้น หลาย ๆ คนยังไม่เคยใช้หลักการระดมสมองที่เรียกว่า Wire Framing นี้ น้อยคนมากที่รู้จัก หรือ อาจจะทำอยู่เป็นนิจแต่ไม่รู้ว่า ไอ้สิ่งที่ทำนั้นมันคือ อะไร ผมเองก็เพิ่งรู้จักมาเมื่อไม่กี่เดือนนี้เหมือนกัน ว่าสิ่งที่เราทำบางครั้งก่อนลงมือทำงานขั้นตอนหนึ่ง มันเรียกว่า Web Wire Framing ต้องขอบพระคุณพี่เอ้ @DjFunkyDog ที่เปิดหูเปิดตา และ เอื้อเฟื้อเวลานั่งสอนน้องคนนี้มา ณ ที่นี้ เป็นอย่างมากครับ (สอนโดยไม่รู้ตัวบางทีก็มี เอิ๊ก ๆ) ก่อนอื่นผมจะขออนุญาติอธิบายเกี่ยวกับ Wire Frames ก่อนนะครับ

Wire Frame นั้นเป็นขั้นตอนที่ ทุกคนที่เกี่ยวข้องในตัวผลิตภัณฑ์นั้น ๆ ต้องร่วมกันแสดงความคิดเห็น ก่อนลงมือผลิตเจ้าผลิตภัณฑ์นั้น ๆ ขึ้น เหมือนเป็นการร่วมกันร่าง พิมพ์เขียวของเจ้าสิ่ง ๆ นั้นขึ้นมา โดยแต่ละทีมนั้นสามารถทำ Wire Frame ของแต่ละทีมมาก่อน ก่อนที่จะ Finalize Wire Frames ของเจ้าผลิตภัณฑ์ที่จะสร้างขึ้นนั้นอีกทีเป็นรอบปิดท้าย

ผมขออนุญาติเรียนไว้ก่อนว่า wire framing นั้นไม่มีรูปแบบตายตัวในแต่ละผลิตภัณฑ์ และ ขั้นตอนการทำงานของแต่ละคน / บริษัท นั้นก็จะมีการ wire framing แตกต่างกันไปด้วย เพราะฉะนั้น พื้นที่นี้เป็นพื้นที่สำหรับการแลกเปลี่ยนครับ ถ้าเพื่อน ๆ พี่ ๆ น้อง ๆ มี idea ที่ดีกว่า หรือ แตกต่างอยากให้ share กันครับผม

radiz

CSS With Grid Systems

ผมคิดว่าเพื่อน ๆ หลายคนคงเคยใช้ grid system ร่วมกับการ design หน้า web page กันบ้างแล้วนะครับ ซึ่งการคำนวณ grid ใน design ของเรานั้นก็จะได้จาก สูตรนี้

Canvas = ขนาดหน้าจอที่คุณต้องการออกแบบ อาทิ 1024 จะต้อง design ที่ 960px หรือ 940px
Total Unit = ช่องที่เราจะสามารถวาง object ของงาน design ลงไปในบริเวณนั้น ๆ ได้
Gutter = ช่องว่างระหว่าง Unit สามรถใช้เป็นระยะ ห่างระหว่าง object ต่าง ๆ ที่อยู่บน Unit เพราะฉะนั้นจะไม่มีการ วาง object ลงไปคาบเกี่ยวบนช่องของ Gutter
Unit = ความกว้างต่ำสุด ของ unit

เนื่องจาก designer บางท่านอาจจะไม่สันทัษเท่าไรนักในเรื่องการ coding อาจจะทำให้เกิด case ที่ผิดพลาดขึ้นได้ เช่น วาง object ไม่พอดี กับ บริเวณที่ Unit อยู่ ไปเกยอยู่ใน บริเวณของ Gutter ซึ่งเมื่อนำไปเขียน CSS นั้นจะมีปัญหา

pornantha