นี่คือข้อความตัวอย่างบางส่วน
ข้อความตัวอย่างอีกบรรทัดสำหรับบทความ HTML 5 นี้
ในซีรีส์การพัฒนาเว็บบนมือถือ 4 บทความนี้ เราจะแนะนำคุณตลอดการตั้งค่า เน็ตบีนส์ เป็นอัน IDE (เรียกอีกอย่างว่า สภาพแวดล้อมการพัฒนาแบบบูรณาการ) ใน อูบุนตู เพื่อเริ่มพัฒนาเว็บแอปพลิเคชัน HTML5 ที่เหมาะกับอุปกรณ์เคลื่อนที่และตอบสนอง
ต่อไปนี้เป็นชุดบทความ 4 บทความเกี่ยวกับ การพัฒนาเว็บบนมือถือ HTML5:
ส่วนที่ 1: วิธีสร้างโครงการ HTML5 พื้นฐานใน Ubuntu โดยใช้ Netbeans
สภาพแวดล้อมการทำงานที่ได้รับการขัดเกลาอย่างดี (ดังที่เราเห็นในภายหลัง) การเติมข้อความอัตโนมัติสำหรับภาษาที่รองรับ และ ในความเห็นของเรา การผสานรวมกับเว็บเบราว์เซอร์อย่างราบรื่นนั้น Netbeans บางส่วนมีความโดดเด่นมากที่สุด คุณสมบัติ.
ขอให้เราระลึกไว้ด้วยว่า HTML 5 ข้อมูลจำเพาะทำให้นักพัฒนาได้เปรียบหลายประการ – เพื่อยกตัวอย่างบางส่วน: โค้ดที่สะอาดขึ้นด้วยองค์ประกอบใหม่มากมาย) วิดีโอในตัวและ ความสามารถในการเล่นเสียง (ซึ่งแทนที่ความต้องการ Flash) ความเข้ากันได้ข้ามกับเบราว์เซอร์หลัก และการเพิ่มประสิทธิภาพสำหรับอุปกรณ์มือถือ
แม้ว่าในตอนแรกเราจะทดสอบแอปพลิเคชันของเราบนเครื่องพัฒนาในพื้นที่ของเรา แต่ในที่สุดเราจะย้ายเว็บไซต์ของเราไปที่a เซิร์ฟเวอร์ LAMP และเปลี่ยนเป็นเครื่องมือไดนามิก
ระหว่างทางเราจะใช้ประโยชน์จาก jQuery (ไลบรารี Javascript ข้ามแพลตฟอร์มที่รู้จักกันดีซึ่งช่วยลดความซับซ้อนของสคริปต์ฝั่งไคลเอ็นต์อย่างมาก) และ Bootstrap (เฟรมเวิร์ก HTML, CSS และ JavaScript ยอดนิยมสำหรับการพัฒนาเว็บไซต์ที่ตอบสนอง) คุณจะเห็นบทความที่เข้ามาใหม่ว่าการตั้งค่าแอปพลิเคชันที่เหมาะกับอุปกรณ์เคลื่อนที่นั้นง่ายเพียงใดโดยใช้เครื่องมือ HTML 5 เหล่านี้
หลังจากที่คุณอ่านซีรีส์สั้นๆ นี้แล้ว คุณจะสามารถ:
อย่างไรก็ตาม โปรดทราบว่าแม้ว่าเราจะใช้ อูบุนตู สำหรับซีรีส์นี้ คำแนะนำและขั้นตอนต่างๆ จะใช้ได้กับเดสก์ท็อปรุ่นอื่นๆ ด้วยเช่นกัน (ลินุกซ์ มิ้นท์, เดเบียน, CentOS, Fedora, มันชื่อคุณ).
ด้วยเหตุนี้ เราจึงได้เลือกที่จะติดตั้งซอฟต์แวร์ที่จำเป็น (เน็ตบีนส์ และ Java JDKอย่างที่คุณเห็นในหนึ่งนาที) โดยใช้ tarball ทั่วไป (.tar.gz) เป็นวิธีการติดตั้ง
ที่ถูกกล่าวว่า - มาเริ่มกันเลย ส่วนที่ 1.
บทช่วยสอนนี้อนุมานว่าคุณมีการติดตั้ง Ubuntu บนเดสก์ท็อปอยู่แล้ว หากคุณไม่ทำ โปรดดูที่ การติดตั้งเดสก์ท็อป Ubuntu บทความที่เขียนโดยเพื่อนร่วมงานของเรา มาเตย์ ซีซาร์ ก่อนดำเนินการต่อไป
ตั้งแต่ เน็ตบีนส์ เวอร์ชันที่สามารถดาวน์โหลดได้จากที่เก็บอย่างเป็นทางการของ Ubuntu นั้นค่อนข้างล้าสมัย เราจะดาวน์โหลดแพ็คเกจจากเว็บไซต์ Oracle เพื่อรับเวอร์ชันที่ใหม่กว่า
ในการทำเช่นนี้ คุณมีสองทางเลือก:
ในบทความนี้เราจะ เลือก #2 เพราะนั่นไม่ได้หมายถึงแค่การดาวน์โหลดที่เล็กกว่านิดหน่อย (เพราะเราจะติดตั้ง Netbeans ที่รองรับ HTML5 และ PHP เท่านั้น) แต่ยังช่วยให้เรามี ตัวติดตั้ง JDK แบบสแตนด์อโลน เราต้องการมันสำหรับชุดอื่นที่ไม่ต้องการ Netbeans หรือเกี่ยวข้องกับการพัฒนาเว็บ (ส่วนใหญ่เกี่ยวข้องกับ Oracle อื่น ๆ สินค้า).
ดาวน์โหลด JDK, ไปที่ Oracle Technology Network ไซต์และนำทางไปยัง Java → Java SE → ดาวน์โหลด ส่วน.
เมื่อคุณคลิกที่รูปภาพที่ไฮไลต์ด้านล่าง คุณจะถูกขอให้ยอมรับข้อตกลงใบอนุญาต จากนั้นคุณจะสามารถดาวน์โหลดสิ่งที่จำเป็น JDK รุ่น (ซึ่งในกรณีของเราคือ tarball สำหรับ 64-บิต เครื่อง) เมื่อได้รับแจ้งจากเว็บเบราว์เซอร์ของคุณ ให้เลือกบันทึกไฟล์แทนการเปิด
เมื่อดาวน์โหลดเสร็จแล้ว ให้ไปที่ ~/ดาวน์โหลด และแยก tarball ไปที่ /usr/local/bin
:
$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin.
ติดตั้ง เน็ตบีนส์ ด้วยการสนับสนุนสำหรับ HTML5 และ PHP, ไปที่ https://netbeans.org/downloads/ และคลิก ดาวน์โหลด หรือใช้สิ่งต่อไปนี้ คำสั่ง wget เพื่อดาวน์โหลดตามที่แสดง
$ cd ~/ดาวน์โหลด. $ wget https://dlcdn.apache.org/netbeans/netbeans/12.5/Apache-NetBeans-12.5-bin-linux-x64.sh. $ chmod 755 Apache-NetBeans-12.5-bin-linux-x64.sh. $ sudo ./Apache-NetBeans-12.5-bin-linux-x64.sh --javahome /usr/local/bin/jdk-17.0.1
จากนั้นให้ทำตามคำแนะนำบนหน้าจอเพื่อทำการติดตั้งให้เสร็จสิ้นโดยปล่อยให้เป็นค่าเริ่มต้น:
และรอให้การติดตั้งเสร็จสิ้น
ในการเปิด เน็ตบีนส์, เลือกจาก เมนูแดช:
หากต้องการสร้างโปรเจ็กต์ HTML5 ใหม่โดยใช้เทมเพลตพื้นฐานที่ Netbeans ให้มา ให้ไปที่ ไฟล์ → โครงการใหม่ → HTML5 → แอปพลิเคชัน HTML5. เลือกชื่อที่สื่อความหมายสำหรับโครงการของคุณ และสุดท้ายคลิก เสร็จสิ้น (ไม่รวมเทมเพลตไซต์ภายนอกหรือไลบรารี javascript ในขณะนี้):
จากนั้นเราจะถูกพาไปที่ Netbeans UIที่เราสามารถเพิ่มโฟลเดอร์และไฟล์ของเรา รากของเว็บไซต์ ตามความจำเป็น. ในกรณีของเรา นี่จะหมายถึงการเพิ่มโฟลเดอร์สำหรับแบบอักษร รูปภาพ ไฟล์ Javascript (สคริปต์) และสไตล์ชีตแบบเรียงซ้อน (สไตล์) เพื่อช่วยให้เราจัดระเบียบเนื้อหาของเราในบทความต่อๆ ไปได้ดียิ่งขึ้น
หากต้องการเพิ่มโฟลเดอร์หรือไฟล์ ให้คลิกขวาที่ รากของเว็บไซต์ แล้วเลือก ใหม่ → โฟลเดอร์ หรือ HTML ไฟล์.
มาแนะนำของใหม่กัน HTML5 องค์ประกอบและแก้ไขเนื้อหาของหน้า:
.
ตอนนี้คัดลอกข้อมูลโค้ดต่อไปนี้ไปที่ your index.html
ไฟล์ใน Netbeans
เคล็ดลับ: อย่าเพิ่งคัดลอกและวางจากหน้าต่างนี้ไปยังสภาพแวดล้อมการพัฒนาของคุณ แต่ใช้เวลาในการพิมพ์ แต่ละแท็กเพื่อให้เห็นภาพคุณลักษณะการเติมข้อความอัตโนมัติของ Netbeans ซึ่งจะมีประโยชน์ในภายหลัง
!DOCTYPE html>TODO จัดหาชื่อเรื่อง นี่คือส่วนหัว นี่คือข้อความตัวอย่างบางส่วน
ข้อความตัวอย่างอีกบรรทัดสำหรับบทความ HTML 5 นี้
คุณสามารถดูหน้าโดยเลือกเว็บเบราว์เซอร์ (ควร Firefoxดังรูปด้านล่าง) และคลิกปุ่ม เล่น ไอคอน:
คุณสามารถดูความคืบหน้าของการพัฒนาได้จนถึงตอนนี้:
ในบทความนี้ เราได้ทบทวนข้อดีบางประการของการเขียนเว็บแอปพลิเคชันของคุณโดยใช้ HTML 5 และกำหนดสภาพแวดล้อมการพัฒนาด้วย เน็ตบีนส์ ใน อูบุนตู.
เราได้เรียนรู้ว่าข้อกำหนดของภาษานี้แนะนำองค์ประกอบใหม่และทำให้เรามี ความเป็นไปได้ในการเขียนโค้ดที่สะอาดขึ้นและแทนที่ส่วนประกอบที่ต้องใช้ทรัพยากรมาก เช่น ภาพยนตร์ Flash ที่มีในตัว การควบคุม
ในบทความหน้าเราจะมาแนะนำ jQuery และ Bootstrap เพื่อให้คุณไม่เพียงแต่ใช้การควบคุมเหล่านี้และดูหน้าเว็บของคุณโหลดเร็วขึ้น แต่ยังทำให้เหมาะกับอุปกรณ์เคลื่อนที่อีกด้วย
ในระหว่างนี้ อย่าลังเลที่จะทดลองกับตัวควบคุมอื่นๆ ใน เน็ตบีนส์และแจ้งให้เราทราบหากคุณมีคำถามหรือความคิดเห็นโดยใช้แบบฟอร์มด้านล่าง