CSS Design เพื่อคนไทย : ThaiCSS.com http://www.thaicss.com/ 2007-09-27T00:00:00Z http://www.thaicss.com/ http://www.thaicss.com/ CSS Design เพื่อคนไทย : ThaiCSS.com <figure><img src="http://thaicss.com/files/images/nth-child-s.png" alt="ภาพตัวอย่างบทความ nth-child() และ not() ใน CSS Selectors" /></figure> <p><a href="http://www.w3.org/TR/css3-selectors/#pseudo-classes">CSS Pseudo-classes</a> ที่อยู่ในจำพวก Structural pseudo-classes นั้นมีหลายตัวด้วยกัน แต่วันนี้ ผมขอพูดถึงตัวพื้นๆ ใช้ง่ายๆ และน่าจะได้นำมาใช้บ่อยๆ กันก่อนนะครับ Structural pseudo-classes มีไว้ใช้ในกรณีที่ Simple Selectors และ Combinators Selectors นั้นไม่สามารถนำมาใช้งานได้ เพราะฉะนั้น ในการเลือกใช้งานอย่างเหมาะสมตามความสามารถของภาษาก่อนเป็นอันดับแรก เช่น ถ้าหากเราจะสั่งงาน HTML บางชุดการใช้งาน ให้เริ่มคำนึงถึง Simple Selectors อื่นๆ ก่อน</p> <p>ปัญหาจะตามมาตรงนี้ เพราะ คนทำงานมันยังไม่รู้ว่า Simple Selectors มันคืออะไรกันวะ หน้าตาเป็นยังไง ถ้าอย่างนั้น เอาอย่างนี้ ผมจะขอไกด์ไลน์ ให้พอเป็นอีโนให้ เช่น สมมุติว่าเรามีกลุ่ม HTML กลุ่มหนึ่ง เราจะเขียน CSS จัดการ ให้เริ่มลำดับการเลือกที่</p><p>pornantha</p> http://www.thaicss.com/nth-child()-และ-not()-ใน-CSS--Selectors/ <p>รับสมัคร CSS HTML Designer 1 ตำแหน่ง และสมัครผู้สนใจเข้าศึกษา CSS HTML ขั้นสูง</p> <img src="http://thaicss.com/files/css-html-job.jpg" alt="ประกาศรับสมัคร CSS HTML Designer" /> <p>ประสบการณ์ ไม่จำเป็นว่าจะมีมากน้อยเท่าไหร่</p> <p>เพศ ไม่เกี่ยว</p> <p>สิ่งสำคัญคือ &quot;มีใจเปิดกว้าง&quot;</p> <p>&nbsp;</p> <h3>กติกา</h3> <ol> <li>ผู้สมัครทุกคน ต้องทำแบบทดสอบ คนละ 1 ข้อ</li> <li>ผู้สมัครที่ผ่านการคัดเลือก 7 คน จะต้องเรียนคอร์สเสริมประสบกาม</li> <li> ใน 7 คนที่ผ่านการสร้างเสริมประสบกามแล้ว 1 ใน 7 คน จะมีงานการที่มั่นคงทำแน่นอน และไม่แน่ อาจจะเปลี่ยนเป็น 2 ใน 7 คน</li> <li> ที่เหลืออีก 5 คน คุณสามารถเอาความรู้ไปใช้ได้ตามชาติกำเนิด</li> </ol> <h3>สิ่งที่จะได้ เมื่อคุณสมัคร และผ่านการคัดเลือก</h3> <ol> <li> คอร์ส CSS3 Selectors ขั้นสูง</li> <li> พื้นฐาน XHTML1.1 และ HTML5 ตามแบบ Web Standards</li> <li> การเขียน CSS Framework เพื่อใช้งานในเว็บที่มีโครงสร้างใหญ่</li> </ol> <p><strong>งานนี้ ฟรี! ไม่มีค่าใช้จ่ายใดๆ ยกเว้นวันไหนที่ผมชวนไปกินลาบ น้ำตก ทุกคนต้องแชร์ ค่าเบียร์ ร่วมกัน</strong></p> <h4>ส่ง E-mail มาถึงผมโดยตรงที่ <span style="color: #fff;">pornantha@gmail.com</span> </h4> <p>ให้บอก <strong>ชื่อ/E-mail/เบอร์โทรศัพท์</strong></p> <p>ขอบคุณครับ </p><p>pornantha</p> http://www.thaicss.com/รับสมัคร-CSS-HTML-Designer-1-ตำแหน่ง-และสมัครผู้สนใจเข้าศึกษา-CSS-HTML-ขั้นสูง/ <p> เคยคิดหนักเรื่องการแบ่งหน้าเว็บออกเป็นหลายๆ สดมภ์กันไหมครับ ไม่ว่าจะ สอง สาม สี่ หรือห้า เมื่อเราต้องการแบ่งหน้าเว็บทีไร ต้องมาเขียน CSS ใหม่ทุกที แต่วิธีที่ผมจะแนะนำต่อไปนี้ มันต้องมีข้อแม้ และไม่ต้องไป ค้นหาว่า มี ”ฝรั่ง” ที่ไหนเคยทำ หรือ พาทำ หรือไม่ ถึงมีจริง ผมก็ไม่รู้ว่าอยู่ตรงไหน </p> <p> การตั้งค่าการการแบ่ง สดมภ์ อย่างเป็นมาตรฐาน เราสามารถเขียน CSS แค่ไม่กี่บรรทัด ก็ทำได้แล้ว แต่สิ่งที่เราจำเป็นต้องรู้คือ การเขียน CSS Selector ในหมวดหมู่ Attribute Selector โดยเฉพาะ อย่างยิ่ง CSS Substring matching attribute Selector ถ้าใครยังไม่รู้ว่าเขียนยังไง ก็ลองค้นๆ หาเอาใน ThaiCSS นี่แหละครับ ผมเขียนไว้หลายแบบอยู่และนานมาแล้ว</p> <img src="http://thaicss.com/files/css-columns-1.png" alt="ตัวอย่าง การเขียน css สดมภ์แบบที่หนึ่ง" /> <p>Selectors ที่ต้องใช้ในการนี้มีทั้ง Child Selector และ Attribute Selector</p><p>pornantha</p> http://www.thaicss.com/CSS3-Attribute-Selectors-กับแนวคิดการทำ-Floating-Layouts/ <p>สวัสดีครับ หลบเรื่องยุ่งๆ มาแอบเขียนบทความใหม่นิดนึง บทความนี้ได้แรงบันดาลใจมาจากบันทึกของน้องมุก (@<a href="http://twitter.com/fatidea">fatidea</a>) และ ความสงสัยของเจ้าตัวที่มาถามผมน่ะนะครับ ว่าเราจะใช้เจ้า element &lt;header&gt; และ &lt;hgroup&gt; ในกรณีใดบ้าง</p> <p>ขออนุญาตเท้าความกันก่อนนิดนึงก่อนว่า HTML5 นั้นมี element ใหม่หลายตัวที่เข้ามาทำหน้าที่ครอบเนื้อหาเพื่อบ่งบอกความหมายของตัวเนื้อหานั้นๆ ให้ชัดเจนมากขึ้นครับ ย้อนกลับที่ผมได้เกริ่นนำไว้ข้างต้นครับวันนี้ผมขออนุญาตพูดถึง element ที่เกี่ยวข้องกับ ต้นขั้วเอกสาร (header) และ ตัวครอบกลุ่มหัวข้อเรื่องหลัก และ ย่อย (hgroup) ครับ</p><p>radiz</p> http://www.thaicss.com/รู้จักกับ-header-และ-hgroup/ <p><img src="http://thaicss.com/files/html5-gallery.jpg" alt="ตัวอย่างบทความ HTML5" /></p> <p>เป็นอะไรกันไม่รู้ครับ พ่อแม่พี่น้อง ช่วงนี้ ทำไม มองไปทางไหนมีแต่คน บ้า HTML5 และ CSS3 แต่บางที คงไม่ต้องหาคำตอบให้กับคำถามปัญญาอ่อนของผมก็ได้ เพียงแค่ก้มหน้าก้มตาทำหน้าที่ไปเรื่อย เรื่อยก็คงพอเพียงแล้ว</p> <p>อันเรื่องราวของ HTML5 และ CSS3 นั้น ThaiCSS เองก็ใช้มานานนม เพราะมันมีมานานแล้ว จึงไม่ค่อยได้ตื่นเต้นไปเท่าไหร่</p> <p>เมื่อก่อนตอนใช้ ก็มีคนหาว่าบ้า ตอนนี้เป็นไงหละ <q>บ้ากว่ากุอีก</q></p> <p>จริง จริงแล้ว ผมมีความกังวลใจอยู่เรื่องเดียว เรื่องเดิม ไม่ว่าจะใช้ HTML4, XHTML1 หรือ HTML5 นั่นก็คือ ปัญหาเรื่องการทำเว็บเพื่อให้เกิดการเข้าถึงอย่างเท่าเทียม เพราะว่าคนส่วนใหญ่ไม่ค่อยได้สนใจเรื่องนี้มากมายนัก ไม่ใช่ว่่าคนบ้านเรา พวกฝรั่งปัญญาอ่อนส่วนใหญ่มันก็เป็นกันเยอะ</p><p>pornantha</p> http://www.thaicss.com/HTML5-กับ-CSS3-เมื่อเอามาทำ-Photo-Gallery/ <p>จากข่าวสองมาตรฐานเรื่องล่าสุดที่ <a href="http://www.apple.com/html5/"><cite cite="http://www.apple.com/html5/">Apple</cite> ได้ออกตัวล้อฟรี เหม็นไหม้ยาง ในการสนับสนุน HTML5 CSS3</a> อย่างเต็มที่ พร้อมๆ กับทำ Micro site เพื่อแสดงความสามารถของ Safari ที่สามารถทำงานกับ คุณสมบัติใหม่ๆ ได้อย่างราบรื่นนั้น ไม่ว่าจะมองไปทางไหน ผมเห็น อาร์ทตัวพ่อ ทั้งไทยและเทศ ต่างวิพากย์ วิจารณ์ ในมุม Apple เลือกปฏิบัติ เพราะบังคับให้ดูเฉพาะใน Safari แถมยังพาดประโยคจิก กัด บราวเซอร์ ล้านปลั๊กอินเจ้าหนึ่งเอาไว้ด้วย</p> <p>แม้แต่ Mozilla ก็ออกมาวิพากย์ บางอันกับเขาเหมือนกัน</p> <p>จริงครับ Apple เลือกพูดเฉพาะส่วนที่ตัวเอง ถูก เท่านั้น เรื่องอย่างนี้เราคุ้นกันอยู่แล้วครับ เพราะไม่ใช่แค่ Apple หรอกครับผมว่า M$ เอง ก็เลือกหลับตาข้างหนึ่งเล่นบทนี้เหมือนกันในตอนที่สดสอบ IE9 พรีวิวล่าสุด ที่ออกมาบอกว่าตัวเองรองรับมาตรฐานได้สูงกว่าใครเพื่อน</p> <p>ไม่ว่ายังไงก็ช่าง ผมขออย่างหนึ่งสำหรับคนทำงาน CSS HTML ที่รัก และชอบพัฒนาตัวเองอยู่เงียบๆ &quot;อย่าหลงประเด็น&quot; ในขณะที่คนอื่นต่างพากัน เฮโล เกทับ บัฟแหลก ด่า Apple อยู่นั้น ขอมองระหว่าง บรรทัด ของที่ซ่อนอยู่ข้างใน มีประโยชน์มหาศาล</p><p>pornantha</p> http://www.thaicss.com/Apple-กับหน้าพิเศษ-HTML5-CSS3-ปัญหาที่ซ่อนความจริงไว้ข้างหลัง/ <figure><img src="http://thaicss.com/lessons/transform/transform.jpg" alt="ภาพตัวอย่างการ transform ของ CSS3" /></figure> <p>ย้อนกลับไปเมื่อ 3-4 ปีที่ผ่านมา นับจากปีปัจจุบัน (2553) คำว่า <q>CSS Designer</q> เพิ่งถือกำเนิดขึ้นใจเมืองไทย เวลาผ่านล่วงไป สาม สี่ปี ก็จริง เป็น สาม สี่ปีที่ไม่ค่อยได้เดินไปไหนกัน อย่างไรก็ตาม เท่าที่ผมสังเกต บ้านเราถือว่าเดินตามเรื่อง CSS มาไกลกันอักโข แต่ก็ยังไม่ถึงขั้นที่เรียกว่าตามทัน</p> <p>ในระดับบริษัท ห้างร้าน เริ่มมี แผนกเขียน CSS HTML แยกออกจาก Interface Design อื่นๆ แต่สำหรับบางบริษัท ยังทำแบบ All-in-one ก็เป็นอันเข้าใจว่า อาจจะด้วยความเบี้ยน้อยแต่หอยใหญ่ ก็ว่ากันไป</p> <p>มองย้อนกลับไปข้างหลังแล้ว เรามามองโค้งแบบลูกยิงไกลของ โรนัลโด้ บ้าง ว่า ในอนาคตอันใกล้ ใกล้ นี้ ในเรื่องราวของการเขียน CSS HTML มันจะแปลกแปร่งออกไปจากเผ่าพันธุ์เดิมดั้ง ดั่งเคยเป็นมายังไงบ้าง</p><p>pornantha</p> http://www.thaicss.com/จาก-CSS3-Transform-ถึง-CSS-Motion-Editor-Designer/ <p> รู้สึกว่า ช่วงนี้ เงียบเหงาเป็นพิเศษ วันนี้ ผมมาอัพเดทเพื่อแจ้งให้ทราบว่า <q>เรายังไม่ตายครับ</q> ยังอยู่กันครบ แต่ด้วยงานราษฎ์และงานหลวงทั้งหลย ทับเราอยู่ ก็เลยดิ้นลำบาก</p> <p>เอาเป็นว่า ผมเอา สถิติของ บราวเซอร์ ล่าสุดมาฝากกัน ว่าแนวโน้มออกมาประมาณไหน</p> <p><img src="http://www.thaicss.com/files/browser-stat.gif" alt="browser stat" /></p> <p>ตามไปดูสถิติได้จากหน้านี้นะครับ แล้วก็ มีอีกหลายอย่างได้ได้เลือกดูกัน แต่แปลกอยู่อย่างคือ บ้านเรา กระแส มันมักจะไม่ค่อยตรงกับบ้านอื่นเมืองอื่นกันเท่าไหร่</p> <p><a href="http://www.w3schools.com/browsers/browsers_stats.asp">http://www.w3schools.com/browsers/browsers_stats.asp</a></p> <p><strong>พร้อมกันนี้ ผมได้เพิ่มข้อมูลหน้า <a href="/about/">About ThaiCSS ใหม่ มีสมาชิกช่วยเขียนมาอีก 1 คน เชิญชมครับ</a></strong></p><p>pornantha</p> http://www.thaicss.com/เอา-สถิติของ-บราวเซอร์-ล่าสุดมาฝากกันครับ/ <p>วันนี้ผมจะมาพูดเกี่ยวกับการใช้ CSS มาช่วยในการทำให้ User Interface ของหน้าแบบฟอร์มทำงานตอบโต้กับผู้ใช้งานได้ดีขึ้น</p> <p>การใช้ pseudo-classes ของ CSS เข้ามาช่วยในการตบแต่งหน้าแบบฟอร์มนั้นอาจจะช่วยให้แบบฟอร์มดูน่าใช้งานมากขึ้น และ ช่วยให้ผู้ใช้งานได้รู้ว่าตัวเองกำลังกรอกแบบฟอร์มตรงไหนอยู่ พร้อมทั้งมีคำแนะนำในการกรอกข้อมูลลงไปในแบบฟอร์มนั้นได้ด้วย</p> <p>ตัวอย่างที่ผมจะนำเสนอนี้ใช้เทคนิคการทำงานของ pseudo-classes ใน CSS3 เข้ามาประกอบกับโครงสร้างของ XTHML เพื่อให้แบบฟอร์มในเว็บไซต์นั้น ทำงานตอบโต้กับผู้ใช้งานได้อย่างเป็นประโยชน์สูงสุดครับ</p> <ul> <li style="margin-left: 30px;">:active ในที่นี้ จะทำงานในขณะที่ click mouse (ตอนที่กดลงไปนั่นเอง)</li> <li style="margin-left: 30px;">:focus จะทำหน้าที่บอกตำแหน่งของตัวรับข้อมูลของแบบฟอร์มที่ cursor ของผู้ใช้งานทำงานอยู่ และ สถานะที่พร้อมใช้งาน (พร้อมรับข้อมูลที่จะกรอก)</li> <li style="margin-left: 30px;">:checked เป็น pseudo-classes ที่ทำการเช็คค่าความเป็นจริงของ input[type='checkbox'], input[type='radio'] ว่าได้ทำการเลือกไปแล้ว</li> </ul><p>radiz</p> http://www.thaicss.com/pseudo-classes-กับการกำหนด-form-stage-interface-เพื่อตอบโต้การใช้งานกับ-ผู้ใช้งาน/ <p>สวัสดีครับเป็นยังไงกันบ้างครับในวันบ้านเมืองหม่นหมอง ก็หวังใจไว้ว่าทุก ๆ คนคงไม่เครียดกับภาวะแวดล้อมมากมายจนเกินไปนะครับ วันนี้ผมมาบ่นอะไรอีกอย่างที่เพื่อน ๆ พี่ ๆ น้อง ๆ หลาย ๆ คนชอบบ่นว่ามันเกี่ยวข้อง อะไรตรงไหน หรือ ละเลยไม่สนใจว่าเราควรจะ <q>ออกแบบ</q> งานแต่ละงานออกมาอย่างไร ให้ถูกใจผู้ใช้งาน ให้เดินทางจากต้น ไปถึงจุดสุดท้ายของลำดับเนื้อหา หรือ การทำงาน ที่คาดหวังไว้ สมใจ สมปรารถนา กันทั้งทีมพัฒนาเว็บไซต์</p> <p>เข้าเรื่องกันครับ สิ่งที่ผมจะพูดถึงวันนี้ เป็นส่วนหนึ่งในการออกแบบ Usability และ เกี่ยวข้องกับ User Experience สิ่งที่จะพูดตามหัวข้อเลยครับ <strong>Eye Tracking Theory</strong> ครับ</p> <p><strong>Eye Tracking Theory</strong> คือ ทฤษฎีที่ว่าด้วยเรื่อง <q>การเคลื่อนไหวของสายตามนุษย์</q> ซึ่งมันเกี่ยวข้องกับงานออกแบบทั้งหมดอย่างไร ต้องขออนุญาติบอกว่าเกี่ยวข้อง และ ในความคิดผมนั้นมากด้วยไม่ว่าคุณจะเป็น <q>นักออกแบบ</q> อะไร ถ้าเป็นสิ่งที่มนุษย์นั้นต้องมองเห็น นักออกแบบก็ต้องคำนึงถึงสิ่ง ๆ นี้ เป็นโจทย์หลักข้อใหญ่ข้อหนึ่งเหมือนกัน เพราะเราต้องกำหนด <q>จุดเริ่มต้น</q> และ <q>จุดสิ้นสุด</q> ให้กับชิ้่นงานใดใด ที่เราต้องการออกแบบ ให้สายตาของผู้ใช้งาน หรือ ผู้บริโภค เคลื่อนไหวไปตามความสำคัญของเนื้อหา หรือ สิ่งที่ต้องการนำเสนอในงานออกแบบนั้น ๆ ของคุณ ทั้งหมดนี้ ผมจะขออนุญาติเขียนเฉพาะสิ่งที่ Eye Tracking เกี่ยวข้องสัมพันธ์กับงานออกแบบเว็บไซต์อย่างไรนะครับ</p> <p><strong>Eye Tracking</strong> นั้นมีประโยชน์ต่อการออกแบบ User Interface เมื่อเราออกแบบงานเสร็จควรจะมีการทดสอบกับผู้ใช้งานจริง ๆ หรือ คนที่อยู่ในสถานะที่คล้ายกับผู้ใช้งานจริง ๆ อย่างเช่น ผมมักจะให้คุณแม่ของผมลองใช้งานเว็บไซต์ที่ผม และ เพื่อน ๆ พัฒนาเสมอ เพราะคุณแม่จะไม่ค่อยสนใจเทคโนโลยีของ Internet ลึกมาก เพียงแต่ท่านจะใช้เท่าที่จำเป็นต้องใช้ เหมือนท่านอยากอ่านหนังสืออะไรท่านก็เดินออกไปซื้อมาอ่าน เช่นกัน เวลาคุณแม่จะใช้งานเว็บไซต์ท่านก็จะใช้เฉพาะเว็บไซต์ที่เกี่ยวข้องกับสิ่งที่ตัวท่านเองสนใจ ถ้ามันยากท่านก็จะบอกว่ายาก หาไอ้นั่น ไอ้โน่น ไอ้นี่ไม่เจอ ท่านก็จะบ่นว่าหาไม่เจอมันทำให้ผมได้วิเคราะห์ไปด้วย หลังจากนั้นผมก็จะลองไปให้คนนั้นคนนี้ลองกดเล่นดู อาจจะเป็นเพื่อนที่เป็นนักบัญชี หรือ ใครก็ตามที่ไม่เชี่ยวชาญทางเทคโนโลยีเท่ากับที่เราทำกันอยู่ แล้วคุณจะได้คำตอบที่ล้ำค่าว่างานออกแบบที่คุณได้ออกแบบมานั้น เป็นไปตามที่คุณต้องการแล้วหรือไม</p> <p>ปัจจุบันนั้นทันสมัย (เพื่อนฝูงทั่วไปใช้ถ่านไฟตรากบ ... อ๊ะ ... ไม่ใช่สินะ) หลาย ๆ มหาวิทยาลัย หรือ บริษัท องค์กร ภาครัฐ ในบางประเทศได้ทำการศึกษาเกี่ยวกับเรื่องนี้อย่างจริงจังมากขึ้น จริง ๆ Eye Tracking Theory (ทฤษฎีการเคลื่อนไหวของสายตามนุษย์) นั้นมีการศึกษามาเนิ่นนานกว่า 30 ปี หลาย ๆ ท่านที่ทำการศึกษาก็พยายามจะหาคำอธิบายจากสถิติที่ตนเองทำการทดลอง และ เก็บวิเคราะห์มาได้ บ้างก็พัฒนาซอฟท์แวร์ขึ้นมาใช้เพื่อการนี้ ใช้ซอท์แวร์นี้ร่วมกับหน้าเว็บไซต์ที่ต้องการจะทำการทดสอบว่าออกแบบมาถูกต้องตามที่ต้องการจะให้เป็นหรือไม่ และ ซอฟท์แวร์เหล่านี้ก็จะเก็บสถิติ และ แสดงผลสถิติออกมาเป็น Heat Map ว่าจุด ๆ ใดบนหน้าเว็บไซต์นั้นถูกมองมากที่สุด ส่วนวิธีที่ใช้ทดสอบ และ เก็บข้อมูลแบบคลาสสิค โบร่ำ โบราณนิยมก็มี ดังนี้ครับ</p><p>radiz</p> http://www.thaicss.com/เล็กน้อยเกี่ยวกับ-Eye-Tracking/ <p> ในตอนแรก ผมตั้งใจเขียนบทความในเรื่องการเขียน Floating Layout โดยใช้ Simple Selectors ผสมกับ Combinators ผลปรากฎว่า พอผมกลับมานั่งอ่านเองแล้ว ยังเห็นความยุ่งยากของการทำความเข้าใจกับการเรียกชื่อ Selectors แบบต่างๆ อยู่ อาจกล่าวได้ว่า ถ้าคนที่ไม่แตกฉานเรื่อง CSS Selectors แล้วมาอ่าน คง มึนงง กลับบ้านไม่ถูกกันเลยทีเดียว</p> <p> ก่อนหน้านี้ผมเขียนบทความเรื่อง &quot;<a href="http://thaicss.com/อาชีพเขียน-css/">อาชีพ เขียน CSS</a>&quot; เอาไว้ ตั้งปณิธาน เอาไว้ว่า จะพยายามอธิบายสิ่งที่มันยากๆ ให้เข้าใจง่าย และจะพยายามหาเรื่องใหม่ๆ มาให้คนที่สนใจได้รับรู้และศึกษา ตาม Title ของ ThaiCSS ที่เปลี่ยนไป เป็น CSS3 จึงต้องหันกลับมา เริ่มเขียนเรื่องใหม่ ค่อยๆ แนะนำกันให้เข้าใจกันก่อน</p> <p> บางคนที่ทำมาหากินกับการเขียน CSS HTML แทบเรียกชื่อ Selectors ของ CSS ไม่ถูกด้วยซ้ำไป เพราะฉะนั้นแล้ว ถ้าผมไม่มีเนื้อหาเกี่ยวกับการสร้างความเข้าใจในเรื่อง Selectors ของ CSS แล้ว นั่นก็หมายความว่า &quot;ผม บกพร่องในหน้าที่ ของการถ่ายทอดความรู้เรื่อง CSS&quot; </p><p>pornantha</p> http://www.thaicss.com/การอ่าน-และ-การเรียกชื่อ-CSS3-Selectors/ <h2>Dean Hachamovich พูดเกี่ยวกับ IE9 ในงาน MIX10:</h2> <p>เราวางแผนที่จะสนับสนุน HTML5 ให้ทำงานได้ดีกับ Hardware ต่าง ๆ ที่ใช้งานร่วมกับ IE9 รวมไปถึงทำให้ IE9 ทำงานได้ดีกับ GPU เพื่อให้ทำงานกับ HTML5 Platform ได้สูงสุด และ ขอบคุณนักพัฒนาทุก ๆ คนที่ช่วยกันรณรงค์ให้ผู้ใช้งานทั่วไปเลิกใช้ IE6 กัน</p> <p><strong>เป้าหมายที่ 1 สำหรับ IE9:</strong> พัฒนาให้ IE9 ทำงานได้ดี และ รวดเร็ว เมื่อใช้ Javascript และ Feature ที่เป็น JS ใน HTML5 โดยใช้ Multi-Core</p> <p><strong>เป้าหมายที่ 2 สำหรับ IE9:</strong> คือ IE9 จะสนับสนุน Web Standards เต็มที่ลดการเขียน code ที่ต้อง Hack และ Filter สำหรับ Web Browser ที่ต่างกัน (เพิ่งสำนึกตนเหรอครับ ก็มีแต่ของค่ายพี่นั่นแหละ ที่มีปัญหากว่าชาวบ้านเขาที่สุด)</p> <p>เรารัก HTML5 มาก และ อยากให้มันทำงานได้ดีใน IE9 เราจะทำการสนับสนุนทุก ๆ อย่างสำหรับ Web Platform เหมือนที่เราทำมาแล้วใน IE8 (CSS2.1) border-radius rgba opacity CSS3 test: ผ่าน 578 test โดย CSS3.info</p> <p>เราพยายามทำตาม และ สนับสนุน Standards ให้มากที่สุด เพื่อลดข้อแตกต่างระหว่าง Browsers ให้มากที่สุดเท่าที่จะทำได้ การทำงานบน GPU ของ IE9 จะทำให้ HTML5 ทำงานได้ดีที่สุดบน Graphic Hardware นั้น ๆ </p> <p>ถอด จากข้อความของป้ามอลลี่ Molly E. Holzschlag (@<a href="http://twitter.com/mollydotcom">mollydotcom</a>)</p> <p>จะเห็นว่า HTML5 เริ่มคลุกวงในเข้ามาทุกทีแล้วนะครับ Standards เริ่มบีบให้ Microsoft เปลี่ยนเพื่อความก้าวหน้าทางเทคโนโลยี และ ความเท่าเทียม</p> <p>คำถามคือ นักพัฒนาในไทยล่ะ จะพร้อมกันเมื่อไหร่ ที่จะช่วยกันรณรงค์ให้ผู้ใช้งานเลิกใช้ IE6 เพราะโลกก้าวกันไปเรื่อย ๆ จนจะไกลเลยเถิดเกินไปแล้ว</p><p>radiz</p> http://www.thaicss.com/ข่าว-IE9-จากงาน-MIX10/ <p>ช่วงนี้ผมวุ่นวาย ๆ กับงานจนเวลาที่มีว่างเล็กน้อยจะเอาไปใช้ในการบำบัดรักษา พักผ่อนสมองตน และ เปิดห้องเรียนสอน xhtml css coder กับ แมกซ์ (@<a href="http://twitter.com/max_mayer">max_mayer</a>) เล็ก ๆ ที่บ้านเป็นส่วนใหญ่ ต้องขออภัยที่ "หายหัว" ไปนานโขพอสมควร สำหรับหน้าที่เขียนบทความ ณ สถานที่แห่งนี้ เลยต้องให้พร รับบทหนักอยู่คนเดียวเป็นส่วนใหญ่ช่วงนี้ เพราะพร <q>พลังเยอะ</q> ฮ่า ๆ</p> <p>โอเคครับ วกกลับมาหาสิ่งที่จะพูดกันวันนี้ สั้น ๆ ห้วน ๆ ไม่ยาวมากเท่าที่สมองจะรวบรัดกระชับมาให้ได้ ต้องอารัมภบทก่อนว่าที่ผ่าน ๆ มาผมได้มีโอกาสคลุกคลีกับระบบงานที่ต้องทำงาน คร่ำคิด วิเคราะห์ สิ่งของต่าง ๆ ที่ส่งผลต่อผู้ใช้งานปลายทางส่วนใหญ่ (ในขอบข่ายของผลิตภัณฑ์เว็บไซต์นะครับ) ต้องขอขอบพระคุณพี่เอ้อ (@<a href="http://twitter.com/errorlloyd">errorlloyd</a>) และ พี่เอ้(@<a href="http://twitter.com/DjFunkyDog">DjFunkyDog</a>) ที่ให้ไอเดีย และ สอนสั่งทั้งทางตรง และ ทางอ้อม ทำให้ผมสนใจที่จะต้องหาความรู้ สังเกต และ ทดลอง อะไรบางอย่างที่เกี่ยวกับ User Experience (แปลเป็นไทยอย่างไรดี <q>ความพึงพอใจของผู้ใช้งาน</q> ดีไหม?) ครับ อย่าเพิ่งบ่นนะว่า <q>ทำไมไอ้คุณปลา มันไม่เขียนอะไรที่มันเป็น HTML / CSS เลยวะ?</q> เพราะผมคิดว่า ผมบ้าครับ :)</p> <p>เรื่องของการออกแบบ User Experience นั้น ไม่ได้เกี่ยวข้องกับงานออกแบบ User Interface (พื้นที่ใช้งานสำหรับผู้ใช้งาน) ให้น่าใช้งานแต่เพียงอย่างเดียว หากแต่รวมไปถึงการวางโครงสร้างของเว็บไซต์ การวางความสัมพันธ์ของเนื้อหา การวางแผนว่าผลิตภัณฑ์นั้น ๆ จะปฏิสัมพันธ์กับผู้ใช้งานอย่างไร ตลอดจนเรื่องต่าง ๆ ไม่ว่าจะในเชิงจิตวิทยา หรือ ทางการตลาด เพื่อให้ผู้ใช้งานรู้สึก <q>สุขสมใจ</q> และ กลับมาใช้งานผลิตภัณฑ์ของเราเรื่อย ๆ ไปพร้อมทั้ง แนะนำต่อ ๆ ไปให้กับเพื่อน ๆ พ่อแม่ ญาติพี่น้องของเขา</p><p>radiz</p> http://www.thaicss.com/UX-Designers-ต้องคิด-และ-ทำอะไรบ้าง/ <p><img src="http://thaicss.com/lessons/singgle-html/preview.png" alt="ภาพรวม" /></p> <p>วันนี้ มาพูดอะไรกันสั้น สั้น ง่าย ง่าย อีกสักรอบ เกี่ยวกับประโยชน์ของ CSS ที่ใคร ใคร ก็รู้กัน นั่นคือสามารถจัดการแสดงผล HTML ที่เขียนไว้ในโครงสร้างเดียว ให้แสดงผลได้หลายแบบ โดยมีหลักการในเรื่องของ Web Accessibility เข้ามาเกี่ยวข้องด้วย นั่นคือ การเรียงลำดับ HTML อย่างถูกวิธี</p> <p><img src="http://thaicss.com/lessons/singgle-html/css-html-fig-1.png" alt="ภาพตัวอย่าง 1" /></p> <p> จากรูปที่เห็นอยู่ด้านบนนั้น คนส่วนใหญ่ที่เขียน HTML มานักต่อนักมักจะมองในรูปแบบการแสดงผลเพียงด้านเดียว คือ ให้แสดงผลสำหรับผู้บริโภคผ่านทาง Screen เท่านั้น โดยการวาง HTML จะนำ Element ที่เป็น &lt;img/&gt; ขึ้นก่อนเสมอ แต่ตามหลักการการเข้าถึงแล้ว เนื้อหาใดๆ ที่โผล่ขึ้นมานั้น ควร หรือ จะต้องมี heading level ลำดับ ใด ใด นำหน้าก่อนเสมอ เพื่อบ่งบอกว่า เนื้อหานั้น เป็นเนื้อหาที่เกี่ยวข้องกับอะไร</p><p>pornantha</p> http://www.thaicss.com/เขียน-CSS-ให้แสดงผลหลายแบบ-ใน-HTML-แบบเดียว/ <p> จะมีสักกี่เว็บไซท์ในเมืองไทย ที่เราสามารถใช้ Keyboard กับ Attribute accessky ของ HTML ในหน้าเว็บนั้นได้ หรือว่าเราต้องการใช้ปุ่ม [TAB] ของ คีย์บอร์ด กดเดินหน้า ถอยหลังเพื่อที่จะไปยังเนื้อหาส่วนต่างๆ ในหน้าเว็บอย่างสบายอารมณ์ </p> <p> เพราส่วนใหญ่เวลาเรากด [TAB] ไปแล้วก็ยังไม่รู้ว่า จุดที่เรากำลัง :FOCUS นั้นมันอยู่หน้าไหน เพราะว่า ค่า outline มันไม่แสดงผลออกมา</p> <p> วันนี้ผมขอพูดถึงเรื่อง Access Key ของ HTML และ Outline ของ CSS</p> <p><img src="http://thaicss.com/lessons/outline/outline.png" alt="outline"/></p> <h2>[accesskey] </h2> <p>คือ attribute ตัวหนึ่งของ ภาษา HTML มีไว้เพื่อใช้เป็น ทางลัด สำหรับ Keyboard เพื่อเข้าถึงหน้าเว็บหน้านั้นๆ ซึ่ง บางครั้งในกรณีที่เราขี้เกียจเอามือไปลากเม้าส์ เราสามารถ กด เลขที่เว็บไซท์ ระบุเอาไว้เพื่อไปยังส่วนต่างๆ ที่สำคัญในหน้าเว็บได้เลย ทว่าบราวแซอร์แต่ละตัวนั้น มีลักษณะการกดไม่เหมือนกัน</p><p>pornantha</p> http://www.thaicss.com/HTML-Accesskey-CSS-Image-Replacement-and-Outline/ <p>เรื่องมันมีอยู่ว่า ทำไม มันใช้ได้ กับการเขียน CSS Dropdown Navigation แบบนี้ เพราะก่อนหน้านี้ ผมก็เคยลองเขียนตาม ทฤษฎีและ Module ของ CSS ที่ W3C มีมาให้ทุกอย่าง มันก็แสดงผลไม่ถูกต้อง กับบราวเซอร์ อย่าง IE7 หรือ IE8</p> <p>แต่ เมื่อสองสามวันที่ผ่านมา ผมลองเขียนดูอีกที &quot;มันดันใช้ได้ ไม่มีปัญหา&quot;</p> <p><img src="http://thaicss.com/lessons/nav/css-dropdown-menu.png" alt="CSS Dropdown navigation"/></p> <p>สำหรับคนที่เคยลองเขียน CSS Dropdown Menu มาแล้วคงจะเจอปัญหาที่มันเกิดขึ้นกับ IE7 หรือ IE8 เพราะ เมื่อเวลาที่เรา เอาเมาส์ ไป :hover ที่ &lt;li&gt; ซึ่งเป็น Nest Element ของ &lt;ul&gt; แล้ว มันโผล่ออกมา แต่พอเอาเมาส์เลื่อนไปจะไปคลิ๊กที่ลิงค์ มันดันหายไปก่อนที่เราจะได้คลิ๊กที่ ลิงค์ ตามที่เราต้องการ</p> <p>ซึ่ง บราวเซอร์ อื่นๆ ที่ไม่ใช่ตระกูล IE ไม่เป็น เป็นอยู่เจ้าเดียวนี่แหละ ก็เลย เป็นอันว่า มันคือ บั๊กของ IE แต่ตอนนี้ มันใช้ได้แล้ว</p> <p>ลองไปดูตัวอย่างกันก่อน</p> <h3><a href="http://thaicss.com/lessons/nav/css-horizontal-dropdown-navigation.html">ตัวอย่าง CSS Navigation หรือ การทำ CSS menu แบบ Dropdown</a></h3> <p>ผมขออนุญาต ว่ากันสั้นๆ สำหรับเรื่องนี้นะครับ จากโค้ด CSS </p><p>pornantha</p> http://www.thaicss.com/CSS-Horizontal-Navigation-หรือ--การทำ-CSS-menu-แบบ-Dropdown/ <p>ก่อนหน้านี้ ผมได้เขียนเรื่อง ยุคสมัยของ CSS Layout เอาไว้ แล้วผมก็ค้างเรื่องสุดท้าย ซึ่งจะเป็นยุคสมัยของ CSS Layout ในอนาคต นั่นก็คือ การใช้ Position เพื่อทำ Layout หน้าเว็บ</p> <p>มันยังไงกันแน่ กับเรื่องการใช้ Position สำหรับหน้าเว็บ อาจจะงง งง กัน แน่หละครับ อะไรที่เรายังไม่รู้ ไม่ทราบ ไม่เห็น ไม่เข้าใจมันย่อม งง เป็นธรรมดา ค่อยๆ เรียนรู้ ค่อยๆ ทำความเข้าใจ เดี๋ยวมันก็หายงง ไปเอง</p> <p>ไม่ใช่แค่ Position เท่านั้น ที่จะมาเป็น พระเอก สำหรับการเขียน Layout ของเว็บในอนาคต Display คืออีกหนึ่ง Property ที่มาร่วมด้วยช่วยกัน ทำตัวเป็นพระรองให้เราได้ใช้งาน</p> <p>หลักการพื้นฐานง่ายๆ ก่อนที่จะเข้าสู่วังวนแห่งความมึนงง คือ &quot;ให้เลิกคิดไปตั้งแต่ตอนนี้ว่า CSS เอาไว้จัดหน้าเว็บ อย่างเดียว&quot; CSS มีไว้เพื่อจัดการหน้าเอกสารให้กับทุก Devices ที่ถูกวางโครงสร้างการนำเสนอด้วยภาษา HTML ในโลกของ http เพราะเมื่อขึ้นด้วย Hypertext Transfer แล้วหละก็ มันก็คือ HTML วันยังค่ำ</p><p>pornantha</p> http://www.thaicss.com/CSS-Positioning-Layout-กับอนาคตที่ยังไม่แน่นอน/ <p>ผมยังนั่งงงอยู่กับชื่อหัวข้อบทความที่ผมเพิ่งตั้งไป เพราะไม่รู้จริงๆ ว่าจะตั้งชื่อบทความนี้ว่ายังไง อาจจะด้วยเรื่องของความด้อยในด้านภาษาไทย ไม่แกร่งในภาษาอังกฤษ หัวเรื่องบทความก็เลยออกมาในลักษณะนี้ ในเมื่อหัวข้อเรื่องไม่สามารถที่จะอธิบายให้เห็นภาพได้ เอาเป็นว่า ดูภาพตัวอย่าง แล้วเดี๋ยวผมจะค่อยๆ สาธยายเอาเองแล้วกันครับ</p> <p><img src="http://www.thaicss.com/lessons/thb/list-sample.jpg" alt="ตัวอย่างการเขียนลิสต์รูปภาพ" /></p> <p> จริงๆ แล้วมันไม่มีอะไรมากเลย ในเรื่องที่ผมเขียนในตอนนี้ </p> <h2>ปัญหา</h2> <p> เรามาเริ่มนับจากปัญหากันก่อน ซึ่งก่อนหน้านี้ ผมเคยเจอว่า &quot;ผมจะทำ Thumbnail รูปภาพยังไงให้มันดูเรียงเท่าๆ กันอย่างเป็นระเบียบ โดยที่ภาพแต่ละภาพมีขนาดไม่เท่ากันเลย ทั้งแนวตั้งและแนวนอน&quot; ถ้าผมสามารถที่จะเขียนโปรแกรม หรือบอกโปรแกรมเมอร์ให้เขียนระบบ Crop รูปภาพแล้วอัพโหลดขึ้นไปมันก็คงไม่เกิดปัญหา เราสามารถที่จะกำหนดขนาดรูปภาพได้ดั่งใจคงไร้ปัญหา</p> <p>แต่โลกมันไม่ได้สวยงามอย่างนั้น เมื่อเราไม่มี Function การย่อ ขยาย หรือ Crop รูปภาพก่อนนำขึ้นไปบน Server เพื่อเอาไปแสดงผลทางหน้าเว็บ เรา เหล่า CSS Designer ต้องหาทางแก้ไขเอาเอง</p><p>pornantha</p> http://www.thaicss.com/การทำลิสต์รูปภาพขนาดย่อ-โดยที่ไม่มีเครื่องมือย่อขนาด-ด้วย-css/ <p>การวางกลยุทธ์เนื้อหาที่ใช้กับเว็บไซต์นั้นมีมานมนานพอ ๆ กับการผลิตเว็บไซต์ออกไปสู่โลกออนไลน์ แต่บทบาทของการวางกลยุทธ์เนื้อหาจะเริ่มมามีบทบาทเด่นชัดมากขึ้นในช่วง 2 - 3 ปีที่ผ่านมา เพราะอะไร? ... แน่นอนครับจำนวนผู้ใช้งานของอินเตอร์เน็ต และ จำนวนผู้ประกอบการธุรกิจบนโลกออนไลน์ มีเพิ่มมากขึ้นเป็นหลายเท่าตัว ปี ต่อ ปี ทำให้การแข่งขันกันของผู้ประกอบการต่าง ๆ บนโลก online มีเพิ่มมากขึ้นเรื่อย ๆ อัตราที่จะเกิด และ ดับในวันเดียว 100 เปอร์เซ็นต์ ก็มีเช่นกัน</p> <p>คนที่คิดริเริ่มก่อน คิดผลิตภัณฑ์ หรือ บริการ ออนไลน์ได้ก่อนใครก็จะมีภาษีได้ถือไพ่เหนือกว่า ยิ่งถ้าได้การวางแผนระบบโครงสร้างพื้นฐานมาอย่างดี (Infra Structure) ก็ยิ่งมีลุ้นว่าจะอยู่ได้ยืนยาว หรือ ตลอดไป แต่กระนั้นก็ยังคงต้องพึ่งพาเนื้อหา (Content) ที่ดีเพื่อดึงดูดใจกลุ่มเป้าหมายด้วย (End Users) คนที่มาทีหลังก็คงต้องทำการบ้านการอย่างหนักกันหน่อย ว่าจะทำอย่างไรให้เกิดความแตกต่างในผลิตภัณฑ์ของตน (Differentiate) กับบริษัทคู่แข่งเราทราบกันแล้วว่าปัจจุบันนี้ เนื้อหา สามารถถูกนำไปเผยแพร่ได้หลายช่องทาง (Channel) และ ในหลาย ๆ สื่อ (Media) ต่อไปนี้คงต้องวางแผนกันรอบคอบหน่อย ปวดหัวมากขึ้นกันหน่อย และ ต้องใช้ผู้เชี่ยวชาญฌฉพาะทางมากขึ้นหน่อย คงจะหมดยุคสมัยของมนุษย์เป็ดแล้วอย่างแท้จริง ต้องขอบคุณ Sir Tim Berners Lee ที่สร้าง WWW ให้เราได้ใช้กัน สื่อ ตัวนี้เป็นสื่อที่แพร่กระจายตัวได้รวดเร็ว และ เข้าถึงมนุษยชาติได้ทุกท้องที่ทุกเพศทุกวัย หลาย ๆ บริษัท หรือ นักธุรกิจคงเห็นแล้วว่ามันเป็นของที่ลงทุนถูกแสนถูกแต่กำไรที่จะได้กลับมานั้นมหาศาล ถ้าทำการบ้านมาดี</p><p>radiz</p> http://www.thaicss.com/รู้จักการวางกลยุทธ์เนื้อหาสำหรับเว็บไซต์/ <p> เรากำลังอยู่ในช่วงไหนของการเดินทาง กับการเขียน CSS Layout กันแน่ หลายคนยังสงสัย หลายคนก็ไม่สงสัยหรืออีกไม่น้อยไม่อยากจะรู้ ขอแค่เพียงทำมาหากินได้ก็พอ เพราะของบางอย่างไม่ต้องรู้เพราะมองไม่เห็นประโยชน์ ว่ามันจะเอามาช่วยประคองชีวิตต่อไปอย่างไรได้</p> <p> เรื่อง ยุคสมัยของการเขียน CSS Layout นี้ จริงๆ มันก็ไม่ใช่เรื่องใหญ่ขนาดกู้วิกฤติการเมืองได้ แต่มันพอที่จะให้เรามองเห็นอนาคตข้างหน้าว่า ต่อไปแล้ว ชีวิตของเราในอาชีพนี้จะเดือนไปทางไหน</p> <p> ผมขอแบ่งออกเป็น 3 ยุคใหญ่ๆ ดังนี้</p> <ol> <li>Table Layout</li> <li>Floating Layout (Tableless layout) </li> <li>Positioning Layout</li> </ol><p>pornantha</p> http://www.thaicss.com/ยุคสมัยของ-CSS-HTML-Layout/