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

246 ตวั อย่างการใช้มาตรฐานสอี าร์จีบใี นการกากบั สพี ้ืนหลังให้เป็นสขี าว body { background-color: rgb(255,255,255); } จากตัวอย่างสีท่แี สดงผล คือ สขี าว เน่ืองจากมีการกาหนดค่าความเข้มข้น เท่ากับ 255 ให้แก่พารามเิ ตอร์สแี ดง สเี ขยี ว และสนี า้ เงนิ ซ่ึงเป็นการผสมสจี ากค่าความเข้มข้นแม่สี ท่สี งู ทส่ี ดุ ผลทไ่ี ด้ คอื เวบ็ เบราเซอร์จะแสดงผลสพี ้ืนหลงั เป็นสขี าว ตัวอย่างการใช้มาตรฐานสอี าร์จีบีในการกากบั สพี ้ืนหลังให้เป็นสดี า body { background-color: rgb(0,0,0); } จากตัวอย่างสที ่แี สดงผล คือ สดี า เน่ืองจากมีการกาหนดค่าความเข้มข้น เทา่ กับ 0 ให้แก่พารามิเตอร์สแี ดง สเี ขียว และสนี า้ เงิน ซ่ึงเป็นการผสมสจี ากค่าความเข้มข้นแม่สที ่ตี ่า ทส่ี ดุ ผลทไ่ี ด้ คอื เวบ็ เบราเซอร์จะแสดงผลสพี ้ืนหลงั เป็นสดี า ตัวอย่างการใช้มาตรฐานสอี าร์จบี ใี นการกากบั สพี ้ืนหลงั ให้เป็นสีนา้ เงนิ body { background-color: rgb(0,0,255); } จากตัวอย่างสีท่ีแสดงผล คือ สีน้าเงิน เน่ืองจากมีการกาหนดค่าความเข้มข้นใน พารามิเตอร์สนี า้ เงนิ เทา่ กบั 255 และกาหนดพารามิเตอร์สแี ดง และ สเี ขยี ว เป็น 0 ซ่ึงผลท่ี ได้ คอื เวบ็ เบราเซอร์จะแสดงผลสพี ้ืนหลังเป็นสนี า้ เงนิ โดยสามารถใช้ตัวหยิบจับสี (HTML color picker) ได้ท่ีเว็บไซต์ https://www.w3schools.com/colors/colors_picker.asp เพ่ือความสะดวกและรวดเรว็ ใน การกากบั สใี ห้กบั อลี ิเมนท์

