การใช้งานโปรแกรมประยุกต์บนอุปกรณ์คอมพิวเตอร์พกพา

บทที่ 1 ความรู้ท่วั ไปเกยี่ วกบั Web Technology การตดิ ตัง้ และใชโ้ ปรแกรม Intel@XDK เวบ็ เทคโนโลยี (web technology) เทคโนโลยีเว็บยคุ Web 1.0 ในยคุ แรกซง่ึ ขณะนนั้ ยงั ไมม่ กี ารแบง่ ยคุ ของเทคโนโลยีเว็บ เวบ็ ไซตบ์ นอินเทอรเ์ น็ต ถือไดว้ า่ เป็นเพียงจดุ เรม่ิ ตน้ การเขา้ ถึงค่อนขา้ งลาบาก มีองคป์ ระกอบและเทคนคิ คอ่ นขา้ งมากมายไมว่ า่ จะเป็นโปรแกรม browser หรอื อปุ กรณเ์ ช่ือมตอ่ เครอื ขา่ ยท่ียคุ ตน้ ๆ ใชโ้ มเด็มเป็นสอ่ื การในการเช่ือมตอ่ ไปยงั ผใู้ หบ้ รกิ ารอินเทอรเื น็ตท่เี รยี กวา่ ISP ซง่ึ ทาใหค้ า่ ใชจ้ ่ายในการเขา้ ถงึ ระบบเครอื ขา่ ยสมยั นนั้ มรี าคาคอ่ นขา้ งสงู ประสทิ ธิภาพการแสดงผลท่ีต่าอนั เน่ืองมาจากความเรว็ ชอ่ งทางการสง่ ผ่านขอ้ มลู คอ่ นขา้ งจากดั จงึ ยงั ไมเ่ ป็นท่แี พรห่ ลายมากนกั มเี พียงกลมุ่ คนหรอื องคก์ รเฉพาะ เท่านนั้ ท่ใี ชง้ าน ดงั นนั้ การใชง้ านเครอื ข่ายอินเทอรเื น็ตในดา้ นการศกึ ษาในยคุ ตน้ ๆ จงึ ยงั ไมเ่ ป็นท่ี แพรห่ ลายนกั มีเพียงการสง่ ข่าวสารกนั ในระหวา่ งหน่วยงานการศกึ ษาท่ีเป็นเครอื ข่าย กนั เทา่ นนั้ แหล่งเรยี นรูใ้ นโลกออนไลนก์ ็ยงั อยใู่ นลกั ษณะวงจากดั ท่ยี งั ไมเ่ ปิดกวา้ ง ทา ใหเ้ วบ็ ไซต์ ในยคุ นนั้ มลี กั ษณะการแสดงเนือ้ หาเป็นขอ้ ความเป็นหลกั โดยมภี าพน่ิง (ขนาดเลก็ )เป็นสว่ นประกอบ การแสดงผลในขณะนนั้ ก็ยงั คงตอ้ งใชเ้ วลาคอ่ นขา้ งมาก ดงั นนั้ การใชง้ านสว่ นใหญ่จะเป็นในลกั ษณะของการรบั ส่งข่าวสารผ่านอเี มล์ และในช่วงปลายของยคุ Web 1.0 พฒั นาการดา้ นเครอื ขา่ ยและการสอื่ สาร สง่ ผลให้ ชอ่ งทางและความเรว็ ในการรบั สง่ ขอ้ มลู บนอินเทอรเ์ นต็ ทาไดด้ ีขนึ้ นอกจากนี้ เทคโนโลยีคอมพวิ เตอร์ และระบบปฎบิ ตั ิการก็มีพฒั นาการท่ดี ีขนึ้ เทคโนโลยขี อง

Browser มกี ารตอบสนองการแสดงผลท่ีมปี ระสิทธิภาพท่ีดกี วา่ แตเ่ ดมิ ทาใหก้ าร แสดงผลทางเวบ็ สามารถรองรบั ไฟลภ์ าพและเทคนิคเวบ็ ไดส้ มบรู ณม์ ากย่ิงขนึ้ แตก่ ็ยงั ถือวา่ เว็บในช่วงนนั้ เป็นเว็บในลกั ษณะการส่ือสารทางเดียว (One-way Communication) เพราะไมม่ ี การตอบรบั จากผทู้ ่ไี ดร้ บั ขอ้ มลู หรอื ท่ีเรยี กวา่ “Read- Only” เจา้ ของเว็บไซต์ เป็นผผู้ ลติ เนือ้ หา และผทู้ ่ตี อ้ งการขอ้ มลู จะเขา้ ไปอ่านจาก เว็บไซต์ หรอื ทาการคน้ หาจาก Search Engine ซง่ึ เป็นเครอ่ื งมือหรอื โปรแกรมในการ คน้ หาเว็บตา่ ง ๆเป็นสว่ นใหญ่ ผเู้ ขา้ ชมเว็บไซต์ สว่ นใหญ่สามารถทาไดเ้ พียงรบั ขอ้ มลู จากเนือ้ หาของเว็บไซต์ ทางเดียวเทา่ นนั้ ไมม่ ีโอกาสในการแสดงความคดิ เหน็ หรอื มี การโตต้ อบกนั ระหวา่ งเจา้ ของเวบ็ ไซต์ กบั ผเู้ ขา้ ชมเว็บไซต์ ได้ ถงึ แมว้ า่ ในการพฒั นา ตอ่ มาจะมีการนากระดานขา่ ว (web board) มาใชเ้ ป็นแหลง่ ท่ีใหผ้ เู้ ขา้ ชมเวบ็ ไซต์ สามารถแสดงความคดิ เหน็ หรอื แลกเปลีย่ น ขอ้ มลู ขา่ วสารกนั ได้ แตก่ ระดานขา่ วยงั ไมไ่ ดม้ กี ารจดั เก็บขอ้ มลู อยา่ งเป็นระบบเพ่ือรองรบั การเขา้ ชมจากผชู้ มเวบ็ ไซต์ คนอ่นื รวมไปถึงไม่มกี ารสนบั สนนุ หรอื ตวั ช่วยในการคน้ หาขอ้ มลู สาหรบั ผเู้ ขา้ ชมเวบ็ ไซต์ ซง่ึ ขอ้ จากดั ตา่ ง ๆสง่ ผลใหม้ ีพฒั นาคดิ คน้ เวบ็ ไซต์ ใหอ้ านวยความสะดวกตอ่ ผใู้ ชง้ านได้ มากขนึ้ จงึ กลายมาเป็นเวบ็ ไซตย์ คุ Web 2.0 ในเวลาตอ่ มา ตวั อยา่ งลกั ษณะของเวบ็ ไซต์ ในยคุ Web 1.0 ท่ีเห็นไดช้ ดั และถือเป็นยคุ ทอง ก็ คือ การสรา้ งเว็บไซต์ บน GeoCities ซง่ึ เป็นผใู้ หบ้ รกิ ารฟรโี ฮสตงิ้ ซง่ึ ผเู้ ขียนตอ้ งมีความรู้ พืน้ ฐานในการทาเว็บไซต์ และยากท่ีจะแบง่ ปันเนือ้ หาออกไป เทคโนโลยีเวบ็ ในยคุ Web 1.0 ท่ีเหน็ ไดช้ ดั เจน ก็คือ doubleClick.com ระบบแปะแบนเนอรโ์ ฆษณาตายตวั ofoto.com เว็บอลั บมั้ เก็บรูปออนไลนแ์ บบเกา่ akamai.com เวบ็ ศนู ยก์ ลางรบั ฝากไฟลใ์ หด้ าวนโ์ หลด

