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 » 2010 » novembre

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.

[Creetik.com] Changelog des mises à jour

Posted by Webmaster | Posted in Creetik.com | Posted on 13-11-2010

0

Creetik.comLe site Creetik.com continue son développement au fil de vos critiques et de vos analyses.
Voici le changelog des dernières mises à jour.


  • Modification du script d’affichage des sites les moins analysés en home page pour qu’ils comprennent les critiques rapides
  • Critiques rapides intégrées dans le flux d’informations des actions de la communauté
  • Augmentation de la limite de temps des cookies, afin de se re-connecter trop souvent
  • Remplacement du module de retweet (tweetMeme) des analyses par le module officiel de twitter
  • Suppression d’erreurs PHP sur la partie des améliorations
  • Suppression des erreurs d’encodage UTF-8
  • Corrections apportée à l’affichage des critiques rapides
  • Ajouts de loader durant les requetes Ajax
  • Correction du module d’affichage du PageRank lors d’une Analyse d’un site web
  • Affichage de la notation des critiques rapides

Les prochaines mises à jour du site Creetik.com permettront de rendre les analyses et les critiques rapides encore plus pertinentes. Personnaliser vos propositions de sites internet et des optimisations des outils afin d’améliorer vos sites sont au programme.

N’hésitez pas à ajouter dans les commentaires de ce post les outils et améliorations que vous aimeriez voir apparaitre ou optimisés sur Creetik.com.

Sachez que vous pouvez vous impliquer davantages et participer à l’amélioration de Creetik.com en vous inscrivant sur le Mantis participatifs de Creetik bug.creetik.com

Faites améliorer vos sites avec Creetik.com

[Aide] 5 utilitaires online indispensables

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

1

Pour ce post je vous propose plusieurs petits outils très utiles qui vous rendront bien des services et qui vous ferons gagner du temps.

1. Favicon Generator
Un générateur de favicon en ligne d’après une image gif. Simple et pratique pour créer des .ico rapidement
DynamicDrive
Lien : Dynamicdrive

2. Lorem Ipsum Generator
Un générateur de texte pour vous aider à remplir vos designs fraichement sortis de photoshop et avoir un visuel proche de la réalité.
lorem ipsum generator
Lien : ipsum-generator.com

3. CSS & JS Compressor
Voici un compresseur de code Javascript et Css en ligne très simple, il vous suffit de coller votre code et de récupérer le code compressé, il vous restera à coller dans vos pages le code généré
compressor ebienne
Lien : compressor-ebienne.de

4. Compatibilité et accessibilité avec BrowserShot
Ce site est très utile pour valider d’un seul coup l’affichage sur tous les navigateurs et tous les systèmes d’exploitation
Browser Shot
Lien : Browser shot

5. Modifier une image en ligne pour gagner en réactivité
Voici un éditeur d’image digne d’un photoshop online, il vous rendra bien des services et vous permettra de faire des modifications urgentes sans installer quoi que ce soit sur votre machine
pixlr
Lien : pixlr

Ces utilitaires vous permettront de gagner en efficacité et en réactivité par rapports à vos créations de projets ou de maintenance des projets déjà en ligne. Les petites mises à jour deviendront beaucoup plus fluide depuis n’importe quel endroit grâce à tous ces outils sont en ligne.

Faites améliorer vos sites internet avec Creetik.com