10/24/2013

1

Web Standard & Web Design954242 Web Programming

Krittawaya Thongkookrittawaya@gmail.com

Web Standard

พฒันาเว็บต้องคํานงึถึงเรื1องใดบ้าง� เกณฑ์หรือหลกัการสําคญัประกอบการออกแบบ พฒันาเว็บไซต์

� ง่ายต่อการเข้าถึง

� มีช่องทางสื1อสารที1หลากหลาย

� จดัระบบได้ดี เป็นกระบวนจดัระบบของเว็บไซต์เพื1อสนบัสนนุ Search Engine

� รองรับการเข้าถึงในทกุกลุ่ม โดยเฉพาะผู้พิการ (Web Accessibility) ผ่านมาตรฐาน HTML หรือ XHTML และ CSS

Web Standard ตาม W3C� รองรับภาษาแบบ markup language ได้แก่ HTML, XHTML, SVG และ XForms

� รองรับการจดัรูปแบบ stylesheet ได้แก่ CSS, XSL

� รองรับการใช้งาน ECMAScript ได้แก่ JavaScript

� รองรับการใช้งาน DOM (Document Object Models)

� รองรับการอ้างอิงตําแหนง่เอกสารแบบ URIs (Uniform Resource Identifier)

� รองรับข้อกําหนดการส่งข้อมูลแบบ HTTP (HyperText Transfer Protocol) และ MIME (Multipurpose Internet Mail Extensions) รหสัมาตรฐาน IETF RFC 2616

10/24/2013

2

ความเป็นมาของ Web Standard� เพื1อให้นกัพฒันาและออกแบบเว็บรวมถึงบริษัทผู้ผลิตเว็บบราวเซอร์ใช้เป็นแนวทางในการพฒันาเว็บร่วมกนั

� นกัพฒันาและออกแบบเว็บต้องประสบปัญหามากมายจากการสร้างเว็บให้เหมาะสมและดีที1สดุสําหรับผู้ เรียกใช้เว็บเพจที1ใช้เว็บบราวเซอร์แตกต่างกนั

กฤตวยาน์ ทองคู่

ความหมายของ Web Standard� เทคโนโลยีที1องค์กร W3C กําหนดขึ pนเพื1อให้เว็บบราวเซอร์ทกุรุ่นทกุบริษัทผู้ผลิตรองรับเทคโนโลยีนี pเป็นมาตรฐานหลัก

� ทําให้ผู้สร้างเว็บด้วยการเขียนโค้ดหรือใช้โปรแกรมสําเร็จรูปใช้ Web Standard เป็นแนวทางพฒันาเว็บไซต์ที1แสดงผลได้กบัทกุเว็บบราวเซอร์และทกุระบบปฏิบตัิการ

กฤตวยาน์ ทองคู่

กําเนิดของ Web Standard� จากการรวมตัวกันของกลุ่มโปรแกรมเมอร์เพื1อเรียกร้องให้ web browser พัฒนา web browser ให้เป็นไปตามมาตรฐานของ W3C เริ1มเห็นผลในช่วงหลังปี 2004 เป็นต้นมา

� แต่มูลค่าการพัฒนา web browser ที1ผ่านมาสูงจนเกินกว่าที1 web browser จะกลบัสู่มาตรฐาน W3C ได้ทั pงหมด

� ประกอบกับ web browser ยงัต้องรองรับเอกสาร HTML เดิมของตน ที1มีอยู่มากมายบน Internet

� จึงทําให้การกลบัเข้าสู่มาตรฐาน W3C เป็นไปอยา่งค่อยเป็นค่อยไป

กําเนิดของ Web Standard (cont.)� แต่ตวัมาตรฐานของ W3C เอง ก็ซบัซ้อนและยงัไม่รัดกมุพอที1จะสามารถตีความได้ในบางข้อกําหนด

� ทําให้จนถึงปัจจบุนัไม่มี web browser ใดที1สามารถทํางานได้ตามมาตรฐานของ W3C ร้อยเปอร์เซน็ต์

