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) อะไรแบบนี้ก็ได้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น