247 มาตรฐานรหสั สีฐาน 16 มาตรฐานรหัสสฐี าน 16 (Hexadecimal color) มคี วามคล้ายคลึงกบั มาตรฐานสอี าร์ จีบี โดยมีแนวคิดลักษณะเดียวกัน คือ มีการให้ค่าความเข้มข้นของแม่สี 3 สี คือ สแี ดง สี เขยี ว และสนี า้ เงิน แต่แทนค่าพารามิเตอร์ด้วยเลขฐาน 16 ซ่ึงประกอบไปด้วยเลข 0 – F (16 ตัว) โดยท่ี A แทน 10 B แทน 11 C แทน 12 D แทน 13 E แทน 14 และ F แทน 15 การแทนสดี ้วยค่าพารามิเตอร์เลขฐาน 16 จะประกอบไปด้วยตัวเลข 3 ชุด โดยแต่ ละชุดประกอบไปด้วยตัวเลขฐาน 16 จานวน 2 ค่าต่อแม่สี 1 แม่สี ซ่ึงสที ่เี ป็นไปได้จะมี จานวนเทา่ กบั 166 หรือ 16,777,216 สี ซ่งึ เทยี บเทา่ กบั มาตรฐานสอี าร์จีบี รูปแบบการใช้มาตรฐานรหัสสฐี าน 16 ในการกากบั สพี ้ืนหลังมดี ังน้ี body { background-color: #RRGGBB; } ตัวอย่างการใช้มาตรฐานรหัสสฐี าน 16 ในการกากบั สพี ้ืนหลงั ให้มีสแี ดง body { background-color: #FF0000; } ตัวอย่างการใช้มาตรฐานรหัสสฐี าน 16 ในการกากบั สพี ้ืนหลังให้มีสเี ขยี ว body { background-color: #00FF00; } ตัวอย่างการใช้มาตรฐานรหัสสฐี าน 16 ในการกากบั สพี ้ืนหลังให้มีสนี า้ เงนิ body { background-color: #0000FF; }

248 การไล่ระดบั สี การไล่ระดบั สี (Color gradient) เป็นการกากบั ให้สมี ีการไล่ระดับจากสหี น่ึงไปยังอีก สหี น่ึง ซ่งึ ผู้ออกแบบและพัฒนาเวบ็ สามารถนามาใช้ในการสร้างสรรค์เวบ็ ไซต์ได้ โดยการไล่ ระดับสีจะกากับท่ีสไตล์ชีท และมีการใช้ค่า linear-gradient() ในการกาหนดค่าการไล่ ระดับสเี ชิงเส้นตรง รปู ท่ี 7.1 แสดงโครงสร้างของการไล่ระดับสี โดยท่ี คือ ชนิดของการไล่ระดับสี ในท่ีน่ีเลือกใช้การไล่ Type of gradient ระดับสเี ชิงเส้น (linear-gradient) คอื ทศิ ทางของการไล่ระดับสี เช่น to bottom Direction หมายถึง ไล่ระดับสีเร่ิมต้นไปถึงสีปลายทางจาก ด้านบนลงไปด้านล่าง Begin color คือ สเี ร่ิมต้น End color คอื สปี ลายทาง Gradient คือ ค่าการไล่ระดับสี โดยมีค่าเป็นจานวนเตม็ บวก หรือ จานวนเต็มลบ และมีขอบเขตของค่าต้ังแต่ 100% ถึง 100% ซ่ึงค่าสมมาตรของการไล่ระดับสี คือ สีเร่ิมต้นให้ค่า 0% และ สีปลายทางให้ค่า 100% ในส่วนของทศิ ทางการไล่ระดับสี (Direction) ของการไล่ระดับสเี ชิงเส้น (linear- gradient) มีท้งั หมด 8 ลกั ษณะดงั ตารางท่ี 7.2

249 ตารางท่ี 7.2 แสดงทศิ ทางการไล่ระดับสี (Direction) ของการไล่ระดับสเี ชิงเส้น (linear- gradient) ทิศทางการไล่ระดบั สี ค่า (Value) ของคณุ ลกั ษณะ (Direction) linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%); linear-gradient(to top, #33ccff 0%, #ff99cc 100%); linear-gradient(to right, #33ccff 0%, #ff99cc 100%); linear-gradient(to left, #33ccff 0%, #ff99cc 100%); linear-gradient(to top left, #33ccff 0%, #ff99cc 100%); linear-gradient(to bottom left, #33ccff 0%, #ff99cc 100%); linear-gradient(to top right, #33ccff 0%, #ff99cc 100%); linear-gradient(to bottom right, #33ccff 0%, #ff99cc 100%);

250 อตั ราการเปรียบต่าง อตั ราการเปรียบต่าง (Contrast ratio) คือ การวัดและประเมินความแตกต่างระหว่าง สีเบ้ืองหน้าและสีพ้ืนหลัง เช่น การวัดอัตราการเปรียบต่างระหว่างสีตัวอักษรกับสีของพ้ืน หลัง เป็นต้น ซ่ึงการวัดและประเมินอัตราความเปรียบต่างน้ัน จะต้องทาการวัดความสว่าง สมั พัทธ์ (Relative luminance) ของสเี บ้อื งหน้าและสพี ้ืนหลัง เพ่ือนามาวัดอัตราการเปรียบ ต่างของสเี บ้อื งหน้าและเบ้อื งหลงั และทาการประเมนิ อตั ราการเปรยี บต่าง ซ่งึ มคี ่าอยู่ระหว่าง 1 ถึง 21 (มกั เขยี นด้วย 1:1 ถึง 21:1) 1. การวัดความสว่างสมั พัทธ์ (Relative luminance) โดยความสว่างสัมพัทธ์ หมายถึง ค่าความสว่าง มีค่าอยู่ระหว่าง 0 ถึง 1.0 โดยค่า 0 คือสดี าท่มี ืดท่สี ุด และค่า 1.0 คือสขี าวทส่ี ว่างทส่ี ดุ การหาค่าความสว่างคานวณจากองค์ประกอบของแม่สใี นภาพ ตามสตู ร มาตรฐาน sRGB ดังน้ี Relative luminance: L = 0.2126*R + 0.7152*G + 0.0722*B ตารางท่ี 7.3 แสดงค่านา้ หนักความสว่างในแต่ละแม่สี ค่าสี ช่วงค่าน้าหนกั ช่วงค่าน้าหนกั ช่วงค่าน้าหนกั ความสว่าง (Chromaticity) สีแดง (Red) สีเขียว สนี ้าเงิน สมั พทั ธ์ 0 - 0.2126 (Green) (Blue) (Relative Luminance) 0 - 0.7152 0 - 0.0722 0 #000000 0 0 0 1.0000 #FFFFFF 0.2126 0.7152 0.0722 โดยกาหนดค่าของ R (สแี ดง) G (สเี ขยี ว) และ B (สนี า้ เงิน) 1) ถ้า RsRGB <= 0.03928 แล้ว R = RsRGB/12.92 มฉิ ะน้ัน R = ((RsRGB+0.055)/1.055) ^ 2.4 2) ถ้า GsRGB <= 0.03928 แล้ว G = GsRGB/12.92 มฉิ ะน้ัน G = ((GsRGB+0.055)/1.055) ^ 2.4 3) ถ้า BsRGB <= 0.03928 แล้ว B = BsRGB/12.92 มฉิ ะน้ัน B = ((BsRGB+0.055)/1.055) ^ 2.4 โดยท่ี เคร่ืองหมาย \"^\" หมายถงึ ยกกาลัง กาหนดค่า RsRGB, GsRGB และ BsRGB ได้ดงั น้ี 1) RsRGB = R8bit/255

251 2) GsRGB = G8bit/255 3) BsRGB = B8bit/255 2. อตั ราการเปรียบต่าง (Contrast ratio) สามารถคานวณได้จากสตู รต่อไปน้ี Contrast ratio = (L1 + 0.05) / (L2 + 0.05) โดยท่ี L1 คอื ความสว่างสมั พัทธข์ องสที ส่ี ว่าง L2 คือ ความสว่างสมั พัทธข์ องสที ม่ี ืด ตามเกณฑข์ อง WCAG2.0 มกี ารกาหนดค่าอตั ราความเปรียบต่าง ดังน้ี 1) กรณที ่มี คี ่าอตั ราการเปรียบต่างมากกว่า 7 ข้นึ ไป หมายถึง มคี วามเหมาะสมใน ระดบั AAA ซ่งึ เป็นระดบั ทด่ี ีและควรนาคู่สนี ้ีไปใช้งาน 2) กรณีท่มี ีค่าอัตราการเปรียบต่างมากกว่า 4.5 ข้นึ ไปแต่ไม่ถึง 7 หมายถึง มี ความเหมาะสมในระดบั AA ซ่ึงเป็นระดับท่พี อใช้และควรพิจารณาคู่สนี ้ีไปใช้งานตามความ เหมาะสม 3) กรณีท่มี ีค่าอัตราการเปรียบต่างต่ากว่า 4.5 หมายถึง คู่สดี ังกล่าวไม่เหมาะ สาหรับการใช้งานบนเวบ็ ไซต์ เน่ืองจากคู่สดี งั กล่าวใกล้เคยี งกนั มากเกนิ ไปทาให้ผู้ใช้แยกพ้ืน หน้ าและพ้ ืนหลังลาบาก ตารางท่ี 7.4 แสดงตวั อย่างของการคานวนค่าความสว่างสมั พัทธแ์ ละอตั ราการเปรียบต่าง HTML Relative Contrast ratio Grade Chromaticity luminance Background #000000 0.00000 21.00000 : 1 AAA Foreground (Text) #FFFFFF 1.00000

