HTML5 & CSS3

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

• 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 นั่นเอง
• Animation ตั้งค่าให้แสดงอนิเมชั่นจากรูปหนึ่งไปเป็นอีกรูปหนึ่ง เช่น tween เป็นต้น