Aide mémoire – HTML5, CSS3 et Javascript – HTML5 : Éléments

View Github Repository Open presentation in a new window

sebleclerc

See all presentation from sebleclerc

Aide mémoire – HTML5, CSS3 et Javascript – HTML5 : Éléments

0 0

AideMemoire-HTML5

On Github sebleclerc / AideMemoire-HTML5

Aide mémoire

HTML5, CSS3 et Javascript

Par Sébastien Leclerc Lavallée

Ceci est mon aide mémoire pour le cours 70-480 - Programming in HTML5 with JavaScript and CSS3 de Microsoft. Il sera remplis de code snippet, rappels, how to et définitions. Bonne lecture !

HTML5 : Éléments

Doctype

Avec HTML5, il existe un nouveau doctype à utiliser, une version simplifiée. Dans la version HTML4 ou XHTML, le doctype était très long et compliqué. Maintenant, il suffit d'écrire : 

<!DOCTYPE html>

HTML5 : Éléments

HTML

On a ajouté un attribut à l'élément HTML pour simplifier la définition des métadonnées du site. Ainsi, on peut spécifier la langue du site avec : 

<html lang="fr">
pour avoir un site en français.

HTML5 : Éléments

Head

Cet élément contient plusieurs éléments qui ont été simplifiés. Charset

Avant : 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Après : 
<meta charset="utf-8">

HTML5 : Éléments

Head

Autant les éléments scripts et stylesheet se sont vu amélioré. Il est maintenant plus facile d'ajouter une feuille de style, car on peut omettre l'attribut type qui est implicite.

Stylesheet 

<LINK href="special.css" rel="stylesheet" />
Script 
<script src="js/site.js" />

HTML5 : Éléments

Header

L'élément Header représente sémantiquement le début d'un regroupement d'informations ou de concepts. Ce n'est pas seulement pour l'entête de la page. Par exemple, elle peut servir pour regrouper les informations d'un billet d'un blogue : auteur, date, catégorie, etc.

HTML5 : Éléments

Nav

La sémantique de l'élément NAV veut qu'on l'utilise pour aider à la navigation dans un site web. Par contre, ce n'est pas nécessairement la navigation pour tous le site, mais peut aussi servir à la navigation à l'intérieur d'un page comme par exemple une page de FAQ.

HTML5 : Éléments

Section

L'élément Section regroupe d'autres éléments qui ont une relation sémantique entre elles. Par exemple, une partie d'une interface avec des tablatures ou une About page avec plusieurs sections. Chaque section peut avoir un Header et un Footer ainsi que d'autres éléments sémantiques. Si aucune relation entre les éléments, on utilise un Div.

HTML5 : Éléments

Article

L'article c'est un contenu autonome d'une page. On pourrait le sortir de cette page pour le remettre dans une autre sans problème. Le côté indépendant est vraiment très important quand on veut utiliser cet élément. On peut penser à un billet, un commentaire, post de forum, article de journal.

HTML5 : Éléments

Aside

Représente une partie de la page qui est reliée à la page sans en faire partie. Par contre, il ne faut pas mettre du contenu de la page. On peut penser à un sidebar, liste de liens. L'élément aside n'est pas nécessairement sur le côté de la page. It's "aside" from the content but related.

HTML5 : Éléments

Footer

L'élément Footer est semblable à Header dans ce sens qu'il n'est pas nécessaire de l'avoir à la fin de la page. Il permet aussi de définir la fin d'une section.

HTML5 : Éléments

Audio / Vidéo

Ces deux éléments permettent de jouer des fichiers audio et vidéo sans logiciel complémentaire. Ils fournissent aussi une API qui permet de faire Play/Pause/VolumeUp/VolumeDown et plusieurs autres. Un élément Source à l'intérieur de chacun permet d'avoir plusieurs fichiers différents selon le support des fureteurs.

HTML5 : API

Canvas

Permet de dessiner des formes à l'aide d'une API en javascript. 

<canvas id="myCanvas" width="200" height="100"></canvas>
var c=document.getElementById("myCanvas");
								var ctx=c.getContext("2d");
								ctx.fillStyle="#FF0000";
								ctx.fillRect(0,0,150,75);

HTML5 : API

Canvas

Voici d'autres instruction à faire : moveTo(x,y) defines the starting point of the line lineTo(x,y) defines the ending point of the line arc(x,y,r,start,stop) start = 0, stop = 2*Math.PI fillText(text,x,y) - Draws "filled" text on the canvas strokeText(text,x,y) - Draws text on the canvas (no fill)

HTML5 : API

SVG - Scalable Vector Graphics

Les SVG sont fait à partir du HTML directement sans trop de modifications. Vecteurs graphiques définis par XML 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  						<circle cx="100" cy="50" r="40" stroke="black"
  							stroke-width="2" fill="red" />
						</svg>

HTML5 : API

Géolocalisation

HTML5 : API

Web Storage

HTML5 : API

App Cache

CSS3

Browser prefix

CSS3

Visibility

visibility:hidden fait disparaître l'élément, mais il garde toujours son espace dans le DOM. display:non le rend aussi invisible, mais ne prend plus d'espace.

CSS3

Block vs Inline

Les éléments Block (display:block;) prennent tout l'espace disponible et on un saut de ligne avant et après. H1, P et DIV. Le Inline (display:inline;) est le contraire, ne prend pas pas tout l'espace disponible et ne force pas le saut de ligne. SPAN, A. Il est possible de changer le comportement des éléments grâce au CSS.

CSS3

2D Transforms

On peut appliquer plusieurs transformations à des éléments HTML :

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix() - all-in-one

CSS3

2D Transforms

Rotation : transform: rotate(30deg);

Déplacement : transform: translate(50px,100px);

Agrandi : transform: scale(2(x),4(y)); (Combien de fois plus gros, 1 = pareil)

CSS3

2D Transforms

Torsion : transform: skew(30deg,20deg);

Les éléments tournent selon l'axe X et Y.

Matrix : transform: matrix(0.866,0.5,-0.5,0.866,0,0);

CSS3

3D Transforms

CSS3

Transitions

CSS3

Animations

Javascript

Question 1

function Car(){}
        				Car.prototype.fourDoor = function(){
        					alert('four doors');
        					}

Comment faire pour la classe Sedan de modifier la fonction fourDoor ?

Javascript

Réponse 1

Sedan.fourDoor = function(){
            				alert('door count');
            				
Sedan.prototype.fourDoor = function(){
            				alert('door count');