การสร้างเว็บไซต์อย่าง มืออาชีพ

งานนำเสนอเรื่อง: "การสร้างเว็บไซต์อย่าง มืออาชีพ"— ใบสำเนางานนำเสนอ:

1 การสร้างเว็บไซต์อย่าง มืออาชีพ
ว่าที่ พ.ต.ต.พงศ์สยาม ทองแท้

2 3 วัน เรียนอะไรกันบ้าง ... ระบบคอมพิวเตอร์ และเทคโนโลยีอินเทอร์เน็ต 2 hr. เทคโนโลยี CMS และ HTML 4 hr. เทคนิคการตกแต่งภาพ สำหรับเว็บไซต์ 4 hr. การจัดวางเนื้อหา (Content) บนเว็บเพจ 5 hr. ฝึกสร้างเว็บไซต์หน่วยงาน 2 hr.

3 คำศัพท์ และนิยามสำคัญ
เว็บเพจ (Web page) = หน้าเอกสารที่ประกอบ ไปด้วย Link เชื่อมโยงไปยังเว็บเพจอื่นๆ ได้ เว็บไซต์ (Web site) = ที่อยู่ทางอิเล็กทรอนิกส์ ซึ่ง เป็นแหล่งจัดเก็บและให้บริการเว็บเพจ หลายๆ หน้า โฮมเพจ (Home page) = เว็บเพจหน้าแรกของ เว็บไซต์นั้นๆ

4 Server = เครื่องคอมพิวเตอร์แม่ข่าย
Content = เนื้อหาสาระบนเว็บเพจ Internet = ระบบเครือข่ายข้อมูลคอมพิวเตอร์ ที่ไร้ขอบเขตจำกัด Intranet = ระบบเครือข่ายข้อมูลคอมพิวเตอร์ ที่หาขอบเขตจำกัดได้ bps = บิตต่อวินาที ใช้เรียกความเร็วในการขนถ่าย ข้อมูล เช่น Kbps, Mbps, Gbps - TCP = โปรโตคอลการสื่อสาร (ตัวหนึ่งในอีกหลายๆ ตัว)

5 อะไรที่อยู่ข้างในเว็บเพจ?
สิ่งที่ท่านเห็นจากภายนอก อาจไม่ใช่สิ่งที่เป็นอยู่ ข้างใน ? HTML (Hyper Text Markup Language) Browser ทำหน้าที่แปลภาษา HTML ให้กลายเป็น ภาพ และตัวอักษร ที่เราเห็นอยู่บนเว็บเพจ <a href = “ ตำรวจแห่งชาติ</a> หมายถึง ?

6 สร้างเว็บเพจ...แบบกล้วยๆ 
สร้างง่ายๆ ด้วย Microsoft Word, Excel หรือ แม้แต่ Powerpoint เมนู “บันทึกแฟ้มเป็น” “เก็บเป็นชนิด” แล้วเลือก “เว็บเพจ” - ไม่อยากเหมือนเพื่อน ก็ต้องลงทุนหน่อย ด้วย Macromedia Dreamweaver และ HTML

7 กลไกการทำงานของเว็บไซต์
Client Request Display Processing Client Server Respond Server

8 ระบบคอมพิวเตอร์ และเทคโนโลยีอินเทอร์เน็ต

9 ถ้าจะพิจารณาอะไร ... ให้นึกด้วยว่า “มันอยู่ที่ไหน”
คอมพิวเตอร์แม่ข่าย Internet x คนทำเว็บ คนดูเว็บ

10 คอมพิวเตอร์แม่ข่าย Intranet x คนทำเว็บ คนดูเว็บ