britannica.com จบั สารานกุ รมมาออนไลนใ์ สเ่ วบ็ Homepage สว่ นตวั ผเู้ ขียนตอ้ งมีความรูพ้ นื้ ฐานการทาเว็บ และยากท่ีจะแบง่ ปันสง่ ตอ่ เนือ้ หาออกไป แข่งกนั จอง Domain Name เป็นเจา้ ของช่ือเว็บดี ๆ ไวข้ ายเก็งกาไร เทคโนโลยีเว็บยคุ Web 2.0 จากเว็บรุน่ Web1.0 ท่ีผา่ นมา ตวั เนือ้ หาท่ีเผยแพรบ่ นเว็บไซตท์ ่วั ไปนนั้ ภาพรวมของ ลิขสทิ ธิ์จะเป็นของเจา้ ของเว็บ ท่ีมีสทิ ธิใน content ทงั้ หมด มีสทิ ธิ์ท่ีไมย่ ินยอมนา เนือ้ หาสาระท่ที าขนึ้ ไปลง หรอื คดั ลอกไปยงั เว็บท่อี ่ืน นอกจากนีย้ งั อยใู่ นลกั ษณะ read only หรอื ไดแ้ ค่อา่ นอยา่ งเดยี ว แตด่ ว้ ยความเป็นเครอื ข่ายท่ีเปิดกวา้ งของ Web2.0 กตกิ านีจ้ งึ เปล่ยี นไป เจา้ ของเนือ้ หากลบั ตอ้ งการใหเ้ นือ้ หาของตวั เอง แพรห่ ลายมากท่ีสดุ ตวั อยา่ งท่เี หน็ ไดช้ ดั ก็คือ YouTube ท่มี ีสว่ นคดั ลอก Code สนั้ ๆ แลว้ นาคลิปไปฉายในเวบ็ ใดก็ได้ หรอื Blog แทบทกุ แหง่ ก็มี RSS ใหผ้ อู้ ่านเขา้ ดผู า่ น โปรแกรมอ่ืน ๆ หรอื เว็บอ่นื ๆ ได้ Web 2.0 ไดป้ ฎิวตั จิ าก read only ไปสกู่ ระบวนการ เผยแพร่ ขอ้ มลู แสดงความคิดเหน็ เพ่มิ เตมิ และรว่ มกนั ใหข้ อ้ มลู กลายเป็นสงั คมแหง่ การแลกเปล่ยี นเรยี นรู้ จากการท่ี“มนษุ ยเ์ ป็นสตั วส์ งั คม (Human being is social animal)” คากลา่ วของอรสิ โตเตลิ้ นกั ปราชญผ์ ยู้ ่งิ ใหญ่ เป็นการอธิบายถึงการใชช้ ีวิต ของมนษุ ยท์ ่จี ะตอ้ งมีการพง่ึ พาอาศยั กนั ทากิจกรรมรว่ มกนั เพ่อื ความอยรู่ อดและเพ่ือ สรา้ งความสขุ ความม่นั คงใหก้ บั ชีวิต สงั คมจงึ เป็นแหลง่ รวมศนู ยท์ างความคดิ ท่ี มนษุ ยไ์ ดส้ รา้ งขนึ้ มา เพ่ือแสวงหาคาตอบทกุ ๆอย่างใหก้ บั ตนเอง ซง่ึ เหตผุ ลแหง่ การท่ี มนษุ ยเ์ ป็นสตั วส์ งั คม อีกทงั้ ยงั มีความตอ้ งการอย่างตอ่ เน่ือง ในการทาสิง่ ตา่ ง ๆ เพ่ือใหเ้ กิดความสขุ และสะดวกสบายใจชีวติ จงึ ทาใหม้ นษุ ยเ์ ป็นส่งิ มีชีวิตท่ีมกี าร พฒั นาและคน้ หาหนทางตา่ ง ๆเพ่ือตอบสนอง ความตอ้ งการของตน ในโลกของ

