|
Connexion
News Rss |
Blog » css4design : des css pour votre design html
Blog d'un intégrateur html et css avec du webdesign dedans et du référencement sur Google
Update : 2012/5/14 11:26:44 
Bruno Bichet | 2012-05-09T19:49:58+02:00
Le GAAD (Global Accessibility Awareness Day) dédie cette journée du 9 mai 2012 à la sensibilisation du plus grand nombre à l’accessibilité des contenus et applications digitales (web, logiciel, application mobile, etc.) pour les personnes en situation de handicap.Demain, le Web sera plus humainMerci à Monique Brunel (Webatou) d’avoir partagé cette vidéo.Articles sur le même sujetCheck your <body> avec le W3C390 ressources Javascript & jQueryVotre blog sur un téléphone portable, really ready ?Media queries et téléchargement des images par les mobiles9 ressources pour web designer
Bruno Bichet | 2012-05-14T11:26:44+02:00
CSS Selectors – Si comme moi vous avez parfois des difficultés à distinguer la portée de certains sélecteurs CSS, ce site vous sera très utile. il suffit de sélectionner un sélecteur dans la liste et de regarder les éléments qui sont mis en évidence dans le marquage HTML qui sert d’exemple. Cerise sur le gâteau, la page précise les navigateurs compatibles et affiche la règle CSS en cours.Exemple pour first-childLa règle CSS#target p:first-child {font-weight: bold;}Le marquage HTML<div id="target"> <h2>Where the Buggalo Roam</h2> <p>Alright, let's mafia things up a bit. Joey, burn down the ship. Clamps, burn down the crew. No! Don't jum...
Bruno Bichet | 2012-05-10T20:21:08+02:00
Cet article s’inspire d’un tweet de Sophie Drouvroy ?@cyberbaloo_ qui pose une question apparemment toute simple : Pour vous un intégrateur web est censé savoir faire quoi techniquement ? L’intégrateur web devrait maitriser le couple HTML & CSS et connaitre suffisamment Photoshop pour découper les portions d’images. Il doit également pouvoir travailler au milieu d’un langage côté serveur comme PHP ou client comme Javascript. En effet, il arrive souvent que l’intégrateur intervienne sur des projets déjà en production.Bien sûr, c’est très réducteur car ce métier est au carrefour de beaucoup d’autres : graphisme, design, ergonom...
Bruno Bichet | 2012-05-03T15:58:58+02:00
Soyez cohérent. C’est la conclusion que nous propose Google dans ce guide des bonnes pratiques de codage à l’usage des développeurs web et autres intégrateurs HTML et CSS. Lorsque vous reprenez du code, il est important de tenir compte du style d’écriture d’origine. Si votre prédécesseur utilise des espaces de part et d’autre des opérateurs arithmétiques, faites de même. Si les commentaires sont encadrés de symboles pour dessiner un bloc, faites de même aussi. Soyez cohérent.Pour nous aider à choisir une conventions de codage pour les langages HTML et CSS, Google propose une liste de suggestions pour que tous les membres d’un projet partagen...
Bruno Bichet | 2012-05-02T19:37:34+02:00
ColorZilla, connu pour ses extensions couleur pour Mozilla et Chrome, met à notre disposition Ultimate CSS Gradient Generator. C’est un générateur de dégradés CSS3 en ligne qui reprend grosso modo l’interface utilisateur de Photoshop pour fournir les déclarations CSS pour l’ensemble des préfixes propriétaires -moz-, -webkit-, -o-, -ms-. Pour Internet explorer 6 à 8, l’outil génère la propriété filter ; pour les versions IE9 et au-delà il y a même le commentaire conditionnel à ajouter pour annuler filter et basculer sur la génération du dégradé via SVG en base 64.Les dégradés prédéfinis sont une aubaine pour l’intégrateur web : dans la plupart des ...
Bruno Bichet | 2012-04-29T20:01:32+02:00
| 1 reads
Une des clés pour garantir à vos visiteurs une expérience utilisateur fluide et agréable se trouve dans l’optimisation des temps de chargement. A cet égard, les images sont souvent un goulot d’étranglement qui mérite notre attention. Photoshop est souvent utilisé pour la conversion des images aux formats PNG, JPG ou GIF, mais il ne dispose pas du meilleur algorithme de compression. Voici une vingtaine d’outils pour mieux compresser vos images et améliorer les performances de votre site :Outils en ligne PunyPNG — Réduit le poids des fichiers PNG, JPEG et GIF Smush.it — Compresse les images au format PNGLogiciels à installerScriptPNG et Script...
Bruno Bichet | 2012-04-26T18:12:07+02:00
Front-End Development Guidelines — Ce document regroupe un ensemble de bonnes pratiques et de recommandations pour les développeurs web : accessibilité, Javascript (& jQuery), HTML et CSS (& CSS3). Cerise sur le gâteau, vous aurez en prime des ressources complémentaires pour aller plus loin. Les liens qui suivent peuvent aider à la standardisation du code. Ils permettent de s’assurer que les fonctionalités CSS3 et HTML5 pourront être utilisées sur un grand nombre de navigateurs. jQuery — Javascript sans grumeau jQuery UI — Est à UX/UI ce que jQuery est à JavaScript Modernizr — Détectez les fonctionnalités, pas le navigaeur ! R...
Bruno Bichet | 2012-04-25T13:37:11+02:00
Les classes CSS sont probablement le meilleur ami de l’intégrateur web, mais peuvent vite devenir un cauchemar si la réflexion ne précède pas l’action. Au-delà des conventions de nommage plus ou moins sémantiques, il existe de nombreuses stratégies pour mettre en place une architecture CSS modulable et évolutive. Un temps décriées au profit des identifiants uniques pour de viles questions de performances, les classes reprennent du poil de la bête. Sans forcément tomber dans la «classite» aiguë, voyons rapidement différentes manières d’organiser nos feuilles de style CSS.Exemple 1Exemple de code permettant d’appliquer un style commun aux éléments commenç...
Bruno Bichet | 2012-04-18T20:21:02+02:00
Il existe de très nombreuses ressources pour apprendre les langages du web HTML & CSS. Bien sûr, les spécifications du W3C en la matière sont un passage indispensable, mais il ne faut pas oublier qu’il existe des tutoriels plus… didactiques. Ceux que je vous présente vous prendront par la main pour que le plongeon dans le grand bain de l’intégration web ne se transforme pas en «plat» douloureux.Learn HTML & CSS présente 10 leçons proposées par @shayhowe pour débuter avec HTML & CSS et développer votre premier site web : Terminologie, syntaxe et introduction — Avant de commencer ce voyage dans HTML & CSS il est important de bien compre...
Bruno Bichet | 2012-04-15T16:38:04+02:00
Une pratique courante pour déterminer les tailles de caractère consiste à utiliser une valeur de 62.5% sur le body pour obtenir une taille de base de 10px et d’utiliser un coefficient multiplicateurs en em pour simplifier les calculs à venir. Dans ce contexte, 1.2em est égale à 12px et 2.4em à 24px, etc. Selon l’article Font sizing with rem could be avoided, c’est une fausse bonne idée : des calculs fastidieux nous sont épargnés, certes, mais nous devrons spécifier les nouvelles tailles à chaque fois. On ne peut raisonnablement pas utiliser une taille par défaut de 10px pour le texte si on veut être lu.EM CalculatorSi vous voulez utiliser une taille par défau... |
