มาเล่นตัวต่อ LEGO บนเว็บกันดีกว่า [3D]

LEGO กับ Google ร่วมกันทำเว็บไซต์ Buid with Chrome (buildwithchrome.com) โดยมีตารางบนแผนที่ของออสเตรเลีย และนิวซีแลนด์ เราสามารถกดเข้าไปสร้างอะไรก็ได้บนพื้นที่แปลงหนึ่ง ด้วยตัวต่อ  LEGO 1 พันชิ้น จากนั้นก็แชร์สิ่งก่อสร้างของคุณต่อไป มีข้อจำกัดอีกนิดหน่อย เช่น พื้นที่มีจำกัดใครมาก่อนได้สร้างก่อน หมดแล้วหมดเลย เมื่อเริ่มสร้างแล้วต้องทำให้เสร็จในคราวเดียว และต้องแน่ใจว่าเสร็จสมบูรณ์แล้วค่อยเผยแพร่ หากปิดเว็บไปมันไม่บันทึกให้นะ และยังมีข้อแนะนำอีกนิดหน่อยลองอ่านดูที่ลิงค์ https://www.buildwithchrome.com/static/legal

ส่วนใครไม่อยากอ่านข้อกำหนดต่างๆให้วุ่นวาย ก็ขอให้ตั้งใจสร้างให้สุดฝีมือ แล้วค่อยกดแชร์

LEGO Build with Chrome (ฝีมือห่วยๆของผมเอง)

การเข้าใช้งานเว็บไซต์ต้องใช้บราวเซอร์ที่รองรับ HTML5 ใช้งานได้ดีกับ Google Chrome

พอเล่นไปเริ่มสนุกขึ้นเรื่อยๆ ไม่น่าเชื่อว่าตัวต่อไม่กี่แบบมันจะทำอะไรได้เยอะแยะขนาดนี้ เป็นการตลาดที่ดีเลยละ เพราะเล่นไปสักพักผมก็อยากได้ LEGO ของจริงขึ้นมาเลยทีเดียว

เริ่มเล่น LEGO กันได้เลยที่ https://www.buildwithchrome.com/

via: https://www.howtogeek.com

HTML5games.com เว็บรวมเกมส์ที่ใช้ html5

HTML5games.com

HTML5games.com เป็นเว็บรวบรวมเกมส์ที่ใช้ความสามารถของ HTML5 ล้วนๆ ไม่มี flash, silverlight มาปน ด้วยความสามารถของ HTML5 ที่เด่นๆเช่น WebGL, the Canvas API, HTML5 elements etc. ลองเล่น 2-3 เกมส์ กลุ่มที่มีคะแนนรีวิวสูง พบว่าสนุกเหมือนกันนะ แต่ ณ ตอนนี้มันยังสู้เกมส์จาก Flash ไม่ได้หรอก แต่เขาว่ามันเป็นอนาคตเลยต้องตามกระแสหน่อย

อยากรู้ว่า Browser ของมือถือ Android 2.0 / 2.1 (Eclair)ขึ้นไป ที่บอกว่า support HTML5 มันเล่นเกมส์พวกนี้ได้หรือปล่าว? ใครมีอยู่ลองเล่นดูนะครับ

Google Docs ใส่ภาพในเอกสารด้วยการ Drag & Drop ได้แล้ว

Google Docs ผมใช้ในการทำงานเยอะพอควร การใส่รูปภาพในเอกสาร ถือว่ายุ่งยากเลยทีเดียวเมื่อเทียบกับ MS Office ต้องคลิก Insert >คลิก Image >คลิก Upload>คลิก Choose file >เลือกไฟล์> คลิก Upload หลายขั้นตอนไหมครับ ในขณะที่ MS Office ใช้ Copy&Paste ได้เลย

ล่าสุด Google เพิ่มความสามารถให้ Google Docs ให้ใส่รูปในเอกสารด้วยการ Drag & Drop อย่างเช่นที่ Gmail สามารถแนบไฟล์ในอีเมลด้วยวิธีนี้เช่นกัน ลดขั้นตอนการทำงานไปได้เยอะเลยทีเดียว รองรับ Google Chrome, Firefox, Safari (ไม่มี IE นะ)

