HTML5 et CSS3 – Synthèse

Depuis le début de ce projet de veille technologique, nous avons pu passer en revue différents aspects du HTML5 et du CSS3. Nous les avons présentés, et nous avons souligné leur potentiel. Nous nous sommes également efforcés de conserver un regard critique sur cette analyse afin de ne pas oublier leurs limites et les problèmes que leur utilisation peut engendrer.

Internet est très largement utilisé par le grand public, mais les technologies derrières ne sont pas nécessairement bien connues. Les avancées du HTML5 et du CSS3 parlent en effet probablement plus à des connaisseurs ; même si on final, tout le monde en profite. Vous pouvez par exemple admirer le site d’une de nos listes préférées qui exploite le meilleur du HTML5 et du CSS3, tout en utilisant des polices de caractères en vogue.

Bien entendu, même si les technologies se modernisent, les vieux réflexes sont toujours d’actualité, comme par exemple utiliser le validateur du w3c. Notons, tout de même, que cet outil possède ses propres limites (il est par exemple mis en échec par le site des caspors juniors)…

Vous l’aurez donc compris, le HTML5 et le CSS3 permettent des avancées intéressantes. Néanmoins, il ne s’agit que d’outils devant être maniés avec dextérité.

Nous élaborerons un rapport final reprenant toutes les recherches que nous avons effectué sur l’utilisation et les développements de ces technologies. Nous respecterons le plan suivant :

  1. Les nouveautés du HTML5 et du CSS3
    1. HTML
    2. CSS3
  2. Comment bien utiliser ces technologies
    1. Les navigateurs
    2. Outils du développeur
  3. Le HTML5 et le CSS3 à l’œuvre
    1. Un panel de site
    2. Les idées reçues

HTML5, et si on en parlait ?

Introduction

Pour cet avant dernier article consacré au HTML5, nous allons passer en revue quelques idées reçues. Nous avons ainsi mené notre petite enquête en posant la simple question “Que pensez-vous du HTML5/CSS3 ?” à diverses personnes rencontrées sur internet. Et pour chaque réponse, nous vous proposons nos propres commentaires.

 

“Ça va détruire internet explorer !”

Que les amis d’internet explorer se rassurent, non, votre navigateur préféré a peu de chances de disparaitre à cause du HTML5. Même si ce navigateur est un peu en retard (cf notre article sur la compatibilité des navigateurs), il prendra en charge les sites en HTML5 au fur et à mesure des mises à jour à venir !

“C’est un buzzword”

Alors non, et oui, et non. Tout dépend du public concerné. A notre question sur le html5, beaucoup de personnes ont seulement répondu “le quoi ?”. Autrement dit, pour le public profane, ça n’a aucun intérêt. Pour ceux qui en savent un peu plus, c’est effectivement un critère intéressant. Cette réponse nous a été confiée par un entrepreneur du web spécialisé dans la vente de sites. Autrement dit, le html5 semble être un très bon argument marketing. Est-ce justifié ? Probablement: il signifie au minimum que le vendeur est au courant des dernières nouveautés ce qui est déjà un indice de qualité. Enfin pour un connaisseur, le html5 peut recouvrir beaucoup de choses et le mot seul ne suffira pas à le persuader.

“Une bonne solution pour se débarasser des sites en flash”

Certaines personnes avancent que le html5 pourrait supplanter le flash. Il est probablement difficile de se prononcer maintenant, et même si cela devait arriver, cela pourrait prendre de nombreuses années. La réelle difficulté est la mise au point d’outils pour utiliser le html5. Ce travail prendra du temps, auquel s’ajoutent le développement du html5 lui-même et la mise à niveau des navigateurs. De plus, le flash, bien qu’il ait certaines faiblesses, a une longueur d’avance niveau développement et dépasse le simple développement web. Je terminerai par une simple remarque: ceux qui faisaient de mauvaises choses avec du flash pourront en faire tout autant avec html5.

“Le HTML5 n’est pas une norme officielle : ce n’est pas à utiliser aujourd’hui”

Si on ne peut effectivement pas utiliser toutes les fonctionnalités offertes par le html5 aujourd’hui, rien n’empêche d’utiliser ce qui est déjà géré par les navigateurs internet ! Il est même courant aujourd’hui de trouver de tels sites. Ajoutons à cela que le W3C vient de rendre public son validateur pour cette norme (qui n’était jusqu’alors disponible qu’en version bêta).

