Docstoc

html5 en entreprise

Document Sample
html5 en entreprise Powered By Docstoc
					HTML 5
 <en_entreprise/>
                         Historique
• HTML, à la base du Web, est un standard
  dont la dernière version (4.0) remonte
  à 1998.


• Internet et les intranets ont évolués vers
  le Web 2.0 :
  Web Applications, partage d‟information, collaboration…



• Depuis 2006, le WHATWG travail sur une évolution de
  HTML pour fournir un standard ouvert (alternative à Flash,
  Silverlight, JavaFX).
  Ces travaux ont été repris pour les spécifications HTML 5.


                                                               2
        Que recouvre HTML 5

• Juste une histoire de balises ?
  – Non, cela impacte aussi CSS et les API JavaScript
  – Intègre les spécifications SVG et MathML
  – Regroupe les spécifications HTML, XHTML et DOM2HTML




                                                          3
                      HTML


• Tags sémantiques

• Formulaires

• Accessibilité, Métadonnées, Auditing

•   Liens typés

•   Multimédia

•   Dessin 2D & 3D



                                         4
HTML                 Tags sémantiques
• HTML5 fournit des nouveaux tags permettant de mieux structurer
  l‟information.

• Structure :
   – header, aside, footer, nav, article / section, details / summary, figure /
     figcaption : cascadables

                  <div id=“header” />                   <header />
                   <div id=“nav” />                      <nav />



       <div id=                               <aside
      “aside”/>                                 />




                  <div id=“footer” />                   <footer />


                                                                                  5
HTML           Tags sémantiques

• Structure de l‟information :
   –   menus : toolbar et contextuel
   –   datalist : permet de séparer les données d‟un contrôle associé
   –   output : résultat d‟une soumission de formulaire
   –   progress : représente la progression dans une suite d‟étapes
   –   meter : représente visuellement une quantité
   –   keygen : conserve la clé privée côté client et envoie la clé publique



• Abstraction pour les Actions
   – command : abstraction commune aux boutons, liens et menus



                                                                               6
HTML                 Formulaires

• Nouveaux types de champs de saisie :
     • dates / heures
     • couleurs
     • échelles de valeurs
     • url, tel, email, week, month, range, number…
  – Assistants de sélection (date/heure, couleurs…) fourni par le
    navigateur.


• Le navigateur valide la saisie
  – attributs : pattern, min / max / step, required
  – pseudo-classes CSS :invalid, :valid, :out-of-range



                                                                    7
HTML                  Formulaires

• Nouveaux attributs pour les champs de saisie :
  –    autocomplete : désactive la suggestion proposée par le navigateur
  –    autofocus : positionne le focus après le chargement de la page
  –    multiple : autorise la présence de plusieurs valeurs
  –    list : relie un contrôle à une liste de suggestions <datalist />


• Gestionnaire d‟Undo
  – Le navigateur enregistre les modifications qui ont lieu
    dans la page
  – Il offre une API pour défaire/refaire les modifications.



                                                                           8
HTML                  Et encore…
• Modifier du contenu :
   – L‟attribut contentEditable rend le contenu modifiable pour des
     éléments statiques (<p>, <span>, …)

• Metadonnées (Microdata)
   – L‟attribut item-prop permet de définir une entrée clé-valeur dans
     les métadonnées du document

• Nouveaux attributs pour l‟accessibilité ARIA :
   – Offre des informations complémentaires pour les technologies
     d‟accessibilité

• Fonctionnalité d‟auditing :
   – Les liens ont un attribut ping qui contient une URL à invoquer en
     arrière-plan


                                                                         9
                          HTML

• Intérêt pour les applications d‟entreprise :

   – Le code des pages HTML est plus lisible et plus
     structuré

   – Améliorer les interfaces de saisie de données via les
     assistants et la validation côté client

   – Utilisation de Canvas et SVG pour remplacer les
     images générées côté serveur

   – Il manque toujours un élément Tableau triable.


                                                             10
                  APIs JavaScript


• Sélecteurs

• Stockage côté client

• Communications

• Interface Utilisateur

• Géolocalisation


                                    11
API JS                    Sélecteurs

• Extension de l‟API de sélection d‟éléments dans
  le DOM :
   – Après getElementById() et getElementsByTagName() :
         • document.getElementsByClassName(" panel" )
         • document.querySelector( "#toto" );
         • document.querySelectorAll( "table.tata > tr > td titi" );