วิธีใช้ง่ายๆ เราก็เปิดหน้าไฟล์ Docs ค้างไว้ จากนั้นเปิดโฟว์เดอร์ภาพที่ต้องการใส่ขึ้นมาแล้ว คลิกไฟล์รูปภาพค้างไว้ลากไปใส่ในเอกสารเลย ดูตัวอย่างที่รูปด้านล่าง

ใส่ภาพด้วยการ Drag & Drop
ภาพที่นำเข้ามาแล้ว

via: https://Googledocs.blogspot.com

Google DevFest Bangkok ช่วงที่ 3 (จบ)

Google DevFest Bangkok ช่วงที่ 1 กับ ช่วงที่ 2 ตามไปอ่านได้ตามลิงค์

ต่อไปเป็น ช่วงที่ 3 ตอนบ่าย เป็นตอนสุดท้าย มีการพูดถึง Social ก่อนที่จะมีการแบ่งห้อง codelab ออกตามความสนใจ ห้อง Android, Map API,Web Social, Chrome Extension ส่วนใหญ่คนอยู่ห้อง Android กันเต็มห้อง แต่ผมอยู่ที่ห้องกลาง เป็นห้อง Showcase โดย @sugree และ @kenggg

เริ่มบันทึก….

บรรยากาศในห้องประชุมใหญ่ช่วงบ่าย

ตอนบ่ายเริ่มตอนบ่ายกว่าๆ

Timothy Jordan

หัวข้อ The New Web Social โดย Timothy Jordan @timothyjordan  แกมาในแนวร่าเริง พูดเร็ว แสดงท่าทางประกอบตลอด ดูสนุกสนาน หัวข้อหลักคือ Open Standard และ Google Buzz (ที่ไม่ค่อยมีคนใช้)

ดูสไลด์นำเสนอของเขาได้ที่ The-New-Social-Web-It-s-About-Open-Standards

คำถามว่าทำไม ต้อง Open Standard คำตอบคือ

Open Standard

  • Simplify
  • Interoperability
  • Freedom
  • Community
Open standard

Open standard ที่เขาแนะนำ คือ

  1. OAuth คือ Open Authorization ดูรายละเอียดในเว็บเลยแล้วกัน https://oauth.net/
  2. Atom https://en.wikipedia.org/wiki/Atom_(standard)
  3. pubsubhubbub รูปแบบการเผยแพร่เนื้อหาแบบ Atom, RSS https://code.Google.com/p/pubsubhubbub/
  4. Salmon protocal  https://www.salmon-protocol.org/
  5. Activitystreams https://activitystrea.ms/
Google Buzz

Open standard มันอยู่ Google Buzz หมดแล้ว มีผลิตภัณฑ์ดีๆ ที่ไม่มีคนใช้

แล้วเริ่ม แบ่งห้องกันเข้าฟังตามความสนใจ ผมยังอยู่ห้องกลาง

@sugree

เป็นการ showcase โปรแกรมบน Android ของ @sugree เพิ่งรู้ว่าเขามี App บน Market ตอนนี้ก็ 40 apps เข้าไปแล้ว สุดยอดจริงๆ

มีแนะนำโปรแกรมอยู่ 7 ตัว พร้อมแนะนำว่าเขียนขึ้นมายังไง ใช้เครื่องมืออะไรบ้าง และเหตุจูงใจ

โชว์โค้ด

เอาโค้ดมาให้ดูเลยว่าว่าเขียนประมาณไหน ใช้ API ตัวไหน

ตามไปดูสไลด์สั้นๆของเขาได้ที่ https://sugree.com/node/613

@kenggg

@kenggg มาโชว์วิธีการเขียน Chrome Extension เขาบอกว่ามันเขียนง่ายมาก คนที่ไม่เก่ง Javascript อย่างเขาก็เขียนมันขึ้นมาได้