“C’est relou à écrire”

Alors pour cette remarque, il faut probablement distinguer deux types d’amélioration. Le html5 en introduisant plus de sémantique dans les balises, et ayant un doctype très court, simplifie le travail du développeur web. Alors pourquoi une telle réponse ? Souvenez-vous que le html5 introduit de nouvelles API javascript. Bien que prometteuses, on peut effectivement s’interroger sur la facilité de les utiliser. Sans se prononcer sur la complexité intrensèque de celles-ci, il est évident que nouveauté rime avec manque d’expérience et le html5 devra réussir à composer avec les habitudes des développeurs s’il veut s’imposer.

“-J’ai du mal à afficher une vidéo en HTML5.
-Tu as essayé avec un autre navigateur ?”

Ce problème est bien entendu récurrent. On revient sur l’idée de la compatibilité évoquée tout-à-l’heure. En effet, pour beaucoup d’éléments nouveaux dans le HTML5, non seulement, tous les navigateurs ne les prennent pas en compte, mais certains leur demande une syntaxe spécifique. Ainsi, lorsque l’on attaque un site en HTML5, il est d’autant plus important de vérifier le bon affichage sous les différents navigateurs.

“C’est prendre un pari risqué que de miser sur le HTML5″

Comme on l’a dit, actuellement la majorité des navigateurs reconnaissent certaines balises nativement. Mais surtout, il y a très peu de riques d’incompatibilité avec les anciens navigateurs (du moment qu’on utilise pas de nouvelles features). Quant aux utilisateurs d’IE, il y a des systèmes “d’émulation”. De plus, on peut utiliser en fait toutes les nouveautés du HTML5 en les englobant dans des balises plus veilles qui permettent de garder la compatibilité pour les navigateurs pas mis-à-jour tout en proposant un esprit et un design neuf au site ! Finalement, n’hésitez pas et choisissez le HTML5 pour un web fort !

“Le CSS3, ça sert à rien : on pouvait déjà tout faire avant avec photoshop (by adobé)”

Alors effectivement, on pouvait déjà faire des bords arrondis en utilisant n’importe quel logiciel de traitement d’images puis en incrustant des images dans la page web. Mais avec le CSS3, c’est tout simplement plus simple, plus rapide, plus léger. De plus, l’utilisation d’images implique un certain manque de souplesse. En combinant du CSS3 avec du javascript, on peut créer des animations impossibles à obtenir avec de simples images.

Conclusion

Comme vous avez pu le constater déjà au cours de nos précédents articles, le html5 et le CSS3 sont des technologies prometteuses mais ont également des faiblesses. Tout ce qu’on peut en lire permet de le réaliser assez bien, mais attention aux idées reçues et aux prévisions hasardeuses. Toutes nouveautés s’accompagnent ainsi de ses défenseurs et de ses détracteurs. Alors faites bien attention lorsque vous vous promenez sur la toile, un troll peut en cacher un autre!

Sources :

www.developpez.com

www.blog-nouvelles-technologies.fr

Luc et Karlotcha

Licence Creative Commons

Ce(tte) oeuvre est mise à disposition selon les termes de la Licence Creative Commons Paternité – Pas d’Utilisation Commerciale – Pas de Modification 3.0 non transcrit.

Le HTML5 dans la vraie vie

I) Introduction

Nos quatre premiers articles ont beaucoup traité de la théorie du HTML5 et du CSS3. Finalement, le plus simple pour comprendre ces deux nouvelles technologies, et où en sont les développements, est de vous présenter une petite sélection de sites qui parlera d’elle-même.Bien évidemment, on ne va pas vous quitter comme ca. Nous allons pointer du doigt ce qui est intéressant dans ces sites et ce qui est un peu plus gênant. Nous reviendrons ainsi sur les problèmes de compatibilité abordés dernièrement. Nous examinerons notamment des sites qui oeuvrent pour le bien-être des amoureux du HTML5 à travers leurs nouvelles expériences. Dépêchons-nous d’aller voir ces pionniers du Web.

II) Command HTML5 and Conquer JavaScript

