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

How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf

FIDO Alliance

Microsoft CSP Briefing Pre-Engagement - Questionnaire

Exakis Nelite

TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...

marcuskenyatta275

Delivered by Sreenath Gopalakrishna, Director of Software Engineering at BT, and Dr Jim Webber, Chief Scientist at Neo4j, at Gartner Data & Analytics Summit London 2024 this presentation examines how knowledge graphs and GenAI combine in real-world solutions. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Future innovation plans include the exploration of uses of EKG + Generative AI.

BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx

Neo4j

PLAI - Acceleration Program for Generative A.I. Startups

Stefano

Join me in this session where I'll share our journey of building a fully serverless application that flawlessly managed check-ins for an event with a staggering 80 thousand registrations. We'll dive into three key strategies that made this possible. Firstly, by harnessing DynamoDB global tables, we ensured global service availability and data replication across regions, boosting performance and disaster recovery. Next, we'll explore how we seamlessly integrated real-time updates into the app using Appsync subscriptions, making the experience dynamic and engaging for users. Finally, I'll discuss how provisioned concurrency not only improved performance but also kept costs in check, highlighting the cost-effectiveness of serverless architectures. Through these strategies and the inherent scalability of serverless technology, our application effortlessly handled massive user loads without manual intervention. This session is a real world example to the power and efficiency of modern cloud-based solutions in enabling seamless scalability and robust performance with Serverless

How we scaled to 80K users by doing nothing!.pdf

Srushith Repakula

Where to Learn More About FDO _ Richard at FIDO Alliance.pdf

FIDO Alliance

When you think of a highly secure meeting environment, do you instantly think 'Microsoft Teams'!? Or do you think about some unknown application, troublesome UI and daunting login process...? If you think the latter - let's change that! In this session Femke will show you how using Teams Premium features can create secure, but also good looking meetings! PRETTY. Make sure your company's brand is represented before, during and after the meeting with Customization policies in place. SECURE. Lets utilize Meeting templates and Sensitivity Labels to protect your meeting and data to prevent sensitive information from being leaked. After this session, you will have a clear understanding of the capabilities of Teams Premium features and how to set up the perfect meeting that suits your organizational requirements!

ECS 2024 Teams Premium - Pretty Secure

Femke de Vroome

New customer? New industry? New cloud? New team? A lot to handle! How to ensure the success of the project? Start it well! I've created the 3 areas of focus at the beginning of the project that helped me in multiple roles (BA, PO, and Consultant). Learn from real-world experiences and discover how these insights can empower you to deliver unparalleled value to your customers right from the project's start.

Powerful Start- the Key to Project Success, Barbara Laskowska

CzechDreamin

This our Twelfth semiannual report on the global Cryptocurrency mining industry. Bitcoin is the world’s largest special purpose supercomputer. And it is globally decentralized. Millions of nodes all run the same open-source code to secure the Bitcoin network, create value, and put new transactions onto the distributed ledger. The latest Top500 list has just been announced at the ISC 2024 conference in Hamburg, and once again the Frontier supercomputer with 1.2 Exaflops peak performance is number one on the list. If assigned to SHA-256 hashing, Frontier would provide only the equivalent hash rate of about three cabinets of the latest high-end Bitcoin mining systems, costing less than 0.1% of Frontier’s cost. Michael Saylor, Chairman of MicroStrategy, has pointed out that GPUs are two orders of magnitude slower than the 5-nanometer technology of custom ASICs used for Bitcoin mining today. He makes the point that the Bitcoin network is unassailable by all of the hyperscale computing resources combined in AWS, Google, and Microsoft Azure cloud data centers today.

TopCryptoSupers 12thReport OrionX May2024

Stephen Perrenod

State of the Smart Building Startup Landscape 2024!

Memoori

Overview of Hyperledger Foundation

Hyperleger Tokyo Meetup

The Metaverse: Are We There Yet?

Mark Billinghurst

Webinar Recording: https://www.panagenda.com/webinars/easier-faster-and-more-powerful-notes-document-properties-reimagined/ Have you ever felt frustrated by the small properties dialog in Notes? Had to create an agent or button to quickly change a field? Searched endlessly for the field you wanted to compare each time you selected a new document? Wished you could just make the damned thing bigger? Luckily, there is a solution – and you probably already have it installed! With the free panagenda Document Properties (Pro) you get the properties dialog you always needed. Big, resizable, full-text searchable. View multiple documents at once or compare them with a diff viewer. Modify any field, and finally have an easy way to handle profile documents for all users. Join HCL Lifetime Ambassador Julian Robichaux to discover how Document Properties can simplify your work and assist you daily when using Domino applications – in the client or the designer. You will never look back! Key takeaways from this session - What Document Properties is, which editions there are, and how you can find it in Notes and Domino Designer - How you can search for and edit any field, compare documents, or CSV export all data - How to find, edit, and even delete profile documents - Which configuration settings are available to customize feature

