หลักการออกแบบและพัฒนาเว็บไซต์

หลักการออกแบบและพัฒนาเว็บไซต์

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

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

 

 

ขั้นตอนการพัฒนาเว็บไซต์

1.    กำหนดเป้าหมายและวางแผน        

2.    วิเคราะห์และจัดโครงสร้างข้อมูล    

3.    ออกแบบเว็บเพจและเตรียมข้อมูล    

4.    ลงมือสร้างและทดสอบ              

5.    เผยแพร่และส่งเสริมให้ป็นที่รู้จัก     

6.   ดูแลและปรับปรุงอย่างต่อเนื่อง      

 

กำหนดเป้าหมายและวางแผน

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

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

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

3.     เตรียมแหล่งข้อมูล   เนื้อหาหรือข้อมูลคือสาระที่แท้จริงของเว็บไซต์ เราต้องรู้ว่าข้อมูลที่จำเป็นต้องใช้จะมาจากแหล่งใดได้บ้าง เช่น ถ้าเป็นเว็บของบริษัท ใครที่จะเป็นผู้ให้ข้อมูล หรือถ้าเป็นเว็บข่าวสาร ข่าวสารนั้นจะมาจากแหล่งใด มีลิขสิทธิ์หรือไม่

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

5.     เตรียมทรัพยากรต่างๆที่จำเป็น   เช่น โปรแกรมสำหรับสร้างเว็บไซต์ โปรแกรมสำหรับสร้างกราฟิก ภาพเคลื่อนไหว และมัลติมิเดีย โปรแกรมอื่นๆที่ต้องใช้ การจดทะเบียนโดเมนเนม ตลอดจนการเตรียมหาผู้ให้บริการรับฝากเว็บไซต์ (Web Hosting) และเลือกแผนบริการที่เหมาะสม

 

วิเคราะห์และจัดโครงสร้างข้อมูล

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

-          แผนผังโครงสร้างของเว็บไซต์  ลำดับการนำเสนอ สารบัญ   หรือผังงาน

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

-          องค์ประกอบต่างๆที่จะนำมาใช้ในเว็บเพจมีอะไรบ้าง เช่น รูปภาพและภาพกราฟิก,เสียง,วีดีโอ,มัลติมีเดีย,แบบฟอร์ม ฯลฯ อะไรบ้างที่บราวเซอร์ของผู้ชมสนับสนุน และอะไรบ้างที่ต้องอาศัยโปรแกรมเสริม

-          ข้อกำหนดเกี่ยวกับลักษณะหน้าตาและรูปแบบของเว็บเพจ

-          ข้อกำหนดของโปรแกรมภาษาสคริปต์หรือเว็บแอพพลิเคชั่น และฐานข้อมูลที่ใช้ในเว็บไซต์

-          คุณสมบัติของเว็บเซิร์ฟเวอร์ รวมถึงข้อจำกัด และบริการเสริมต่างๆที่มีให้

 

ออกแบบเว็บเพจและเตรียมข้อมูล

                เป็นขั้นตอนการออกแบบเค้าโครงหน้าตา และลักษณะด้านกราฟิกของหน้าเว็บเพจ เพื่อให้ผู้ชมเกิดอารมณ์ความรับรู้ต่อเว็บเพจตามที่เราต้องการ ดังนั้นผู้ที่ทำหน้าที่นี้จึงควรมีความสามารถทางด้านศิลปะพอสมควร โปรแกรมที่เหมาะจะใช้ในการออกแบบคือ Adobe Photoshop หรือ Macromedia Fireworks ซี่งผลที่ได้จะประกอบด้วยไฟล์กราฟิกต่างๆ ที่ใช้บนเว็บเพจ เช่น โลโก้,ภาพพื้นหลัง,ปุ่มเมนู,ไอคอนที่เป็นหัวคอลัมน์ และแบนเนอร์โฆษณา

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

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

 

 

ลงมือสร้างและทดสอบ

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

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

 

 

 เผยแพร่และส่งเสริมให้ป็นที่รู้จัก

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

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

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

 

 ดูแลและปรับปรุงอย่างต่อเนื่อง

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

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

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