Si vous aimez les petits jeux sur internet, peut-être avez-vous déjà trouvé des jeux en HTML5 (par exemple sur http://www.jeux-en-html5.fr/). Commençons par cet exemple de site proposant une version en HTML5 d’un jeu mythique : Command and conquer. Vous pouvez directement visionner sans vous fatiguer cette video. Après lecture de nos précédents articles, vous serez peut-être curieux de savoir quelle feature du HTML5 est mise en œuvre ici. Et bien il s’agit avant tout de l’élément canvas ! Pour rappel, cet élément permet de réaliser du dessin 2D. Vous voulez en savoir plus ? Voici un excellent “cheat sheet”).

Comme vous pourrez le lire sur le site lui-même, il s’agit avant tout de démontrer la puissance du HTML5 et les nouvelles possibilités qu’il offre. HTML5 est-il synonyme du déclin des jeux flash, et du commencement d’une nouvelle ère ? Il est probablement trop tôt pour le dire. Dans cet exemple, le jeu demande un temps de chargement important. Il a sûrement posé des problèmes complexes aux développeurs (qui ont choisi le HTML5 plus par défi que par intérêt technique) et n’est pas compatible avec tous les navigateurs. Mais nous dérivons et le groupe de veille sur les moteurs de jeux doit posséder plus d’éléments de réponse que nous !

III) Blur Ray

Outre les sites explorant les nouvelles fonctionnalités du HTML5, vous pourrez également trouver certaines propositions pour les développeurs, que ce soit des idées ou du code à intégrer à vos sites. Nous avons ainsi sélectionné deux articles de css-tricks.com Le premier présente une idée assez simple : en combinant pour un mot la transparence et son ombre, on peut créer un effet de flou ! Vous pouvez même vous servir de JavaScript pour aller un peu plus loin…

Le second propose des barres de chargement. Le code est plus complexe tout en restant abordable : on utilise ici des dégradés et des bords arrondis. Pour les animations, il s’agit là d’un problème plus difficile. Tout d’abord, seul Webkit (le moteur de Chrome et de Safari) prend en charge ici les animations en CSS3. Enfin, le développer utilise du JavaScript pour les animations complémentaires.

Le créativité pour l’utilisation du CSS3 semble donc de mise, mais nous devons garder à l’esprit les problèmes potentiels de compatibilités.

IV) Soyons concis !

Pour les personnes qui se sentent un peu moins artistes, un autre développeur en HTML5 nous propose un travail très talentueux, mais surtout extrêmement concis !

Le développeur de Revista Boda a su rapidement donner, en jonglant entre les <nav>, <header>, <footer>, <section>, <aside> et les plus traditionnels <div>, une forme classique mais jolie. N’oublions pas que le HTML5 a avant tout été conçu pour aider les développeurs à créer avec plus de rigueur, mais aussi de facilité, de beaux sites !

V) Manufacture de slider

Voilà un autre exemple d’expérimentation proposé par un dénommé Ceege : un slider en pur CSS3. Ainsi, alors que les sliders normaux sont en JavaScript (un exemple en jQuery ici), nous avons ici une toute autre version ! Fantastique, incroyable, vous pouvez désormais abandonner JavaScript… ou pas. Ainsi, Ceege analyse son travail, expose des failles bien connues comme les problèmes de compatibilité et d’autres plus particulières à son slider : les problèmes de fluidité et les difficultés de navigation.

Il conclut ainsi : “Just think of all the small things you can now use CSS3 transitions and animations for. Say goodbye to chunky JavaScript for simple things like fading link colors!”

VI) Conclusion

Nous avons donc passé en revue quelques sites qui utilisent le HTML5 et le CSS3. De nouvelles fonctionalités émergent mais leur utilisation reste encore limitée. Est-ce dû à la jeunesse de ces technologies ou existe-t-il des limites fondamentales et intrinsèques ? Les problèmes de compatibilité sont extrêment importants aujourd’hui mais devront disparaitre au fur et à mesure de l’évolution des navigateurs. Cependant les nouveaux langages du Web possèdent également d’autres limites, liées à leur conception même. On peut remplacer du JavaScript par du CSS3, mais le CSS3 n’a pas pour vocation de remplacer en totalité le JavaScript ! On présente parfois le HTML5 comme la technologie qui prendra la place du flash mais est-ce seulement possible ? Aux limites techniques, n’oublions pas non plus les limites humaines, que ce soit les habitudes du développeur ou les enjeux politiques et économiques. Si le HTML5 et le CSS3 ne sont peut-être pas les révolutions attendues, une chose est sûre: ils promettent de nombreuses améliorations qui fleurissent déjà sur le web !

 

