การปรับแต่งเว็บ HTML5 แบบไดนามิกโดยใช้เครื่องมือออนไลน์โอเพ่นซอร์ส


เมื่อฉันเริ่มบทความล่าสุดในชุดนี้ฉันหวังว่าคุณจะสามารถเข้าใจถึงความสำคัญของ HTML 5 และการพัฒนาเว็บที่ตอบสนองกับมือถือ โดยไม่คำนึงถึงการเลือกเดสก์ท็อปของคุณ Netbeans เป็น IDE ที่ทรงพลังและเมื่อใช้ร่วมกับทักษะบรรทัดคำสั่งพื้นฐานของ Linux และเครื่องมือที่กล่าวถึงในส่วนที่ 3 สามารถช่วยคุณสร้างแอปพลิเคชันที่โดดเด่นได้โดยไม่ยุ่งยาก

อย่างไรก็ตามโปรดทราบว่าเราได้กล่าวถึงพื้นฐานของ HTML 5 และการพัฒนาเว็บในชุดนี้เท่านั้นและคาดว่าคุณคุ้นเคยกับ HTML แต่ WWW เต็มไปด้วยแหล่งข้อมูลที่ดี - บางส่วนเป็น FOSS - เพื่อขยายสิ่งที่เราแบ่งปันที่นี่

ในคำแนะนำสุดท้ายนี้เราจะพูดถึงเครื่องมือเหล่านั้นบางอย่างและแสดงวิธีการใช้เพื่อเพิ่มไปยังหน้าที่มีอยู่ที่เราได้ทำการพัฒนา Beautifying UI (ส่วนต่อประสานผู้ใช้)

คุณจะจำได้จาก ส่วนที่ 2 ของซีรี่ส์นี้ (“ การเพิ่ม jQuery และ Bootstrap เพื่อเขียนแอปพลิเคชันเว็บ HTML5”) ว่าไฟล์ zip Bootstrap มาพร้อมกับไดเรกทอรีชื่อฟอนต์ เราบันทึกเนื้อหาลงในโฟลเดอร์ที่มีชื่อเดียวกันใน SiteRoot ของโครงการ:

ดังที่คุณสามารถบอกได้จากภาพด้านบน Bootstrap ประกอบด้วยชุดขององค์ประกอบที่เรียกว่า glyphicons ซึ่งไม่รวมถึงส่วนประกอบในตัวที่ให้ไอคอนและเมนูสวย ๆ ในไอคอนของคุณ การใช้งาน รายการทั้งหมดของ glyphicons ที่รวมอยู่ใน Bootstrap มีให้ที่ http://getbootstrap.com/components/

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

<li class="active"><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a></li>

(โดยวิธีการจะใช้แท็ก span ที่นี่เพื่อป้องกันไม่ให้ไอคอนปะปนกับส่วนประกอบอื่น ๆ )

และนี่คือผลลัพธ์:

Glyphicons ซึ่งมีประโยชน์ก็มี จำกัด เช่นกัน และนี่คือที่ ตัวอักษรยอดเยี่ยม เข้าสู่ฉาก Font Awesome เป็นชุดเครื่องมือแบบเต็มไอคอน/font/css ที่มีศักยภาพที่จะรวมเข้ากับ Bootstrap ได้อย่างราบรื่น

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

ในการดาวน์โหลด ตัวอักษรที่ยอดเยี่ยม และรวมไว้ในโครงการของคุณให้ดำเนินการคำสั่งต่อไปนี้ (หรือสามารถไปที่เว็บไซต์ของโครงการโดยตรงและดาวน์โหลดไฟล์ zip ผ่านเบราว์เซอร์ของคุณและขยายโดยใช้เครื่องมือ GUI):

# wget http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.3.0.zip

(ใช่แล้วชื่อโดเมนคือ FortAwesome โดยมี R ดังนั้นนี่ไม่ใช่การพิมพ์ผิด)

# unzip font-awesome-4.3.0.zip
# cp font-awesome-4.3.0/css/font-awesome.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp font-awesome-4.3.0/fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts

และเพิ่มไฟล์ .css ลงในรายการอ้างอิงที่ด้านบนของหน้าเหมือนกับที่เราทำกับ jQuery และ Bootstrap ก่อนหน้า (โปรดจำไว้ว่า คุณไม่ต้องพิมพ์ทุกอย่างเพียงลากไฟล์จากแท็บ โครงการ ลงในหน้าต่างรหัส):

ลองดูรายการ แบบเลื่อนลง ในแถบนำทางของเราตัวอย่างเช่น

ดีใช่มั้ย สิ่งที่ต้องทำคือแทนที่เนื้อหาของ ul class ที่มีชื่อว่า เมนูดร็อปดาวน์ ที่ด้านล่างของ index.php ด้วย:

<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>

เชื่อฉัน - การสละเวลาของคุณในการเรียนรู้วิธีใช้เครื่องมือเหล่านี้จะเป็นประสบการณ์ที่คุ้มค่า

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

เมื่อต้องรับมือกับรหัส Javascript (ตัวอย่างเช่นเมื่อทำงานกับ jQuery อย่างที่เราทำใน ตอนที่ 2 ) คุณจะต้องใช้ JSHint ซึ่งเป็นตัวตรวจสอบคุณภาพรหัส Javascript ออนไลน์ที่มีจุดมุ่งหมาย ที่ช่วยให้นักพัฒนาซอฟต์แวร์ตรวจพบข้อผิดพลาดและปัญหาที่อาจเกิดขึ้น เมื่อพบข้อผิดพลาดเหล่านั้น JSHint จะระบุหมายเลขบรรทัดที่พวกเขาอยู่และให้คำแนะนำในการแก้ไข:

แน่นอนว่ามันจะดูดี แต่ถึงแม้จะมีเครื่องมืออัตโนมัติที่ยอดเยี่ยมนี้ก็จะมีบางครั้งที่คุณต้องการให้คนอื่นดูโค้ดของคุณและบอกวิธีแก้ไขหรือปรับปรุงให้ดีขึ้นซึ่งหมายถึงการแบ่งปันอย่างใด

JSFiddle (เครื่องมือทดสอบโค้ด Javascript/CSS/HTML ออนไลน์) และ Bootply (เหมือนกับ JSFiddle แต่เชี่ยวชาญในโค้ด Bootstrap) ช่วยให้คุณบันทึกตัวอย่างโค้ด (หรือที่รู้จักกันว่า ซอดเดิ้ล ) และให้ลิงก์สำหรับแชร์ผ่านอินเทอร์เน็ตได้อย่างง่ายดาย (ไม่ว่าจะทางอีเมลกับเพื่อนของคุณโดยใช้โปรไฟล์เครือข่ายสังคมออนไลน์หรือในฟอรัม)

สรุป

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

โอกาสที่คุณอาจรู้จักแหล่งข้อมูลอื่นเช่นกัน ถ้าเป็นเช่นนั้นคุณสามารถแบ่งปันพวกเขากับส่วนที่เหลือของชุมชน Tecmint โดยใช้แบบฟอร์มความคิดเห็นด้านล่าง - และอย่าลังเลที่จะแจ้งให้เราทราบหากคุณมีคำถามใด ๆ เกี่ยวกับเนื้อหาที่นำเสนอ ในบทความนี้.

เราหวังว่าซีรี่ส์นี้จะมอบความเป็นไปได้มากมายให้คุณในการพัฒนาเว็บที่ตอบสนองต่อมือถือและตอบสนอง