เทคโนโลยีเวลิ ดไ์ วดเ์ ว็บ และการออกแบบเว็บไซตก์ ็เช่นกนั การท่ีเวบ็ ไซต์ แบบเดิมนนั้ ไมส่ ามารถตอบสนองความตอ้ งการในการแสดงความคิดเหน็ การโตต้ อบ หรือการ เช่ืองโยงและการสรา้ งเครอื ข่ายสงั คม จงึ ทาใหม้ ีการพฒั นาและปฏวิ ตั ิรูปแบบของ เวบ็ ไซต์ และเทคโนโลยีตา่ ง ๆ เพ่ือใหเ้ กิดการตอบสนองตอ่ ความตอ้ งการมากขนึ้ ในยคุ ของ Web 2.0 ท่ีอปุ กรณค์ อมพวิ เตอรแ์ ละองคป์ ระกอบตา่ ง ๆ ท่ตี อ้ งใชใ้ นการ เลน่ อินเทอรเ์ น็ตมีราคาถกู ลง มกี ารสง่ เสรมิ และใหค้ วามรูเ้ ก่ียวกบั การใชง้ าน คอมพิวเตอรเ์ พ่มิ มากขนึ้ และอินเทอรเื นต็ ไดเ้ ขา้ มามีบทบาทในชีวิตประจาวนั ทาให้ จานวนผใู้ ชง้ านอินเทอรเ์ นต็ ขยายวงกวา้ งไปสกู่ ลมุ่ คนแทบทกุ กลมุ่ ไมข่ ีดเสน้ กนั ท่อี ายุ หรอื ระดบั การศกึ ษา จากการเขา้ ถึงท่งี า่ ยทาใหผ้ ใู้ ชง้ านอินเทอรเ์ น็ตเพ่มิ จานวนสงู ขนึ้ หลายเทา่ เม่ือเทียบกบั ยคุ แรกๆ ท่ีอินเทอรเ์ นต็ ยงั ไมม่ บี ทบาทตอ่ ชีวิตประจาวนั มาก นกั ซง่ึ สง่ ผลใหค้ วามตอ้ งการในการใชง้ านสว่ นตา่ ง ๆ เพ่มิ มากขนึ้ จงึ ทาใหม้ ีตอ้ งมี การพฒั นาเว็บไซต์ เพ่ือใหต้ อบสนองความตอ้ งการและรอบรบั การใช้ งานไดอ้ ย่างมี ประสทิ ธิภาพ “Read – Write - Collaborate” เป็นการกลา่ วถึงลกั ษณะของการแสดงเนือ้ หาและการโตต้ อบกนั ระหวา่ งเจา้ ของ เว็บไซต์ กบั ผเู้ ขา้ ชมเว็บไซต์ ในยคุ Web 2.0 ซง่ึ มีลกั ษณะเป็นการท่ีมีการแบง่ ปัน ความรู้ แลกเปล่ยี นความคิดเห็นซง่ึ กนั และกนั มากกวา่ ท่ีจะเป็นเพียงการนาเสนอ ขอ้ มลู ผา่ นเว็บไซต์ เพียงอย่างเดียว ซง่ึ เป็นจดุ เรม่ิ ตน้ ของการรว่ มระดมความคดิ เหน็ การรว่ มแชรค์ วามรู้ ในสาระเร่อื งเดียวกนั โดยผเู้ ขา้ ชมสามารถทาการแสดงความ คิดเหน็ หรอื ทาการสรา้ งเนือ้ หา โดยไมต่ อ้ งเป็นหนง่ึ ในทีมสรา้ งเนือ้ หาหรอื เจา้ ของ เว็บไซต์ ได้ อกี ทงั้ ผเู้ ขา้ ชมยงั สามารถกาหนดคณุ คา่ ของเวบ็ ไซต์ หรอื บทความผา่ น กระบวณการ ตา่ ง ๆ เชน่ การใหค้ ะแนนเนือ้ หา การแนะนาบทความใหก้ บั ผอู้ ่ืนเป็นตน้

รูปแบบหรอื ลกั ษณะโดยท่วั ไปของเว็บไซต์ ในยคุ Web 2.0 นนั้ มกี ารพฒั นาใหม้ กี าร โตต้ อบ ระหวา่ งผใู้ ชไ้ ดง้ า่ ยขนึ้ และมีความหลากหลายใน การตอบสนองความ ตอ้ งการของผใู้ ชม้ ากขนึ้ เช่น ผใู้ ชส้ ามารถสรา้ งเนือ้ หาใหมไ่ ด้ อยา่ งรวดเรว็ โดยไมต่ อ้ ง มีความรูท้ างเทคนิค , สามารถเผยแพรค่ วามรูแ้ ละประสบการณข์ องตนไดอ้ ย่าง งา่ ยดาย, สามารถแบง่ ปันขอ้ มลู ไปยงั เครอื ข่ายออนไลน,์ สามารถแสดงความคิดเห็น และทศั นคตอิ ยา่ งตรงไปตรงมา และเปิดกวา้ ง เป็นตน้ สง่ิ ตา่ ง ๆเหลา่ นีแ้ สดงใหเ้ ห็นวา่ Web 2.0 มสี ว่ นช่วยในการสนบั สนนุ การสรา้ งสงั คมท่ี มคี วามเกือ้ หนนุ กนั ทางดา้ นความรู้ และการรวมกลมุ่ ของเนือ้ หาท่ีเป็นประโยชนท์ ่เี กิด จากการคิดรว่ มกนั การแสดงเนือ้ หา ความรูท้ ่มี ี เป็นสงั คมแหง่ การแบง่ ปัน ตวั อยา่ ง ลกั ษณะของเวบ็ ไซต์ ในยคุ Web 2.0 เชน่ Wikipedia ซง่ึ เป็นสารานกุ รมออนไลน์ หลายภาษาท่ีแจกจ่ายในลกั ษณะเนือ้ หาเสรที ่ใี หผ้ ู้ ใชส้ ามารถสรา้ ง แกไ้ ข และ ปรบั ปรุงเนือ้ หารว่ มกนั ไดอ้ ยา่ งแทบไมม่ ขี ีดจากดั , Flickr แหลง่ ออนไลนใ์ นการ “ฝาก และแสดง” ภาพถา่ ยดจิ ิตอล โดยมีการใหใ้ สค่ าจากดั ความของรูปภาพหรอื ท่ีเรยี กวา่ “Tag” เพ่ือเป็นตวั ชว่ ยในการจดั ระบบและการคน้ หาขอ้ มลู , Blog เว็บไซต์ สว่ นตวั สาเรจ็ รูปท่ีช่วยใหก้ ารเผยแพรค่ วามรูแ้ ละประสบการณท์ าได้ อยา่ งง่ายดาย เทคโนโลยีเวบ็ ในยคุ Web 2.0 นีท้ ่เี หน็ ไดช้ ดั เจน ก็คือ Google AdSense ระบบโฆษณาเป็นลงิ คต์ ามแต่คาท่ีผใู้ ชค้ น้ หา flickr.com เว็บอลั บมั้ เกบ็ และแชรร์ ูปออนไลนท์ ่มี ีการโยงใยเป็นชมุ ชน สง่ ตอ่ รูปกนั ง่าย BitTorrent ระบบท่ผี ใู้ ชต้ า่ งก็ดาวนโ์ หลดไฟลจ์ ากกนั และกนั เอง

