Html5 new sword for interactive app

•

7 likes•1,872 views

Yohan Totting

This slide presented at Google DevFest Bandung 2012. Talk about HTML5 in interactive app/game development.

Technology

HTML5
A NEW SWORD FOR
INTERACTIVE APP
Yohan Totting
http://thinkrooms.com
@tyohan
tyohan@thinkrooms.com

Sunday, October 7, 12 1

Halo
Yohan Totting

Application Developer
Founder of ThinkRooms Studio
FOWAB & HackerspaceBDG Initiator

Sunday, October 7, 12 2

HTML5 COMPONENTS FOR
INTERACTIVE APP/GAME

Sunday, October 7, 12 3

WEBSOCKET & WEBRTC

Sunday, October 7, 12 7

OFFLINE CAPABILITY

Sunday, October 7, 12 8

AUDIO & VIDEO CAPTURE
WITH GETUSERMEDIA

Sunday, October 7, 12 10

CANVAS
VS
DOM MANIPULATION

Sunday, October 7, 12 11

CANVAS
Pro
•Pixel manipulation
•Easy to draw lines, curves, & shapes from code
•Consistent view on browser
Cons
•Only supported on modern browser
•Need to track position and state for each
object
•Developer need to create it’s own effect and
animation
Sunday, October 7, 12 12

DOM MANIPULATION

Pro
•Supported on most browsers
•Native CSS3 effect and animation
•Faster development

Cons
•Performance depend on HW acceleration
•Cross browser issues
•Bad for large DOMs
Sunday, October 7, 12 13

HTML5 ON MOBILE

Sunday, October 7, 12 14

NATIVE SDK SUPPORT FOR
HTML5 APP

Sunday, October 7, 12 16

WRITE ONCE DEPLOY
ANYWHERE

Sunday, October 7, 12 17

Game Engine

IMPACTJS
http://impactjs.com

Sunday, October 7, 12 19

Game Engine

LIMEJS
http://www.limejs.com

Sunday, October 7, 12 20

Game Engine

CAAT
Canvas Advanced Animation Toolkit
http://labs.hyperandroid.com/static/caat/

Sunday, October 7, 12 21

Game Engine & Framework

CREATE JS
http://www.createjs.com/

Sunday, October 7, 12 22

Direct Canvas, Cloud API, & Monetization Tool

CACOONJS
http://ludei.com/tech/cocoonjs

Sunday, October 7, 12 23

SDK, Direct Canvas, Cloud API, & Monetization Tool

APPMOBI
http://www.appmobi.com/

Sunday, October 7, 12 24

THANKS

Yohan Totting
http://thinkrooms.com
@tyohan
tyohan@thinkrooms.com

Sunday, October 7, 12 25

Similar to Html5 new sword for interactive app

Ga london-html5&mobile advertising-tomlimongello

Tom Limongello

Video and slides synchronized, mp3 and slide download available at http://bit.ly/ZWoOFl. Max Firtman discusses the present mobile ecosystem, why cross-platform is the key to success, HTML5 APIs, challenges with HTML5, when HTML5 is a proper solutions and other. Filmed at qconsf.com. Max Firtman is a mobile+web developer, trainer, speaker and writer. He is Adobe Community Champion and founder of ITMaster Professional Training. He wrote many books, including "Programming the Mobile Web" and "jQuery Mobile: Up and Running" published by O'Reilly Media. He has a blog about mobile web development at www.mobilexweb.com and he maintains the website www.mobilehtml5.org.

Multiplatform, Promises and HTML5

C4Media

