Category Archives: HTML+CSS

Microdata

Microdata and Html5

Microdata

คือการบอกให้ Browser รู้ว่าเรากำลังเสนอ content อะไร และสามารถอ่านโค๊ตที่เราเขียนได้ง่ายขึ้นสำหรับ Search Engine ก่อนหน้านี้ผมได้ลองใช้ Validator.nu Html5 จะมีฟังชั่นนึง ที่วิเคราะห์โครงสร้างโค๊ตที่เราเขียนออกมาเป็น tree structure คล้ายๆจะ Group หมวดหมู่ content ให้เรา และหลังจากนั้นประมาณ 2เดือน ตัวฟังชั่นนี้ก็ถูกถอดออกไป เหลือแค่เช็ค Html5 ให้ถูกต้องตามมาตรฐาน W3C แค่นั้น แล้วก็มีคนพูดถึงและเริ่มใช้ Microdata กัน เป็นหน้าที่เรา (Respect) ที่คนเขียนโค๊ตแบบเราต้องรู้และเข้าใจ
Continue reading Microdata and Html5

WebDesign 2012-2013

Flat Design VS Realism

รวมงานปีที่ผ่านมา มาให้ดูครับ ก็เป็นส่วนหนึ่งจากหลายๆงาน ที่ชอบ Responsive Html5 Css3 และ CSS Selectors เลเวล4 ซึ่งเป็นฟีเจอร์ใหม่ ของ CSS4 ถ้าผมจำไม่ผิด คือพัฒนาจากตัว Css3 บางตัวที่มีคุณสมบัติล้ำ จนบราวเซอร์บางตัวแสดงผลไม่ได้… ปีที่แล้วได้คลุกคลีพวก Html5+css3 ไม่ยากอย่างที่คิด แต่ยังเหลือฟังชั่นบางตัว Audio + video + canvas ที่ยังใช้ไม่ได้เต็มที่ครับ ยังศึกษาไม่ได้ละเอียดเท่าไหร่ บน desktop ค่อนข้างมีปัญหากับบาง Borwser ตัวที่คุณก็รู้ว่าใคร

