Tag Archives: css

HTML5-Structure-Selectors

โครงสร้าง Html5

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

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

เมื่อเข้าสู่ Html5 แรกๆก็ตกใจเป็นอีกระดับของภาษา html หรอ? ยากแน่ๆ พอได้ทำแค่นั้นแหละ… เริ่มจาก div class=”header” , div id=”main” ,div กันไปบลาๆ ซึ่งปัจจุบันเว็บทุกเว็บ div เหมือนกันหมด มี header,menu,main,container,content,footer ฯลฯ ต่อไปไม่ต้อง div แล้ว ใช้ header ตรงตัวไปเลย มันแค่นั้นจริงๆนะ แล้วก็ใช้ css ควบคุมเหมือนเดิม ง่ายดี แต่จริงๆแล้วที่บอกว่า ตัว standard html5 ยังมี bug อยู่ เวลาใช้ก็เลือกเอามาใช้แค่ feature ที่ไม่เป็นอะไร bug ที่ว่าคือ browser หรือเปล่า ความสามารถในการแสดงผล ซึ่งก็รู้ๆกันดีว่า browser ตัวไหน? ฮ่าๆ

1.W3C content-type
เป็นการวิเคราะห์ตัวโครงสร้างของ Structure Html5 ผมชอบตัวนี้มาก รู้สึกท้าทายดี ว่าที่เรา div กันมา มันจะจัดหมวดหมุ่ content ของเราได้ถูกต้องตามชนิดของกลุ่มหรือเปล่า เป็นประโยชน์ต่อการออกแบบมาก

รูปดีไซน์ก่อนทำเป็น Html
รูปดีไซน์ก่อนทำเป็น Html

Continue reading HTML5-Structure-Selectors

CleanCode-Css

การเขียน Code HTML แบบสะอาดลดความซับซ้อนของ tag div

เชื่อว่าตอนเริ่มต้นเขียน style sheet css ก็จะเริ่มจาก div มันไปซะทุกอย่าง แต่เมื่อพอเขียนไปนานๆ ก็จะเริ่มรู้สึกละว่าใช้มันมากเกินไป มันก็มีวิธิ ที่ลดการใช้แท็ก div ลงเพื่อการทำงานโปรเจคที่ใหญ่ๆ มีจำนวนหลายๆเพจ และทำร่วมกันหลายๆคน บางครั้งการทำงานอาจจะมี designer css ต้องทำงานร่วมกันตัดเว็บมากกว่า 2 คน เพื่อประโยชน์ต่อตนเองและเพื่อนร่วมงานและเป็นไปตามทิศทางเว็บไซต์แบบใหม่ที่จะมาในอนาคต

1.ลดแท็ก div ที่ไม่จำเป็น

หลายครั้งที่เราสร้าง div เพื่อมาครอบ form หรือ ul เพิ่อสร้างคุม layout ไม่ปล่อยให้มันลอย แต่เราสามารถ แทรกชื่อคลาส หรือไอดี เ้ข้าใส่เข้าไปได้เลย ดังรูปตัวอย่าง

Continue reading CleanCode-Css

OnSiteSEO

ข้อห้ามและข้อควรระวังในการเขียน XHTML และ CSS

มีโอกาสได้อ่านกฏเหล็กและมาตรฐานการ penalize (ลงโทษ) และ banned (ไม่เข้ามาเก็บเว็บเราเข้าในผล search เลย) ของ google หลายๆข้อ มันเป็นสิ่งที่หลายคนไม่รู้ และใช้กันบ่อยมาก เลยอยากจะเผยแพร่ต่อ ดังนี้

1. หลีกเลี่ยงการใช้ Header Element แล้วซ่อน text ไว้ เช่น

<h1><span>header 1</span></h1>

แล้วใน CSS ใช้ property display:none, visiblity: hidden หรือ text-indent: -9999px; เพื่อซ่อน text ใต้ span ไม่ให้เห็น
ถ้าต้องการที่จะแสดง h1 เป็นรูป ให้ใช้รูปตรงๆไปเลย แล้วใส่ keyword ของรูปเหล่านั้นเป็น alt ของรูปแทน [ข้อนี้ อ้างอิงจาก Matt cutts เป็น software engineer ของ Google]

<h1><img src=”../images/xx.jpg” alt=”header1″></h1>

ที่เป็นเช่นนี้ก็เพราะว่า การที่เราสั่ง hidden text ใดๆ ไม่ว่าจะใน HTML หรือ CSS นั้น google จะมองเป็นการ “ปกปิด” หรือซ่อน keyword ที่ต้องการ ซึ่งเป็นวิธี black hat วิธีหนึ่ง สำหรับดัน SEO ให้สูงขึ้นนั่นเอง
Continue reading OnSiteSEO

Apple กับหน้าพิเศษ HTML5 CSS3

Apple กับหน้าพิเศษ HTML5 CSS3 ปัญหาที่ซ่อนความจริงไว้ข้างหลัง
จากข่าวสองมาตรฐานเรื่องล่าสุดที่ Apple ได้ออกตัวล้อฟรี เหม็นไหม้ยาง ในการสนับสนุน HTML5 CSS3 อย่างเต็มที่ พร้อมๆ กับทำ
Micro site เพื่อแสดงความสามารถของ Safari ที่สามารถทำงานกับ คุณสมบัติใหม่ๆ ได้อย่างราบรื่นนั้น ไม่ว่าจะมองไปทางไหน ผมเห็น
อาร์ทตัวพ่อ ทั้งไทยและเทศ ต่างวิพากย์ วิจารณ์ ในมุม Apple เลือกปฏิบัติ เพราะบังคับให้ดูเฉพาะใน Safari แถมยังพาดประโยคจิก กัด บราวเซอร์ ล้านปลั๊กอินเจ้าหนึ่งเอาไว้ด้วยแม้แต่ Mozilla ก็ออกมาวิพากย์ บางอันกับเขาเหมือนกัน

