Warning: Declaration of Walker_Comment2::start_lvl(&$output, $depth, $args) should be compatible with Walker::start_lvl(&$output, $depth = 0, $args = Array) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146

Warning: Declaration of Walker_Comment2::end_lvl(&$output, $depth, $args) should be compatible with Walker::end_lvl(&$output, $depth = 0, $args = Array) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146

Warning: Declaration of Walker_Comment2::start_el(&$output, $comment, $depth, $args) should be compatible with Walker::start_el(&$output, $object, $depth = 0, $args = Array, $current_object_id = 0) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146

Warning: Declaration of Walker_Comment2::end_el(&$output, $comment, $depth, $args) should be compatible with Walker::end_el(&$output, $object, $depth = 0, $args = Array) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146
Creetik Blog » conseils

Featured Post

Meilleurs Voeux 2011

Je souhaite adresser mes meilleurs voeux à tous les corps de métiers liés au Web, webmasters, web-designer, CEO, web-marketing, animateurs web, intégrateurs, web développeurs et à tous différents acteurs que rassemble le web autour du meme outil. J’aimerai porter une attention particulière...

Read More

[CSS] – Les helpers

Posted by Webmaster | Posted in Conseils Creetik, css | Posted on 19-11-2010

1

Pour ce troisième volet des conseils Creetik, nous allons aborder une notion souvent méconnue mais qui s’avère très utile afin de maintenir le code.

Qu’est ce qu’un Helper Css ?

Les helpers Css sont des classes CSS dites « classiques » ayant pour particularité d’utiliser une seule propriété CSS.
Ces classes s’utilisent simplement de la même manière qu’une classe css.


/* Exemple d'un helper */

.mrg {margin:5px}

[...]

Pourquoi utiliser les helpers Css ?

Les helpers css vont vous faciliter la vie et rendront vos petites mises à jour très rapide. Vous n’aurez plus besoin de toucher à la css principale lors de chaque modifications, souvent responsable de bourdes et de régressions.

Comment organiser ses Helpers ?

Bien entendu, chaque intégrateur web possède sa petite technique, pour ce post je vais vous exposer celle que j’utilise au quotidien. Les commentaires sont là pour réagir ;)
Il vous faudra tout d’abord créer une nouvelle feuille de style (pour notre exemple, commons.css). Puis commencer à réfléchir aux propriétés que vous utilisez le plus souvent. Les propriétés margin et padding sont souvent les plus récurrentes.

Voici quelques helpers de la propriété margin, nous allons partir d’une valeur standard (5 pixels), et détailler chaque propriété.

/* Helpers Margin */

.mrg {margin:5px}
.mrg-l {margin-left:5px}
.mrg-r {margin-right:5px}
.mrg-b {margin-bottom:5px}
.mrg-t {margin-top:5px;}

Vous l’aurez remarqué, la lettre suivant le nom de la classe de base donne la direction de la propriété

Les helpers peuvent être appliqués par paliés, c’est la méthode qui vous permettra d’établir des standards d’espacements.


/* Helpers Margin - Par paliers */

.mrg-xs {margin:5px}
.mrg-l-xs {margin-left:5px}
.mrg-r-xs {margin-right:5px}
.mrg-b-xs {margin-bottom:5px}
.mrg-t-xs {margin-top:5px;}

.mrg {margin:10px}
.mrg-l {margin-left:10px}
.mrg-r {margin-right:10px}
.mrg-b {margin-bottom:10px}
.mrg-t {margin-top:10px;}

.mrg-xl {margin:20px}
.mrg-l-xl {margin-left:20px}
.mrg-r-xl {margin-right:20px}
.mrg-b-xl {margin-bottom:20px}
.mrg-t-xl {margin-top:20px;}

.mrg-xxl {margin:50px}
.mrg-l-xxl {margin-left:50px}
.mrg-r-xxl {margin-right:50px}
.mrg-b-xxl {margin-bottom:50px}
.mrg-t-xxl {margin-top:50px;}

Si vous êtes plusieurs à travailler et souhaitez gagner en lisibilité dans votre code, vous pouvez directement intégrer la valeur des helpers dans le nom des classes utilisées.


/* Helpers Margin - Par valeurs */

.mrg-5 {margin:5px}
.mrg-l-5 {margin-left:5px}
.mrg-r-5 {margin-right:5px}
.mrg-b-5 {margin-bottom:5px}
.mrg-t-5 {margin-top:5px;}

