The Appy Hour

•

1 gostou•1,336 visualizações

BigRock India

Rajnish Kumar and Ernesto Cohnen conduct a session on HTML5, CSS3 and JS at BigRock httpX 2013 New Delhi

Tecnologia Design

HTML5 + CSS3 + JS

Rajnish Kumar & Ernesto Cohnen

Evolution of Web Technologies
●
●
●
●
●
●
●
●
●
●

1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2009 HTML 5
2011 CSS 3

The Browser is the new OS
● The browser is the convergence of web
● Connects services with applications
● Makes devices talk to applications
● Is cross-platform
● A browser is today your emails, your work,
your music, your phone, your games, your
movies, your TV...

HTML5 + CSS3 +
JavaScript
One stack to rule them all

HTML5 - Real Time Communications

Web Sockets
Web Workers

Notifications

HTML5 - Semantics & Markups
●
●
●
●

<header>, <nav>, <footer>...
link relations: alternate, nofollow, icon…
Microdata
New Form types (input types). Great on
mobile phones also.
● Define, store, and retrieve custom data on
the DOM. (data-*)

HTML5 - File & Hardware Access
● File Upload / Drag and Drop support
● Offline storage
○ Web Storage (local and session types)
■ JSON/ JavaScript Objects
■ < 5MB limit
○ WebSQL & IndexedDB
■ Not supported in all browsers. IE, Windows
Mobile…
■ One deprecated, the other not so mature.

● GeoLocation: must for mobile devices!
● Others: speech input, orientation...

CSS3 - Animations + Transitions
●
●
●
●

Rotate
scale
translate
…

Save the iphone!

CSS3
● Selectors
○ :first-child, :not, >, +, nth-child
(even)...

● Text: ellipsis, columns...
● Webfonts & iconic fonts

CSS3 - Effects
●
●
●
●
●
●

Opacity (alpha)
Rounded corners (border-radius)
Gradients
Shadows
Border image
...

JavaScript - Evolution
● <body onload=”init();”>
● Unobtrusive Javascript
● nodejs - server.listen(1337, '127.0.0.1');
● AMD and RequireJS
● MVC and Backbone.js
● Apps - Phonegap, Sencha

JavaScript - MVC

source: Mattieu Gamache-Asselin

Write Once
in
HTML 5 + CSS 3 + Javascript

Run Everywhere
with
Phonegap / Parse / Trigger.io / App
Framework etc.

Feb 2013 Source: http://venturebeat.com/2013/02/26/what-developers-do-with-html5-infographic/ - KendoUI

Q&A
Only hardcore technical questions :)

Thank You!
rajnish@ixigo.com
ernesto@ixigo.com
http://saveiphones.herokuapp.com

Mais conteúdo relacionado

Destaque

Html5 aula 02Jose Berardo

PhoneGap - criando aplicações Android e iOS com HTML5Rafael Sakurai

E-book sobre HTML 5 (Devmedia)Devmedia

Curso de HTML5 - Aula 01 Léo Dias

HTML5 Básico: Formulários (aula 2)Gustavo Zimmermann

Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Renato Bongiorno Bonfanti

Curriculo para Designer leonildo wagner - 08-2016 Léo Dias

HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBPeslPinguim

Desenvolvimento Web : HTML5, CSS3 & JavaScriptFábio Flatschart

Web design responsivo e adaptativo - HTML5/CSS3Heraldo Gonçalves Lima Junior

Cytoscape and the WebKeiichiro Ono

Destaque (11)

Html5 aula 02

PhoneGap - criando aplicações Android e iOS com HTML5

E-book sobre HTML 5 (Devmedia)

Curso de HTML5 - Aula 01

HTML5 Básico: Formulários (aula 2)

Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?

Curriculo para Designer leonildo wagner - 08-2016

HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB

Desenvolvimento Web : HTML5, CSS3 & JavaScript

Web design responsivo e adaptativo - HTML5/CSS3

Cytoscape and the Web

Semelhante a The Appy Hour

HTML5 New Features and ResourcesRon Reiter

AD109 Navigating the Jungle of Modern Web DevelopmentShean McManus

Drupal 3D - Intro to Using Web 3D with DrupalBrian Hay

Cutting edge of web technologyTsutomu Ogasawara

Building a Better Web with HTML5 and CSS3Karambir Singh Nain

Castle Game Engine and the joy of making and using a custom game engineMichalis Kamburelis

What is Software Development by Thesys Tech Head of DevelopmentProduct School