wikipedia.com เว็บสารานกุ รมท่ีผใู้ ชบ้ ญั ญตั คิ ากนั เอง ใหค้ วามหมายกนั เอง และ แกไ้ ขคาของคนอ่ืนไดต้ ลอดเวลา Blog เขียนงา่ ย ใสร่ ูป เสียง คลปิ ไดง้ ่ายๆ เหมือนสง่ เมล เผยแพรส่ ง่ ตอ่ ไดก้ วา้ งขวาง SEO (Search Engine Optimization) ลงทนุ กบั เทคนิคทาใหล้ ิงคเ์ วบ็ บรษิ ัทตวั เองได้ อยหู่ นา้ แรกบนๆ ใน Google, เสริ ช์ อ่ืน ๆ เทคโนโลยีเวบ็ ยคุ Web 3.0 แนวโนม้ ในสว่ นของ Web 3.0 ท่ีมีการกลา่ งถึงกนั มากขนึ้ ในวงการไอทนี นั้ ยงั ไมม่ ี รายละเอยี ดท่ชี ดั เจนมาก นกั เน่ืองจากยงั ไมม่ กี ารนิยามและตวั อย่างของเว็บไซต์ ออกมาใหเ้ หน็ กนั อยา่ งชดั เจน เป็นเพียงแนวโนม้ ของการพฒั นาท่ีกลมุ่ คนบางกลมุ่ ท่ี ตอ้ งการพฒั นาเว็บไซต์ ใน อนาคตใหส้ ามารถตอบสนองความตอ้ งการของผใู้ ชม้ าก ขนึ้ เทา่ นนั้ แนวคดิ ของ Web 3.0 นนั้ เป็นเหมอื นกนั นา Web 2.0 มาทาการพฒั นาและตอ่ ยอด โดยมีการปรบั ปรุงและแกไ้ ข Web 2.0 ใหด้ ีขนึ้ เน่ืองจากในยคุ Web 2.0 นนั้ ผใู้ ชม้ ีการ สรา้ งเนือ้ หาไดอ้ ย่างสะดวกและงา่ ยดายทาให้ มจี านวนเนือ้ หาจานวนมากไมว่ า่ จะ เป็น บลอ็ ค, รูปภาพ, ไฟลม์ ลั ติมเี ดียตา่ ง ๆ ซง่ึ สง่ ผลตอ่ มาก็คอื ปัญหาในการคน้ หา และเขา้ ถึงขอ้ มลู จงึ มคี วามจาเป็นท่ีจะตอ้ งหาแนวคดิ หรอื วธิ ีการในการจดั การขอ้ มลู ใหเ้ ป็นระบบ และมีการเช่ือมโยงถงึ กนั เพ่อื เพ่ิมประสิทธิภาพในการคน้ หาและเขา้ ถงึ โดยแนวคิดดงั กลา่ วนนั้ เป็นท่ีมาของการพฒั นาไปสยู่ คุ Web 3.0 น่นั เอง “Read – Write – Execute” เป็นการคาดการณล์ กั ษณะของการแสดงเนือ้ หาและการโตต้ อบกนั ระหวา่ งเจา้ ของ เว็บไซต์ และผเู้ ขา้ ชมเวบ็ ไซต์ ในยคุ Web 3.0 ซง่ึ มลี กั ษณะเป็นการท่ีผใู้ ชส้ ามารถอา่ น

เขียน และทาการจดั การเนือ้ หาและปรบั แตง่ แกไ้ ขขอ้ มลู หรอื ระบบไดอ้ ย่างอสิ ระ หรอื ในอกี ลกั ษณะหนง่ึ ของ Web 3.0 คอื “Read – Write – Relate” เป็นลกั ษณะของการ เช่ือมโยงขอ้ มลู เขา้ ดว้ ยกนั มากขนึ้ แทนท่จี ะเป็นเพียงขอ้ มลู ท่ีสามารถอา่ นและเขียน ไดเ้ ท่านนั้ ซง่ึ จะมีประโยชนต์ อ่ มาคือเม่ือเราสามารถหาความสมั พนั ธแ์ ละการ เช่ือมโยง ขอ้ มลู ตา่ ง ๆได้ ก็จะทาใหเ้ ราเขา้ ใจความหมายของเครอื ข่ายการเช่ือมโยง ตา่ ง ๆมากขนึ้ รูปแบบหรอื ลกั ษณะโดยท่วั ไปของเว็บไซต์ ในยคุ Web 3.0 นนั้ มีการกลา่ วกนั วา่ เว็บไซต์ จะมีการพฒั นาใหก้ ลายเป็น Semantic Web ซง่ึ เป็นการสรา้ งเครอื ข่ายของ ขอ้ มลู ขนึ้ มาเพ่ือความสะดวกในการคน้ หาและเขา้ ถึงไดอ้ ยา่ งรวดเรว็ ทาใหม้ กี าร เช่ือมโยงความสมั พนั ธก์ บั เแหลง่ ขอ้ มลู อ่ืน ๆ ท่มี เี นือ้ หาสมั พนั ธก์ นั ไดอ้ ย่างมี ประสิทธิภาพ รวมไปถงึ การทาใหเ้ วบ็ ไซต์ มีลกั ษณะของ Artificial intelligence (AI) ซง่ึ ทาใหเ้ วบ็ ไซต์ สามารถตอบสนองผใู้ ชง้ านไดอ้ ยา่ งชาญฉลาด คอมพวิ เตอรส์ ามารถ เขา้ ใจความตอ้ งการของผใู้ ชม้ ากขนึ้ และสามารถแสดงขอ้ มลู เฉพาะสว่ นท่ีตรงตาม ความตอ้ งการของผใู้ ชไ้ ด้ ตวั อยา่ งลกั ษณะเทคโนโลยีของเวบ็ ไซต์ ในยคุ Web 3.0 Search Engine Google ท่เี ม่ือเราทาการสะกดคาท่ีตอ้ งการคน้ หาผดิ Google สามารถรูไ้ ดว้ า่ คาท่ีเราตอ้ งการหาเป็นอะไร และทาการแสดงผลของคาท่ีเรานา่ จะ ตอ้ งการมาให้ แมว้ า่ เรายงั ไมไ่ ดก้ า้ วเขา้ ส่ยู คุ Web 3.0 อยา่ งเต็มตวั แตค่ าดวา่ การมาของเทคโนโลยี เว็บ นามาพาใหเ้ กิดส่ิงใหมๆ่ ท่ีจะเขา้ แทนท่ี เทคโนโลยเี ดมิ หลายประการ อาทิ html 5.0 จะเขา้ บทบงั เทคโนโลยี flash animation ไดอ้ ย่างมปี ระสิทธิภาพหรอื ไม่ วิธีการเรยี นรู้