Dreamweaver

  
                                  
    Dreamweaver เป็นโปรแกรมประเภท Web Design ซึ่งมีคุณสมบัติในการใช้งานในแบบ WYSIWYG อ่านว่า วิสสิวิก (What You See Is What You Get) คือ โปรแกรมประเภทคุณออกแบบหน้าเว็บเพจ หรือเว็บไซต์ มาอย่างไรในโปรแกรม  คุณก็จะเห็นงานของคุณเป็นแบบนั้น
การใช้งานของโปรแกรมจะอำนวยความสะดวกให้กับการออกแบบ webpage เป็นอย่างมาก โดยโปรแกรมจะทำงานในลักษณะ HTML Generator นั่นคือโปรแกรมจะสร้างรหัสคำสั่ง HTML โดยเราไม่จำเป็นต้องมานั่งเรียนรู้ CODE ของ HTML เลย เราก็สามารถสร้าง website ได้อย่างมืออาชีพแล้ว โดยโปรแกรมมีลักษณะการทำงาน คล้ายๆกับการพิมพ์เอกสารด้วย Word Processing ที่สามารถใช้เครื่องมือ (Tool bars) หรือแถบคำสั่ง (Menu bar) ควบคุมการทำงาน ช่วยให้การใช้งานง่าย สะดวกและรวดเร็ว

ส่วนประกอบของโปรแกรม Dreamweaver

• แถบชื่อเรื่อง (Title Bar) แสดงชื่อแฟ้มข้อมูลที่กำลังใช้งานอยู่
• แถบคำสั่ง (Menu Bar) เป็นส่วนที่เก็บคำสั่งต่าง ๆ ที่ใช้งานในโปรแกรม Dreamweaver
• แถบ Document Tool Bar เป็นส่วนที่ใช้ในการจัดการกับเว็บเพจ ณ ขณะนั้น เช่นการเปลี่ยนมุมมองในการดูหน้าเว็บเพจ
• แถบ Insert Bar เป็นกลุ่มเครื่องมือที่ใช้สร้างองค์ประกอบต่าง ๆ ในเว็บเพจ ซึ่งประกอบด้วยชุดเครื่องมือ 8 ชุดด้วยกัน
• พื้นที่ออกแบบ (Document Window) เป็นส่วนที่ใช้สำหรับใส่เนื้อหาและจัดองค์ประกอบของเว็บเพจ โดยประกอบด้วยมุมมองการทำงาน 3 รูปแบบด้วยกันคือ Design  ให้แสดงแต่หน้าเว็บเพจปกติไม่ต้องแสดงโค้ด HTMLSplit เป็นหน้าต่างที่ให้แสดงเฉพาะโค้ด HTML ของหน้าเว็บเพจที่เราทำงานอยู่
   Design เป็นหน้าต่างที่ให้แสดงทั้งโค้ด HTML และหน้าเว็บเพจที่เราทำงาน

              

• แถบสถานะ (Status Bar) เป็นส่วนที่แสดงสถานะของการใช้งานโปรแกรม ณ ขณะนั้น หน้าต่าง Properties เป็นส่วนของคำสั่งที่ใช้ในการกำหนดคุณสมบัติขององค์ประกอบต่าง ๆ ที่เราต้องการเปลี่ยนแปลงหรือตกแต่ง 
• Panel Group เป็นกลุ่มของแผงควบคุม ที่ใช้แทนคำสั่งและติดต่อกับฐานข้อมูล

Css