extension

Google Chrome Extension ที่เขาเขียนขึ้นมา ชื่อ QR Link มันจะเปลี่ยน URL หน้าที่เราเปิดอยู่ให้เป็น QR Code แล้วใช้มือถือแสกนไปอ่านต่อที่มือถือได้ ใครสนใจลองติดตั้งและใช้งานดูได้ ลิงค์นี้ครับ https://Chrome.Google.com

และต่อด้วยสัมภาษณ์พิเศษ

วิศวกรหญิงของ Google ที่เป็นคนไทย

วิศวกรหญิง @nonglisa Facbook คนไทยที่ทำงานกับ Google และน้อง @lazier Facebook ที่ไปฝีกงานที่ Google คิดว่าคงสร้างแรงบันดาลใจให้น้องๆอีกหลายคน

ผมนั่งฟังอยู่แป๊ปหนึ่งจึงแวะไปดูที่ห้อง code lab

Android Code Lab

ห้องนี้คนแน่นมาก นั่งตามพื้นก็มี ปลั๊กไฟก็ไม่พอ แลดูจะพบว่าเหล่า Geek ทั้งหลายใช้ MacBook, ThinkPad, Dell เป็นส่วนใหญ่ ยี่ห้ออื่นแทบจะไม่เห็นเลย

Code แล้วรันแสดงผล

ใช้ Nexus One รันโปรแกรม ทดสอบให้ดู คนสอนหน้าเด็กนึกว่าเด็ก ม.ปลายที่ไหนมาสอน

ห้อง Lab อื่นๆคนค่อนข้างน้อย ไม่ค่อยได้รับความสนใจมากนัก
ลิงค์ของ Building a Chrome Extension with HTML5 Technology https://kurrik.github.com/hackathons/

พักทานของว่างอีกครั้ง

ก่อนที่จะกลับมาที่ห้องประชุมใหญ่ อีกครั้ง

Alan Noble

Alan Noble ขึ้นมาแนะนำ แนวคิดของผู้ที่อยากจะเป็นเจ้าของกิจการ มีอยู่ 7 ข้อ

7 Learnings of entrepreneur
  1. Do what you love
  2. Seek opportunities
  3. Meet lots of people
  4. Be prepared to make sacrifices
  5. The 3 “A” s; Audit,Admit,Adapt
  6. Get focused
  7. Have fun
ติดตามไปอ่านได้ที่บล็อกของเขาตามลิงค์ด้านล่างนี้

https://techchomp.blogspot.com/2010/10/learnings-of-entrepreneur-bangkok.html

พูดคุยกับผู้เริ่มต้นบริษัทด้วยตัวเอง

การพูดคุยกับคนที่สร้างบริษัทด้วยตนเอง จากซ้ายไปขวา @TonAwe ดำเนินรายการ @Jimmy_LIVE คุณหมอที่เปลี่ยนอาชีพมาเป็นโปรแกรมเมอร์เริ่มต้น ด้วยการเขียนโปรแกรมแจกฟรีก่อน จนคนที่ขายโปรแกรมต้องบอกให้หยุดแจก และร่วมทำธุรกิจร่วมกัน คุณหมอจิมมี่เคยทำธุรกิจกับ Chris Anderson (WIRED Editor) โอ้..สุดยอด

ดร.เจ ทำธุรกิจ VC (Venture Capital) ได้ใจความว่า เราควรทำอะไรที่มันขายได้ทั่วโลก ขายให้ฝรั่งก่อน ในไทยมีปัญหาหลายอย่าง เช่น เรื่องลิขสิทธิ์

@pawoot แนะนำว่า เราควรทำอะไรที่เพิ่มยอดขายให้ธุรกิจเขาได้ เขาจะยอมลงทุน และยอมจ่ายให้เรา

น้องวิศวะ ม.เกษตร จบใหม่ https://www.levelup.in.th ตอนนี้เปิดบริษัท ร่วมกับเพื่อน 4 คน ทำเกมบน facebook ที่เปิดให้คนเล่นทั่วโลก เจ้าของแนวคิด นับ 1..2..3.. แล้วทำเลย

