plus besoin de div pour le header footer les le reste de la page des balises existe en HTML5

Transcription

1 HTML5 : allege le code nouvelle balise: <nav> pour les lien vers des pages web <aside> pour du texte sur les coté <article>pour rajouter un artcicle <section> <header> <footer> plus besoin de div pour le header footer les le reste de la page des balises existe en HTML5

2 Nouvelle balise fun <audio> <video> PhoneGap est un framework JavaScript/HTML 5 qui permet aux développeurs de concevoir des applications mobiles hybrides en JavaScript, HTML et CSS pouvant exploiter les principales fonctionnalités et ressources (géolocalisation, accéléromètre, etc.) des plateformes mobiles.

3 CSS3 Afin de styliser notre bulle de bande dessinée nous allons commencer par lui appliquer une simple bordure d 1 pixel et un fond blanc : comment{ background:white; border:1px solid black; } Se pose ensuite la question fatidique des coins arrondis. Je ne doute pas que la plupart d entre vous savent déjà que je vais vous parler de la propriété borderradius. Effectivement, c est ce que nous allons maintenant utiliser pour arrondier nos coins. Il s agit d une nouvelle propriété CSS3 que l on utilise en spécifiant la taille de l arrondis de notre bordure : 1.comment{ background:white; 2 border:1px solid black; 3 border-radius:30px; 4 }

4 5 Donc là vous vous précipitez vers votre navigateur favoris pour tester ce code et là, c est le drame. Je ne vois aucune bordure arrondie, tu nous as roulés! cat fonctionne pas encore sur tous les navigateurs Sans CSS3 nous aurions du utilisé des images au préalable réalisé sous photoshop et un tableu :Nous voici donc partis pour mettre en place l HTML de notre tableau à 9 cases (au mieux certaines techniques alternatives réduisent à 3 cases à condition que la largeur ou la hauteur de votre bloc soit fixe).après avoir donc passé 2 heures sous Photoshop à essayer de bien caler au pixel près vos images, notre pauvre balise <div> s est maintenant transformée en quelque chose du genre :

5

6 Pour revenir au CSS3 certain navigateur se mette au norme heuresement : Nous allons maintenant voir un bon nombre de nouveautés que je vais diviser en 3 grandes catégories : Les effets visuels Les sélecteurs Les nouveaux outils pratiques border radius

7 Arrondit les bords d un bloc : box-shadow Applique une ombre sur un bloc : text-shadow Applique une ombre sur un texte : gradients Affiche un dégradé de couleurs : ont face

8 Permet d utiliser n importe quelle police : opacity Ajuste la transparence d un élément : transform Déplace, déforme, ou effectue la rotation d un élément :

9 transition Passe d un état à un autre d un élément avec par une transition animée : 3D transform Effectue des transformations en 3D : Le CSS3 introduit un ensemble de nouveaux sélecteurs. En voici quelques uns : Sélection par position des fils :nth-child(expression) permet de sélectionner un ensemble d éléments selon leur position grâce à une expression mathématique (rassurez-vous, pas de cosinus d exponentielle au carré au programme!) ou bien grâce à certains mots-clés. Un cas d utilisation très fréquent est la coloration d un tableau. Il est plus lisible d utiliser 2 couleurs de fond différentes alternées afin que l utilisateur

