(microfiche) โดยเรียกวา “เมมเมคซ์ (memex)”...

1

เอก ส าร ปร ะก อบก าร ส อน ร ายวชาหลก ก าร ออก แ บบเวบ

ผแต ง: อาจารยณฐ ภทร แก วร ตน ภทร

ส ง วนล ขส ทธต ามก ฎหมาย หามทาซ าหร อดด แ ปลง ก อน ได รบอน ญาต

บทท 1

หลกการออกแบบเวบไซต

ป จ จ บ น โ ล ก เ ข า ส ย ด ด จ ท ล ท ข บ เ ค ล อ น ด ว ย ก า ร ส ง ถ า ย ข อ ม ล ผ า น ร ะ บ บ เ ค ร อ ข า ย

อ น เ ท อ ร เ น ต แ ล ะ ม แ น ว โ น ม ท ร ะ บ บ เ ค ร อ ข า ย อ น เ ท อ ร เ น ต จ ะ ม ก า ร เ ต บ โ ต อ ย า ง ต อ เ น อ ง แ ล ะ ก า ว

กระโดด สงเก ตไดจากนโ ยบ ายของ ป ร ะ เ ท ศ ท ม ง เ น น เ ศ ร ษ ฐ ก จ เ ช ง ด จ ท ล (Digital Economy) เ พ อ

ส ร า ง ร ะ บ บ เ ศ ร ษ ฐ ก จ แ ล ะ ส ง ค ม ท ม ก า ร ต ด ต อ ส อ ส า ร ก า ร ผ ล ต ก า ร อ ป โ ภ ค บ ร โ ภ ค ก า ร ใ ช ส อ ย

ก า ร จ า ห น า ย จ า ย แ จ ก ก า ร พ า ณ ช ย อ เ ล ก ท ร อ น ก ส ก า ร ท า ธ ร ก ร ร ม ท า ง อ เ ล ก ท ร อ น ก ส ก า ร

ค ม น า ค ม ข น ส ง ก า ร โ ล จ ส ต ก ส ก า ร ศ ก ษ า ห อ ง ส ม ด ด จ ท ล ฐ า น ข อ ม ล ท ร พ ย า ก ร ส า ร ส น เ ท ศ

ว า ร ส า ร ด จ ท ล ก า ร เ ก ษ ต ร ก ร ร ม ก า ร อ ต ส า ห ก ร ร ม ก า ร ส า ธ า ร ณ ส ข ก า ร เ ง น ก า ร ล ง ท น ก า ร

ภ า ษ อ า ก ร ก า ร บ ร ห า ร จ ด ก า ร ข อ ม ล แ ล ะ เ น อ ห า ห ร อ ก จ ก ร ร ม ท า ง เ ศ ร ษ ฐ ก จ แ ล ะ ส ง ค ม อ น ใ ด

ห ร อ ก า ร ใ ด ๆ ท ม ก ร ะ บ ว น ก า ร ห ร อ ก า ร ด า เ น น ง า น ท า ง ด จ ท ล ห ร อ ท า ง อ เ ล ก ท ร อ น ก ส ท ง ใ น

กจการกระจายเ สยง กจการโท รทศน กจการวท ยค มนาคม กจการโท รคมนาคม ก จ ก า ร ส อ ส า ร

ด า ว เ ท ย ม แ ล ะ ก า ร บ ร ห า ร ค ล น ค ว า ม ถ โ ด ย อ า ศ ย โ ค ร ง ส ร า ง พ น ฐ า น เ ท ค โ น โ ล ย ส า ร ส น เ ท ศ แ ล ะ

การสอสาร รวมท งเท คโ นโลย ทมการหลอมรวม หรอเท คโ นโลย อนใดใ นทานองคลายค ลงกน

ด ง น น พ น ฐ า น ท ส า ค ญ ใ น ก า ร ต ด ต อ ส อ ส า ร ผ า น เ ค ร อ ข า ย อ น เ ท อ ร เ น ต น น ก ค อ ก า ร

ต ด ต อ ส อ ส า ร ผ า น ท า ง เ ว บ ไ ซ ต (Web Site) ซ ง เ ป น ช อ ง ท า ง ก า ร ส อ ส า ร ท ส ะ ด ว ก ร ว ด เ ร ว แ ล ะ

ส า ม า ร ถ เ ข า ถ ง ไ ด ท ก เ ม อ โ ด ย ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ท เ ห ม า ะ ส ม ห ร อ ส อ ด ค ล อ ง ก บ ห ล ก ก า ร

อ อ ก แ บ บ เ ว บ เ ป น ส ง ส า ค ญ ท จ ะ ล ะ เ ล ย ไ ม ไ ด แ ล ะ ม ค ว า ม จ า เ ป น ท จ ะ ต อ ง ศ ก ษ า ห ล ก ก า ร ต า ง ๆ

ร ว ม ถ ง ม า ต ร ฐ า น ส า ก ล ใ น ก า ร อ อ ก แ บ บ แ ล ะ พ ฒ น า เ ว บ ไ ซ ต ข น เ พ อ ใ ห ผ ใ ช ง า น เ ว บ ไ ซ ต ไ ม เ ก ด

ค ว า ม ส บ ส น ข อ ม ล ห ร อ ส า ร ส น เ ท ศ ท จ ะ น า เ ส น อ แ ล ะ ท า ใ ห เ ก ด ค ว า ม ด ง ด ด ค ว า ม น า ส น ใ จ แ ล ะ

เก ดความตอเนองในก ารเขาใชเวบ ไซ ต โด ยผออกแบบ เวบ ไซ ตจะตองมความเอ า ใ จ ใ ส ข อ ม ล ห ร อ

สารสนเท ศทจะน า เ ส น อ ต า แ ห น ง ก า ร จ ด ว า ง ส ด ส ว น ข อ ง ก า ร แ ส ด ง ผ ล ข อ ม ล ต า ง ๆ ด ว ย โ ด ย ใ น

บ ท เรยนน จะนาเสนอเ กยว กบ ท ฤษ ฎและหลก การทเก ยวของกบ ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ใ น ป จ จ บ น

เ พ อ แ ส ด ง ใ ห เ ห น ถ ง ค ว า ม ห ล า ก ห ล า ย ข อ ง ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต แ ล ะ ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ท

ม ง เ น น ค ว า ม ต อ ง ก า ร ข อ ง ผใ ช เ ว บ ไ ซ ต แ ล ะ ค ว า ม ต อ ง ก า ร ข อ ง ผพ ฒ น า เ ว บ ไ ซ ต ท จ ะ ส ง ม อ บ ข อ ม ล

และสารสนเ ท ศ

2




ความหมายของการออกแบบเวบไซต ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ห ร อ Web Design ม ผ ใ ห ค ว า ม ห ม า ย แ ล ะ ล ก ษ ณ ะ ข อ ง ก า ร

ออกแบ บ เวบ ไซ ตไว ดงน

ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต แ ล ะ เ ว บ แ อ พ พ ล เ ค ช น (Web Design and Applications) เ ก ย ว ข อ ง

ก บ ม า ต ร ฐ า น ใ น ก า ร ส ร า ง (Build) แ ล ะ ก า ร แ ส ด ง ผ ล (Rendering) ท ง ห น า เ ว บ เ พ จ โ ด ย ใ ช

เ ท ค โ น โ ล ย ภ า ษ า เ อ ช ท เ อ ม แ อ ล (Hypertext Markup Language: HTML) ส ไ ต ล ช ท (Cascading

Style Sheet: CSS) เ อ ส ว จ (Scalable Vector Graphics: SVG) เ อ พ ไ อ (Application Programming

Interface: APIs) แ ล ะ เ ท ค โ น โ ล ย อ น ๆ ท ใ ช ใ น ก า ร พ ฒ น า เ ว บ แ อ พ พ ล เ ค ช น ห ร อ เ ร ย ก ว า

“WebApps” นอกจากน ยงรวมถงท างก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ท ผใ ช ท ว ไ ป แ ล ะ ผพ ก า ร เ ข า ถ ง เ น อ ห า

ไ ด (Web Content Accessibility Guidelines: WCAG) แ ล ะ ส า ม า ร ถ แ ส ด ง ผ ล ไ ด ใ น อ ป ก ร ณ

เคล อนท ดวย (World Wide Web Consortium: W3C, 2015)

การออกแบ บ เวบ ไซ ต เป นสหวทยาการทเก ยวของกบก ารวางแ ผ น แ ล ะ ก า ร ผ ล ต เ ว บ ไ ซ ต

โ ด ย ไ ม ม ก า ร จ า ก ด ท า ง ด า น เ ท ค โ น โ ล ย ท ใ ช โ ค ร ง ส ร า ง ข อ ม ล ก า ร อ อ ก แ บ บ ภ า พ แ ล ะ ก า ร ส ง

ข อ ม ล ผ า น เ ค ร อ ข า ย โ ด ย ม ก า ร ค า น ง ถ ง 5 แ ง ม ม ส า ค ญ ท ช ว ย ใ ห ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ม ค ว า ม

เ ห ม า ะ ส ม ค อ 1) เ น อ ห า (Content) 2) ก า ร ร บ ภ า พ (Visual) 3) เ ท ค โ น โ ล ย (Technology) 4) ก า ร

สงถายขอมล (Delivery) และ 5) วตถ ป ระสงค (Purpose) (Thomas A. Powell.,2003)

รปท 1 แสดงแ งมมก ารออก แบบ เวบ ไซ ตของ Thomas A.

ท มา: Thomas A. Powell., 2003

3




ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ค อ ก า ร ว า ง ก ร อ บ ก า ร พ ฒ น า เ ว บ ไ ซ ต ป ร ะ ก อ บ ไ ป ด ว ย

ส ถ า ป ต ย ก ร ร ม ข อ ง เ ว บ ไ ซ ต ก ร อ บ แ น ว ค ด ข อ ง เ ว บ ไ ซ ต ก า ร น า ท า ง ใ น เ ว บ ไ ซ ต ก า ร ต อ ป ร ะ ส า น

ผใ ช ก บ เ ว บ ไ ซ ต โ ด ย ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต จ ะ ต อ ง ค า น ง ถ ง ส ภ า พ แ ว ด ล อ ม ท เ ว บ ไ ซ ต จ ะ ส า ม า ร ถ

แสดงผลและสงถายใหแกผใชเรยก คน ได แ ล ะ ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต จ ะ ต อ ง เ ป น อ ส ร ะ จ า ก ภ า ษ า

โป รแกรมหรอเครองมอพฒนาเชงเท คนค (Daniel Schwabe, 2001)

จ า ก ค ว า ม ห ม า ย ข า ง ต น ส า ม า ร ถ ส ร ป ไ ด ว า ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ม า จ า ก ค า ว า “Web

Design” โด ยมความหมาย คอ การวางแผนแ ล ะ ก า ร ด า เ น น ง า น ใ น ก า ร ผ ล ต เ ว บ ไ ซ ต ซ ง ป ร ะ ก อ บ

ไ ป ด ว ย ว ต ถ ป ร ะ ส ง ค ข อ ง เ ว บ ไ ซ ต ก า ร ว า ง ก ร อ บ แ น ว ค ด ก า ร อ อ ก แ บ บ เ น อ ห า แ ล ะ ก า ร ส อ ส า ร

ก า ร อ อ ก แ บ บ เ ค า ร า ง ข อ ง เ ว บ ไ ซ ต ก า ร อ อ ก แ บ บ อ ก ษ ร ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ท ผ ใ ช ท ว ไ ป แ ล ะ ผ

พ ก า ร เ ข า ถ ง เ น อ ห า ไ ด แ ล ะ ก า ร ค า น ง ถ ง ส ภ า พ แ ว ด ล อ ม ท เ ว บ ไ ซ ต จ ะ ส า ม า ร ถ ท า ง า น แ ล ะ ส ง ถ า ย

ไป ยงผใชได ท งน แนวคดในก ารออกแบ บ เว บ ไ ซ ต จ ะ เ ป น อ ส ร ะ จ า ก ภ า ษ า โ ป ร แ ก ร ม ห ร อ เ ค ร อ ง ม อ

พฒนาเชงเท คนคดวย

ท งน การ ใ ช เ ท ค โ น โ ล ย แ ล ะ ม า ต ร ฐ า น ต า ง ๆ เ ช น ภ า ษ า เ อ ช ท เ อ ม แ อ ล ส ไ ต ล ช ท ภ า ษ า จ า

ว า ส ค ร ป ต ม เ ด ย ค ว ร ภ า ษ า โ ป ร แ ก ร ม ฝ ง แ ม ข า ย (Server-Side Programming) เ ป น ต น เ พ อ

น า ม า ใ ช ป ร ะ ก อ บ ก า ร ผ ล ต เ ว บ ไ ซ ต จ ะ อ ย ใ น ส ว น ข อ ง ก า ร พ ฒ น า เ ว บ ไ ซ ต ห ร อ “Web

Development” ดงน น การออกแบ บ และ พ ฒ น า เ ว บ ไ ซ ต ห ร อ “Web Design and Development”

เ ป น ก ร ะ บ ว น ก า ร ผ ล ต เ ว บ ไ ซ ต ท ส ม บ ร ณ ค อ ม ก า ร ค า น ง ถ ง ก า ร อ อ ก แ บ บ ส ภ า พ แ ว ด ล อ ม ต า ง ๆ

การสอสาร และมการ ท างานทสนองตอความตองก ารของ ผใชไดดวย

การออกแบ บ เวบ ไซ ตในลกษ ณะเชง สนท รยะ ห ร อ “Design Aesthetic for Web Design”

เ ป น ก า ร อ อ ก แ บ บ เ ว บ อ ก ล ก ษ ณ ะ ท เ น น ม ม ม อ ง (Viewpoints) ค อ ม ม ม อ ง ค ว า ม ส ว ย ง า ม

(Aesthetic) แ ล ะ ม ม ม อ ง ท า ง ด า น อ า ร ม ณ (Emotional) ข อ ง ผใ ช ท ไ ด จ า ก ก า ร เ ข า เ ย ย ม ช ม เ ว บ ไ ซ ต

ซ งสวนใหญยงมความเขาใจผดเก ยวก บ การออกแบ บ เวบ ไซ ต โด ยบ คคลท วไ ป เ ม อ พ บ เ ห น ค า ว า

ก า ร อ อ ก แ บ บ เ ว บ จ ะ ห ม า ย ถ ง ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต เ ช ง ส น ท ร ย ะ ค อ ก า ร ใ ช โ ป ร แ ก ร ม ท า ง ด า น

กรา ฟ ก เ ช น Adobe Photoshop ห ร อ โ ป ร แ ก ร ม แ ต ง ภ า พ ห ล า ย ม ต เ ป น ต น ซ ง แ ท ท จ ร ง แ ล ว ก า ร

ออกแบ บ เวบ ไซ ตเชงสนท รยะ เป นสวนหนงของหลก การออกแบ บ เวบ ไซ ตเทาน น

ประวตความเปนมาของเวบไซต ป จ จ บ น ม ก า ร ใ ช ง า น เ ว บ ไ ซ ต อ ย า ง แ พ ร ห ล า ย เ น อ ง จ า ก พ ฒ น า ก า ร ข อ ง เ ท ค โ น โ ล ย

ค อ ม พ ว เ ต อ ร ( Computer Technology) แ ล ะ เ ท ค โ น โ ล ย เ ค ร อ ข า ย โ ท ร ค ม น า ค ม

(Telecommunication Technology) แ ล ะ ด ว ย ร า ค า ท ต า ล ง ข อ ง อ ป ก ร ณ ท า ใ ห ผใ ช ส า ม า ร ถ เ ข า ถ ง

เ ท ค โ น โ ล ย เ ว บ ไ ด ท า ใ ห เ ก ด ธ ร ก จ แ ล ะ บ ร ก า ร ท ท า ง า น ผ า น เ ท ค โ น โ ล ย เ ว บ ม า ก ม า ย เ ช น e-

Commerce e-Learning e-Government เป นตน

4




โ ด ย ต น ก า เ น ด ข อ ง เ ว บ ไ ซ ต เ ก ด ข น เ ม อ ป ค . ศ . 1 9 4 5 โ ด ย แ ว น เ น ว า บ ช (Vannevar Bush)

ไ ด เ ข ย น บ ท ค ว า ม เ ก ย ว ก บ ก า ร ส บ ค น ส า ร ส น เ ท ศ เ ช ง เ ช อ ม โ ย ง จ า ก แ ผ น ไ ม โ ค ร ฟ ล ม เ ล ก

(Microfiche) โ ด ย เ ร ย ก ว า “เ ม ม เ ม ค ซ (Memex)” แ ล ะ ใ น ป ค . ศ . 1 9 8 0 ท ม เ บ อ เ น อ ร ล (Tim

Berners-Lee) ไ ด เ ส น อ โ ค ร ง ก า ร ไ ฮ เ ป อ ร เ ท ก ซ (Hypertext) ร ะ ห ว า ง ท า ง า น อ ย ท เ ซ ร น (the

European Organization for Nuclear Research: CERN) ซ ง ท ม เ บ อ เ น อ ร ล ไ ด ค ด ค น โ ค ร ง ก า ร

ไ ฮ เ ป อ ร เ ท ก ซ เ พ อ แ ล ก เ ป ล ย น ข อ ม ล ส า ห ร บ น ก ว จ ย เ น อ ง จ า ก อ ง ค ก ร เ ซ ร น เ ป น อ ง ค ก ร ท า ง

ว ท ย า ศ า ส ต ร ข น า ด ใ ห ญ แ ล ะ ร ว บ ร ว ม อ จ ฉ ร ย ะ แ ล ะ น ก ว จ ย ข อ ง ย โ ร ป ไ ว ม า ก ด ง น น จ ง ม ข อ จ า ก ด

ใ น ก า ร ส ง เ อ ก ส า ร แ ต ท ม เ บ อ เ น อ ร ล ไ ด เ ส น อ แ น ว ค ด ไ ฮ เ ป อ ร เ ท ก ซ ข น เ พ อ แ ก ไ ข ป ญ ห า ด ง ก ล า ว

ท ม เ บ อ เ น อ ร ล ไ ด ร า ง ข อ เ ส น อ เ ก ย ว ก บ แ น ว ค ด ไ ฮ เ ป อ ร เ ท ก ซ ข น ด ว ย ค ว า ม ช ว ย เ ห ล อ ข อ ง โ ร เ บ ร ต

ไค ลย ชวยป รบ ร า ง โ ค ร ง ก า ร ไ ฮ เ ป อ ร เ ท ก ซ อ ก ค ร ง แ ล ะ ไ ม ค เ ซ น ด อ ล ล ผจ ด ก า ร ข อ ง ท ม เ บ อ เ น อ ร

ล จ ง ร บ ข อ เ ส น อ ข อ ง เ ข า ใ น ข อ เ ส น อ ด ง ก ล า ว น น ท ม เ บ อ เ น อ ร ล ไ ด ใ ช ค ว า ม ค ด เ ด ย ว ก บ ร ะ บ บ เ อ น

ไ ค ว ร (ENQUIRE) ม า ใ ช ส ร า ง เ ว ล ด ไ ว ด เ ว บ ซ ง เ ข า ไ ด อ อ ก แ บ บ แ ล ะ ส ร า ง เ ว บ เ บ ร า ว เ ซ อ ร แ ล ะ เ อ ด

เ ต อ ร ต ว แ ร ก ข อ ง โ ล ก ช อ ว า WorldWideWeb บ น ร ะ บ บ ป ฏ บ ต ก า ร NEXTSTEP ข อ ง ส ต ฟ จ อ บ ส

และสรางเวบ เซ รฟเว อรข น เรยก วา httpd (HyperText Transfer Protocal Deamon)

รปท 1 ท มเบอเ นอรล (Tim Berners-Lee) ในว ย 60 ป (ภาพใ นป ค.ศ .2014)

ท มา: https://en.wikipedia.org/wiki/Tim_Berners-Lee

รปท 2 แสดงสญลก ษ ณขอ งองคกร W3C ท ควบ คมมา ตรฐานท า งดา นเวบ

ท มา: http://www.w3.org/TR/html5/rendering.html

5




ซ งตอมานาไฮ เป อรเทก ซ มาใชรวมกบ เครอขายอนเท อ ร เ น ต จ น ก ล า ย เ ป น ม า ต ร ฐ า น เ ว บ

ท ส า ค ญ ข อ ง โ ล ก ท อ ย ภ า ย ใ น ก า ร ด แ ล ข อ ง ส ม า ค ม เ ว ล ด ไ ว ด เ ว บ (World Wide Web Consortium:

W3C) ซ งท มเบอเ นอรลกเ ป นผกอต งสมาคมดงกลาวเชนกน

ยคของเวบไซต ป จจบ นมการจาแนกยค ของเวบ ออกเ ป น 4 รน ดงน

1. เวบรนท 1 (Web 1.0) หรอ เวบคงท (Static Web) ม จ ด ม ง ห ม า ย ใ น ก า ร เ ผ ย แ พ ร

ข อ ม ล เ ท า น น ซ ง ไ ม ต า ง จ า ก ห น า ก ร ะ ด า ษ ห ร อ ใ บ ป ล ว โ ฆ ษ ณ า เ ป น ต น ย ง ไ ม ม ก า ร ต อ บ ส น อ ง

ของผใชกลบ ไป ยงผเผยแพรขอมล

2. เวบรนท 2 (Web 2.0) หรอ เวบพลวตร (Dynamic Web) ม จ ด ม ง ห ม า ย ใ น ก า ร

ใชเวบ ไซ ตในก ารตดตอประสานงาน ร ว ม ถ ง ก า ร ด า เ น น ง า น ท า ง ธ ร ก จ แ ล ะ เ ค ร อ ข า ย ท า ง ส ง ค ม ม

ก า ร ใ ช ร ะ บ บ ฐ า น ข อ ม ล แ ล ะ ม ร ะ บ บ ก า ร แ ล ก เ ป ล ย น ข อ ม ล ท ม ป ร ะ ส ท ธ ภ า พ ส ง ข น เ ช น เ ว บ ไ ซ ต

ก า ร ล ง ท ะ เ บ ย น เ ร ย น เ ว บ บ อ ร ด ก า ร ค ย ผา น ร ะ บ บ อ น เ ท อ ร เ น ต ( Internet Relay Chat) ก า ร ข า ย

ของผานเวบ ไซ ต www.amazon.com การใชเครอขายท างสงคม www.facebook.com

3. เวบรนท 3 (Web 3.0) หรอ เวบเชงความหมาย (Semantic Web) ม

จดมงหมายเ พอใชขอ ม ล ต า ง ๆ ท ม อ ย บ น เ ว บ ไ ซ ต ใ ห เ ก ด ป ร ะ โ ย ช น ม า ก ย ง ข น ห ร อ ใ ช ส า ห ร บ ก า ร

ค น ห า ค า ท ม ค ว า ม ห ม า ย ค ล า ย ค ล ง ก น ห ร อ ก า ร น า เ ส น อ ข อ ม ล ท ส อ ด ค ล อ ง ก บ พ ฤ ต ก ร ร ม ข อ ง

ผ ใ ช อ น เ ท อ ร เ น ต เ ป น ต น โ ด ย ม ก า ร ใ ช เ ท ค โ น โ ล ย เ ช ง ค ว า ม ห ม า ย เ ช น Ontology แ ล ะ ค ล ง ค า

ภ า ษ า ต า ง ๆ ช ว ย ท า ใ ห เ ก ด ร ะ บ บ ก า ร ค น ห า ท ช า ญ ฉ ล า ด ม า ก ข น เ ช น จ ก ร ก ล ค น ห า ( Search

Engine; www.google.com) พ ฒ น า ก า ร ข อ ง ซ อ ฟ ต แ ว ร แ ป ล ภ า ษ า (Language Translator) ก า ร

จาแนกเอก สารภาษ าตางๆ ดวยคว ามรวดเรว (Document Classification) เป นตน

4. เวบรนท 4 (Web 4.0) หรอ เวบตวแทน (Intelligent Personal Agents) โ ด ย

เวบ ในย คท 4 จะรบ ร ค ว า ม ร ส ก (Sentiment) แ ล ะ ค ว า ม ต อ ง ก า ร (Need) ส ว น บ ค ค ล ข อ ง ผใ ช เ ว บ

ไ ด ซ ง ม ก า ร เ ช อ ม โ ย ง ป ร ะ ส า น ร ะ ห ว า ง ช ว ภ า พ ก บ เ ว บ ม า ก ข น ห ร อ เ ร ย ก ว า “Symbiotic Web”

โ ด ย ม ก า ร ว เ ค ร า ะ ห ท ซ บ ซ อ น ม า ก จ น ร ะ บ บ เ ว บ ส า ม า ร ถ เ ก ด ก า ร เ ร ย น ร แ ล ะ เ ก ด ก ร ะ บ ว น ก า ร ค ด

และตดสนใจแทนมนษย มากย งข น (Sareh Aghaei, 2012)

สภาพแวดลอมของเวบไซต 1. เวบเบราวเซอร (Web Browser) โ ด ย ค า ว า “เ บ ร า เ ซ อ ร (Browser)” ม ค ว า ม ห ม า ย

