HTML5
-
การนำไฟล์ Model 3D ขึ้นไปใช้งานบนเว็บไซต์ HTML Documents
ในตอนนี้เทคโนโลยีเว็บได้มี WebGL หรือหลากหลายนวัตกรรมในการนำไฟล์ 3 มิติ หรือ Model 3 มิติไปแสดงผลหน้าเว็บ HTML มาลองวิธีง่ายๆ กัน ช่วงหลังเป็นสมาชิกเว็บไซต์ Sketchfab.com ซึ่งก็ทำงาน 3D บ่อยมากขึ้นในบัญชี https://www.sketchfab.com/daydev ไปตามกันได้ครับ ก็จะมี…
Read More » -
Google Text to Speech API ด้วยภาษา PHP
วิธีการพัฒนาแอพพลิเคชันด้วยภาษา PHP ร่วมกับการใช้งาน API ของ Google อย่าง Google Text to Speech API ในการแปลงประโยคเป็นไฟล์ MP3 นำมาออกเสียงผ่านหน้าเว็บไซต์ เป็น Tutorial สั้นๆ ที่เห็นไอเดียจากเว็บไซต์เมืองนอกหลายเว็บทำกัน ก็เลยหยิบมาลองให้ศึกษาทำตามดู…
Read More » -
ติดตั้ง Cordova สำหรับ Cross Platform ร่วมกับแอพพลิเคชัน iOS
วิธีการติดตั้ง Cordova สำหรับนักพัฒนาสาย Hybrid Application เพื่อใช้ HTMl5 หรือ Mobile Web App มาทำงานร่วมกับ แพลตฟอร์ม iOS ผ่านการติดตั้งร่วมกับ XCode และ Node JS แบบเริ่มต้น…
Read More » -
API ต้อนรับฟุตบอลโลก World Cup in Brazil 2014 กับ footballjs
เข้าสู่ฤดูกาลแข่งขัน World Cup in Brazil 2014 แล้วนะครับ หลายคนอยากทำ API หน้าเว็บดึงตารางอัพเดต Score ก็ขอแนะนำ API OpenFootball และ FootballJS ครับ หลักการไม่มีอะไรมากครับ ก็แค่ใช้ Javascript…
Read More » -
วิธีแอบดูว่าใครมาส่อง Profile บน Facebook ของเรา ฉบับเกรียน
Facebook เป็นพื้นที่สาธารณะครับ หลายคนมีคนที่แอบชอบ แต่ไม่เคยเห็นเค้ามา Comment, Like เลย แต่มีความรู้สึกว่าเค้ามาแอบดูเราอยู่บ้างเปล่า เรามีวิธีรู้ครับ แน่นอนว่า หลายคนพบเจอชีวิตแบบนี้ Add Friend กันไปก็นานแสนนาน ไม่กล้าทัก ไม่แน่ใจว่าเค้ามีใจให้เราหรือเปล่า อยากจะโพสท์ข้อความดักคอให้เค้าได้เห็น หรือ Mutual Friend…
Read More » -
สร้าง Interactive Google Maps ให้น่าสนใจด้วย jMapping
jMapping เป็น jQuery Plugin ตัวหนึ่งที่ใช้งานร่วมกับ Google Maps เน้นการปรับแต่ง และติดตั้งที่ง่ายมากครับแค่ Javascript ไม่กี่บรรทัดก็แสดงผล Interactive ได้ Google Maps API V3 ที่เน้น Javascript และ…
Read More » -
เพิ่มภาพ Complex Marker บน Google Maps JavaScript API v3
ตัวอย่างการใช้งาน Google Maps JavaScript API v3 ในการวางรูปภาพ Complex Marker ด้วยภาพกราฟิกนามสกุล png ลงไปใน Google Maps ให้น่าสนใจกว่า Marker ตัวเดิมวิธีการไม่ยากครับ แค่หาภาพมาวางซ้อน นามสกุล .png…
Read More » -
รวมเทคนิคเขียนโปรแกรมร่วมกับ Google Maps JavaScript API v3
วิธีการเขียนโปรแกรมร่วมกับ Google Maps JavaScript API v3 ที่เน้นในการ Render Maps หรือแผนที่ของเราให้สวยงามโดยการทำงานเน้นที่ Javascript และ Google Maps API ตัวอย่างจากบทความที่แล้วจะเป็น Static Maps API V2…
Read More » -
รวมเทคนิคเขียนโปรแกรมร่วมกับ Google Static Maps API V2
รวมเทคนิคการพัฒนา Website ร่วมกับ Google Maps ด้วยวิธีการเรียกใช้งาน API อย่าง Static Maps API V2 ให้แสดงผลรูปภาพแผนที่ของคุณอย่างสมบูรณ์แบบ และสวยงามที่สุดวิธีการใช้งาน Static Maps API V2 นั้นจะเป็นการแสดงผล Google…
Read More » -
วิธีใช้ Google Drive เป็น Host สำหรับทำเว็บ HTML5 และ Web Pages
วิธีการหนึ่งสำหรับหลายท่านที่มีไฟล์ HTML และ Java script อย่าง Web Pages ที่เป็น HTML5 สำหรับไปเดโมงานสามารถ Host ผ่าน Google Drive ได้แบบใช้งานฟรีครับก่อนอื่นคือต้องสมัครสมาชิก Google Account ของเราก่อน หลายคนที่ใช้…
Read More » -
Sencha Touch 2 กับการสร้างแอพ แผนที่ด้วย Google Map
หลายคนสอบถามเรื่องของ HTML5 ด้วย Sencha Touch กับทางผมมาว่า สามารถเขียนแอพฯ ร่วมกับ Google Map APIs ได้หรือไม่ ลองมาดูกันครับ แน่นอนว่าจะเริ่มต้นพัฒนาแอพพลิเคชัน HTML5 ด้วย Sencha Touch นั้นต้อง เรียนรู้วิธีการใช้…
Read More » -
Convert Currency แลกเปลี่ยนเงินตรา ผ่าน API ได้ทุกแอพฯ แบบเกรียน
ถ้ามีปัญหาเรื่องการพัฒนาแอพฯ ทั้ง Web Apps, iOS Apps, Android Apps เกี่ยวกับ Convert Currency อัตราแลกเปลี่ยนเงิน มาดูวิธีเกรียนๆ สั้นๆ ผ่าน API ง่ายๆ ครับปัญหาสำหรับ คนพัฒนาแอพฯ เกี่ยวกับอัตราแลกเปลี่ยนเงินตรานั้น…
Read More » -
เทคนิคเบาๆ ของผู้เริ่มต้นดึงข้อมูล Video ผ่าน YouTube API ด้วย Javascript
คราวนี้จะพาไปดูวิธีการดึงข้อมูล Web Service เพื่อเอาข้อมูลของ Video บน YouTube ผ่าน YouTube API เวอร์ชัน 2.1 ด้วย Javascript แบบง่ายๆ แน่นอนว่า API ที่ทางปล่อยให้เราเอาไปใช้ฟรีๆ ในรูปแบบ JSON…
Read More » -
Sencha Touch กับการเขียน Nested List ร่วมกับระบบหลังด้วยภาษา PHP
บทเรียนสำหรับนักพัฒนา Hybrid HTML5 Framework อย่าง Sencha Touch รอบนี้คือการนำ Nested List มาดึงข้อมูลร่วมกับระบบหลังบ้านที่พัฒนาจากภาษา PHP อย่างง่าย ตัวอย่างที่เราจะพัฒนานั้นจะมี Flow ของแอพพลิเคชันดังนี้ครับ แน่นอนว่าให้ไปสร้างแอพพลิเคชันผ่าน Sencha CMD ก่อนครับ…
Read More » -
JSNES หรือ JavaScript NES Emulator สำหรับเล่นเกม Famicom บนเว็บไซต์
Open Source น่าสนใจสำหรับสร้างนวัตกรรม Web Technology ที่ผมอยากจะแนะนำวันนี้คือ JSNES ญาติห่างๆ ของ node.js ไว้ใช้เล่นเกมเก่าๆ บน Famicom บนเว็บไซต์ แน่นอนว่าองค์ประกอบของไฟล์ต่างๆ นั้นควร Clone ออกมาจาก GitHub ก่อนโดยองค์ประกอบหลักของมันใช้…
Read More » -
การ Publish แอพพลิเคชัน Sencha Touch 2 ไปบนเว็บไซต์ด้วย Sencha CMD
บางครั้งหากทำการอัพโหลดไฟล์แอพพลิเคชันที่พัฒนาด้วย Sencha Touch ขึ้นไปบนเว็บไซต์แล้วโหลดช้า เราต้องใช้ Sencha CMD ในการช่วย Publish ตัวไฟล์ทั้งหมดจะเร็วขึ้น ช่วงแรกหลังจากที่หลายคนได้ศึกษา การพัฒนาแอพพลิเคชันในรูปแบบ Hybrid อย่าง HTML5 กับ Phonegap แล้ว หรือบางคนจะอัพโหลดไฟล์ขึ้นไปเป็น Mobile…
Read More » -
พัฒนา Mobile Apps ด้วย Sencha Touch 2 ร่วมกับ Phonegap บน XCode
อีกวิธีการใช้การพัฒนาแอพพลิเคชันในรูปแบบ Hybrid Framework ให้ทำงานบนแพลตฟอร์ม iOS นั้นคือ Sencha Touch บน Phonegap ด้วย XCode เริ่มต้นนั้นจำเป็นที่ะต้องดาวน์โหลด Phonegap ที่เป็น Framework ในการพํฒนาแอพพลิเคชันแบบ HTML5 ตัว Phonegap ถ้าจะให้อธิบายนั้น อาจจะมีความหมายเข้าใจง่ายๆว่า…
Read More » -
Lab: ออกแบบ และพัฒนา Mobile Web App ของคุณด้วย Sencha Touch 2
บทความนี้จะเป็นการแนะนำขั้นตอนในการออกแบบ และพัฒนาแอพพลิเคชันแบบ Mobile Web App ด้วย Framework ของ Sencha Touch 2 แบบทีละขั้นตอน แน่นอนว่าก่อนอื่นต้องสร้างตัว Project ของคุณขึ้นมาก่อนให้ไปที่ Path Folder ของ Sencha Touch…
Read More » -
เปลี่ยน Theme Sencha Touch ด้วย SASS และ Compass บน Windows และ OS X
วิธีการเปลี่ยน Theme ของ Sencha Touch ด้วยการ Compile ไฟล์ scss เป็น css ใหม่ด้วยการติดตั้งชุดพัฒนาของ SASS และ Compass ผ่าน Ruby ให้ได้มาตรฐาน CSS3หลายคนที่ได้ใช้ Frame…
Read More » -
Sencha Touch กับการแสดงข้อมูลจาก JSON สำหรับพัฒนา Mobile Web App
บทเรียนนี้จะเป็นการพัฒนา Mobile Web App ด้วย Framework Sencha Touch 2 ด้วยการทำงานร่วมกับ Webservice รูปแบบ JSON ครับ เอาเป็นว่าขอต่อเนื่องจากบทความก่อนหน้านี้เลยแล้วกันจากบทความ รอบนี้จะเป็นการพัฒนาแอพพลิเคชันของคุณตัวแรก ให้เปิด cmd ขึ้นมา ทำการพิมพ์คำสั่ง…
Read More » -
พัฒนา Mobile Web App ด้วย Sencha Touch 2.2.0 รู้จักกับ Sencha Cmd
หลังจากที่ออกเวอร์ชันหลายเวอร์ชันมากตอนนี้ก็มาถึงเวอร์ชัน 2.2.0 กับเจ้า Sencha Touch บทเรียนต่อไปนี้คือการสร้างแอพฯ ใหม่ของเราเป็น Sencha Cmd ครับ Sencha Cmd เป็นเครื่องมืออีกตัวที่ทาง Sencha พัฒนาขึ้นมาเพื่อให้นักพัฒนา สามารถสร้าง Project ของตัวเองขึ้นมาได้ง่าย โดยไม่ต้องห่วงในเรื่องของข้อผิดพลาดของ Path…
Read More » -
Sociogram แอพพลิเคชันสำหรับผู้ที่สนใจศึกษา Facebook SDK และ Graph API
สำหรับนักพัฒนาที่สนใจแพลตฟอร์มของ Facebook SDK หรือ Graph API อาจจะชอบ ชุด Source Code ตัวนี้อย่าง Sociogram เพราะถือว่าเป็นตัวอย่างที่น่าศึกษาตัวหนึ่งเจ้าชุดพัฒนา Sociogram ตัวนี้ถูกพัฒนาขึ้นเพื่อเป็นแนวทางในการศึกษาขั้นตอนการเรียก Graph API ผ่าน Method ต่างๆ…
Read More » -
เขียนเกมบน HTML5 ด้วย Cocos2d X HTML และ JavaScript เพิ่มศัตรู และเวลา
วิธีการเขียนเกมบน HTML5 ด้วย Cocos2d X และ JavaScript จากตอนแรกที่เรียกตัวละคร รอบนี้เป็นการโหลดกราฟิกตัวศัตรูให้เคลื่อนไหวด้วยฟังก์ชัน Interval เวลา วิธีเพิ่มศัตรูเข้ามาในฉาก จากบทเรียนก่อนหน้านี้ เขียนเกมบน HTML5 ด้วย Cocos2d X HTML และ…
Read More » -
เขียนเกมบน HTML5 ด้วย Cocos2d X HTML และ JavaScript สร้างตัวละคร
เริ่มต้นเขียนเกมบน HTML5 ด้วย Framework ที่ชื่อ Cocos2D X สำหรับ HTML5 ด้วยภาษาโปรแกรม JavaScript ให้เล่นได้ทุกอุปกรณ์ทั้งเว็บและสมาร์ทโฟนCocos2d HTML5 นั้นจะเน้นการทำงานบน Javascript เป็นหลักครับ ซึ่งแตกต่างจาก Cocos2D บน iPhone…
Read More » -
มาดูผลงาน Game บน HTML5 พัฒนาด้วย Cocos2d-X
เอาโปรเจ็ค Open Source ของ Hao Wu นักพัฒนาโปรแกรม และเกมด้วย HTML5 กับเกม A Lumdum Dare ที่พัฒนาโดย Framework ของ Cocos2d -X ครับ เป็นอีกหนึ่งผลงานที่…
Read More » -
Facebook API แชร์พฤติกรรมของคุณผ่าน Open Graph บน Activity
วิธีการพัฒนาเว็บแอพพลิเคชันให้คุณสามารถบอกเล่า หรือแชร์ Publish Action บน Facebook ในส่วนของ Activity Log ผ่าน Open Graph นั้นไม่ยากครับ Open Graph นั้นมีการทำงานง่ายๆ คือการบอกเล่าว่า ขณะนี้คุณดูอะไร อ่านอะไร เล่นอะไร…
Read More » -
สร้าง D.I.Y Augmented Reality บนสมาร์ทโฟน ด้วย Layar Creator
วิธีการทำ Augmented Reality ด้วยตัวเองแบบ D.I.Y. ด้วย Layar Creator แบบง่ายๆ เป็นกรณีศึกษาด้าน Social Media Integration ที่ทำได้ง่ายทีเดียว เมื่อก่อน 1-3 ปีมานี้ AugmentedReality ถือว่าเป็นเทคโนโลยีที่ใหม่ และฟังดูไกลตัวเกินไปสำหรับผู้ประกอบการ…
Read More » -
Instagram API สร้าง Animation Banner บนเว็บจากภาพถ่าย Instagram
การใช้ jQuery plugin สร้างเว็บไซต์แบบ Responsive Web และมี Animation ในการเปลี่ยนรูปภาพโดยใช้ Instagram API เข้ามาช่วยในการพัฒนาร่วมเชิงประยุกต์ก่อนที่จะเริ่มต้นบทเรียนนี้แบบรวดเร็วนั้น ผู้เริ่มต้นและยังไม่เข้าใจอาจจะต้องไปอ่านข้อมูลก่อนหน้านี้ที่ บทความ “Instagram API เบื้องต้นกับการดึงรูปภาพมาแสดงโดยใช้ Tags อย่างง่าย” ก่อนนะครับเพื่อให้รู้ขั้นตอนวิธีการดึงภาพถ่ายจาก…
Read More » -
HTML5 CSS3 กับตัวอย่าง Google Driod เต้น กังนัม สไตล์ (Gangnam Style)
ไลบราลี่ HTML5 และ CSS3 กับการสร้าง Animation แบบ Pure CSS ให้เจ้า Google Android หุ่นกระป๋องเขียวออกมาเต้นกังนัมสไตล์ (Gangnam Style) โชว์ครับซึ่งชุดไลบราลี่ (Library) ตัวนี้ทางได้ออกมาจาก แคมเปญของ http://www.google.com/zeitgeist “จิตวิญญาณของปี…
Read More »