Luc et Karlotcha

Licence Creative Commons

Ce(tte) oeuvre est mise à disposition selon les termes de la Licence Creative Commons Paternité – Pas d’Utilisation Commerciale – Pas de Modification 3.0 non transcrit.

HTML5, CSS3 et les navigateurs internet

I) Introduction aux problèmes de compatibilité avec HTML5 et CSS3

Bravo, vous venez de terminer votre magnifique site web en HTML5 et CSS3, vous avez laissé votre génie créatif sans limite s’exprimer, vos compétences techniques s’épanouir et vous allez éblouir le monde avec votre site qui ressemble à ça :

Mais voilà, chez certaines personnes, il ressemble à ça :

Mais que s’est-il passé ? La réponse est simple : il s’agit d’un problème de compatibilité. *musique inquiétante*

Votre site internet n’est en effet qu’un bout de code qu’un navigateur web va utiliser pour afficher un rendu. Mais voilà, tous les navigateurs web ne comprennent pas votre code de la même façon (certaines navigateurs ne vont même rien comprendre) et le rendu sera alors différent entre un navigateur et un autre. Et parce que HTML5 et CSS3 sont de nouvelles technologies encore en développement, tous les navigateurs ne sont pas égaux face à toutes les nouvelles fonctionnalités développées.

II) Enjeux pour le développeur que posent les incompatibilités

Les différents groupes qui développent ces navigateurs se livrent même une guerre sans merci à qui sera le plus performant. Les enjeux pour eux sont assez simples : imposer leur navigateur comme le meilleur, la référence. Car depuis que Internent Explorer n’est plus le leader incontesté, que Google veut être compétitif sur tous les plans, il y a beaucoup de compétition !

Pour le développeur web, il doit réfléchir à quel point il souhaite gérer les problèmes de compatibilité. S’il est l’unique utilisateur de son site, aucun soucis. S’il souhaite diffuser son site à un certain nombre de personnes, quel est leur profil ? Est-ce gênant si un utilisateur utilise un mauvais navigateur et n’arrive pas à afficher son site ? Certains développeurs peuvent ne pas y accorder beaucoup d’importance (et ils ont leurs raisons), mais d’autres peuvent vouloir la plus large compatibilité possible. Un site qui s’affiche mal peut être une très mauvaise publicité, les utilisateurs peuvent éprouver un fort mécontentement et le site peut même perdre tout son intérêt.

Côté développeur, gérer ces problèmes peut être particulièrement long. Il est donc préférable d’être bien informé sur la question : quels sont les problèmes existant et comment peut-on les gérer ?

Enfin, pour les simples utilisateurs, choisir un navigateur performant est la meilleure solution pour profiter au mieux du web.

III) Comparaison des différents navigateurs

HTML5 n’est pas un changement mineur, il nous propose un gros paquet de nouveautés qui doivent chacune être traitée par nos navigateurs. HTML5 est encore très jeune et tous nos navigateurs n’ont pas encore eu le temps de faire face à tout ce qu’apportait HTML5. Dans la section suivante nous allons détailler un peu ces différences en pointant l’absence de prise en compte de fonctionnalités par certains navigateurs. Nous verrons aussi que CSS3 pose aussi encore souvent des problèmes.

Dans ce diagramme, on peut voir des fonctionnalités qu’offre HTML5 comme les balises vidéo ou audio, les canvas, les APIs ou encore le mode offline. Ces fonctionnalités sont traitées par chaque navigateur différemment et on remarque qu’Internet Explorer ne s’en est pas encore trop soucié, puisqu’il est marqué ici qu’il ne prend en compte que 26% des possibilités contre 86% pour Chrome. En vérité, IE9 s’est un peu amélioré, néanmoins, il ne supporte toujours pas certains points importants du CSS3 comme les animations, les transformations comme les inclinations ou encore les bordures d’image. Par ailleurs, il ne traite pas encore la plupart des nouveaux types de formulaires du HTML5, ni la plupart des APIs javascript.

