XHTML/CSS et JavaScript pour le web mobile
245 pages
Français

Vous pourrez modifier la taille du texte de cet ouvrage

Obtenez un accès à la bibliothèque pour le consulter en ligne
En savoir plus

XHTML/CSS et JavaScript pour le web mobile

-

Obtenez un accès à la bibliothèque pour le consulter en ligne
En savoir plus
245 pages
Français

Vous pourrez modifier la taille du texte de cet ouvrage

Description

Développeurs XHTML/CSS et JavaScript, partez à la conquête du web mobile ! Créez des applications riches en Ajax pour iPhone, Android, et autres plates-formes supportant WebKit, et découvrez les bibliothèques JavaScript dédiées iUI et XUI !


Un ouvrage de référence XHTML/CSS et JavaScript pour le web mobile



Après des rappels pertinents sur HTML, CSS et JavaScript dans une utilisation adaptée au web mobile, toute la richesse de la bibliothèque iUI est explorée. Les grands piliers qui font la spécificité du développement web mobile sont détaillés : bases de données côté client, Google Maps et GPS, multi-touch, traitements graphiques... Enfin, on découvrira la très efficace bibliothèque JavaScript XUI, similaire à jQuery par sa puissance, mais étonnante de compacité.



Le développeur web familier de XHTML/CSS et JavaScript pourra ainsi transposer ses connaissances pour créer sans attendre des applications web adaptées aux contraintes de la consultation mobile sur iPhone ou Android.



À qui s'adresse cet ouvrage ?




  • À tous les développeurs web qui souhaitent rendre leurs sites lisibles depuis l'iPhone ou Android, ou toute autre plate-forme mobile dotée du moteur WebKit ;


  • Aux développeurs familiers des techniques Ajax (XHTML/CSS/JavaScript) souhaitant transposer rapidement leurs connaissances pour créer des applications web mobiles ;


  • Aux professionnels et agences web présents sur le marché du web mobile.




  • Rappels XHTML, CSS et JavaScript


    • HTML


    • CSS


    • JavaScript




  • iUI : une bibliothèque CSS et JavaScript pour mobiles


    • iUI : installation et première application


    • iUI côté CSS


    • iUI côté JavaScript




  • Bases de données, multi-touch, graphisme, GPS et Google Maps


    • Bases de données côté client


    • Multi-touch


    • Graphisme


    • Cartes Google Maps et GPS




  • XUI : une bibliothèque jQuery pour mobiles


    • La bibliothèque XUI


    • Conclusion : vers des applications natives



Sujets

Informations

Publié par
Date de parution 07 juillet 2011
Nombre de lectures 323
EAN13 9782212417708
Langue Français

Informations légales : prix de location à la page 0,0172€. Cette information est donnée uniquement à titre indicatif conformément à la législation en vigueur.

Exrait

Développement XHTML/CSS & JavaScript pour le web mobile

Des sites efficaces pour iPhone et Android avec iUI et XUI

Éric Sarrion
Groupe Eyrolles
61, bd Saint-Germain
75240 Paris cedex 05
www.editions-eyrolles.com






En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans autorisation de l’éditeur ou du Centre Français d’Exploitation du Droit de Copie, 20, rue des Grands-Augustins, 75006 Paris.



ISBN 978-2-212-12775-1
© Groupe Eyrolles


