มารู้จัก HTML5 กันดีกว่า....

HTML 5 คืออะไร
HTML 5 เป็นการรวมตัวกันของ HTML + CSS+Javascript เนื่องจากในสมัยนี้ การแสดงผลในหน้าจอคอมพิวเตอร์นั้นมีหลายขนาดมากมาย ไม่ว่าจะเป็นโน้ตบุคขนาดหน้าจอต่าง ๆ iPad ,Galaxy Tab เป็นต้น
แต่การจะตกแต่งเว็บไซต์ ให้ดูดีมีสไตล์นั้น บางคนก็นิยมใช้แฟลชกันอยู่....ซึ่งไม่สามารถนำมาแสดงผลได้ในหน้าจอ iPad iPhone ได้ ดังนั้นการออกแบบเว็บไซต์ให้ใช้ได้ทุก Platform และมีลูกเล่นได้ตามต้องการนั้น ก็คือ การออกแบบด้วย HTML5 + CSS3 นั่นเอง

Semantics: เป็นฟีเจอร์ที่ทำให้ดีไซตเนอร์และโปรแกรมเมอร์ทำงานด้วยกันได้อย่างราบรื่นขึ้น HTML5 จะสามารถตั้งชื่อ element ได้เอง จากเดิมที่เราใช้ div ,span แต่ HTML5 จะสามารถตั้งแท็กหรือได้ โดยการระบุชื่อ element นั้นจะทำให้ดีไซต์เนอร์สามารถเข้าใจว่า ส่วนใดเป็น Header Foote article นอกจากนี้การระบุชื่อของแบบเฉพาะเจาะจง

Offline & Storage: เมื่อก่อนระบบเว็บไซต์จะมี cache หรือ cookie เพื่อสำหรับเก็บค่าต่าง ๆ ของผู้ใช้ แต่ใน HTML5 นั้น จะสามาระเก็บเกมหรืออะไรก็ได้ตามเก็บว็ในเครื่องโดยไม่จำเป็นต้องโหลดซ้ำอีก เช่น เกมส์ ข้อดีของ Offline Storage ก็คือ สามารถใช้งานตามความสามาถของ Web App ได้ถึงแม้ว่าเราจะไม่ได้ต่ออินเทอร์เน็ตก็ตาม เช่น ใช้งาน Google Docs หรือ Gmail แบบ Offline ได้ พอต่ออินเทอร์เน็ตก็จะสามารถ Syn ข้อมูลหากันเอง

Device Access: วิวัฒนาการจะเปลี่ยนไป และอีกไม่นานเราอาจสามารถใช้อุปกรณ์ได้อีกหลากหลาย และไม่จำเป็นต้องอยู่บนจอคอมพิวเตอร์

Connectivity: โดยปกติเราจะใช้ port 80 ในการเข้าชมเว็บไซต์ แต่หลังจากนี้ HTML5 ที่รองรับการใช้ port สารพัดชนิด ก็จะทำให้เราสามารถใช้ฟังชั่นก์การทำงานอื่น ๆ เช่น chat, เปิด FTP

Multimedia: สามารถชมภาพและเสียงได้โดยไม่ต้องลง Flash หรือส่วนอื่น ๆ เช่นหากต้องการลง Youtube ใน HTML5 นั้นสามารถใช้แท๊ก 3D,Graphics &

Effects: รองรับการทำงานแบบ 3D , การแสดงผลที่มีลูกเล่นมากขึ้น

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) อะไรแบบนี้ก็ได้

Create Date : 18 เมษายน 2555 Last Update : 18 เมษายน 2555 16:45:12 น. Counter : 3752 Pageviews.		2 comments
Share Tweet