252 สรุป การออกแบบและพัฒนาเวบ็ ไซต์ ผู้ออกแบบและพัฒนาจาเป็นต้องเข้าใจเก่ียวกับ มาตรฐานสีท่ใี ช้ในระบบทางด้านเว็บ ซ่ึงปัจจุบันจอภาพต่างๆ นิยมใช้มาตรฐานสอี าร์จีบี (Red Green Blue: RGB) ซ่ึงประกอบไปด้วย 3 แม่สหี ลัก คือ สีแดง (Red) สเี ขียว (Green) และสนี ้าเงิน (Blue) ดังน้ัน การออกแบบเว็บไซต์เพ่ือให้สามารถแสดงผลบน เวบ็ เบราเซอร์ได้อย่างถูกต้องและมีการเลือกใช้รหัสสที ่เี ป็นไปตามมาตรฐานสากลจึงเป็ น ประเดน็ ท่สี าคัญ นอกจากน้ีผู้ออกแบบและพัฒนาเวบ็ ไซต์ควรทราบเก่ียวกับแนวทางการ ออกแบบและพัฒนาเวบ็ ท่ผี ู้ใช้เข้าถึงเน้ือหาได้ (Web Content Accessibility Guidelines: WCAG) ซ่ึงแนวทางดังกล่าวเผยแพร่โดยองค์กรระดับสากลด้านการดูแลมาตรฐานและ เทคโนโลยีเวบ็ (World Wide Web Consortium: W3C) ปัจจุบันแนวทางดังกล่าวอยู่ในรุ่น ท่ี 2 (WCAG2.0) ซ่งึ แนวทางของ WCAG2.0 ท่สี าคัญด้านการใช้สี คือ การวัดความสว่าง สมั พัทธ์ (Relative luminance) และ การวัดอัตราการเปรียบต่าง (Contrast ratio) ดังน้ัน ผู้ออกแบบและพัฒนาเวบ็ ไซต์จาเป็นต้องสามารถคานวนและวัดค่าต่างๆ ท่สี อดคล้องกับ มาตรฐานสากล เพ่ือช่วยให้สามารถออกแบบและพัฒนาเวบ็ ไซต์ได้อย่างเหมาะสมและมี ประสทิ ธภิ าพสงู คาถามทา้ ยบท 1. จงอธบิ ายมาตรฐานช่ือสี พร้อมยกตวั อย่างช่ือสี 2. จงอธบิ ายมาตรฐานสอี าร์จีบี พร้อมยกตวั อย่างรหัสสอี าร์จีบี 3. จงอธบิ ายมาตรฐานรหัสสฐี าน 16 พร้อมยกตวั อย่างรหัสสฐี าน 16 4. จงอธบิ ายการไล่ระดับสี พร้อมยกตวั อย่างการไล่ระดบั สดี ้วยสไตล์ชีท 5. จงอธบิ ายการวัดความสว่างสมั พัทธ์ (Relative luminance) 6. จงอธบิ ายการวัดอตั ราการเปรียบต่าง (Contrast ratio) 7. จากค่ารหัสสตี ่อไปน้ี สี #0033AA สี #880232 จงวัดความสว่างสมั พัทธ์ (Relative luminance) 8. จากค่ารหัสสตี ่อไปน้ี สี #3388C2 สี #882121 จงวัดอัตราการเปรียบต่าง (Contrast ratio) และตามเกณฑ์ของ WCAG2.0 มีความ เหมาะสมในระดับใด

253 เอกสารอา้ งอิง Joel Sklar. (2014). Principles of Web Design, Sixth Edition. Cengage Learning Asia. Jon Duckett. (2011). HTML and CSS : Design and Build Websites. John Wiley & Sons Inc. _____ G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text. URL https://www.w3.org/ TR/WCAG20-TECHS/G18.html _____ (1996). A Standard Default Color Space for the Internet - sRGB [sRGB]. URL http://www.w3.org/Graphics/Color/sRGB.html _____ (1998). [IEC-4WD] IEC/4WD 61966-2-1: Colour Measurement and Management in Multimedia Systems and Equipment - Part 2.1: Default Colour Space - sRGB. URL http://www.w3.org/Graphics/Color/sRGB.html _____ Web Content Accessibility Guidelines 2.0 (WCAG 2.0) World Wide Web Consortium (W3C), URL http://www.w3.org/TR/WCAG20/

254

255 แผนบริหารการสอนประจาบทที่ 8 หวั ขอ้ เน้ อื หา ความหมายของเวบ็ เชิงตอบสนอง กรอบแนวคิดเวบ็ เชิงตอบสนองของเจคิวร่โี มบาย การใช้งานเจคิวรีโมบายเบ้อื งต้น เพจของเจคิวรโี มบาย กล่องข้อความโต้ตอบ การเปล่ียนหน้าเพจ การสร้างป่ ุม โครงร่างเชิงตอบสนอง วตั ถุประสงคเ์ ชิงพฤติกรรมหวั ขอ้ เน้ ือหา 1. อธบิ ายความหมายของเวบ็ เชงิ ตอบสนองได้ 2. อธบิ ายกรอบแนวคดิ เวบ็ เชงิ ตอบสนองของเจควิ ร่ีโมบายได้ 3. อธบิ ายการใช้งานเจคิวรโี มบายเบ้อื งต้นได้ 4. อธบิ ายการสร้างเพจของเจคิวรีโมบายได้ 5. อธบิ ายการสร้างกล่องข้อความโต้ตอบได้ 6. อธบิ ายการเปล่ยี นหน้าเพจได้ 7. อธบิ ายการสร้างป่ ุมและปรับการเรียงตวั ของป่ ุมได้ 8. อธบิ ายการสร้างโครงร่างเชิงตอบสนองได้ วิธีและกิจกรรมการเรียนการสอน 1. วิธีสอน 1.1 วธิ สี อนแบบบรรยาย 1.2 วิธสี อนแบบอภปิ ราย 1.3 วธิ สี อนแบบการศกึ ษาโดยลาพัง 2. กิจกรรมการเรียนการสอน 2.1 ผู้สอนบรรยายสรปุ เน้อื หา 2.2 ให้ผู้เรียนศกึ ษาเน้ือหาจากเอกสารประกอบการสอน

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