Le format ePub a été préparé par Isako www.isako.com à partir de l'édition papier du même ouvrage
Table
Couverture
Titre
Licence
Table
Avant-propos
À qui s’adresse ce livre ?
Structure de l’ouvrage
Compatibilité des programmes entre iPhone et Android
PREMIÈRE PARTIE Rappels XHTML, CSS et JavaScript
1 - HTML
Notions générales
Balises
Attributs
Forme générale d’une page HTML
Visualisation d’une page HTML
Le texte
Les images
Les liens
Les listes
Les blocs
2 - CSS
Insertion des styles CSS dans une page HTML
Principaux styles CSS
L’arrière-plan
Le texte
La police de caractères
Les bordures
Les espacements
Le positionnement des éléments
La taille des éléments
Le mode d’affichage
Les listes
Sélecteurs CSS
Sélecteurs simples
Sélecteurs d’attributs
Sélecteurs de classe
Sélecteurs d’id
Pseudo-classes
:link et :visited
:focus
:nth-child(an+b)
:nth-last-child(an+b)
:only-child
:not
Combinateurs
Combinateur de descendance
Combinateur filial
Combinateur d’adjacence directe
Combinateur d’adjacence indirecte
3 - JavaScript
Insertion de code JavaScript dans une page HTML
Inclusion directe
Inclusion par fichier externe
Syntaxe de base
Commentaires
Variables
Variables globales
Variables locales
Tests
Boucles
Boucle for
Boucle while
Boucle do while
Fonctions
Définir une fonction
Appeler une fonction
Création d’objets
Tableaux de données
Accès au DOM
Accès à un élément par son id
Accès à un élément par un sélecteur
Création d’un élément dans l’arborescence
Suppression d’un élément dans l’arborescence
Listeners pour gérer des événements
Transformations CSS
Propriété -webkit-transform
Propriété -webkit-transition
Propriété -webkit-animation
DEUXIÈME PARTIE iUI : une bibliothèque CSS et JavaScript pour mobiles
4 - iUI : installation et première application
Installation
Application iPhone/Android de base
Exemple sous PHP
Exemple sous Ruby on Rails
Paramétrages spécifiques à l’iPhone
Rendre l’application accessible depuis le bureau de l’iPhone
Supprimer l’affichage de la barre d’adresse du navigateur
Définir une image affichée au démarrage
5 - iUI côté CSS
Créer la barre d’outils de l’application
Créer les fenêtres de notre application
Passer d’une fenêtre à l’autre
Afficher des listes
Grouper les informations
Afficher des boutons
Fenêtres superposées
Formulaires
Extensions iUI
Installation des extensions
Utilisation des listes de sélection
Utilisation des listes de sélection triées par ordre alphabétique
Gestion de calendriers
Remplacer les cases à cocher par des interrupteurs
Changer de thème CSS avec theme-switcher
6 - iUI côté JavaScript
Fonctionnement de base des liens
Exemples d’utilisation des attributs des liens
Aller vers une autre fenêtre décrite dans la page HTML
Afficher une nouvelle fenêtre non encore présente dans la page HTML
Aller vers une autre page HTML
Soumettre un formulaire et afficher une nouvelle fenêtre (sans utiliser les extensions iUI)
Soumettre un formulaire et afficher une nouvelle fenêtre (en utilisant les extensions iUI)
Afficher la suite des éléments d’une liste
Méthodes JavaScript utilisables
showPageById (pageId)
goBack ()
showPageByHref (href, args, method, replace, cb)
ajax (url, args, method, cb)
insertPages (frag)
getSelectedPage ()
hasClass (self, name)
addClass (self, name)
removeClass (self, name)
Exemples d’utilisation des méthodes JavaScript
Créer un bouton permettant d’aller, selon les cas, sur des fenêtres différentes (1re méthode)
Créer un bouton permettant d’aller, selon les cas, sur des fenêtres différentes (2e méthode)
Effectuer un appel Ajax (1re méthode)
Effectuer un appel Ajax (2e méthode)
Créer une nouvelle fenêtre dynamiquement
Événements associés aux fenêtres
Séquence de déclenchement des événements
Exemple d’utilisation des événements
TROISIÈME PARTIE Bases de données, multi-touch, graphisme, GPS et Google Maps
7 - Bases de données côté client
Stockage permanent et stockage dans la session
Utilisation d’une base de données
Création de la base de données
Utilisation de la base de données
Exemple d’utilisation
8 - Multi-touch
Événements touch
Propriétés des événements touch
Exemple d’utilisation : déplacement d’un objet à l’écran
Événements gesture
Propriétés des événements gesture
Premier exemple d’agrandissement
Second exemple d’agrandissement, à partir du centre
Exemple de rotation
9 - Graphisme
Principe de base
Formes géométriques
Tracer une ligne puis des formes
Tracer une forme puis la remplir
Chemins : délimiter la portée des instructions
Rectangles : les méthodes dédiées
Arcs de cercle
Courbes quadratiques et courbes de Bézier
Gestion des couleurs
Couleurs des lignes, du fond et opacité
Dégradés de couleurs
Formes des lignes : épaisseur, terminaison, jonction
Épaisseur des lignes
Embouts des lignes
Jointures entre les lignes
Traitement des images
Insertion d’images
Images redimensionnées
Images découpées
Translations, rotations, agrandissements
Superpositions
Clipping : délimiter une zone inscriptible du canevas
Gestion des états du canevas
10 - Cartes Google Maps et GPS
Insertion de code Google Maps
Utilisation de Google Maps
Utilisation du GPS
QUATRIÈME PARTIE XUI : une bibliothèque jQuery pour mobiles
11 - La bibliothèque XUI
Installation de XUI
Aperçu de XUI
Méthode et objet x$()
Méthode x$()
Objet x$ ()
Propriété elements
Parcours des éléments de la collection
Parcours classique
Parcours par each ()
Enchaînement des méthodes
Accès au DOM
Méthode inner ()
Méthode outer ()
Méthode top ()
Méthode bottom ()
Méthode remove ()
Méthode clean ()
Exemples d’utilisation
Remplacement du contenu des éléments
Insérer dans les éléments
Gestion des styles
Méthode setStyle ()
Méthode css ()
Méthode getStyle ()
Méthode addClass ()
Méthode removeClass ()
Exemples d’utilisation
Modifier les styles
Ajouter une classe CSS
Gestion des événements
Exemple d’utilisation
Effets visuels
Options principales des effets visuels
Option by
Options before () et after ()
Option easing
Quelle forme utiliser pour la méthode tween () ?
Exemples d’utilisation
Apparition et disparition progressive : appear et fade
Optimisation des effets appear et fade
Troisième forme d’écriture pour appear et fade
Enchaînements d’effets : fadeAndAppear
Spécifier une séquence de fadeAndAppear
Ajax
Conclusion : vers des applications natives...
Index
A
B
C
D
E
F
G
H
I
J
L
M
O
P
Q
R
S
T
V
W
X
Z
Avant-propos