……..

GTUGs

น้องมาแนะนำ Google Technology User Groups (GTUGs) หรือกลุ่มผู้ใช้ผลิตภัณฑ์ของ Google https://www.gtugs.org/

Q&A

ช่วง Q&A ให้ speaker ทุกคนขึ้นเวที แล้วเปิดให้ถามคำถามตามใจ เท่าที่จำได้

  • เรื่อง Amazon จะเปิด App Market สำหรับ Android คิดยังไงบ้าง >>เหมือนเขาจะไม่รู้เรื่องข่าวนี้
  • เรื่องความปลอดภัยของโค้ดใน HTML5 ที่จะถูกก๊อปปี้ได้ง่ายไหม>>Web หรือ Web App ทำงานได้ มีองค์ประกอบหลายอย่าง ได้โค้ดไปอาจรันไม่ได้
  • Chrome OS จะมาเมื่อไหร่ >> ไม่ทราบ

และเรื่องเทคนิคลึกๆ เหมือนคนจะสนใจเรื่อง Privacy เยอะเป็นพิเศษ

มีตอบปัญหาชิง Bean Bag  ด้วย อยากได้บ้าง

สุดท้ายลิงค์ survey: https://goo.gl/KQFW

น้องๆ อาสาสมัครจากวิศวะ ม.เกษตร

น้องอาสาสมัคร จากวิศวะ ม.เกษตร ที่เข้ามาช่วยจัดงาน ต้องปรบมือให้ครับ

จบแล้วสำหรับการบันทึกงานที่ถือว่า จัดได้เยี่ยมมากๆครับ

รวมภาพช่วงที่ 3 : https://picasaweb.Google.com/sarapukdee/GoogleDevFest3

Google DevFest Bangkok ช่วงที่ 2

ใครยังไม่ได้อ่าน Google DevFest Bangkok ช่วงที่ 1 ไปอ่านก่อน

หลังจากพักทานของว่าง ก็เริ่มช่วงที่สอง ช่วงพักผมอัพโหลดรูปช่วงแรกขึ้น Picasa เสร็จอย่างรวดเร็วเน็ตขาอัพโหลดเร็วมาก

เริ่มบันทึก…

HTML5 in Chrome by @kurrik

หัวข้อ HTML5 in Chrome โดย Arne Roomann-Kurrik @kurrik

สไลด์ของเขาสามารถดูได้ที่ https://kurrik-slides.appspot.com/html5-techtalk/

Google Chrome

Google Chrome มันเร็วและเสถียร คนใช้เยอะ เติบโตเร็ว พัฒนาเร็ว

การพัฒนาเว็บไซต์

Timeline ของ เว็บตั้งแต่ปี คศ.1990 ที่เกิด web pages ครั้งแรก จนถึงปัจจุบัน ยุคของ HTML5 แบบชัดตามไปดูใน slide ของเขา หรือในลิงค์อัลบั้มรูป ท้ายเรื่อง

HTML 5

HTML5 มีอะไรอยู่ภายในบ้าง Video, Notification, Fonts, CSS3, Storage, Canvas 2D, Sockets, Transforms, SVG, WebGL, Audio,Microdata ตอนพรีเซ็นต์กล่องต่างๆจะหล่นลงมา ทับกัน มีเปิดซ้ำให้ดูด้วย ชอบใจกันใหญ่

จากนั้นก็เริ่มสาธิต แต่ละ feature เห็นแล้วทึ่งไปเลย ไม่คิดว่ามันจะเทพขนาดนี้

Canvas

เขียนรูปด้วย Canvas 2D

Canvas 3D

Canvas 3D แสดง Gallery แบบ 3 มิติ สวยงาม เท่ มาก

HTML5 SVG

SVG ทำภาพตัวอักษร เป็นมุมตามต้องการ เลือกตาม line แล้วคลิกแปลข้อความได้เลย โชว์แปลเป็นภาษาไทยว่า ขอความนี้ตามบรรทัด