เทคโนโลยเี ว็บ ไมว่ า่ จะเป็น Web 1.0 หรอื Web 2.0 หรอื ท่ีกาลงั พฒั นากา้ วไปสู่ Web 3.0 ก็ตาม วธิ ีการเรยี นรูพ้ ืน้ ฐานจะไมแ่ ตกต่างกนั มากนกั เพียงแตเ่ ทคโนโลยเี หลา่ นี้ นามาซง่ึ กระบวนการนาเสนอขอ้ มลู ท่ีเสมอื นจรงิ มากย่งิ ขนึ้ มีมิตใิ นการแสดงผลท่ีมี มมุ มองเชงิ สามมิติท่ชี ดั เจน การตอบสนองการแสดงผลท่รี วดเรว็ ระบบมคี วามฉลาด มากขนึ้ ในการเกบ็ ขอ้ มลู จดจาขอ้ มลู ของผใู้ ชง้ าน รวมไปถึงสามารถแสดงผลได้ รวดเรว็ แมว้ า่ ปรมิ าณขอ้ มลู จะใหญ่หรอื มากขนึ้ เวลาในการแสดงผลท่ีเรว็ ขนึ้ แต่ ผลกระทบตอ่ ระบบเวบ็ ไซตย์ คุ เก่าก็คือ ขนาดของ resolution หนา้ จอ การเป็นสอื่ ความรูท้ ่มี ีเพียงขอ้ ความและภาพประกอบ อาจจะไมเ่ พียงพอต่อการเรยี นรู้ ดงั นนั้ ผพู้ ฒั นาเว็บไซตใ์ นยคุ เทคโนโลยี web 1.0 อาจจะตอ้ งปรบั ปรุงหรอื รอื้ หนา้ เวบ็ เกือบ ทงั้ หมด เพ่อื รองรบั การเปลยี่ นแปลงท่แี ปรเปลย่ี นไป การตดิ ตัง้ Intel XDK โปรแกรม intel XDK คือโปรแกรมท่สี ามารถเขียนแอพพลิเคช่นั ผา่ นโปรแกรมไดท้ นั ที เขียนโดยใชภ้ าษา PHPและ JavaScript ในการเขียนแอพพลิเคช่นั สามารถเขียนออกมาไดห้ ลาย แพลตฟอรม์ เช่น android iPhone และอีกมากมายครบั intel XDK เวอรช์ ่นั ใหมส่ ามารถโหลดติตตงั้ บนเครอ่ื งได้ แลว้ ครบั วธิ ีการติดตงั้ โปรแกรม Intel XDK ขนั้ ตอนท่ี 1 เขา้ ไปดาวโหลดไฟล์ จาก http://xdk-software.intel.com

ขนั้ ตอนท่ี 2 ดบั เบิล้ คลิกท่ีไฟล์ xdk_web_win_master_0876 จากนนั้ กด Run ขนั้ ตอนท่ี 3 คลกิ ป่มุ next

ขนั้ ตอนท่ี 4 คลิกป่มุ browse เพ่ือทาการเลือกตาแหน่งท่ตี ดิ ตงั้ ไฟลจ์ ากนนั้ กด next

ขนั้ ตอนท่ี 5 คลิกป่มุ Install เพ่ือทา การตดิ ตงั้ โปรแกรม เม่ือตดิ ตงั้ โปรแกรมเสรจ็ จะแสดง หนา้ โปรแกรม การใชโ้ ปรแกรม Intel@XDK

วิธีสรา้ งโปรเจค สามารถสรา้ งไดห้ ลายแบบครบั ผมขอสรา้ งแบบ Use App Starter คลกิ ท่ี Use App Starter ดา้ นซา้ ย จะแสดงช่องใหก้ รอกช่ือโปรเจคดา้ นขวา และ ให้ เลือกตาแหน่งเก็บไฟล์ และ กดป่มุ CREATE ครบั เม่ือสรา้ งโปรเจคเสรจ็ จะแสดงหนา้ interface design ของแอพพลเิ คช่นั สามารถเพ่มิ จานวนหนา้ ไดห้ ลายหนา้ โดยกดเคร่อื งหมาย +

ในการสรา้ งหนา้ interface มี2แบบคอื แบบลากวาง กบั แบบใชโ้ คด้ เขียนในสว่ นนีจ้ ะ เป็นแบบลากวางครบั 1 สามารถช่ือประเภทขอ้ มลู ตา่ ง ๆได้ ตงั้ id ตวั แปรในการเรยี กใชง้ าน และสามารถ เช่ือมลิงคห์ นา้ ได้ 2 สามารถลาก icon ตา่ ง ๆมาใชไ้ ด้ เช่น textbox, list view, bottom, image และอีก มากมาย ในสว่ นนีจ้ ะเป็นการทา Side Menu 1 คลกิ เลอื ก default Footer ใน NAV 2 จะแสดงชอ่ งใหก้ รอกช่ือเมนู สามารถเปล่ยี นรูปไอคอนได้ 3 จะแสดงหนา้ ตาเมนขู นึ้ มา

การเขียนโคด้ โปรแกรมครบั จะใช้ เป็นภาษา java script จะแสดงโคด้ อยใู่ นหนา้ เดยี ว แบง่ เป็น2สว่ น JavaScriptอย่ขู า้ งบน html อยขู่ า้ งลา่ งครบั บทที่ 2 ความรู้เบอื้ งตน้ เกย่ี วกับ HTML, CSS และ JavaScript

ความรู้พนื้ ฐาน ภาษาHTML5 ภาษา HTML คอื ภาษาพืน้ ฐานท่ีใชใ้ นการสรา้ งและพฒั นาเวบ็ ไซต์ เป็นตน้ กาเนิด ของเวบ็ ไซต์ .ซง่ึ ปัจจบุ นั เทคโนโลยีไดพ้ ฒั นาไปอยา่ งรวดเรว็ และมกี ารพฒั นาภาษา HTML4 ใหก้ ลายเป็น HTML5 เพ่ือตอบสนองความตอ้ งการของผใู้ ชง้ านมากขนึ้ เชน่ การตรวจสอบ Text Field ประเภทตา่ ง ๆ ไดแ้ กต่ รวจสอบอีเมล จรวจสอบ ตวั เลข ตวั เลือกสี ตวั เลอื กวนั เดอื นปี เป็นตน้ ภาษา HTML5หรอื เรยี กวา่ HTMLเวอรช์ ่นั 5เป็นภาษาท่ีถกู พฒั นาขนึ้ เพ่ือ อานวยความสะดวกใหก้ บั ผพู้ ฒั นาเวบ็ ไซตใ์ นดา้ นเวลาและดา้ นอ่นื ๆเช่นผพุ้ ฒั นา เวบ็ ไซตไ์ มจ่ าเป็นตอ้ งเขยี นคาส่งั ตรวจสอบความถกู ตอ้ งของการกรอกนนั้ เป็นอีเมล แทก็ <!doctype> แทก็ <!doctype> ใชใ้ นการประกาศชนิดของเว็บเพจ เพ่ือใหเ้ ว็บเบราเซอรไ์ ดร้ ู้ และ วธิ ีการประมวลผลสาหรบั หนา้ เว็บเพจนนั้ ไดอ้ ยา่ งถกู ตอ้ ง ทงั้ นีข้ อ้ กาหนดในประกาศ doctype ในการ HTML5 นนั้ จะแตกตา่ งไปจาก HTML ก่อนหนา้ นนั้ โดย doctype เป็นรูปแบบสนั้ และงา่ ย แทก็ <html> ใชใ้ นการกาหนดจดุ เรม่ิ ตน้ ของเว็บเพจ HTML ในขณะท่แี ทก็ ปิดคอื </html> เป็นการกาหนดจดุ สนิ้ สดุ แท็ก <html> โดยองคป์ ระกอบตา่ งๆ จะอยใู่ น ภายใน <html> .... </html> แท็ก <head> แท็ก <head> ใชใ้ นการกาหนดขอ้ มลู สว่ นหวั ของเอกสาร หรอื กอ่ นท่ีจะเรม่ิ เนือ้ หา ของเวบ็ เพจ เป็นสว่ นท่ีประกอบไปดว้ ย แท็ก <title></title>, <meta> , <link> หรอื แมแ้ ต่ CSS style JavaScript ตา่ ง ๆ ไวใ้ นสว่ นนีด้ ว้ ย

แท็ก <body> เป็นสว่ นท่ีใชก้ าหนดเนือ้ หาทงั้ หมดของหนา้ เวบ็ เพจ ดงั นนั้ ตอ้ งมสี ว่ นนีอ้ ยเู่ สมอโดย ตอ้ งกาหนดตอ่ จาก <head> โดยเรม่ิ วางท่ีตาแหนง่ หลงั </head> เสมอ ใน HTML กอ่ นหนา้ นี้ แท็ก <body> จะมแี อตทรบิ ิวตห์ ลายอนั ซง่ึ สว่ นใหญ่จะใชใ้ นการกาหนดรู ปบบเนือ้ หาของเวบ็ เพจ เชน่ text, link, a link, bgcolor เป็นตน้ แตใ่ น HTML5 ได้ ยกเลกิ แอตทรบิ วิ ตท์ งั้ หมดแลว้ โดยใหก้ าหนดในรูปแบบผา่ น CSS แทน แตเ่ วบ็ เบรา เซอรก์ ็ยงั คงรองรบั แอตทรบิ วิ ตเ์ หลา่ นีอ้ ยู่ ความรู้พนื้ ฐานภาษา CSS CSS เป็นคาส่งั ท่ีใชค้ กู่ บั HTML เพ่ือใหค้ ณุ ใชจ้ ดั รูปแบบของเว็บเพจของคณุ ไดด้ ี ขนึ้ และแกไ้ ขไดง้ ่ายขนึ้ ในหมวดนีค้ ณุ จะสามารถใช้ CSS เพ่ือเปลี่ยนรูปแบบหนา้ เว็บ เพจคณุ ไดแ้ บบง่ายๆ แนะนาวา่ ควรมพี นื้ ฐานเก่ียวกบั HTML เพ่ือจะไดเ้ ขา้ ใจไดง้ า่ ย ย่งิ ขนึ้ แมว้ า่ ภาษา HTML จะชว่ ยใหเ้ ราสามารถสรา้ งเว็บเพจขนึ้ มาได้ แตก่ ็ยงั ไม่ ครอบคลมุ การแสดงผลทงั้ หมดท่ีเราตอ้ งการอยดู่ ี ดงั นนั้ เราจงึ ใช้ CSS มาเตมิ เตม็ ใน ชอ่ งวา่ งท่ีหายไป CSS ยอ่ มาจาก Cascading Style Sheets เป็นคาส่งั ท่ีเขา้ มาเสรมิ การแสดงผลของ HTML ซง่ึ มีขอ้ ดีมากมายเชน่ 1.คณุ สามารถแกไ้ ขเว็บเพจไดห้ ลายๆหนา้ พรอ้ มกนั 2.ลดปัญหาการแสดงผลท่ีผดิ เพีย้ นเช่น ภาษาตา่ งดาว

3.ช่วยใหก้ ารทาเวบ็ มปี ระสทิ ธิภาพมากขนึ้ 4.ชว่ ยใหก้ ารทาเวบ็ ยืดหยนุ่ มากขนึ้ คณุ อาจไมต่ อ้ งใชค้ าส่งั table ของ HTML เลย ซง่ึ จะทาใหก้ ารแสดงผลของคณุ มคี วามถกู ตอ้ งและ ยืดหยนุ่ มากขนึ้ คณุ สมบตั ิของ CSS 1.สามารถแยกการตกแตง่ เวบ็ ไซต์ ออกจากเนือ้ หา และโครงสรา้ งของ HTML ทา ใหส้ ามารถนาเอกสารหลกั (HTML, PHP, ASP.net, …) ไปใชง้ านกบั Application อ่ืนได้ 2.สามารถแกไ้ ขการตกแต่งเอกสารหลายหนา้ โดยใช้ CSS เพียงชดุ เดียว 3.โหลดไดเ้ รว็ ขนึ้ (โหลดเนือ้ หากอ่ น) 4.กาหนดการแสดงผลใหก้ บั อปุ กรณต์ า่ ง ๆ กนั ได้ เชน่ จอคอมพวิ เตอร์ เคร่อื งพมิ พ์ เครอ่ื งพมิ พอ์ กั ษรเบรลล์ WebTV โทรศพั ทม์ ือถือ แทปเลท ฯลฯ 5.มีขีดความสามารถในการออกแบบท่ีหลากหลาย ซง่ึ วิธีธรรมดาไมส่ ามารถทาได้ ประเภทของ CSS ตามการนาไปใชง้ าน โดยท่วั ไปแลว้ CSS นนั้ แบง่ ออกเป็น 1.In-line Style : เป็นวธิ ีการเขียน CSS ลงไปใน HTML TAG โดยตรง วิธีนีจ้ ะเป็น การบงั คบั ให้ CSS ทางานเฉพาะเจาะจงจดุ นนั้ จดุ เดยี ว ไมส่ ามารถนามาใชซ้ า้ ได้

2.Internal Style : เป็นวธิ ีการเขียน CSS ใหอ้ ยภู่ ายในเอกสารเดียวกบั เอกสารหลกั เช่น HTML จะเขียนไวท้ ่สี ว่ น <HEAD> เป็นตน้ วธิ ีนี้ จะสามารถเรยี กใชง้ าน CSS ชดุ เดียวกนั ไดห้ ลายครงั้ ในเอกสารนนั้ แตไ่ มส่ ามารถเรยี กใชจ้ ากเอกสารอ่ืนได้ 3.External Style Sheet : เป็นวธิ ีการเขียน CSS แบบมาตรฐาน คอื การแยกไฟล์ CSS ออกไปไวภ้ ายนอกเอกสารหลกั วธิ ีนีจ้ ะทาใหส้ ามาร เรยี กใชง้ าน CSS ชดุ เดยี วกนั ไดจ้ ากหลายเอกสาร เป็นวิธีท่ียืดหยนุ่ ในการใชง้ านมากท่ีสดุ จงึ มกั แนะนาให้ ใชว้ ิธีการเขียนแบบนี้ 4.Browser CSS Default : เป็น CSS มาตรฐานท่ีตดิ มากบั Browser ตวั นนั้ ๆ เชน่ เม่ือเราพมิ พ์ <H1> บราวเซอรจ์ ะแสดงผลเป็นหวั ขอ้ ใหญ่ เป็นตน้ โดย Browser แต่ละตวั อาจจะแสดงผลแตกตา่ งกนั เลก็ นอ้ ย ความรู้พนื้ ฐาน JavaScript ความรูพ้ ืน้ ฐานเก่ียวกบั JavaScript JavaScript เป็นภาษาท่ีเป็น Script ท่อี ยใู่ นเวบ็ ไซต์ (ใชร่ ว่ มกบั HTML) เพ่ือให้ เว็บไซตข์ องเราดมู กี ารเคลือ่ นไหว สามารถตอบสนองผใู้ ชง้ านไดม้ ากขนึ้ ยกตวั อยา่ ง Hellomyweb.com ตรงเมนดู า้ นซา้ ยมอื จะเห็นวา่ สามารถคลกิ เพ่ือดหู วั ขอ้ ภายในได้ และสามารถคลิกท่ีลกู ศรสเี ขียวเพ่ือปิดดทู งั้ หมด และลกู ศรสีแดงเพ่ือเปิดทงั้ หมด ขอ้ ดี ของ JavaScript คอื สามารถทาใหผ้ ใู้ ชง้ านใชเ้ ว็บไซตข์ องเราไดง้ ่ายขึน้ รวมถงึ ดงึ ดดู ความสนใจของผใู้ ชง้ านไดอ้ ีกดว้ ย ปัจจบุ นั นี้ JavaScript นนั้ เป็นมาตราฐานท่ีอยใู่ น W3C จงึ ม่นั ใจไดว้ า่ ทกุ ๆ Web browser รองรบั การทางานของ JavaScript แนน่ อน เนือ้ หาเบือ้ งตน้ ท่ีผใู้ ชต้ อ้ งเขา้ ใจมาก่อนลว่ งหนา้ คือ HTML เพ่ือใหส้ ามารถทาความ เขา้ ใชใ้ นเนือ้ หาเรอ่ื งนีไ้ ดง้ ่ายขนึ้