À qui s’adresse ce livre ?
Ce livre est destiné aux développeurs qui doivent réaliser un site web pour plateforme mobile, en particulier pour iPhone ou Android. En réalité, tous les mobilesdisposant du moteur WebKit sont susceptibles de fonctionner avec les programmesde cet ouvrage (y compris les Blackberry).


Structure de l’ouvrage
Ce livre se divise en quatre parties.

La première partie sert à rappeler les connaissances HTML, CSS et JavaScriptnécessaires pour le développement de ce type d’applications. Seules les parties utiles seront expliquées ici, et ces notions seront présentes tout au long de l’ouvrage.
La deuxième partie concerne l’étude complète de la bibliothèque iUI, spécialement écrite pour le développement d’applications pour téléphones mobiles.
La troisième partie sera consacrée aux autres éléments nécessaires pour effectuerdes développements web pour mobiles : les bases de données côté client, GoogleMaps et le GPS, le multi-touch ainsi que le graphisme.
La dernière partie concerne l’étude de la bibliothèque XUI, développée spécialement pour l’utilisation sur mobiles par Nitobi. Très compacte (moins de 7 Ko),elle est similaire à jQuery par sa puissance.
Compatibilité des programmes entre iPhone et Android
Tous les programmes de ce livre ont été testés sur les mobiles iPhone et Android. Lecode écrit est compatible avec ces deux environnements, mais il nous semble utiled’apporter certaines précisions.
Tous les programmes de ce livre fonctionnent avec au minimum la version 3 del’iPhone. Avec Android, si vous utilisez la version 2, tout fonctionne également ;dans une version antérieure (la version 1.6), des fonctionnalités sont indisponibles :

l’accès aux bases de données en local ne fonctionne pas, ainsi que l’accès à la variable sessionStorage ;
le multi-touch ne prend pas en compte les appuis simultanés avec deux doigts surl’écran. Ainsi, les événements dits gesture ne fonctionnent pas ;
la prise en compte du GPS ne fonctionne pas même si celui-ci est actif sur lemobile, du fait de la version du navigateur utilisée dans cette version d’Android.
PREMIÈRE PARTIE
Rappels XHTML,
CSS et JavaScript

R EMARQUE - Pourquoi rappeler ce que l’on connaît déjà ?
Les rappels qui suivent sont ceux qui vous permettront d’effectuer les développements sur les mobilesiPhone et Android. Le but ici n’est pas de décrire complètement ces langages, mais uniquement de s’axersur la partie utile pour notre développement.
Même si vous êtes expert en ces domaines, prenez quand même le temps de parcourir ces lignes afin deconnaître les parties qui seront utilisées ici.
1
HTML


Le langage HTML est le langage de base permettant de construire des pages web,que celles-ci soient destinées à être affichées sur un iPhone/Android ou non. Dansnotre cas, HTML sera associé à CSS et JavaScript pour construire des applicationspour mobiles, qui seront accessibles sur le Web via une URL (applications web).

HTML OU XHTML ? - Ici, c’est pareil !
Nous emploierons ici les termes HTML ou XHTML de façon identique. En effet, même si notre page HTMLn’est pas formatée strictement comme l’exige XHTML, le navigateur web sait l’interpréter de façon correcte et restituer l’affichage adéquat.
Notions générales
Une page HTML correspond à un fichier texte pouvant être écrit sous n’importequel éditeur de texte, le plus simple d’utilisation étant dans ce cas le meilleur. Lefichier texte contiendra principalement deux types de données :

les balises HTML, pour indiquer ce que l’on désire afficher (un paragraphe, uneliste, une table, une image, etc.) ;
les attributs associés aux balises, pour préciser les paramètres de la balise (la taillede l’image, la couleur du texte, etc.).
Balises
Une balise HTML est entourée des caractères < et > , par exemple <p> pour indiquerun paragraphe. Une balise s’applique aux éléments qui la suivent. Pour indiquer lafin, on utilise la même balise, mais son nom est précédé de / . Ainsi, pour la fin duparagraphe, on écrira </p> .


Un paragraphe en HTML

<p>Voici un paragraphe écrit en HTML.</p>

Certaines balises ne possèdent pas de contenu. Par exemple, la balise <br> qui sert àeffectuer un retour à la ligne n’en a pas. Elle s’écrira sous la forme suivante.


Une balise sans contenu

<br />


Attributs
Une balise utilisée sans attribut entraînera un fonctionnement standard. Par exemple,la police de caractères, une couleur, etc., du paragraphe précédent (associés à la balise <p> employée ici) seront standards. Pour avoir un paragraphe de couleur rouge (aulieu du noir standard), nous devons l’indiquer dans les attributs de la balise <p> .


Un paragraphe de couleur rouge

<p style="color:red">Un paragraphe de couleur rouge.</p>

Chaque balise a ses propres attributs, mais la plupart possèdent les deux attributs style et class employés pour définir des styles CSS (voir le chapitre suivant).
Nous avons ici utilisé l’attribut style , dont la valeur est color:red . La forme générale d’écriture d’un attribut est nom="valeur" . Des espaces peuvent figurer de part etd’autre du signe = . La valeur de l’attribut est généralement entourée de ' ou " (simpleguillemet ou double guillemet). Ils peuvent être omis si la valeur de l’attribut ne comporte pas d’espace. Dans ce cas, le prochain espace ou le < indiquant la fin de la balisepermettent au navigateur de connaître la valeur de l’attribut.
Dans le cas précédent, on aurait donc pu aussi écrire :


