Alsacreations.com - Apprendre - Archives (juin 2011)
Les dernières ressources publiées sur Alsacreations.com
Certains sites affichent une (grande) image de fond qui s'adapte à toutes les dimensions de la fenêtre du navigateur, proportionnellement, sans la déformer. La réalisation de ce genre de prouesse n'est pas si évidente techniquement, contrairement à ce que l'on pourrait croire de prime abord.
Comment fait-on ? Nous allons présenter ici deux méthodes parmi celles qui sont possibles : une entièrement en CSS , une autre basée sur jQuery.
Exemples
Pour avoir un aperçu de ce que l'on veut obtenir, voici quelques exemples utilisant ce principe :
Le point commun de tous ces sites est la mise en avant de leur background : il est fixe et c'est la pièce maîtresse de leur design. Le choix de celui-ci est donc particulièrement réfléchi et soigné.
Le principe
Comme vous venez de le remarquer, ce n'est pas qu'une simple image de fond qui s'adapte à la fenêtre : il n'y a aucune déformation, le ratio est toujours conservé et lorsque la fenêtre est vraiment étroite le fond est recadré.
On est donc loin de ce résultat simpliste qui se contente d'étirer l'image à 100% de son conteneur.
Préparation de l'image de fond
L'image de fond doit respecter quelques règles basiques :
- Format rectangulaire pour la plupart des écrans : 2000px * 1300px (par exemple)
- Le poids de l'image doit être optimisé pour ne pas ralentir considérablement le chargement
Sous Photoshop, après avoir créé votre image de fond (photo, création graphique…) rendez-vous dans "Fichier" -> "Enregistrer pour le web…".
Dans la fenêtre qui vient d'apparaître, vous trouverez un curseur qui permet de faire varier la qualité de l'image et donc son poids final. A vous de trouver le bon compromis qualité/poids.
Après enregistrement, l'image est prête à l'emploi !
La méthode CSS3
Le code HTML
Rien de plus épuré : c'est une page html totalement vierge reliée à une feuille de style CSS.
Fond extensible - version CSS
...
Le code CSS
Nous allons simplement appliquer une image de fond sur la balise (ou
au choix), retirer les marges, et utiliser la propriété CSS3background-size et sa valeur cover. C'est tout !
html {
margin:0;
padding:0;
background: url(image/bg.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
}
Avantages :
- Full CSS : séparation du fond de la forme complète
- Extrêmement simple à mettre en place
Inconvénient :
- Ne fonctionne pas sur Internet Explorer <= 8 et les anciennes versions des navigateurs tels que Firefox 3.0.
La méthode jQuery
Le code HTML
Nous allons partir du même document que la méthode précédente, en y ajoutant ces élements :
-
Un élément
- Une feuille de style différente
-
deux éléments
pour intégrer jQuery et le script de gestion du background
Fond extensible - version JQUERY
Le code CSS
Nous "fixons" et plaçons l'image pour qu'elle ne soit pas perturbée par le scroll (défilement).
img.superbg {
position:fixed;
top:0;
left:0;
z-index:-1;
}Le code jQuery
Tout est en place pour que jQuery puisse s'amuser avec cette image. Dans le principe, nous allons créer une fonction qui va calculer le ratio de la fenêtre du navigateur pour redimensionner l'image. Cette fonction sera appelée dès le chargement de la page et à chaque redimensionnement de la fenêtre.
function redimensionnement(){
var $image = $('img.superbg');
var image_width = $image.width();
var image_height = $image.height();
var over = image_width / image_height;
var under = image_height / image_width;
var body_width = $(window).width();
var body_height = $(window).height();
if (body_width / body_height >= over) {
$image.css({
'width': body_width + 'px',
'height': Math.ceil(under * body_width) + 'px',
'left': '0px',
'top': Math.abs((under * body_width) - body_height) / -2 + 'px'
});
}
else {
$image.css({
'width': Math.ceil(over * body_height) + 'px',
'height': body_height + 'px',
'top': '0px',
'left': Math.abs((over * body_height) - body_width) / -2 + 'px'
});
}
}
$(document).ready(function(){
// Au chargement initial
redimensionnement();
// En cas de redimensionnement de la fenêtre
$(window).resize(function(){
redimensionnement();
});
});
Avantage :
- Fonctionne partout, pour peu que JavaScript soit activé.
Inconvénients :
- Alourdit encore plus le poids de la page (chargement de la librairie jQuery)
Conclusion
Cette méthode peut apporter une touche plutôt sympa dans votre design. N'hésitez pas à faire un tour sur cet article qui propose des méthodes supplémentaires.
Vous venez de concevoir votre maquette graphique (en étant passé, on vous le souhaite, par les étapes de Zoning et de Grille) ou devez intégrer celle de votre client et vous ne savez pas par quoi commencer ?
Vous trouverez dans cet article une introduction schématique reprenant le cheminement de l'intégration et l'interprétation d'un site web, une définition des langages HTML et CSS, ainsi que les outils pour bien développer, et un descriptif des différents navigateurs web présents sur le marché.
[...]
Mais pourquoi ce bloc ne se place-t-il pas comme je lui demande ? Pourquoi ce texte est bleu alors que je lui demande d’être vert ? Vous en avez assez de faire d’innombrables allers-retours entre votre navigateur et votre éditeur de code pour trouver ce qui cloche ? N’attendez plus, utilisez un outil de débogage !
Chaque développeur a son navigateur fétiche et chaque navigateur possède son outil de débogage. La performance de certains outils peut cependant amener certains développeurs à choisir leur navigateur de développement en fonction de l’outil de débogage associé. Pour cet article, nous nous concentrerons essentiellement sur Firebug pour Firefox qui est certainement le plus connu et le plus utilisé à ce jour.
Firebug est un des nombreux plugins disponibles pour Firefox. Il n’est donc pas installé par défaut sur le navigateur mais il est téléchargeable à sur www.getfirebug.com
Une fois installé, une petite icône apparait en bas à droite de votre fenêtre pour les anciennes versions de Firefox ou bien en haut à droite pour les récentes :
Pour lancer Firebug, il suffit de cliquer dessus, ou d'utiliser le raccourci F12.
L'affichage par défaut de l'outil nous est proposé dans un volet occupant le bas de la page. Ce volet est divisé en deux, la partie de gauche représente la structure HTML de la page active et propose différents onglets (Console, HTML, CSS, Script, etc.), la partie de droite présente le code CSS associé à un élément sélectionné dans le DOM et propose lui aussi différents onglets (Calculé, Apparence, etc.)
Cet affichage en volet peut parfois gêner la lecture du document, Firebug propose un mode de visualisation par fenêtre, il vous est donc possible de détacher ce volet pour le rendre flottant en cliquant sur le petit bouton du milieu, en haut à droite du volet.
Firebug, pour quoi faire ?
L’inspection du code HTML :
Puisque rien ne vaut un bon exemple, je vous propose de découvrir l’outil au travers l’étude du « cas Alsacréations » (alsacreations.com) :
Dans un premier temps, Firebug permet d’inspecter le code source d’une page en surlignant la partie de la page concernant par le bout de code sur lequel on place la souris :
On voit donc ici qu’un calque bleu translucide permet de repérer sur la page l'élément div ayant pour identifiant « sous-menu ». Le repérage dans l’architecture d’un site devient chose aisée.
Le débogage CSS :
Dans le même temps, on s’aperçoit que la fenêtre de droite nous permet de voir le code CSS associé à l’élément que l’on est en train d’inspecter. Et là où Firebug devient un outil fabuleux, c’est qu’il est possible de modifier, ajouter ou supprimer une propriété CSS à la volée et d’en voir la répercussion immédiate sur le site ! Plus besoin de retourner x fois dans votre éditeur de code pour ajuster un élément au pixel près !
Étudions, par exemple le sous-menu d’Alsacréations :
Nous voyons qu’il s’agit, fort logiquement, d’une liste d’ul li. Maintenant, en cliquant sur un des éléments li de class « item », nous pouvons modifier ses propriétés CSS en cliquant sur la valeur de celles-ci et en utilisant les flèches directionnelles du clavier. Modifions par exemple, la valeur initiale de 9px du margin-left. Miracle ! Le menu s’adapte automatiquement à sa nouvelle valeur !
Attention, Firebug n’enregistre pas les modifications dans votre feuille de style. Il vous faut quand même aller reporter la nouvelle valeur dans votre éditeur de code pour qu’elle soit prise en compte.
Il est également possible de désactiver une propriété, comme ici le background :
Ou d’ajouter une propriété en faisant un clic-droit puis « nouvelle propriété », ou en double-cliquant dans l'espace blanc à droite de n'importe quelle déclaration.
Il est, par exemple, aussi envisageable de cacher le menu en ajoutant un display: none.
Cette icône (située en haut à gauche dans la fenêtre de Firebug) peut être très pratique pour inspecter un élément perdu au milieu de la page.
Il suffit de cliquer dessus puis de cliquer ensuite sur l’élément voulu dans la page.
Le débogage Javascript :
Nous ne nous étendrons pas sur le débogage Javascript qui pourrait faire l’objet à lui tout seul d’un tutoriel complet, mais sachez que Firebug possède toutes les fonctionnalités nécessaires pour déboguer vos scripts. L'onglet Console comporte non seulement un relevé des erreurs et avertissements, un outil Profiler et surtout une zone d'entrée permettant la saisie de code exécutable en direct.
L’audit de performance :
Autre fonctionnalité intéressante dans Firebug : l’onglet « Réseau » qui permet de voir l’ensemble des requêtes envoyées au serveur et de cerner rapidement les éléments qui sont susceptible de ralentir votre page (chemin d’image erroné, script trop lourd, etc…). Cette fonctionnalité peut notamment s’avérer indispensable dans le cas de développement en AJAX.
Les plugins du plugin :
Autre force de Firebug : la possibilité de lui ajouter d’autres plugins complémentaires dont voici une liste non exhaustive :
-
FireQuery : un plugin très pratique pour analyser le code jQuery
-
YSlow : un plugin qui permet d’aller un peu plus loin que l’onglet « réseau » de Firebug et qui permet de comprendre pourquoi votre page est lente.
-
Pixel Perfect : l’ami des intégrateurs. Pour ajuster les éléments de votre site au pixel près par rapport à votre charte graphique, ce plugin permet d’afficher une image en calque par-dessus votre site.
-
Fire Picker : un petit plugin très pratique qui permet d’afficher la palette de couleur lorsque l’on souhaite modifier un couleur dans le code CSS.
Et les autres navigateurs alors ?
Vous n’êtes pas un inconditionnel de Firefox ? Pas de panique, voici une liste non exhaustive des différents outils disponibles sur la toile :
Dragonfly pour Opera :
Raphaël a apporté pas mal d'informations sur ce très bel outil : voir l’article sur Opera Dragonfly.
Outils de développement pour Chrome :
Équivalent de Firebug, cet outil est déjà intégré au navigateur et accessible par le menu « Outils » ou le raccourci clavier Ctrl Maj i.
Inspecteur Web pour Safari :
Très proche de l’outil proposé par Chrome, cet outil n'est pas activé par défaut dans Safari. Pour l'activer, allez dans Réglages (Icône engrenage)