ผู้ใช้:Pornpun Thipp/กระบะทราย
 | นี่คือหน้าทดลองเขียนของ Pornpun Thipp หน้าทดลองเขียนเป็นหน้าย่อยของหน้าผู้ใช้ ซึ่งผู้ใช้มีไว้ทดลองเขียนหรือไว้พัฒนาหน้าต่าง ๆ แต่นี่ไม่ใช่หน้าบทความสารานุกรม ทดลองเขียนได้ที่นี่ หน้าทดลองเขียนอื่น ๆ: หน้าทดลองเขียนหลัก |
Mobile Applications
Cross Platform คือ โปรแกรมประยุกต์ที่สามารถทํางานบนระบบปฏิบัติการได้หลายระบบ ซึ่งจะทําให้การใช้งานมีความหลากหลายมากขึ้น เนื่องจากปัจจุบันแต่ละคนมีอุปกรณ์อิเล็คทรอนิคหลายชิ้นเพื่อใช้งานแตกต่างกันไปตามความเหมาะสมในแต่ละสถานการณ์ ซึ่งอุปกรณ์แต่ละชิ้นก็อาจจะมีการติดตั้งระบบปฎิบัติการที่ต่างกัน เช่น ใช้ PC(windows) ที่บ้าน ใช้ Tablet(iOs) ที่ร้านอาหาร ใช้โทรศัพท์ระบบ androids เป็นต้น ดังนั้น การพัฒนาโปรแกรมประยุกต์เพื่อให้สามารถทำงานข้ามแพลตฟอร์มหรือข้ามระบบปฎิบัติการได้จึงเป็นทางเลือกที่ดีให้กับผู้ใช้ได้
หลายระบบปฏิบัติการ หรือ ข้ามแพลตฟอร์ม (Cross-platform) หมายถึงการที่โปรแกรมคอมพิวเตอร์ ภาษาโปรแกรม ระบบปฏิบัติการ หรือ ซอฟต์แวร์ชนิดอื่นๆ สามารถทำงานได้ในหลายแพลตฟอร์มคอมพิวเตอร์ ตัวอย่างเช่น โปรแกรมคอมพิวเตอร์สามารถทำงานได้บนไมโครซอฟท์วินโดวส์ สำหรับสถาปัตยกรรม x86 และ Mac OS X บน PowerPC
Crossplatform Application
ข้อดี • เขียนโปรแกรมครั้งเดียวใช้ได้ทุก platform • Maintain Code เพียงอันเดียว ลดความสับสนในการแก้ไข • Crossplatform ส่วนใหญ่จะเป็นภาษาในการเขียน Webทำงาน Offline ได้
ข้อเสีย • ช้ากว่า Native Application แต่เร็วกว่า Web Application • ประสิทธิภาพน้อยกว่า Native Application เพราะไม่สามารถใช้ Feature บางอย่างได้ • Feature จะ Update ช้ากว่า เนื่องจากต้องรอผู้พัฒนา framework อัพเดทก่อน
HTML คืออะไร
HTML ย่อมาจาก Hyper Text Markup Language คือภาษาคอมพิวเตอร์ที่ใช้ในการแสดงผลของเอกสารบน website หรือที่เราเรียกกันว่าเว็บเพจ ถูกพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) และจากการพัฒนาทางด้าน Software ของ Microsoft ทำให้ภาษา HTML เป็นอีกภาษาหนึ่งที่ใช้เขียนโปรแกรมได้ หรือที่เรียกว่า HTML Application
HTML เริ่มขึ้นเมื่อปี 1980 เมื่อ Tim Berners Lee เสนอต้นแบบสำหรับนักวิจัยใน CERN เพื่อแลกเปลี่ยนเอกสาร ข้อมูลด้านการวิจัย โดยใช้ชื่อว่า Enquire ในปี 1990 เค้าได้เขียนโปรแกรมเบราเซอร์ และทดลองรันบนเซิฟเวอร์ที่เค้าพัฒนาขึ้น HTML ได้รับการรู้จักจาก HTML Tag ซึ่งมีอยู่ 18 Tag ในปี 1991
HTML ถูกพัฒนาจาก SGML และ Tim ก็คิดเสมือนว่า HTML เป็นโปรแกรมย่อยของ SGML อยู่ในตอนนั้น ต่อมาในปี 1996 เพื่อกำหนดมาตรฐานให้ตรงกัน W3C World Wide Web Consortium จึงเป็นผู้กำหนดสเปกทั้งหมดของ HTML และปี 1999 HTML 4.01 ก็ถือกำเนิดขึ้น โดยมี HTML 5 ซึ่งเป็น Web Hypertext Application ถูกพัฒนาต่อมาในปี 2004 นอกจากนี้ยังมีการพัฒนาไปเป็น XHTML ซึ่ง คือ Extended HTML ซึ่งมีความสามารถและมาตรฐานที่รัดกุมกว่าอีกด้วย โดยอยู่ภายใต้การควบคุมของ W3C (World Wide Web Consortium)
HTML เป็นภาษาประเภท Markup สำหรับการการสร้างเว็บเพจ โดยใช้ภาษา HTML สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, Editplus หรือจะอาศัยโปรแกรม ที่เป็นเครื่องมือช่วยสร้างเว็บเพจ เช่น Microsoft FrontPage, Dream Weaver ซึ่งอํานวยความสะดวกในการสร้างหน้า HTML ส่วนการเรียกใช้งานหรือทดสอบการทำงาน ของเอกสาร HTML จะใช้โปรแกรม web browser เช่น IE Microsoft Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เป็นต้น
HTML ย่อมาจาก HyperText Markup Language เป็นภาษาคอมพิวเตอร์ที่ใช้แสดง "ข้อมูลหรือเนื้อหา" บนหน้าเว็บเพจ (ทุกหน้าเว็บเพจจะมีภาษา HTML อยู่)
HTML5 คือ ภาษาที่พัฒนาขึ้น เพื่อใช้ในการเขียนเว็บไซต์หรือทำแอพพลิเคชั่น เป็นภาษามาร์กอัป (ภาษาคอมพิวเตอร์ที่แสดงทั้งข้อมูล และโครงสร้างหรือการแสดงผลข้อมูลเข้าไว้ด้วยกัน)
ที่ถูกพัฒนาล่าสุดของ HTML ซึ่งใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นๆที่เรียกใช้ผ่านทางเว็บเบราว์เซอร์ และ HTML5 มีความพิเศษกว่า XHTML คือ HTML5 จะมีโครงสร้างที่ง่ายกว่า XHTML
สรุปคือ HTML5 จะนำเอาลักษณะพิเศษของ XHTML และ HTML มารวมกัน เพื่อให้การสร้างเว็ปทำได้ง่ายและสะดวกขึ้นนั่นเอง
Feature ของ HTML ที่น่าสนใจ
- Semantic Markup : การเพิ่ม Element ที่ อ่านง่ายมากขึ้น และช่วยให้ เราทำ SEO ได้มีประสิทธิภาพมากยิ่งขึ้น
- Form Enhancements : เพิ่มความสามารถของ Form ต่างๆ ไม่ว่าจะเป็น Input type, Attribute หรือ แม้แต่ Element
- Audio / Video: รองรับการอ่านไฟล์เสียง และ วีดีโอ โดยไม่จำเป็นต้องใช้ Embed Code ของ Third Party
- Canvas : ใช้ในการวาดรูป โดยจำเป็นต้องใช้ Javascriptช่วย
- ContentEditable : สามารถแก้ไข Content ได้โดยตรงผ่านทางหน้าเว็บ
- Drag and Drop : ลากวางObject ได้ เพื่อเพิ่มการ ตอบสนองระหว่างระบบกับผู้ใช้
- Persistent Data Storage : มีการจัดการที่ดีขึ้น โดยเก็บข้อมูลลงบนเครื่องของผู้ใช้
ข้อดีของ HTML 5 - รองรับอุปกรณ์ได้หลากหลายทั้ง Desktop,PC,Mac,Mobile (เช่น Smart Phone,Tablet) - แสดงภาพ เสียง แอนิเมชั่น ได้โดยไม่ต้องติดตั้งซอฟท์แวร์เพิ่มเติม - เขียนโปรแกรมง่ายขึ้น โดยเฉพาะบน Mobile
ข้อจำกัดของ HTML 5 - แต่ละคุณสมบัติยังไม่ได้รับการสนับสนุนจากทุก Browser และ อุปกรณ์ Mobile - การใช้ในรูปแบบ Offline จะต้องมีการเขียนโปรแกรมเพิ่มเติม
หน่วยงานที่กำหนดมาตรฐาน HTML5 มี 2 หน่วยงานหลักคือ WHATWG (Web Hypertext Application Technology Working Group) และ W3C (World Wide Web Consortium) WHATWG เริ่มกำหนดมาตรฐานมาตั้งแต่ปี 2004 และ ในปี 2007 W3C เริ่มใช้มาตรฐาน HTML5 ที่ WHATWG กำหนดไว้ก่อนแล้ว 2 องค์กรทำงานร่วมกัน แต่มาตรฐานไม่เหมือนกันทั้งหมด โดย W3C ต้องการรมาตรฐาน HTML5 ที่เป็นเอกสารที่กำหนดสำเร็จไปเลย แต่ WHATWG ต้องการให้มาตรฐาน HTML5 มีการเปลี่ยนแปลงอย่างเสมอตาม สถานะการณ์ และความต้องการทางเทคโนโลยี
จุดเด่นของ HTML5
ความสามารถทั้งหมดของ HTML5 สามารถอ่านได้จาก เอกสารอย่างเป็นทางการของ HTML5 (ภาษาอังกฤษ) หรือถ้าชอบอะไรง่าย ๆ สามารถอ่านได้จาก W3CSchool (ภาษาอังกฤษเช่นกัน แต่เข้าใจง่ายกว่ามาก)
ความสามารถเด่น ๆ ของมันก็คือ:
Semantic Markup: โค้ดเป็นระเบียบทำให้ Search Engine เก็บข้อมูลได้ง่าย Form Enhancement: เพิ่มประสิทธิภาพของฟอร์ม เสียง / วีดิโอ: หลายคนอาจเคยได้ยินเรื่องที่ว่า HTML5 Video จะมาแทน Flash Video (.flv) Canvas: เอาไว้วาดรูป ตกแต่งรูป ซึ่งว่ากันว่าอาจมาแทนการวาดรูปในแฟลช (Adobe Flash) ContentEditable: สามารถคลิกบนข้อความในเว็บเพื่อแก้ไขได้จากตรงนั้นเลย Drag and Drop: ลากของมาวาง Persistent Data Storage: การเก็บข้อมูลบนเครื่องผู้ใช้ ซึ่งสามารถเก็บได้ถึงระดับฐานข้อมูลเลยทีเดียว
บราวเซอร์ใดรองรับ HTML5 ได้บ้าง
เว็บบราวเซอร์ (เช่น Internet Explorer, Firefox, Chrome etc.) เวอร์ชั่นใหม่ ๆ ได้เริ่มรองรับ HTML5 แล้ว แต่ก็ไม่ได้รองรับความสามารถทั้งหมด ดังนั้นก่อนใช้ความสามารถไหนของ HTML5 แนะนำให้ตรวจสอบจาก ตารางเปรียบเทียบการรองรับ HTML5 และ CSS3 จากบราวเซอร์ต่าง ๆ
สำหรับท่านที่มีความรู้ด้าน Javascript อยู่แล้ว สามารถใช้ไลบรารี่ Modernizr ในการตรวจสอบว่าบราวเซอร์ซัพพอร์ท HTML5 และ CSS3 หรือไม่
และหากคุณต้องการทราบว่าคุณควรจะทำเว็บไซต์รองรับบราวเซอร์ไหนดี แนะนำให้ลองไปดูที่ Browser Market Share ซึ่งมีข้อมูลเกี่ยวกับว่าในขณะนี้บราวเซอร์ตัวไหนกำลังเป็นที่นิยมมากที่สุด
HTML5 แตกต่างจาก HTML เวอร์ชั่นเก่าอย่างไร
แน่นอนว่านอกจากจะมีอะไรใหม่ ๆ ใน HTML5 แล้ว ก็มีสิ่งที่เปลี่ยนการเขียนแบบเดิม ๆ ในเวอร์ชั่นเก่าด้วย ซึ่งสิ่งหลัก ๆ ที่เปลี่ยนก็คือ:
1. Doctype เขียนง่ายขึ้น ปกติตอนเขียน HTML เวอร์ชั่นเก่าต้องขึ้น <!DOCTYPE> แล้วก็ตามด้วยรายละเอียดยาว ๆ แต่พอเป็น HTML5 แล้ว จะเขียนแบบไม่มีกำหนดเวอร์ชั่น เพื่อให้นำไปใช้ได้กับเวอร์ชั่นอื่น ๆ ในอนาคต โดยเขียนแค่สั้น ๆ แบบนี้: <!DOCTYPE html>
2. การกำหนดภาษาทำได้ง่ายขึ้น เมื่อก่อนจะต้องเขียน xmln หรือ xml:lang ในแท็ก <html> เพื่อกำหนดภาษาของหน้า แต่สำหรับ HTML5 จะเหลือแค่นี้: <html lang=”en”>
3. การกำหนดชุดตัวอักษรทำได้ง่ายขึ้น เมื่อก่อนจะต้องเขียนแท็ก meta ยาว ๆ เพื่อกำหนด Character Set เป็น UTF-8 แต่ตอนนี้เราสามารถกำหนดโดยเขียนแค่นี้: <meta charset=”utf-8″ />
4. ไม่ต้องมี “/” สำหรับแท็กเดี่ยวแล้ว แท็กเดี่ยว หมายถึงแท็กที่ไม่มีแท็กปิด เช่น <img> <input> ซึ่งจะต่างกับแท็กที่เป็นแท็กเปิดปิดอย่าง < div > < /div > < strong > < /strong > โดยถ้าเป็นเมื่อก่อน แท็กเดี่ยวจะบังคับให้มี “/” ปิดท้าย เช่น <img /> แต่ใน HTML5 นี้แท็กเดี่ยวไม่จำเป็นต้องมี “/” ปิดท้ายแล้ว
5. แท็กบางส่วนจะไม่รองรับใน HTML5 แล้ว แท็กเก่า ๆ บางส่วนจะถูกตัดทิ้งไป โดยมีดังนี้ ( บางแท็กเรายังไม่เคยใช้กันเลยครับ และบางแท็กสามารถใช้ CSS แทนได้ ): < big > ,< acronym > ,< applet > ,< basefont > ,< dir > ,< frame > ,< frameset > ,< noframes > ,< s > ,< strike > ,< tt > ,< u > ,< center >
รู้จักกับ PHONEGAP เครื่องมือพัฒนา MOBILE APPS แบบ CROSS PLATFORM ด้วย HTML5/JAVASCRIPT/CSS
การที่เราจะสร้าง Mobile Apps แบบ Native Apps ต้องเริ่มจากศึกษาภาษาโปรแกรมมิ่งและเทคโนโลยีที่ใช้พัฒนาระบบของอุปกรณ์นั้นๆ ซึ่งแต่ละค่ายต่างก็มีระบบปฏิบัติการของตัวเอง
เช่นระบบ iOS , Android ,Windows Phone และอื่นๆอีกมากมาย มีรายะเอียดดังนี้
1. iOS ต้องพัฒนาด้วยภาษา Objective C
2. Android ต้อง JAVA
3. Windows Phone ต้อง .NET Framework
นอกจากภาษาโปรแกรมมิ่งที่ต้องศึกษาแล้วก็ยังต้องศึกษาพวก SDK(Software Development Kit) ซึ่งเป็นเครื่องมือที่ใช้สำหรับพัฒนาโปรแกรมหรือ Application
ของแต่ละ Platform ด้วย
Phone Gap คือ Mobile Application Development Framework ที่ช่วยให้เราสามารถพัฒนา Mobile Application ได้ง่ายๆ โดยใช้ HTML5/Javascript/CSS หรือพูดง่ายๆ ถ้าเราทำเว็บไซต์เป็นอยู่แล้ว ก็สามารถทำ Mobile Apps และยังสามารถทำงานข้าม Platform อาทิเช่น iOS, Android, Windows Phone ,BlackBerry, Symbian, webOS, และ bada นั่นหมายความว่าใช้ PhoneGap สร้าง Mobile Apps ครั้งเดียวใช้ได้ทุก Platform ที่กล่าวมา
การทำงานของ PhoneGap คือ PhoneGap จะห่อหุ้ม(Wrap)เว็บไซต์ที่เราสร้างขึ้นด้วย HTML5/Javascript/CSS ให้เป็น Application เพื่อให้ทำงานได้ในระบบปฎิบัติการ(OS)ต่างๆ นั่นหมายความว่าเพียงแค่เราออกแบบเว็บไซต์ให้เหมาะสมกับการแสดงผลบนมือถือ โดยใช้ภาษา HTML5/Javascript/CSS หรือใช้พวก Framework ซึ่ง PhoneGap จะทำหน้าที่แปลงเป็น Mobile Application ให้เหมาะสมกับการทำงานของระบบ OS บน Mobile Device
ข้อดีและข้อเสียของ PhoneGap
ข้อดี -พัฒนาง่ายและรวดเร็ว เพราะ ใช้ ภาษา html ที่เข้าใจง่าย -ไม่ต้องเรียนรู้ภาษาใหม่เพราะจริงๆแล้ว html ก็เป็นภาษาที่ทุกคนคงจะเคยเห็นและผ่านตามาบ้าง -นักพัฒนาสามารถเข้าไปเขียน plugin เสริมได้เรื่อยๆ ทำให้เรามีอะไรใหม่ๆให้เราใช้ตลอดเวลา
ข้อเสีย -phonegap ไม่ใช่ native application เต็มตัวจึงทำให้ไม่สามารถเรียกความสามารถบางอย่างมาใช้ไม่ได้ เช่น -user interface หรือ system function บางอย่าง -phonegap ไม่ได้รันบน server เพราะฉะนั้น serverside script อย่าง php asp หมดสิทธิครับ ถ้า ถามผมว่า แล้ว phonegap เหมาะกับ application แบบไหนคงตอบได้ว่าเหมาะกับ app ที่ไม่ได้ต้องการจะใช้งานอะไรมาก app ที่ไม่ได้ใช้นานๆ หรือ app ขนาดไม่ใหญ่ แต่ก็ไม่แน่ว่าวันนึง phonegap อาจจะมีความสามารถขึ้นมาทัดเทียม การพัฒนาแบบ native application ก็ได้
สรุปง่ายๆว่า PhoneGap นั้น เป็น Framework ที่ช่วยให้เราเขียน Mobile Application ได้ง่ายๆและรวดเร็วด้วย HTML, HTML5 หรือ JavaScript และยังสามารถพัฒนาข้าม Platform ได้อีกด้วย เหมาะกับคนที่อยากพัฒนา Mobile Application ที่ไม่สามารถเขียน Java หรือ Objective-C ได้
Framework คืออะไร
Framework ก็จะหมายถึงชุดคำสั่ง เครื่องมือเสร็จสรรพ์ที่พร้อมใช้งาน หรืออาจจะหมายถึงโครงสร้างอย่างใดอย่างหนึ่ง เพราะขึ้นอยู่กับชนิด ประเภทของ Framework ด้วย
Framework กับการเขียนโปรแกรม
เนื่องด้วยปัญหาข้างบน ภาษาต่าง ๆ ก็พยายามจะมี Framework ออกมา บางภาษามีด้วยกันหลายยี่ห้อเลยแหละ ^^ บางทีก็เลือกยาก ทั้งนี้ทั้งนั้นก็ขึ้นอยู่กับความเหมาะสมเป็นหลัก อันนี้ต้องขึ้นอยู่กับประสบการณ์การใช้งาน ใครใช้หลากหลายตัว ก็จะรู้ข้อดีข้อเสีย ของแต่ละตัว ก็สามารถเอามาประยุกต์เข้ากับงานเราได้ ปล. Framework เป็นโครงสร้างการจัดการ ไม่ใช่ภาษา เราอาจจะได้ยินว่า PHP Framework , CSS Framework อันนั้นเป็นการพัฒนาโครงสร้างด้วยภาษานั้น ๆ
ข้อดีของ Framework ถ้ามองจากปัญหาข้างบนจะรู้ว่า framework นั้นให้อะไรกับเราได้บ้าง รวดเร็ว ทำงานเป็นทีมได้ เหมาะกับองค์กรใหญ่ ๆ
ข้อเสียของ Framework ทุกสิ่งทุกอย่างมีดีย่อมมีเสียเสมอ ยิ่งมีประโยชน์มาก ยิ่งมีโทษมากเช่นกัน มีขนาดของ source โดยรวมใหญ่กว่าที่ควรจะเป็น เพราะบางอย่างเราไม่จำเป็นต้องใช้ แต่ว่ามันดันมีใน Framework อาจจะทำให้ผู้ไม่ประสงค์ดีโจมตีได้ง่ายขึ้น เพราะว่า โครงสร้างของ Framework ใคร ๆ ก็รู้ (ถ้าศึกษา) อ้างอิง wikipedia.org
JavaScript คืออะไร ?
JavaScript เป็นภาษาที่เป็น Script ที่อยู่ในเว็บไซต์ (ใช่ร่วมกับ HTML) เพื่อให้เว็บไซต์ของเราดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น ยกตัวอย่าง Hellomyweb.com ตรงเมนูด้านซ้ายมือจะเห็นว่าสามารถคลิกเพื่อดูหัวข้อภายในได้ และสามารถคลิกที่ลูกศรสีเขียวเพื่อปิดดูทั้งหมด และลูกศรสีแดงเพื่อเปิดทั้งหมด ข้อดีของ Javascript คือสามารถทำให้ผู้ใช้งานใช้เว็บไซต์ของเราได้ง่ายขึ้น รวมถึงดึงดูดความสนใจของผู้ใช้งานได้อีกด้วย ปัจจุบันนี้ Javascript นั้นเป็นมาตราฐานที่อยู่ใน W3C จึงมั่นใจได้ว่าทุกๆ Web browser รองรับการทำงานของ Javascript แน่นอน เนื้อหาเบื้องต้นที่ผู้ใช้ต้องเข้าใจมาก่อนล่วงหน้าคือ HTML เพื่อให้สามารถทำความเข้าใช้ในเนื้อหาเรื่องนี้ได้ง่ายขึ้น
- JavaScript นั้นออกแบบให้ใช้งานร่วมกับ HTML นั่นคือต้องอยู่รวมไปกับ HTML Code - JavaScript เป็น script language ทำให้ผู้ใช้งานใช้งานได้ง่าย ไม่จำเป็นต้องมีพื้นฐานโปรแกรมมากนัก - JavaScript เป็นภาษาที่ใช้ทรัพยากรณ์เครื่องน้อยมาก JavaScript นั้นจะประมวลผลที่ฝั่งของเครื่องผู้ใช้ทำให้ไม่เป็นภาระกับเครื่องมากนักเมื่อเทียบกับ Flash
การพัฒนา Mobile Application HTML5 & Cross Platform Development - แอพที่พัฒนาเพียงครั้งเดียว แต่สามารถทำงานได้บนอุปกรณ์ที่หลากหลาย ไม่ว่าจะเป็น iOS, Android, Windows Mobile ฯลฯ - เครื่องมือ : Appcelerator (Titanium), PhoneGap - ส่วนใหญ่ใช้เทคโนโลยี HTML5, Javascript - เหมาะสำหรับ • แอพพลิเคชั่นที่ไม่ซับซ้อน เช่น แสดง เพิ่ม ลบ แก้ไขข้อมูล • ต้องการพัฒนาแอพพลิเคชั่นสำหรับหลากหลายอุปกรณ์โดยเร็ว
<re>http://www.imodish.com/%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A-phonegap/</re>
<re>http://www.softmelt.com/article.php?id=60</re>
.png%3Bhttps%253A%252F%252Fwww.etda.or.th%252Fetda_website%252Fcontent%252F1566.html%3B1500%3B921){kind=link}
<re>http://www.designil.com/html5-tips-tricks-techniques-1.html</re>