Ainsi on peut remarquer sur ce site de comparaison que le candidat en queue reste Internet Explorer.

IV) Différentes solutions

Vous l’avez bien compris, ça va être compliqué de satisfaire tout le monde avec votre magnifique design tout en CSS3 et votre site HTML5. Mais alors que faire ? Il existe des solutions simples permettant de résoudre un certain nombre de ces problèmes, ou tout du moins les amoindrir. Nous vous en proposons ici quelques unes :

- Pour le CSS, il est important de prévoir le cas où une propriété ne s’afficherait pas correctement. Grâce au système de cascade du CSS, il est possible de prévoir des styles qui seront afficher dans ces cas là. Par exemple, vous pouvez prévoir un fond monochrome simple à la place d’un dégradé.

- Internet Explorer possède des balises spéciales rien que pour lui permettant d’écrire du code.

<!–[if IE]>

Ce code ne sera lu que par Internet Explorer

<![endif]–>

Il est même possible de préciser la version d’Internet Explorer concernée :

<!–[if lte IE 8]> <![endif]–>

Vous aurez remarqué l’opérateur “lte”. Il en existe d’autres :

Opérateur Signification
! N’est pas égale
lt Inférieur strict
lte Inférieur ou égale
gt Supérieur strict
gte Supérieur ou égale

On a donc :

<!–[if lte IE 8]>

Code lu uniquement par IE de version inférieure ou égale à 8

<![endif]–>

- Utiliser la bibliothèque Javascript IE9-js que vous trouverez ici :

http://code.google.com/p/ie7-js/

Avec cette bibliothèque, d’anciennes versions de Internet Explorer se comporteront comme IE9.

- Utiliser la bibliothèque Javascript CSS3Pie que vous trouverez ici :

http://css3pie.com/

Avec CSS3Pie, Internet Explorer sera capable d’afficher des propriétés de CSS3 qu’il ne sait pas utiliser en temps normal. Le site est très bien documenté et la mise en place est assez simple. Attention toutefois car la bibliothèque est encore en développement et IE9 n’est pas encore parfaitement géré. Autrement dit, IE8 risque de mieux afficher votre site que IE9

- Un dernier outil : http://browsershots.org/

Ce site permettra de tester la compatibilité de votre site sous différents navigateurs, de quoi identifier un certain nombre de problèmes !

V) Conclusion

Les problèmes de compatibilités se posent donc à tous les niveaux que ce soit pour les navigateurs, les développeurs ou les simples “surfers“. Utiliser le HTML5 et le CSS3 n’est donc pas toujours la solution de faciliter. Bien sûr, il serait idiot de chercher à lutter contre le progrès mais dans notre cas, il n’est pas toujours évident d’utiliser toutes les nouvelles ressources scintillantes que propose hypothétiquement le web.

Luc et Karlotcha

Sources :

http://blog.websourcing.fr/infographie-html5-tout-savoir-compatibilite/
http://html5test.com/

Licence Creative Commons

Ce(tte) oeuvre est mise à disposition selon les termes de la Licence Creative Commons Paternité – Pas d’Utilisation Commerciale – Pas de Modification 3.0 non transcrit.

A la découverte du CSS3

Pour cette première entrée en matière, nous allons parler de CSS (Cascading Style Sheets). Il s’agit du langage permettant de mettre en forme le design d’un site web : les couleurs, la taille des différents composants du site et leur disposition ou encore la police. Néanmoins jusqu’à maintenant, il était nécessaire de recourir à des logiciels de traitement de l’image et intégrer des images au site dès que l’on désirait un peu plus de fantaisie car avec seulement du CSS, tout n’était que rectangles immobiles et couleurs unies. Alors attention les yeux car voilà le CSS3 !

Avertissement :

Nous ne détaillerons pas le code en lui-même dans cet article, mis sachez néanmoins ceci : le CSS3 n’étant pas encore standardisé, il existe des “préfixes vendeurs”, c’est-à-dire des lignes de codes spécifiques à chaque navigateur (commençant par un préfixe spécifique, d’où le terme). Ainsi, pour une seule propriété, vous devrez utiliser plusieurs lignes quasi-similaires pour être compatible sous la plupart des navigateurs :