257 บทที่ 8 เว็บเชิงตอบสนองเบ้ อื งตน้ ปัจจุบันผู้ใช้งานเว็บไซต์สามารถเข้าถึงเว็บไซต์ได้จากอุปกรณ์ท่ีหลากหลาย เช่น คอมพิวเตอร์ส่วนบุคคล คอมพิวเตอร์โนต็ บุค โทรศัพทส์ มาร์ทโฟน แทบ็ เบต็ และสมาร์ท ทวี ี เป็นต้น ผู้ออกแบบและพัฒนาเวบ็ ไซต์จึงมคี วามจาเป็นต้องออกแบบเวบ็ ไซต์ให้สามารถ แสดงผลในทุกๆ อุปกรณ์ได้อย่างถูกต้อง และมีการปรับโครงร่างเวบ็ ให้เหมาะสมในแต่ละ อุปกรณ์ เช่น คอมพิวเตอร์ส่วนบุคคล หรือ คอมพิวเตอร์โน็ตบุคจะมีพ้ืนท่ีแสดงผลใน แนวนอนมากกว่า อุปกรณป์ ระเภทโทรศัพทส์ มาร์ทโฟนและแทบ็ เบต็ เป็นต้น ดังน้ันในบทน้ี จะอธิบายถึงความหมายของเวบ็ เชิงตอบสนอง และให้แนวทางในการพัฒนาเวบ็ ไซต์เชิง ตอบสนองด้วยกรอบแนวคิดเวบ็ เชงิ ตอบสนองของเจคิวร่ีโมบาย (Jquery mobile) ซ่ึงเป็นท่ี นิยมใช้เป็นพ้ืนฐานของเวบ็ เชิงตอบสนอง ความหมายของเว็บเชิงตอบสนอง เวบ็ เชิงตอบสนอง (Responsive Web) คือ การออกแบบเวบ็ ให้สามารถปรับเปล่ียน เค้าร่างให้เหมาะสมกับขนาดของจอภาพแสดงผล โดยเว็บเชิงตอบสนองสามารถแสดง รายละเอียด เน้ือหา ภาพกราฟิ กต่างๆ มีประสิทธิภาพดีกว่าโมบายไซต์ ซ่ึงปัจจุบันนัก ออกแบบเวบ็ ไซตม์ ุ่งเน้นท่จี ะใช้กลยุทธก์ ารออกแบบเวบ็ ไซต์ประเภทเวบ็ เชิงตอบสนองเพ่ือ แสดงผลเว็บไซต์ได้ อย่างเหมาะสม โดยการออกแบบเว็บไซต์เชิงตอบสนองจะใช้ ความสามารถของมีเดียคิวร่ี (Media Queries) ท่กี าหนดในสไตล์ชีท (CSS) รวมถึงการ โปรแกรมเพ่ิมเติมความสามารถด้วยภาษาจาวาสคริปต์ (Java Script) และมาตรฐานแบบ วัตถุในเอกสาร (Document Object Model: DOM) เพ่ือทาให้เวบ็ เชิงตอบสนองมีความ สมบูรณ์และมีความฉลาดในการเลือกแสดงผลหรือจัดเรียงเค้ าร่างให้ เหมาะสมกับขนาด จอภาพของอุปกรณ์ต่างๆ ได้โดยการออกแบบเพียงคร้ังเดียว ทาให้ประหยัดเวลาและมี ประสทิ ธภิ าพสงู รวมถงึ มคี วามยดื หยุ่นกบั อปุ กรณ์ท่จี ะเกดิ ข้นึ ในอนาคตด้วย

258 กรอบแนวคิดเว็บเชิงตอบสนองของเจคิวรีโ่ มบาย เจคิวรีโมบาย (Jquery mobile) เป็นกรอบแนวคิด (Framework) ในการพัฒนาโม บายเวบ็ แอพ็ พลิเคช่ัน (Mobile Web Application) ซ่ึงทาให้รูปแบบของหน้าเวบ็ เพจ สามารถทางานได้อย่างเหมาะสมบนเวบ็ เบราเซอร์ท่อี ยู่บนสมาร์ทโฟน (Smartphones) หรือ แทบ็ เบต็ (Tablets) ได้ เจคิวรีโมบายมีพ้ืนฐานมาจากมาตรฐาน HTML5 CSS3 และ JAVA SCRIPT โดยเจคิวรีโมบายเน้นการแสดงผลบนเวบ็ เบราเซอร์ท่ที างานบนอุปกรณ์ เคล่ือนท่ี แต่ก็มีความสามารถในการจัดการข้อมูลบางส่วนได้เช่นกัน เจคิวรีโมบายถูก ออกแบบมาให้เหมาะกบั การแตะบนหน้าจออุปกรณ์เคล่ือนท่ี (Touch optimized) เน่ืองจาก หน้าจออุปกรณ์เคล่อื นทม่ี พี ้ืนท่ใี นการทางานน้อยกว่าหน้าจอคอมพิวเตอร์ และแกนของการ ใช้งานจะมีลักษณะเป็นแกนแนวต้ัง (Vertical axis) ในขณะใช้งานมือเดียว ดังน้ันเจคิวรีโม บายจะช่วยให้ นักพัฒนาสามารถออกแบบหน้ าจอเว็บท่ีสอดคล้ องกับประสบการณ์ผู้ใช้ (User experience) อปุ กรณ์เคล่ือนทไ่ี ด้ดี นอกจากน้ีเจคิวรีโมบายสามารถทางานได้บนเบรา เซอร์หลายย่ีห้อ จึงทาให้การพัฒนามีความสะดวกมากย่ิงข้ึน การใช้เจคิวรีโมบายจะทาให้ นักพัฒนาออกแบบหน้าจอเว็บเพจได้อย่างเหมาะสมและไม่ต้องเสยี เวลาในการประมาณ พ้ืนท่ขี องเคร่ืองมือท่ปี รากฎบนเวบ็ เพจ เช่น ขนาดป่ ุม ขนาดของลิสต์ ขนาดของเมนู เป็น ต้น ซ่งึ เจควิ รีโมบายจะทาหน้าท่จี ดั การส่วนแสดงผลทาให้ประสบการณ์ผู้ใช้เกิดความง่ายต่อ การใช้งานมากข้นึ แม้กระทง่ั ใช้มอื เดยี วกต็ าม (Single handed) การใชง้ านเจคิวรีโมบายเบ้ ืองตน้ เจควิ รีโมบายมลี ักษณะเป็นไฟลค์ าส่งั 2 ประเภท คือ .CSS (Stylesheet) และ .JS (Java Script Libraries) โดยผู้ใช้งานไม่จาเป็นต้องทาการติดต้ัง (Install) โปรแกรมใดๆ แต่จะต้องทาการเรียกคาสง่ั เจคิวรีโมบายจากผู้พัฒนามาแทรกไว้ในหน้าเวบ็ เพจท่ตี ้องการ โดยการเรียกใช้คาสง่ั เจคิวรีโมบาย มี 2 ลกั ษณะเลอื กใช้ คอื 1) เรียกใช้งานผ่าน Content Delivery Network (CDN) กล่าวคอื เรียกใช้งานคาส่งั จากไฟลค์ าสง่ั ท่อี ยู่บนเครอื ข่ายอนิ เทอร์เนต็ 2) เรียกใช้งานจากไฟลค์ าสง่ั ทไ่ี ด้ดึงมาจดั เกบ็ ไว้ในเคร่ืองคอมพิวเตอร์แล้ว (Stored at computer) 1. การเรียกใช้งานผ่าน Content Delivery Network (CDN) การเรียกใช้งานผ่าน CDN น้ัน สามารถเรียกใช้งานไฟล์คาส่งั เจคิวรีโมบายได้จาก เวบ็ ไซต์ http://code.jquery.com ข้อดีคือไม่ต้องจัดเกบ็ คาส่งั ไว้ท่เี คร่ืองคอมพิวเตอร์ แต่