ค อ ต ว เ ร ย ก ห า ห ร อ ต ว เ ร ย ก ค น เ ว บ ไ ซ ต เ ว บ เ บ ร า ว เ ซ อ ร ม ห น า ท แ ป ล ภ า ษ า เ อ ช ท เ อ ม แ อ ล เ ช น

โค รม (Chrome) อนเท อ ร เ น ต เ อ ก ซ พ ล อ เ ล อ ร (Internet Explorer: IE) โ อ เ ป ร า (Opera) แ ล ะ ไ ฟ ฟ

6




อกซ (Mozilla FireFox) เป นตน โดย กระบวนก ารแปลภาษ า เ อ ช ท เ อ ม แ อ ล ไ ป แ ส ด ง ผ ล ใ ห เ ก ด ภ า พ

หรอโค รงรางตางๆ บ น เวบ เบ ราวเซ อร เรยก วา การแปล ห รอ การฉาบขอมลใหม (Rendering)

บ อ ย ค ร ง ผ อ อ ก แ บ บ เ ว บ (Web Designer) จ า น ว น ม า ก ไ ม ไ ด ค า น ง ถ ง ผ ใ ช ด า น

ร ะ บ บ ป ฏ บ ต ก า ร อ ป ก ร ณ แ ล ะ ย ห อ ข อ ง เ ว บ เ บ ร า ว เ ซ อ ร ท า ใ ห ก า ร แ ส ด ง ผ ล เ ว บ ไ ซ ต ม ค ว า ม

ผดเพ ย น ไ ป จ า ก ท ไ ด อ อ ก แ บ บ แ ล ะ ใ น บ า ง ค ร ง ถ ง ข น ท ไ ม ส า ม า ร ถ แ ส ด ง ผ ล ข อ ม ล ไ ด อ ย า ง ถ ก ต อ ง

คลาดเคลอนสง ดงน นใ น ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต จ า เ ป น ท จ ะ ต อ ง ศ ก ษ า ล ก ษ ณ ะ ก า ร แ ส ด ง ผ ล ข อ ง

แ ต ล ะ เ ว บ เ บ ร า ว เ ซ อ ร (Web Browser Platform) เ พ อ ท า ใ ห ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ส า ม า ร ถ

ป ร บ เ ป ล ย น ก า ร แ ส ด ง ผ ล ใ ห เ ห ม า ะ ส ม ก บ แ ต ล ะ เ ว บ เ บ ร า ว เ ซ อ ร ห ร อ อ ป ก ร ณ ไ ด โ ด ย ม ห ล ก ก า ร

ดงน

1.1 ตดตามมาตรฐานจากส มาคมเวลดไว ดเวบ (W3C) อยางสมาเ ส ม อ เ น อ ง จ า ก ท า ง

สมาคมจะมการแจงการใชงานค าส งใหมๆ หรอ การระงบคาสงบางคาสง เป นตน

1 . 2 ต ร ว จ ส อ บ ค า ส ง ม า ต ร ฐ า น ต า ง ๆ ท ใ ช ง า น ท า ง ด า น เ ว บ เ ช น เ อ ช ท เ อ ม แ อ ล

(HTML) แ ล ะ ส ไ ต ล ช ท (CSS) ใ ห ถ ก ต อ ง ร ด ก ม แ ล ะ เ ป น ร ะ เ บ ย บ ม า ก ท ส ด ร ว ม ถ ง ห า

จดบก พรอง (Error) ของคาสงดวย

1 . 3 ต อ ง อ อ ก แ บ บ เ ว บ ใ ห ผ ใ ช ส า ม า ร ถ เ ข า ถ ง ไ ด (Accessible) อ า น ไ ด อ ย า ง ส ะ ด ว ก ไ ม

ต ก ห ล น (Readable) ข อ ค ว า ม ห ร อ เ น อ ห า จ ะ ต อ ง ม ค ว า ม ถ ก ต อ ง ช ด เ จ น (Legible) อ ก ข ร ะ ห ร อ

สญลก ษ ณจะตองสามารถแสดงผลไ ดอยางถก ตอง

1 . 4 ใ น ข น ต อ น ก า ร ต ร ว จ ส อ บ ก า ร แ ส ด ง ผ ล เ ว บ ไ ซ ต ท อ อ ก แ บ บ ข น น น จ ะ ต อ ง ท ด ส อ บ

บ นเวบ เบ ราวเซ อร ท หลากหลาย เพอประเมนความถก ตอ ง ข อ ง ก า ร แ ส ด ง ผ ล แ ล ะ น า ไ ป ป ร บ ป ร ง

แกไขเ พอบรรเท าป ญหา (Migrate Problem) ท อาจจะเก ดข นได

7




รปท 3 แสดงแ ผนภมรอยล ะของแ นวโ นมการใ ช เวบ เบ ราวเซ อรระหว าง ชวง ค.ศ. 2011 - 2 015

ท มา: http://www.w3schools.com/browsers/browsers_stats.asp

2. การค านงถงอตราความเรวของสญญาณอนเทอรเนต (Connection Speed)

ในก ารแสดงผลเวบ ไซ ต สงท ขาดไ มไดคอสญญ าณเครอขายอนเท อรเ น ต ซ ง เ ป น ต ว ก ล า ง ใ น ก า ร

ส อ ส า ร ข อ ม ล ผา น เ ว บ ไ ซ ต ด ง น น ผอ อ ก แ บ บ เ ว บ ค ว ร ค า น ง ถ ง ป ร ะ ส ท ธ ภ า พ ใ น ก า ร ส ง ถ า ย ข อ ม ล

ผ า น เ ค ร อ ข า ย อ น เ ท อ ร เ น ต เ ช น ข อ ม ล ท ป ร า ก ฎ ต อ ห น า เ ว บ เ พ จ ม จ า น ว น ม า ก เ ก น ไ ป ห ร อ ไ ม

ภาพถ ายหรอภาพก ราฟกตางๆ มขนาดท เหมาะสมหรอไม

รปท 4 แสดงแ ผนภมค าเฉ ลยและมธย ฐานคว ามเรวข องเครอขายอ นเท อรเนตปร ะเภทใ ชสาย

(Fixed Broadband) สารวจเ มอเดอนกนยายน ค.ศ.2 01 4

ท มา: http://dx.doi.org/10.1787/888933224610

8




รปท 5 แสดงแ ผนภมค าคว ามเรว ต าสดแล ะสงสด ข องเ ครอขายอนเท อรเนตปร ะเภ ท เคล อนท

(Mobile Broadband) สารว จ เมอเดอนกนย ายน ค .ศ.201 4

ท มา: http://dx.doi.org/10.1787/888933224638

ตารางท 1 แสดงอตราความเรวเครอขายอนเท อรเนตเฉลยใ นเอเชย ( พฤ ษ ภาคม พ.ศ.2 559)

ประเทศ อตราความเรว Mbps

Singapore 121.7

Hong Kong 102.6

Japan 82.4

South Korea 59.5

Macau 51.1

Taiwan 50.6

China 29.8

Thailand 19.9

Vietnam 17.6

Cambodia 9

ท ม า : http://www.bangkokpost.com/tech/local-news/568859/thailand-internet-8th-

fastest-in-asia

9




โด ยใ นประเท ศไท ยน น ยงสามารถสารวจอตราความเรวอนเทอรเนตเฉ ลย ใ น แ ต ล ะ เ ม อ ง

หรอจงหวดได ดงตารางท 2

ตารางท 2 แ ส ด ง อ ต ร า ค ว า ม เ ร ว เ ค ร อ ข า ย อ น เ ท อ ร เ น ต เ ฉ ล ย ใ น ป ร ะ เ ท ศ ไ ท ย ( พ ฤ ษ ภ า ค ม พ . ศ .

2 559)

เมอง/จงหวด อตราความเรว Mbps

มกดาหาร 32.19

สตหบ 31.3

หวหน 25.4

พทยา 22.6

กรงเทพฯ 18.1

ท ม า : http://www.bangkokpost.com/tech/local-news/568859/thailand-internet-8th-

fastest-in-asia

3. การเกบหนวยความจ าและเวลาในการดาวนโหลดหนาเวบ (Browser Cache

and Download Time) ใ น ก า ร เ ร ย ก ค น เ ว บ ไ ซ ต น น จ ะ ก ร ะ ท า ผา น เ ว บ เ บ ร า ว เ ซ อ ร ซ ง ป จ จ บ น

เ ว บ เ บ ร า ว เ ซ อ ร จ ะ ม ฟ ง ก ช น ก า ร ท า ง า น ท เ ร ย ก ว า “แ ค ช (Cache)” ซ ง ห ม า ย ถ ง ห น ว ย ค ว า ม จ า ท

เ ว บ เ บ ร า ว เ ซ อ ร เ ก บ ข อ ม ล ไ ว โ ด ย ท ข อ ม ล เ ห ล า น น อ า จ เ ป น ภ า พ ข อ ค ว า ม ช อ ผ ใ ช (Username)

ร ห ส ผา น (Password) ส ไ ต ล ช ท (CSS) โ ด ย ส า เ ห ต ท จ า เ ป น ต อ ง ม แ ค ช เ พ อ ช ว ย ใ ห ก า ร แ ส ด ง ผ ล

ห น า เ ว บ ม ค ว า ม ร ว ด เ ร ว ม า ก ข น โ ด ย ไ ม จ า เ ป น ต อ ง ด า ว น โ ห ล ด ข อ ม ล ท ง ห น า เ ว บ ใ ห ม ท ง ห ม ด

ก ร ณ ท เ ค ย เ ข า เ ว บ ไ ซ ต น น ๆ แ ล ว ซ ง จ ะ ม ก า ร เ ก บ ข อ ม ล ต า ง ๆ ไ ว ใ น เ ว บ เ บ ร า ว เ ซ อ ร จ า ก ก า ร เ ป ด

ห น า เ ว บ ไ ซ ต ค ร ง แ ร ก ท า ใ ห ป ร ะ ห ย ด เ ว ล า ใ น ก า ร ด า ว โ ห ล ด ห น า เ ว บ แ ล ะ ป ร ะ ห ย ด ป ร ม า ณ ข อ ง

ส ญ ญ า ณ อ น เ ท อ ร เ น ต แ ต ห า ก ม ก า ร เ ก บ แ ค ช ไ ว ม า ก เ ก น ไ ป ก อ า จ จ ะ พ บ ว า ก า ร แ ส ด ง ผ ล บ น เ ว บ

เบ ราวเซ อรใชระยะเวลานานข นอนเก ดจากระยะเวลาในการ ค น ห า ข อ ม ล ใ น แ ค ช น น เ อ ง อ า จ จ ะ ม

การชาระแคชใน เวบ เบ ราวเซ อร เพอใหการทางานกลบ มาเป นปก ตใหมอกคร งได

ดงน นหากตองการออกแบบ หน า เ ว บ ไ ซ ต ใ ห ส า ม า ร ถ แ ส ด ง ผ ล ไ ด อ ย า ง ร ว ด เ ร ว โ ด ย พ ง

ค ว า ม ส า ม า ร ถ ข อ ง ห น ว ย ค ว า ม จ า แ ค ช ใ น เ ว บ เ บ ร า ว เ ซ อ ร จ า เ ป น ต อ ง อ อ ก แ บ บ เ ว บ ไ ซ ต ใ น แ ต ล ะ

ห น า ใ ห ม ล ก ษ ณ ะ เ ค า ร า ง ห น า เ ว บ (Web Layout) ภ า พ ห ล ง (Background) ส ว น ข อ ง ก า ร น า ท า ง

(Web Navigation) ใหมลก ษ ณะคลายค ลงกน กจะทาใหหารแสดงผลมความเรวมากข น

4. อปกรณและระบบปฏบตการ (Device and Operating System Issues) เ ป น

ต ว แ ป ร ส า ค ญ ท ย า ก ต อ ก า ร ค ว บ ค ม เ น อ ง จ า ก ค ว า ม ห ล า ก ห ล า ย ข อ ง อ ป ก ร ณ แ ล ะ ข น า ด ห น า จ อ

10




(Screen Sizes) โ ด ย เ ร า ไ ม ส า ม า ร ถ ค า ด เ ด า ไ ด ว า ผใ ช จ ะ ใ ช อ ป ก ร ณ ใ ด ห ร อ ร ะ บ บ ป ฏ บ ต ก า ร ใ ด ใ น

ก า ร เ ข า ถ ง เ ว บ ไ ซ ต ด ง น น ก ร ะ บ ว น ก า ร ใ น ก า ร ท ด ส อ บ ท ด ท ส ด ค อ ก า ร ท ด ส อ บ แ ส ด ง ผ ล ห น า

เวบ ไซ ตบนอป กรณและระบ บ ป ฏบตการเท าท ส า ม า ร ถ ท ด ส อ บ ไ ด เ พ อ ท า ใ ห ท ร า บ ถ ง ป ญ ห า ก า ร