O App Engine (PaaS da Google) foi por algum tempo uma das plataformas mais simples para se começar um produto na web, pela facilidade e abstração que oferece, fazendo com que o desenvolvedor não tenha que se preocupar com dificuldades técnicas normalmente encontradas em outras plataformas do gênero. Nesta palestra, vamos falar sobre porque no Trainee World (http://www.traineeworld.com.br/home) optamos pela migração para o framework Django e o serviço de hosting do Heroku. Quais são as vantagens e desvantagens? Vale a pena?

Migrando do App Engine para o Heroku

Filipe Ximenes

DrupalCampNYC 10 - Native mobile apps with Drupal

zroger

HTML5 and Sencha Touch

Patrick Sheridan

Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...

Jesse Cravens

Performance & Responsive Web Design

Zach Leatherman

Working With Social APIs - SoMeT12

Mario Vasquez

Progressive Advancement, by way of progressive enhancement

Paul Irish

Joshfire Factory: Building Apps for Billion of Devices

Francois Daoust

Mobile Development with Icenium

Bill Condo

As we move further into the future of digital design, web design is no longer just about creating a single great desktop browsing experience. The interactive design industry is at a crossroads; mobile and tablet devices continue to propagate and fuel new interactions, and the web is now found on more devices than ever. So, how do we adjust accordingly? More often than not, designers and programmers use old methodologies to tackle new problems. The real tool kit of a great web designer starts off-line and off-screen. This lecture will showcase important skills that will prepare flexible designs for future facing web projects. We will outline a set of new philosophies, collaborative processes and custom tools that enable productivity in this ever-changing world. We'll also cover the importance of creating your own tools and adapting to new needs, so you can stay ahead of the game. By demonstrating the right workflow, the right tools and a future facing philosophy, this talk aims to help anyone who has thought to themselves: 'there has to be a better way'. The future isn't 12-column grids and pixel perfect PSDs. It's a flexible thinking model that relies on your understanding of development and a strong design philosophy.

The Web Designers Toolkit

R/GA

Educause - Building a Responsive Website for the Presidential Debate

Jon Liu

Mobile? WT... F?

Vicker Leung

Designing the code of a large application in production and scaling up to thousands of users while doing it all in Node.js is a challenge that no developer should face alone. I will discuss how we have developed a highly decoupled, plugin-based architecture and a decentralized infrastructure for Cloud9 IDE, along with the technologies we've developed and the difficulties we faced in order to build the largest Node.js application that exists in production.

Big app design for Node.js

Sergi Mansilla

Mobile Accessibility - Accessibility Camp Toronto

Ted Drake

Tech Tools for Meeting Professionals

Midori Connolly

Make something real for Firefox OS with Mozilla app templates

Piotr Zalewa

Cloud4all Architecture Overview

icchp2012

Architecting large Node.js applications

Sergi Mansilla

Similar to Html5 new sword for interactive app (20)

Ga london-html5&mobile advertising-tomlimongello

Multiplatform, Promises and HTML5

Migrando do App Engine para o Heroku

DrupalCampNYC 10 - Native mobile apps with Drupal

HTML5 and Sencha Touch

Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...

Performance & Responsive Web Design

Working With Social APIs - SoMeT12

Progressive Advancement, by way of progressive enhancement

Joshfire Factory: Building Apps for Billion of Devices

Mobile Development with Icenium

The Web Designers Toolkit

Educause - Building a Responsive Website for the Presidential Debate

Mobile? WT... F?

Big app design for Node.js

Mobile Accessibility - Accessibility Camp Toronto

Tech Tools for Meeting Professionals

Make something real for Firefox OS with Mozilla app templates

Cloud4all Architecture Overview

Architecting large Node.js applications

Recently uploaded

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...

Zilliz

The Good, the Bad and the Governed - Why is governance a dirty word? David O'Neill, Chief Operating Officer - APIContext Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

apidays

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

Real Time Object Detection Using Open CV

Khem

Modernizing Securities Finance: The cloud-native prime brokerage platform transforming capital markets. Madhu Subbu, Managing Director, Head of Securities Finance Engineering Apidays Singapore 2024: Connecting Customers, Business and Technology (April 17 & 18, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu

apidays

This presentations targets students or working professionals. You may know Google for search, YouTube, Android, Chrome, and Gmail, but did you know Google has many developer tools, platforms & APIs? This comprehensive yet still high-level overview outlines the most impactful tools for where to run your code, store & analyze your data. It will also inspire you as to what's possible. This talk is 50 minutes in length.

Powerful Google developer tools for immediate impact! (2023-24 C)

wesley chun

💉💊+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHABI}}+971581248768 +971581248768 Mtp-Kit (500MG) Prices » Dubai [(+971581248768**)] Abortion Pills For Sale In Dubai, UAE, Mifepristone and Misoprostol Tablets Available In Dubai, UAE CONTACT DR.Maya Whatsapp +971581248768 We Have Abortion Pills / Cytotec Tablets /Mifegest Kit Available in Dubai, Sharjah, Abudhabi, Ajman, Alain, Fujairah, Ras Al Khaimah, Umm Al Quwain, UAE, Buy cytotec in Dubai +971581248768''''Abortion Pills near me DUBAI | ABU DHABI|UAE. Price of Misoprostol, Cytotec” +971581248768' Dr.DEEM ''BUY ABORTION PILLS MIFEGEST KIT, MISOPROTONE, CYTOTEC PILLS IN DUBAI, ABU DHABI,UAE'' Contact me now via What's App…… abortion Pills Cytotec also available Oman Qatar Doha Saudi Arabia Bahrain Above all, Cytotec Abortion Pills are Available In Dubai / UAE, you will be very happy to do abortion in Dubai we are providing cytotec 200mg abortion pill in Dubai, UAE. Medication abortion offers an alternative to Surgical Abortion for women in the early weeks of pregnancy. We only offer abortion pills from 1 week-6 Months. We then advise you to use surgery if its beyond 6 months. Our Abu Dhabi, Ajman, Al Ain, Dubai, Fujairah, Ras Al Khaimah (RAK), Sharjah, Umm Al Quwain (UAQ) United Arab Emirates Abortion Clinic provides the safest and most advanced techniques for providing non-surgical, medical and surgical abortion methods for early through late second trimester, including the Abortion By Pill Procedure (RU 486, Mifeprex, Mifepristone, early options French Abortion Pill), Tamoxifen, Methotrexate and Cytotec (Misoprostol). The Abu Dhabi, United Arab Emirates Abortion Clinic performs Same Day Abortion Procedure using medications that are taken on the first day of the office visit and will cause the abortion to occur generally within 4 to 6 hours (as early as 30 minutes) for patients who are 3 to 12 weeks pregnant. When Mifepristone and Misoprostol are used, 50% of patients complete in 4 to 6 hours; 75% to 80% in 12 hours; and 90% in 24 hours. We use a regimen that allows for completion without the need for surgery 99% of the time. All advanced second trimester and late term pregnancies at our Tampa clinic (17 to 24 weeks or greater) can be completed within 24 hours or less 99% of the time without the need surgery. The procedure is completed with minimal to no complications. Our Women's Health Center located in Abu Dhabi, United Arab Emirates, uses the latest medications for medical abortions (RU-486, Mifeprex, Mifegyne, Mifepristone, early options French abortion pill), Methotrexate and Cytotec (Misoprostol). The safety standards of our Abu Dhabi, United Arab Emirates Abortion Doctors remain unparalleled. They consistently maintain the lowest complication rates throughout the nation. Our Physicians and staff are always available to answer questions and care for women in one of the most difficult times in their lives. The decision to have an abortion at the Abortion Cl

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Martijn de Jong

Following the popularity of "Cloud Revolution: Exploring the New Wave of Serverless Spatial Data," we're thrilled to announce this much-anticipated encore webinar. In this sequel, we'll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you're building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

Axa Assurance Maroc - Insurer Innovation Award 2024

The Digital Insurer

Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows. We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases. This video focuses on the deployment of external web forms using Jotform for Bonterra Impact Management. This solution can be customized to your organization’s needs and deployed to support the common use cases below: - Intake and consent - Assessments - Surveys - Applications - Program registration Interested in deploying web form automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...

Jeffrey Haguewood

GenAI Risks & Security Meetup 01052024.pdf

lior mazor

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Product Anonymous

MySQL Webinar, presented on the 25th of April, 2024. Summary: MySQL solutions enable the deployment of diverse Database Architectures tailored to specific needs, including High Availability, Disaster Recovery, and Read Scale-Out. With MySQL Shell's AdminAPI, administrators can seamlessly set up, manage, and monitor these solutions, ensuring efficiency and ease of use in their administration. MySQL Router, on the other hand, provides transparent routing from the application traffic to the backend servers in the architectures, requiring minimal configuration. Completely built in-house and supported by Oracle, these solutions have been adopted by enterprises of all sizes for their business-critical applications. In this presentation, we'll delve into various database architecture solutions to help you choose the right one based on your business requirements. Focusing on technical details and the latest features to maximize the potential of these solutions.

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Miguel Araújo

AXA XL - Insurer Innovation Award Americas 2024

The Digital Insurer

MS Copilot expands with MS Graph connectors

Nanddeep Nachan

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

As privacy and data protection regulations evolve rapidly, organizations operating in multiple jurisdictions face mounting challenges to ensure compliance and safeguard customer data. With state-specific privacy laws coming up in multiple states this year, it is essential to understand what their unique data protection regulations will require clearly. How will data privacy evolve in the US in 2024? How to stay compliant? Our panellists will guide you through the intricacies of these states' specific data privacy laws, clarifying complex legal frameworks and compliance requirements. This webinar will review: - The essential aspects of each state's privacy landscape and the latest updates - Common compliance challenges faced by organizations operating in multiple states and best practices to achieve regulatory adherence - Valuable insights into potential changes to existing regulations and prepare your organization for the evolving landscape

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

TrustArc

Strategies for Landing an Oracle DBA Job as a Fresher

Remote DBA Services

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Edi Saputra

Recently uploaded (20)

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

How to Troubleshoot Apps for the Modern Connected Worker

Real Time Object Detection Using Open CV

Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu

Powerful Google developer tools for immediate impact! (2023-24 C)

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Axa Assurance Maroc - Insurer Innovation Award 2024

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...

GenAI Risks & Security Meetup 01052024.pdf

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

AXA XL - Insurer Innovation Award Americas 2024

MS Copilot expands with MS Graph connectors

Boost Fertility New Invention Ups Success Rates.pdf

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

Strategies for Landing an Oracle DBA Job as a Fresher

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Html5 new sword for interactive app

1. HTML5 A NEW SWORD FOR INTERACTIVE APP Yohan Totting http://thinkrooms.com @tyohan tyohan@thinkrooms.com Sunday, October 7, 12 1

2. Halo Yohan Totting Application Developer Founder of ThinkRooms Studio FOWAB & HackerspaceBDG Initiator Sunday, October 7, 12 2

3. HTML5 COMPONENTS FOR INTERACTIVE APP/GAME Sunday, October 7, 12 3

4. CSS3 Sunday, October 7, 12 4

5. CANVAS Sunday, October 7, 12 5

6. AUDIO & VIDEO Sunday, October 7, 12 6

7. WEBSOCKET & WEBRTC Sunday, October 7, 12 7

8. OFFLINE CAPABILITY Sunday, October 7, 12 8

9. WEBGL Sunday, October 7, 12 9

10. AUDIO & VIDEO CAPTURE WITH GETUSERMEDIA Sunday, October 7, 12 10

11. CANVAS VS DOM MANIPULATION Sunday, October 7, 12 11

12. CANVAS Pro •Pixel manipulation •Easy to draw lines, curves, & shapes from code •Consistent view on browser Cons •Only supported on modern browser •Need to track position and state for each object •Developer need to create it’s own effect and animation Sunday, October 7, 12 12

13. DOM MANIPULATION Pro •Supported on most browsers •Native CSS3 effect and animation •Faster development Cons •Performance depend on HW acceleration •Cross browser issues •Bad for large DOMs Sunday, October 7, 12 13

14. HTML5 ON MOBILE Sunday, October 7, 12 14

15. DIRECT CANVAS Sunday, October 7, 12 15

16. NATIVE SDK SUPPORT FOR HTML5 APP Sunday, October 7, 12 16

17. WRITE ONCE DEPLOY ANYWHERE Sunday, October 7, 12 17

18. TOOLS Sunday, October 7, 12 18

19. Game Engine IMPACTJS http://impactjs.com Sunday, October 7, 12 19

20. Game Engine LIMEJS http://www.limejs.com Sunday, October 7, 12 20

21. Game Engine CAAT Canvas Advanced Animation Toolkit http://labs.hyperandroid.com/static/caat/ Sunday, October 7, 12 21

22. Game Engine & Framework CREATE JS http://www.createjs.com/ Sunday, October 7, 12 22

23. Direct Canvas, Cloud API, & Monetization Tool CACOONJS http://ludei.com/tech/cocoonjs Sunday, October 7, 12 23

24. SDK, Direct Canvas, Cloud API, & Monetization Tool APPMOBI http://www.appmobi.com/ Sunday, October 7, 12 24

25. THANKS Yohan Totting http://thinkrooms.com @tyohan tyohan@thinkrooms.com Sunday, October 7, 12 25

Html5 new sword for interactive app

Recommended

Recommended

More Related Content

Similar to Html5 new sword for interactive app

Similar to Html5 new sword for interactive app (20)

More from Yohan Totting

More from Yohan Totting (12)

Recently uploaded

Recently uploaded (20)

Html5 new sword for interactive app