10 puisse se repérer plus facilement : On pouvait auparavant utiliser du Javascript ou un code côté serveur pour colorer une ligne sur deux. On a maintenant une méthode bien plus simple grâce à :nth-child : table tr:nth-child(odd){ background-color:#eef; } Le mot-clé odd signifie «chiffres impairs» (et even pour les chiffres pairs) Selecteur d attribut : [attribut^="valeur"] [attribut^="valeur"] sélectionne les éléments dont l attribut spécifié commence par une certaine valeur. Voici un exemple d utilisation : <a href=" externe</a> <a href=" externe</a> <a href="#">lien interne</a> <a href=" externe</a> a[href^=" color:red; } :not permet d exclure certains éléments de la sélection. Par exemple, le code suivant n affichera en vert que les 2 derniers liens : <a href="#" class="notme">je suis rouge</a> <a href="#">je suis vert</a> <a href="#">je suis vert</a>

11 a{ color:red; } a:not(.notme){ color:green; } X:not(selecteur) 1.div:not(#contenu) { 2.color: blue; 3.} La pseudo-classe de négation a une utilité particulière. Le code ci-dessus permet de sélectionner tous les div, sauf ceux qui ont pour id #contenu. X:nth-child(n) 1.li:nth-child(3) { 2.color: red; 3.} La notation de pseudo-classe :nth-child(an+b) représente un élément qui a an+b-1 éléments frères devant lui dans le document, pour une valeur entière positive ou nulle de n. En d'autres mots, cela sélectionne chaque b-ième fils d'un élément après que tous ses enfants aient été séparés en groupes de a éléments chacun. Par exemple, cela permet de sélectionner les lignes paires dans un tableau, et peut être utilisé, par exemple, pour alterner la couleur du texte d'un paragraphe sur quatre couleurs. Les valeurs de a et b doivent être des entiers négatifs, positifs ou nuls. L'index du premier enfant d'un élément est 1. De plus, :nth-child() peut prendre pour argument odd et even. odd a la même signification que 2n+1, et "even" a la même signification que 2n. Source X:nth-last-child(n) 1.li:nth-last-child(2) { 2.color: red; 3.} Et si vous aviez une liste comportant de nombreux éléments et que vous aviez besoin d'accéder à l'avant-dernier élément. Au lieu de faire li:nth-child(398), vous pouvez utiliser li:nth-lastchild.

12 X:nth-of-type(n) 1.ul:nth-of-type(3) { 2.border: 1px solid black; 3.} Imaginez que vous ayez cinq listes. Pour cibler seulement la troisième liste, vous pouvez utiliser la pseudo-classe :nth-of-type(n). Les media queries Les media queries sont une manière élégante de définir des styles différents selon le type de média de l utilisateur. C est particulièrement utile pour avoir des styles différents sur les écrans de petite taille des smartphones et des tablettes tactiles. Ainsi une seule page HTML utilisant les media queries peut distribuer des versions différentes de son design, afin de s adapter par exemple à la largeur de l écran ou même à l orientation du téléphone body{ background-color:green; }

13 screen and (max-device-width: 600px) { /* Style appliqué uniquement sur les écrans de moins de 600px de largeur */ body{ background-color:red; } } Dans cet exemple le fond de la page s affichera en vert sur les grands écrans et en rouge sur les petits écrans. Les colonnes Avec le CSS3 il est désormais possible de définir des colonnes, à la manière des contenus éditoriaux de journaux. Ce cas d utilisation était assez rare avant l apparition du CSS3, qui simplifie grandement les choses. Avec un code aussi simple que : p{ column-count:2; } On peut passer très facilement de : à RGBA

14 Il est désormais également possible d utiliser de nouvelles notation pour spécifier des couleurs. La méthode standard RGB accueille maintenant une composante Alpha qui gère l opacité. Cette nouvelle notation diffère beaucoup de la précédente. On utilise le format rgba(r, g, b, a) avec «r», «g» et «b» étant des entiers de 0 à 255 et «a» un décimal de 0 à 1. Ainsi pour colorer un arrière plan en rouge semi-transparent nous devons écrire : div{ background-color: rgba(255, 0, 0, 0.5); } HTML5 Le W3C et le WHATWG Le W3C (World Wide Web Consortium) est l organisation qui s occupe de standardiser le web. Elle est constituée d un ensemble de membres actifs qui réfléchissent à l évolution des standards tels que l HTML et le CSS. Ils discutent par exemple des bonnes pratiques à employer pour écrire son code HTML, ou encore de nouvelles balises qu il serait intéressant d ajouter au langage. Le W3C travaille donc à l élaboration du standard qu est l HTML5. Seulement voilà, le problème c est qu une telle responsabilité présente un inconvénient majeur : la lenteur du processus. La conséquence de cette lenteur est la création d un groupe de rébellion au sein du W3C, nommé le WHATWG (Web Hypertext Application Technology Working Group). Ce groupe est constitué principalement de développeurs des navigateurs tels que Mozilla, Opera ou Apple. L approche est ici totalement différente puisque ce groupe est beaucoup plus ouvert et surtout a pour objectif d accélérer la standardisation (ou du moins la mise en place de standards pour les navigateurs). L HTML5 est donc le fruit des travaux du W3C et du WHATWG.

15 Les nouvelles balises sémantiques L HTML5 introduit également un ensemble de nouvelles balises afin de donner plus de sémantique (de sens) à nos pages. Par exemple, au lieu d utiliser une <div> avec un id= header, nous pouvons utiliser tout simplement la balise <header>. Parmi ces balises sémantiques on trouve entre autres <header> : Qui indique que l élément est une en-tête <footer> : Qui indique que l élément est un pied-de-page <nav> : Qui indique un élément de navigation tel qu un menu <aside> : Qui correspond à une zone secondaire non liée au contenu principal de la page

16 <article> : Qui représente une portion de la page qui garde un sens même séparée de l ensemble de la page (comme un article de blog par exemple) Les balises multimédia <video> Cette balise intègre directement un lecteur vidéo dans la page, avec des boutons Lecture, Pause, une barre de progression, du volume Un vrai petit Youtube intégré à votre page et natif au navigateur! <audio> Cette balise est l équivalent de la balise video mais pour l audio. En 3 lignes de code vous avez un lecteur MP3! Nous pouvons d ailleurs voir sur l image ci-dessous que chaque navigateur utilise un design qui lui est propre pour styliser son lecteur. Dans tous les cas il vous est possible de créer votre propre design si vous préférez un rendu uniforme quel que soit le navigateur utilisé.

17 <canvas> Cette balise est probablement la plus prometteuse de toutes, puisqu il s agit d une surface sur laquelle il est possible de tracer des formes et de les animer. En résumé C est dans cette zone que sont réalisées des animations ou des jeux. Les possibilités offertes par la balise canvas sont immenses, et couplé avec le standard WebGL de rendu graphique 3D, on obtient des résultats impressionnants au sein même du navigateur.

18 Les selecteurs en CSS Vous prétendez maîtriser le CSS et pourtant vous n'utilisez que les sélecteurs de base du genre #mon_id,.ma_classe, #mon_id div li. Remettez-vous en question. Dans ce guide, vous découvrirez enfin les sélecteurs avancés qui vous sont obscurs et pourtant oh, combien Awesome! Des sélecteurs CSS à consommer sans modération. * 1.* { 2.margin: 0; 3.padding: 0; 4.} C'est le sélecteur universel. Le symbole étoile cible tous les éléments de la page. Beaucoup de développeurs l'utilisent pour mettre à zéro les marges de tous les éléments. #monid 1.#contenu { 2.width: 960px; 3.margin: auto; 4.} Le sélecteur d'id permet de cibler un élément par son identifiant. L'identifiant doit être unique. Plusieurs éléments d'une même page ne peuvent pas avoir le même identifiant. Compatibilité IE6+ Firefox Chrome Safari Opera.maclasse 1..error { 2.color: red;

19 3.} A la différence des sélecteurs d'id, les sélecteurs de classe peuvent cibler plusieurs éléments. Compatibilité IE6+ Firefox Chrome Safari Opera X Y 1.li a { 2.text-decoration: none; 3.} Utilisez le sélecteur descendant pour être plus spécifique. Pluôt que de cibler toutes les balise de lien, l'exemple ci-dessus cible seulement celles qui sont à l'intérieur d'un élément de liste. Compatibilité IE6+ Firefox Chrome Safari Opera X 1.a { color: red; } 2.ul { margin-left: 0; } Les sélecteurs de type permettent de cibler un élément grâce à son type. Compatibilité IE6+ Firefox Chrome

20 Safari Opera X:link et X:visited 1.a:link { color: blue; } 2.a:visited { color: purple; } La pseudo-classe :link correspond à tous les liens qui n'ont pas été visités. La pseudo-classe :visited correspond à tous les liens déjà visités.