11 ระบบคอมพิวเตอร์ในงานเว็บไซต์
เครื่องคอมพิวเตอร์ (RAM ทำงานเร็ว ลดปัญหา การ Hang ของเครื่อง คอมพิวเตอร์แม่ข่าย (พื้นที่เก็บข้อมูล) ซอฟต์แวร์ แบ่งเป็น 2 ประเภท คือ ซอฟต์แวร์ สำหรับทำเว็บฯ และซอฟต์แวร์สำหรับสื่อสาร บุคลากร ข้อมูล ที่จะมาทำเป็น Content ระบบการสื่อสารข้อมูล

12 พื้นที่เก็บข้อมูลเว็บไซต์
เช่า/ฟรี/สร้างเอง ต้องมี username และ password สำหรับใช้ส่ง ข้อมูล จากเครื่องคอมพิวเตอร์ที่ใช้ทำเว็บ ไปยัง พื้นที่ (คอมพิวเตอร์แม่ข่าย) -

13 ซอฟต์แวร์สำหรับการทำเว็บ
เขียนโค้ดเอง/ใช้เครื่องมือช่วย/เว็บไซต์สำเร็จรูป จำเป็นต้องรู้ HTML เพื่อปรับแต่งเว็บไซต์ให้ได้ดั่งใจ - Macromedia Dreamweaver เป็นซอฟต์แวร์ สำหรับ เป็นเครื่องมือช่วยสร้างเว็บ - Mambo, PHPNuke, อื่นๆ เป็นเว็บไซต์สำเร็จรูป

14 ระบบการสื่อสารข้อมูล ในงานเว็บไซต์
การสื่อสารข้อมูล (Digital Telecommunication) กับการสื่อสารโดยทั่วไป การระบุปัญหาและการแก้ไขปัญหา ต้องตรวจสอบ และพิจารณาเป็นลำดับชั้นของการสื่อสาร โปรแกรม FTP, Web browser โปรโตคอล/การคุยกัน TCP โปรโตคอล การเชื่อมต่อทางกายภาพ ใช้สาย, สัญญาณไร้สาย

15 คนดู ส่งข้อมูลไปยัง Server
Web browser โปรแกรมต่างๆ บน Server TCP โปรโตคอล TCP โปรโตคอล ใช้สาย, สัญญาณไร้สาย ใช้สาย, สัญญาณไร้สาย

16 Server ส่งข้อมูลไปยัง คนดู
Web browser โปรแกรมต่างๆ บน Server TCP โปรโตคอล TCP โปรโตคอล ใช้สาย, สัญญาณไร้สาย ใช้สาย, สัญญาณไร้สาย

17 คนทำ ส่งข้อมูลไปยัง Server
FTP โปรแกรมต่างๆ บน Server TCP โปรโตคอล TCP โปรโตคอล ใช้สาย, สัญญาณไร้สาย ใช้สาย, สัญญาณไร้สาย

18 Server ส่งข้อมูลมายัง คนทำ
FTP โปรแกรมต่างๆ บน Server TCP โปรโตคอล TCP โปรโตคอล ใช้สาย, สัญญาณไร้สาย ใช้สาย, สัญญาณไร้สาย

19 เทคโนโลยีการสื่อสารข้อมูล
Internet & Intranet: ขอบเขตการใช้งาน ระบุได้ คือ Intranet ถ้าระบุไม่ได้ คือ Internet เส้นทางที่ใช้ขนถ่ายข้อมูล เรียกว่า Media มี 2 ประเภท คือ ใช้สาย (Wired) และ ไร้สาย (Wireless) ปัจจุบันกลไกที่ใช้ขนถ่ายข้อมูล เช่น ADSL, xDSL, GPRS, CDMA, Leased Line, WiFi, WiMax, WiBro, ดาวเทียม ฯลฯ

20 เทคโนโลยีการสื่อสารข้อมูล (ต่อ)
Wired Ethernet LAN Other เม็กกะบิต กิกะบิต ADSL, xDSL Leased Line

21 เทคโนโลยีการสื่อสารข้อมูล (ต่อ)
Wireless WiFi CDMA GPRS Bluetooth Mbps เมตร Access Point, Adapter Card ? Mbps ? กม. มือถือ Kbps 3-5 กม. มือถือ ? Kbps ไม่เกิน 10 เมตร มือถือ

22 โปรโตคอลการสื่อสาร TCP
Transmission Control Protocol ข้อกำหนดด้านการควบคุมการส่งข้อมูลในลักษณะ Packet ใช้เป็นมาตรฐานโดยทั่วไป ในการสื่อสารบน Internet และ Intranet รับประกันได้ว่าข้อมูลถึงผู้รับอย่างแน่นอน

23 ซอฟต์แวร์สำหรับการสื่อสารข้อมูล
Web browser: Internet Explorer, Firefox, ฯลฯ FTP: CuteFTP, ฯลฯ

24 แนะนำการใช้ CuteFTP ใช้รับส่งไฟล์ ระหว่างเครื่องคอมพิวเตอร์ที่ใช้ทำเว็บ กับ เครื่องคอมพิวเตอร์แม่ข่าย ขั้นตอนสำคัญ: สร้างบัญชีการเชื่อมต่อ, สร้างการ เชื่อมต่อ, พร้อมรับส่งไฟล์ ระวังจะสับสน ฝั่งซ้ายคือ เครื่องเรา ฝั่งขวา คือ Server มาลองดูกัน …

25 จำลองระบบคอมพิวเตอร์แม่ข่าย
จำลองเครื่องคอมฯ ที่ใช้ทำเว็บ ให้เป็น แม่ข่าย ? โปรแกรม Appserv: Apache Web Server, MySQL Database Server, PHP (Script Language) คำว่า “Server” ทุกคำในหน้าจอนี้ หมายถึง การทำงาน อย่างหนึ่ง ภายใน เครื่องคอมพิวเตอร์เท่านั้น - มาลองติดตั้งกัน … เมื่อเสร็จแล้ว ทดสอบด้วย จะพบหน้าเว็บเพจของ Appserv

26 Apache Web Server ภายใน Apache พื้นที่เก็บข้อมูลอยู่ที่ไหน ?
โฟลเดอร์ (Folder) ที่ใช้เก็บข้อมูล โดยปกติ คือ c:\Appserv\www วางแผนการจัดเก็บให้ดี โดยเฉพาะการตั้งชื่อไฟล์ และ โฟลเดอร์ ทดลองดำเนินการ … จัดการให้ดี !

27 เทคโนโลยี CMS และ HTML

28 โครงสร้าง Content Section Category A Category B Content A1 Content A2
Content B1 Content B2 Title Title Title Title Detail Detail Detail Detail

29 ระดับสิทธิ์การใช้งาน
Administrator All Manager Sec./Grp. Publisher Content Register ดูเท่านั้น

30 HTML Tech. ภาษาที่ใช้เขียนหน้าเว็บเพจ - Web browser ทุกยี่ห้อ เข้าใจและแปลภาษานี้ได้ - ผลจากการแปลภาษา คือ หน้าเว็บที่เข้าใจได้โดยทั่วไป - ประกอบด้วย tag ซึ่งหมายถึง ข้อกำหนดในการแสดงผล - < > คือ tag เปิด, </ > คือ tag ปิด - ภายใน tag เป็นตัวอักษร หรือข้อความ ที่กำหนดรูปแบบ การแสดงผล เช่น <b>หัวข้อข่าววันนี้</b>