CSS ซึ่งย่อมาจากคำว่า Cascading Style Sheets นั้นเอง บางทีอาจจะเรียกว่า Style Sheets หรือ CSS ซึ่งจริงๆแล้วมันคือตัวเดียวกัน การทำงานของ CSS จะทำงานร่วมกับ HTML โดยจะกำหนดการแสดงผลของสิ่งต่างบนเว็บ เช่น สีอักษร สีพิ้นหลัง ขนาดตัวอักษร จัดการเลย์เอ้าท์ ให้สวยงามและอื่นๆ ข้อดีสำคัญของ CSS 1. ทำมห้ขนาดไฟล์แต่ละหน้าเล็กลงกว่าเดิม เพราะใช้โค้ดน้อยกว่า 2. มีความยืดหยุ่นสูง ในการปรับแต่งแก้ไขในอนาคต 3. สามารถกำหนดแยกไว้ต่างหากจาก ไฟล์เอกสาร html และสามารถนำมาใช้ร่วม     กับเอกสารหลายไฟล์ได้ สำหรับการแก้ไขก็แก้เพียง จุดเดียวก็มีผลกับเอกสารทั้งหมดได้ 4. สามารถจัดการเลย์เอ้าท์ได้อย่างละเอียด แม่นยำ 5. ง่ายในการเรียกดู Source 6. ใช้ดีกับระบบเสิร์ชเอ็นจิน ซึ่ง ระบบเสิร์สเอ็นจิ้นต่างๆ 7. และอีกมากมายค่ะ ตัวอย่างการทำงาน ไฟล์ stylesheet.css .textpink13 {font-size: 13px; font-family: "verdana"; color: #FF00FF; text-decoration:none; font-weight: normal;} ไฟล์ test.html <html> <head><link href="stylesheet.css" rel="stylesheet" type="text/css"></head> <body>      <span class="textpink13">Text Pink Color</span> </body> </html> ผลลัพธ์  Text Pink Color

 Adobe Image Ready

              ImageReady เป็นโปรแกรมที่มาพร้อมกับโปรแกรม Photoshop ดังนั้นเมื่อเราติดตั้งโปรแกรม Photoshop โปรแกรม ImageReady จะถูกติดตั้งโดยอัตโนมัติ โปรแกรม ImageReady นั้นมีส่วนที่คล้ายคลึงกับ Photoshop อยู่บ้าง เช่น ส่วนของแถบคำสั่ง และแถบเครื่องมือ แต่ ImageReady นั้นสามารถทำงานได้เฉพาะโหมด RGB เท่านั้น เป็นโปรแกรมที่สามารถสร้างภาพเคลื่อนไหวได้ Gif Animation (กิฟ อนิเมชั่น)
คือ ภาพเคลื่อนไหว ที่เกิดจากการนำรูปภาพหลายๆ รูปภาพมาแสดงอย่างต่อเนื่องกัน โดยไฟล์ที่แสดงจะเป็น *.gif


การเข้าสู่โปรแกรม ImageReady
การเข้าสู่โปรแกรม ImageReady นั้นมีอยู่ 2 วิธี ด้วยกัน
วิธีแรกคือ การเข้าสู่โปรกรมจาก Start Menu โดยคลิกปุ่ม Start>All Programs จากนั้นเลือก Adobe ImageReady เพื่อเข้าสู่โปรแกรม 
หรือวิธีที่ 2 คือ เข้าสู่โปรแกรม ImageReady จากโปรแกรม Photoshop โดยคลิกปุ่มล่างสุดของToolbox วงกลมสีแดง

สามารถสลับการใช้งานกับ Phtoshop กับ Image Ready ได้ที่หมายเลข 1 และ 2

-------------------------------------------

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

ข้อเสีย

1. ถ้าเราใช้ทำอนิเมชั่น ไฟล์จะมีขนาดใหญ่แล้วแต่ความซับซ้อนของอนิเมชั่นนั้น ทำให้การแสดงหน้าเว็บเพจทำได้ช้าลง
2. Search engine ต่างๆไม่สามารถอ่านข้อความที่อยู่ในไฟล์ Flash ได้ ทำให้เราเสียโอกาศในการอยู่ในอันดับดีๆของ search engine
3. ถ้าผู้ใช้ไม่มี Flash player จะทำให้ไฟล์ Flash ของเรานั้นไม่แสดงผล ดังนั้นเราควรใช้งานโปรแกรม Flash ให้เหมาะสมไม่ควรใช้มากเกินไป

ข้อดี

1. ทำให้เว็บไซต์เราดูน่าสนใจมากขึ้น
2. สามารถเปิดไฟล์วิดิโอ หรือไฟล์เสียง ผ่านเว็บไซต์ได้
3. Flash นั้นปัจจุบันมีความสามารถมาก สามารถสร้างโปรแกรม หรือเกมดีๆ ได้เลย ถ้าเรานำมาประยุกต์ใช้ให้ถูกต้องจะทำให้เว็บของเรามีความสามารถมากขึ้น

ไฟล์ Flash นั้นจะมี 2 แบบคือ

1. swf เป็นไฟล์ที่เราสามารถใส่ได้ทุกที่ในเว็บเพจ
2. flv เป็นไฟล์ Flash video

การใช้งาน flash ร่วมกับ dreamweaver 

          เมื่อเราแทรกไฟล์ flash หรือ ไฟล์มัลติมีเดียต่างๆ ลงใน dreamweaver โปรแกรมจะทำการเขียน JavaScript ขึ้นมาโดยอัตโนมัติ ชื่อว่า AC_RunActiveContent.js ไฟล์นี้จะอยุ่ใน folder ชื่อว่า scripts การใช้งานจริงหรือการอัพโหลดข้อมูลสู่ webserver นั้นห้ามลืมที่จะอัพโหลดไฟล์นี้เด็ดขาด มิฉนั้นไฟล์ Flash หรือ ไฟล์มัลติมีเดีย ต่างอาจไม่แสดงผลได้

-------------------------------------------

Swish

          คือโปรแกรมที่ใช้ออกแบบข้อความ และภาพเคลื่อนไหว รวมทั้งยังสามารถเขียนเสียงเข้าไปใน Movie ได้ด้วยซึ่งสร้างได้อย่างรวดเร็ว และง่ายโดยภาพเคลื่อนไหวสามารถส่งออกไปเพื่อใช้กับหน้าเว็บเพจ และเป็นป้ายโฆษณาต่าง ๆ ได้

Adobe Photoshop

โปรแกรมสำหรับการตกแต่งรูปภาพ

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


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

ความสามารถพื้นฐานของ Adobe Photoshop 

• ตกแต่งหรือแก้ไขรูปภาพ
• ตัดต่อภาพบางส่วน หรือที่เรียกว่า crop ภาพ
• เปลี่ยนแปลงสีของภาพ จากสีหนึ่งเป็นอีกสีหนึ่งได้
• สามารถลากเส้น แบบฟรีสไตล์ หรือใส่รูปภาพ สี่เหลี่ยม วงกลม หรือสร้างภาพได้อย่างอิสระ
• มีการแบ่งชั้นของภาพเป็น Layer สามารถเคลื่อนย้ายภาพได้เป็นอิสระต่อกัน
• การทำ cloning ภาพ หรือการทำภาพซ้ำในรูปภาพเดียวกัน
• เพิ่มเติมข้อความ ใส่ effect ของข้อความได้
• Brush หรือแปรงทาสี ที่สามารถเลือกรูปแบบสำเร็จรูปในการสร้างภาพได้
• และอื่นๆ อีกมากมาย

นอกจากนี้ ยังมีโปรแกรมเสริมที่ช่วยให้การตกแต่งภาพด้วย Photoshop เป็นเรื่องง่ายๆ อีก นั่นคือ "Plug-ins ของ Photoshop" ซึ่งได้แก่ การปรับภาพจากภาพถ่าย มาเป็นภาพแบบวาดด้วยสีน้ำ ภาพลายการ์ตูน เป็นภาพลายเส้น เป็นต้น สำหรับ Plug-ins ที่เป็นที่นิยมใช้กับ Photoshop ได้แก่

• AlienSkin Eye Candy
• Extensis Photo Frame
• Extensis Photo Graphics
• Extensis Photo Tools
• Kai's Power Tools

--------------------------------------------

llustrator

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

1. ภาพแบบพิกเซล (pixel) คือ ภาพที่เกิดจากจุดภาพในรูปภาพที่รวมกันเป็นภาพขึ้น โดยภาพหนึ่งๆ จะประกอบไปด้วยจุดภาพหรือพิกเซลมากมาย และเเต่ละภาพที่สร้างขึ้นจะมีความหนาเเน่นของจุดภาพ หรือบางครั้งแทนว่าความละเอียด (ความคมชัด)ที่เเตกต่างกันไป จึงใช้ในการบอกคุณสมบัติของภาพ จอภาพ หรือ อุปกรณ์แสดงผลภาพได้ 
2. ภาพกราฟิกส์เวกเตอร์ (vector graphics) คือ ภาพที่เกิดจากการกำหนดพิกัดและการคำนวณค่าบนระนาบสองมิติ รวมทั้งมุมและระยะทาง ตามทฤษฎีเวกเตอร์ในทางคณิตศาสตร์ ในการก่อให้เกิดเป็น เส้น หรือรูปภาพ ข้อดีคือ ทำให้สามารถย่อขยายได้ โดยคุณภาพไม่เปลี่ยนแปลง 

ข้อเสียคือภาพไม่เหมือนภาพจริงเป็นได้เพียงภาพวาด หรือใกล้เคียงภาพถ่ายเท่านั้น ข้อมูลภาพพวกนี้ได้เเก่ไฟล์สกุล eps, ai (adobe illustrator) เป็นต้น ** โปรแกรม Illustrator ทำงานแบบ vector graphics

ความแตกต่างระหว่างรูปแบบ vector และแบบ pixel

ภาพจาก wikipedia.org

ภาพแบบ pixel

ภาพแบบ vector

-------------------------------------------------------

anti-aliasing (AA)

        คือการลบรอยหยักของภาพสามมิติคับ ทำให้ภาพดูสมจริงมากขึ้น โดยการนำภาพหลายๆภาพมาซ้อนๆกัน บนภาพๆเดียวทำให้มีรอยหยักน้อยลง

ซึ่งโดยหลักการคือ

ถ้าปรับ

• 2x หมายถึงว่า มีภาพซ้อนกัน 2 ภาพ 
• 4x หมายถึงว่า มีภาพซ้อนกัน 4 ภาพ
• 8x หมายถึงว่า มีภาพซ้อนกัน 8 ภาพ
• 16x หมายถึงว่า มีภาพซ้อนกัน 16 ภาพ
• และเพิ่มขึ้นเรื่อยๆเมื่อปรับมากขึ้น

นั้นหมายความว่า ถ้าเราเปิดแบบ 2x GPU หรือการ์ดจอเราจะประมวลผลหนักเป็น 2 เท่า เพราะมันจะปะะมวลผลตั้ง 2 ภาพ

คำเตือนครับ การเปิด Anti-aliasing มากก็ไม่ดีนะครับ ถ้าเปิดมากไปการ์ดจอเราก็จะยิ่งทำงานหนักมาขึ้น ซึ่งมันก็แล้วแต่บางคนด้วยนะครับว่าจะมีทรัพยากรเครื่องเท่าไหร่

JOOMLA [ CMS ]

CMS 

Content Management System (CMS) 

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

Joomla

          เป็นโปรแกรม open source ที่เป็นระบบจัดการเนื้อหาบนเว็บไซต์ (Content Management Systems หรือ CMS) ซึ่งถูกพัฒนาด้วย PHP และใช้ฐานข้อมูลของ MySQL ในการจัดเก็บข้อมูล โดยมีเทคนิคการเขียนโปรแกรมขั้นสูงภายใต้มาตรฐาน XHTML สามารถทำงานได้หลายแพลตฟอร์มที่รองรับ PHP และ mySQL ทั้งนี้ Joomla! ได้ถูกพัฒนาขึ้นอย่างต่อเนื่องจากทีมพัฒนาที่มีอยู่ทั่วโลก และมีการเปลี่ยนแปลงเพิ่มขึ้นอยู่ตลอดเวลา

Joomla! จะแบ่งเว็บไซต์ออกเป็น 2 ส่วนหลัก ๆ คือ

1. ส่วนหน้า ซึ่งก็คือหน้าตาของเว็บไซต์นั่นเอง ซึ่งเราสามารถดาวน์โหลดรูปแบบTemplate หน้าเว็บได้ฟรีจากแหล่งต่างๆ
2. ส่วนหลัง (CMS) คือ ส่วนการจัดการเนื้อหาและโครงสร้างเว็บ 

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

web browse

web browse 

          คือโปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเวบที่สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล (html) ที่จัดเก็บไว้ที่ระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์ หรือระบบคลังข้อมูลอื่น ๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ

ประโยชน์ของ Web Browser

          สามารถดูเอกสารภายในเว็บเซิร์ฟเวอร์ได้ อย่างสวยงามมีการแสดงข้อมูลในรูปของ ข้อความ ภาพ และระบบมัลติมีเดียต่างๆ ทำให้การดูเอกสารบนเว็บมีความน่าสนใจมากขึ้น ส่งผลให้อินเตอร์เน็ตได้รับความนิยมเป็นอย่างมากเช่นในปัจจุบัน ปัจจุบัน web browser ส่วนใหญ่จะรองรับ html 5 และ อ่าน css เพื่อความสวยงามของหน้า web page

รายชื่อเว็บเบราว์เซอร์ (web browser) ที่เป็นที่นิยมอย่างแพร่หลาย

• Internet Explorer
• Mozilla Firefox
• Google Chrome
• Safari