แ ส ด ง ผ ล ท อ า จ จ ะ เ ก ด ข น โ ด ย ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ท ม ก า ร ค า น ง ถ ง อ ป ก ร ณ แ ล ะ

ระบ บ ป ฏบตการ มดงตอไป น

4 . 1 ก า ร ค า น ง ถ ง ข น า ด ห น า จ อ แ ล ะ ค ว า ม ล ก ข อ ง ส (Screen Resolution and Color

Depth) เ ป น ส ง ส า ค ญ ใ น ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต เ น อ ง จ า ก ค ว า ม ห ล า ก ห ล า ย ข อ ง อ ป ก ร ณ เ ช น

ค ว า ม ส า ม า ร ถ ใ น ก า ร พ ล ก แ ก น ข อ ง อ ป ก ร ณ (Orientation) ค ว า ม ก ว า ง แ ล ะ ค ว า ม ล ก ข อ ง ช ว ง ส ท

ห น า จ อ จ ะ ส า ม า ร ถ แ ส ด ง ส ไ ด ข น า ด ข อ ง ห น า จ อ (Scree Resolution) ค ว า ม ล ะ เ อ ย ด ข อ ง จ า น ว น

จดพกเซ ลลตอตารางน ว (Pixels per Inch: PPI) เป นตน

4 . 2 ก า ร ค า น ง ถ ง ช น ด แ ล ะ ร น ข อ ง เ ว บ เ บ ร า ว เ ซ อ ร (Browser Type and Version) เ ป น

ส ง ท ต อ ง ใ ห ค ว า ม ส า ค ญ เ น อ ง จ า ก เ ว บ เ บ ร า ว เ ซ อ ร แ ต ล ะ ป ร ะ เ ภ ท ม ฟ ง ก ช น ก า ร ท า ง า น ท แ ต ก ต า ง

ก น ต า ม ผ ผ ล ต ซ อ ฟ ต แ ว ร ซ ง อ า จ ท า ใ ห ก า ร แ ส ด ง ผ ล ม ค ว า ม แ ต ก ต า ง ก น ไ ด อ ก ท ง ย ง ม ก า ร

ป ร บ เ ป ล ย น ร น ข อ ง ซ อ ฟ ต แ ว ร เ ว บ เ บ ร า ว เ ซ อ ร เ พ อ ร อ ง ร บ ก า ร ท า ง า น ท ม า ก ข น ก ส ง ผ ล ต อ ก า ร

แสดงผลเชนเดยว กน ดงน นการตดตามชนดและ ร น ข อ ง เ ว บ เ บ ร า ว เ ซ อ ร ท า ใ ห ผอ อ ก แ บ บ เ ว บ ไ ซ ต

ส า ม า ร ถ ด ง ค ว า ม ส า ม า ร ถ ข อ ง เ ว บ เ บ ร า ว เ ซ อ ร ใ น ก า ร แ ส ด ง ผ ล เ ว บ ไ ด อ ย า ง ถ ก ต อ ง แ ล ะ น า ด ง ด ด

มากย งข น

4 . 3 ก า ร แ ส ด ง ผ ล ต ว อ ก ษ ร (Font) ใ น แ ต ล ะ เ ว บ เ บ ร า ว เ ซ อ ร ห ร อ ร ะ บ บ ป ฏ บ ต ก า ร ม

ก า ร ก า ห น ด ค า โ ด ย ป ร ย า ย (Default) เ ก ย ว ก บ ล ก ษ ณ ะ ข อ ง อ ก ษ ร อ า จ ท า ใ ห ก า ร แ ส ด ง อ ก ษ ร ไ ม

ต ร ง ก บ ท อ อ ก แ บ บ ไ ว ร ว ม ถ ง เ ม อ ผ อ อ ก แ บ บ เ ว บ ก า ห น ด ล ก ษ ณ ะ อ ก ษ ร ไ ว แ ต ป ร า ก ฎ ว า

ร ะ บ บ ป ฏ บ ต ก า ร ห ร อ อ ป ก ร ณ ข อ ง ผ เ ร ย ก ใ ช เ ว บ ไ ม ม ล ก ษ ณ ะ อ ก ษ ร น น ใ น ร ะ บ บ ก เ ป น อ ก ป ญ ห า

ห น ง ท พ บ ไ ด ม า ก ใ น ก า ร แ ส ด ง ผ ล ข อ ม ล บ น เ ว บ ไ ซ ต ด ง น น ก า ร ก า ห น ด อ ก ษ ร บ น ห น า เ ว บ อ า จ จ ะ

ต อ ง ใ ช เ ท ค น ค พ เ ศ ษ เ พ อ ท า ใ ห ก า ร แ ส ด ง ผ ล ข อ ม ล ม ค ว า ม ถ ก ต อ ง ส ว ย ง า ม แ ล ะ ไ ด ข น า ด ต า ม ท

ตองการ

รปท 6 แสด งสภ าพแวดลอ มของเวบไ ซ ต

Web Browser Cache

Internet

11




การแสดงผลบนหนาจอหลายขนาด ในก ารออกแบ บ เวบ ไซ ตน น ผออกแบบ เวบ ไซ ตไมสาม า ร ถ ท ร า บ ไ ด ว า ผใ ช เ ข า ถ ง เ ว บ ไ ซ ต

ด ว ย อ ป ก ร ณ ช น ด ใ ด ข น า ด ห น า จ อ เ ท า ใ ด ต ว อ ย า ง เ ช น ก า ร ใ ช จ อ ค อ ม พ ว เ ต อ ร ส ว น บ ค ค ล

(Personnel Computer: PC) ผใ ช ส า ม า ร ถ ป ร บ ข น า ด ข อ ง ห น า จ อ ไ ด (Screen Resolution) โ อ ย อ า จ

ก า ห น ด เ ป น 600x800 px ห ร อ จ อ ป ร ะ เ ภ ท ไ ว ด ส ก ร น 1 3 6 6x768 px เ ป น ต น แ ล ะ ใ น ส ว น ข อ ง

หนาจอบนอป กรณเคล อนท ผใชไมสามารถป รบขนาด ข อ ง ห น า จ อ ไ ด แ ต อ ป ก ร ณ เ ค ล อ น ท แ ต ล ะ

ย ห อ ก ม ข น า ด ห น า จ อ ท แ ต ก ต า ง ก น ต า ม ร น ท ผ ล ต เ ช น ข น า ด ห น า จ อ ข อ ง iPhone แ ล ะ iPad เ ป น

ตน

1. การแสดงผลบนหนาจอคอมพวเตอรสวนบคคล (Desktop and Laptop

Displays) เ ป น อ ป ก ร ณ ก า ร แ ส ด ง ผ ล ห น า เ ว บ ไ ซ ต ใ น ย ค แ ร ก จ น ถ ง ป จ จ บ น น ก อ อ ก แ บ บ เ ว บ ก ม

ก า ร ป ร บ ต ว ต า ม ข น า ด ข อ ง จ อ แ ส ด ง ผ ล อ ย ต ล อ ด เ ว ล า เ พ อ อ อ ก แ บ บ เ ว บ ใ ห ไ ด ข น า ด ท ด ท ส ด ท

สามารถเ ขากนไ ดกบ ท กๆ หนาจอ

ตารางท 3 แสดงขนาดของหนาจอคอมพวเตอรสวนบ คคลจ าแนกต ามป ค.ศ.

ท มา: http://www.w3schools.com/browsers/browsers_display.asp

ตารางท 4 แสดงความลกของสบน หนาจอคอมพวเตอรสวนบ คคลจ าแนกต ามป ค.ศ.

ท มา: http://www.w3schools.com/browsers/browsers_display.asp

ป ค.ศ. / ขนาดจอ 1920x1080 1366x768 1280x1024 1280x800 1024x768 800x600

2015 16% 33% 7% 5% 4% 0.30%

2014 13% 31% 8% 7% 6% 0.50%

2013 11% 25% 10% 8% 9% 0.50%

2012 8% 19% 12% 11% 13% 1%

2011 6% 15% 14% 14% 0%

2010 2% 18% 17% 20% 1%

2009 36% 4%

ป ค.ศ. / จ านวนส 16,777,216 65,536 256

2015 99% 0.50% 0.50%

2014 98.50% 1% 0.50%

2013 98% 1.50% 0.50%

2012 98% 2% 0%

2011 97% 3% 0%

2010 97% 3% 0%

2009 95% 4% 1%

12




ใ น อ ด ต ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต เ พ อ ใ ห แ ส ด ง ผ ล ไ ด ท ก ห น า จ อ น น เ ป น เ พ ย ง ก า ร ก า ห น ด

ข น า ด เ ว บ เ พ จ ใ ห ค ง ท ห ร อ ข น า ด ต า ย ต ว (Fixed Design) แ ล ะ ท า ใ ห ส ว น ข อ ง เ ว บ เ พ จ แ ส ด ง อ ย ใ น

ต า แ ห น ง ก ล า ง ห น า จ อ ก ร ณ ท ห น า จ อ ม ค ว า ม ก ว า ง ม า ก ห ร อ จ อ ไ ว ด ส ก ร น (Widescreen Monitor)

จ ะ ท า ใ ห เ ก ด พ น ท เ ป ล า ด า น ซ า ย แ ล ะ ข ว า แ ล ะ อ ก ษ ร ม ข น า ด เ ล ก เ ก น ไ ป ไ ม เ ห ม า ะ ส ม ก บ ข น า ด

ห น า จ อ แ ล ะ ใ น บ า ง ค ร ง อ า จ แ ส ด ง ผ ล ข อ ม ล ข า ด ห า ย ไ ป บ า ง ส ว น ส ง ผ ล ก ร ะ ท บ ต อ ก า ร แ ส ด ง ผ ล

ขอมลใหแกผใชเวบ ได

รปท 7 แสดง หน าเวบ เพจท กาหนดขน าดคงท บนหน าจ อตางข นาดก น

ป จ จ บ น ส า ม า ร ถ แ ก ไ ข ป ญ ห า เ ห ล า น ไ ด โ ด ย ก า ร ใ ช ค ว า ม ส า ม า ร ถ ข อ ง ม เ ด ย ค ว ร (Media

Queries) ท ก า ห น ด ใ น ส ไ ต ล ช ท (Cascading Style Sheet: CSS) ซ ง ท า ใ ห ส า ม า ร ถ ก า ห น ด ก ฎ ก า ร

แ ส ด ง ผ ล ข อ ง ห น า จ อ แ ต ล ะ ข น า ด ไ ด ร ว ม ถ ง ก า ร ก า ห น ด ล ก ษ ณ ะ ข อ ง ห น า เ ว บ เ พ จ ใ น ข น ต อ น ข อ ง

การพมพได เชนกน

ม เ ด ย ค ว ร (Media Queries) น น ม า จ า ก ค า ว า “ส อ (Media)” แ ล ะ ค า ว า “ส อ บ ถ า ม

(Queries)” จงมความหมายถ ง การสอบ ถามส อ ห ร อ อ ป ก ร ณ น น ๆ ว า ม ข น า ด ห น า จ อ เ ท า ไ ห ร อ ย

ในแก นใด

ก า ร แ ส ด ง ผ ล ห น า เ ว บ ไ ซ ต โ ด ย ก า ร ใ ช ค ว า ม ส า ม า ร ถ ข อ ง ม เ ด ย ค ว ร (Media Queries) น น

เ ป น ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต เ ช ง ย ด ห ย น (Flexible Design) จ ะ ช ว ย ใ ห ผ อ อ ก แ บ บ เ ว บ ส า ม า ร ถ

ก า ห น ด ก า ร แ ส ด ง ผ ล ห น า เ ว บ ต า ม ล ก ษ ณ ะ ข อ ง อ ป ก ร ณ ไ ด (Device Characteristics) เ ช น ก ร ณ ท

ผ ใ ช เ ร ย ก ห น า เ ว บ ไ ซ ต จ า ก เ ค ร อ ง ค อ ม พ ว เ ต อ ร ส ว น บ ค ค ล จ ะ แ ส ด ง ห น า เ ว บ ไ ซ ต ท เ ห ม า ะ ส ม ก บ

ขนาดจอภาพ แตเมอผใชยอขนาดของเวบ เบ ราวเซ อ ร ห ร อ เ ร ย ก ห น า เ ว บ ไ ซ ต จ า ก ส ม า ร ท โ ฟ น ซ ง

มขนาดหนาจอทเลก กว าและแกนก ารแสดงผลเป น แ น ว ต ง (Vertical Orientation) ก จ ะ ม ก า ร ป ร บ

ห น า เ ว บ ไ ซ ต ใ ห ม ข น า ด ก า ร จ ด เ ร ย ง เ ค า ร า ง (Layout) ห ร อ ก า ร อ า พ ร า ง บ า ง ส ว น ท ไ ม ส า ค ญ ไ ว