� มี web site ที1สรุปข้อกําหนดของ W3C ว่า ข้อกําหนดใดสามารใช้ได้กับ web browser ใดได้บ้าง อาทเิช่น

� http://www.quirksmode.org

� http://www.webdevout.net

10/24/2013

3

ปัญหาที1เกิดจากการพฒันาเว็บไซต์โดยไมใ่ช้ Web Standard

� การเขียนคําสั� งเพื�อให้แสดงผลข้อมูลบนเวบ็บราวเซอร์◦ อินเทอร์เนต็เอกซ์พลอเรอร์ (Internet Explorer) โดยบริษัทไมโครซอฟท์ ◦ Netscape โดยบริษัท AOL (American Online) ◦ ไฟร์ฟอกซ์ (Firefox) โดยมลูนธิิมอซลิลา ◦ ซาฟารี (Safari) โดยบริษัทแอปเปิล คอมพิวเตอร์ ◦ โอเปร่า (Opera) โดยบริษัทโอเปร่า ประเทศนอร์เวย์ ◦ ฯลฯ

กฤตวยาน์ ทองคู่

� ต้นทุนที�เพิ�มจากการสร้างเวบ็◦ บริษัทต้องเสียค่าใช้จ่ายให้กบันกัพฒันาและออกแบบเว็บ เพื1อเขียนโค้ดแล้วนํามาทดสอบกบัเว็บบราวเซอร์ทกุรุ่นที1มีอยูใ่นตลาดบนระบบปฏิบตัิการต่างๆ ซึ1งเป็นเรื1องที1ทําได้ยาก จึงทําให้ค่าใช้จ่ายในส่วนนี pค่อนข้างสงู

กฤตวยาน์ ทองคู่

ปัญหาที1เกิดจากการพฒันาเว็บไซต์โดยไมใ่ช้ Web Standard

� ความผิดพลาดที�เกดิจากการเขียนโค้ด◦ การเขียนคําสั1งด้วย HTML กรณีที1ไม่มีการใช้เทคโนโลยี CSS อาจมีโอกาสผิดพลาดสงู เพราะต้องกําหนดคําสั1งทกุตําแหนง่ที1มีการจดัรูปแบบการแสดงผล

กฤตวยาน์ ทองคู่

ปัญหาที1เกิดจากการพฒันาเว็บไซต์โดยไมใ่ช้ Web Standard

� การรองรับเทคโนโลยีใหม่ในอนาคต◦ ด้วยโครงสร้างที1เป็นข้อจํากดับางประการของ HTML ทําให้ไม่สามารถนําข้อมลูที1เขียนด้วย HTML ไปใช้กบัเว็บบราวเซอร์บนอปุกรณ์ตวัอื1นได้ เช่น โทรศพัท์มือถือ เป็นต้น

◦ ปัญหาดงักล่าวทําให้นกัพฒันาและออกแบบเว็บพยายามร่วมมือกนัแก้ปัญหา โดยมีองค์กร W3C (World Wide Web Consortium) เป็นแกนหลกัประชมุและหาข้อสรุปร่วมกนั กําหนดออกมาเป็นมาตรฐาน

กฤตวยาน์ ทองคู่

ปัญหาที1เกิดจากการพฒันาเว็บไซต์โดยไมใ่ช้ Web Standard

10/24/2013

4

องค์ประกอบของ Web Standard

Presentation

CSS

Web Standard

Structure

HTML

XHTML

XML Behavior

ECMAScript

DOM

กฤตวยาน์ ทองคู่

องค์ประกอบของ Web Standard� 1. Structure◦ โครงสร้างหน้าเอกสารของเว็บเป็นส่วนที1ถกูกําหนดด้วยภาษามาร์คอพั (Markup Language) เพื1อใส่เนื pอหาและรูปแบบที1แสดงบนเว็บเพจ ได้แก่ ภาษา HTML, XML และ XHTML