Easier, Faster, and More Powerful – Notes Document Properties Reimagined

panagenda

Oauth 2.0 Introduction and Flows with MuleSoft

shyamraj55

Intro in Product Management - Коротко про професію продакт менеджера

Mark Opanasiuk

FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...

FIDO Alliance

Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf

FIDO Alliance

Webinar Recording: https://www.panagenda.com/webinars/alles-neu-macht-der-mai-wir-durchleuchten-den-verbesserten-notes-eigenschaftendialog/ Haben Sie sich schon einmal über den zu kleinen Eigenschaftendialog in Notes geärgert? Mussten Sie einen Agenten oder eine Aktion erstellen, um schnell mal ein Feld zu ändern? Haben Sie jedes mal endlos nach dem zu vergleichenden Feld gesucht, nachdem Sie ein neues Dokument ausgewählt haben? Wollten Sie das verdammte Ding einfach nur größer machen? Zum Glück gibt es dafür eine Lösung – und sie ist wahrscheinlich bereits installiert! Mit dem kostenlosen panagenda Document Properties (Pro) erhalten Sie den Eigenschaftendialog, den Sie schon immer haben wollten. Größer, anpassbar, und im Volltext durchsuchbar. Sehen Sie mehrere Dokumente gleichzeitig oder vergleichen Sie mit einem Diff-Viewer. Ändern Sie beliebige Felder und haben Sie endlich eine einfache Möglichkeit, Profildokumente für alle Benutzer zu verwalten. Entdecken Sie mit HCL Ambassador Marc Thomas, wie Document Properties Ihre Arbeit vereinfachen und Sie bei der täglichen Verwendung von Domino-Anwendungen unterstützen kann – im Client oder im Designer. Sie werden es nicht bereuen! Für Sie in diesem Webinar - Was Document Properties ist, welche Editionen es gibt und wo es in Notes und Domino Designer zu finden ist - Wie Sie nach einem beliebigen Feld suchen und es bearbeiten, Dokumente vergleichen oder alle Daten per CSV exportieren können - Suchen, Bearbeiten und auch Löschen von Profildokumenten - Welche Konfigurationseinstellungen verfügbar sind, um Funktionen anzupassen - Wie Ihre Endbenutzer davon profitieren - Sehen Sie alles in einer Live-Demo

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...

panagenda

Designing inclusive products is not only a social responsibility but also a business imperative. This talk delves into the journey of creating accessible hardware products that cater to diverse user needs. Key Topics Covered: 1. Introduction to Inclusive Design - Importance of accessibility in product design - Overview of Comcast's commitment to making products accessible to a wide audience 2. Case Study: Xfinity Large Button Voice Remote - Initial challenges and the evolution of the product - User research and feedback that shaped the design - Key features of the final product and their benefits 3. Designing for Diverse Needs - Understanding human-centered design and its historical context - The impact of designing for people with disabilities on overall product quality - Examples from other industries, such as architecture and industrial design 4. Integrating Accessibility from the Beginning - The cost and efficiency benefits of designing for accessibility from the start - The process of embedding accessibility as a core trait rather than an optional feature 5. Real-World Impact and Continuous Improvement - Insights from in-home studies with users having assistive needs - How continuous feedback and iterative design lead to better products - The role of inclusive research and development practices

Designing for Hardware Accessibility at Comcast

UXDXConf

Recently uploaded (20)

How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf

Microsoft CSP Briefing Pre-Engagement - Questionnaire

TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...

BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx

PLAI - Acceleration Program for Generative A.I. Startups

How we scaled to 80K users by doing nothing!.pdf

Where to Learn More About FDO _ Richard at FIDO Alliance.pdf

ECS 2024 Teams Premium - Pretty Secure

Powerful Start- the Key to Project Success, Barbara Laskowska

TopCryptoSupers 12thReport OrionX May2024

State of the Smart Building Startup Landscape 2024!

Overview of Hyperledger Foundation

The Metaverse: Are We There Yet?

Easier, Faster, and More Powerful – Notes Document Properties Reimagined

Oauth 2.0 Introduction and Flows with MuleSoft

Intro in Product Management - Коротко про професію продакт менеджера

FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...

Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...

Designing for Hardware Accessibility at Comcast

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