Pas de guillemets pour les valeurs d’attributs

<p style=color:red>Un paragraphe de couleur rouge.</p>

Alors que ce qui suit aurait été mal interprété.


Un espace dans la valeur d’un attribut (sans guillemets)

<p style=color: red>Un paragraphe de couleur rouge.</p>

Dans ce cas, l’attribut style aurait la valeur color: , tandis que le mot red seraitinterprété comme le nom d’un nouvel attribut (qui n’existe évidemment pas !). Leparagraphe restera donc en couleur standard, c’est-à-dire noir.
Pour inclure un espace dans la valeur d’un attribut, il suffit de l’entourer de guillemets.


Un espace dans la valeur d’un attribut (avec guillemets)

<p style="color: red">Un paragraphe de couleur rouge.</p>

Dans le cas où plusieurs attributs sont utilisés dans une balise, chaque couple nom="valeur" est séparé du suivant par au moins un espace, voire un retour à la ligne.L’ordre dans lequel les attributs sont écrits n’a pas d’importance pour le résultat quisera affiché.

Forme générale d’une page HTML
Une page HTML doit suivre quelques règles précises pour être correctement interprétée par le navigateur de l’utilisateur (dans notre cas, le navigateur Safari del’iPhone ou le navigateur Chrome d’un mobile Android).


Format standard d’une page HTML (fichier index.html)

<html><head></head><body>Voici une application pour iPhone !</body></html>
La page HTML indiquée ici correspond à un fichier texte dont le nom est, parexemple, index.html . L’extension du fichier sert à connaître le type de son contenu,ici du HTML !
Cette page HTML commence par la balise <html> et se termine naturellement parcette même balise ( </html> ). Deux nouvelles balises sont introduites ici.

La balise <head> correspond à la partie déclarative de la page : quels styles serontutilisés ? Quels fichiers de styles sont à inclure ? Quelle sera la taille maximum del’écran ? Quel titre aura la page ?, etc.
La balise <body> correspond à ce qui sera affiché à l’utilisateur : le texte, les images, les listes, etc.
Visualisation d’une page HTML
La page HTML écrite précédemment peut être visualisée dans n’importe quel navigateur actuel : Internet Explorer, Firefox, Google Chrome ou encore Safari.
Si vous souhaitez visualiser cette page depuis votre ordinateur personnel (PC, Mac,etc.), il suffit de faire glisser le fichier dans votre navigateur. Pour l’afficher sur votreiPhone/Android, il faut tout d’abord installer un serveur web sur votre ordinateurpersonnel, par exemple un serveur PHP (ou tout autre serveur). Dans cet ouvragenous avons utilisé deux types de serveurs :

AppServ sous Windows pour afficher des pages écrites en PHP (et bien sûr aussiHTML) ;
MAMP sous Mac pour afficher des pages écrites en PHP (et bien sûr aussiHTML) ;
Ruby on Rails (Windows ou Mac) pour afficher des pages écrites en Ruby (etégalement en HTML).
Des serveurs Java, Microsoft .Net, etc., fonctionneraient de manière similaire.
Visualisons notre page HTML en ouvrant, par exemple, Safari sur un iPhone et entapant l’adresse de notre serveur local dans la barre d’adresse (voir figure 1-1).
Le texte inclus dans la balise <body> s’affiche, mais dans une taille très petite et pasdu tout adaptée à l’iPhone ! Car, en effet, notre page HTML, sauf indication contraire, est écrite pour être affichée dans un navigateur d’un ordinateur de bureau, etnon pour le navigateur d’un téléphone portable !
Il suffit d’ajouter la ligne suivante dans la partie <head> du code HTML pour afficher correctement la page HTML.

Avoir la taille de la page adaptée à la taille de l’écran

<meta name="viewport" content="user-scalable=no, width=device-width" />

Une fois cette balise <meta> insérée dans la partie <head> , voici l’affichage obtenu(voir figure 1-2).

Figure 1–1 - Une page HTML affichée sur l ’ iPhone

Figure 1–2 - Adaptation de l ’ affichage à la taille de l ’ écran
Par la suite, nous conserverons cette balise <meta> dans la partie <head> de chacunedes pages HTML que nous écrirons.

A STUCE - Et pour Android, utile ou pas ?
Android n’a peut-être pas besoin de cette balise <meta> . Toutefois, nous l’inclurons dans tous nos sources pour la compatibilité avec iPhone et Android.
Le texte
Nous avons précédemment utilisé une balise <p> pour afficher un paragraphe detexte. D’autres balises existent permettant d’afficher du texte sous différentes formes.