259 ต้องมีสญั ญาณอินเทอร์เนต็ ระหว่างการใช้งานเสมอ และหากต้องการแก้ไข Script จะไม่ สามารถทาได้ ภาพท่ี 8.1 การเรียกใช้งานเจคิวรีโมบายผ่าน Content Delivery Network (CDN) 2. เรียกใช้งานเจคิวรีโมบายจากไฟล์คาส่ัง ท่ีได้ดึงมาจัดเก็บไว้ในเคร่ือง คอมพิวเตอร์แล้ว (Stored at computer) การเรียกใช้งานผ่านไฟล์คาส่ังท่นี ามาจัดเกบ็ ไว้ในคอมพิวเตอร์แล้ว มีข้อดีคือ ไม่จาเป็นต้องเช่ือมต่อสญั ญาณอนิ เทอร์เนต็ และสามารถปรับแก้ไขคาส่งั ในเจคิวรีโมบายได้ เสมอ ภาพท่ี 8.2 การเรียกใช้งานผ่านไฟลค์ าส่งั ทน่ี ามาจัดเกบ็ ไว้ในคอมพิวเตอร์แล้ว (Stored at computer) เพจของเจคิวรีโมบาย เจคิวรีโมบายมีส่วนประกอบท่สี าคัญ คือ หน้าเพจ (Page) โดยในหน่ึงหน้าเพจจะ ประกอบไปด้วย 3 ส่วน คือ ส่วนหัว (Header) ส่วนเน้ือหาหลัก (Main) และส่วนล่าง (Footer) โดยแสดงดงั ภาพท่ี 8.3

260 ภาพท่ี 8.3 เพจของเจคิวรีโมบาย (Page) ภาพท่ี 8.4 โครงสร้างของอลิ ิเมนทย์ ่อยในเพจ จากภาพท่ี 8.4 แสดงโครงสร้างของอลิ ิเมนทย์ ่อยในเพจ โดยท่ี <div > คอื division หมายถงึ ส่วนหน่ึงๆ ของเวบ็ ไซต์ data-role=\"page\" คอื การกาหนดคุณลกั ษณะหน้าทข่ี อง Tag div น้ันๆ ให้ มหี น้าท่ี เป็นสมาชกิ หน้าหน่ึงๆ ของเวบ็ เพจ data-role=\"header\" คอื การกาหนดคุณลักษณะหน้าท่ขี อง Tag div น้ันๆ ให้มีหน้าท่เี ป็นส่วนบนสุดของเพจ ซ่ึงนามาประยุกต์ใช้ในการทา Title หรือ ทาป่ ุมค้นหา ต่างๆ บ่อยคร้ัง ซ่ึง data-role=\"header\" จะอยู่ภายใต้ data-role=\"page\"เสมอ data-role=\"main\" คอื การก าหนดคุณลกั ษณะหน้าท่ขี อง Tag div น้ันๆ ให้ มีหน้าท่ีเป็ นส่วนเน้ือหาหลักของเพจ ซ่ึงนามาใช้ในการใส่ข้อมูล เน้ือหา ภาพ ป่ ุม หรือ แบบฟอร์มต่างๆ ได้ ซ่งึ data-role=\"main\" จะอยู่ภายใต้ datarole=\"page\" เสมอ

261 <div data-role=\"main\" class=\"ui-content\"> ในส่วนของ \"ui-content\" เรียกว่า คลาส หรือ class หรือ ประเภทมีไว้สาหรับกาหนดเพ่ิมเติม เพ่ือขยายพ้ืนท่สี าหรับใส่ข้อมูล หลัก จะทาให้พ้ืนทบ่ี ริเวณน้ีมีขนาดใหญ่ข้นึ กว่าส่วนอ่นื data-role=\"footer\" คือ การกาหนดคุณลกั ษณะหน้าทข่ี อง Tag div น้ันๆ ให้มีหน้าท่ี เป็นส่วนล่างสดุ ของเพจ ซ่งึ นามาประยุกต์ใช้ในการทาป่ ุมค้นหาต่างๆ ท าป่ ุมเมนู ซ่ึง data- role=\"footer\" จะอยู่ภายใต้ data-role=\"page\" เสมอ ในบางคร้ังการแสดงผลข้อมูลอาจแสดงผลข้อมูลไม่หมดในคราวเดียว หรือ ผู้พัฒนามีความต้องการให้แสดงผลข้อมูลตามความต้องการของผู้ใช้ จึงมีความจาเป็นต้อง สร้าง Page รองรับไว้ล่วงหน้ามากกว่า 1 Page ดังน้ัน เจคิวรีโมบายจึงมีความสามารถให้ ผู้พัฒนาสามารถสร้าง Page รองรับไว้ล่วงหน้าได้ ดงั ตัวอย่างต่อไปน้ี ภาพท่ี 8.5 การสร้างเพจ 2 เพจในไฟล์เดยี วกนั โดยการเรียกเพจจะใช้วิธีการสร้างไฮเปอร์ลิงค์เช่ือมโยงเพจอ่ืนๆ ท่อี ยู่ในเว็บเพจ เดียวกัน ซ่ึงจะใช้เคร่ืองหมาย # หรือ ชาร์ป (Sharp) ในการระบุและตามด้วยช่ือ id (identification) ของเพจ

262 ภาพท่ี 8.6 การเช่อื มโยงเพจในเวบ็ เพจเดียวกนั กล่องขอ้ ความโตต้ อบ เจคิวรีโมบายได้เตรียมคาส่งั สาหรับการสร้างกล่องข้อความโต้ตอบ (Dialog box) ซ่งึ กล่องข้อความโต้ตอบเป็นเพจชนิดหน่ึง ทใ่ี ช้ประโยชน์ในการให้ข้อมูลข่าวสารพิเศษ หรือ ใช้ในการร้องขอข้อมูลนาเข้า (Input) การสร้างกล่องโต้ตอบ จะต้องเพ่ิม Attribute ช่ือว่า data-dialog=\"true\" ในเพจท่ตี ้องการให้เป็น Dialog Box ดงั ตัวอย่าง ภาพท่ี 8.7 การสร้างกล่องข้อความโต้ตอบ (Dialog box)

