J2ME session of Presentations - 2011

HTML5 and iPhone

Ines KLABI

Agenda
HTML5
Presentation HTML5 Vs HTML4

iPhone
As the most expected product Software Architecture

HTML5 Features in latest iPhone

Outline
Introduction HTML5 iPhone iOS (Apple) DEMO

Constats & Introduction

The Web Plateforme is Accelerating

User Experience

Google VP of Engineering Vic Gundotra

JS CSS DOM HTML

. . .
Q109

Native Web

1990 .. 2008 Q408

Q209

Constats & Introduction

The Web Plateforme is Accelerating

SGML HTML . HTML4 HTML5

Evolution.. In a permanent Progress! HTML SGML

Standard Generalized Markup Languageest unlangage de descriptionbalises, de normeISO (ISO 8879:1986). Hypertext Markup Language unlangage de balisagequi permet dcrire de lhypertexte, do son nom.

HTML4
Le18-12-1997, le W3C publie la spcification HTML 4.0 qui standardise de nombreuses extensions supportant les styles et les scripts, les cadres et les

HTML5
Les travaux du WHATWG ont t formellement adopts enmai2007co mme point de dpart dune nouvelle spcificationHT ML 5

HTML2.0 En Fin 1995 HTML 3.0 HTML3.2 14-1-1997

Outline
Introduction HTML5 iPhone iOS (Apple) DEMO

HTML5 Features
New Doctype New Structural ELements New Media ELements New Parsing Rules New APIs

HTML5 et les nouvelles balises structurelles HT ML Evolution du Langage HTML 5

<aside>
v> <na
<nav> <aside> <article> <footer> <section> <header> L'lment<nav>est rserv <aside>reprsente un contenu li L'lment<article>reprsente une partie L'lment<footer>sert baliser la Lalment contient des informations balise<section>correspond zone Cet zone section d'un document la une principale du document. d'une une section gnrique de page de page du document, pied qui se suffit elle-mme, prsentant une des ce ou la page en cours. contenant section qui sed'autres Il correspond liens vers trouve maistelle aussi tre utilis pour la zone peut qu'un billet sur un blog, l'intrieur Cela ou des liens d'un document de pages peut correspondrebarres latrales vers beaucoup gnralement dans les d'autres sections de finou d'une application. unde n'importe quelle section. message sur un forum, Choses qui vontmme page. en-ttes des habituels de Contenantlales billets similaires, un commentaire partie la balise<div> Vous utiliserez Elle correspond en laiss par un visiteur, Rien(contenant placertags, etc.groupes n'oblige logo, slogan, etc.), les nuages de tous les trs probablement plusieurs lments ou n'importe quel en distinguant matires. latable des plusieurs deIlliens dans un lment<nav>, peut galement tre utilis objet de contenu indpendant. <footer>dans une mme page. parties du document. maispour lescitations en exergue.. au moins la navigation principale.

<a r ti c le >

iPhone

<secti on>

<f o

ot e

r>

<h

der> ea

HTML5 Vs HTML4
HTML4
Click to edit Master text styles Second level Third level Fourth level Fifth level

HTML5
Click to edit Master text styles Second level Third level Fourth level Fifth level

HTML 5 & APIs

une API de dessin 2D utilise avec la nouvelle balisecanvas;

HT ML 5

une API pour jouer des vidos et des sons/musiques utilise avec les nouvelles balisesvideoetaudio; une API utilise pour les applications hors-lignes; une API d'dition en combinaison avec le nouvel attributcontenteditable; une API dedrag and dropen combinaison avec l'attributdraggable; une API qui permet l'accs l'historique et permet aux pages d'en ajouter pour prvenir les problmes de bouton retour-en-arrire.

iPhone

10

HTML 5

Quels sont les avantages ?

Amliorations desAPI lestockage des fichiers de l'application la gestion du mode hors-ligne Stockage de donnes hors ligne

HT ML 5

iPhone

Quelques autresAPIHTML5 Glisser-Dposer Video&Audio Golocalisation

11

Outline
Introduction HTML5 iPhone iOS (Apple) DEMO

iPhone

Prsentation

HT ML 5

iPhone

13/15

iPhone
iOS

HT ML 5

Le BaseBand

Boot Loader

iPhone

FirmWare

SecPack

14/15

Demonstration
MobiOne Jqtouch

DEMO

Prsentation des Logiciels

MobiOne

HT ML 5

un mulateurqui permet aux dveloppeurs de voir le comportement de leur application avant mme de la passer sur uniphone. Vous pourrez donc voir vos programmes en HTML, CSS et Javascript. En effet, celui-ci permet d'importer des programmes depuis son ordinateur.

iPhone

Jqtouch un framework javascript et/ou plutt un plugin jQuery qui permet de dvelopper facilement et rapidement des sites ou applications web optimiss pour iPhone, Android, and Palm Pre.

16/15

jQuery
jQuery contains the following features: DOM element selections using the cross-browser open source selector engineSizzle, a spin-off out of the jQuery project DOM traversal and modification (including support for CSS 1-3) Events CSSmanipulation Effects and animations Ajax Extensibilitythrough plug-ins Utilities - such as browser version and theeachfunction. Cross-browser support

Including the library

The jQuery library is a single JavaScript file, containing all of its common DOM, event, effects, and Ajax functions. It can be included within a web page by linking to a local copy, or to one of the many copies available from public servers

<script type="text/javascript" src="jQuery.js"></script> Example

Play

Ressources

http://radar.oreilly.com/2009/05/google-bets-big-on-html-5.html http://www.pompage.net/pompe/html5-et-le-futur-du-web http://s-jdm.developpez.com/tutoriels/html/traductions/presentation-html http://fr.wikipedia.org/wiki/Hypertext_Markup_Language http://fr.wikipedia.org/wiki/IPhone http://fr.wikipedia.org/wiki/IOS_(Apple)

http://ajaxian.com/archives/html5-features-in-latest-iphone-application-ca http://www.hobo-web.co.uk/seo-blog/html5-html4-different/

MERCI pour votre attention

2011 Esprit. All rights reserved. Powered By Microsoft