แต่ถ้าข้ามไปทำงานด้าน Mobile เป็นอะไรที่สบายจริงๆ ไม่่ต้องไปสนใจ ie เวอร์ชั่นที่ต่ำกว่า8 เพราะไม่มีในมือถือแน่นอน (ผมยังไม่เคยลองใช้วินโดว์โฟนครับ ไม่รู้ว่าใช้ browser ตัวไหนเข้าเว็บ) อย่างตัว Responsive ได้ลองกับ เว็บ suzukicup 2012 ซึ่งก็ลองแอบทำไว้เฉพาะหน้าแรก (http://www.siamsport.co.th/suzukicup2012/) ตัวนี้ผมไม่ได้ดีไซน์ครับ แต่เป็นคนเขียนโค๊ต Html เลยแอบทำ Responsive ไว้เล่นๆ ถ้าจะทำจริงๆ ต้องวาง flow ตั้งแต่การแสดงผลบนมือถือก่อน แล้วค่อยขยายมา ipad แล้วมา desktop ก็จะเป็นอะไรที่แจ่มมาก (แต่ตอนนั้นไม่มีคนสนใจเรื่องนี้ Responsive) อาจจะติดปัญหาเรื่องการแสดง Ads (- -*) เว็บแรกที่ผมใช้เป็นเคสสตาร์ทดี้ต้องยกให้ เดลินิวส์ครับ ปรับแบบฟลู responsive เลย เจ้าแรกของไทย สนุกดอทคอม กระปุกดอทคอม เลือกปรับหน้าดีเทล ผมคิดว่าน่าจะมีปัญหาเรื่องการวาง Ads. เหมือนกัน ถ้าทำจริงๆต้องเริ่มคิดตั้งแต่งเรื่องรูป img การแสดงผลในโมบาย ต้องเน้นคอนเท้นที่คนเข้าใช้บ่อยจริงๆ ต้องระดมสมองและความคิดกันยกใหญ่ กล้าตัดคอนเท้นบางส่วนที่ไม่จำเป็นออกไป เคยอ่านคอมเม้นด้านร้ายของ responsive ก็จะมีเรื่องพวกนี้เป็นส่วนใหญ แต่ผมก็สรุปข้อดีมาประมาณนึงของการใช้ Html5+Css3

– Seo ดีขึ้น text ต่างจาก images file ใช้ html5 สามารถเข้ากับระบบ source code control system (sccs) อ่านจากโค๊ตได้เลย มีความเป็น semantic มากกว่าเดิม เพราะจะระบุ ส่วนไหนทำหน้าที่อะไร

– ความสามารถเรื่อง animation และ graphic 2d+3d บนเว็บ มีความสามารถใกล้เคียง flash ทำงานร่วมกับ css3+jquery

– สะดวกต่อการทำ web application สามารถนำไปประยุกต์ใช้ได้กับ mobile app สามารถบิ้วจากตัว html5 ได้เลย เพราะมี api หลายตัวรองรับ มีความได้เปรียบของเรื่อง search engine ที่จะหาเราเจอ เพราะว่ามันยังมีคุณสมบัติของเว็บอยู่ คือบิ้วจาก html5 ไปเป็น app เลย ใกล้เคียง native app แต่เรียกว่า hybrid (อ้างอิงจากคำพูด sa หัวหน้าทีมเดฟโมบายและเว็บไซต์ อิอิ)

(ความสามารถเรื่อง animation+Css3 ฝรั่งเขาทำ Ads responsive แล้ว กำลังซุ่มทำ ทดสอบอยู่ครับ รอแป๊ป อิอิ)

สิ่งที่ชอบที่สุดของตัว Html5 คือการแสดงผลโครงสร้างของ Html ที่เราตัดออกมา แล้วเอาตรวจกับ W3C ก็จะแสดง content-type ออกมาเป็น Tree เท่ห์มากๆ มันก็เป็นการแสดงให้เราเห็นว่า การ group content ของเรานั้น ใช้ได้แค่ไหน ผมก็ไม่มั่นใจนะว่า ตัวนี้จะมีผลกับโครงสร้าง algorithm seo หรือเปล่า (เคยถามเพื่อนโปรแกรมเมอร์ อยากรู้เรื่องอัลกอริทึ่ม seo ที่เขาเขียน แต่เขาไม่บอก 555+)

W3C validation
W3C validation

ตอนนี้คิดว่าตัวเองยังต้องการศึกษาเพิ่มเติมอีกมาก html + design พอเอาตัวรอดได้ครับ แต่อยากสร้างฐานะให้ดีกว่านี้ คงต้องศึกษา javascript เพิ่มเติม หรือไม่ก็ลงเรียน php ไปเลย แก่แล้ว หางานยากจังครับ T_T ฝากผลงานไว้แค่่นี้ก่อนครับ ขอบคุณครับผม (ขอบคุณ siamsport.co.th ผมขอเอาผลงานมาลงเว็บหน่อยนะครับ ไม่ได้หวังผลประโยชน์อันได บันทึกการก้าวเดินของผมแค่นั้นเอง)

WebDesign2012

หลังจากที่ไม่ได้อัพเดท Blog มานาน ก็เอาวันนี้แหละครับ “ซิงเจียอยู่อี่ ซิงนี้ฮวกใช้” (เป็นคำจีนแต้จิ๋ว บ่แม่นจีนกลาง) ก็ไม่ได้มีเชื้อสายจีนหรอกนะครับ แต่อยากได้แฟนเป็นคนจีน 55555+ #นี่แน่ะ

เอาผลงานของปีที่แล้ว ปีโลกแตกแต่ไม่แตก ปี2012 หรือปี 2555 ส่วนใหญ่จะเป็นงานลง code Html+css+Jquery ในส่วนของ Font-End Developer และก็ทำ Design ด้วย เรียกได้ว่าจบงานนี้ต่องานใหม่ วน loop ไปเรื่อยๆ แทบไม่ได้หยุดพักหายใจหายคอเลย แต่มุกที่ Bad ที่สุดคือ “เงินมันหายไปอยู่ไหน” 55555+ เป็นตลกร้ายครับ ที่ทำร้ายจิตใจมากๆ ในตัวงานก็จะรวบรวมทั้งหมด มีทั้ง Mobile website ,Responsive website ,Desktop website

ปีนี้ความตั้งใจก็เหมือนปีที่แล้ว แต่จะอัพเดท แปลเรื่องพวกเรื่อง HTML5+CSS3 มาลง Blog ให้มากขึ้นจะเอาแต่ที่ได้ใช้ และที่ผมเข้าใจ และได้ทำแล้ว มาตีพิมพ์เป็นภาษาไทย 55555+ #แปลผิดแปลถูกก็อย่าว่ากันเด้อ ,ในเร็วๆนี้จะเปลี่ยน template มาใช้ Responsive บ้าง และกำลังอยู่ในขั้นตอนการโมดิฟายครับ จะมีปรับโครงสร้างใหม่ใช้ อยากลงลึกกว่านี้ (เว็บตอนนี้ยังง่อยอยู่เลย – -*)

~ สวัสดีครับครับ Ryan iBarGame

เป็นรูปที่ save print screen มาจาก Browser นะครับ เชิญรับชมครับ
Continue reading WebDesign2012

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