Creating Effective Web Pages Tutorial 8 Creating Effective Web Pages Creating HTML Documents and Understanding Brower Extensions

การสร้าง Web Page เว็บเพจคืออะไร เว็บเพจ เป็นสิ่งที่ใช้แสดงข้อมูลผ่านทางอินเตอร์เน็ต ซึ่งเว็บเพจแต่ละหน้าจะมีหน้าตาไม่เหมือนกัน มีการวางรูปและข้อความต่าง ๆ ไม่เหมือนกันขึ้นอยู่กับความต้องการว่าจะให้เว็บออกมาเป็นอย่างไร

หลักในการสร้างเว็บเพจ การวางแผน กำหนดเนื้อหา ออกแบบมุมมองในหน้าเว็บ การเตรียมการ เช่น การเตรียมการด้านข้อมูลทั้งที่เป็นเนื้อหา ภาพ เสียง หรือสิ่งจำเป็นต่าง ๆ

การสร้าง Web Page เราสามารถสร้างเว็บเพจได้ 2 ทาง คือ TextEditor โดยเราต้องรู้คำสั่งของภาษา HTML แล้วพิมพ์โปรแกรมเข้าไปทางTextEditor เช่น Notepad เป็นต้น ตัวช่วยสร้าง โดยใช้โปรแกรมที่มีความสามารถในการสร้างเว็บเพจโดยเราไม่จำเป็นต้องรู้ภาษา HTML เพราะโปรแกรมเหล่านี้จะทำการแปลงให้เราอัตโนมัติ

Language for develop webpage HTML - HTML (ชื่อเต็มคือ Hypertext Markup Language ภาษามาร์กอัปข้อความหลายมิติ) - XML เป็นภาษาที่ใช้เน้น (มาร์กอัป) ส่วนที่เป็นข้อมูล - XHTML (ย่อมาจาก Extensible Hyper Text Markup Language) เป็นภาษาประเภท Markup Language

XHTML ต่างจาก HTML อย่างไร เพียงแต่เข้มงวดเรื่องความถูกต้องของ syntax มากขึ้น

เครื่องมือในการสร้าง Web Page Adobe Illustrator Adobe Illustrator เป็นโปรแกรมวาดภาพกราฟิกแบบเวก Macromedia Dreamweaver MX เป็นโปรแกรมประเภท Web Design สร้างเอกสารเว็บที่ทำงานในลักษณะ HTML Generator Flash คือ โปรแกรมสร้างงานกราฟิก เป็นเทคโนโลยีที่ทำงานกับรูปภาพแบบเวคเตอร์ (Vector)

ปัญหาของระบบเดิม Web Page Car Design เมื่อลูกค้าต้องการซื้ออุปกรณ์ตกแต่งรถยนต์ ทำให้ไม่เห็นภาพได้ว่าหลังการติดตั้งอุปกรณ์ตกแต่งรถยนต์แล้วมีหน้าตาอย่างไร และทำให้ลูกค้าไม่สามารถตัดสินในการซื้อสินค้าได้ ระบบงานเดิมนั้นเวลาที่ลูกค้าต้องการซื้ออุปกรณ์ตกแต่งรถยนต์ต้องไปซื้อที่ร้านโดยตรง

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

ขอบเขตของการพัฒนาระบบ พัฒนา web application ให้ลูกค้าสามารถดูอุปกรณ์ตกแต่งรถยนต์รถผ่านหน้า web page ได้ โดยจะเห็นมุมมองในลักษณะ Flash ที่สามารถดูมุมมองได้รอบคัน โดยที่ลูกค้าสามารถเลือกอุปกรณ์ตกแต่งรถยนต์ผ่านหน้า web ได้ โดยจะสามารถเลือกอุปกรณ์จากรุ่นอุปกรณ์นำมาติดตั้ง เช่น spoiler, skirt,ล้อแม็ก เป็นต้น ซึ่งโปรแกรมจะจำลองเหตุการณ์ให้เห็นว่าหลังจากนำอุปกรณ์มาติดตั้งแล้วรถจะมีหน้าตาอย่างไร พัฒนาส่วนของการแสดงข้อมูลของอุกรณ์ตกแต่งรถยนต์ ซึ่งจะแสดงข้อมูลประเภท ชื่ออุปกรณ์ตกแต่งรถยนต์,รุ่นอุปกรณ์ตกแต่ง,สี,ราคา

วิธีการดำเนินงาน ศึกษาข้อมูลเกี่ยวกับอุปกรณ์ของรถยนต์ ศึกษาความเป็นไปได้ในการพัฒนาระบบ ว่ามีคุ้มค่าในการพัฒนาระบบหรือไม่ การออกแบบการพัฒนาระบบ โดยการใช้เครื่องมือ UML(Unified Model Language) ในการออกแบบ รวมทั้งการออกแบบทางสถาปัตยกรรมที่เกี่ยวข้องกับฮาร์ดแวร์ ซอฟต์แวร์ และเครือข่าย,การออกแบบหน้าหน้าจอที่ใช้ในการติดต่อกับผู้ใช้(User Interface),การออกแบบรายงาน(Report Design),การออบแบบฐานข้อมูล (Database Design)

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

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