งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

กระบวนการพัฒนาเอกสารเว็บเพจ เอกสารประกอบคำบรรยายวิชา 310101 คอมพิวเตอร์ และ อินเทอร์เน็ต ภาควิชาวิทยาการคอมพิวเตอร์ มหาวิทยาลัยบูรพา.

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "กระบวนการพัฒนาเอกสารเว็บเพจ เอกสารประกอบคำบรรยายวิชา 310101 คอมพิวเตอร์ และ อินเทอร์เน็ต ภาควิชาวิทยาการคอมพิวเตอร์ มหาวิทยาลัยบูรพา."— ใบสำเนางานนำเสนอ:

1 กระบวนการพัฒนาเอกสารเว็บเพจ เอกสารประกอบคำบรรยายวิชา คอมพิวเตอร์ และ อินเทอร์เน็ต ภาควิชาวิทยาการคอมพิวเตอร์ มหาวิทยาลัยบูรพา

2 การสร้างเอกสารเว็บเพจ เอกสารเว็บเพจ ภาษาที่ใช้สร้างเอกสาร กระบวนการพัฒนาเอกสาร HTML

3 Web Publishing การสร้างเอกสารสำหรับอ่านด้วย คอมพิวเตอร์ โดยไม่ต้องทำเป็นรูปเล่ม หรือ พิมพ์ลงบนกระดาษ เป็นเอกสารแบบ Interactive แสดงข้อมูลที่เป็นภาพเคลื่อนไหวและมีเสียง ได้ เอกสารบน Web แยกเก็บเป็นไฟล์ เรียกแต่ ละหน้าว่า Web Page หน้าแรกเรียกว่า Home Page Homepage ทำหน้าที่เสมือนปกหนังสือและ หน้าสารบัญ

4 เอกสารเว็บเพจ เอกสารอิเล็กทรอนิกส์ที่เผยแพร่ทาง www มีลักษณะเฉพาะคือ ผู้ใช้บริการสามารถควบคุมการโต้ตอบ กับเอกสารที่นำเสนอได้ด้วยตนเอง ความสามารถในการเชื่อมโยง (link) ข้อมูลต่างๆ บน Internet เข้าไว้ด้วยกัน

5 HyperText ข้อความตัวอักษร ที่สามารถ เชื่อมโยงไปยังเอกสารอื่นๆ จุดเชื่อมโยงเอกสารที่ใช้คุณสมบัติ ของ HyperText เรียกว่า HyperLink คุณสมบัติที่ข้อความสามารถที่ เชื่อมโยงไปยังสื่อผสมต่างๆ เช่น ข้อความ ภาพนิ่ง ภาพเคลื่อนไหว และ เสียง เรียกว่า Hypermedia

6 ตัวอย่าง HyperText

7 ภาษาหลักที่ใช้สร้างเว็บเพจ เทคโนโลยีหลักของการสร้างเอกสาร เว็บ กำหนดโดย W3C ได้แก่ HTML (HyperText Markup Language) CSS (Cascading Style Sheet) XML (eXtensible Markup Language) XTML (eXtensible HyperText Markup Language) XSL (eXtensible Style Language)

8 ภาษา HTML HyperText Markup Language กำหนดรูปแบบการแสดงผลใน เอกสารเว็บเพจโดยใช้คำสั่ง (Tag) เว็บบราวเซอร์แปลความหมายของ Tag และแสดงผลข้อมูล ตาม Tag ที่ ได้กำหนดไว้ล่วงหน้า อาจเรียกเอกสารเว็บเพจที่สร้างโดย ใช้ภาษา HTML ได้ว่าเอกสาร HTML

9 เอกสาร HTML แฟ้ม HTML เป็นเอกสารประเภท Text ประกอบด้วย ข้อความที่ต้องการแสดงผล คำสั่งควบคุมการแสดงผลข้อความ เรียกว่า Tag เขียนอยู่ภายใน เครื่องหมาย ส่วนชื่อและ ส่วนขยายของ Tag ที่เขียนอยู่ ระหว่างเครื่องหมาย

10 ตัวอย่างเอกสาร HTML A simple HTML document Welcome to the world of HTML. HTML is not difficult to learn.

11 กระบวนการพัฒนาเอกสาร HTML 1. กำหนดวัตถุประสงค์ของการ เผยแพร่ (Define purpose) 2. กำหนดกลุ่มเป้าหมาย (Define audience) 3. เลือกเครื่องมือที่ใช้ในการพัฒนา เอกสาร (Choose an editor)

12 กระบวนการพัฒนาเอกสาร HTML 4. ออกแบบ (Making design decision) 5. สร้างเอกสาร (Create page) 6. ทดสอบเอกสาร (Test page) 7. เผยแพร่เอกสาร (Publish page)

13 1. กำหนดวัตถุประสงค์ กำหนดวัตถุประสงค์ของการ เผยแพร่เอกสารให้ชัดเจน ช่วยกำหนดขอบเขตเบื้องต้นของ เนื้อหาที่จะนำเสนอ

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

15 3. เลือกเครื่องมือพัฒนาเอกสาร เครื่องมือที่ใช้ในการสร้างเอกสาร HTML เครื่องมือในการพัฒนารูปภาพ กราฟฟิก หรือภาพเคลื่อนไหว เครื่องมือในการพัฒนาภาษาอื่น ๆ ที่ต้องการใช้ร่วมกับ HTML

16 เครื่องมือพัฒนาเอกสาร HTML โปรแกรมบรรณาธิกรจัดการเอกสารข้อความ (Text Editor) โปรแกรมประมวลผลคำ (Word Processing Program) โปรแกรมบรรณาธิกรสำหรับจัดการเอกสาร HTML (HTML Editor) โปรแกรมช่วยสร้างเอกสารเว็บเพจ (Authoring Tool) โปรแกรมจัดการเว็บไซต์ (Site Mangers)