.mrg-10 {margin:10px}
.mrg-l-10 {margin-left:10px}
.mrg-r-10 {margin-right:10px}
.mrg-b-10 {margin-bottom:10px}
.mrg-t-10 {margin-top:10px;}

.mrg-15 {margin:15px}
.mrg-l-15 {margin-left:15px}
.mrg-r-15 {margin-right:15px}
.mrg-b-15 {margin-bottom:15px}
.mrg-t-15 {margin-top:15px;}

Créer des helpers à peu près pour tout !

Bien entendu, les propriétés CSS margin et padding ne sont pas les seules à pouvoir être utilisées de cette manière. Vous pouvez appliquer cette méthode à toutes les propriétés que vous êtes amenés à utiliser fréquemment.


/* Divers Helpers */

.block {display:block;}
.inline {display:inline;}

.txt-l {text-align:left;}
.txt-c {text-align:center;}

.bold {font-weight:bold;}

.float-l {float:left;}
.clear-b {clear:both;}

.pos-rel {position:relative;}
.pos-abs {position:absolute}

En utilisant la technique des helpers Css, vous réduirez le temps de maintenance de votre site mais aussi en terme de publication, vous n’aurez plus forcément à livrer là ou les feuilles de style css impactées par vos modifications avec les contraintes de cache que cela implique pour vos fidèles visiteurs.

[Aide] – Le reset CSS

Posted by Webmaster | Posted in Conseils Creetik, css | Posted on 14-10-2010

2

Pour ce second post de conseils Creetik, nous allons rentrer dans le vif du sujet et aborder une technique de démarrage d’un nouveau projet.

Le reset CSS, permet de remettre à zéro l’interprétation des balises HTML afin de réduire l’impact des différences d’interprétation de chaque navigateur. Les nouvelles propriétés CSS attribuées à chaque balise pourront être communes à tous les navigateurs, ce qui nous offre la possibilité de partir sur une base saine. Cette technique permet d’effacer une bonne partie des problèmes de compatibilité et ainsi améliorer l’accessibilité sans faire trop d’effort.

Différentes techniques, les bonnes et les mauvaises !

Plusieurs techniques de reset CSS existent et de part le contexte de cette méthode, il est facile de faire un peu tout et n’importe quoi. Tout d’abord, suivant vos compétences CSS, vous pouvez soit faire votre propre reset CSS ou si vous ne vous sentez pas aborder le CSS de cette manière, vous pouvez en intégrer un déjà fait, validé par une large communauté de webmaster. (Ce que nous vous conseillons de faire)

Si vous vous sentez l’âme d’un ninja CSS, alors vous pouvez entamer un reset CSS à la main.
Commençons par ce qu’il ne faut absolument pas faire
– Attribuer des propriété CSS à tous les éléments sans distinction !
On pourrait se dire, c’est plus rapide! Ce n’est qu’une impression en vérité, car il y aura forcément un cas de figure que vous n’avez pas prévu et que vous devrez corriger par la suite.

* {
margin: 0;
padding: 0;
border: 0;
font-size: 1em;
}

Si vous utilisez le sélecteur * pour attribuer des propriétés CSS, elles seront attribuées à tous les éléments de la page. Ce qui au final consommera énormément de ressources pour finalement un effet qui vous obligera, dans certains cas, à rectifier ces propriétés. Il est conseillé de travailler plutôt sur un nombre restreint de balises.

– Écraser la propriété « display » d’une balise HTML.
Les éléments de type block ou inline ne doivent pas être modifiés, cette propriété est l’une des rares qui n’est pas interprétée différemment d’un navigateur à l’autre.

Réaliser son reset CSS perso
Il vous faudra un peu de patience et des cas de figure concrets pour cibler la majorité des balises html.
Afin de cibler le plus de cas de figure possible, il est utile de créer une page html vierge contenant toutes les balises que vous souhaitez modifier. Vous aurez ainsi une vision d’ensemble de la portée des règles CSS que vous rédigez.

– Regrouper les balises équivalentes et de même nature.
Les balises de titres par exemple h1, h2,… doivent acquérir les même propriétés assimilés aux titres. Les éléments de type liste ul, li, ol,… doivent reprendre les règles CSS de type list-style-type ou encore list-style-position