Responsive Web Design with HTML5 and CSS3Kannika Kong

Bazillion New TechnologiesAyman Mahfouz

In the DOM, no one will hear you screamMario Heiderich

Programming for non tech entrepreneursRodrigo Gil

Developing for the mobile webjoeysim

Lesson learned from 3 years with hybrid appsPatrik Malmquist

Building Real-World Dojo Web ApplicationsAndrew Ferrier

Win j svsphonegap-damyan-petev-mihail-mateevMihail Mateev

OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorGail Frederick

Javascript Update May 2013Ramesh Nair

Apache Flex and the imperfect Webmasuland

Scand ltd-brochureAnastasia Yazubets

Mobile app development using Android SDKJosh Clemm

Semelhante a The Appy Hour (20)

HTML5 New Features and Resources

AD109 Navigating the Jungle of Modern Web Development

Drupal 3D - Intro to Using Web 3D with Drupal

Cutting edge of web technology

Building a Better Web with HTML5 and CSS3

Castle Game Engine and the joy of making and using a custom game engine

What is Software Development by Thesys Tech Head of Development

Responsive Web Design with HTML5 and CSS3

Bazillion New Technologies

In the DOM, no one will hear you scream

Programming for non tech entrepreneurs

Developing for the mobile web

Lesson learned from 3 years with hybrid apps

Building Real-World Dojo Web Applications

Win j svsphonegap-damyan-petev-mihail-mateev

OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator

Javascript Update May 2013

Apache Flex and the imperfect Web

Scand ltd-brochure

Mobile app development using Android SDK

Último

Understanding the FAA Part 107 License ..Christopher Logan Kennedy

Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea

Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz

ICT role in 21st century education and its challengesrafiqahmad00786416

[BuildWithAI] Introduction to Gemini.pdfSandro Moreira

Why Teams call analytics are critical to your entire businesspanagenda

MS Copilot expands with MS Graph connectorsNanddeep Nachan

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra

DBX First Quarter 2024 Investor PresentationDropbox

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

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays

Exploring Multimodal Embeddings with MilvusZilliz

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous

Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub

Platformless Horizons for Digital AdaptabilityWSO2

Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services

Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya

The Appy Hour

1. HTML5 + CSS3 + JS Rajnish Kumar & Ernesto Cohnen

2. Evolution of Web Technologies ● ● ● ● ● ● ● ● ● ● 1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tableless Web Design 2005 AJAX 2009 HTML 5 2011 CSS 3

3. The Browser is the new OS ● The browser is the convergence of web ● Connects services with applications ● Makes devices talk to applications ● Is cross-platform ● A browser is today your emails, your work, your music, your phone, your games, your movies, your TV...

4. HTML5 + CSS3 + JavaScript One stack to rule them all

6. HTML5 - Real Time Communications Web Sockets Web Workers Notifications

7. HTML5 - Semantics & Markups ● ● ● ● <header>, <nav>, <footer>... link relations: alternate, nofollow, icon… Microdata New Form types (input types). Great on mobile phones also. ● Define, store, and retrieve custom data on the DOM. (data-*)

8. HTML5 - File & Hardware Access ● File Upload / Drag and Drop support ● Offline storage ○ Web Storage (local and session types) ■ JSON/ JavaScript Objects ■ < 5MB limit ○ WebSQL & IndexedDB ■ Not supported in all browsers. IE, Windows Mobile… ■ One deprecated, the other not so mature. ● GeoLocation: must for mobile devices! ● Others: speech input, orientation...

9. CSS3

10. CSS3 - Animations + Transitions ● ● ● ● Rotate scale translate … Save the iphone!

11. CSS3 ● Selectors ○ :first-child, :not, >, +, nth-child (even)... ● Text: ellipsis, columns... ● Webfonts & iconic fonts

12. CSS3 - Effects ● ● ● ● ● ● Opacity (alpha) Rounded corners (border-radius) Gradients Shadows Border image ...

13. JavaScript You know JavaScript right ?

14. JavaScript - Evolution ● <body onload=”init();”> ● Unobtrusive Javascript ● nodejs - server.listen(1337, '127.0.0.1'); ● AMD and RequireJS ● MVC and Backbone.js ● Apps - Phonegap, Sencha

15. JavaScript - MVC source: Mattieu Gamache-Asselin

16. Backbone.js

17. Backbone.js

18.

19.

20.

21.

22. PaaS Platform-as-a-Service

23. source: Mattieu Gamache-Asselin

24. It’s all about the server

25.

26.