◦ HTML - เป็นภาษามาร์คอพัตวัแรกที1ได้รับความนยิมสงูในอดีต เนื1องจากเป็นภาษาที1ง่ายต่อการใช้งานและมีรูปแบบโครงสร้างคําสั1งที1ชดัเจน

◦ XML - ภาษาที1ถกูพฒันาขึ pนมาเพื1อแก้ปัญหาที1เกิดกบัภาษา HTML โดยแยกโครงสร้างของข้อมลูออกจากรูปแบบเอกสารและเพิ1มความยืดหยุน่ให้กบัโครงสร้างมากขึ pน

◦ XHTML - เป็นภาษาที1องค์กร W3C แนะนําให้ผู้สร้างเว็บใช้เป็นมาตรฐานเพราะมีรูปแบบการเขียนโค้ดที1กระชบัมากกว่า HTML และ XML

กฤตวยาน์ ทองคู่

Markup Language - HTML

� markup เป็นภาษาที1ใช้กําหนดคุณสมบัติในแต่ละช่วงของเอกสาร โดยใช้เครื1องหมายที1เรียกว่า tag ในการกําหนดคณุสมบตัิของช่วงข้อความนั pนๆ เช่น� My Header

� เรียกว่า tag h1 เปิด และ เรียกว่า tag h1 ปิด� ข้อความที1อยู่ในช่วงระหว่าง และ จะถกูตีความหมายว่าเป็น Header ระดบัที1 1

� ซึ1งมีคณุสมบตัิเฉพาะตวัอยู ่เช่น� เป็นตวัหนงัสือขนาดใหญ่� เป็นตวัหนา� มีการเว้นช่องว่างระหว่างบรรทดัที1กว้างกว่าปกติ

Markup Language – HTML (cont.)

� มาตรฐานเริ1มแรกของ markup ไม่ได้กําหนดไว้ว่าทกุการเปิด tag ต้องมีการปิด tag ดงันั pนจึงสามารถเขียน tag เดี1ยวได้ทั pงหมด เช่น

� My Header Level 1My Header Level 2

� ข้อความ “My Head Level 1” จะถกูตีความเป็น Header ระดับ 1 และ “My Header Level 2” จะถกูตีความเป็น Header ระดบั 2

� ซึ1งลกัษณะการเขียน tag ที1ไม่มีการปิด tag นี pทําให้เกิดปัญหาในการตีความใน tag ที1มีความซบัซ้อน เช่น

� List Item 1List Item 2

� สังเกตว่าเป็นการยากที1จะตีความว่า tag จะครอบคลุมทั pงข้อความ “Item 1” หรือไม?่

� ซึ1งมาตรฐาน HTML ในยคุนั pนไม่ได้กําหนดว่าจะให้ตีความอยา่งไรถ้าไม่มี tag ปิด เป็นหน้าที1ของ web browser ที1ต้องจดัการเอง

10/24/2013

5

Markup Language – HTML (cont.)� ภายหลงัมีภาษา markup ใหม่เกิดขึ pนคือ XML (eXtensible Markup Language) ซึ1งมีข้อกําหนดหนึ1งอยูว่่าทกุ tag เปิดต้องมี tag ปิด

� เพื1อแก้ปัญหาการตีความ tag ของ HTML W3C จึงสร้างมาตรฐานใหม่ขึ pนคือ XHTML ซึ1งระบวุ่า ทกุ tag ของ HTML ต้องมี tag ปิด ตามแบบของ XML� แต่จากมาตรฐานนี pทําให้เกิดปัญหากับโปรแกรมเมอร์ที1คุ้นเคยกับการเขียน tag เดี1ยวในช่วงนั pนจึงได้แตกมาตรฐานออกเป็นหลายสาย เช่น�HTML strict (ตดั tag ในการจดัรูปแบบออกไป)�HTML transitional (คง tag ในการจดัรูปแบบบางตวัไว้)� XHTML strict (ใช้ข้อกําหนดตาม XML / ตดั tag ในการจดัรูปแบบออกไป)� XHTML transitional (ใช้ข้อกําหนดตาม XML ในบาง tag ที1จําเป็น / คง tag ในการจดัรูปแบบบางตวัไว้)

