PRINCIPLE ODEFSWIGENB MFS 1301 หลักการออกแบบเว็บ สาขาวิชาสารสนเทศศาสตร์ แขนงวิชาระบบสารสนเทศเพือการจัดการ มหาวิทยาลัยราชภัฏสวนสุนันทา
วิธีการใชง้ าน AR BOOK 1 ดาวนโ์ หลดแอพพลิเคชนั Zappar 2 เปดแอพพลเิ คชนั Zappar ส่องไปทีมาร์คเกอร์ 3 marker MFS1301 หลักการออกแบบเว็บ
จุดมงุ่ หมาย ของรายวชิ า 1.เพือใหน้ ักศึกษามีความรู้ความเขา้ ใจ เกียวกบั หลักการออกแบบเว็บในปจจุบนั 2. เพือใหน้ กั ศึกษาทราบแนวคิดเกียวกบั การ สอื สารผา่ นเทคโนโลยีเวบ็ 3.เพือใหน้ ักศึกษานาํ ความรูเ้ กยี วกับระบบฐาน ข้อมลู ไปประยุกตใ์ ช้กบั ระบบงานธุรกจิ
สารบัญ 04 05 บทนํา หลักการออกแบบเว็บ 06 07 การวางแผนเว็บไซต์ ภาษาเอชทเี อ็มแอล 08 มาตราฐานสี
บทนํา จดุ กาํ เนิดของเวบ็ ไซต์ ความหมายของการออกแบบเวบ็ ไซต์ ค.ศ. 1945 \"การวางกรอบการพัฒนาเวบ็ ไซต์ ซงึ ประกอบไป แวนเนวาบุช เขยี นบทความ ดว้ ย สถาปตยกรรมของเวบ็ ไซต์ กรอบแนวคิด การสบื ค้นสารสนเทศเชงิ เชือม เวบ็ ไซต์ การนาํ ทางเวบ็ ไซต์ สว่ นตอ่ ประสานกบั ผู้ โยงจากเเผ่นไมโครฟมลเ์ ลก็ ใช้เว็บไซต์ โดยตอ้ งคํานงึ ถึงการทีเวบ็ ไซตจ์ ะ สามารถแสดงผลและสง่ ถ่ายใหแ้ กผ่ ใู้ ช้เรียกค้นได้ โดยเรยกสงิ นนั วา่ อีกทงั ยงั ตอ้ งมีการทํางานทสี นองตอ่ ความ \"Memax\" ต้องการของผู้ใช้ด้วย\" ยคุ ของเวบ็ ไซต์ 1 Web 1.0 เวบ็ คงที (Static Web) producer consumer 2 Web 2.0 เว็บพลวตั ร (Dynamic Web) ค.ศ. 1980 3 Web 3.0 เว็บเชิงความหมาย ผ้กู ่อตังสมาคม (Semantic Web) W3C (world wide web) 4 Web 4.0 เว็บตัวแทน โดยเขาไดอ้ อกแบบและสร้างเวบ็ (Intelligent Personal Agents) เบราวเ์ ซอร์ตัวแรกของโลก นําไฮ เปอร์เท็กมาใชร้ ่วมกับเครอข่าย อินเทอร์เนต็ จนกลายเปนมาตรา ฐานเวบ็ ทีสําคัญระดบั โลก
หลกั การออกแบบเวบ็ การออกแบบเวบ็ ไซตท์ มี ปี ระสิทธิภาพนัน นักศึกษาจําเปนต้องรูห้ ลกั การออกแบบ ทีสําคญั มดี งั นี ทฤษฏแี ละหลักการเกสตอลท์กบั การออกแบบเว็บไซต์ กฏความเรียบงา่ ย (Law of Simplicity) กฏว่าดว้ ยการรบั รขู้ องมนษุ ยท์ ีมกั จะสนใจในสงิ ทีเข้าใจได้ไมอ่ ยาก เชน่ การใชไ้ อคอนเชงิ เรยี บงา่ ยในการออกแบบ การออกแบบเวบ็ ไซต์แบบมินิมอลิสท์ กฏของฟทท์ (Fitt's law) กฏทีเกยี วข้องกบั การวัดระยะเวลาในการเคลือนไหว จากตําแหน่งหนงึ ไปยงั เปาหมายหนงึ ๆ ได้ ใชใ้ นการคาํ นวณระยะเคลอื นไหว ออกแบบจอยสตกิ รีโมทคอนโทรล ตําแหน่งชี ของเมาสบ์ นหนา้ จอ คอมพิวเตอร์
หลกั การออกแบบเว็บ กฏของฮิกซ์ (Hick's Law) การวดั ระยะเวลาตอบสนองของผู้ใช้เกดิ ความสมั พันธ์ระหวา่ งระยะเวลา เวลาในการประมวลผลตวั เลือก และจํานวนตัวเลอื ก หลกั การพาเรโต (Pareto principle) กฏ 80/20 อธบิ ายถึงสิงทีเปนสว่ นนอ้ ยแตส่ ําคญั จะมีอยรู่ อ้ ยละ 20 และสงิ ทีสาํ คญั น้อย จะมอี ยรู่ ้อยละ 80 Alan Brooke Grade 11 Grade 12 150 cm. 151 cm. แสดงการจดั ตามกลุม แสดงการจัดตามตัวอกั ษร แสดงการจดั ตามเวลา แสดงการจดั ตาม แสดงการจัดตามความ ตาํ แหนง (Location) ตอ เน่ือง (Continuum) (Category) (Alphabet) (Time) หลกั การของหมวก 5 ชัน หลักการการจดั เรยี งเนือหาใหส้ อดรับกับประสบการณผ์ ใู้ ช้ ประกอบดว้ ย 5 หนทาง
การวางแผนเวบ็ ไซต์ การวางแผนพัฒนาเว็บไซตท์ คี รอบคลุมทกุ ขนั ตอน โดยมีความซบั ซอ้ นและ กระบวนการอนื ๆ โดยขึนอยกู่ ับความตอ้ งการ และความซับซ้อน ของเว็บไซต์ กระบวนการพั ฒนาเว็บไซต์ (The site development process) ตามแนวคดิ ของ Patrick J. Lynch และ Sarah Horton 1 การนิยามและการวางแผนเว็บไซต์ วางแผนการใช้จ่ายและกาํ หนดเปาหมายและวตั ถุประสงค์ ของเว็บไซตท์ จี ะพัฒนา 2 สถาปตยกรรมสารสนเทศ วางแผนเกยี วกบั รายละเอยี ดของเนือหาทีจะทําเสนอบน เวบ็ ไซต์ เช่น Wireframe 3 การออกแบบเว็บไซต์ การออกแบบวาง Layout การออกแบบสว่ นตอ่ ประสาน งานผูใ้ ช้ 4 การสร้างเว็บไซต์ กาารสร้างและตรวสอบเว็บไซต์ใหม้ คี วามสมบูรณค์ รบถ้วน 5 การทําการตลาดให้แกเ่ ว็บไซต์ การทาํ การตลาดเพือใหเ้ ปนทรี ู้จัก 6 การติดตาม การประเมนิ และการบาํ รุงรกั ษาเว็บไซต์ การติดตามผ้เู ขา้ เข้าชมเวบ็ ไซต์
ภาษาเอชทีเอ็มแอล Hypertext Markup Language โครงสร้างภาษาเอชทเี อ็มแอล \"ภาษาประเภทกาํ กบั เนือหา\" ไฮเปอรเ์ ทก็ ซ์ (Hypertext) มาร์คอัพ (Markup) ขอ้ ตกลงตัวอกั ษรทีเรียกว่า การใชต้ ัวอกั ษร A-Z มา ครอบคลุมหรอื จํากัด ภาษา (Language) ประกอบกนั ทําใหเ้ กิดความ หมายเชือมโยงกบั ทรพั ยากรอนื ๆ <html> <head> <title> ขอ้ มูลทีต้องการให้แสดงบนส่วนหวั </title> </head> <body> <h1> หวั ขอ้ ขนาดใหญ่ </h1> <p> ข้อความทตี ้องการให้แสดง </p> </body> </html> <html> .html </html เมือเปดเเท็กกํากับ อย่าลืมปดแทก็ ตรวจสอบตวั สะกด อกั ษรทกุ ตัว Save File เปนสกลุ .html เสมอ กาํ กับทกุ ครงั ถา้ ไม่ครบถ้วน คาํ สงั จะไม่แสดงผล
มาตราฐานสี มาตรฐานสอี าร์จบี ี (RGB : Red Green Blue) ระบบสี RGB จะการแสดงผลออกมา เปนรปู แบบการรับแสงแสดงผลด้วย แสงทีเปนแมส่ ีได้แก่ รูปแบบการใชม้ าตราฐานชอื สีในการกาํ กบั สีพืนหลงั body {background-color: rgb(255,0,0);} มาตรฐานชือสี (Color Name) การใช้ HTML เพือกํากับการใหส้ ีตวั อักษร โดยชอื สที ีเว็บเบราเซอร์สนบั สนุน ปจจุบันมีประมาณ 140 ชอื สี รปู แบบการใชม้ าตราฐานชือสีในการกาํ กับสีพืนหลงั body {background-color: green;} มาตรฐานรหสั สฐี าน 16 (Hexadecimal Color) มแี นวคิดในลักษณะเดียวกันทีใชค้ วามเข้มขน้ ของแม่สี แตจ่ ะแทนคา่ พารามเิ ตอร์ด้วยเลขฐาน 16 ซึงประกอบไปดว้ ยเลข 0-F (16) โดยที A แทน 10 B แทน 11 C แทน 12 แทน D แทน 13 E แทน 14 F แทน 15 รูปแบบการใชม้ าตราฐานรหัสสีฐาน 16 ในการกํากบั สีพืนหลงั body {background-color: #CCFFCC;} ตัวอย่าง การงานทีเหมาะกับการใชม้ าตรฐานสีในการออกแบบ เชน่ งาน ออกแบบสือ หรือ การออกแบบ web site Web Design จะใชร้ ะบบสี RGB เพือใหไ้ ดภ้ าพทเี มอื แสดงผลบนนา่ จอแล้วมีความ สวยงามใกลเ้ คียงกับสที ตี าเรามองเห็นปกติ
PRINCIPLE OF WEB DESIGN 2 เปดแอพพลเิ คชนั Zappar ส่องไปทีมาร์คเกอร์ 3 marker MFS1301 หลกั การออกแบบเว็บ
อ้างอิง เนอื หาทังหมดอ้างอิงจาก รายวชิ า MFS 1301 หลักการออกแบบเวบ็ ขอขอบพระคณุ อาจารย์ ดร.ณฐั ภัทร แก้วรตั นภัทร์ อาจารยป์ ระจาํ รายวชิ า M F S 1 3 0 1 ห ลั ก ก า ร อ อ ก แ บ บ เ ว็ บ
Search
Read the Text Version
- 1 - 12
Pages:
