บันทึก: ไปฟัง @iannnnn บรรยายเรื่อง HTML5-CSS3

พอดีวันพฤหัส 12 มกราคมที่ผ่านมา ได้มีโอกาสติดสอยห้อยตามพี่แอน (@iannnnn) ไปฟังพี่แกบรรยายเรื่อง HTML5-CSS3 ที่ ม.เกษตร มาล่ะฮับ

(ภาพจากคุณ @mamuang ฮิ)

ซึ่งงานบรรยายของพี่แอนก็ให้ความรู้เกี่ยวกับ HTML5 และ CSS3 ในแง่ของการทำความรู้จักกับมันว่าเป็นอย่างไร จะเหมือน HTML และ CSS ที่เราใช้กันอยู่ทุกวันนี้ไหม? ก็จะขอเขียนบันทึกไว้จากที่ฟังพี่แอนบรรยายมาฮับ (แต่คงเล่าได้ไม่สนุกเท่าที่พี่แอนพูดนะ 555)

HTML5+CSS3

  • HTML5 เรียกได้ว่าเป็นการรวมตัวกันระหว่าง HTML+CSS+JS
  • เนื่องจากเทรนด์ของการทำเว็บในยุคนี้และ พ.ศ. หน้า นอกจากจะต้องสวยงามตามครรลองเมื่อแสดงผลในจอคอมพิวเตอร์และโน้ตบุ๊กขนาดต่างๆ แล้ว จะต้องรองรับการแสดงผลที่สวยงามบนทุก platform ที่จะเกิดขึ้นได้ในอนาคตที่ไม่จำเป็นจะต้องเป็นอุปกรณ์หน้าจอสี่เหลี่ยมก็ยังได้ แต่ถ้าจะยกตัวอย่างที่เข้าใจง่ายก็คือเวลาเปิดเว็บบน iPad, Galaxy Tab บลาๆ จะต้องแสดงผลได้ถูกต้องตามมาตรฐาน
  • แต่เนื่องจากเทคนิคในการออกแบบเว็บไซต์เพื่อให้มีลูกเล่นหรูหราเฟี้ยวฟ้าวนั้น หลายๆ คนก็ยังนิยมใช้แฟลชในการออกแบบเว็บอยู่ ซึ่งแน่นอน…มาเปิดบน iPad ก็แสดงผลไม่ได้ (เพราะศาสดาไม่ชอบแฟลช โฮก)
  • เพราะงั้น คำตอบของการออกแบบเว็บให้เปิดได้สวยงามทุก platform และมีลูกเล่นประกอบได้ตามต้องการ ก็คือต้องออกแบบเว็บโดยใช้ HTML5 และ CSS3 นั่นเองจ้า ชะลาล่า