Markup Language – HTML (cont.)� จากความหลากหลายของรุ่น (version) และการแตกมาตรฐานของ HTML ซึ1งแต่ละมาตรฐานมีข้อกําหนดแต่ละ tag แตกต่างกนั

� ทําให้ในบางกรณีการเขียน tag HTML ที1เหมือนกันแต่ใช้คนละมาตรฐานตีความ จะทําให้ได้การแสดงผลที1ไม่เหมือนกนั

� ตามมาตรฐานของ SGML ได้ระบวุิธีกําหนดรุ่นของมาตรฐานเอกสารไว้ที1ด้านบนสุดของเอกสารเรียกว่า doctype ดังนั pน HTML จึงใช้วิธีการนี pในการบอกมาตรฐานที1ใช้ในการเขียนเอกสาร

องค์ประกอบของ Web Standard

� 2. Presentation◦ รูปแบบเว็บเพจที1นกัพฒันาเว็บกําหนดขึ pนเพื1อใช้เป็นส่วนติดต่อกบัผู้ ใช้ (User Interface) เช่น ชนดิของตวัอกัษร สีที1ใช้ การเน้นข้อความสําคญัต่างๆ เป็นต้น

◦ CSS (Cascading Style Sheets) - เทคโนโลยีที1พฒันาขึ pนมาเพื1อใช้จดัรูปแบบการแสดงผลให้มีประสิทธิภาพ โดยการทํางานของ CSS นั pน จะแยกส่วนของข้อมลูออกจากส่วนรูปแบบการแสดงผล เมื1อเราต้องการเปลี1ยนรูปแบบการแสดงผล เช่น สีตวัอกัษรที1เป็นข้อความสําคญั ทําได้โดยเปลี1ยนคําสั1งแทก็ที1กําหนดไว้ตอนแรก เพียงจดุเดียวก็จะมีผลกบัเว็บเพจทั pงหมดที1ใช้ CSS นั pน

กฤตวยาน์ ทองคู่

การจดัรูปแบบโดย CSSหรือ XSL� Web Standard ตาม W3C ได้แยกการจัดรูปแบบออกมาเพื1อให้ตัวเอกสารเหลือแต่เพียงข้อมลู การจดัรูปแบบจะให้เป็นหน้าที1ของ stylesheet

� CSS (Cascading Style Sheets) เป็น stylesheet ที1นิยมใช้ในเอกสาร HTML มากที1สดุ (จะได้ศึกษาต่อไปในบท CSS)

� XSL เป็น stylesheet แบบหนึ1งนยิมใช้ใน XML

10/24/2013

6

องค์ประกอบของ Web Standard� 3. Behavior◦ การเขียนสคริปต์ (Script) เพื1อควบคมุให้เว็บเพจทํางานตามคําสั1งที1ต้องการได้มากขึ pน และสามารถใช้งานในลกัษณะโต้ตอบ (Interactive) กบัผู้ ใช้ได้

◦ ECMAScript - มาตรฐานภาษาสคริปต์ที1ใช้งานกนัอยูใ่นปัจจบุนั เช่น JavaScript, ASP และ PHP เป็นต้น เพื1อให้รูปแบบการเขียนสคริปต์และการเรียกใช้ Method ต่างๆ เป็นมาตรฐานกลาง

◦ DOM (Document Object Model) - Platform และภาษาสื1อกลางระหว่างโปรแกรมกบัสคริปต์ต่างๆ สามารถเข้าถึงและปรับปรุง Content โครงสร้างและสไตล์ของเอกสารได้ DOM จะมององค์ประกอบของเว็บเพจทั pงหมดเป็นอ็อบเจ็กต์ที1มีการทํางานตามหลกั Object Oriented

กฤตวยาน์ ทองคู่

ECMAScript - JavaScript� เป็นส่วนที1ใช้จัดการปฏิสัมพันธ์ (behavior) ระหว่างผู้ ใช้กับตัวเอกสาร HTML มาตรฐานของ W3C กําหนดให้ใช้รูปแบบของ ECMAScript