263 ภาพท่ี 8.8 ตวั อย่างคาสง่ั สาหรับสร้างกล่องข้อความโต้ตอบ (Dialog box)

264 การเปลีย่ นหนา้ เพจ การเปล่ียนหน้าเพจ หรือ Transition น้ัน เจควิ รโี มบายได้เตรียมรปู แบบทใ่ี ช้ในการ เปล่ียนหน้าจอเพ่อื สร้างประสบการณผ์ ู้ใช้ให้มคี วามน่าสนใจมากข้นึ เรียกว่า jQuery Mobile Transition Effects ซ่ึงการเปล่ยี นหน้าเพจสามารถกระทากบั เพจหรือกล่องข้อความโต้ตอบ ได้ รูปแบบการกากบั การเปล่ียนหน้าเพจ <a href=\"#anylink\" data-transition=\"slide\"> Slide to Page Two </a> หากต้องการให้แสดงการเปล่ียนหน้าจอกลับจากซ้ายไปขวา สามารถกาหนดได้โดย ใช้ Attribute ท่ี ช่อื ว่า data-direction=\"reverse\" รปู แบบการกากบั การเปล่ยี นหน้าเพจกลบั จากซ้ายไปขวา <a href=\"#anylink\" data-transition=\"slide\" data-direction=\"reverse\"> Slide to Page Two </a> ตารางท่ี 8.1 แสดงเอฟเฟคการเปล่ียนหน้าเพจ คาสงั่ เอฟเฟคการเปลยี่ นหนา้ เพจ data-transition=\"fade\" เปล่ยี นหน้าเพจแบบจาง data-transition=\"flip\" เปล่ียนหน้าเพจแบบพลกิ data-transition=\"flow\" เปล่ยี นหน้าเพจแบบเล่อื นปลิว data-transition=\"pop\" เปล่ียนหน้าเพจแบบพองจากกลางจอ data-transition=\"slide\" เปล่ียนหน้าเพจแบบเล่อื นจากขวาไปซ้าย data-transition=\"slideup\" เปล่ียนหน้าเพจแบบเล่อื นจากล่างข้นึ บน data-transition=\"slidedown\" เปล่ยี นหน้าเพจแบบเล่อื นจากบนลงล่าง data-transition=\"none\" ไม่มีการแสดงเอฟเฟค

265 การสรา้ งป่ ุม 1. การสร้างป่ ุมทว่ั ไป (Buttons) ด้วยเจควิ รีโมบาย มวี ิธกี ารเลอื กใช้ได้ 3 วิธี คอื 1) การใช้ Tag Element ทช่ี ่อื ว่า <input> ตัวอย่าง <input type=\"button\" value=\"Button\"> 2) การใช้ Tag Element ทช่ี ่ือว่า <button> ร่วมกบั class=\"ui-btn” ตวั อย่าง <button class=\"ui-btn\">Button</button> 3) การใช้ Tag Element ท่ชี ่อื ว่า <a> ร่วมกบั class=\"ui-btn\" ตวั อย่าง <a href=\"#anylink\" class=\"ui-btn\">Button</a> ภาพท่ี 8.9 การใช้ Tag Element ท่ชี ่อื ว่า <input>

266 ภาพท่ี 8.10 การใช้ Tag Element ทช่ี ่ือว่า <button> ภาพท่ี 8.11 การใช้ Tag Element ทช่ี ่อื ว่า <a> ร่วมกบั class=\"ui-btn\"

267 2. การสร้างป่ ุมแบบกลุ่ม การสร้างป่ ุมแบบกลุ่ม (Grouped button) สามารถใช้ Attribute ช่ือว่า data- role=\"controlgroup\" เพ่ือระบุว่าป่ ุมน้ันๆ จะมีลักษณะเป็ นกลุ่ม และสามารถกาหนด เพ่ิมเติมได้ว่าจะให้กลุ่มของป่ ุมมีลักษณะเรียกในแนวนอน หรือแนวต้ังได้ โดยใช้ Attribute ท่ชี ่อื ว่า data-type=\"horizontal | vertical\" ภาพท่ี 8.12 การสร้างป่ ุมแบบกลุ่ม (Grouped button) 3. การสร้างป่ ุมแบบเรียงแนวเดียวกนั การสร้างป่ ุมแบบเรียงแนวเดียวกนั (Inline button) เป็นการกาหนดโครงร่างการ แสดงผลของป่ ุมเม่ือพ้ืนท่แี สดงผลไม่เพียงพอ โดยหากสร้างป่ ุมแบบไม่กาหนด class=\"ui- btn ui-btn-inline\" จะทาให้ป่ ุมมลี ักษณะเป็นป่ ุมเดยี วและกนิ พ้ืนท่แี นวขวางท้งั หมด ดังน้ัน หากมีป่ ุมมากกว่า 1 ป่ ุมและต้องการให้อยู่ในแนวเดยี วกนั จะต้องมีการกาหนด class=\"ui- btn ui-btn-inline\" เสมอ โดยหากพ้ืนทห่ี น้าจออปุ กรณ์แสดงผลป่ ุมไม่พอจะทาการปรับ โครงร่างของป่ ุมลงมาอกี บรรทดั แต่หากอยู่ในแกนนอนท่พี ้ืนท่แี นวขวางอุปกรณม์ าก กจ็ ะ ปรากฎป่ ุมเรียงในแนวเดยี วกนั มากกว่า 1 ป่ ุม ได้

268 ภาพท่ี 8.13 การสร้างป่ ุมแบบเรียงแนวเดยี วกนั (Inline button) โครงร่างเชิงตอบสนอง โครงร่างเชิงตอบสนอง (Responsive grid) เป็นการปรับการแสดงผลหน้าเวบ็ ให้ เหมาะสมกบั ขนาดหน้าจอของอุปกรณ์ โดยเจคิวรีโมบายได้เตรียมคาสง่ั สาหรับปรับโครงร่าง ได้อย่างอตั โนมตั ิ ซ่ึงจะใช้เคร่ืองมอื ท่เี รียกว่า ตะแกรง (Grid) ตะแกรง (Grid) ท่เี จคิวรีโมบายเตรียมมาให้น้ัน จะเป็นการใช้พ้ืนท่แี นวนอน คิด เป็นความกว้าง 100% สาเหตุท่ใี ช้ เป็น % เน่ืองจากอุปกรณ์แต่ละชนิดมีขนาดความกว้าง

