mardi 2 juin 2015

Les données Aria

Les données ARIA
Une présentation de Lucas Dewamme
&                              Olivier Laval

Chapitres
1)Introduction
2)Rôle
3)Etats et propriétés
4)Hiérarchie sémantique
5)Lecteurs d'écran
6)Navigateurs
7)Conclusion
8)Bibliographie

Introduction
Ces attributs font partie d'une spécification du W3C : WAI-ARIA. Cette norme, couramment
appelée ARIA, a été introduite pour pallier le manque d'accessibilité des applications Internet
et plus particulièrement des widgets.
Les données ARIA sont une « surcouche » sémantique ayant pour but de compléter un
langage web tel que le HTML, SVG, XML, ... en rendant son contenu accessible aux
personnes souffrant d'handicaps tel que la mal-voyance.
Elles se composent de rôle (ex :"presentation", "navigation", ...), états (valeurs
possibles : "true", "false", "mixed") et propriétés .

lundi 9 mars 2015

Sélecteurs CSS avancés

Sélecteurs CSS avancés

Les règles des feuilles de styles CSS sont composées d'un sélecteur qui désigne l'élément du code HTML et d'une définition comportant une liste de propriétés relatives à cet élément HTML ou cette classe d'éléments.


Un sélecteur peut être un sélecteur simple ou un sélecteur composé, ou une chaîne de sélecteurs simples ou composés séparés par des combinateurs.


Si un bloc de déclarations correspond à plusieurs sélecteurs différents, on peut les regrouper en les séparant par des virgules.

Vous trouverez ci-après une liste des principaux sélecteurs CSS que vous pouvez utiliser, classés par groupes de complexité croissante et présentés sous la forme d'un exemple archétypal illustrant sa syntaxe, suivi de sa retranscription en langage naturel.

mercredi 11 février 2015

LES TABLEAUX HTML <table>

1- La base

source : http://openclassrooms.com/courses/apprenez-a-creervotre-site-web-avec-html5-et-css3/les-tableaux-1

<table> </table>.
C'est cette balise qui permet d'indiquer le début et la fin d'un tableau.
Cette balise est de type bloc, il faut donc la placer en dehors d'un paragraphe.
Exemple :
<p>Ceci est un paragraphe avant le tableau.</p>
<table>
<!-- Ici, on écrira le contenu du
tableau -->
</table>
<p>Ceci est un paragraphe après le tableau.</p>


D'un certain point de vue, un tableau possède une architecture assez similaire à celle d'une liste à puces, mais les 'ul' deviennent des 'tr' et les 'li' des 'td'. De plus, on construit à l'horizontale.
<tr> </tr> :
indique le début et la fin d'une ligne du tableau ;
<td> </td> :
indique le début et la fin du contenu d'une cellule.
En HTML, un tableau se construit ligne par ligne. Dans chaque ligne (<tr>), on indique le contenu des différentes cellules
(<td>).

lundi 9 février 2015

Créer des jeux avec HTML5 et Javascript

Créer des jeux avec HTML5 et Javascript

Les navigateurs sont désormais suffisamment performants pour permettre de jouer à des jeux en 2D ou en 3D.

Voyons comment nous pouvons les développer nous-mêmes.

La balise <CANVAS>

Le navigateur peut afficher les éléments graphiques d'un jeu au sein d'une zone délimitée par la balise "<canvas>".

Des commandes Javascript permettent d'y dessiner en 2D de façon très simple.





mardi 3 février 2015

Le SVG (partie 1)

Le SVG. (partie 1)

Une image svg est une image composée de vecteurs, par conséquent elle ne perd pas en qualité en l’agrandissant ou en la rapetissant car ce n’est jamais qu’un affichage d’un multiple fois chaque vecteur la composant

Pour l’intégrer il existe plusieurs manières
La balise iframe, img, svg, ou background-image dans du CSS

en gros la balise svg permet de dessiner a meme le navigateur, ce dernier interpretant le code que l'on ecrit

exemples:

<iframe src="image.svg" width="800" height="800">*
<img src="image.svg"/>
<svg><circle cx="200" cy="200" r="200"></svg>

.classe{
Background-image :url('image.svg') repeat;
}

(iframe permet d'inserer une page html dans une autre page html, en miniature dans un conteneur par exemple)