• Déjà utilisés via les librairies JavaScript
  (jQuery, Mootools)




                                                                       12
API JS               Stockage

• Stockage
   – SessionStorage : clés-valeurs, isolée par onglet
   – LocalStorage : clés-valeurs, persistant
   – SQL Database : BD relationnelle embarquée


• Cache
   – Une API permet de définir les fichiers qui doivent être
     cachés côté client
   – Ainsi même déconnecté, un « rafraichissement » de la
     page fonctionnera.


                                                               13
API JS       Communications

• Multi-threading « a sort of » WebWorkers :
   – Les WebWorkers sont un mécanisme pour exécuter du
     JavaScript en arrière plan, sans bloquer l‟affichage
     dans le navigateur.

• WebSockets :
   – Moyen de communication bi-directionnel entre un client
     et un serveur (AJAX amélioré)

• Messaging :
   – Transmettre des données entre deux pages web de
     deux onglets différents

                                                              14
API JS   Expérience utilisateur

• Drag‟n‟Drop
   – Une API standardisée offre le support du Drag‟n‟Drop
     dans la fenêtre du navigateur

• Notifications
   – Elles permettent d‟afficher des notifications de type
     instant-messaging sur le « bureau » de l‟utilisateur

• Géolocalisation
   – Obtenir la position géographique d‟un utilisateur
     (WGS84)


                                                             15
                      APIs JavaScript


• Intérêt pour les applications d‟entreprise :

   – Stockage de données côté client, mode déconnecté

   – Nouveaux paradigmes de communication pour sortir du
     mode requête/réponse

   – Interaction avec l‟utilisateur : notifications,
     géolocalisation



                                                           16
                       CSS


• Sélecteurs

• Typographie

• Décoration

• Transformations, Transitions et Animations

• Media-Queries

                                               17
CSS                   Sélecteurs

• Pour cibler plus précisément les éléments
  – :first-child
  – :nth-child(odd)
  – :not()




                                              18
CSS                  Typographie

• Standardisation des polices de caractères
      • Un format commun : WOFF
      • @font-face


• Disposition
      • text-overflow : cache, renvoie à la ligne ou tronque (…) le texte
      • paragraphe en colonnes


• Décoration du texte
      • ombre
      • détourage


                                                                            19
CSS                   Décoration

• Opacité
      • Permet de jouer sur la transparence


• Bordures
      • border-radius : arrondir les angles
      • border-image : définir une image pour chaque côté et angle


• Dégradés
      • Remplissage des éléments sans images




                                                                     20
CSS                         T. T. A.

• Les Transformations
      • Applique des rotations ou des translations aux éléments
      • Sur les 3 axes


• Les Transitions
      • Définit la transition d‟un style CSS à un autre


• Les Animations
      • Permet de définir une animation



                                                                  21
CSS                Media-Queries

• Les liens vers les feuilles de styles sont flexibles
   – On peut spécifier des filtres avancés pour la sélection
     d‟une feuille de style
      •   Orientation
      •   Largeur
      •   Résolution
      •   …

   – Et des opérateurs
      • <link media=“screen, print and (color)“ … />




                                                               22
                            CSS


• Intérêt pour les applications d‟entreprise :

   – Media-Queries : une même page HTML cible plusieurs
     types de périphérique d‟affichage

   – Simplifie la réalisation des chartes graphiques

   – Allège le code JavaScript de décoration et d‟animation,
     le code des pages HTML



                                                               23
  S’y préparer dès maintenant
• Des balises dépréciées peuvent déjà être supprimées :
  applet et frameset

• Support par les navigateurs (04/2010) ?
   – Opera, Safari, Chrome
   – Navigateurs mobiles (basés sur WebKit)
   – ChromeFrame pour Internet Explorer

• Evaluer la compatibilité HTML5 d„un navigateur
   – http://www.html5test.com
   – http://html5readiness.com




                                                          24
                  En conclusion

• HTML5 permet de

  – Réaliser des Applications Web plus performantes et plus évoluées
    qu‟une suite d‟allers-retours serveurs.

  – Se rapprocher de l‟ergonomie des Applications Desktop tout en
    simplifiant la complexité HTML des interfaces graphiques.

  – Offrir des solutions aux situations de mobilité.




                                                                       25
le.genie.logiciel 2010
                         26

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:0
posted:5/19/2013
language:French
pages:26