ความสามารถใหม่ใน HTML5

  • Semantics: ฟีเจอร์นี้เปรียบเหมือนการหาจุดร่วมที่ดีไซน์เนอร์และโปรแกรมเมอร์จะทำงานด้วยกันได้ราบรื่นขึ้น HTML5 จะสามารถตั้งชื่อ element ได้เลย (จากเดิมเราจะคุ้นว่าตรงนี้คือ div นะ ตรงนี้คือ span นะ แต่เราสามารถตั้งแท็ก?<nav> หรือ?<aside>?อะไรแบบนี้ก็ได้ด้วย โดยการระบุชื่อ element นั้นจะทำให้ดีไซน์เนอร์สามารถเข้าใจได้ว่าโค้ดส่วนนี้เป็นโค้ดส่วนไหน (<header> <footer> <article>) นอกจากนี้การระบุชื่อของ <form> แบบเฉพาะเจาะจงในรูปของ <input type=”search”>,?<input type=”text”>,?<input type=”email”> ฯลฯ?ยังมีประโยชน์สำหรับผู้พิการทางสายตาด้วย (เวลาใช้เครื่องอ่านหนังสือแล้วเวลาเครื่องอ่านเจอ element ที่ตั้งชื่อว่า <input type=”email”>?เครื่องก็จะบอกได้ทันทีว่าจากนี้ให้กรอกอีเมลนะจ๊ะ อะไรแบบนี้เป็นต้น)
  • Offline & Storage: ก่อนหน้านี้ระบบเว็บจะมีแค่ cache หรือ cookie ที่เอาไว้เก็บค่าต่างๆ ของผู้ใช้ แต่ใน HTML5 เราจะสามารถเก็บเกมหรืออะไรก็ได้ตามที่พัฒนากำหนดไว้ในเครื่องได้ทันทีโดยไม่จำเป็นต้องโหลดซ้ำอีก เช่นเกม Cut The Rope ที่เป็นพาร์ตเนอร์กับ Internet Explorer โปรโมตว่าเราสามารถเล่นเกมนี้บนเว็บได้ทันทีแบบไม่มีกระตุก และตัวเกมก็ทำจาก HTML5 จ้ะ
    ข้อดีของ Offline Storage ก็คือ เรายังสามารถใช้งานความสามารถของ Web App ได้ถึงแม้เราจะไม่ได้ต่ออินเทอร์เน็ตก็ตาม เช่น ใช้งาน Google Docs หรือ Gmail แบบ offline ได้ พอต่ออินเทอร์เน็ตปุ๊บก็ค่อยให้ระบบทำการ sync ข้อมูลกันไรงี้
  • Device Access: ความสามารถต่างๆ ?ที่เคยย้ายจากคอมพิวเตอร์มาสู่หน้าจอมือถือหรือแท็บเล็ตให้เราแต่งภาพ, เล่นเกม หรือเฟซบุ๊กทวิตเตอร์กันสนุกสนาน อีกไม่นานเราก็จะสามารถทำมันได้บนอุปกรณ์ที่ไม่รู้ว่ามีอีกกี่ล้านชนิดที่จะเกิดขึ้นหลังจากนี้ แถมไม่จำเป็นจะต้องอยู่บนจอสี่เหลี่ยมอีกต่อไป ประตูกระจกอาจเป็น Display ที่สามารถรับค่า input และ output ไปเพื่อทำอะไรสักอย่าง แม้กระทั่งฝารองนั่งชักโครกอาจจะมีระบบตรวจจับก้น ถ้าเจอปุ๊บให้ฉีดน้ำใส่ได้ทันทีอะไรแบบนี้ HTML5 ทำได้!
  • Connectivity: โดยปกติเราจะใช้ port 80 ในการเข้าชมเว็บไซต์อะไรก็ตาม แต่หลังจากนี้ด้วย HTML5 ที่รองรับการใช้ port สารพัดชนิด ก็จะทำให้เราสามารถใช้งานฟังก์ชั่นอื่นๆ เช่น แชต, เปิด ftp หรือโหลดบิตผ่านเบราเซอร์ก็มีโอกาสเป็นไปได้
  • Multimedia: สามารถชมภาพและเสียงหรือคลิปวิดีโอได้โดยไม่จำเป็นจะต้องลง flash หรือส่วนเสริมอื่นๆ ให้ยุ่งยากวุ่นวายอีก YouTube ก็เป็นอีกเว็บที่ใช้ระบบ HTML5 จะเห็นว่าเดี๋ยวนี้ไม่จำเป็นต้องโหลด flash เราก็ดูคลิปบน YouTube ได้ จะเห็นว่าแต่ก่อนถ้าเราต้องการจะฝังคลิปยูทูบในเว็บไซต์ของเรา จะต้องใช้แท็ก <embed> ตามด้วยโค้ดรุงรังต่างๆ นานา แต่ใน HTML5 นั้นจบได้ด้วยแท็ก <video> และ <audio> ในกรณีที่เป็นเสียง (ส่วนจะตั้งค่าคลิปให้กว้างยาวเท่าไหร่ก็ค่อยไปเขียน script คุมเอายังได้)
  • 3D, Graphics & Effects: รองรับการแสดงผลแบบ 3D, การแสดงผลกราฟิกมีลูกเล่นได้มากขึ้น (วัตถุสามารถมีเงาได้, มีขอบมนได้, ไล่เฉดสีแบบ gradient ได้) สามารถแสดงผลเป็นคนสัตว์สิ่งของโดยโค้ดเพียวๆ ไม่ต้องพึ่งรูปภาพใดๆ เลยก็ทำได้
  • Performance & Integration: ใช้ระบบที่ทำให้เราสามารถเปิดเว็บที่มี content หรือมีการเรียกข้อมูลมหาศาล แต่กลับเปิดเว็บได้รวดเร็วลื่นไหลปรู้ดๆ (จริงๆ มีข้อมูลเชิงเทคนิคมากกว่านี้แต่เนื่องจากเราไม่รู้ลึกรู้จริงจึงขอข้ามไปละกัน แฮ่)
  • CSS3: รองรับการตกแต่ง ดีไซน์ และแสดงผลเว็บไซต์ให้ตรงตามมาตรฐาน ที่เดี๋ยวจะกล่าวต่อไปว่ามีอะไรใหม่ไฉไลกว่าเดิมฮับ

CSS3

ถ้าเปรียบการสร้างเว็บเป็นบ้าน HTML ก็คือบ้าน ส่วน HTML+CSS ก็คือบ้านที่ตกแต่งสวยงามตามภาพ ส่วน UX (User Experience) ก็คือการใช้ทักษะการออกแบบแอปพลิเคชั่นหรือเว็บไซต์ให้ใช้งานง่ายหรืออิงตามพฤติกรรมการใช้งานของผู้ใช้อยู่แล้ว

ตำนาน CSS จากอดีตสู่ปัจจุบัน

 

ความสามารถใน CSS3

  • Round Corners:?ทำมุมมนได้
  • Background Decoration:?ใส่ background ที่ตั้งค่าได้สารพัด (จะให้เป็น image ก็ได้ จะใส่หลาย image ก็ได้ จะใส่สี ใส่สีแบบไล่เฉด สั่ง tile background บลาๆๆ ได้)
  • Colors:?ตั้งค่าสีได้หลายโหมด จากเดิมเราจะต้องใช้สีในโหมด RGB หรือ Hex Color (ที่เป็นโค้ดรหัส 6 ตัว #3b5998 ฯลฯ) ก็สามารถใช้สีในระบบอื่นได้ เช่น HSL (Hue, Saturation, Lightness) หรือจะใช้ระบบ HSLA หรือ RGBA (A คือ Alpla คือค่าความโปร่งใสของสี) ก็ได้
  • Text-Effects: ใส่เงา (text-shadow) หรือตั้งค่า text-overflow (มีตัวอักษรอะไรเกินกรอบที่กำหนดไว้ ก็ตั้งค่าให้แสดงผลเป็นตัวอักษร “…” อะไรแบบนี้ก็ได้)
  • Attribute Matching: ตั้งค่า css อิงตาม element ที่มีลักษณะตามที่กำหนดได้ เช่น ลิงก์ a ที่มีคำว่าแพนด้า ให้แสดงผลเป็นตัวอักษรขาวพื้นหลังดำอะไรงี้
  • Transformation: การจับ, บิด, หมุน ตัวอักษร ภาพ หรืออะไรก็ตามโดยไม่เสียรูปเดิม
  • Box Model: เนื่องจาก CSS3 ปรับปรุงการจัดระเบียบ การแสดงผล มองทุกวัตถุเป็น box ซึ่งครอบคลุมและรองรับการใช้งานที่จะเกิดขึ้นมากขึ้น
  • Webfont: รองรับการแสดงผลในฟอนต์ที่หลากหลายมากขึ้น ก็คือในหน้าเว็บ เราไม่จำเป็นจะต้องใช้ฟอนต์ธรรมดาสามัญอย่าง Tahoma, Arial, Thonburi บลาๆ แต่สามารถใช้ฟอนต์ที่สวยงามและหลากหลายได้ด้วยเทคนิค @font-face ซึ่งบริการเว็บฟอนต์ที่เป็นที่รู้จักกันก็คือ Google Webfont?นั่นเอง
    ใครสนใจรายละเอียดก็อ่านได้ในบทความนี้โลด มาแปะฟอนต์ลงเว็บด้วย Google Font API กัน!
  • Animation: ตั้งค่าให้แสดงอนิเมชั่นจากรูปหนึ่งไปเป็นอีกรูปหนึ่ง (tween) อะไรแบบนี้ก็ได้

 

 

ทั้งหมดนี้ก็เป็นความสามารถของ HTML5+CSS3 ที่ทำให้เราใช้งานเว็บได้เร็วขึ้น ดีขึ้น สวยขึ้น และเป็นมาตรฐานขึ้น แถมยังไม่มีปัญหาในการแสดงผลอีก (ถ้าเปิดในเบราเซอร์ที่มีมาตรฐานน่ะนะ) และในเชิงของการปรับปรุงแก้ไขก็สามารถทำได้ง่ายสบายแฮกว่าการใส่ style ลงใน tag ตรงๆ เหมือนที่เว็บโบราณบางเว็บของไทยยังทำอยู่ ฮ่าๆ

 

ทั้งนี้ถ้าใครอยากศึกษาเรื่อง HTML5 หรือ CSS3 เพิ่มเติม ก็ลองเข้าไปดูตามลิงก์ด้านล่างนี้ได้ฮับ

http://slides.html5rocks.com/#table-of-contents

http://devcheatsheet.com/