<p> affiche un paragraphe. Deux paragraphes qui se suivent seront donc espacésverticalement à l’écran.
<b> met le texte en gras ( bold ).
<i> met le texte en italique.
<br /> insère un retour à la ligne. Cette balise ne possède pas de contenu, d’où saforme d’écriture.
<hr /> insère une ligne de séparation horizontale. Cette balise ne possède également pas de contenu.
<h1> affiche un titre de paragraphe. Pour différencier les niveaux de titres, on utilise les autres balises <h2> , <h3> , <h4> , <h5> et <h6> . Plus l’indice qui suit h augmente, plus le titre est petit. L’indice qui suit h symbolise donc l’imbrication ou leniveau du titre.
En plus des balises décrites ci-dessus, il existe des codes spéciaux permettant d’écrirecertains caractères. Ces codes s’appellent des « entités HTML ». En voici quelques-unes parmi les plus utilisées.

  insère un espace dit « insécable » entre deux mots. En effet, le navigateurne tient pas compte du formatage du texte que nous tapons dans notre fichierHTML. Les retours à la ligne effectués par l’appui sur la touche Return ne sontpas pris en compte (lors de l’affichage), pas plus que les espaces insérés entre lesmots (au-delà du premier espace).
< : le caractère < est un caractère réservé en HTML, signifiant le début ou lafin d’une balise. Pour afficher le signe < à l’écran, on utilise donc l’entité < .
> : même chose que pour < , mais pour afficher le caractère > (qui sinonserait interprété comme la fin de la balise).
Voici un exemple contenant quelques balises HTML.


Quelques balises HTML

<html><head> <meta name="viewport" content="user-scalable=no, width=device-width" /></head> <body><h1>Mode d ’ emploi des balises</h1><p> Commençons par le plus <b>important</b> : </p><h2>En gras</h2><b>Ceci est en gras</b><h2>En italique</h2><i>Ceci est en italique</i><h2>En gras et en italique</h2><b><i>Ceci est en gras et en italique</i></b></body></html>

Voici ce qu’on obtient.

Figure 1–3 - Utilisation de balises dans lapage
Les images
Les images s’affichent par l’intermédiaire de la balise <img> qui ne possède pas decontenu. On l’utilise donc sous la forme <img /> .
Pour afficher l’image, des attributs sont nécessaires.

src permet d’indiquer l’adresse Internet où se trouve l’image. Cet attribut estobligatoire (sinon on ne peut pas afficher l’image !).