เพอใหเหมาะสมกบ พ นทหนาจอภาพสมารท โฟ น

WEB PAGE WEB PAGE

ขนาดจอภาพ 800 x 600 px ขนาดจอภาพ 1366 x 768 px

เกดพนทเปลา (Space)

13




รปท 8 แสดง หน าเวบ เพจท ไดรบก ารออกแบ บ เชงยดห ยน (Flexible Design)

ท มา: https://www.nasa.gov/

2. อปกรณเคลอนท (Mobile Devices) เ ป น อ ป ก ร ณ ท ม จ อ ภ า พ แ ส ด ง ผ ล แ ต ก ต า ง

จากจอภาพคอมพวเ ตอรสวนบ คคล (PC) และป จจบ นจอภาพอป กรณเคล อนท กเป น ท น ย ม ใ ช ใ น

ก า ร เ ร ย ก ค น ห น า เ ว บ ไ ซ ต เ น อ ง จ า ก ค ว า ม ส ะ ด ว ก แ ล ะ ร ว ด เ ร ว ใ น ก า ร ใ ช ง า น จ อ ภ า พ อ ป ก ร ณ

เ ค ล อ น ท ใ น ป จ จ บ น เ ช น จ อ ภ า พ ข อ ง ส ม า ร ท โ ฟ น (Smartphone) จ อ ภ า พ แ ท บ เ ล ต (Tablet)

จอภาพแทบ เลต พซ (Tablet PC) ส ม า ร ท ว อ ช (Smart Watch) เ ป น ต น ซ ง อ ป ก ร ณ แ ต ล ะ ช น ด แ ล ะ

แ ต ล ะ ย ห อ ก ม ข น า ด จ อ ร ป ท แ ต ก ต า ง ก น ต า ม ล ก ษ ณ ะ ก า ร ใ ช ป ร ะ โ ย ช น ข อ ง อ ป ก ร ณ น อ ก จ า ก น

เ ท ค โ น โ ล ย ท ใ ช ผ ล ต จ อ ภ า พ ก ม ค ว า ม แ ต ก ต า ง ก น เ ช น จ อ ภ า พ ไ อ พ เ อ ส (In-Plane Switching:

IPS) ห ร อ จ อ ภ า พ แ บ บ แ อ ล อ ด (Active-Matrix Organic Light-Emitting Diode: AMOLED) เ ป น

ตน

ด ง น น เ ช น เ ด ย ว ก บ ก า ร แ ส ด ง ผ ล บ น จ อ ภ า พ ค อ ม พ ว เ ต อ ร ส ว น บ ค ค ล น ก อ อ ก แ บ บ

เ ว บ ไ ซ ต จ ะ ต อ ง ค า น ง ถ ง ค ว า ม แ ต ก ต า ง ข อ ง ข น า ด จ อ ภ า พ แ ล ะ ค ว า ม ส า ม า ร ถ ใ น ก า ร ป ร บ เ ป ล ย น

แ ก น ข อ ง อ ป ก ร ณ เ พ อ ใ ช ค ว า ม ส า ม า ร ถ ข อ ง ม เ ด ย ค ว ร (Media Queries) ใ น ก า ร แ ส ด ง ผ ล ใ ห

เหมาะสมกบ จอภาพและแกนของอป กรณน นๆ ไดอยางเหมาะสมมา ก ข น น อ ก จ า ก น ย ง ส า ม า ร ถ

ก า ห น ด ก ล ย ท ธ ใ น ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ไ ด 2 ล ก ษ ณ ะ ค อ ก ล ย ท ธ ใ น ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต

14




ป ร ะ เ ภ ท โ ม บ า ย ไ ซ ต (Mobile Site) แ ย ก อ อ ก จ า ก เ ว บ ไ ซ ต ป ร ะ เ ภ ท ท ว ไ ป (Desktop Site) ห ร อ ก ล

ยท ธใ นการออกแบบ เวบ ไซ ตประเภทเ วบ เชงตอบสนอง (Responsive Web)

รปท 9 แสด งขน าดจอ ภาพ อป กรณเคล อนท จาแ นกตา มการใชง าน (มถน ายน ค .ศ. 2 015)

ท มา: http://www.ericsson.com/res/docs/2015/ericsson-mobility-report-june-2015.pdf

รปท 10 แสดงข นาด จอภ า พอป กรณและคว ามละเอย ดของจอ ภาพ

ท มา: 2015 Cengage Learning

3. โมบายไซต (Mobile Site) ค อ ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ป ร ะ เ ภ ท ห น ง ท เ น น ก า ร

อ อ ก แ บ บ เ ว บ ใ ห เ ข า ก น ไ ด เ ฉ พ า ะ ก บ อ ป ก ร ณ เ ค ล อ น ท ซ ง ม ล ก ษ ณ ะ ค อ น ข า ง เ ร ย บ ง า ย ม ข น า ด

อกษ รใหญ กรา ฟ ก ถ ก ล ด ค ว า ม ล ะ เ อ ย ด ล ง เ ห ล อ ไ ว เ ฉ พ า ะ ข อ ม ล ท ส า ค ญ เ ท า น น ด ง น น ก ล ย ท ธ

ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ป ร ะ เ ภ ท โ ม บ า ย ไ ซ ต (Mobile Site) แ ย ก อ อ ก จ า ก เ ว บ ไ ซ ต ป ร ะ เ ภ ท ท ว ไ ป

(Desktop Site) จ ะ ท า ใ ห ผ อ อ ก แ บ บ เ ว บ จ ะ ต อ ง แ ก ไ ข เ ว บ ไ ซ ต ท ง ใ น ส ว น ข อ ง โ ม บ า ย ไ ซ ต แ ล ะ

เ ว บ ไ ซ ต ป ร ะ เ ภ ท ท ว ไ ป เ ส ม อ ท า ใ ห เ ส ย เ ว ล า ใ น ก า ร จ ด ก า ร เ น อ ห า แ ล ะ ท ร พ ย า ก ร ใ น ก า ร ด แ ล

เวบ ไซ ตมากข น

15




รปท 11 แสดงก ารเป รยบเ ท ยบ การแสดงผลเวบ ไซ ตร ะหวางเดสก ท อป ไซ ตกบ โมบ ายไ ซ ต

ท มา: https://m.facebook.com/

รปท 12 แสดงตวเลอก มม ม องการแสด งเน อห า

ท มา: https://www.w3.org/standards/webdesign/

4. เวบเชงตอบสนอง (Responsive Web) ค อ ก า ร อ อ ก แ บ บ เ ว บ ใ ห ส า ม า ร ถ

ป ร บ เ ป ล ย น เ ค า ร า ง ใ ห เ ห ม า ะ ส ม ก บ ข น า ด ข อ ง จ อ ภ า พ แ ส ด ง ผ ล โ ด ย เ ว บ เ ช ง ต อ บ ส น อ ง ส า ม า ร ถ

แ ส ด ง ร า ย ล ะ เ อ ย ด เ น อ ห า ภ า พ ก ร า ฟ ก ต า ง ๆ ม ป ร ะ ส ท ธ ภ า พ ด ก ว า โ ม บ า ย ไ ซ ต ซ ง ป จ จ บ น น ก

อ อ ก แ บ บ เ ว บ ไ ซ ต ม ง เ น น ท จ ะ ใ ช ก ล ย ท ธ ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ป ร ะ เ ภ ท เ ว บ เ ช ง ต อ บ ส น อ ง เ พ อ

Desktop Site Mobile Site

มการใหผใ ชเลอกมมมองการแสดงเน อหาได 3

ลกษณะค อ ล ก ษ ณ ะ ท ว ไ ป (Desktop) ล ก ษ ณ ะ

เ ข า ก บ อ ป ก ร ณ เ ค ล อ น ท (Mobile) แ ล ะ

ลกษณะมมมองเหมอนพมพ (Print)

16




แสดงผลเวบ ไซ ต ไ ด อ ย า ง เ ห ม า ะ ส ม โ ด ย ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต เ ช ง ต อ บ ส น อ ง จ ะ ใ ช ค ว า ม ส า ม า ร ถ

ข อ ง ม เ ด ย ค ว ร (Media Queries) ท ก า ห น ด ใ น ส ไ ต ล ช ท (CSS) ร ว ม ถ ง ก า ร โ ป ร แ ก ร ม เ พ ม เ ต ม

ค ว า ม ส า ม า ร ถ ด ว ย ภ า ษ า จ า ว า ส ค ร ป ต (Java Script) แ ล ะ ม า ต ร ฐ า น แ บ บ ว ต ถ ใ น เ อ ก ส า ร

(Document Object Model: DOM) เพอทาใหเวบ เชงตอบสนองมคว า ม ส ม บ ร ณ แ ล ะ ม ค ว า ม ฉ ล า ด

ในก ารเลอกแสดงผลหรอจดเรยงเคารางใหเหมาะสมกบ ขน า ด จ อ ภ า พ ข อ ง อ ป ก ร ณ ต า ง ๆ ไ ด โ ด ย

ก า ร อ อ ก แ บ บ เ พ ย ง ค ร ง เ ด ย ว ท า ใ ห ป ร ะ ห ย ด เ ว ล า แ ล ะ ม ป ร ะ ส ท ธ ภ า พ ส ง ร ว ม ถ ง ม ค ว า ม ย ด ห ย น

กบ อป กรณท จะเก ดข นในอนาคตดวย

รปท 13 แสดงกา รออกแบ บ เวบ ไซ ตประเภทเ วบ เชงตอบสนอง

ท มา: http://www.apple.com/

5. การจดการปญหาขนาดของจอภาพแสดงผล (Solving the Screen

Resolution Dilemma) เป นสงท ผออกแบบ เวบ ตองใหความส า ค ญ โ ด ย ก า ร อ อ ก แ บ บ เ ว บ ม เ ค า

ร า ง เ ก ย ว ก บ ก า ร จ ด ก า ร ข น า ด ข อ ง จ อ ภ า พ อ ย 2 เ ค า ร า ง ค อ แ บ บ ค ง ท ห ร อ แ บ บ ต า ย ต ว (Fixed)

แ ล ะ แ บ บ ย ด ห ย น (Flexible) ซ ง ป จ จ บ น เ ว บ ไ ซ ต ท ว ๆ ไ ป จ ะ ใ ช ก า ร อ อ ก แ บ บ ป ร ะ เ ภ ท ค ง ท

เ น อ ง จ า ก ค ว า ม ง า ย ต อ ก า ร อ อ ก แ บ บ แ ล ะ พ ฒ น า แ ต ม ข อ จ า ก ด ใ น ก า ร แ ส ด ง ผ ล บ น อ ป ก ร ณ ท

หลากหลาย

การออกแบ บ เวบ ไซ ตประเ ภ ท ค ง ท น น จ า เ ป น ต อ ง พ ง ผใ ช ใ น ก า ร ส า ย ห น า เ ว บ (Pan) ก า ร

ข ย า ย ห น า เ ว บ (Zoom) แ ล ะ ก า ร เ ล อ น (Scroll) เ พ อ ป ร บ ข น า ด ข อ ง เ น อ ห า ใ ห เ ห ม า ะ ส า ห ร บ ก า ร

อ า น ห ร อ ร บ ส า ร ส ว น ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต แ บ บ ย ด ห ย น น น จ ะ ช ว ย ใ ห เ ว บ ไ ซ ต ส า ม า ร ถ แ ส ด ง

สมารทโฟนในแกนแนวตง

(Vertical Orientation)

สมารทโฟนในแกนแนวนอน

(Horizontal Orientation)

17




ผ ล ไ ด อ ย า ง เ ห ม า ะ ส ม บ น อ ป ก ร ณ ท ห ล า ก ห ล า ย ไ ด โ ด ย ก า ร อ อ ก แ บ บ ท ง ส อ ง ป ร ะ เ ภ ท น น ม ข อ ด

ขอเสยดงน

5.1 ขอดของการออกแบบ เวบ ไซ ตแบ บ ยดหยน

1) มมมองของเวบ ไซ ตเหมาะสมกบ อป กรณของผใช

2) ล ด ก า ร เ ล อ น ห ร อ ส า ย ห น า เ ว บ ใ น แ น ว น อ น เ พ อ อ า น ห น า เ ว บ ไ ซ ต ท ล น เ ว บ

เบ ราวเซ อร

3) มความยดหยนในก ารแสดงผลบ นหลากหลายอป กรณ

4) อกษ รและเคารางเวบ มการปรบ ขนาดใ หเหมาะสมกบ ห นาจ อของอปก รณ