background-image: linear-gradient(right top, rgb(79,113,135) 27%, rgb(66,158,158) 71%);
background-image: -o-linear-gradient(right top, rgb(79,113,135) 27%, rgb(66,158,158) 71%);
background-image: -moz-linear-gradient(right top, rgb(79,113,135) 27%, rgb(66,158,158) 71%);
background-image: -webkit-linear-gradient(right top, rgb(79,113,135) 27%, rgb(66,158,158) 71%);
background-image: -ms-linear-gradient(right top, rgb(79,113,135) 27%, rgb(66,158,158) 71%);

Nous reparlerons des problèmes de compatibilités mais pour l’instant nous nous contenterons des nouvelles possibilités offertes par le CSS3. Pour les différentes propriétés, nous vous proposerons également des applications web permettant de générer automatiquement du code.

    1.Boîtes & co

Des coins arrondis

Parce qu’une image vaut mieux que de longs discours : allez sur css3generator.com/ !

Choisissez “Border Radius” : vous avez le choix de personnaliser tous les 4 coins, ou de choisir le même CSS pour les 4 coins – exemple :

Des ombres pour les boîtes

Continuons sur css3generator.com/ ! Choisissez “Box Shadow” et essayez !

Plusieurs remarques :

  • inset permet de tourner l’ombre vers l’intérieur
  • “Horizontal Length” et “Vertical Length” sont des décalages vers la droite et vers le bas. Vous pouvez mettre un moins devant le paramètre pour aller vers la gauche et vers le haut.
  • Blur Radius et Spread permettent de contrôler l’apparence de l’ombre (le mieux est de tester différents paramètres pour mieux comprendre)
  • Vous remarquerez également le dernier paramètre intitulé “Opacity” – il s’agit d’une nouveauté apportée par le CSS3 qui permet de rendre plus ou moins transparente une couleur (0 = invisible, 1 = opaque). Vous pouvez utiliser cette propriété ailleurs bien entendu.

Les dégradés

Je vous propose deux sites : http://gradients.glrzad.com/ et http://www.colorzilla.com/gradient-editor/

Le premier est assez simple, le deuxième permet de réaliser des dégradés un peu plus complexes.

    2.Textes

Le CSS3 propose par ailleurs de nombreuses nouvelles fonctionnalités pour mettre en forme son texte de façon à ce qu’il soit plus agréable à lire. Le temps des pages interminables en Times New Roman est donc bientôt révolu.

En effet, les polices dites « exotiques » (polices non-standards) sont désormais permises par l’utilisation de la propriété “@font-face” du CSS3. Grâce à cette-dernière, on peut désormais charger sur le serveur notre police avec le reste de nos pages web, et ainsi l’appeler à tout moment pour qualifier notre morceau de texte exotique.

Comme on peut le remarquer ci-dessus, le CSS3 nous donne d’autres outils pour rendre notre écriture potentiellement plus fantaisiste ! Ici, il s’agit d’une utilisation très poussée de l’effet « shadow » (ou ombre, comme chacun sait). Dans cet exemple, l’auteur se sert effectivement de pas moins de 8 différentes ombres !

Mais le CSS3 ne s’arrête pas à la personnalisation de l’écriture, il permet aussi notamment d’agencer son texte de différentes manières ; et de recréer ainsi potentiellement des rubriques, comme dans les journaux. Cette technique s’appelle le « multi-column model ».

C’est donc un outil formidable pour lutter contre la monotonie des textes froids du web de nos ancêtres.

    3.Animations

C’est là où on rentre vraiment dans le Web 2.0 ! On ne peut plus imaginer de sites complètement statiques. Et pour tirer un trait définitif sur cette mollesse de certains sites Web, le CSS3 nous permet de construire des animations basées sur la technologie de « Transition » (prononcez : tranezicheune). Comme son nom l’indique, une transition nous fait passer « doucement » d’une ancienne valeur à une nouvelle. Ainsi, si on cherche à lâcher une balle, il suffit de dire à la balle d’où elle est lâchée, où elle s’arrêtera et de signaler qu’on veut une transition « douce » entre ces deux états. Précédemment, ce genre de comportement n’était possible qu’avec l’usage de JavaScript.