17 โปรแกรม Text Editor โปรแกรมจัดการเอกสารที่เป็น ข้อความ ตัวอย่างโปรแกรม ได้แก่ Notepad (Windows) SimpleText (Macs) vi และ pico (unix)

18 โปรแกรม Word Processing บางโปรแกรมใช้ในการสร้าง แก้ไข บันทึกเอกสารในรูปแบบ HTML ได้ อาจไม่เหมาะสม กับการสร้าง เอกสาร HTML เนื่องจากบาง โปรแกรม อาจบันทึกเอกสารใน รูปแบบที่ไม่เป็นมาตรฐาน ตัวอย่างเช่น โปรแกรม Word2000

19 โปรแกรม HTML Editor รวมความสามารถของ Text Editor เข้ากับ การจัดการรูปแบบที่ เอื้ออำนวยต่อการสร้างเอกสาร HTML มีการตรวจสอบความถูกต้องของ Tag และมีส่วนช่วยเหลือ เช่น BBEdit (Macs)

20 BBEdit

21 โปรแกรม Authoring Tool WYSIWYG (What You See Is What You Get) สร้างเอกสาร HTML ได้โดยไม่ต้อง พิมพ์ Tag เห็นเอกสารที่สร้าง ได้ลักษณะ เดียวกับที่แสดงผลผ่านเว็บบราวเซอร์ เช่น โปรแกรม Microsoft Frontpage Express (Windows)

22 Frontpage Express

23 โปรแกรม Site Managers รวมความสามารถของโปรแกรม หลายประเภทเข้าด้วยกัน มีส่วนช่วยสร้างเอกสาร มีส่วนช่วยจัดการเอกสาร หลากหลายรูปแบบนอกจาก HTML มีส่วนช่วยถ่ายโอนเอกสารไปเก็บ เครื่องให้บริการ

24 โปรแกรม Site Managers ตัวอย่างโปรแกรม NetObjects Fusion (Macs และ Windows) Macromedia Dreamweaver Ultradev (Windows) Amaya พัฒนาโดย W3C จัดเป็น โปรแกรม Open Source

25 Dreamweaver

26 Dreamweaver

27 4. ออกแบบ ออกแบบเอกสาร HTML โดย เลือกหน้าตาของการนำเสนอ เอกสาร เช่นสี รูปภาพในเอกสาร เลือกรูปแบบ และวิธีการนำเสนอ เนื้อหาให้เหมาะสม เช่น ความยาว ของเนื้อหา การเชื่อมโยงเนื้อหา การแสดงผลเนื้อหา เป็นต้น

28 4. ออกแบบ ออกแบบโครงสร้างข้อมูลของ เว็บไซต์ จัดกลุ่มของข้อมูลที่จะนำเสนอ แยกตามหัวข้อ จัดลำดับความสำคัญของหัวข้อที่ นำเสนอ

29 5. สร้างเอกสาร ออกแบบโครงสร้างข้อมูลของ เว็บไซต์ จัดกลุ่มของข้อมูลที่จะนำเสนอ แยกตามหัวข้อ จัดลำดับความสำคัญของหัวข้อที่ นำเสนอ จัดรูปแบบความสัมพันธ์ของข้อมูล

30 6. ทดสอบเอกสาร ทดสอบโดย เปิดเอกสารโดยใช้ โปรแกรมประเภทเว็บบราวเซอร์ ควรใช้เว็บบราวเซอร์มากกว่า 1 โปรแกรมในการทดสอบ หากแสดงผลลัพธ์ไม่ถูกต้องควรทำ การแก้ไขเอกสาร

31 7. เผยแพร่เอกสาร ต้องมีเนื้อที่เก็บเอกสารบนเครื่อง ให้บริการ และเครื่องให้บริการมี โปรแกรมเว็บเซิร์ฟเวอร์ให้บริการ ปัจจุบัน มีบริการฟรีสำหรับเนื้อที่ เก็บเอกสาร และโปรแกรมเว็บ เซิร์ฟเวอร์ และบางแห่งให้บริการเช่า เนื้อที่สำหรับเก็บเอกสารเว็บเพจ

32 นิสิตมหาวิทยาลัยบูรพา สร้าง และเก็บเอกสาร HTML รวมทั้งเอกสารอื่นๆ ไว้ที่เครื่อง student.buu.ac.th หากไม่ได้สร้างเอกสาร HTML บน เครื่องดังกล่าว เมื่อสร้างและทดสอบ เรียบร้อยแล้ว ควรถ่ายโอนแฟ้ม ทั้งหมด โดยใช้บริการถ่ายโอน แฟ้มข้อมูล (FTP)

33 นิสิตมหาวิทยาลัยบูรพา เมื่อถ่ายโอนเรียบร้อยแล้ว ควรทำ การทดสอบอีกครั้งโดยระบุ URL ใน โปรแกรมเว็บบราวเซอร์ ตัวอย่าง URL ~

34 เอกสารอ้างอิง Bryan Pfaffenberger. (2002), Computers in your future 2003., New Jersy, Prentice Hall. H.M Deitel, P.J. Deitel, T.R. Nieto, (2002), Internet & World Wide Web How to Program, Prentice Hall.


ดาวน์โหลด ppt กระบวนการพัฒนาเอกสารเว็บเพจ เอกสารประกอบคำบรรยายวิชา 310101 คอมพิวเตอร์ และ อินเทอร์เน็ต ภาควิชาวิทยาการคอมพิวเตอร์ มหาวิทยาลัยบูรพา.

งานนำเสนอที่คล้ายกัน


Ads by Google