5) ส า ม า ร ถ ป ร บ ต า แ ห น ง แ ล ะ ซ อ น ห ร อ แ ส ด ง ผ ล บ า ง อ ง ค ป ร ะ ก อ บ ข อ ง ห น า เ ว บ ไ ซ ต

ใหเขากบ ขนาดหรอแกนของจอภาพไ ด

5.2 ขอดของการออกแบบ เวบ ไซ ตแบ บ ยดหรอแบบ ตายตว

1) ผออกแบ บ เวบ ไซ ตจะเป นผกาหนดมมมองใหแกผใชแบบ เดยว เท าน น

2) สามารถก าหนดขนาดอก ษ รคงทไมแปรผนตามขน าดของ หนา จอ แสด งผล

หลกการสรางมมมองและความรสกทมตอเวบไซต 1. ความสมดลระหวางการออกแบบและเนอหา (Balance Design and Content)

เ ป น ส ว น ส า ค ญ ท ผอ อ ก แ บ บ แ ล ะ พ ฒ น า เ ว บ ไ ซ ต จ ะ ต อ ง ค า น ง ถ ง เ น อ ห า (Content) ท จ ะ น า เ ส น อ

แ ล ะ ค า น ง ถ ง ค ว า ม ต อ ง ก า ร ข อ ง ผ ใ ช เ ว บ ไ ซ ต (Need) ซ ง น า ไ ป ส แ น ว ท า ง ใ น ก า ร ต ด ส น ใ จ ท จ ะ

อ อ ก แ บ บ เ ว บ ไ ซ ต ไ ป ใ น ม ม ม อ ง ห ร อ ล ก ษ ณ ะ ใ ด ใ น ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต น น จ ะ ป ร ะ ก อ บ ไ ป ด ว ย

ท มงานหลายค น โดยใ นแตละคนจะม ม ม ม อ ง แ ล ะ ค ว า ม เ ช อ ม น ใ น ค ว า ม ค ด ข อ ง ต น เ อ ง เ ป น ส า ค ญ

ด ง น น ก า ร ห า ส ม ด ล ร ะ ห ว า ง ก า ร อ อ ก แ บ บ แ ล ะ เ น อ ห า จ ง จ า เ ป น ต อ ง ป ร ะ ช ม ผ ม ส ว น ไ ด ส ว น เ ส ย

เพอการมสวนรวมในก ารออกแบ บ เวบ ไซ ต

ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ค ว ร ส ง เ ส ร ม เ น อ ห า แ ล ะ ส น บ ส น น ผ อ า น ก า ร อ อ ก แ บ บ เ น อ ห า

ข อ ม ล บ น เ ว บ ค ว ร จ ะ แ บ ง อ อ ก ห ร อ จ ด ก ล ม อ ย า ง ม เ ห ต ผ ล แ ล ะ ม โ ค ร ง ส ร า ง ร ว ม ถ ง ก า ร อ อ ก แ บ บ

ร ะ บ บ น า ท า ง เ น อ ห า บ น เ ว บ ใ ห ช ด เ จ น แ ล ะ เ ข า ใ จ ไ ด ง า ย ผ อ อ ก แ บ บ เ ว บ ใ น ป จ จ บ น ม ก จ ะ เ ล อ ก ใ ช

ก ารออก แบบ เวบ ท เรยบ งายและแสดงเ น อ ห า อ ย า ง ต ร ง ไ ป ต ร ง ม า ท า ใ ห ง า ย ต อ ก า ร เ ข า ถ ง แ ล ะ ไ ม

ม ค ว า ม จ า เ ป น ท จ ะ ต อ ง อ อ ก แ บ บ เ ว บ ใ ห ม ค ว า ม ซ บ ซ อ น ห ร อ ใ ช เ ท ค โ น โ ล ย ท ไ ม ส อ ด ค ล อ ง ก บ

ป ระส บ การณผใช

ด ง น น ค ว า ม ส ม ด ล ร ะ ห ว า ง ก า ร อ อ ก แ บ บ แ ล ะ เ น อ ห า เ ป น ส ว น ส า ค ญ ท ต อ ง ว เ ค ร า ะ ห

แ ล ะ แ ล ก เ ป ล ย น ป ร ะ ส บ ก า ร ณ ร ะ ห ว า ง ท ม พ ฒ น า ล ก ค า แ ล ะ ผ ใ ช อ ย า ง ส ม า เ ส ม อ เ พ อ ใ ห เ ก ด

ความสมดลระหวางการออกแบบ และเน อห าบ นเวบ ไซ ตนนเอง

18




2. วางแผนเพอความสะดวกในการเขาถงขอมล (Plan for Easy Access to

Information) เ ป น ป จ จ ย ท ส า ค ญ แ ล ะ ม อ ท ธ พ ล ต อ ค ว า ม ส า เ ร จ ข อ ง เ ว บ ไ ซ ต เ พ ร า ะ เ ป น ก า ร

กาหนดวธการท ผใชสามารถเ ขาถงเน อ ห า เ ว บ ไ ด อ ย า ง ง า ย ด า ย เ ป า ห ม า ย ข อ ง ว า ง แ ผ น เ พ อ ค ว า ม

ส ะ ด ว ก ใ น ก า ร เ ข า ถ ง ข อ ม ล ค อ ก า ร จ ด ร ะ เ บ ย บ เ น อ ห า ข อ ง เ ว บ ไ ซ ต ก า ร น า เ ส น อ ท เ ข า ใ จ ไ ด ง า ย

และมเซต การนาท างท เหมาะสมทาใหผใ ช ไ ม ต อ ง เ ส ย เ ว ล า ใ น ก า ร ต ร ว จ ด ส า ร ว จ ก า ร เ ข า ถ ง ข อ ม ล

บ นหนาเวบ ไซ ต (Quests for Information)

ผเขาชมเวบ ไซ ต อ า จ เ ร ย ก ด แ บ บ ส ม ห ร อ ม อ ง ห า ข อ ม ล ท เ ฉ พ า ะ เ จ า ะ จ ง โ ด ย ผใ ช ม ก จ ะ

ม า ถ ง ท ห น า เ ว บ ไ ซ ต แ ล ะ ม อ ง ห า ข อ ม ล ท อ ย ใ น ร ะ ด บ ต า ก ว า ล า ด บ ช น ข อ ง ข อ ม ล ท ป ร า ก ฎ ใ น ห น า

แรก เชน ขอมลการตดตอ การสนบ ส น น ผ ล ต ภ ณ ฑ ห ร อ ไ ฟ ล ท ต อ ง ก า ร ท จ ะ ด า ว น โ ห ล ด เ ป น ต น

ซ ง จ ะ เ ห น ไ ด ว า ข อ ม ล เ ห ล า น จ ะ ไ ม อ ย ใ น ห น า เ ว บ เ พ จ แ ร ก แ ต จ ะ ต อ ง ค ล ก ล ง ค เ พ อ เ ช อ ม โ ย ง ไ ป ย ง

หนาเพจถ ดไ ป

ดงน นผออกแบบ เวบ จะตองคาดการณและวางแผนเสน ท า ง ท ผใ ช ม แ น ว โ น ม จ ะ เ ข า ถ ง

ขอมลทอยในค วามตองการมากท สด โ ด ย ใ ห ม ก า ร เ ช อ ม โ ย ง โ ด ย ต ร ง ไ ป ย ง พ น ท ห ร อ ห น า เ ว บ น น ๆ

ห ร อ ม ก า ร น า เ ส น อ ช อ ง ก า ร ค น ห า แ ล ะ แ ผ น ท เ ว บ ไ ซ ต เ พ อ ค น ห า เ น อ ห า ท ผใ ช ต อ ง ก า ร น อ ก จ า ก น

ก า ร ส อ บ ถ า ม ผ ด แ ล ร ะ บ บ แ ม ข า ย เ พ อ ต ร ว จ ส อ บ ว า ห น า เ ว บ เ พ จ ใ ด ม ค ว า ม ต อ ง ก า ร ส ง ส ด ก

ส า ม า ร ถ น า ไ ป ใ ช อ อ ก แ บ บ ก า ร น า ท า ง เ ว บ ท า ใ ห ผ ใ ช ส า ม า ร ถ เ ข า ถ ง ข อ ม ล ไ ด ง า ย แ ล ะ ม

ป ระสทธ ภาพ

3. วางแผนเพอการน าเสนอขอมลทชดเจน (Plan for Clear Presentation of

Information) ถ ง แ ม ว า พ ฒ น า ก า ร ข อ ง เ ท ค โ น โ ล ย แ ส ด ง ผ ล จ อ ภ า พ จ ะ ม ค ว า ม ร ด ห น า ส า ม า ร ถ

แ ส ด ง ข อ ม ล ไ ด อ ย า ง ค ม ช ด แ ต ก ย ง ค ง ม ป จ จ ย ท ส ง ผ ล ก ร ะ ท บ ต อ ก า ร อ า น ข อ ม ล น น ค อ ป จ จ ย

ท า ง ด า น ส ภ า พ แ ว ด ล อ ม เ ช น แ ส ง จ า โ ด ย ร อ บ ร ะ ย ะ ห า ง ร ะ ห ว า ง ส า ย ต า แ ล ะ จ อ ภ า พ เ ป น ต น ซ ง

ส ง ผ ล ก ร ะ ท บ ต อ ก า ร อ า น ข อ ง ผ ใ ช เ ว บ ต ว อ ย า ง เ ช น เ ม อ ผ ใ ช เ ข า ถ ง เ ว บ โ ด ย ก า ร ใ ช จ อ ภ า พ จ า ก

อป กรณเคล อนท จะเก ดระยะหางระหว า ง ส า ย ต า ก บ ร ะ ย ะ ใ น ก า ร ถ อ อ ป ก ร ณ ซ ง จ ะ เ ก ด ก า ร ส า ย

ไป มาไมคงท และในบ างสภาวะไมสามารถค วบ คมควา ม ค ง ท ข อ ง ก า ร ถ อ อ ป ก ร ณ ห ร อ ก า ร ข ย บ

ร า ง ก า ย ไ ป ม า ร ะ ห ว า ง ก า ร อ า น เ ว บ ไ ซ ต ด ง น น ก า ร ว า ง แ ผ น เ พ อ ก า ร น า เ ส น อ ข อ ม ล ท ช ด เ จ น เ ป น

สวนสาคญท ทา ใ ห ผใ ช เ ก ด ป ร ะ ส บ ก า ร ณ ท ด แ ล ะ ส า ม า ร ถ จ ด จ อ ก บ ข อ ม ล ท ป ร า ก ฎ บ น เ ว บ ไ ซ ต ไ ด

ไ ม ว า จ ะ เ ข า ถ ง ด ว ย อ ป ก ร ณ ช น ด ใ ด ห ร อ เ ก ด ก า ร ข ย บ ร า ง ก า ย ร ะ ห ว า ง ก า ร อ า น ข อ ม ล ซ ง น ก

ออกแบ บ เวบ ไซ ตจะตอง ใหความสาคญก บ การออก แบบ ความชดเจน ใหเก ดกบ เวบ ไซ ต

เ ว บ ไ ซ ต จ า น ว น ม า ก ป ร ะ ส บ ค ว า ม ล ม เ ห ล ว ใ น ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต เ น อ ง จ า ก ข า ด

ค ว า ม ใ ส ใ จ แ ล ะ ม ค ว า ม ไ ม เ ข า ใ จ เ ก ย ว ก บ ค ว า ม ช ด เ จ น ข อ ง ก า ร น า เ ส น อ ข อ ม ล อ ย า ง ถ อ ง แ ท เ ช น

ก า ร ใ ช ล ก ษ ณ ะ อ ก ษ ร (Font) ท ห ล า ก ห ล า ย ม า ก เ ก น ไ ป ก า ร ใ ช ส ก บ อ ก ษ ร โ ด ย ไ ม ค า น ง ถ ง

ค ว า ม ห ม า ย ส พ น ห ล ง (Background) ท ไ ม ส ง ผ ล ใ ห อ ก ษ ร ม ค ว า ม เ ด น แ ล ะ ก า ร เ ส น อ ข อ ม ล ด ว ย

19




อ ก ษ ร ท ม ป ร ะ โ ย ค ย า ว เ ก น ไ ป โ ด ย ไ ม ค า น ง ถ ง จ ด ห ย ด (Breakpoint) ใ น ก า ร น า เ ส น อ ข อ ม ล ท า ใ ห

ผอานเก ดความสบ สนและอาจเกดท ศนคตท ไมดตอเวบ ไซ ตได

การใชลก ษ ณะอกษ ร สของ อ ก ษ ร พ น ห ล ง ท ล ง ต ว ก า ร แ บ ง ข อ ค ว า ม ใ ห เ ป น ส ด ส ว น ท