� ECMAScript ถกูกําหนดมาตรฐานโดย Ecma International

� ECMAScript เป็นเพียงมาตรฐานกําหนดโครงสร้างของภาษาเท่านั pน ไม่ได้กําหนด keyword ในการนําไปใช้งานจริง (implement) โดยโครงสร้างนั pนอ้างอิงมาจากภาษา C

� ECMAScript ที1นยิมใช้ใน HTML คือ JavaScript

� Javascript ใช้โครงสร้างภาษาตามมาตรฐาน ECMAScript โดยใช้ keyword จากภาษา Java

� ปฏิสมัพนัธ์ระหว่างผู้ ใช้กบัตวัเอกสาร เช่น

� เมื1อผู้ ใช้นําเมาส์มาว่าบนส่วนของเอกสารที1กําหนด ให้เปลี1ยนสีพื pนหลังของส่วนเอกสารนั pน

� เมื1อผู้ ใช้กดบนส่วนของเอกสาร ให้ทําการยอ่ส่วนของเอกสารนั pนลง

DOM - Document Object Models� DOM เป็นข้อกําหนดในการอ้างอิง tag ของเอกสาร HTML โดยมกัจะใช้เพื1อดึงข้อมูลที1บรรจอุยูใ่น tag ที1ต้องการออกมา� มาตรฐาน DOM ถกูกําหนดโดย W3C� ตวัอยา่งของการใช้ DOM

� getElementById('customer_name') ใช้สําหรับดึง tag ที1 มี id ว่าcustomer_name ออกมา

� มักใช้ DOM ควบคู่กับ JavaScript โดย DOM เป็นฟังก์ชั1นสําหรับการดึงข้อมูล ส่วน JavaScript ใช้ประมวลผลข้อมลูที1ได้

� สังเกตว่าการใช้งาน DOM จะมีประสิทธิภาพสูงสุดเมื1อเอกสารอยู่ในรูปแบบ semantic HTML ดงัจะแสดงในตวัอยา่งต่อไป

DOM - Document Object Models (cont.)� สงัเกตจาก code HTML ต่อไปนี p

� Messi� Messi

� หากต้องการได้ข้อมลู customer_name ผู้พัฒนากําหนดให้ DOM ดึงข้อมูลจาก tag ที1มี id ว่า customer_name� ตวัอยา่ง code html ด้านบน จะได้ Messi มา� ตัวอย่าง code html ด้านล่างจะได้ Messi ซึ1งไม่ใช่ข้อมลูที1ต้องการ

� ข้อกําหนด DOM สามารถศึกษาได้จาก� http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html

10/24/2013

7

ข้อดีจากการสร้างเว็บตาม Web Standard� ช่วยลดจํานวนโค้ดและขนาดไฟล์

� สามารถทํางานบนระบบปฏิบตัิการและเว็บบราวเซอร์ได้ทกุรุ่น

� ลดต้นทนุและเวลาในการสร้างเว็บไซต์

� รองรับการแสดงผลข้อมลูบนเครือข่ายไร้สาย

� ปรับเปลี1ยนและโอนถ่ายงานได้สะดวกขึ pน

� ครอบคลมุการแสดงผลบนอปุกรณ์และซอฟต์แวร์ต่างๆ

กฤตวยาน์ ทองคู่

Web Design

Introduction to Web Design � ปัจจบุนันี pมีเว็บไซต์เกิดขึ pนมากมาย ทั pงที1มีคณุภาพและไม่มีคณุภาพ ตามความรู้ความสามารถของผู้ออกแบบ

� การที1จะสร้างเว็บไซต์ขึ pนมาสกัแหง่หนึ1งนั pนจะต้องมีเป้าหมายที1แน่นอนไม่ใช่เพราะคนอื1นมีกนัเลยอยากมีเว็บกบัเค้าบ้าง หรือจําเป็นต้องสร้างเว็บไซต์ตามคําสั1งผู้บงัคบับญัชาโดยไม่มีเป้าหมายที1ชดัเจน