– Regrouper les propriétés CSS qui s’appliquent à de nombreuses balises.
Les propriétés CSS padding et margin sont les propriétés de bases les plus utilisées et aussi celles qui contiennent le plus de différences entre les navigateurs.
En fixant ces propriétés à 0, nous pouvons rassembler sous cette regles toutes les balises de type input ou les titres h1, h2, ou encore textarea, fiedset etc..

Avec ces conseils, vous êtes en mesure de démarrer un projet web dans les meilleures conditions et surtout d’éviter de passer des heures à corriger les différences entre navigateurs.

[Aide] Les outils de développement web

Posted by Webmaster | Posted in Non classé | Posted on 06-10-2010

3

Firebug : L’extension de firefox incontournable !
Cette extension de firefox très puissante met à votre disposition plusieurs outils très utiles au développement web :

  • Parcourir le code HTML en temps réel : Au survol des éléments d’une page web, firebug cible directement l’élément DOM concerné dans le code html de la page, l’identification est quasi-instantanée. De plus vous pouvez éditer le code très simplement et vous rendre compte du résultat en temps réel
  • Inspecter rapidement les CSS : Les styles CSS appliqués à une balise HTML sont affichés directement à coté de celle-ci, vous pouvez désactiver les règles ou en ajouter de nouvelles (avec auto-complétion). Les effets de leurs modifications seront appliqués en temps réel à la page web en cours.
  • Console JavaScript : Le débug des erreurs JS devient un vrai plaisir, les requêtes Ajax sont clairement affichées par type. Firebug vous permet de placer des points d’arrêt dans le code JS afin de connaitre la valeur des variables.
  • Activité réseau et optimisation : Là encore, cet outil est très performant pour afficher tous les fichiers externes chargés sur la page courante. Il analyse les temps de chargement de chaque élément, et vous permet d’un coup d’oeil de connaitre les points faibles du chargement de la page. Vous pouvez également les trier par type de requette, HTML, images, css, js, etc…

» Télécharger l’extension firebug

Editeurs HTML : Coder comme les pro avec des outils accessibles et gratuits

  • Notepad ++ : Un éditeur de code simple et rapide. C’est le grand frère du bloc note de Windows, enrichi de fonctionnalités utiles comme la colorisation syntaxique. L’outil parfait pour faire une modification rapide.
    » Télécharger Notepad++
  • Aptana Studio : L’éditeur de code par excellence, basé sur le célèbre éclipse, il possède une prise en charge complète de chaque langage de programmation, auto-complétion, colorisation syntaxique, client ftp, preview du code et framework JS intégrés. Le must have pour développer aisément.
    » Télécharger Aptana Studio
  • Kompozer (ex NVU) : L’éditeur wysiwyg gratuit par excellence, capable de rivaliser avec les plus gros logiciels payants, sans avoir la lourdeur d’un Dreamweaver ou Front-page.
    » Télécharger Kompozer
  • PSpad : Un éditeur html complet, plutôt orienté professionnel, validation du code, création de projets. Un outil pratique qui rassemble les fonctionnalités principales recherchées par les webmaster confirmés.
    » Télécharger PSpad

Mezer tools : la précision à portée de clic
Mezer tools est une boite à outils très utile qui vous apportera un gain de temps et d’efficacité sans précédent. L’ensemble comprend un outil de mesure très précis qui vous permettra de mesurer tout élément d’une page, un outil de capture d’écran qui permet de capturer un élément de la page en particulier sans passer par un gros logiciel. Un autre outil permet de détecter une couleur et d’obtenir sa correspondance en code Hexa. Un générateur de texte est également présent de type (« lorem ipsum etc..) est toujours utile pour combler des sites en cours de construction.
Télécharger MezerTools

IE Tab : Vérifiez la compatibilité IE de vos pages dans Firefox
Une extension de Firefox bien pratique, qui vous permet de basculer d’un affichage IE à un affichage Firefox.. Petit inconvénient, ce plugin utilise la version d’Internet Explorer installée sur votre machine.
Télécharger l’extension IE-Tab

LinkChecker : Oubliez les liens mort
Cette extension vous permettra de checker tous les liens d’une page pour savoir s’il en existe certains qui ne mène nulle part. Bien plus efficace que de cliquer sur tous les liens d’une page ! Petit extension qui ne fait rien de plus mais au moins elle le fait bien.
Télécharger LinkChecker

Voici quelques outils de développement web qui vous rendrons bien des services, que ce soit pour les taches répétitives ou pour du debug de script.

Faites améliorer vos sites avec Creetik.com