ช ด เ จ น เ ห ม า ะ ส ม ร ว ม ถ ง ก า ร ใ ช ป ร ะ โ ย ช น จ า ก พ น ท ว า ง ส ข า ว (White Space) ส า ห ร บ ก า ร แ ย ก

เ น อ ห า ห ร อ จ ด โ ค ร ง ส ร า ง บ น ห น า เ ว บ ไ ซ ต ก จ ะ ช ว ย ใ ห ก า ร อ า น ข อ ม ล ม ค ว า ม ส ะ ด ว ก ร ว ด เ ร ว ม า ก

ข น

ผ อ อ ก แ บ บ เ ว บ ไ ซ ต จ ะ ต อ ง ค า น ง ถ ง ค ว า ม แ ต ก ต า ง ร ะ ห ว า ง บ ค ค ล ผเ ข า ช ม เ ว บ ไ ซ ต แ ต

ล ะ ค น ม ป ร ะ ส บ ก า ร ณ แ ล ะ อ ป น ส ย (Characterologic Pattern) ใ น ก า ร อ า น แ ต ก ต า ง ก น แ ล ะ เ ม อ

เ ป ร ย บ เ ท ย บ ก า ร อ า น ข อ ม ล ใ น ก ร ะ ด า ษ (Hard Copy) ก บ ก า ร อ า น ข อ ม ล แ บ บ อ อ น ไ ล น (Soft

Copy) เ ช น ห น า เ ว บ ไ ซ ต เ ป น ต น พ บ ว า ผ อ า น บ น ส อ อ อ น ไ ล น จ ะ ม พ ฤ ต ก ร ร ม ก า ร อ า น ไ ม ม า ก

(Read Less) ห ร อ อ า น แ บ บ ค ร า ว (Scanning Reading) แ ล ะ ม ก า ร เ ล อ น ผ า น ข อ ค ว า ม อ ย า ง

รวดเรว (Quick Scrolling) นอกจากน การแบงแยก หวขอทชดเจน จะช ว ย ใ ห ผอ า น ส า ม า ร ถ ส ง เ ก ต

หวขอทตองการและหยดก ารเลอนผานไดอยางท นเวล า

รปท 14 แ สดงตวอย างเวบ ไซ ตทออกแบบ ตาม

หลกก ารสร างมม มอง และค วามรสกท มตอเวบ ไซ ต

ท มา: http://www.pewresearch.org/

เค รอง ม อค นห า

(Search Tool)

เม นแ ละก ารนาท าง

(Menu and Navigation)

ใชพ นท วาง เพอแ ยก

เน อห าให ไดสด สวน

(Active White Space)

เลอกใชลก ษณะอกษ รท

ชดเ จน ม การจาแนก ส

อกษ รเพอสอถง ลง ค

20




การออกแบบเวบไซตเชงเอกภาพ ใ น ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต เ ช ง เ อ ก ภ า พ (Unified Site Design) จ ะ ต อ ง ท า ก า ร ว า ง แ ผ น

เ ก ย ว ก บ ล ก ษ ณ ะ ข อ ง เ ว บ ไ ซ ต (Themes) แ ล ะ โ ค ร ง ส ร า ง ข อ ง เ ว บ ไ ซ ต (Structure) ใ ห เ ป น ไ ป ใ น

แ น ว ท า ง เ ด ย ว ก น ใ น ท ก ๆ เ ว บ เ พ จ โ ด ย ใ ช ส ล ก ษ ณ ะ อ ก ษ ร แ ล ะ โ ค ร ง ร า ง เ ว บ ผ ส ม ผ ส า น ก น เ พ อ

สอสารและถายทอด (Convey) ใหผใชเวบ ไซ ตเกดความประทบ ใจและจดจาเวบ ไซ ตได

1. วางแผนเพอใหเก ดความเป นเอก ภาพ ท า ง ด า น ก า ร เ ป ล ย น ถ า ย ห น า เ ว บ (Plan Smooth

Transitions) ใ น ก า ร เ ป ล ย น ถ า ย ห น า เ ว บ ห ม า ย ถ ง ก า ร ท ผใ ช ค ล ก ล ง ค ห ร อ เ ม น เ พ อ ไ ป ย ง ห น า เ ว บ

เ พ จ ถ ด ไ ป ซ ง ใ น ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต เ ช ง เ อ ก ภ า พ น น จ า เ ป น ต อ ง ค า น ง ถ ง ก า ร เ ป ล ย น ถ า ย ห น า

เ ว บ ใ ห เ ก ด ค ว า ม ร า บ ร น แ ล ะ ไ ม ส ร า ง ค ว า ม ส บ ส น ใ ห แ ก ผ ใ ช โ ด น ม ห ล ก ก า ร ใ น ก า ร อ อ ก แ บ บ ก า ร

เป ลยนถายหนาเวบ ดงน

1) เ ล อ ก ใ ช อ ง ค ป ร ะ ก อ บ แ ล ะ ภ า พ ล ก ษ ณ เ ด ย ว ก น ท ง เ ว บ ไ ซ ต เ ช น ส ข อ ง อ ก ษ ร

ส ญ ล ก ษ ณ ส พ น ห ล ง เ ส น ส ข อ ง ก ร อ บ ข อ ค ว า ม ค ว า ม ห น า บ า ง ข อ ง ก ร อ บ ข อ ค ว า ม เ ป น ต น

นอกจากน ยงเป นประโย ชนในการออก แ บ บ เ ว บ เ พ จ ใ น ร ะ ด บ ช น ถ ด ไ ป ไ ด อ ย า ง ม เ อ ก ภ า พ (Unified

Hierarchy)

2) จ ด ต า แ ห น ง ส ว น ป ร ะ ก อ บ ใ น ก า ร น า ท า ง (Navigation) ใ ห เ ห น ไ ด ช ด (Obvious

Section) แ ล ะ ใ ห ม ล ก ษ ณ ะ เ ด ย ว ก น ท ง เ ว บ ไ ซ ต (Keep Consistent) โ ด ย ผ ใ ช จ ะ เ ก ด ก า ร ป ร บ

ป ร ะ ส บ ก า ร ณ เ ก ย ว ก บ ท ศ ท า ง ใ น ก า ร ท อ ง เ ว บ ไ ซ ต ไ ด อ ย า ง ร ว ด เ ร ว แ ล ะ ไ ม เ ก ด ค ว า ม ส บ ส น ใ น ก า ร

เขาถงขอมล

3) ห ล ก เ ล ย ง ก า ร ใ ช ก ร า ฟ ก ท ซ บ ซ อ น ห ร อ ใ ช ก ร า ฟ ก เ ค ล อ น ไ ห ว ท ฟ ม เ ฟ อ ย เ น อ ง จ า ก

บ นทอนป ระสบ การณผใชเกยวก บ การรจาท ศท างการนาท างในเวบ ไซ ต

21




รปท 15 แสดงสวนป ร ะกอ บ ของการน าท าง ร ะดบ ตนใ นเวบ ไซ ต

ท มา: http://www.ray-ban.com/

รปท 16 แสดงสวนป ระกอ บ ของการน าท างร ะดบ ลางใ นเวบ ไซ ต

ท มา: http://www.ray-ban.com/thailand/the-lab#-memo-ray

มการใชสของ Mouse

Over Link ไ ปใ น

ทศทางเดยวกนกบส

ของตราสญลกษณ

สวนของการนาทาง

อยแถบดานบนของ

เวบไ ซต

สวนของการนาทาง ใ น

ระดบตากวา มการ

แสดงภาพกราฟก

ลายเสนพ นฐาน

ประกอบกบขอความ

การนาทางโ ดยการดงดดสายตาผ ใชเวบ

ใ หเกดความสนใ จเกยวกบจดเดนของ

ผ ลตภณฑทจาหนาย

สวนของการนาทาง

ยงคงอยแถบดานบน

ของเวบไ ซต

การนาทางใ นระดบ

ตากวายงคงม

ลกษณะเดยวกนกบ

การนาทางระดบตน

22




2. ก า ร ใ ช ต า ข า ย ข อ ม ล ช ว ย ว า ง โ ค ร ง ร า ง ข อ ง เ ว บ เ พ จ (Use a Grid to Provide Visual

Structure) โด ยต า ข า ย ข อ ม ล ห ร อ Grid ม ล ก ษ ณ ะ เ ป น ต า ร า ง ป ร ะ เ ภ ท ห น ง ท ม จ ด ม ง ห ม า ย ใ น ก า ร

ว า ง โ ค ร ง ร า ง (Layout) ข อ ง เ ว บ ไ ซ ต ต า ง จ า ก ต า ร า ง ข อ ม ล (Table) ท ม ไ ว ส า ห ร บ แ ส ด ง ข อ ม ล

เท าน น

ก า ร ใ ช ต า ข า ย ข อ ม ล ใ น ก า ร ว า ง โ ค ร ง ร า ง ข อ ง เ ว บ น น ม ห ล า ย ล ก ษ ณ ะ เ ช น ก า ร ใ ช

แนวคดแบบ ตาขาย 4 คอลมน หรอ 6 ค อ ล ม น เ ป น ต น แ ต ใ น ป จ จ บ น ท น ย ม ใ ช ใ น แ น ว ค ด แ บ บ ต า

ข า ย 1 2 ค อ ล ม น ใ น ก า ร ช ว ย ว า ง โ ค ร ง ร า ง ข อ ง เ ว บ เ พ จ (อ า ง อ ง จ า ก

https://getbootstrap.com/examples/grid/) เ พ อ ใ ช เ ป น ก ร อ บ แ น ว ค ด ห ล ก (Framework) ใ น ก า ร

ออกแบ บ เวบ ไซ ต ดงภาพ

Col-1

8.33%

Col-1

8.33%

Col-1

8.33%

Col-1

8.33%

Col-1

8.33%

Col-1

8.33%

Col-1

8.33%

Col-1

8.33%

Col-1

8.33%

Col-1

8.33%

Col-1

8.33%

Col-1

8.33%

รปท 17 แสด งต าขายค อล ม นสาหรบก า รออกแบ บ เวบ ไซ ต

ท มา: https://getbootstrap.com/examples/grid/

Col-3

25%

Col-3

25%

Col-3

25%

Col-3

25%

รปท 18 แสด งต าขายค อล มนสาห รบก ารออกแบ บ เวบ ไซ ตประเภทรว ม 3 คอ ลมน


คอลม

นท 1

คอลม

นท 2

คอลม

นท 3

คอลม

นท 4

คอลม

นท 5

คอลม

นท 6

คอลม

นท 7

คอลม

นท 8

คอลม

นท 9

คอลม

นท 1

0

คอลม

นท 1

1

คอลม

นท 1

2

คอลม

นท 1

คอลม

นท 2

คอลม

นท 3

คอลม

นท 4

คอลม

นท 5

คอลม

นท 6

คอลม

นท 7

คอลม

นท 8

คอลม

นท 9

คอลม

นท 1

0

คอลม

นท 1

1

คอลม

นท 1

2

23




Col-6

50%

Col-6

50%

รปท 19 แสดงต าขายค อ ลม นสาหรบก า รออกแบ บ เวบ ไซ ตประเภทรว ม 6 คอลมน


รปท 20 แสด งต าขายค อล มนสาห รบก ารออกแบ บ เวบ ไซ ต

ท มา: https://www.apple.com/

3. ก า ร ใ ช ง า น ช อ ง ร ะ ย ะ ห า ง (Use Active White Space) ห ร อ ท อ (Gutter) ช ว ย ใ ห ก า ร

นาเสนอขอมลบนเ วบ ไซ ตม ก า ร จ ด ก ล ม ห ร อ จ า แ น ก ข อ ม ล อ อ ก จ า ก ก น ท า ใ ห เ ก ด ค ว า ม ช ด เ จ น ใ น

ก า ร ร บ ข อ ม ล ม า ก ข น ก า ร ใ ช ช อ ง ร ะ ย ะ ห า ง ส ข า ว ห ร อ White Space น น แ ท จ ร ง ไ ม จ า เ ป น ต อ ง

เป นระย ะ ห า ง ส ข า ว เ พ ย ง อ ย า ง เ ด ย ว อ า จ เ ป น ส ข อ ง พ น ห ล ง ท ม ค ว า ม แ ต ก ต า ง จ า ก ก ล อ ง ข อ ค ว า ม

อยางชดเจน

คอลม

นท 1

คอลม

นท 2

คอลม

นท 3

คอลม

นท 4

คอลม

นท 5

คอลม

นท 6

คอลม

นท 7

คอลม

นท 8

คอลม

นท 9

คอลม

นท 1

0

คอลม

นท 1

1

คอลม

นท 1

2

Col-1

Col-10

Col-3

24




ระยะหางทปรากฎบ นเวบ เพจม 2 ลกษ ณะ ดงน

1) ร ะ ย ะ ห า ง แ บ บ ม ส ว น ร ว ม (Active White Space) ค อ ร ะ ย ะ ห า ง ท เ ป น ป ร ะ โ ย ช น ต อ