� ซึ1งทําให้เว็บไซต์นั pนไม่มีประโยชน์อะไรสําหรับผู้ ใช้และไม่มีใครเข้ามาใช้บริการ

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

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

� การกําหนดเป้าหมายของเว็บไซต์

� ระบกุลุม่ผู้ใช้

� การจดัระบบข้อมลู

� การใช้กราฟิก

� การเลอืกใช้ส ีและการจดัรูปแบบตวัอกัษร

� ชนิดและรุ่นของบราวเซอร์

� การคํานงึถงึความแตกต่างของสื1อกลาง

ในการแสดงผล

� ขนาดของหน้าจอมอมิเตอร์ และความละเอียด

ของสี

10/24/2013

8

ความสําคญัของการออกแบบเว็บไซต์ การใช้กราฟิก � การออกแบบของแต่ละเว็บไซต์นั pนแตกต่างกนัไป ตามเป้าหมายและลกัษณะของเว็บไซต์นั pน เว็บไซต์บางแหง่อาจต้องการความสนกุสนาน บนัเทงิ ขณะที1เว็บอื1นกลบัต้องการความถกูต้อง นา่เชื1อถือเป็นหลกั

แนวทางในการการออกแบบเพื1อความสาํเร็จของเว็บไซต์

� พื pนฐานในการออกแบบเว็บไซต์ที1ดี ต้องคํานงึความต้องการที1ผู้ ใช้ทกุคนต้องการจากเว็บไซต์

- มีเนื pอหาที1เป็นประโยชน์ ตรงกบัที1ผู้ ใช้ต้องการ

- มีการปรับปรุงเนื pอหา และพฒันาเว็บไซต์อยูเ่สมอ

- ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว

- การใช้งานที1สะดวก เข้าใจง่าย

� ค้นหาเป้าหมายในการสร้างเว็บไซต์

- สร้างเว็บทําไม และเพื1ออะไร

- สร้างเว็บไซต์ให้ใคร และใครคือกลุ่มเป้าหมาย

- หาจดุเด่นและจดุด้อยของเว็บไซต์อื1นๆ ที1มีเนื pอหาใกล้เคียง

- กําหนดจดุเด่นและจดุด้อยของเว็บตวัเอง

หลกัการออกแบบในเว็บไซต์� แบบเรียงลําดบั (Sequence) เว็บไซต์ที1มีจํานวนเว็บเพจไม่มากนกั หรือที1มีการนําเสนอข้อมลูแบบทีละขั pนตอน

� แบบระดบัชั pน (Hierarchy) เว็บไซต์ที1มีจํานวนเว็บเพจมากขึ pน พบได้ทั1วไป

� แบบผสม (Combination) เว็บไซต์ที1ซบัซ้อนเป็นการนําข้อดีของ 2 รูปแบบมาผสมกนั

10/24/2013

9

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

ออกแบบโครงสรา้งของเวบ็ไซต์

หาขอ้มลูที�ใชป้ระกอบในการทาํเวบ็ไซต์

ตั pงชื1อ Domain Name

ออกแบบและตกแต่งเวบ็เพจแต่ละหนา้

สรา้งเวบ็ไซตต์ามที�ไดอ้อกแบบมา