Les transitions ne permettent pas seulement des déplacements linéaires, puisqu’avec le CSS3 apparaît aussi les « Transformations » c’est-à-dire des déplacements géométriques comme des rotations. Les transformations sont statiques, elles peuvent donc afficher des images inclinées par exemple. Ainsi, si on effectue une transition sur une transformation, on peut obtenir une image qui tourne !

Mais les transitions ne s’arrêtent pas là, elles peuvent en effet s’appliquer sur tout type de valeur telle que l’opacité par exemple ou encore sur la couleur !

Tout ces outils génèrent des animations diverses qui n’ont presque plus de limites.

Conclusion

Vous l’aurez compris, le CSS3 offre un nombre impressionnant de nouvelles possibilités. Outre les problématiques esthétiques ( comment utiliser un dégradé de manière efficace ? ) se pose le problème de la compatibilité avec les navigateurs. Vous l’aurez en effet peut-être remarqué, il n’existe pas toujours tous les préfixes vendeurs pour certaines fonctionnalités. Ainsi, un joli design sous google chrome sera peut-être plus terne sous internet explorer…

Luc et Karlotcha

Sources :

http://www.midwinter-dg.com/

http://www.alsacreations.com/

Licence Creative Commons

Ce(tte) oeuvre est mise à disposition selon les termes de la Licence Creative Commons Paternité – Pas d’Utilisation Commerciale – Pas de Modification 3.0 non transcrit.

Le web continue d’évoluer !

Peu d’entre nous se rappellent encore des sites d’avant l’an 2000 (voir ci-dessous), mais il est de notoriété publique que le Web a fortement changé depuis. Les sites web ont peu à peu vu apparaître des dégradés de couleurs, des nouvelles polices de caractères, des effets de transparence et même des objets dynamiques. Pour autant le web a-t-il atteint sa forme ultime ?

Face à l’invasion d’erreurs de syntaxe des sites web de nos jours et au manque d’interopérabilité du web avec les technologies montantes comme les smartphones, les i-pads et autres tablet-pcs, les équipes du WHATWG (Web Hypertext Application Technology Working Group) et du W3C (World Wide Web Consortium) ont développé deux nouveaux langages : le HTML5 et le CSS3. Leur mission première est d’aider à la construction d’un web plus propre, mais ils nous donnent aussi de bien nombreuses nouvelles possibilités.Exploitation de fonctionnalités dynamiques du HTML5Je me dois de vous faire quelques rappels avant de vous présenter plus en détail les enjeux de cette veille technologique. Le HTML5 (HyperText Markup Language 5) est le descendant direct du HTML 4 et du XHTML 1.1. Il s’agit avant tout d’un langage de balisage permettant la représentation de pages web. Quant au CSS3 (Cascading Style Sheets 3), il constitue la troisième couche successive appliquée au langage de feuilles de style qui est à l’origine de la mise en page et du style des pages web.

Les enjeux de cette veille ne se résumeront pas au simple détail du fonctionnement ou des fonctionnalités de ces langages. Nous verrons les conséquences, bonnes ou mauvaises, de ces nouvelles arrivées dans le monde du web.

  • En effet, par exemple, la rétrocompatibilité est-elle vraiment assurée ? Elle nous permettrait notamment de reprendre un vieux site et de lui ajouter des fonctionnalités nouvelles.
  • Par ailleurs, les navigateurs web permettent-ils tous d’ouvrir des sites décrits dans ces nouveaux langages ? Il est intéressant de savoir que certains surfeurs ne seront ainsi pas capables d’ouvrir des sites en HTML5.
  • Et où en sont finalement les développers dans l’écriture leur charte ? Ont-ils réussi à concevoir un langage sans ambiguïté ? Nous savons qu’ils n’ont pas encore fini d’établir les spécifications liées au HTML5 et au CSS3, nous suivrons donc avec attention ces évolutions.

Cette veille technologique s’effectuera en partenariat avec l’Ecole Centrale de Lyon qui sera représentée par Daniel Muller.

Sources : http://daftpunk.themaninblue.com/; http://www.html5rocks.com/en/;  http://www.craigslist.com/