Si l’image se situe sur le serveur (ce qui est souvent le cas), l’adresse peut êtrerelative à la page HTML qui affiche l’image. Dans ce cas, il ne faut pas indiquer le chemin complet d’accès à l’image (commençant par http:// ), mais le chemin relatif (par exemple, images/img1.png si l’image se trouve dans un répertoire images situé au même niveau que la page HTML).
Si l’image n’est pas sur le serveur, le chemin complet commençant par http:// sera nécessaire.

width : cet attribut sert à préciser une largeur à l’image. Si l’image est plus petiteque la valeur indiquée, l’image est agrandie, sinon elle est rétrécie.
height : même chose que pour width , mais pour la hauteur de l’image.
Par exemple, voici le code pour afficher l’image img1.png sur une hauteur de200 pixels :


Une image de 200 pixels de hauteur

<img src=img1.png height=200 />

On remarque que l’image est redimensionnée en proportion de la hauteur indiquée,sauf si l’attribut width est également précisé.

A STUCE - Pour ne pas agrandir trop ? max-height et max-width !
Les attributs width et height peuvent être remplacés par les propriétés CSS max-width et max-height qui permettent de ne pas agrandir l’image si la taille est plus petite que celle indiquée (voirchapitre suivant).
Les liens
Un lien correspond à l’utilisation de la balise <a> . Le lien permet de naviguer versune autre page HTML, voire la même. Pour cela, on utilise l’attribut href dans labalise <a> .

Si href commence par # , cela signifie que l’on désire atteindre une partie de lamême page HTML. Le nom qui suit href (par exemple, href=#partie1 ) correspond à un endroit du code dans la page HTML identifié par ce nom. Ce méca
nisme sera utilisé par la bibliothèque iUI que nous étudierons dans la partie suivante (voir page 55).
Sinon ( href est indiqué mais ne commence pas par # ), cela référence une autrepage HTML. Lorsque le lien est cliqué, la page est affichée.
Des valeurs particulières de href sont possibles, permettant des actions spéciales.

mailto:une_adresse_email permet de passer en mode d’écriture d’un nouvel e-mail qui sera adressé à l’adresse e-mail indiquée.
tel:un_numero_de_telephone propose de téléphoner au contact indiqué par letéléphone.
sms:un_numero_de_telephone : même chose que pour tel , mais pour envoyer unSMS.

C OMPATIBILITÉ - Et avec les sites web classiques ?
Les valeurs tel et sms dans l’attribut href ne sont disponibles que sur iPhone/Android, alors que mailto peut aussi s’utiliser dans des pages web classiques.
Voici un code HTML permettant d’envoyer un e-mail, de téléphoner et d’envoyerun SMS.


Envoyer un e-mail, un SMS ou téléphoner

<html><head> <meta name="viewport" content="user-scalable=no, width=device-width" /></head><body><a href=mailto:ericsarrion@gmail.com > Envoyer un mail </a><br /><br /><a href=tel:0612345678 >Téléphoner </a><br /><br /><a href=sms:0612345678 >Envoyer un sms </a></body></html>

Lors de l’exécution de cette page HTML, on remarque qu’un clic sur le lien sms ouvre une nouvelle fenêtre, mais ne retourne pas à notre application après l’envoi duSMS, contrairement aux liens mailto et tel .
Les listes
Les listes sont un élément essentiel pour afficher des informations sur iPhone/Android. En effet, de par leur petit affichage, il est nécessaire de présenter la plupartdes informations sous forme de liste. Un élément de liste prendra en général la largeurde l’affichage, tandis que les éléments de liste seront placés les uns sous les autres.
HTML permet d’afficher les listes au moyen des balises <ul> et <li> . Il existe également la balise <ol> , mais celle-ci ne sera pas utilisée dans cet ouvrage.

<ul> permet d’indiquer le début d’une liste. Elle se terminera donc par </ul> . <ul> , qui signifie unordered list (ce qui se traduit par « liste non ordonnée ») àl’inverse de <ol> , qui signifie ordered list (liste ordonnée).
<li> permet d’indiquer un élément dans la liste, qui correspondra à une ligne del’affichage. Cette ligne pourra contenir d’autres éléments HTML (une image, untexte, un lien, etc.).
Voici une liste composée de 5 éléments.


Liste d’éléments

<html><head> <meta name="viewport" content="user-scalable=no, width=device-width" /></head><body><ul> <li> Element de liste 1 </li> <li> Element de liste 2 </li> <li> Element de liste 3 </li> <li> Element de liste 4 </li> <li> Element de liste 5 </li></ul></body></html>

Elle s’affiche comme ceci dans l’iPhone (voir figure 1-4).
L’affichage est dans le style d’une page HTML tel qu’on le rencontre sur la plupartdes sites Internet, mais n’est pas tellement dans le style iPhone ou Android ! Nousverrons que l’utilisation des styles CSS permet d’obtenir un meilleur affichage.

Figure 1–4 - Affichage d ’ éléments de liste
Les blocs
Comme les listes, les blocs sont une composante essentielle de l’affichage suriPhone/Android. Ils correspondent aux éléments <div> et <span> de HTML.

<div> sert à afficher un bloc qui ne pourra être mitoyen que de l’élément situé au-dessus et/ou au-dessous, mais n’aura pas de mitoyenneté sur les côtés droit ougauche.
<span> : à l’inverse du <div> , il pourra avoir une mitoyenneté sur les côtés droitet/ou gauche, en plus du haut et du bas de l’élément.
On voit donc que les éléments <div> ne pourront s’afficher que les uns sous lesautres, tandis que les éléments <span> pourront s’afficher les uns à côté des autres.
De plus, un élément <div> peut contenir d’autres éléments <div> ou <span> (quis’afficheront selon les mêmes règles), tandis qu’un élément <span> ne pourra pascontenir d’éléments <div> (un <div> est sensé être un bloc occupant toute la ligne,donc il est difficile d’en mettre deux ou plus par ligne...).
Voici un exemple de code HTML contenant ces deux éléments.

Éléments <div> et <span>

<html><head> <meta name="viewport" content="user-scalable=no, width=device-width" /></head><body><div>Un premier div </div><div>Un second div </div><div> <span> Du texte </span> <span> contigu à celui-ci </span></div></body></html>

Il s’affiche de la façon suivante.

Figure 1–5 - Utilisation de <div> et <span>
Les éléments <div> se mettent bien les uns sous les autres, tandis que les éléments <span> se placent les uns à côté des autres. Pour que deux éléments <span> soientl’un sous l’autre, il faut soit les mettre dans deux éléments <div> différents, soit casserla séquence en insérant, par exemple, un élément <br /> entre les deux.
2
CSS


Le langage HTML, que l’on a vu précédemment, permet d’afficher ce que l’onappelle le fond, c’est-à-dire le contenu (du texte, des images, des listes, etc.) qui seraaffiché aux utilisateurs.
CSS se préoccupe de la mise en forme de ce contenu : quelles couleurs, quellespolices de caractères, quelles positions à l’écran, etc. ? Cette façon de procéderpermet de séparer le fond et la forme, ce qui est très utile pour tout projet informatique... L’association de la forme au fond correspond à l’application de styles à unepage HTML.


Insertion des styles CSS dans une page HTML
Les styles CSS sont inclus soit directement dans la page HTML en utilisant la balise <style> , soit par l’intermédiaire d’un fichier CSS (qui sera d’extension .css ) en utilisant la balise <link> . Ces deux balises doivent se situer dans la partie <head> de la page.Les deux possibilités peuvent s’utiliser simultanément dans la même page.

Inclusion des styles par la balise <style>

<html><head> <meta name="viewport" content="user-scalable=no, width=device-width" /> <style type=text/css> p { font-family : Helvetica; } </style></head><body> <p> Un paragraphe écrit en police Helvetica. </p></body></html>

La balise <style> doit comporter l’attribut type=text/css , sinon elle ne fonctionnera pas. Le contenu de cette balise comporte la description des styles des divers éléments (voir la section suivante).


Inclusion des styles par la balise <link>

<html><head> <meta name="viewport" content="user-scalable=no, width=device-width" /> <link rel=stylesheet href=iphone.css /></head><body> <p> Un paragraphe écrit en police Helvetica. </p></body></html>

La balise <link> possède les attributs rel=stylesheet et href=nom_fichier.css , tousdeux obligatoires. Le fichier nom_fichier.css doit se trouver sur le serveur, dans lerépertoire adéquat (relatif à l’emplacement du fichier HTML sur un serveur PHP).
Cette deuxième solution permet d’utiliser un fichier CSS qui sera commun à toutesnos pages, alors que la première associe les styles à une page et ne permet pas de lespartager entre plusieurs pages.

A LTERNATIVE - Utiliser l’attribut style
Il existe également une troisième solution, mais qui est à éviter. Elle consiste à inclure le style directement dans l’élément HTML qui l’utilise, au moyen de l’attribut style de celui-ci. Cette façon de procéder est surtout employée par l’intermédiaire du langage JavaScript.
Principaux styles CSS
Nous avons utilisé précédemment la propriété CSS font-family , à laquelle nousavons donné la valeur Helvetica .


Définition d’un style

p {font-family : Helvetica;}

On voit donc la façon générale de définir un style, en indiquant le nom de l’élément(ici p , pour les balises de paragraphes), suivi entre accolades de propriété : valeur, terminé par un ; . Les espaces autour des : sont facultatifs.
Plusieurs couples propriété : valeur; peuvent se trouver dans la définition dustyle, par exemple :


Plusieurs propriétés pour un style

p {font-family : Helvetica;color : red;}

Dans les sections suivantes, nous étudierons les propriétés CSS les plus utilisées, enfonction de leur contexte.

L’arrière-plan
On peut définir l’arrière-plan avec une image ou une couleur.


Arrière-plan avec une image

background-image : url(iphone.jpg);

Arrière-plan avec une image répétée sur la largeur de l’élément
background-image : url(iphone.jpg) repeat-x;


Arrière-plan avec une couleur

background-color : black;

Un nom de couleur peut être utilisé ( black , red , green , etc.), mais aussi une couleurdéfinie par ses composantes RGB en hexadécimal, par exemple #0723AE .

Le texte


Couleur du texte

color : black;


Espacement entre les lettres

letter-spacing : 5px;


Espacement entre les mots

word-spacing : 5px;


Alignement du texte

text-align : right; /* right | left | center | justify */


Soulignement du texte

text-decoration : none; /* none | underline | overline | line-through */


Forme des lettres

text-transform : uppercase; /* none | uppercase | lowercase | capitalize */
La police de caractères


Nom de la police de caractères

font-family : arial;


Taille de la police

font-size : 12px;


Type de caractères

font-style : italic; /* normal | italic */


Épaisseur du trait

font-weight : bold; /* normal | bold | bolder | lighter */


Les bordures


Style de la bordure

border-style : solid; /* none | solid | dotted | dashed | double */


Épaisseur de la bordure

border-width : 5px;


Couleur de la bordure

border-color : red;

Pour définir une propriété de bordure associée à un seul côté (au lieu des quatre enmême temps), on utilise border-top , border-bottom , border-left et border-right ,suivi de  -style ,  -width ou  -color .
On peut aussi spécifier les quatre côtés en une seule ligne (par exemple, pour l’épaisseur de la bordure).

Épaisseur de la bordure (quatre côtés différents)

border-width : 5px 10px 20px 30px; /* ordonné selon top right bottom left */

Quelques propriétés supplémentaires ont été ajoutées au standard CSS, disponiblesdans le navigateur Safari dont dispose l’iPhone ou le navigateur Chrome d’Android.


Arrondir les bordures (quatre côtés)

-webkit-border-radius : 8px; /* 0px : bordure rectangulaire */

Pour arrondir un seul côté, il suffit de l’indiquer par border-top-left , border-top-right , border-bottom-left ou border-bottom-right .


Arrondir la bordure en haut à gauche

-webkit-border-top-left-radius : 8px;

On peut aussi spécifier une image de fond pour la bordure.


Image de fond pour la bordure

-webkit-border-image: url(border.png) 5 10 20 30; /* ordonné selon top right bottom left */

Ainsi, il s’agit de prendre, à partir de l’image border.png , 5 pixels (depuis le haut del’image) en hauteur pour la bordure top , 10 pixels (depuis le côté droit de l’image) enlargeur pour la bordure right , 20 pixels (depuis le côté bas de l’image) en hauteurpour la bordure bottom , et enfin 30 pixels (depuis le côté gauche de l’image) en largeur pour la bordure left .
Remarquez que les unités px ne sont pas indiquées. Si vous le faites, la valeur n’estpas prise en compte...
Pour décrire un bouton, cette propriété sert à éviter les multiples images collées lesunes aux autres. Une seule image sera alors utile (avec une éventuelle image defond) ; le bouton pourra s’agrandir en fonction de la taille du texte qu’il contient.

A TTENTION - Ne pas oublier de définir la taille de la bordure !
Cette propriété doit s’utiliser conjointement avec celles définissant la taille des bordures, sinon les bordures seraient considérées comme d’épaisseur 0 pixel.
Les espacements
Les espacements concernent :

la distance qui sépare deux éléments HTML contigus ( margin ) ;
la distance du contenu d’un élément avec sa propre bordure ( padding ).

Distance de l’élément avec les éléments contigus (sur les quatre côtés)

margin : 5px;

Pour définir la propriété margin associée à un seul côté (au lieu des quatre en mêmetemps), on utilise margin-top , margin-bottom , margin-left ou margin-right .


Distance du contenu de l’élément avec sa bordure (sur les quatre côtés)

padding : 5px;

Pour définir la propriété padding associée à un seul côté (au lieu des quatre en mêmetemps), on utilise padding-top , padding-bottom , padding-left ou padding-right .

Le positionnement des éléments
Sauf autre indication, les éléments HTML se positionnent les uns à la suite desautres, en fonction de leur hiérarchie dans le code HTML. Un moyen de briser cepositionnement naturel consiste à utiliser la propriété position .


Positionnement absolute

position : absolute;

Ce positionnement absolute est utilisé pour placer les éléments par rapport auxbords de la page HTML, ou par rapport au plus proche parent qui possède cette propriété position .


Positionnement relative

position : relative;

Ce positionnement relative permet de placer les éléments relativement à leur positionnaturelle. Ils seront décalés sur l’axe des X et/ou des Y relativement à cette position.
Dans ces deux types de positionnement, les propriétés top ou bottom peuvent êtreutilisées, ainsi que les propriétés left ou right . Elles servent à indiquer une positionabsolue (si position : absolute ) ou un déplacement (si position : relative ).

La taille des éléments
Une hauteur et une largeur peuvent être indiquées pour chaque élément HTML. Sirien n’est indiqué, ce sont les valeurs naturelles qui sont prises.


Indication de la hauteur

height : 100px;


Indication de la largeur

width : 50px;

On peut aussi indiquer une hauteur maximum ou une largeur maximum. Si elle n’estpas atteinte, les valeurs naturelles sont celles qui s’appliqueront.


Indication de la hauteur maximum

max-height : 100px;


Indication de la largeur maximum

max-width : 50px;

Et également une hauteur minimum ou une largeur minimum.


Indication de la hauteur minimum

min-height : 100px;


Indication de la largeur minimum

min-width : 50px;

On peut également zoomer un élément (agrandir/rétrécir).


Zoom de 80 % (rétrécissement)

zoom : 0.8;
Le mode d’affichage


Cacher un élément

display : none;


Rétablir un élément précédemment caché

display : block;


Superposer un élément au-dessus des autres

z-index : 10; /* par défaut 0 */


Cacher la partie de l’élément qui dépasse la taille imposée

overflow : hidden;


Opacité d’un élément

opacity : 0.5;


Les listes
La principale propriété associée aux listes est celle qui consiste à cacher le signe précédent l’élément dans la liste (un point, un numéro, etc.).


Cacher le signe associé à l’élément de liste

list-style-type : none;



Sélecteurs CSS
Dans les exemples précédents, nous avons associé un style à un élément <p> en écrivant par exemple :


Définition d’un style

p {font-family : Helvetica;}
Les sélecteurs CSS vont servir à définir les éléments qui supporteront les styles. Eneffet, la définition précédente permet que tous les éléments <p> aient ce style, maisn’autorise pas plusieurs styles pour un même élément. On pourrait ainsi avoir certainsparagraphes dans une police de caractères et d’autres paragraphes dans une autre...

Sélecteurs simples
Ils consistent à donner les noms de balises, voire * pour désigner toutes les balises.


Tous les paragraphes

p


Toutes les images

img


Tous les éléments HTML

*


Sélecteurs d’attributs
On peut spécifier la valeur d’un ou de plusieurs attributs pour l’élément. Les attributspeuvent être des attributs HTML classiques ( name , title , etc.) ou des attributs créésdans le code JavaScript (donc avec des noms non standards).
Les exemples ci-dessous sont traités avec la balise <p> , mais fonctionnent pour toutesles balises, y compris * .


Tous les paragraphes ayant un attribut name

p[name]


Un élément quelconque ayant l’attribut name

*[name]


Tous les paragraphes ayant un attribut name=Sarrion (valeur exacte)

p[name="Sarrion"]
L’attribut name doit correspondre exactement à la valeur indiquée. Par exemple, si labalise <p> possède l’attribut name="Sarrion Eric" , cela ne correspond pas.


Tous les paragraphes ayant un attribut name contenant la valeur Sarrion

p[name~="Sarrion"]

Dans ce cas, si la balise <p> possède l’attribut name="Sarrion Eric" , cela correspond,car Sarrion est bien une des valeurs de l’attribut.
Par contre, si la balise <p> possède l’attribut name="SarrionEric" , cela ne correspondpas.


Tous les paragraphes ayant un attribut name et un attribut job

p[name][job]


Tous les paragraphes ayant un attribut name dont la valeur commence par Sar

p[name^="Sar"]


Tous les paragraphes ayant un attribut name dont la valeur se termine par ion

p[name$="ion"]


Tous les paragraphes ayant un attribut name dont la valeur contient arrio

p[name*="arrio"]


Sélecteurs de classe

Lorsque le sélecteur d’attribut porte sur l’attribut class , il existe une notation spécifique permettant de raccourcir la syntaxe.


Tous les paragraphes ayant un attribut class contenant la valeur rotation

p[class~=rotation]

Cela peut aussi s’écrire :