video

tag Audio และ Video ใส่ Effect ให้วีดีโอได้ด้วย ภาพในสไลด์เป็นวีดีโอนะครับ กับลังเล่นแต่ถูกหันออกเป็นชิ้นได้ อันสุดยอด ทุกคนปรบมือ

Web SQL DB

HTML5 มันติดต่อกับฐานข้อมูลได้ด้วย เจ๋งอ่ะ เลิกเขียน php ไปเลยดีไหม

Thread

ทำงานหลายอย่างพร้อมกันได้ โอ้แม่เจ้า

video and canvas

อันนี้ทุกคนปรบมือให้เลยครับ เป็นวีดีโอที่แตกเป็นลูกเต๋า แล้วหล่นตามแรงดน้มถ่วง ตรวจจับการเอียงโน๊ตบุค

อื่นๆ Drag&Drop, Transition, Transform ดูได้ที่ลิงค์ slide ด้านบน ขอบอกว่าประทับใจ

Maps API on Mobile

หัวข้อต่อไปเป็น Maps API on Mobile โดย Shawan Shen @sshen

สไลด์ของเขาดูได้ที่ https://www.slideshare.net/ss318/maps-api-onmobiledevfestbangkok

Maps APIs V3

แนะนำ Google Maps APIs V3 ที่มีความสามารถเพิ่มมากขึ้น

Map in Android App

เขาแนะนำให้ใช้ Javascript API กับ App ในมือถือ

Feature ด้วยรวมของ Map API V3 มีดังนี้

  • Marker,Overlays,Controls
  • Map Events
  • Getting User’s Location
  • Ajax & Callback Function
  • Geocoding
  • Geospatial Search
  • Directions
Maps API V3 Timeline

Time ของ Maps Javascript API V3

Key

สรุปโดยรวม เขาแนะนำให้นักพัฒนาให้ใช้ Embed Javascript Map กับ Native app ไม่รู้ในมุมของพัฒนาคิดยังไงกับเรื่องนี้

Barcamp Bangkok

ก่อนจบช่วงที่ 2 มีการประชาสัมพันธุ์งาน Barcamp Bangkok ที่จะจัดในวันที่ 23-24 ตุลาคม นี้ ติดตามรายละเอียดได้ที่ https://www.barcampbangkok.org/

พักทานข้าวเที่ยง เขาเลี้ยงข้าวกล่อง อาหารอร่อยเลยทีเดียว และชมบูธของ HTC กับ Provision นิดหน่อย

รวมรูปในช่วงที่ 2 https://picasaweb.Google.com/sarapukdee/GoogleDevFest2

HTML5 Elements ในแบบตารางธาตุ

HTML5 ในแบบตารางธาตุ

HTML5 Elements ตารางแสดง Tags ของ HTML5 ใช้สีแยกหมวด เวลาคลิกก็จะแสดงรายละเอียดสั้นๆให้ดู และมีลิงค์ไปที่ Guide ให้อ่านแบบละเอียด แต่ก่อนเจอเฉพาะแบบที่เป็นตาราง รูปนี้เพิ่งเคยเห็นเจ๋งดี ดูง่ายดี

deviantART muro ขีดเขียน วาดภาพออนไลน์

muro.deviantart drawing app

https://muro.deviantart.com ไปเจอเว็บนี้มา วาดภาพออนไลน์ แบบฟรีมี brush ให้เลือกใช้ 6 อัน แต่พอสำหรับขีดเขียนเล่น ทำงานแบบหลาย layer ได้ด้วย สังเกตุด้านซ้ายของจอ รองรับ Wacom ด้วย ภาพเขียนเสร็จ Export ออกมาเป็นไฟล์ PNG ถ้าจอเป็นทัชสกรีนและใหญ่มากกว่านี้น่าจะเขียนสนุกมากขึ้น และนี้คืองานล่าสุดที่ใช้เว็บนี้ทำขึ้นมา

ผลงานของผม