- introduction to web design - web development processes

INTERNET FOR INTERNET FOR EDUCATIONEDUCATION

IT IT ในฐานะช่�วยทางด้ านการเร�ยนการในฐานะช่�วยทางด้ านการเร�ยนการสอนสอน

การออกแบบ การออกแบบ WEB DESIGN WEB DESIGN เพื่��อพื่�ฒนาเพื่��อพื่�ฒนาบทเร�ยนบน บทเร�ยนบน WEBWEB

- Introduction - Introduction to Web Designto Web Design

- Web - Web Development Development

ProcessesProcesses

1อ.วรพจน์� พรหมจ�กร

การออกแบบให้ ตรงก�บการออกแบบให้ ตรงก�บเป้�าห้มายและล�กษณะเป้�าห้มายและล�กษณะ

ของเว%บไซท(ของเว%บไซท(

2

ว�ตถุ*ป้ระสงค์(ว�ตถุ*ป้ระสงค์( • เพ��อให�น์�สิ�ตม�ความร� �พ��น์ฐาน์ใน์การออกแบบ

เว�บไซต� • เพ��อให�น์�สิ�ตม�ความร� �เก��ยวก�บองค�ประกอบของการ

ออกแบบเว�บไซต� • น์�สิ�ตสิามารถอธิ�บายข��น์ตอน์ใน์การพ�ฒน์าเว�บไซต�

ได้� • เพ��อให�น์�สิ�ตสิามารถออกแบบและพ�ฒน์าระบบงาน์

เก��ยวก�บเว�บเพจได้�

3

ค์วามส,าค์�ญของการออกแบบเว%บไซต(ค์วามส,าค์�ญของการออกแบบเว%บไซต( • เว�บไซต�เก�ด้ข*�น์มากมายผู้��ใช้�จ*งม�ทางเล�อกมากข*�น์ท��จะเข�าไปย�งเว�บไซต�ต.าง ๆ ท��ให�บร�การและจะไม.ทน์อย�.ก�บเว�บท��สิ�บสิน์

• จากเว�บท��ม�ความสิวยงามและเว�บท��ม�ข�อม�ลอย�.อย.างมากมายด้�สิ�บสิน์ว0 .น์วายและเสิ�ยเวลาน์าน์ใน์การเข�าด้�ค0ณต�องการท��จะม�เว�บของค0ณใน์ล�กษณะใด้

• การออกแบบเว�บไซท�ม�สิ.วน์สิ3าค�ญใน์การสิร�างความประท�บใจให�ก�บผู้��ใช้�บร�การ และท3าให�อยากกล�บเข�ามาใช้�อ�กใน์อน์าคต หร�อด้*งด้�ด้ผู้��ใช้�ให�อย�.ก�บเว�บได้�ตลอด้

• การออกแบบเว�บไซท�น์��น์ไม.ได้�หมายถ*งล�กษณะหน์�าตาของเว�บไซท�เพ�ยงอย.างเด้�ยว

4

- การก,าห้นด้เป้�าห้มายของเว%บไซต( - ระบ*กล*�มผู้/ ใช่ - การจั�ด้ระบบข อม/ล - การสร างระบบว1เกช่��น- การออกแบบห้น าเว%บ - การใช่ กราฟิ3ก - การเล�อกใช่ ส� และการจั�ด้ร/ป้แบบต�วอ�กษร - ช่น1ด้และร*�นของบราวเซอร(- การค์,าน4งถุ4งค์วามแตกต�างของส��อกลางในการแสด้งผู้ลเว%บไซท(ด้ วย - ขนาด้ของห้น าจัอมอม1เตอร( และค์วามละเอ�ยด้ของส�ในระบบ Plug – in ช่น1ด้ต�างๆ

5

7

• ค์วามเร�ยบง�าย (Simplicity)• ม�ร�ปแบบท��เร�ยบง.าย ไม.ซ�บซ�อน์และใช้�งาน์ได้�อย.างสิะด้วก• สิ��อสิารเน์��อหาถ*งผู้��ใช้�โด้ยม�เฉพาะองค�ประกอบเสิร�มท��จ3าเป7น์เท.าน์��น์

• ค์วามสม,�าเสมอ (Consistency)• สิร�างความสิม3�าเสิมอให�ก�บเว�บไซต�โด้ยใช้�ร�ปแบบเด้�ยวก�น์ตลอด้ท��งเว�บไซต� ท��งใน์สิ.วน์ของร�ปแบบหน์�า สิไตล�ของกราฟิ9ก ระบบเน์ว�เกช้�น์ และโทน์สิ�

• ถ�าล�กษณะของแต.ละหน์�าใน์เว�บไซต�เด้�ยวก�น์ แตกต.างก�น์ อาจท3าให�ผู้��ใช้�เก�ด้ความสิ�บสิน์ได้�

องค์(ป้ระกอบของการออกแบบเว%บไซต(อย�างองค์(ป้ระกอบของการออกแบบเว%บไซต(อย�างม�ป้ระส1ทธิ1ภาพื่ม�ป้ระส1ทธิ1ภาพื่

8

• ค์วามเป้8นเอกล�กษณ( (Identity)• การออกแบบต�องค3าน์*งถ*งล�กษณะขององค�กร• ร�ปแบบของเว�บไซต�สิามารถสิะท�อน์ถ*งเอกล�กษณ�ขององค�กร

• เน�9อห้าท��ม�ป้ระโยช่น( (Useful Content)• ควรจ�ด้เตร�ยมเน์��อหาและข�อม�ลท��ผู้��ใช้�ต�องการให�ถ�กต�องและสิมบ�รณ�

• ควรม�การปร�บปร0งและเพ��มเต�มให�ท�น์ต.อเหต0การณ�อย�.เสิมอ


9

• ระบบเนว1เกช่�นท��ใช่ งานง�าย (User-Friendly Navigation)• ระบบเน์ว�เกช้�น์จะต�องออกแบบให�ผู้��ใช้�เข�าใจง.ายและใช้�งาน์สิะด้วก โด้ยใช้�กราฟิ9กท��สิ��อความหมายร.วมก�บค3าอธิ�บายอย.างช้�ด้เจน์

• ม�ร�ปแบบและล3าด้�บของรายการอย.างสิม3�าเสิมอ• ม�ล�กษณะท��น�าสนใจั (Visual Appeal)

• ความน์.าใน์ใจของเว�บไซต�จะม�ความสิ�มพ�น์ธิ�ก�บค0ณภาพขององค�ประกอบต.าง ๆ เช้.น์ ค0ณภาพของกราฟิ9ก การใช้�ช้น์�ด้ต�วอ�กษร การใช้�โทน์สิ� เป7น์ต�น์


10

• การใช่ งานอย�างไม�จั,าก�ด้ (Compatibility)• ควรออกแบบเว�บไซต�ให�ครอบคล0มก�บผู้��ใช้�สิ.วน์ใหญ.มากท��สิ0ด้

• ไม.ควรม�การต�ด้ต��งโปรแกรมเพ��มเต�ม หร�อเล�อกใช้�บราวเซอร�ช้น์�ด้ใด้ช้น์�ด้หน์*�ง

• สิามารถแสิด้งผู้ลได้�ท0กระบบปฏิ�บ�ต�การและท��ความละเอ�ยด้หน์�าจอต.าง ๆ ก�น์ได้�อย.างไม.ม�ป<ญหา

• ค์*ณภาพื่ในการออกแบบ (Design Stability)• ควรให�ความสิ3าค�ญก�บการออกแบบเว�บไซต�• ควรม�มาตรฐาน์การออกแบบและการจ�ด้ระบบข�อม�ล


11

• ระบบการใช่ งานท��ถุ/กต อง (Functional Stability)• ระบบการท3างาน์ต.าง ๆ ใน์เว�บไซต�จะต�องม�ความแน์.น์อน์และท3าหน์�าท��ได้�อย.างถ�กต�อง เช้.น์ การกรอกข�อม�ล การเช้��อมโยง เป7น์ต�น์

• ควรม�การตรวจสิอบการท3างาน์อย�.เสิมอ


ต�วอย�างของการออกแบบเว%บไซต(ต�วอย�างของการออกแบบเว%บไซต(ท��ด้�ท��ด้�

12

www.apple.com จั*ด้เด้�นในเร��อง-ร/ป้แบบท��เป้8นเอกล�กษณ(-ระบบเนว1เกช่�นท��เข าใจัง�าย-การใช่ งานสะด้วก-กราฟิ3กท��สวยงาม น�าสนใจั

13

• Webmaster• เป7น์ผู้��ควบค0มใน์เร��องการออกแบบ เน์��อหา และรายละเอ�ยด้ทางเทคน์�ค

• Information Architect• ท3าหน์�าท��จ�ด้ระเบ�ยบข�อม�ลและทด้สิอบประสิ�ทธิ�ภาพใน์การใช้�งาน์

• Designer• เป7น์ผู้��ออกแบบล�กษณะหน์�าตาของเว�บไซต� และองค�ประกอบต.าง ๆ

• HTML and JavaScript Coder• ร�บผู้�ด้ช้อบการสิร�างเว�บเพจโด้ยอาศั�ยเคร��องม�อต.าง ๆ• ปร�บปร0ง เปล��ยน์แปลงข�อม�ล รวมถ*งการอ�พโหลด้ไฟิล�

ท�มงานในการพื่�ฒนาเว%บไซต(ท�มงานในการพื่�ฒนาเว%บไซต(

14

• Developer/Programmer• เป7น์ผู้��เข�ยน์สิคร�ปต�และโปรแกรมต.าง ๆ • อาจต�องเก��ยวข�องก�บระบบฐาน์ข�อม�ล

• System Administrator• ท3าหน์�าท��ควบค0ม ด้�แลเว�บเซ�ร�ฟิเวอร� รวมถ*งฮาร�ด้แวร�และซอฟิต�แวร�อ��น์ท��เก��ยวข�อง

• สิามารถว�เคราะห�และปร�บต��งระบบเพ��อการท3างาน์ท��ม�ประสิ�ทธิ�ภาพ

• Content Editor/Writer• เป7น์บรรณาธิ�การ โด้ยร�บผู้�ด้ช้อบใน์การจ�ด้เตร�ยมเน์��อหา ตรวจสิอบความถ�กต�อง

ท�มงานในการพื่�ฒนาเว%บไซต(ท�มงานในการพื่�ฒนาเว%บไซต(

โป้รแกรมช่�วยในการสร างเว%บโป้รแกรมช่�วยในการสร างเว%บต�วอย.างโปรแกรมช้.วยสิร�างเว�บ เช้.น์ Dreamweaver

,FrontPage ,GoLive ,Homesite ,HotDog Pro ,HotMetalPro

, NetObjects Fusion ซ*�งโปรแกรมเหล.าน์��ม�ประโยช้น์�อย.างมากท��จะช้.วย

ใน์การพ�ฒน์าเว�บไซท�ได้�อย.างสิะด้วก และรวด้เร�ว โด้ยไม.จ3าเป7น์ต�องร� �

ภาษา HTML

15

เร1�มต นออกแบบเร1�มต นออกแบบเว%บไซต(เว%บไซต(

16

เร1�มต นสร างเว%บไซต(เร1�มต นสร างเว%บไซต(การสิร�างเว�บท��ด้� ต�องอาศั�ยการออกแบบและจ�ด้ระบบข�อม�ลอย.าง

เหมาะสิม และพ�ฒน์าตามข��น์ตอน์ ซ*�งใน์กระบวน์การพ�ฒน์าเว�บไซต�น์��น์จะอาศั�ยหล�กการจ�ด้ระบบโครงสิร�างข�อม�ลท��เร�ยกว.า Information

Architecture โด้ยจะอย�.ใน์หลายๆสิ.วน์ ต��งแต.ข��น์ตอน์แรกจน์ถ*งข��น์ท��

ได้�เป7น์ร�ปแบบโครงสิร�างสิ0ด้ท�าย ( Final Architecture Plan )ซ*�งถ�อ

เป7น์กระบวน์การท��สิ3าค�ญมากท��จะท3าให�เว�บไซท�บรรล0ตามเป?าหมายท��ต��งไว�

17

การจั�ด้ระบบโค์รงสร างข อม/ลการจั�ด้ระบบโค์รงสร างข อม/ล (Information Architecture)(Information Architecture)การจ�ด้ระบบโครงสิร�างข�อม�ล ค�อ การพ�จารณาว.าเว�บไซท�ควรจะ

ม�ข�อม�ลและการท3างาน์ใด้บ�าง ด้�วยการสิร�างเป7น์แผู้น์ผู้�งโครงสิร�างก.อน์ท��จะเร��มลงม�อพ�ฒน์าเว�บเพจ โด้ยเร��มจากการก3าหน์ด้เป?าหมายของเว�บไซท� และกล0.มผู้��ใช้�เป?าหมาย ต.อมาก�พ�จารณาถ*ง เน์��อหา และการใช้�งาน์ท��จ3าเป7น์ แล�วน์3ามาจ�ด้กล0.มให�เป7น์ระบบ จากน์��น์ก�ถ*งเวลาใน์การออกแบบโครงสิร�างข�อม�ลใน์หน์�าเว�บให�พร�อมท��จะน์3าไปออกแบบกราฟิ9ก และหน์�าตาให�สิมบ�รณ�ต.อไป ซ*�งแผู้น์ผู้�งโครงสิร�างม�

ล�กษณะด้�งภาพต.อไปน์��

18

19

เว%บไซท(

เป้�าห้มาย

เน�9อห้า

เง1นท*น

บ*ค์ลากร

ระยะเวลา

กล*�มผู้/ ใช่

การจ�ด้ระบบโครงสิร�างข�อม�ลเป7น์พ��น์ฐาน์สิ3าค�ญใน์การออกแบบ

เว�บไซท�ท��ด้� ท��จะช้.วยพ�ฒน์าแบบแผู้น์รายละเอ�ยด้ข�อม�ลใน์การ

ออกแบบเว�บไซท� ซ*�งได้�แก. ร�ปแบบการน์3าเสิน์อ, ระบบการท3างาน์,

แบบจ3าลอง, ระบบเน์ว�เกช้�น์ และอ�น์เตอร�เฟิสิของเว�บ ด้�งน์��น์การ

จ�ด้ระบบโครงสิร�างข�อม�ลจ*งเป7น์สิ��งสิ3าค�ญท��เก��ยวข�องอย�.ใน์

กระบวน์การออกแบบเว�บไซท�

20

การออกแบบเพื่��อค์วามส,าเร%จัของเว%บการออกแบบเพื่��อค์วามส,าเร%จัของเว%บพื่�9นฐานในการออกแบบเว%บไซท(ท��ด้�ม�ด้�งน�91. ม�เน์��อหาเป7น์ประโยช้น์� ตรงก�บท��ผู้��ใช้�ต�องการ

2. ม�การปร�บปร0งเพ��มเต�มเน์��อหา และพ�ฒน์าเว�บไซท�อย�.เสิมอ

3. ใช้�เวลาใน์การด้าวน์�โหลด้น์�อย แสิด้งผู้ลเร�ว4. การใช้�งาน์ท��สิะด้วก เข�าใจง.าย

21

ค์ นห้าเป้�าห้มายในการสร างเว%บไซต(ค์ นห้าเป้�าห้มายในการสร างเว%บไซต(•สิร�างเว�บท3าไม และเพ��ออะไร•สิร�างเว�บไซต�ให�ใคร และใครค�อกล0.มเป?าหมาย•หาจ0ด้เด้.น์และจ0ด้ด้�อยของเว�บไซต�อ��น์ๆ ท��ม�เน์��อหาใกล�เค�ยง

•ก3าหน์ด้จ0ด้เด้.น์และจ0ด้ด้�อยของเว�บต�วเอง

22

• พยายามก3าหน์ด้การเช้��อมโยงของหน์�าเว�บเพจต.างๆ ให�สิามารถคล�กกล�บไปมาจากหน์�าต.างๆ ได้�สิะด้วก เพ��อให�ผู้��ช้มสิามารถคล�กเข�าไปเย��ยมช้มเน์��อหาท��สิน์ใจได้�สิะด้วก

การออกแบบโค์รงสร างเว%บไซต(การออกแบบโค์รงสร างเว%บไซต(

โด้ยท��วๆ ไปเว�บไซต�สิ.วน์ใหญ.จะม�โครงสิร�างท��ยอมร�บว.าเป7น์มาตรฐาน์อย�. 3 แบบ ค�อ

ห้น าตาของเว%บไซต(ห้น าตาของเว%บไซต(

แบบท�� 1 จะประกอบด้�วยพ��น์ท��สิ.วน์ห�วของหน์�าด้�าน์บน์ (สิ�ฟิ?า ) เมน์�ทางซ�ายม�อ (สิ�เข�ยว ) และสิ.วน์แสิด้งเน์��อหา (สิ�เหล�อง ) ใน์ด้�าน์ขวาม�อแบบท�� 2 จะคล�ายก�บแบบท�� 1 แต.จะเพ��มผู้�งรายละเอ�ยด้ด้�าน์ขวาม�อข*�น์มา โด้ยม�สิ.วน์เน์��อหาอย�.ตรงกลางหน์�า (เว�บสิ3าเร�จร�ปหลายแบบน์�ยมใช้� เหมาะก�บการท3าหน์�าแรกท��ต�องการเสิน์อประเด้�น์สิ3าค�ญท��น์.าสิน์ใจ สิามารถคล�กไปด้�รายละเอ�ยด้ใน์หน์�าถ�ด้ไปได้�)แบบท�� 3 จะต�ด้สิ.วน์เมน์�ซ�ายขวาออก น์3าเอาเมน์�ไปแทรกไว�ท��สิ.วน์ห�วเร��องและใน์สิ.วน์ท�ายหน์�าแทน์ (เหมาะก�บเว�บไซต�เล�กๆ ท��ต�องการแสิด้งความสิวยงามใน์การออกแบบภาพกราฟิฟิ9ก มากกว.าเน์��อหาภายใน์)

โครงสิร�างท��ง 3 แบบจะม�สิ.วน์ประกอบหล�กอย�. 3 สิ.วน์ ค�อ • ส�วนห้�วเร��อง เป7น์สิ.วน์ท��จะบรรจ0ตรา/เคร��องหมาย/สิ�ญล�กษณ�ของเว�บไซต�น์��น์(หน์.วยงาน์หร�อ องค�กร) ซ*�งม�ความน์�ยมวางไว�ท��ต3าแหน์.งม0มซ�ายบน์จะเหมาะสิมท��สิ0ด้ (ใน์วงกลม) (ผู้ลจากการว�จ�ย ต3าแหน์.งท��ได้�ร�บความน์�ยมใน์การวางโลโก�ค�อ ซ�าย 74% กลาง 20% ขวา 6%) ด้�าน์ขวาม�ออาจวางแบน์เน์อร�โฆษณาก�จกรรมต.างๆ ได้�

• ส�วนเมน/ เป7น์สิ.วน์ท��จะน์3าพาผู้��ช้มเข�าไปย�งหมวด้หม�.เน์��อหาท��จ�ด้ไว�ได้�อย.างสิะด้วก รวด้เร�ว ท3าหน์�าท��เหม�อน์ก�บถน์น์หร�อแผู้น์ผู้�งเสิ�น์ทางเด้�น์ หร�อหน์�าสิารบ�ญใน์หน์�งสิ�อ อาจวางไว�ใน์ต3าแหน์.งบน์สิ0ด้ใต�สิ.วน์ห�วเร��อง หร�อแทรกใน์สิ.วน์ห�วเร��องก�ได้� และท3าเมน์�ปล�กย.อยไว�ใน์สิ.วน์ซ�ายของหน์�า หร�อสิ.วน์ล.างของหน์�า

• ส�วนเน�9อห้า เป7น์สิ.วน์ท��จะแสิด้งรายละเอ�ยด้ของเน์��อหาแต.ละเร��องสิ�มพ�น์ธิ�ก�บเมน์� ประกอบไปด้�วยข�อความ ภาพประกอบ ตารางแสิด้งข�อม�ลต.างๆ ซ*�งจะต�องม�การเปล��ยน์แปลงไปตามเหต0การณ�ม�กจะวางไว�ใน์สิ.วน์กลางหน์�า

โค์รงสร างของเว%บไซต(โค์รงสร างของเว%บไซต(

• เพ��อให�งาน์สิ3าเร�จท�มพ�ฒน์าเว�บจะต�องเป7น์น์�กท.องเว�บ เพ��อศั*กษาเว�บไซต�หลายๆ ประเภท ท��งของหน์.วยงาน์ภาคร�ฐบาล องค�กร บร�ษ�ทเอกช้น์ท��ม�ช้��อเสิ�ยง สิถาบ�น์การศั*กษา เว�บให�บร�การค�น์หา เว�บด้�าน์บ�น์เท�ง เพ��อศั*กษาข�อด้� ข�อเสิ�ย ล�กษณะจ0ด้เด้.น์ของแต.ละเว�บไซต� แล�วน์3ามาว�เคราะห�เพ��อใช้�เป7น์แน์วทางใน์การก3าหน์ด้เป?าหมายและพ�ฒน์าเว�บไซต�ของเรา

ควรใช้�ต�วอ�กษรเป7น์ต�วพ�มพ�เล�ก a-z หร�อต�วเลข - 09 หร�อผู้สิมก�น์ ห�ามเว�น์วรรคใน์ช้��อไฟิล�หร�อโฟิลเด้อร� ถ�าต�องการสิ��อความหมายของค3าหร�อข�อความ

ให�ใช้� Underscore ( _ ข�ด้ล.าง ) Dash ( - ข�ด้กลาง ) ค��น์ เช้.น์ tip_tricks.html (ไม.ควรใช้� tip tricks.html) หร�อ how_to_write.html อาจเข�ยน์เป7น์ how2write.html ก�จะสิ��อความหมายได้�

ห�ามใช้�เคร��องหมายอ��น์ใด้ใน์ช้��อไฟิล�หร�อโฟิลเด้อร� ยกเว�น์ Underscore และ Dash ช้��อไฟิล�แรกของเอกสิารบน์เว�บไซต� ม�กจะใช้�ช้��อ index น์ามสิก0ลของเอกสิารบน์เว�บท��เป7น์ภาษา HTML จะม� 2 ร�ปแบบ ค�อ .htm

และ .html (ควรสิอบถามผู้��ด้�แลระบบท��ให�บร�การเคร��องเซ�ร�ฟิเวอร�เก�บเอกสิารเว�บว.าให�บร�การใช้�น์ามสิก0ลใด้ใน์ไฟิล�เร��มต�น์ ) ค.ามาตรฐาน์สิ.วน์ใหญ.ก3าหน์ด้ให�เป7น์ index.html

ไม.ควรใช้�ต�วอ�กษรต�วเล�ก/อ�กษรต�วใหญ.ผู้สิมก�น์ เพราะใน์เคร��องท��ใช้�ระบบ Unix จะถ�อว.าม�ความหมายต.างก�น์ (ใน์ว�น์โด้ว�ม�ความหมายเป7น์ช้��อเด้�ยวก�น์ ) เช้.น์ Index.html ก�บ index.html จะถ�อว.าม� 2 ไฟิล�ท��แตกต.างก�น์ หร�อ bird.JPG, Bird.jpg ก�บ bird.jpg เป7น์ไฟิล�ร�ปภาพ 3 ไฟิล�ท��ต.างก�น์

การต�9งช่��อโฟิลเด้อร(และไฟิล(การต�9งช่��อโฟิลเด้อร(และไฟิล(

การก,าห้นด้โค์รงสร างโฟิลเด้อร(เก%บการก,าห้นด้โค์รงสร างโฟิลเด้อร(เก%บเอกสารบนเว%บเอกสารบนเว%บ

ใน์การสิร�างเว�บไซต�เราจะต�องสิร�างโฟิลเด้อร�สิ3าหร�บเก�บเอกสิารต.างๆ อย.างเป7น์ระบบ เพ��อให�สิามารถค�น์หาและเร�ยกใช้�งาน์ได้�สิะด้วก รวมท��งการเช้��อมโยงไปย�งไฟิล�เหล.าน์��น์ได้�อย.างถ�กต�อง

การก3าหน์ด้ช้��อเอกสิารเว�บเพจแต.ละหน์�าใน์สิ.วน์ของแท�ก <title> ... </title> ของสิ.วน์ Head จะต�องก3าหน์ด้เสิมอและควรใช้�ภาษาอ�งกฤษน์3า สิามารถใช้�ภาษาไทยเป7น์ค3าตามได้� แต.ต�องไม.ยาวเก�น์ 64 ต�วอ�กษร เช้.น์ Make a home with HTML : สร างเว%บสวยด้ วยภาษา HTML (การน์�บต�วอ�กษรใน์ค3าภาษาไทยต�องน์�บสิระบน์/ล.าง/วรรณย0กต�ด้�วย) <html> <head> <title> Make a home with HTML : สิร�างเว�บสิวยด้�วยภาษา HTML</title> </head> <body> ............... </body></html>

ช้��อเร�ยกเว�บไซต�ท��ปรากฏิบน์ไตเต��ลบาร� น์อกจากจะน์3ามาใช้�แสิด้งช้��อเร��องของเว�บไซต�น์��น์ๆ แล�ว ย�งเป7น์ข�อความท��จะถ�กน์3ามาใช้�เป7น์ค3าสิ3าค�ญ (Keyword) ใน์การสิ�บค�น์ข�อม�ลจาก Search Engine เสิมอ

การก,าห้นด้ช่��อเอกสารเว%บในแถุบไตเต19ล การก,าห้นด้ช่��อเอกสารเว%บในแถุบไตเต19ล (Title bar)(Title bar)

• ต�องม�การก3าหน์ด้ค3าหล�กให�ก�บเว�บเพจน์��น์ๆ โด้ยใช้�ค3าสิ��งท��ม�ร�ปแบบเฉพาะไว�ใน์สิ.วน์ Head ถ�ด้จาก Title เร�ยกว.าการใช้�ค3าสิ��ง Meta (ซ*�งจะไม.แสิด้งผู้ลใน์หน์�าต.างบราวเซอร�) ด้�งน์��

• <Meta name="X" content="Y"> (x และ y จะถ�กแทน์ค.าด้�วยข�อความ)

ค์,าห้ล�ก ค์,าห้ล�ก (Keyword) (Keyword) และค์,าอธิ1บายห้น าและค์,าอธิ1บายห้น าเว%บเพื่จั เว%บเพื่จั (Description)(Description)

<head> <title> Make a home with HTML : สิร�างเว�บสิวยด้�วยภาษา HTML</title> <meta name="keyword" content="html, web, page, website, home."> <meta name="description" content="HTML is a wonderful language for internet communication."> <meta name="author" content="Information Technology - [email protected]."></head>

การแสิด้งผู้ลภาษาไทยของเว�บเพจเป7น์อ�กป<ญหาหน์*�งท��ไม.ควรมองข�าม โด้ยเฉพาะการสิร�างเว�บจากเคร��องม�อสิ3าเร�จร�ปหลายๆ โปรแกรมท��ม�กจะท3าการก3าหน์ด้ให�เว�บเป7น์ภาษาของผู้��พ�ฒน์าโปรแกรม (อาจเป7น์ภาษาใน์ย0โรป/อเมร�กา/หร�อภาษาอ��น์ๆ) ท3าให�ผู้��ช้มไม.สิามารถอ.าน์ภาษาไทยได้� ด้�งน์��น์ผู้��สิร�างเว�บจะต�องท3าการก3าหน์ด้ค.าการถอด้รห�สิภาษาไทยไว�เลยใน์ท0กๆ ไฟิล�โด้ยใช้�ค3าสิ��ง Meta ระบ0ไว�ท��สิ.วน์ Head เช้.น์เด้�ยวก�น์ด้�งน์��

การค์วบค์*มการเข ารห้�สภาษาไทยการค์วบค์*มการเข ารห้�สภาษาไทย

<meta http-equiv="Content-Type" content="text/html; charset=TIS-620"> ห้ร�อ<meta http-equiv="Content-Type" content="text/html; charset=Windows-874">

1. ใช้�แบ�กกราวด้�สิะอาด้ เร�ยบง.าย2. ค�ด้ก.อน์ใช้�เอฟิเฟิคท�ต.างๆ

3. ใช้�ต�วอ�กษรท��คมช้�ด้ 4. ออกแบบกราฟิ9กให�ม�ขน์าด้ไฟิล�เล�กๆ 5. ควบค0มขน์าด้ของเพจให�ด้�

32

กฎพื่�9นฐานส,าห้ร�บการสร างเว%บไซต(ท��เว%บกฎพื่�9นฐานส,าห้ร�บการสร างเว%บไซต(ท��เว%บมาสเตอร(ค์วรใส�ใจัมาสเตอร(ค์วรใส�ใจัม�อย/� ม�อย/� 10 10 ป้ระการ ป้ระการ

6. วางแผู้น์และออกแบบก.อน์ลงม�อสิร�าง 7. ช้��น์3าผู้��ช้มด้�วยว�ธิ�การง.ายๆ 8. อย.าพยายามท3าต�วล3�าหน์�าเก�น์ไป 9. ง.ายๆ แต.จร�งใจ

10.อย.าล�มปร�บปร0งความสิด้ใสิ

33

กฎพื่�9นฐานส,าห้ร�บการสร างเว%บไซต(ท��เว%บกฎพื่�9นฐานส,าห้ร�บการสร างเว%บไซต(ท��เว%บมาสเตอร(ค์วรใส�ใจัมาสเตอร(ค์วรใส�ใจัม�อย/� ม�อย/� 10 10 ป้ระการ ป้ระการ

ค์วามผู้1ด้พื่ลาด้ในการออกแบบเว%บไซต( ค์วามผู้1ด้พื่ลาด้ในการออกแบบเว%บไซต( 10 10 อ�นด้�บแรกอ�นด้�บแรก

ค์วามผู้1ด้พื่ลาด้ท��ม�กเก1ด้ข49นในการออกแบบเว%บไซท(ท��วไป้ ม�ด้�งน์��

1. ใช้�โครงสิร�างหน์�าเว�บเป7น์ระบบเฟิรม2. ใช้�เทคโน์โลย�ข� �น์สิ�งโด้ยไม.จ3าเป7น์3. ใช้�ต�วหน์�งสิ�อหร�อภาพท��เคล��อน์ไหวตลอด้เวลา4. ม�ท��อย�.เว�บไซท�ท��ซ�บซ�อน์ (URL) ยากต.อการจด้จ3าและพ�มพ�

5. ไม.ม�การแสิด้งช้��อและท��อย�.ของเว�บไซท�ใน์หน์�าเว�บเพจ 6. ม�ความยาวของหน์�ามากเก�น์ไป

34

ค์วามผู้1ด้พื่ลาด้ในการออกแบบเว%บไซต( ค์วามผู้1ด้พื่ลาด้ในการออกแบบเว%บไซต( 10 10 อ�นด้�บแรกอ�นด้�บแรก7. ขาด้ระบบเน์ว�เกช้�น์ท��ม�ประสิ�ทธิ�ภาพ8. ใช้�สิ�ของล�งก�ไม.เหมาะสิม9. ข�อม�ลเก.าไม.ม�การปร�บปร0งให�ท�น์สิม�ย10. เว�บเพจแสิด้งผู้ลช้�า

35

WEB WEB DEVELOPMENDEVELOPMENT PROCESSEST PROCESSES

36

ป้ร�บป้ร*งเว%บไซต(ให้ ป้ร�บป้ร*งเว%บไซต(ให้ ก าวห้น าอย/�เสมอก าวห้น าอย/�เสมอ

37

กระบวนการ กระบวนการ 13 13 ข�9นตอน ในการพื่�ฒนาข�9นตอน ในการพื่�ฒนาเว%บไซต(เว%บไซต(

กระบวน์การใน์การพ�ฒน์าเว�บไซท�ม�ท��งหมด้ 13 ข��น์ตอน์และแบ.งออกเป7น์ Phase ได้� 5 phase ด้�งน์��

38

Phase 1: ส,ารวจัป้<จัจั�ยส,าค์�ญ (Research)

1. ร/ จั�กต�วเอง - ก,าห้นด้เป้�าห้มายและส,ารวจัค์วามพื่ร อม2.เร�ยนร/ ผู้/ ใช่ ระบ*กล*�มผู้/ ใช่ และ–ศึ4กษาค์วามต องการ

3 . ศึ4กษาค์/�แข�ง ส,ารวจัการแข�งข�น–และเร�ยนร/ ค์/�แข�ง

39

Phase 2: พื่�ฒนาเน�9อห้า (Site Content)

4. สร างกลย*ทธิ(การออกแบบ 5 . ห้าข อสร*ป้ขอบเขตเน�9อห้า

Phase 3: พื่�ฒนาโค์รงสร างเว%บไซท( (Site Structure)

6. จั�ด้ระบบข อม/ล

7 . จั�ด้ท,าโค์รงสร างข อม/ล 8 . พื่�ฒนาระบบเนว1เกช่�น

40

Phase 4: ออกแบบและพื่�ฒนาห้น าเว%บ ( Visual design )

9. ออกแบบล�กษณะห้น าตาเว%บเพื่จั 1 0 . พื่�ฒนาเว%บต นแบบและข อ

ก,าห้นด้ส*ด้ท าย

Phase 5: พื่�ฒนาและด้,าเน1นการ (Production and Operation)

11. ลงม�อพื่�ฒนาเว%บเพื่จั 12. เป้3ด้ต�วเว%บไซท( 13. ด้/แลและพื่�ฒนาต�อเน��อง


Phase1 : ส,ารวจัป้<จัจั�ยส,าค์�ญ (Research) 1.ร/ จั�กต�วเอง

- ก,าห้นด้เป้�าห้มายห้ล�กของเว%บไซต(- ก,าห้นด้เป้�าห้มายท��ช่�ด้เจัน- ระบ*ว1ธิ�การว�ด้ค์วามส,าเร%จั- พื่1จัารณาทร�พื่ยากรท��ม� บ*ค์ลากร เง1นท*น ระยะเวลาในการพื่�ฒนา เน�9อห้าข อม/ลท��จัะน,าเสนอบนเว%บ

41


2. เร�ยนร/ ผู้/ ใช่ - ก,าห้นด้กล*�มผู้/ ใช่ เป้�าห้มาย- ค์ นห้าส1�งท��ผู้/ ใช่ ต องการ- สร างป้ระโยช่น(ต�อผู้/ ใช่ - เร�ยนร/ ป้ระสบการณ(ของผู้/ ใช่ (User

Experience)- จั,าลองสถุานการณ( (Scenario)

3. ส,ารวจัการแข�งข�นและค์/�แข�ง- ส,ารวจับรรยากาศึการแข�งข�น- เร�ยนร/ จัากค์/�แข�ง

42

กระบวนการ 13 ข�9นตอน ในการพื่�ฒนาเว%บไซต(

Phase 2: พื่�ฒนาเน�9อห้า (Site Content)4. สร างกลย*ทธิ(การออกแบบ

- สร างแนวทางให้ ผู้/ ใช่ ได้ ร�บข อค์วามท��จัะส��อ

เว%บไซต(ของผู้ล1ตภ�ณฑ์( Powerbar(www.powerbar.com)สร างภาพื่ล�กษณ(ของอาห้ารเสร1มท��ให้ พื่ล�งงานแก�น�กก�ฬาได้ อย�างน�าสนใจั

43


- ป้ระย*กต(เน�9อห้าจัากส��ออ��น (Repurposed Content)

44

เว%บไซท( www.cooktek.com น,าเอาข อม/ลป้ระกอบการขายส1นค์ าท��ม�อย/�ในส1�งพื่1มพื่(มาป้ระย*กต(ใช่ บนเว%บไซท(


4. สร างกลย*ทธิ(การออกแบบ (ต�อ)

- เน�9อห้าเสร1มค์*ณค์�า (Value Added Content)

- เล�อกใช่ เทค์โนโลย�ท��เห้มาะสม

5. ห้าข อสร*ป้ขอบเขตเน�9อห้า- ก,าห้นด้เน�9อห้าและการใช่ งานท��จั,าเป้8น- พื่1จัารณาถุ4งค์วามเป้8นไป้ได้ - เก%บรวบรวมและพื่�ฒนาข อม/ล

45


Phase 3: พื่�ฒนาโค์รงสร างเว%บไซต( (Site Structure)6. จั�ด้ระบบข อม/ล

- จั�ด้กล*�มและระบ*ช่��อเน�9อห้า 7. จั�ด้ท,าโค์รงสร างข อม/ล

- จั�ด้ท,ารายการโค์รงสร างของไซต( (Site Structure Listing)

เม��อม�ข อม/ลท��ถุ/กจั�ด้กล*�มให้ เป้8นระบบเร�ยบร อยแล ว ข�9นตอนต�อไป้ก%น,าข อม/ลท��ได้ มาจั�ด้เป้8นโค์รงสร างเน�9อห้า ท��แสด้งถุ4งกล*�มข อม/ลและล,าด้�บช่�9นของห้�วข อย�อย โด้ยอย/�ในร/ป้แบบต�วห้น�งส�อท�9งห้มด้ก�อน ด้�งต�วอย�างต�อไป้น�9

46

47

Section 1Section 1.1Section 1.2

Section 2Section 2.1Section 2.2

Section 2.2.1Section 2.2.2Section 2.2.3

Section 2.3Section 2.4

Section 3


- จั�ด้ท,าแผู้นผู้�งโค์รงสร างเว%บไซต( (Architectural Blueprint)

48


49

- แผู้นผู้�งโค์รงสร างเว%บไซต(อย�างง�าย เร�ยกว�า Site map ต�วอย�างเว%บไซต(www.jwt.com

กระบวนการ กระบวนการ 13 13 ข�9นตอน ในการพื่�ฒนาข�9นตอน ในการพื่�ฒนาเว%บไซต(เว%บไซต(8. พื่�ฒนาระบบเนว1เกช่�น

- วางแนวการเค์ล��อนท��ภายในไซท( (Site Flow) ในข�9นตอนน�9 จั,าเป้8นต องใช่ แผู้นภาพื่ เข ามา

ป้ระกอบการสร าง flow chart ห้ร�อ storyboard เพื่��อแสด้งให้ เห้%นถุ4งแนวทางและร/ป้แบบการเช่��อมโยงท��

ช่�ด้เจันย1�งข49น

50

ต�วอย�าง Site FlowPOTENTIAL USERS NONUSERS

CURRENT USERS JOURNALISTS

51

HOME

Products

The Company

Download &Support

PressCenter

ClickWise Walk-Through

DownloadClickWise

Company Contacts


- สร างระบบเนว1เกช่�น (Navigation System)

กระบวนการสร างระบบเนว1เกช่�น เร1�มต นจัากการพื่1จัารณาแผู้นผู้�งโค์รงสร างเว%บไซท( ร�วมก�บแนวทางการเค์ล��อนท��ภายในไซท(ท��ม�อย/� เพื่��อให้ ได้ ระบบน,าทางท��จัะพื่าผู้/ ใช่ ไป้ส/�ส�วนต�างๆของเว%บไซท(

52

- ห้น าข�าวจัากเว%บไซต(ของส,าน�กพื่1มพื่( Peachpit Press(www.peachpit.com) ซ4�งสามารถุค์ล1กท��ป้*Aมเนว1เกช่�นด้ านซ ายเพื่��อไป้ย�งส�วนห้ล�กๆ ของเว%บได้ โด้ยตรง ส�วนร/ป้โลโก ของบร1ษ�ทท��อย/�ตรงม*มบนซ าย จัะน,ากล�บไป้ย�งห้น าโฮมเพื่จั

แผู้นภ/ม1แสด้งล,าด้�บข�9นในการพื่�ฒนาแผู้นภ/ม1แสด้งล,าด้�บข�9นในการพื่�ฒนาโค์รงสร างเว%บไซต(โค์รงสร างเว%บไซต(

53

ข อสร*ป้ขอบเขตเน�9อห้า (Content Inventory)ข อสร*ป้ขอบเขตเน�9อห้า (Content Inventory)

วางแผู้นผู้�งโค์รงสร าง (Draft Architectural Plan)วางแผู้นผู้�งโค์รงสร าง (Draft Architectural Plan)

รายการโค์รงสร างของไซท( (Site Structure Listing)รายการโค์รงสร างของไซท( (Site Structure Listing)

แผู้นผู้�งโค์รงสร างเว%บไซท( (Architectural Blueprint)แผู้นผู้�งโค์รงสร างเว%บไซท( (Architectural Blueprint)

ระบบเนว1เกช่�น (Navigation System)ระบบเนว1เกช่�น (Navigation System)

จั�ด้ระบบ (Organize)

จั�ด้โค์รงสร าง (Restructure)

ท,าเป้8นกราฟิ3ก (Visualize)

แนวทางการเค์ล��อนท��ภายในไซท( (Site Flow)


Phase 4: ออกแบบและพื่�ฒนาเว%บ (Visual Design)9. ออกแบบล�กษณะห้น าตาเว%บเพื่จั (Interface Design)

- สร างแบบจั,าลองรายละเอ�ยด้ข อม/ลในห้น าเว%บ (Architectural Page Mock-up) - ต�วอย�างแบบจั,าลองรายละเอ�ยด้ข อม/ลในห้น าเว%บเก��ยวก�บส1นค์ า

54

ช่��อส1นค์ ารายละเอ�ยด้:ว1ธิ�ใช่ :ข อม/ลทางเทค์น1ค์ :ราค์า : ล1งค์(ไป้ย�งห้น าอ��น


- จั�ด้แบ�งพื่�9นท��ในห้น าเว%บ (Page Layout)

- ออกแบบโค์รงร�างของห้น าเว%บเพื่จั (Design Sketch)

55

โค์รงสร างห้น าเว%บห้ล�ก 3 แบบ

ต�วอย�างการออกแบบเว%บไซต(

56


10. พื่�ฒนาเว%บต นแบบ และโค์รงสร างเว%บไซต(ข�9นส*ด้ท าย

- สร างและทด้สอบเว%บเพื่จัต นแบบ (Web-Based Prototype)

- สร*ป้แผู้นผู้�งโค์รงสร างเว%บไซท(อ�นส*ด้ท าย (Final Architecture Blueprint)

- ระบ*ข อก,าห้นด้ในการพื่�ฒนาเว%บไซต( (Production Specification)

- ก,าห้นด้ร/ป้แบบมาตรฐาน (Style Guide)

57


Phase 5 : พื่�ฒนาและด้,าเน1นการ (Production &Operation)11. ลงม�อพื่�ฒนาเว%บเพื่จั (Production)

- เร�ยบเร�ยงและตรวจัสอบข อม/ล- ตกแต�งห้น าตาเว%บเพื่จัให้ สมบ/รณ( (Final

Interface)- สร างเทมเพื่ลตส,าห้ร�บห้น าเว%บ (Web

Template)

58

59

ต�วอย�างการออกแบบเทมเพื่ลต

3 ร/ป้แบบ ตามค์วามเห้มาะสมของเน�9อห้า


- พื่�ฒนาเว%บเพื่จั- พื่�ฒนาระบบการใช่ งานของเว%บ

60

ต�วอย�างเว%บเพื่จัท��ได้ จัากเทมเพื่ลตท�9ง 3 ร/ป้แบบก�อนห้น าน�9


12. เป้3ด้ต�วเว%บไซต( (Launch)- ทด้สอบค์*ณภาพื่ การใช่ งาน และค์วามถุ/ก

ต องo การใช่ งาน (Usability)o ค์วามสม,�าเสมอ และค์วามถุ/กต อง (Consistency and Accuracy)o ค์วามเข าก�นได้ ก�บส1�งแวด้ล อมของผู้/ ใช่ (Compatibility and Degradability)

- ท,าให้ เว%บไซท(เป้8นท��ร/ จั�ก (Promotion)

61


13. ด้/แลและพื่�ฒนาต�อเน��อง (Maintenance & Growth)

- เพื่1�มข อม/ลให้ม�โด้ยย4ด้ร/ป้แบบมาตรฐาน- ว1เค์ราะห้(สถุ1ต1การใช่ บร1การในเว%บไซต(- ตรวจัสอบค์วามถุ/กต องของล1งค์(- ตรวจัสอบเน�9อห้าและการใช่ งานในเว%บให้ ถุ/ก

ต อง ท�นสม�ย และตรงก�บค์วามต องการของผู้/ ใช่ อย/�เสมอ

62

สร*ป้กระบวนการ 13 ข�9นตอน ในการพื่�ฒนาเว%บไซท(

กระบวน์การใน์การพ�ฒน์าเว�บไซท�ม�ท��งหมด้ 13 ข��น์ตอน์และแบ.งออกเป7น์ Phase ได้� 5 phase พร�อมสิ��งท��ได้�ร�บจากแต.ละ phase ม�ด้�งน์��

63

Phase 1: ส,ารวจัป้<จัจั�ยส,าค์�ญ (Research)

1. ร/ จั�กต�วเอง - ก,าห้นด้เป้�าห้มายและส,ารวจัค์วามพื่ร อม

2. เร�ยนร/ ผู้/ ใช่ ระบ*กล*�มผู้/ ใช่ และ–ศึ4กษาค์วามต องการ

3 . ศึ4กษาค์/�แข�ง ส,ารวจัการแข�งข�น–และเร�ยนร/ ค์/�แข�ง

1. เป้�าห้มายห้ล�กของเว%บไซท(

2. ค์วามต องการของผู้/ ใช่

3. กลย*ทธิ(ในการแข�งข�น

ส1�งท��ได้ ร�บ

64

Phase 2: พื่�ฒนาเน�9อห้า (Site Content)

4. สร างกลย*ทธิ(การออกแบบ 5 . ห้าข อสร*ป้ขอบเขตเน�9อห้า

Phase 3: พื่�ฒนาโค์รงสร างเว%บไซท( (Site Structure)

6. จั�ด้ระบบข อม/ล

7 . จั�ด้ท,าโค์รงสร างข อม/ล 8 . พื่�ฒนาระบบเนว1เกช่�น

1. แนวทางการออกแบบเว%บไซท(

2. ขอบเขตเน�9อห้าและการใช่ งาน

3. ข อม/ลท��ถุ/กจั�ด้อย�างเป้8นระบบ


1. แผู้นผู้�งโค์รงสร างข อม/ล

2. แนวทางการท�องเว%บ

3. ระบบเนว1เกช่�น

65

Phase 4: ออกแบบและพื่�ฒนาห้น าเว%บ ( Visual design )

9. ออกแบบล�กษณะห้น าตาเว%บเพื่จั 1 0 . พื่�ฒนาเว%บต นแบบและข อ

ก,าห้นด้ส*ด้ท าย

Phase 5: พื่�ฒนาและด้,าเน1นการ (Production and Operation)

11. ลงม�อพื่�ฒนาเว%บเพื่จั 12. เป้3ด้ต�วเว%บไซท( 13. ด้/แลและพื่�ฒนาต�อเน��อง

1. ล�กษณะห้น าตาของเว%บไซท(

2. เว%บเพื่จัต นแบบท��จัะใช่ ในการพื่�ฒนา

3. ร/ป้แบบโค์รงสร างของเว%บไซท(

4 . ข อก,าห้นด้ในการพื่�ฒนาเว%บไซท(


1. เว%บไซท(ท��สมบ/รณ( 2. เป้3ด้ต�วเว%บไซท(และ

ท,าให้ เป้8นท��ร/ จั�ก 3. แนวทางการด้/และ

พื่�ฒนาต�อไป้

• END• Question ?

66

- introduction to web design - web development processes

Documents