เริ่มต้นกับ HTML5 / CSS3: เคล็ดลับการนำเสนอและตัวอย่างโค้ด

HTML5 กำลังได้รับความนิยมมากขึ้นและเริ่มที่จะพัฒนาเว็บอินเตอร์เฟสทั้งหมด แม้แต่นักพัฒนาเว็บบางคนก็อ้างว่าองค์ประกอบ HTM5 และเอฟเฟ็กต์ภาพนั้นเปรียบได้กับ Flash รูปแบบการเขียนสคริปต์ใหม่นั้นง่ายต่อการเข้าใจและความสามารถในการปรับปรุงเว็บอินเตอร์เฟสนั้นไม่ จำกัด ดังนั้นวิธีที่น่าสนใจคือ HTML5 นี้ต่อไป?


บทความนี้มีวัตถุประสงค์เพื่อให้ผู้อ่านเข้าใจถึงสิ่งที่คุณควรรู้เกี่ยวกับ HTML5 และเคล็ดลับที่สำคัญที่สุด & ลูกเล่นในการสร้างหน้า HTML5 ที่มีน้ำหนักเบาน่าดึงดูดและมีการโต้ตอบ.

1. พื้นฐานใน HTML5

HTML5

ก่อนที่เราจะเริ่มหัวข้อเพิ่มเติมนี้ใน HTML5 จะเป็นการดีที่จะตรวจสอบเบราว์เซอร์ปัจจุบันของคุณก่อน เนื่องจากเบราว์เซอร์จำนวนมากยังคงอยู่ในโหมดการพัฒนา (การปรับปรุงเพื่อรองรับ HTML5) คุณลักษณะบางอย่างที่กล่าวถึงที่นี่อาจไม่สามารถใช้งานได้.

นี่คือเคล็ดลับสั้น ๆ ในการตรวจสอบของคุณ เบราว์เซอร์ที่เข้ากันได้.

เพื่อทำความเข้าใจเพิ่มเติมข้อ จำกัด ของเบราว์เซอร์บางอย่างคุณอาจอ้างถึง ที่นี่.

2. Text Effects – การเพิ่มเงาและเอฟเฟกต์ข้อความล่วงหน้าใน HTML5

ผลข้อความใน HTML5

เอฟเฟกต์เงาพื้นฐานสำหรับข้อความ

นี่คือรหัสสตริงที่ง่ายที่สุดที่เปลี่ยนบรรทัดแรกของคุณเป็นข้อความที่ดูดี อย่าประมาทเอฟเฟกต์เงา ในการสร้างเอฟเฟ็กต์ที่คล้ายกันนี้นักออกแบบเว็บไซต์ต้องผ่านการแก้ไขภาพหลายขั้นตอนใน Photoshop และตอนนี้ก็แค่เพียงบรรทัดเดียวของโค้ด ระยะทางเงาสีสามารถเปลี่ยนเป็นเนื้อหาหัวใจของคุณ.

ตัวอย่างโค้ด

#shadow h1 {
ข้อความเงา: 0px 1px 1px rgba (0,0,0, .2);
}

ข้อความบนเอฟเฟกต์คล้ายไฟล่วงหน้า

เคล็ดลับต่อไปคือการแสดงให้คุณเห็นว่าการเข้ารหัส HTML5 สามารถปรับเปลี่ยนให้เป็นข้อความที่ดูเย็นขึ้นได้อย่างไร หากคุณทดลองเพียงพอหรือค้นหาตัวอย่างอื่น ๆ ความเป็นไปได้ของการปรับแต่งเอฟเฟกต์นั้นไม่มีที่สิ้นสุด หมายเหตุ: ตัวอย่างนี้ไม่ได้สร้างขึ้นโดยซอฟต์แวร์แก้ไขภาพใด ๆ รหัสธรรมดาใน HTML5.

ตัวอย่างโค้ด

#fire h1 {
จัดเรียงข้อความ: กึ่งกลาง;
กำไร: อัตโนมัติ 200px;
font-family: "ลีกโกธิค", Courier;
ขนาดตัวอักษร: 200px; การแปลงข้อความ: ตัวพิมพ์ใหญ่;
สี: #fff;
ข้อความเงา: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px # 604xx 80px # 451b0e;
}

ตัวอย่างที่ดีอื่น ๆ : http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. มุมโค้งมนใน HTML5

มุมโค้งมนใน HTML5

