-
Mozilla sort Firefox 4 beta 2
Mozilla a mis à disposition du public la deuxième beta de Firefox 4.
Cette nouvelle version du navigateur est disponible en 24 langues et affiche désormais les tabs au-dessus de la barre d'adresse par défaut sous Windows et Mac OS.
Niveau développement web, les transitions CSS font leur entrée (préfixée de -moz-), le moteur javascript et l'interface sont encore plus rapides et le support de WebGL est complet (mais désactivé par défaut).
Firefox 4 beta 2 introduit de plus le support du format vidéo HD WebM récemment mis à la disposition du public par Google, un nouveau parser pour HTML5, l'introduction de l'API HTML History qui permet d'ajouter des pages à l'historique du navigateur et permet l'utilisation des WebSockets.
Une liste complète des changements est disponible ici.
Vous pouvez télécharger la dernière beta de Firefox 4 à cette adresse ou directement sur le FTP de Mozilla.
-
Rafraîchissement d'été
Pour cet été, nous vous avons concocté un petit rafraîchissement graphique, qui sera actif sur l'ensemble du site Alsacreations.com.
Il s'agit principalement :
- d'alléger la structure du site (réduction d'un tiers du poids des pages)
- d'améliorer la lisibilité du menu de navigation
- de permettre d'autres optimisations dans le futur, notamment en version mobile
Nous espérons que ce nouvel habillage (v3.1) vous plaira et facilitera l'accès au contenu.
-
Utiliser CSS3 aujourd'hui, outils et ressources
Bien que les spécifications CSS 3 soient encore dans un état embryonnaire, il devient acquis qu'un certain nombre de ses composantes sont déjà exploitables en production sur les navigateurs actuels, moyennant quelque gymnastique pour notre attachant boulet à tous qu'est Internet Explorer.
Le contexte actuel est pour le moins excitant pour nous autres webdesigners, puisque l'on peut enfin s'évader d'une norme CSS2.1 vieille de plus de 10 ans ! Nous nous trouvons dans une période clé, et de grands changements vont bientôt s'opérer dans notre façon de travailler au quotidien. Cependant Internet Explorer modère cet engouement puisque seule sa version 9 commence à supporter ces nouveautés, version encore au stade beta non utilisable par le grand public.
De multiples ressources CSS3 pour déjouer les faiblesses d'IE voient le jour presque quotidiennement, notamment par l'ajout de JavaScript. On en vient à soupeser les avantages et inconvénients de chacune de ces solutions : d'un côté la rapidité d'intégration; de l'autre une baisse de performance non négligeable sur ce navigateur. Selon le contexte, le public ciblé ou nos affinités, la balance ne penche pas toujours du même côté.
Voyons quelques uns de ces outils en ligne en vogue actuellement :
CSS3pie.com
Dans la jungle des outils permettant d'émuler CSS3 sur Internet Explorer, CSS3Pie semble être le plus robuste aujourd'hui et bénéficie d'une communauté et d'un compte Twitter plutôt actifs.
Via un fichier .HTC, CSS3Pie permet d'appliquer un certain nombre de propriétés CSS3 intéressantes : border-radius, box-shadow, border-image, backgrounds multiples et dégradés linéaires. Très prometteur.
CSS3please.com
CSS3Please n'est rien d'autre qu'une excellente démonstration en direct et interactive de différentes propriétés CSS3 (arrondis, ombrages, dégradés, transparence, rotation, transition, font-face)
Vous pouvez modifier les options et valeurs de la page, elles s'appliqueront instantanément sur la boîte d'exemple et l'ensemble des syntaxes (-moz-, -webkit-, et filtres IE) est proposée.
CSS3generator.com
Dans la même veine que CSS3Please, CSS3Generator est un outil de génération automatique de syntaxes CSS dont le résultat est affiché en direct à l'écran.
Certaines fonctionnalités telles que les colonnes multiples, resize, box-sizing ou outline le démarquent de ses concurrents.
IE-css3.js
Toutes les ressources ne se limitent pas à rendre utilisable les propriétés CSS3, certaines telles que IE-CSS3.js permettent d'émuler les différents sélecteurs (:first-child, :last-child, :nth-child, :focus, :target,…) CSS3 sur IE6-IE8 via JavaScript.
Sous forme de plugin ajouté à un framework existant (jQuery, Mootools, Prototype,…), cet outil nous semble bien abouti et robuste.
Font-face generator
Exclusivement dédié à l'intégration de polices non standards sur tous les navigateurs, Font-face generator permet non seulement de convertir un fichier de fonte en plusieurs formats (.eot, .ttf, .woff) mais offre également une page de démonstration du résultat obtenu. Et ça marche !
Gradients generator
Gradients generator vous facilite la création de vos dégradés linéaires ou radiaux à l'aide d'un environnement où se croisent pipette, plage de couleurs, options de dégradés, code obtenu et résultat visuel.
N'oublions pas ces deux autres sites de ressources et d'information :
CSS3.info
CSS3.info est site d'information sur les spécifications CSS3 pertinent et régulièrement alimenté.
Vous y trouverez les dernières actualités concernant cette norme et les navigateurs, quelques tutoriels ainsi que l'avancement des travaux sur les différentes propriétés et sélecteurs.
Findmebyip.com
FindMeByIP propose quelques tableaux évocateurs du support actuel des navigateurs concernant les diverses propriétés CSS3 et les sélecteurs.
On y constate généralement que le retard pris par Internet Explorer est véritablement significatif et qu'il demeure complètement isolé à l'heure actuelle.
Et aussi…
-
Activer l'impression des éléments HTML5 sous Internet Explorer
Internet Explorer (versions 6,7,8) fait face à un problème de gestion de l'impression des balises HTML5, car il ne prend pas en compte les styles pour le média print pour ces balises (même si vous les avez déclarées dans le DOM pour les afficher pour le média screen).
La seule solution actuellement est d'inclure un fichier JavaScript qui fixe ce problème : IE Print Protector. Celui-ci remplace temporairement les éléments HTML par des autres éléments neutres (comme div et span) avant l'impression, puis les restaure après, tout en conservant les styles associés.
Notez que html5shiv intègre désormais également IE Print Protector. Pour l'utiliser, vous pouvez inclure ce bout de code dans l'élément head avant les appels aux feuilles de styles CSS.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Article complété par dew
-
Simulez votre site sur téléphones mobiles avec ProtoFluid
Du fait de la pluralité des plateformes et des différences des moteurs de rendus, il n'est pas toujours aisé de tester son site web sur le media mobile. Sans compter le coût d'acquisition du matériel. La plupart des émulateurs en ligne se contentent malheureusement de redimensionner la page sans tenir compte des spécificités inhérentes à chaque terminal : iphonetester.com, l'extension Webdeveloper, viewlike.us, resizemybrowser,…
En dehors de l'installation des divers SDK officiels des constructeurs ou de l'excellente version d'Opera Mobile installable sur un système d'exploitation classique (Windows, Mac OS X...), point de salut pour visualiser ses pages dans un environnement proche des conditions réelles.
ProtoFluid est une application en ligne permettant de simuler au mieux l'affichage de votre site web ou d'une url locale sur divers terminaux mobiles :
- Motorola Droid
- iPhone/iPod
- iPad
- Google Nexus One
Simple et efficace pour un test rapide
Il suffit de renseigner l'URL à visionner ainsi que la plate-forme désirée, et sa résolution si vous souhaitez la modifier. Le résultat apparaît dans une fenêtre modale (lightbox). Il vous est ensuite possible de modifier l'orientation (portrait ou paysage) puis de rafraîchir votre résultat.
Pour l'avoir testé sur quelques uns de nos sites web dont les feuilles de styles prennent en charge le média mobile (meta tag "viewport", CSS media queries), tels que alsacreations.fr et ie7nomore.com, je ne peux qu'en conclure que l'outil se rapproche beaucoup plus du résultat escompté que ses congénères, même si le rendu reste tributaire du navigateur utilisé pour consulter le site ProtoFluid car la simulation ne se fait qu'au travers d'un élément iframe et de JavaScript. Il faudra donc éviter d'y accéder avec Internet Explorer.
Viewport et Media Queries CSS3
Il est possible de définir la résolution du terminal à l'aide du meta tag viewport reconnu par Safari, Webkit et Opera à l'heure actuelle. Ce meta tag est généralement un bon point de départ pour adapter harmonieusement un design sur le média mobile. ProtoFluid prend en compte les informations véhiculées via ce meta tag.
Les Media Queries sont interprétées sur les navigateurs les connaissant, accompagnées des propriétés width, max-width, max-device-width ainsi que orientation (portrait ou landscape).
Par contre, dans le cas ou vous testeriez sur un écran d'ordinateur classique, vous devrez accompagner votre règle media query max-device-width par un complément max-width sous peine de ne pas être pris en compte puisque votre écran de bureau ne peut pas être considéré comme un périphérique d'affichage de taille réduite :
@media only screen and (max-device-width:640px), only screen and (max-width:640px) {
body {width: auto}
}
Le marché du téléphone intelligent est en plein boom et chaque jour naissent de nouvelles ressources et outils pratiques pour faciliter le développement ou les tests sur le média mobile. ProtoFluid n'est pas parfait mais une nouvelle ressource verra peut-être le jour pour des simulations encore plus pratiques et fidèles.
L'équipe de développement, Optic Swerve, est en train de plancher sur une nouvelle version (1.1) de leur outil, vous pouvez suivre l'évolution du projet sur leur compte Twitter.
Limites de l'outil
Comme tout outil de ce type, ProtoFluid ne peut que "deviner" comment va se comporter le moteur de rendu final et s'y adapter à partir de votre navigateur de test. Cela signifie que certaines technologies présentes sur votre poste de bureau (flash par exemple) vont apparaître sur la simulation iPhone, ce qui ne risque pas d'arriver de sitôt sur un véritable terminal d'Apple.
De même, certaines règles CSS telles que le positionnement fixé, normalement désactivé sur de nombreux mobiles, vont tout de même être exécuté sur la simulation.
Sachez tenir compte de ces incongruités dans vos tests.
Liens connexes
-
Slideshow en CSS3
Présentation et compatibilité
Cette partie du tutoriel va légèrement reprendre le contenu d'une publication d'Antoine Cailliau, Tutoriel sur les Transitions CSS3, que je vous conseille de lire au préalable.
Ce tutoriel repose sur les spécifications du W3C concernant la pseudo-classe target du module "Selectors Level 3 (:target)"
et sur le module "CSS Animations Module Level 3" actuellement en Working Draft.
La pseudo-classe target
Beaucoup de liens d'un site web renvoient sur des parties précises d'une page par l'intermédiaire d'ancres. La navigation devient alors beaucoup plus aisée et le passage d'une partie d'une page à une autre est facilité. Nous rencontrons ceci assez souvent dans les F.A.Q. d'un site internet, avec un sommaire de questions, puis plus bas toutes les réponses correspondantes.
Voici la syntaxe d'un lien renvoyant sur une ancre.
<a href="#faire-lien">Comment faire un lien</a>
Ce lien cible un élément (l'ancre) dont l'id est faire-lien, en voici un exemple :
<div id="faire-lien" class="blocReponse">
<p class="question">Comment faire un lien ?</p>
<p class="reponse">La réponse à la question...</p>
</div>
Une fois le clic effectué sur le lien l'élément ciblé peut subir des changements de styles grâce à la pseudo-classe target.
.blocReponse:target {
background: #DDD;
border: 1px solid #000;
}
Voir l'exemple
Vous remarquerez l'utilisation de la classe .blocReponse dans le CSS en lieu et place de l'id correspondant #faire-lien. Cela simplifie l'utilisation de cette pseudo-classe si, pour poursuivre sur notre exemple, notre F.A.Q. devait posséder une cinquantaine de questions !
Remarque : la pseudo-classe target est actuellement prise en charge par toutes les dernières versions des navigateurs modernes, sauf Internet Explorer 8 et ses versions antérieures.
Les animations
Les spécifications relatives aux transitions et animations sont "CSS3 Transitions" et "CSS Animations Module Level 3".
Pour simplifier les lignes de code qui suivront je ne préciserai aucun des suffixes nécessaires à la prise en charge des animations en CSS par les navigateurs. Je vous rappelle que pour la prise en charge complète (actuelle et à venir) de ces propriétés, il serait idéal d'écrire :
element {
-webkit-transition: all 1s; /* pour Webkit */
-o-transition: all 1s; /* pour Opera 10.5+ */
-moz-transition: all 1s; /* pour Firefox 3.7 */
transition: all 1s; /* pour tous (futur...) */
}
Remarque : avec les animations en CSS nous commençons déjà à restreindre la liste des navigateurs compatibles, puisque seuls Chrome (Webkit), Safari (Webkit) et Opera prennent en charge cette fonctionnalité. Firefox 3.7 devrait rejoindre d'ici peu cette petite liste.
Passons à la pratique !
-
Opensearch pour ajouter le moteur de recherche à votre navigateur
Vous pouvez désormais ajouter le moteur de recherche d'Alsacreations à votre navigateur si celui-ci est équipé d'une zone adaptée. Il vous suffit de cliquer sur la liste déroulante des moteurs intégrés et de choisir "Ajouter". Vous pourrez le retirer par la suite si vous le souhaitez dans les paramètres (sous Firefox "gérer les moteurs de recherche").
Les navigateurs compatibles avec Opensearch sont :
- Mozilla Firefox 2+
- Google Chrome
- Internet Explorer 7+
Malheureusement Opera ne l'exploite pas encore, malgré la présence d'un champ de recherche dans son interface. OpenSearch a initialement été proposé par A9 (Amazon).
Comment cela fonctionne-t-il en pratique ?
Pour ajouter une telle fonctionnalité sur votre site, il vous suffira d'éditer deux fichiers.
La description XML
Premièrement il faut créer un fichier XML tel que opensearch.xml, placé par exemple à la racine de votre site :
<?xml version="1.0" encoding="UTF-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Alsacreations</ShortName>
<Description>Recherche dans les ressources</Description>
<Image>favicon.png</Image>
<Language>fr</Language>
<InputEncoding>UTF-8</InputEncoding>
<Url type="text/html" template="http://www.alsacreations.com/search/tag/{searchTerms}"/>
</OpenSearchDescription>
Celui-ci est relativement simple à comprendre. Des exemples plus complets avec d'autres balises sont disponibles sur le site Opensearch.org Specifications.
- OpenSearchDescription
- Il s'agit de l'élément racine, de namespace
http://a9.com/-/spec/opensearch/1.1/ - ShortName
- Le titre de votre moteur/site de recherche
- Description
- La description un peu plus longue.
- Url
- L'adresse à interroger, dont l'attribut
template définit le masque, notamment via {searchTerms} qui sera remplacé par les mots entrés dans le champ d de recherche (et échappés, de la même façon que urlencode en PHP). - Image
- L'url vers l'image favicon du site.
- Language
- La langue d'après la spécification XML.
- InputEncoding
- Pour spécifier l'encodage des valeurs à utiliser, par exemple UTF-8.
Le lien avec link
Deuxièmement, y faire référence dans le code source du site, section head, grâce à l'élément link avec les attributs (rel, type, title) appropriés et surtout l'URL vers le fichier XML dans l'attribut href :
<link rel="search" type="application/opensearchdescription+xml" title="Alsacreations" href="http://www.alsacreations.com/opensearch.xml" />
Note : Le titre indiqué dans la balise link doit correspondre au contenu de la balise ShortName du fichier XML.
Bien entendu cette spécification va au-delà du simple ajout au moteur et définit d'autres fonctionnalités d'interrogation et de réponses, avec une présentation des résultats et des agrégateurs.
-
Opera 10.6 en version finale
La nouvelle version 10.6 d'Opera est disponible depuis aujourd'hui en version finale. Et, contrairement à la 10.5, l'ensemble des plateformes est servi en même temps.
Parmi les nouveautés, on distingue :
- l'apparition du moteur de recherche Bing dans le Speed Dial (cela dit, comme il est indiqué dans le billet Bing in Opera, Google demeure le moteur de recherche par défaut d'Opera),
- la suggestion de recherche,
- la géolocalisation (la démonstration Live Map en apporte un exemple, avec la possibilité de refuser de partager sa localisation),
- le support du format WebM pour la vidéo (une démonstration est disponible),
- la poursuite du support du HTML 5,
- un moteur plus rapide (jusqu'à 50 % plus rapide que celui de la version précédente).
Pour en savoir plus
-
Chrome met l'accent sur l'accessibilité grâce aux extensions
Le projet Chromium qui sert de base open-source au navigateur Google Chrome souhaite mettre en avant les possibilités pour améliorer l'accessibilité du web à ses utilisateurs. Ce projet en lui-même définit déjà des pistes générales pour la prise en charge de la navigation au clavier, de l'affichage des polices, du support de WAI-ARIA et des synthèses vocales (voir Chromium Projects : Accessibility).
Le répertoire des plug-ins comporte déjà une rubrique pour les extensions concernant l'accessibilité et qui répondent à des besoins de facilité de navigation avec les périphériques utilisateur, de perception visuelle, ou de (re)mise en forme du contenu.
Le Developer's Guide de Code Labs, section Accessibility (a11y) fait maintenant mention de quelques informations supplémentaires pour l'implémentation des plug-ins en terme d'accessibilité, et des bonnes pratiques pour la navigation clavier, le contraste et l'agrandissement du texte. La nouvelle extension ChromeVis a également été publiée en open-source ; celle-ci permet d'améliorer dynamiquement la lisibilité du texte d'une page.
Ne manquez pas la vidéo décrivant ces quelques idées :
Chromium/Chrome se prononce donc davantage en faveur d'un web accessible, et tente de redorer son blason dans ce domaine qui montre de grandes lacunes, notamment par le support des lecteurs d'écran (aucune compatibilité de la part de JAWS, Window-Eyes et NVDA).
-
Inclure la librairie jQuery de manière optimisée
jQuery est désormais une librairie JavaScript bien connue, permettant en quelques lignes de code de dynamiser un site web, de créer de petites animations, des interactions avec les formulaires, de programmer des appels Ajax. Voici en détails quelques possibilités d'intégration à votre site, afin de minimiser l'impact sur les performances et le temps de chargement.
Appel classique à la librairie (fichier téléchargé)
De la manière la plus basique, il est vous est proposé sur le site jQuery.com de télécharger le fichier - en affichant son code source - et de le placer sur votre site, par exemple dans jquery.js ou jquery-1.4.2.min.js.
Fichier et compression
Vous récupérerez ainsi une version "minifiée", c'est à dire compressée jusqu'à un certain niveau par un algorithme supprimant espace et commentaires, mais rendant peu lisible la déclaration des fonctions. Ceci n'est pas bien grave car il s'agit la plupart du temps de ne pas modifier cette librairie mais de la combiner à nos propres fonctions, déclarées de façon externe.
Voyez les différences entre la version non minifiée et la version minifiée. Sachez qu'il est possible de faire de même pour vos propres scripts grâce à Google Closure Compiler ou encore YUI Compressor de Yahoo.
Il vous est aussi possible de délivrer ce fichier re-compressé au format gzip pour gagner encore en taille, c'est à dire 24 Ko au total au lieu de 72 Ko. Pour ceci, consultez le tutoriel correspondant : Compression des pages web avec Gzip ou Deflate en HTTP.
Performances au chargement
Pour des questions de performance, Google Code et Yahoo Developer Network : Exceptional Performance recommandent :
- de placer les appels aux librairies en fin de page avant
</body> - de placer les appels aux feuilles de style CSS avant, dans la section
<head> grâce au tag link - de combiner au maximum les fichiers JavaScript/CSS, de les compresser/minifier et de les externaliser (c'est à dire les placer chacun dans un fichier externe à la page et non en ligne avec toutes leurs instructions dans le code html)
Vous obtiendrez ainsi :
<!doctype html>
<html>
<head>
<title>Titre de la page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
...
<script src="jquery.js"></script>
<script src="mon_script.js"></script>
</body>
</html>
Depuis Google AJAX Librairies API
Google propose une API dédiée au chargement de différentes librairies, . L'avantage étant de bénéficier d'un hébergement externe et rapide (mais soumis la plupart du temps à une requête HTTP+DNS supplémentaire) avec un fichier délivré en gzip sans avoir à configurer votre serveur. Il vous faudra néanmoins vous inscrire - gratuitement - pour obtenir une clé API AJAX Search.
<script type="text/javascript" src="http://www.google.com/jsapi?key=VOTRE_CLE"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
Le premier argument étant le nom de la librairie, et le deuxième sa version (si vous spécifiez "1.4", vous obtiendrez la dernière version de la branche "1.4.x", avec "1" aussi, etc). Vous pouvez également directement charger ce fichier en vous passant de l'appel à l'API JS google.load :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
D'autres librairies sont disponibles (MooTools, Dojo, SWFObject, YUI, Chrome Frame, WebFont), pour ceci consultez la documentation. Reprenons notre exemple, sans avoir besoin d'héberger le fichier jquery.js :
<!doctype html>
<html>
<head>
<title>Titre de la page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="mon_script.js"></script>
</body>
</html>
Votre premier script jQuery
Bien entendu il vous faudra placer votre propre fichiers JavaScript ou vos déclarations à la suite de cet appel, dans mon_script.js. Ceci est la plupart du temps valable pour les autres librairies JavaScript.
Pour ceci vous avez deux possibilités :
- placer une fonction directement dans le code de la page à l'aide de la balise
<script> mais sans fichier externe (sans attribut src). Le seul avantage de cette méthode est de supprimer une requête HTTP, mais cela ajoute du contenu à votre code HTML qui ne sera pas (ou plutôt rarement) mis en cache.
- placer vos instructions dans un fichier externe (*.js), plus facile à maintenir et à inclure sur un groupe de pages de votre site, avec le petit inconvénient d'effectuer une requête HTTP en plus.
Utilisons la deuxième solution pour placer notre script jQuery dans mon_script.js. Dans la majorité des cas, nous souhaiterons exécuter le code au chargement de la page, grâce à la fonction ready() appliquée à l'objet document. C'est-à-dire lorsque les objets de la page seront prêts à être manipulés par JavaScript.
$(document).ready(function() {
// Votre code ici
});
La fonction $() est la fonction magique de jQuery. Celle-ci permet de cibler les éléments grâce aux sélecteurs, de déclarer des gestionnaires d'événements, d'utiliser les autres fonctions de la librairie, il s'agit en réalité d'un alias sur l'objet jQuery lui-même.
Tranchons dans le gras
Le but de cet astuce étant juste de faire appel minimaliste à jQuery, nous nous contenterons pour cette démonstration de masquer un élément <div id="masque">, puis de le révéler au clic sur un lien <a id="afficher">Afficher l'élément</a>.
Toujours dans la déclaration $(document).ready(function() {, nous placerons les instructions jQuery de notre script :
$(document).ready(function() {
// Dès le chargement on masque l'élément portant l'id #masque
// grâce à la fonction hide() de jQuery
$("#masque").hide();
// On déclare un gestionnaire d'événement 'click' sur un lien
// pour afficher l'élément précédemment masqué
$("a#afficher").click(function() {
// La fonction click() appliquée à notre sélecteur $("a#afficher")
// prend en argument une fonction anonyme (sans nom) contenant
// le reste des instructions :
$("#masque").show("fast");
// L'argument "fast" est facultatif mais nous permet
// d'afficher l'élément avec une petite animation
return false;
// On retourne 'false' pour prévenir l'exécution du lien
// c'est à dire pour éviter au navigateur de changer de
// page en suivant son attribut href
});
// Faites bien attention à la syntaxe et à l'imbrication des
// parenthèses et accolades
});
Démo
Consultez la démonstration pour explorer le code source :
Voici donc une brève introduction à l'inclusion de jQuery sur votre site. N'hésitez pas à consulter la documentation de jQuery pour faire connaissance avec les autres fonctions et sélecteurs possibles ou à utiliser la section JavaScript du forum.