อพัโหลดขึ(นอนิเทอรเ์น็ต

โปรโมทเวบ็ไซตใ์หเ้ป็นที�รูจ้กั

การออกแบบเว็บไซต์ให้ดดูี� 1. สีสนั (Color) จะทําให้ผู้ชมเว็บรับรู้อารมณ์ของเว็บ และเรื1องราวที1นําเสนอได้ ควรเลือกสีให้เหมาะสมกบัเนื pอหา แต่ละสีให้ความรู้สึกที1แตกต่างกนั เช่น

� สีฟ้า สีเหลือง ให้ความรู้สึกสดใส และอบอุ่น

� สีแดงให้ความรู้สึกสนกุสนาน ร้อนแรง

� สีนํ pาเงิน มั1นคง เข้มแข็ง

� 2. มีความเป็นเอกลกัษณ์ จะทําให้ผู้ชมเว็บไซต์จดจําเว็บได้ง่ายขึ pน โดยอาจใช้โทนสี รูปประกอบ Theme ที1คล้ายๆ กนัทกุหน้า

การออกแบบเว็บไซต์ให้ดดูี� 3. ผู้ชมเว็บไซต์ต้องสามารถเข้าถึงเนื pอหาที1เราตั pงใจนําเสนอ หรือสามารถใช้งานเว็บ ค้นหาข้อมลูที1ต้องการได้อยา่งสะดวกและรวดเร็วตรงตามความต้องการ

� 4. แสดงผลได้อยา่งรวดเร็วระยะเวลาในการแสดงผลต้องไม่นานจนเกินไป ไม่ทําให้ผู้ เข้าชมเว็บรอเลือกใช้ภาพกราฟิกและภาพ Animation ได้อยา่งเหมาะสม

การออกแบบโครงร่างเว็บเพจ� การกําหนดโครงร่างของหน้าเว็บเพจ ขั pนตอนนี pจะเป็นขั pนตอนแรกของการเริ1มออกแบบเว็บเพจ เนื1องจากว่า ทกุเว็บเพจที1ดีต้องมีโครงร่างหรือโครงสร้าง เปรียบเสมือนบ้านหรืออาคารที1ดีต้องมีโครงสร้างที1ดีและมั1นคง เว็บเพจก็เช่นกนั เว็บเพจที1ดีก็ต้องมีการกําหนดโครงสร้างลงไปให้แนน่อนเช่นเดียวกนั

� เริ1มโดยการกําหนดโครงสร้างของเว็บเพจออกเป็น 4 ส่วน คือ� Header คือ สว่นที1อาจจะเป็น Title หรือ Logo ของเว็บไซต์ ก็ได้� Menu คือ สว่นที1จะเป็นจุด Link เพื1อเชื1อมไปหาเพจในเนื pอหาอื1น ๆ ที1แบง่ออกไว้เป็น Category (หมวดหมู)่

� Content คือ สว่นที1สําคญัที1สดุ เป็นสว่นที1จะทําการนําเสนอข้อมลู หรืออื1น ๆ ให้แก่ผู้ เยี1ยมชมเว็บไซต์

� Footer คือ สว่นสรุปจบท้ายของเว็บเพจ ในสว่นนี pอาจจะเป็น E-mail ของ website หรือ การอ้างอิงสิทธิ หรืออื1นๆ

Header

ContentMenu

Footer

10/24/2013

10

องค์ประกอบของการออกแบบเว็บไซต์อยา่งมีประสทิธิภาพ

� ความเรียบง่าย (Simplicity)

� เว็บจะมีรูปแบบที1เรียบงา่ย ไมซ่บัซ้อน และใช้งานได้อยา่งสะดวก แม้ว่าจะมีข้อมลูอยูใ่นเว็บไซต์อยูม่ากมาย

� ไมม่ีกราฟิกหรือตวัอกัษรที1เคลื1อนไหวอยูต่ลอดเวลา ซึ1งจะรบกวนสายตาและสร้างความรําคาญตอ่ผู้ใช้

� ใช้ชนิดและสีของตวัอกัษรไมม่ากจนเกินไปให้วุ่นวาย

� ในสว่นเนื pอหา ใช้ตวัอกัษรสีดําบนพื pนหลงัสีขาวตามปกติ � ไมม่ีการเปลี1ยนแปลงของลิงค์ให้สบัสนแตอ่ยา่งใด

องค์ประกอบของการออกแบบเว็บไซต์อยา่งมีประสทิธิภาพ

� ความสมํ�าเสมอ (Consistency)

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

� รูปแบบของหน้า , สไตล์ของกราฟิก , ระบบเนวิเกชั1น และโทนสีที1ใช้ควรจะมีความคล้ายคลงึกนัตลอดเว็บไซต์

� ความเป็นเอกลักษณ์ (Identity)

� การออกแบบต้องคํานึงถึงลกัษณะขององค์กร เนื1องจากรูปแบบของเว็บไซต์สามารถสะท้อนถึงเอกลกัษณ์และลกัษณะขององค์กรนั pนได้

� เว็บไซต์ของธนาคารจึงไมค่วรจะดเูหมือนสวนสนุก � การใช้ชุดสี, ชนิดตวัอกัษร, รูปภาพและกราฟิกจะมีผลตอ่รูปแบบของเว็บไซต์อยา่งมาก จึงต้องเลือกใช้องค์ประกอบเหลา่นี pอยา่งเหมาะสม

องค์ประกอบของการออกแบบเว็บไซต์อยา่งมีประสทิธิภาพ

� เนื Vอหาที�มีประโยชน์ (Useful Content)

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

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

� ระบบเนวเิกชั�นที�ใช้งานง่าย (User – Friendly Navigation)

� ระบบเนวิเกชั1นควรถกูออกแบบให้ผู้ใช้เข้าใจได้งา่ยและใช้งานสะดวก

� ใช้กราฟิกที1สื1อความหมายร่วมกบัคําอธิบายที1ชดัเจน � มีรูปแบบและลําดบัของรายการที1สมํ1าเสมอ เช่นวางไว้ในตําแหน่งเดียวกนัของทุกๆ หน้า

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

องค์ประกอบของการออกแบบเว็บไซต์อยา่งมีประสทิธิภาพ

� มีลักษณะที�น่าสนใจ (Visual Appeal)

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

� การใช้งานอย่างไม่จํากัด (Compatibility)

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

� สามารถแสดงผลได้ในทุกระบบปฏิบตัิการและที1ความละเอียดหน้าจอตา่งๆ กนัอยา่งไมม่ีปัญหา สิ1งเหลา่นี pจะยิ1งมีความสําคญัมากขึ pน สําหรับเว็บที1มีผู้ใช้บริการจํานวนมาก หรือมีกลุม่เป้าหมายที1หลากหลาย

10/24/2013

11

องค์ประกอบของการออกแบบเว็บไซต์อยา่งมีประสทิธิภาพ

� คุณภาพในการออกแบบ (Design Stability)

� ถ้าอยากให้ผู้ใช้รู้สกึว่าเว็บมีคณุภาพถกูต้อง และเชื1อถือได้ ควรให้ความสําคญักบัการออกแบบเว็บไซต์อยา่งมาก

� เช่นเดียวกบัสื1อประเภทอื1นที1ต้องออกแบบและเรียบเรียงเนื pอหาอยา่งรอบคอบ เว็บที1ทําขึ pนอยา่งลวกๆ ไมม่ีมาตรฐานการออกแบบและการจดัระบบข้อมลูนั pน เมื1อมีข้อมลูเพิ1มขึ pนเรื1อยๆ ก็จะเกิดปัญหาและไมส่ามารถสร้างความน่าเชื1อถือจากผู้ใช้ได้

� ระบบการใช้งานที�ถูกต้อง (Functional Stability)

� ระบบการทํางานตา่งๆ ในเว็บไซต์จะต้องมีความแน่นอนและทําหน้าที1ได้อยา่งถกูต้องเสมอ

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

การใช้งาน Firework� กําหนดขนาดความกว้าง ความสงูของพื pนที1ทํางาน� กําหนดความละเอียดในการแสดงผลของภาพ (Resolution)

� เลือกสีพื pนที1ทํางาน� White = ขาว

� Transparent = โปร่ง

� Custom = กําหนดเอง

1. ปรับความกว้าง ความสงู ความละเอยีด

2. เลอืกสพีื pนที1ทาํงาน3. กด OK

พื pนที1การทํางานของ Fireworks และเมนตูา่ง ๆ

กลอ่งเครื1องมือ

เมนบูาร์

คณุสมบตัิ

พาเลต็บาร์

พื pนที1ทาํงาน

เมนบาร์

การทําตวัอกัษรเป็นคลื1น