การจาแนกสวนประกอบ ท ปรากฎในหนาเวบ เพจ ท าใหผใชอานขอมลไ ดสะดวก ชดเจน

2) ร ะ ย ะ ห า ง แ บ บ ไ ม ม ส ว น ร ว ม (Passive White Space) ค อ ร ะ ย ะ ห า ง ท ไ ร ป ร ะ โ ย ช น

อ า จ เ ก ด จ า ก ห ล า ย ก ร ณ เ ช น ก า ร จ ด เ ร ย ง โ ค ร ง ร า ง ข อ ง เ ว บ ท ไ ม ค า น ง ถ ง พ น ท ท ง ห ม ด ก า ร ท

ขอมลในแตละหนาเวบ เพจมขนาดไ มเทากนท าใหเก ดพ นทวางข นได เป นตน

รปท 21 แสด งร ะยะห าง แบบ มสวนรวม

ท มา: http://www.ebay.com/

ระยะหางแบบม

สวนรวม (Active

White Space) ใ ช

จา แนกการนา

ทางออกจ าก

เน อหา

ระยะหางแบบมสวนรวม (Active White Space)

ใ ชจา แนก หวขอยอย (Section Heading)

ระยะหางแบบมสวนรวม (Active White

Space) ใ ชจา แนกเน อหาหลก (Main Section)

25




รปท 22 แสดง ระย ะหา งแบ บ ไมมสวนรวม

ท มา: https://en.wikipedia.org/wiki/China

การใชหลกก ารตาขายขอมลแบบ 12 คอลมน ยงมการกาหนดขนาดพ นท ค ว า ม ก ว า ง

ท ดท สด คอ 960 พ ก เ ซ ล (Pixels) เ น อ ง จ า ก ส า ม า ร ถ แ ส ด ง ผ ล ไ ด ด ใ น จ อ ภ า พ ข น า ด 1 0 2 4 x 768

พกเ ซ ล ข นไป โด ยตาขายขอมลแบบ 12 คอลมน 960 พกเ ซ ล จ ะ ม ช อ ง ว า ง ร ะ ย ะ ห า ง ร ะ ห ว า ง แ ต

ล ะ ค อ ล ม น ท เ ร ย ก ว า “ท อ” (Gutter) ท ม ข น า ด 1 4 พ ก เ ซ ล แ ล ะ แ ต ล ะ ค อ ล ม น จ ะ ม ข น า ด 6 8 พ ก

เซ ล ดงภาพ

รปท 23 แสด งตาข ายขอม ลแบบ 12 คอลมน 96 0 พก เซ ล

ท มา: http://uxmovement.com/wp-content/uploads/2010/12/970grid.png

ระยะหางแบบไ มมสวนรวม

(Passive White Space)

ชองร ะยะห าง

(Use Active

White Space)

หรอ ทอ

(Gutter)

26




รปท 24 แสด งการออกแบ บ เคารางเวบ ดวยต าขายขอ มลแบบ 12 คอลมน 960 พ กเ ซ ล

ท มา: http://uxmovement.com/wp-content/uploads/2010/12/navigations.png

การออกแบบเวบกบประสบการณผใช ก า ร ค า น ง ถ ง ผ ใ ช เ ว บ เ ป น ส ง ท ส า ค ญ อ ย า ง ย ง ใ น ก า ร อ อ ก แ บ บ เ ว บ ผ อ อ ก แ บ บ เ ว บ

จ ะ ต อ ง ท า ก า ร ค น ค ว า เ ก ย ว ก บ พ ฤ ต ก ร ร ม ข อ ง ผ ใ ช เ ว บ เ ช น ก า ร ท บ ท ว น ว ร ร ณ ก ร ร ม เ ก ย ว ก บ

พฤ ตกรรมการใชเวบ ไซ ต การสาร ว จ ด ว ย แ บ บ ส อ บ ถ า ม ก า ร แ ล ก เ ป ล ย น ข อ ม ล ก บ เ ว บ ไ ซ ต ต า ง ๆ

เป นตน โดย มวตถป ระสงคเพอคนหาสงท ผใชเวบ คาดหวงจากเ วบ ไซ ต เนองจาก เม อ ท ร า บ ค ว า ม

ตองการและพฤ ตกรรมจาก ผใชเวบ ไซ ต จงจะ ส า ม า ร ถ ป ร ะ เ ม น ว ธ ก า ร อ อ ก แ บ บ เ ว บ ท ส อ ด ค ล อ ง

กบ ป ระสบ การณผใชได

องคการระหวาง ป ร ะ เ ท ศ ว า ด ว ย ก า ร ก า ห น ด ม า ต ร ฐ า น ไ ด น ย า ม ค า ว า ป ร ะ ส บ ก า ร ณ

ผใ ช (User Experience) ไ ว ใ น ISO 9 2 4 1-2 1 0 : 2 0 1 0 ห ร อ ม า ต ร ฐ า น ร ะ ห ว า ง ป ร ะ เ ท ศ เ ก ย ว ก บ

การยศาสตรของการปฏสมพ น ธ ร ะ บ บ ข อ ง ม น ษ ย (Ergonomics of Human-System Interaction ;

Part 210: Human-Centred Design for Interactive Systems) ซ ง ป ร ะ ส บ ก า ร ณ ผใ ช (UX) ม

ค ว า ม ห ม า ย ค อ ก า ร ร บ ร ข อ ง บ ค ค ล แ ล ะ ก า ร ต อ บ ส น อ ง ท เ ก ด ข น จ า ก ก า ร ใ ช ง า น ผ ล ต ภ ณ ฑ ใ น

27




ล ก ษ ณ ะ ร ะ บ บ ห ร อ บ ร ก า ร โ ด ย ป ร ะ ส บ ก า ร ณ ก า ร ผ ใ ช ง า น จ ะ ร ว ม ถ ง ท ก อ า ร ม ณ ข อ ง ผใ ช ค ว า ม

เ ช อ ก า ร ร บ ร ก า ร ต อ บ ส น อ ง ท า ง ร า ง ก า ย แ ล ะ จ ต ใ จ พ ฤ ต ก ร ร ม แ ล ะ ค ว า ม ส า เ ร จ ท เ ก ด ข น ก อ น

ร ะ ห ว า ง แ ล ะ ห ล ง ก า ร ใ ช ง า น ด ว ย ISO 9 2 4 1-2 1 0 : 2 0 1 0 ย ง ร ะ บ ถ ง ป จ จ ย ท ม อ ท ธ พ ล ต อ

ป ร ะ ส บ ก า ร ณ ผ ใ ช ค อ ร ะ บ บ (System) ผ ใ ช (User) แ ล ะ บ ร บ ท (Context) ข อ ง ก า ร ใ ช ง า น

(International Organization for Standardization: ISO, 2010)

รปท 25 แสด งเครองม อกา รปรบ ลก ษ ณะเน อหาบ น หน าเวบ เพจ

ท มา: https://www.wikiwand.com/en/Desktop_computer

เ ว บ ไ ซ ต Wikiwand เ ป น เ ว บ ไ ซ ต ท ใ ช ข อ ม ล เ น อ ห า จ า ก เ ว บ ไ ซ ต Wikipedia แ ต เ น อ ง จ า ก

เ ว บ ไ ซ ต Wikipeida ม ล ก ษ ณ ะ ก า ร แ ส ด ง ผ ล ท ไ ม ส อ ด ค ล อ ง ก บ ป ร ะ ส บ ก า ร ณ ผ ใ ช ท า ใ ห เ ก ด

เ ว บ ไ ซ ต Wikiwand ท ท า ห น า ท ส ก ด ข อ ม ล เ น อ ห า จ า ก เ ว บ ไ ซ ต Wikipedia ม า ใ ช แ ล ะ ท า ก า ร ป ร บ

ล ก ษ ณ ะ ข อ ง เ น อ ห า ท น า ม า น น ใ ห เ ข า ก บ ป ร ะ ส บ ก า ร ณ ผ ใ ช ห ร อ ผ อ า น ใ ห ส ะ ด ว ก ข น ก า ร เ พ ม

เครองมอสาหรบก ารเป ลยนลก ษ ณะเน อห า เ ช น ก า ร เ ป ล ย น ล ก ษ ณ ะ ข อ ง อ ก ษ ร ไ ด ก า ร เ ป ล ย น ส

ของพ นหลง การเป ลยนขนาดของอกษ ร การจดเคารางของเน อหา เป นตน

เครองมอส าหรบก ารปรบล กษ ณะของ

เน อหา

28




รปท 26 แ ส ด ง ก า ร เ ป ร ย บ เ ท ย บ ก า ร แ ส ด ง ผ ล เ น อ ห า บ น เ ว บ ไ ซ ต Wikiwand ก บ

Wikipedia

รปท 27 แสดงการเป รยบเ ท ยบ การนาเมาสวางเหนอลงค (Mouse Over Hyperlink)

ก า ร เ ป ร ย บ เ ท ย บ ก า ร แ ส ด ง ผ ล เ น อ ห า บ น เ ว บ ไ ซ ต Wikiwand ก บ Wikipedia ม ค ว า ม

แ ต ก ต า ง ก น แ ส ด ง ใ ห เ ห น ถ ง ก า ร อ อ ก แ บ บ เ ว บ ไ ซ ต ท ม แ น ว ค ด แ ต ก ต า ง ก น ด ว ย โ ด ย ก ล ม ผ ใ ช

เ ว บ ไ ซ ต ท ง ส อ ง เ ว บ ไ ซ ต น น ม ว ต ถ ป ร ะ ส ง ค ห ล ก ค อ ก า ร ค น ห า เ น อ ห า ค า อ ธ บ า ย แ ล ะ แ ห ล ง ก า ร

อ า ง อ ง เ พ อ ศ ก ษ า ห ร อ ใ ช เ ป น แ ห ล ง ค ว า ม ร ด า น ต า ง ๆ ด ง น น เ ว บ ไ ซ ต Wikiwand ม อ ง เ ห น โ อ ก า ส

ในก ารแสดงผลขอมลเน อหาใหสอดรบก บ ป ระสบ การณผใชม ากข น

29




เอกสารอางอง

Cailliau, Robert (1995 ) . "A Little History of the World Wide Web". World Wide Web

Consortium. Retrieved 5 January 2 015. URL: https://www.w3.org/History.html

Clark Wimberly. (2015) Reimagining the Web Design Process. Retrieved 1 July 2 015. URL:

http://sixrevisions.com/web_design/reimagine-web-design-process/

Daniel Schwabe, Gustavo Rossi, Luiselena Esmeraldo, Fernando Lyardet. (2001). Web

Design Frameworks: An Approach to Improve Reuse in Web Applications

Web Engineering: Managing Diversity and Complexity of Web Application

Development. Springer Berlin Heidelberg Berlin, Heidelberg 978-3-540-45144-0

335-352 http://link.springer.com/chapter/10.1007%2F3-540-45144-7_32

International Organization for Standardization (2010). Ergonomics of human system

interaction - Part 210: Human-centered design for interactive systems (formerly

known as 13407). ISO9241-210:2010.

Palmer, Sean B.; Berners-Lee, Tim (February–March 2001). "Enquire Manual — In

HyperText". Retrieved 5 January 2 015. URL: https://www.w3.org/People/Berners-

Lee/EnquireManual.htm

Thomas A. Powell.(2003) Web Design: The Complete Reference. ISBN 0-07-058252-1.

McGraw-Hill Publishing Company Limited 914 p.

Sareh Aghaei, Mohammad Ali Nematbakhsh and Hadi Khosravi Farsani. (2012)

EVOLUTION OF THE WORLD WIDE WEB: FROM WEB 1.0 TO WEB 4.0.

International Journal of Web & Semantic Technology (IJWesT) Vol.3, No.1, January

2012 http://airccse.org/journal/ijwest/papers/3112ijwest01.pdf

สรปสาระส าคญของบทท 1 เรองหลกการออกแบบเวบ ตามความเขาใจของนกศกษา

นกศกษาคดเหนวาศพทส าคญ

ในบทท 1 มค าวาอะไรบาง

ใหนกศกษายกตวอยางเวบไซตทนกศกษามความเหนวา

ผออกแบบเวบไดออกแบบเวบอยางถกตองตามหลกการ URL:

ใหนกศกษาวาดภาพหนาเวบนนบรเวณน

ใหนกศกษาใหเหตผลวาท าไมเวบนถงออกแบบไดตามหลกการ

ชอ-สกล:

รหสนกศกษา: แบบฝกหด บทท 1

(microfiche) โดยเรียกวา “เมมเมคซ์ (memex)”...

Documents