แนะนาตวั JavaScript ดงั นี้ 1.JavaScript นนั้ ออกแบบใหใ้ ชง้ านรว่ มกบั HTML น่นั คือตอ้ งอยรู่ วมไปกบั HTML Code 2.JavaScript เป็น script language ทาใหผ้ ใู้ ชง้ านใชง้ านไดง้ า่ ย ไมจ่ าเป็นตอ้ งมี พืน้ ฐานโปรแกรมมากนกั 3.JavaScript เป็นภาษาท่ีใชท้ รพั ยากรณเ์ ครอ่ื งนอ้ ยมาก (JavaScript นนั้ จะ ประมวลผลท่ีฝ่ังของเครอ่ื งผใู้ ชท้ าใหไ้ มเ่ ป็นภาระกบั เครอ่ื งมากนกั เม่ือเทียบกับ Flash) 4.JavaScript ฟรใี คร ๆก็สามารถใชง้ านได้ บทท่ี 3 การสร้างแอพพลิเคชันด้วยโปรแกรม Inter@XDK .เปิดโปรแกรม Intel XDK V.1494 ขนึ้ มา · สามารถดาวนโ์ หลดไดจ้ าก ท่ี https://app.box.com/s/kcmuy2br92geoue7573p 1.กดท่ี Use App Starter

2.ทาการตงั้ ช่ือ และ เลือกท่ีเก็บไฟล์ · เลอื กท่ีเก็บไฟล์ · ตงั้ ช่ือ App 3.กด Create

4.จะขนึ้ หนา้ นีม้ า 5.กดท่ี DEVELOP จะไดห้ นา้ ตาแบบนี้

6.คลิกท่ี Hello World แลว้ กดป่มุ Delete ดา้ นขวามือท่แี ทบ Button Properties 7.จะขนึ้ แท็บ Confirm ใหก้ ด Confirm

8.กดท่ี ELEMENTS 9.คลกิ ท่ี Container ลากไปปลอ่ ยวางบน Page ของเรา

10.จะไดแ้ บบหนา้ ตาแบบนี้ 11.ในดา้ นขวา Container Properties ใน Container Styles ใหเ้ พ่ิมตามนี้ แลว้ กด Apply

· height:100%; หรอื height: auto; 12.กลบั มาท่แี ทบ็ PAGES คลกิ ท่หี นา้ Main 13.ตรงสว่ น Page Properties หวั ขอ้ Title จะเปล่ยี นช่ือบนหวั Header

14.กดท่ี Apply 15.กลบั มาท่แี ท็บ Element ทาการลาก Image มาวาง

16.จะไดแ้ บบบนี้

17.ไปท่ีโฟลเดอรท์ ่เี ลอื กท่ีเก็บไฟลไ์ ว้ (ขนั้ ตอนท่ี 2) · เขา้ ท่ี www · กดสรา้ ง New folder ตงั้ ช่ือวา่ images · · วางไฟลร์ ูปไวใ้ น Folder images

เวลานาไปใชพ้ มิ พว์ า่ home.png 18. รูปจะเขา้ มาอยใู่ น Directory ดา้ นซา้ ย 19.ทางดา้ นขวาท่ี Image Properties

· ตรง source ใหพ้ มิ พช์ ่ือไฟลพ์ รอ้ มนามสกลุ ตามท่ีปรากฏในขนั้ ตอนท่ี 18 · images/home.png · แลว้ กด Apply กาหนด images style width: auto; (กาหนดความกวา้ งของรูปตามขนาดไฟลจ์ รงิ ) height: auto; (กาหนดความสงู ของรูปตามขนาดไฟลจ์ รงิ ) display: block; margin: 5 auto; (5 คือ หา่ งจากขา้ งบน 5px, auto คอื กาหนดใหอ้ ยกู่ งึ่ กลาง) 20.ทาการเพ่มิ ขอ้ ความ Text

21.ทาการเพ่มิ พิมพข์ อ้ ความ ใส่ ... ขอ้ ความ … word-wrap: break-word; (ตดั คาขนึ้ บรรทดั ใหม่) text-indent:1.5em; (ย่อหนา้ 1.5 กาหนดคา่ เป็น em) text-align: justify; (ทาใหต้ วั หนงั สือเหมือนในตวั นีข้ อง word ) 22.กลบั มาท่ี Pages กดท่ีบวก เพ่ือเพ่มิ หนา้ ใหม่

23.เปล่ยี น Title แลว้ กด Apply 24.ลาก Element List ไปวาง จะขนึ้ ดงั รูป 25.เพ่มิ List ตามท่ตี อ้ งการ

26.คลิกท่ี Page ดู Page ID ของหนา้ List คือ page_1 27.ไปท่ี Nav > กดบวกสรา้ ง header_1

ดา้ นขวา Header Setup Href=” #page id ของเราท่ีจะใหก้ ด back กลบั ไป” จะใหก้ ลบั ไป หนา้ list ก็ #page_1 สว่ นตรง หวั App ใสช่ ่ือท่ีจะใหข้ นึ้ ทกุ หนา้ กค็ อื Intel® 28.กลบั มาท่ี Page คลกิ หนา้ ท่ีสรา้ งใหม่ จาก List ของขอ้ มลู

ในสว่ น Header เลือกเป็น header_1 ท่สี รา้ งไว้ 29.ทาแบบนีก้ บั ทกุ หนา้ ท่ีอยใู่ น List

ปรบั เป็น header_1 กบั ทกุ หนา้ 30.ทาการใสข่ อ้ มลู ท่ีตอ้ งการแต่ละหนา้ ใหค้ รบทกุ หนา้

หนา้ About 31.เช่ือมโยงหนา้ List view โดย page_id (ตวั อยา่ ง : #page_2)

32.สรา้ ง Footer (footer_1 และ footer_2)

33.เปล่ยี นท่หี นา้ แรก



Footer 3 และทาประมาณนีก้ บั ทกุ หนา้ โดย Previous set เป็นหนา้ กอ่ น Next set เป็นหนา้ ถดั ไป สรุปการเช่ือมโยงของทกุ หนา้











ทาการทดสอบ กดท่ี Emulate

สามารถเทสบนโทรศพั ทจ์ รงิ ได้ เลือก Test เลอื ก Push Files