Tag Archives: html5

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 ผมขอเอาผลงานมาลงเว็บหน่อยนะครับ ไม่ได้หวังผลประโยชน์อันได บันทึกการก้าวเดินของผมแค่นั้นเอง)

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

เมื่อ 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 เริ่ม