จริงครับ Apple เลือกพูดเฉพาะส่วนที่ตัวเอง ถูก เท่านั้น เรื่องอย่างนี้เราคุ้นกันอยู่แล้วครับ เพราะไม่ใช่แค่ Apple หรอกครับผมว่า M$
เอง ก็เลือกหลับตาข้างหนึ่งเล่นบทนี้เหมือนกันในตอนที่สดสอบ IE9 พรีวิวล่าสุด ที่ออกมาบอกว่าตัวเองรองรับมาตรฐานได้สูงกว่าใครเพื่อน
ไม่ว่ายังไงก็ช่าง ผมขออย่างหนึ่งสำหรับคนทำงาน CSS HTML ที่รัก และชอบพัฒนาตัวเองอยู่เงียบๆ “อย่าหลงประเด็น” ในขณะที่คนอื่น
ต่างพากัน เฮโล เกทับ บัฟแหลก ด่า Apple อยู่นั้น ขอมองระหว่าง บรรทัด ของที่ซ่อนอยู่ข้างใน มีประโยชน์มหาศาล CSS3 ที่มันขึ้นต้น
ว่า -webkit- ทั้งหลายนั้น คืออนาคต ที่สามารถจับต้อง และนำมาผันเป็นเงินได้ไม่ยาก ถ้าท่านได้ลองเล่นหรือดูตัวอย่างทั้งหมดที่ Apple
จัดมาให้แล้ว ท่านสามารถเอาไปพัฒนาต่อ หรือศึกษาเพื่อเตรียมการรับมืออนาคตที่สดใสก่อนใครได้ไม่ยาก

ไม่ว่าจะเป็นการตั้งค่า Keyframe สำหรับทำภาพเคลื่อนไหว การตั้งค่า Transition การตั้งองศาทำ Transform การใช้ RGBa มีทั้ง
2D หรือ 3D ให้เราได้ดู ถึงแม้ว่าการจัดการรูปแบบ Code ตามตัวอย่างนั้น ยังดู แปลกๆ อยู่บ้าง แต่มันก็ยังมีประโยชน์ เราได้เห็นการ
เขียน CSS โดยตั้ง Class และแปลงมันเป็น Object แล้วดึงเอา ชุด Object นั้นมาวนใช้งานในหลายๆ ที่ในอนาคต การเขียน CSS
จะยิ่งระเบิดระเบ้อมากมายกว่านี้หลายเท่านักเช่น ในหมวดหมู่ Unit ที่ต้อง บวก ลบ คูณ หาร กันสะบั้นหั่นแหลก เพื่อที่จะทำให้หน้าเว็บ
แสดงผลได้หลากหลายในแต่ละอุปกรณ์

ตัวอย่างบางอันที่เราเห็นในหน้าเว็บนั้นก็ เช่น (จาก http://www.apple.com/html5/styles/html5.css )

.fadedIn_pane {

position:absolute;

opacity: 0;

-webkit-animation-duration: .735s;

-webkit-animation-name: pane_scaleIn;

}

@-webkit-keyframes pane_scaleIn {

0% { -webkit-transform:scale3d(1,1,1); opacity:1; }

50% { -webkit-transform:scale3d(0.665,0.665,1); opacity:0; }

100% { -webkit-transform:scale3d(0.33,0.33,1); opacity:0; }
}

Continue reading Apple กับหน้าพิเศษ HTML5 CSS3

เมื่อ Browser เริ่ม

เมื่อ Browser เิริ่มใหญ่โตเป็น Os … แต่ก็กลายเป็น Chrome OS ไปแล้วไงครับ เห่อๆ
ทุกวันนี้ก็บัคกันจะแย่ละครับ จะทำเวปไซต์ที่ต้องทำให้ support กับทุก Browser เย็สส..
เด๋วนี้มีคนพูดถึง HTML5 กันมาก แต่แท้จริงแล้ว มาตรฐาน (ตามกระบวนการของ W3C) นั้น
ยังไม่เสร็จ HTML5 ประกอบด้วยฟีเจอร์หลายส่วน เช่น  <video>, <canvas> ,web workers
,geolocation
ฯลฯ ลองหาอ่านความเคลื่อนไหว ของ html5 ได้ใน google
แต่ที่เอามาเขียนลง blog ก็อยากมาเตือนเพื่อนๆ Graphic design ตามให้ทันนะครับ พลาดไม่ได้

และความที่ต้องคลุกคลีกับ Browser ก็ทำให้รู้จัก css โดยแบบไม่รู้ตัว ลืม <table>,<td>,<tr>
ได้เลย ยุคที่คนทั่วไปเรียกกันว่าเป็นยุค Web 2.0 ที่อะไรๆ ก็ต้องใช้ CSS ต้อง Ajax จนเกร่อเต็มบ้าน
เต็มเมือง ผมมองว่า CSS เป็นอะไรที่ซับซ้อน เพราะจะดีไซน์และทำให้เว็บเบราเซอร์แสดงผลให้ถูก
ต้องทุกตัว มันเป็นอะไรที่นรกมากครับ ถึงขั้นองค์ลงได้ทีเดียว
Continue reading เมื่อ Browser เริ่ม