269 หน้าจอแตกต่างกนั เช่น ขนาดความกว้างจอ iPad กบั iPhone เป็นต้น ดังน้ันการใช้ความ กว้างเป็น % จะสะดวกต่อผู้ออกแบบเวบ็ ไซตใ์ นการกาหนดสว่ นประกอบ ตะแกรง (Grid) ทเ่ี จคิวรีโมบายเตรียมมาให้น้ัน มี 5 ลกั ษณะ ดงั ภาพท่ี 8.14 ภาพท่ี 8.14 ลักษณะพ้ืนทข่ี องตะแกรงข้อมลู ภาพท่ี 8.15 ตัวอย่างการใช้งานตะแกรงแบบ 2 คอลมั น์

270 โครงร่างเชิงตอบสนอง หรือ ตะแกรงเชิงตอบสนอง (Responsive Grids) คือ ตะแกรง หรือ ตาราง ท่ตี อบสนองผู้ใช้ กรณีท่หี น้าจอ Web Browser มีการ ปรับเปล่ียน ขนาดไป หรือ แกนท่ีใช้อุปกรณ์เปล่ียนไป หน้าเวบ็ กจ็ ะถูกปรับให้สอดคล้องกับหน้าจอ ขนาดน้ันๆ โดยทาการเพ่ิม ui-responsive ในสว่ นของ Class ใน div รูปแบบการกาหนดโครงร่างเชงิ ตอบสนอง <div class=\"ui-grid-b ui-responsive\"> ภาพท่ี 8.16 ตัวอย่างโครงร่างเชิงตอบสนอง (Responsive Grids)

271 สรุป ผู้ออกแบบและพัฒนาเวบ็ ไซต์จาเป็นต้องออกแบบเวบ็ ไซต์ให้สามารถแสดงผลใน ทุกๆ อปุ กรณไ์ ด้อย่างถูกต้อง และมีการปรับโครงร่างเวบ็ ให้เหมาะสมในแต่ละอุปกรณ์ เช่น คอมพิวเตอร์ส่วนบุคคล หรือ คอมพิวเตอร์โนต็ บุคจะมีพ้ืนท่แี สดงผลในแนวนอนมากกว่า อุปกรณ์ประเภทโทรศัพท์สมาร์ทโฟนและแทบ็ เบ็ต เป็ นต้น โดยเจคิวรีโมบาย (Jquery mobile) เป็นกรอบแนวคิด (Framework) ในการพัฒนาโมบายเวบ็ แอพ็ พลิเคช่ัน (Mobile Web Application) ซ่ึงทาให้รูปแบบของหน้าเวบ็ เพจสามารถทางานได้อย่างเหมาะสมบน เวบ็ เบราเซอร์ท่อี ยู่บนสมาร์ทโฟน (Smartphones) หรือแทบ็ เบต็ (Tablets) ได้ เจคิวรีโม บายมีพ้ืนฐานมาจากมาตรฐาน HTML5 CSS3 และ JAVA SCRIPT ดังน้ันเจคิวรีโมบายจะ ช่วยให้นักพัฒนาสามารถออกแบบหน้าจอเว็บท่ีสอดคล้องกับประสบการณ์ผู้ใช้ (User experience) อุปกรณ์เคล่อื นทไ่ี ด้ดี นอกจากน้ีเจคิวรีโมบายสามารถทางานได้บนเบราเซอร์ห ลายย่หี ้อ จงึ ทาให้การพัฒนามคี วามสะดวกมากย่งิ ข้นึ การใช้เจคิวรีโมบายจะทาให้นักพัฒนา ออกแบบหน้าจอเว็บเพจได้อย่างเหมาะสมและไม่ต้องเสียเวลาในการประมาณพ้ืนท่ขี อง เคร่ืองมือทป่ี รากฎบนเวบ็ เพจ คาถามทา้ ยบท 1. จงอธบิ ายความหมายของเวบ็ เชิงตอบสนอง 2. จงอธบิ ายกรอบแนวคดิ เวบ็ เชิงตอบสนองของเจควิ ร่ีโมบาย 3. จงอธบิ ายการใช้งานเจคิวรโี มบายท้งั 2 วธิ กี าร 4. จงอธบิ ายการสร้างเพจของเจคิวรีโมบาย พร้อมยกตวั อย่าง 5. จงอธบิ ายการสร้างกล่องข้อความโต้ตอบ พร้อมยกตวั อย่าง 6. จงอธบิ ายการเปล่ียนหน้าเพจ พร้อมยกตวั อย่าง 7. จงอธบิ ายการสร้างป่ ุมและปรับการเรียงตัวของป่ ุม พร้อมยกตัวอย่าง 8. จงอธบิ ายการสร้างโครงร่างเชงิ ตอบสนอง พร้อมยกตวั อย่าง

272 เอกสารอา้ งอิง ณัฐภัทร แก้วรัตนภทั ร์. (2558). คู่มือการพัฒนา MOBILE WEB ด้วย JQUERY MOBILE. URL http://www.elfhs.ssru.ac.th/nutthapat_ke/file.php/1/ JQUERYMOBILE_NUTTHAPAT.pdf Gillenwater, Zoe Mickley (December 15, 2010). Examples of flexible layouts with CSS3 media queries. Stunning CSS3. p. 320. Joel Sklar. (2014). Principles of Web Design, Sixth Edition. Cengage Learning Asia. Jon Duckett. (2011). HTML and CSS : Design and Build Websites. John Wiley & Sons Inc. Tafreshi, Amir E. Sarabadani; Marbach, Kim; Norrie, Moira C. (2017). Proximity- Based Adaptation of Web Content on Public Displays. International Conference on Web Engineering (ICWE):Web Engineering. Springer, pp. 282–301.