การออกแบบสไตล์ของเว็บเพจใน HTML5 นั้นไม่เคยมีเรื่องง่ายมาก่อนนับตั้งแต่การแนะนำ CSS และตอนนี้คุณสามารถมีมุมโค้งมนขององค์ประกอบเค้าโครงของคุณ! ลองนึกภาพสิ่งนี้ ไม่มีภาพพื้นหลังที่ตัดแบ่งแล้วไม่มีส่วนภาพยุ่ง สิ่งนี้จะนำเสียงเชียร์มากมายให้กับนักออกแบบเว็บไซต์.

ตัวอย่างโค้ด

div {
เส้นขอบ: 2px solid # 434343;
การขยาย: 10px;
พื้นหลัง: # e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
ความกว้าง: 500px;
}

หมายเหตุ: Moz หมายถึง Mozilla และ webkit สำหรับ Safari และ Chrome.

ตัวอย่างที่ดีอื่น ๆ : http://fjd1.com/roundcorner.html

4. กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) ใน HTML5

แบบฝึกหัด HTML 5 คำแนะนำและตัวอย่าง

กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้หรือที่รู้จักกันทั่วไปว่าเป็น (SVG) เป็นกราฟิกแบบเวกเตอร์ 2 มิติซึ่งกำหนดไว้ในไฟล์ข้อความ XML กล่าวอีกนัยหนึ่งเนื่องจาก DNA ของพวกเขาขึ้นอยู่กับไฟล์ข้อความ XML พวกเขาสามารถสร้างหรือแก้ไขได้บนแพลตฟอร์มเว็บ ซึ่งหมายความว่าสามารถขยายได้อย่างง่ายดายและเครื่องมือค้นหาสามารถอ่านและเข้าใจภาพได้.

โค้ดตัวอย่าง

ตัวอย่างที่ดีอื่น ๆ :

5. การฝังไฟล์ภาพยนตร์ใน HTML5

วิดีโอใน HTML5

นี่เป็นอีกส่วนที่น่าสนใจในการแสดงความสามารถของ HTML5 วิดีโอออนไลน์จำนวนมากมักแสดงต่อผู้ใช้เว็บในรูปแบบของ Flash จนกระทั่งเมื่อเร็ว ๆ นี้การฝังวิดีโอใน HTML5 ได้รับแรงผลักดันอย่างช้าๆ (YouTube เป็นตัวอย่างที่ดี) และ Flash กำลังสูญเสียความน่าดึงดูด เหตุผลที่เป็นเช่นนั้น? ผู้ใช้มือถือ หากคุณต้องการให้วิดีโอของคุณเล่นทั้งในโทรศัพท์ iPhone และ Android HTML5 เป็นวิธีที่จะก้าวไปข้างหน้า.

ในการฝังวิดีโอคุณจะต้องทราบว่าปัจจุบันมี 3 รูปแบบที่รองรับโดยเบราว์เซอร์ที่แตกต่างกัน .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

โค้ดตัวอย่าง

ตัวอย่างที่ดีอื่น ๆ : https://www.html5rocks.com/en/tutorials/video/basics/

6. Slide Presentation ใน HTML5

แบบฝึกหัด HTML 5 คำแนะนำและตัวอย่าง

Powerpoint เป็นชื่อพ้องคำพ้องกับการนำเสนอภาพนิ่ง แต่ทำไม จำกัด ตัวเองด้วยการนำเสนอแบบออฟไลน์ซึ่งคุณสามารถสร้างสไลด์สำหรับผู้ชมเว็บได้ HTML5 ช่วยในการสร้างสไลด์การนำเสนอที่ทรงพลังมากพร้อมด้วยเมนูการเปลี่ยนผ่านและการนำทาง ส่วนที่ดีที่สุดคือคุณสามารถใช้การแปลง 3D กับงานนำเสนอของคุณ.

โค้ดตัวอย่าง

ก่อน
การเปลี่ยนแปลง: ความง่ายทั้งหมดใน 1s;
}

ก่อน: โฮเวอร์ {
สีพื้นหลัง: # F2F5FE;
สีเส้นขอบ: สีดำ;
}

div {
แปลง: rotate3d (1,1,0, 45deg);
}

ตัวอย่างที่ดีอื่น ๆ :

7. เนื้อหาที่แก้ไขได้ใน HTML5

แบบฝึกหัด HTML 5 คำแนะนำและตัวอย่าง

ข้อความแบบคงที่เป็นโรงเรียนเก่าในยุคที่ความยืดหยุ่นและการปกครองแบบไดนามิกทั่วโลก ใน HTML5 คุณสามารถกำหนดพื้นที่ข้อความทำให้ผู้ใช้เว็บสามารถแก้ไขได้โดยไม่ต้องแก้ไขข้อความ.

โค้ดตัวอย่าง

เนื้อหานี้สามารถแก้ไขได้!

ตัวอย่างที่ดีอื่น ๆ : http://html5demos.com/contenteditable

8. Interactive Web Canvas ใน HTML5

แบบฝึกหัด HTML 5 คำแนะนำและตัวอย่าง

นอกจาก SVG ใน HTML5 ผ้าใบเป็นสิ่งที่ดีที่สุดถัดไปที่เกิดขึ้นกับเว็บ Canvas อนุญาตให้เรนเดอร์รูปร่าง 2 มิติที่นำการโต้ตอบไปสู่ระดับทั้งหมดโดยไม่ต้องอาศัย Flash ช่วย.

อย่างไรก็ตามการเขียนโค้ดอย่างง่ายใน HTML5 ที่สร้างปฏิสัมพันธ์ของภาพเคลื่อนไหวที่น่าตื่นตาตื่นใจมีค่าที่จะกล่าวถึงในที่นี่.

ตัวอย่างที่ดีอื่น ๆ : http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. ลากแล้ววางใน HTML5

แบบฝึกหัด HTML 5 คำแนะนำและตัวอย่าง

การลากและวาง (บางครั้งเรียกว่า DnD) เป็นอีกคุณสมบัติที่เยี่ยมยอดที่มีใน HTML5 ตัวอย่างที่ดีคือการใช้งานโดย Google ใน Gmail หากคุณใช้เบราว์เซอร์ที่สนับสนุน HTML5 ใด ๆ คุณสามารถลากไฟล์จากคอมพิวเตอร์ของคุณและวางลงในหน้าต่างข้อความเขียน มันจะถูกเพิ่มโดยอัตโนมัติเป็นสิ่งที่แนบมา เท่ห์แค่ไหน?

โค้ดตัวอย่าง (native DnD)

document.addEventListener (‘dragstart’, ฟังก์ชัน (เหตุการณ์) {
event.dataTransfer.setData (‘ข้อความ’, ‘ข้อความที่กำหนดเอง’);
event.dataTransfer.effectAllowed = ‘คัดลอก’;
} เท็จ);

ตัวอย่างที่ดีอื่น ๆ : http://www.html5rocks.com/en/tutorials/dnd/basics/

10. แผนภูมิข้อมูล CSS บริสุทธิ์ใน HTML5

แบบฝึกหัด HTML 5 คำแนะนำและตัวอย่าง

ก่อน HTML5 มันเป็นไปไม่ได้ที่จะสร้างแผนภูมิที่สามารถทำได้โดยใช้การเข้ารหัสใน HTML นอกจากนี้การเปลี่ยนค่าข้อมูลและเพื่อสะท้อนในแผนภูมิไม่ใช่เรื่องง่าย อีกครั้ง HTML5 เพื่อช่วยเหลือ เมื่อใช้ร่วมกับ CSS คุณสามารถสร้างแผนภูมิที่สวยงามอย่างยิ่งซึ่งทำให้ Microsoft Excel เป็นที่น่าละอาย รหัสนั้นง่ายและสิ่งที่คุณต้องทำคือการใช้เวลาในการปรับแต่งสีและผลกระทบที่สมบูรณ์แบบสำหรับแผนภูมิของคุณ.

ตัวอย่างที่ดีอื่น ๆ : http://cssglobe.com/pure-css-data-chart/

รับ HTML 5 ไม่เพียงพอ?

ดังนั้นเรา! นี่คือเพิ่มเติมเกี่ยวกับหัวข้อไปตรวจสอบพวกเขาออก.

* * * * 30 ตัวอย่างเด็ดสุด ๆ ของเว็บไซต์ HTML 5
* * * * เริ่มต้นกับ HTML 5
* * * * ต้องอ่านแบบฝึกหัด HTML 5 ในปี 2012
* * * * เรียนรู้ HTML 5: 10 ต้องอ่านบทเรียน

นอกจากนี้ตรวจสอบ  หลักสูตร HTML 5 crash นี้โดย Robin Nixon. Robin Nixon เป็นผู้แต่งการเรียนรู้ PHP, MySQL และ JavaScript หลักสูตรนี้ครอบคลุมทุกอย่างที่มือใหม่จำเป็นต้องรู้ใน HTML5 – รวมถึงการเขียนโค้ด HTML พื้นฐาน, ผ้าใบ HTML5 สำหรับการวาด, การระบุตำแหน่ง, ที่เก็บข้อมูลในพื้นที่, รวมถึง HTML5 เสียงและวิดีโอ.

บทความต้นฉบับมีการเผยแพร่ครั้งแรกเมื่อ บล็อก WHSR; ตอนนี้ได้รับการจัดการและอัปเดตโดยเจ้าหน้าที่ BuildThis.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map