273 บรรณานุกรม ณัฐภทั ร แก้วรัตนภทั ร์. (2558). คู่มอื การพัฒนา MOBILE WEB ด้วย JQUERY MOBILE. URL http://www.elfhs.ssru.ac.th/nutthapat_ke/file.php/1/ JQUERYMOBILE_NUTTHAPAT.pdf ราชกจิ จานุเบกษา. (2555). ประกาศกระทรวงอตุ สาหกรรม เร่ืองกาหนดมาตรฐาน ผลติ ภัณฑอ์ ุตสาหกรรม: ข้อกาหนดการทาให้เน้ือหาเวบ็ สามารถเข้าถงึ และใช้ ปร ะ โ ยช น์ ไ ด้ . สืบ ค้ น จ าก http://www.ratchakitcha.soc.go.th/DATA/PDF/ 2556/E/027/17.PDF สานักงานปลดั กระทรวงเทคโนโลยสี ารสนเทศและการส่อื สาร. (2553). แนวทางการพัฒนา เวบ็ ไซตท์ ท่ี ุกคนเข้าถึงได้ TWCAG2010 (Thai Web Content Accessibility Guidelines 2010). สบื ค้นจาก http://www.mict.go.th/assets/portals/1/files/ download/580324_thwcag2010.pdf Accot, Johnny; Zhai, Shumin (2002). More than dotting the i's—foundations for crossing-based interfaces. Proceedings of ACM CHI 2002 Conference on Human Factors in Computing Systems: pp.73-80. Accot, Johnny; Zhai, Shumin (2003). Refining Fitts’ law models for bivariate pointing. Proceedings of ACM CHI 2003 Conference on Human Factors in Computing Systems. pp.193-200. Banerjee, J. C. (1994). Gestalt Theory of Perception. Encyclopaedic Dictionary of Psychological Terms. M.D. Publications Pvt. Ltd. pp. 107-108. Card, Stuart K.; Moran, Thomas P.; Newell, Allen (1983). The Psychology of Human–Computer Interaction. Hillsdale, NJ: L. Erlbaum Associates. Cailliau, Robert (1995). A Little History of the World Wide Web. World Wide Web Consortium. URL: https://www.w3.org/History.html Cailliau, Robert (1995). The CSS saga. World Wide Web Consortium. URL https://www.w3.org/Style/LieBos2e/history/ Cailliau, Robert (1995). The CSS saga. World Wide Web Consortium. URL https://www.w3.org/Style/LieBos2e/history/ Clark Wimberly. (2015) Reimagining the Web Design Process. URL: http://sixrevisions.com/web_design/reimagine-web-design-process/

274 Cockburn, Andy; Gutwin, Carl; Greenberg, Saul (2007). A predictive model of menu performance. Proceedings of the SIGCHI conference on Human factors in computing systems. San Jose, California. 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 335- 352. URL: http://link.springer.com/chapter/10.1007%2F3-540-45144- 7_32 Djamasbi, Soussan. (2014). Eye Tracking and Web Experience. AIS Transactions on Human-Computer Interaction, (6)2, pp. 16-31. Fitts, Paul M.; Peterson, James R. (1964). Information capacity of discrete motor responses. Journal of Experimental Psychology. 67(2). pp.103-112. Geoff Hart. (2012). Gestalt theory and visual design. Retrieved 1 July 2016. URL: http://www.geoff-hart.com/articles/2012/gestalt.html Gillenwater, Zoe Mickley. (2010). Examples of flexible layouts with CSS3 media queries. Stunning CSS3. p. 320. Goldstein, E. Bruce. (2009). Perceiving Objects and Scenes § The Gestalt Approach to Object Perception\". Sensation and perception (8th ed.). Cengage Learning. Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology. 4(1). pp. 11-26. 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. ISO 9660:1988 (2015). Information processing -- Volume and file structure of CD-ROM for information interchange. URL https://www.iso.org/standard/ 17505.html Jakob Nielsen. (2006). F-Shaped Pattern For Reading Web Content. Retrieved from https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ Joel Sklar. (2015). Principles of Web Design. Joel Sklar (6th ed.). Thomson South- Western.

275 Jon Duckett. (2011). HTML and CSS : Design and Build Websites. John Wiley & Sons Inc. Lidwell, W.I.L.L.I.A.M, Holden , K.R.I.T.I.N.A. & Butler, J.I.L.L. (2010). Universal Principles of Design. United States of America: Rockport Publishers, Inc. Murugesan, S. et al. \"Web Engineering: A new Discipline for Development of Web- Based Systems\", WebEngineering2000, LNCS2016, pp. 3-13, 2001. Nielsen, Jakob; Tahir, Marie. (2001), Homepage Usability: 50 Websites Deconstructed, New Riders Publishing. Palmer, Sean B.; Berners-Lee, Tim (2001). Enquire Manual — In HyperText. Retrieved 5 January 2015. URL: https://www.w3.org/People/Berners- Lee/EnquireManual.htm Palmer, Stephen E. (2003). Visual Perception of Objects. In Healy, Alice F.; Proctor, Robert W.; Weiner, Irving B. Handbook of Psychology: Experimental psychology. 4. John Wiley and Sons. Rosati, L. (2013). How to design interfaces for choice: Hick-Hyman law and classification for information architecture. In Slavic, A.; Salah, A.; Davies, C. Classification and visualization: interfaces to knowledge: proceedings of the International UDC Seminar. The Hague, The Netherlands. pp. 125-138. Roy, Q.; Malacria, S.; Lecolinet, E.; Guiard, Y.; Eagan, J. (2013). Augmented Letters: Mnemonic Gesture-Based Shortcuts. Proceedings of the SIGCHI conference on Human factors in computing systems. Paris, France. 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 Tafreshi, Amir E. Sarabadani; Marbach, Kim; Norrie, Moira C. (2017). Proximity- Based Adaptation of Web Content on Public Displays. International Conference on Web Engineering (ICWE):Web Engineering. Springer, pp. 282–301.

276 Thomas A. Powell.(2003) Web Design: The Complete Reference. McGraw-Hill Publishing Company Limited. W3C. (2008). Web Content Accessibility Guidelines (WCAG) 2.0. Retrieved from: https://www.w3.org/TR/WCAG20/ W3C. (2011). CSS Validator. URL: https://jigsaw.w3.org/css- validator/validator.html.en ______. (2011). Selectors. URL: https://www.w3.org/wiki/CSS/Selectors ______. (2011). Selectors. URL: https://www.w3.org/wiki/CSS/Selectors _____ G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text. URL https://www.w3.org/ TR/WCAG20-TECHS/G18.html _____ (1996). A Standard Default Color Space for the Internet - sRGB [sRGB]. URL http://www.w3.org/Graphics/Color/sRGB.html _____ (1998). [IEC-4WD] IEC/4WD 61966-2-1: Colour Measurement and Management in Multimedia Systems and Equipment - Part 2.1: Default Colour Space - sRGB. URL http://www.w3.org/Graphics/Color/sRGB.html _____ Web Content Accessibility Guidelines 2.0 (WCAG 2.0) World Wide Web Consortium (W3C), URL http://www.w3.org/TR/WCAG20/