Featured Post

[Aide] Les outils de développement web

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...

Read More

[Creetik.com] Des nouveautés en préparation

Posted by Webmaster | Posted in Creetik.com, Ergonomie, Interactivité | Posted on 17-11-2012

0


Je reviens vers vous pour vous annoncer une bonne nouvelle ! Depuis quelques semaines, j’ai entrepris la refonte du code source de Creetik.com dans l’objectif de me permettre de maintenir plus facilement le site. Depuis la dernière refonte du site en Septembre 2010, j’ai pris du recul par rapport à l’expérience utilisateur du site. Les différents retours que j’ai pu obtenir grâce à Creetik.com lui-même et des différents webmasters que j’ai pu croiser m’ont permis d’obtenir une vision du site plus précise.

J’ai donc décidé de profiter de cette refonte pour modifier quelque peu le site en le simplifiant sur certains aspect mais aussi en allant plus loin sur d’autres. Se recentrer sur l’essentiel devenait indispensable à la survie du projet.

L’une des premières constatations faite s’est portée sur la visibilité de la communauté par rapport à l’activité du site. Actuellement, les membres ne sont prévenus par mail uniquement lorsqu’une interaction est créée avec eux (nouvelle critique rapide, nouvelle analyse, vote de pertinence d’une analyse). Il faut avouer que cela ne suffit pas à générer du trafic afin de générer plus de critiques en retour. C’est pour cette raison que vous serez plus souvent sollicités pour donner votre avis sur les différents sites internet proposés, leurs mise à jour et leurs actualités.

Creetik.com maintenant sur Google+

Posted by Webmaster | Posted in Creetik.com | Posted on 21-04-2012

0

Creetik se mets à la page avec Google Plus !
Le réseau social de Google prends de plus en plus d’importance chaque mois, et notre présence était désormais inévitable.

Que trouverez vous sur cette page G+ ?
Tout d’abord les infos sur la vie du site Creetik.com, les évolutions en cours de développement et celles à venir. Mais pas seulement, puisque la veille quasi-quotidienne sur le web design et ses nouveautés, le web développement avec des plugins jQuery et des snippets PHP très pratiques ou encore le SEO avec les dernières infos pour l’optimisation du référencement, seront reportés de manière bien plus lisible sur G+.

Des récapitulatifs mensuels seront publiés sur le blog afin de faire une séance de rattrapage de tout ce qui aura été publié comme nouveautés.

Retrouvez-nous dès maintenant sur notre page Google + : +Creetik

[ToolBox] +10 snippets .htaccess

Posted by Webmaster | Posted in Conseils Creetik, Ergonomie, html, outils | Posted on 03-07-2011

0

Le fichier .htaccess est LE fichier qu’il faut savoir manipuler pour contrôler assez facilement le serveur Web Apache. Creetik partage avec vous une suite de tweaks concernant ce fichier.

Petit rappel : Le fichier .htaccess sert beaucoup pour configurer le serveur Apache sans trop rentrer dans le code des fichiers de configuration. Vous pouvez notamment protéger l’accès à un répertoire/fichier par un mot de passe, définir des pages 404 personnalisées, mettre son site en maintenance, etc. Ce n’est pas tout et nous allons détailler les méthodes les plus accessibles aux webmasters pour les mettre en place simplement et rapidement.

Avant toute modification du fichier .htaccess, faites une sauvegarde. Ce fichier reste sensible, et on est toujours heureux d’avoir une sauvegarde à portée de click pour revenir à un état stable et fonctionnel.

1. Activer la compression Gzip

Activez la compression gzip et réduisez la bande passante consommée pour l’affichage de votre site jusqu’à 70%. C’est le mode le plus efficace de compression serveur.

# BEGIN GZIP
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
# END GZIP

2. Protection contre le hotlinking

Le hotlinking permet d’afficher du contenu hébergé sur votre site internet depuis un autre site. La problématique se situe au niveau de la bande passante, car c’est bien la votre qui sera consommée. Le fichier .htaccess permet de bloquer cet appel à distance.

RewriteEngine On
#Replace ?mysite\.com/ with your blog url
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#Replace /images/nohotlink.jpg with your "don't hotlink" image url
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

3. Des pages personnalisées pour les erreurs HTTP

Les erreurs HTTP 404, 403, 500, etc. sont personnalisables directement depuis le fichier .htaccess. Voici quelque exemples

ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/authreqd.html
ErrorDocument 403 /errors/forbid.html
ErrorDocument 404 /errors/notfound.html
ErrorDocument 500 /errors/serverr.html

4. Forcer le téléchargement de certains type de fichiers

Il est parfois utile de forcer le téléchargement de certains fichiers, comme les PDF trop lourds pour etre affichés ou les fichiers vidéos AVI, MPEG, etc qui se lancent dans des players pas adaptés.

AddType application/octet-stream .pdf
AddType application/octet-stream .avi
AddType application/octet-stream .mpg
AddType application/octet-stream .mov
AddType application/octet-stream .xls
AddType application/octet-stream .doc

5. Supprimer l’extension de vos fichiers dans l’url

Ce snippet réécrit l’url pour enlever l’extension des fichiers dans l’url.
http://www.example.com/about.php affichera http://www.example.com/about

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html
# Replace html with your file extension, eg: php, htm, asp

6. Forcer la suppression des www

Pour des questions de SEO, vous pourriez avoir besoin de supprimer les www de votre nom de domaine.
http://www.example.com sera affiché http://example.com

RewriteEngine On
RewriteCond %{HTTP_HOST} !^your-site.com$ [NC]
RewriteRule ^(.*)$ http://your-site.com/$1 [L,R=301]

7. Récupérer les logs d’erreurs PHP

Grâce à ce snippet, vous allez pouvoir récupérer toutes les erreurs PHP, la seule contrainte de cette solution est de créer d’abord un fichier log sur votre serveur web

# display no errs to user
php_flag display_startup_errors off
php_flag display_errors off
php_flag html_errors off
# log to file
php_flag log_errors on
php_value error_log /location/to/php_error.log

8. Mise en maintenance d’un site internet

Mettez en maintenance l’ensemble de votre site sans risque. Ajoutez ce snippet dans le .htaccess et configurez le pour autoriser les adresses IP nécessaires.

RewriteEngine on

# Maintenance Redirection
# Replace 555\.555\.555\.555 with your own IP address
# Uncomment first conditional to turn off the redirection
# RewriteCond %{REQUEST_URI} ^$a
RewriteCond %{REQUEST_URI} !maintenance.html
RewriteCond %{REQUEST_FILENAME} !(styles|images).+$
RewriteCond %{REMOTE_ADDR} !^555\.555\.555\.555$
RewriteCond %{REMOTE_ADDR} !^127\.0\.0\.1$
RewriteRule (.*) /maintenance.html [R,L]

9. Protéger un dossier par mot de passe

La protection des dossier avec le .htaccess est très efficace. Il faut faudra créer un second fichier .htpasswd contenant les infos d’identification login:motdepasse. Notez que tous les sous-dossier sont concernés par cette restriction d’accès.

AuthType Basic
AuthName "This Area is Password Protected"
AuthUserFile /full/path/to/.htpasswd
Require valid-user

10. Détection Iphone

La détection des userAgent dans le .htaccess permet de rediriger vers la bonne version du site, suivant le support utilisé. Pour filtrer un accès android, modifiez les valeurs correspondantes.

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule .* http://iphone.example.com/ [R]

11. Détection Ipad

Si vous avez besoin de faire une version spécifique de votre site pour les iPad (sans flash par exemple) vous pouvez utiliser le snipper suivant.

RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://ipad.yourdomain.com [R=301]

12. Redirection permanente (301)

Pour ajouter une redirection permanente d’un nom de domaine sur un autre, utilisez le snippet suivant. Bien entendu ce snippet fonctionne également pour les autres erreur HTTP, il faut simplement l’adapter à votre cas de figure.

Options +FollowSymLinks
RewriteEngine on

#singlePage
RewriteRule ^oldpage.php http://example.com/newpage.html [R=301,L]

#entireSite
Redirect 301 / http://newsite.com/


13. Bloquez l’accès à vos dossier sensibles

Avec l’utilisation des CMS (et même sans), vous pouvez vous trouver avec des fichiers de configuration sur votre site, il vaut mieux généralement boucler le secteur si vous le voulez pas vous retrouver un jour avec une page blanche à la place de votre site avec un petit message toujours sympathique : « I’ve fucked ». Ce Snippet est à placer dans le dossier que vous souhaiter bloquer.

Deny from all

Ce post centralise la plupart des snippets utilisées par les webmasters pour configurer simplement le serveur Apache. Si vous pensez qu’il manque un snippet essentiel, ou qu’une erreur s’est glissée dans cette page, n’hésitez pas à laisser un commentaire pour me prévenir.
 

Cet article est largement inspiré de plusieurs sources, catswhocode.com, des snippets de css-tricks et de plusieurs forums. Merci à eux.

Améliorer l’ergonomie de son site web : L’accessibilité (1/5)

Posted by Webmaster | Posted in Conseils Creetik, Ergonomie, Interactivité, Javascript, jQuery | Posted on 02-03-2011

0

Une fois n’est pas coutume, j’avais habitué les lecteurs de ce blog à lire des posts technique. En l’occurrence pour ce post, nous allons aborder les notions d’ergonomie appliquées aux sites internet, et pour obtenir une vision globale des 5 composantes de l’ergonomie web, chaque composantes sera détaillée seule.

L’accessibilité, le design, la navigation, le contenu (éditorial) et les fonctionnalités d’un site internet représentent les 5 composantes de l’ergonomie d’un site internet.

Pour aborder cette première notion d’ergonomie, nous allons détailler l’accessibilité à travers le choix du nom de domaine, la rapidité de chargement des pages, le développement Javascript non-intrusif, l’intégration cross-browser et l’accessibilité naturelle.

L’accessibilité

Cette composante de l’ergonomie est l’une des plus importante, celle qui donnera de la visibilité à votre contenu, si toute fois elle est abordée correctement. L’accessibilité est donc une étape importante tant au niveau de la maintenance d’un site existant qu’au niveau d’un nouveau projet.


Le nom de domaine
est le premier point abordé quand on souhaite se connecter à un site internet, c’est souvent le site qui possède un nom de domaine accrocheur dont on va se souvenir le plus.
Pour être le plus accessible possible, le nom de domaine se doit d’être court et intuitif, il sera donc facile à mémoriser. Les pluriels sont à éviter car on ne se souviens jamais de la présence d’un « S » en fin de mot, de plus la proximité avec un nom de domaine existant pourrait jouer en votre défaveur suivant sa cible.
La mode du web 2.0  intègre la notion des doubles voyelles, cette notion au premier abord anodine a permis de démultiplier le nombre de nom de domaine sans toucher à l’extension utilisée tout en gardant une accessibilité accrue. (Ex : Scoopeo, Yoolink, Creetik etc..)
Les extensions n’ont pas été mise de coté pour autant, car elles posent également un soucis de mémorisation. La réponse à cette contrainte été connu grâce à l’un des premiers agrégateur de bookmarks : del.icio.us (Depuis peu, ravisé à utiliser une extension classique, delicious.com). Intégrer l’extension d’un nom de domaine dans le nom du site permet ne pas l’oublier, tel a été le succès de del.icio.us ou même le sous-domaine a joué un rôle intuitif.


La rapidité du chargement des pages
est un éléments important à contrôler permettant de garder la maîtrise de l’accessibilité de ses pages. On ne pense pas forcément à utiliser toutes les techniques possibles pour obtenir par exemple un poids par image raisonnable  (< 20ko) ou même des techniques CSS pour réduire le nombre de requêtes grâce aux sprites CSS . Des outils très utiles comme firebug avec yslow vous aideront à garder un oeil sur ce point essentiel de l’accessibilité à tous.


Le javaScript non-intrusif
apporte une cohérence au développement interactif et pourra par la suite devenir mutualisé. Il faut toujours garder à l’esprit que l’utilisateur final peut l’avoir désactivé, ou bien même, le navigateur que l’internaute utilise ne possède pas de mode JS (ex : Lynx). L’ajout de la couche JavaScript doit préserver l’accessibilité au profit de l’utilisabilité. Si votre site internet comporte des modules interactifs en JS/jQuery (sliders, accordion, etc), vous allez devoir vous intéresser à leurs affichage lorsque le JS n’est pas activé, leurs contenu doit quand même s’afficher dans son ensemble, nous parlons alors d’un « mode dégradé ».


Le cross Browser
est un élément essentiel de l’accessibilité. Une sorte de garantie du même affichage quelque soit le support (Mac, PC ou Mobile). Cette contrainte de développement est le fer de lance des intégrateurs web, ils possèdent les compétences nécessaires à l’intégration du contenu HTML tout en respectant les standards établis par le W3C. Une sémantique HTML correcte de base permet de réduire drastiquement le temps de réglage du cross browser souvent fastidieux sous Internet Explorer.


Ce point sera bien plus abordé dans les sujets suivants, mais concernant l’accessibilité on peut tout de même noter qu’une accessibilité naturelle doit être formatée au web. Les liens par exemple sont soulignés par défaut, les balises IMG possèdent un attribut de texte alternatif afin d’afficher une description de l’image en question si celle-ci n’est pas disponible, etc. Le respect et la compréhension du web naturel consiste à le faire évoluer sans jamais perdre de vue l’objectif d’accessibilité. Les liens par exemple ne peuvent pas ne pas être souligné par défaut, la différence visuelle avec du simple texte ne peut pas être faite, pour combler cette contrainte tout en gardant un lien non-souligné vous pouvez y ajouter un pictogramme qui le différenciera du reste. Tout est une question de respect de l’accessibilité naturelle du web.

Ces principes de base vous garantissent une excellente accessibilité au contenu, ce qui se répercutera certainement sur votre référencement.

Le prochain post sur l’ergonomie abordera « la navigation »

Inspiré par ce lien

Meilleurs Voeux 2011

Posted by Webmaster | Posted in Non classé | Posted on 17-01-2011

1

Bonne Année 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 à toutes les communautés qui se développement de manière autonome sur internet, qui s’auto-régulent et ne veulent que la pérennité du modèle qu’ils utilisent et fabriquent au quotiden.

Je finalise mes voeux à tous les membres de Creetik cette année qui ont vu progresser le site référence des critiques de site internet. En espérant que Creetik à pu vous aider à progresser et que cette nouvelle année vous amènera vers de nouveaux projets, de nouvelles idées, toujours plus riches et intéressantes à concevoir.

Toute l’équipe Creetik vous souhaite une bonne année 2011

[Aide] – Rendez votre site accessible à tous

Posted by Webmaster | Posted in Conseils Creetik, css, html, outils | Posted on 07-12-2010

0

Plusieurs modes de validations s’offres à vous, les sites internet mais aussi les plugin des navigateurs peuvent vous aider à corriger les erreurs lors de la validation de vos créations web.

Pourquoi valider son site internet ?

En général, lorsqu’un site internet s’affiche correctement nous ne pensons pas forcément à le valider. La validation du code généré est impératif pour garder une cohérence de développement et une accessibilité accrue.

La validation du code HTML s’impose comme quelque chose d’indispensable, surtout  lorsque le développeur cherche à obtenir un résultat visible de la même façon, par tous, quel que soit le navigateur. Mais pas seulement, les robots des moteurs de recherche doivent également comprendre et analyser la pertinence du contenu. Grâce à la qualité du code analysé, le site sera mieux placé qu’un autre ou l’effort n’a pas été fourni. C’est à ce moment précis que la sémantique HTML prend ton son sens et devient plus qu’importante lors du développement d’un site internet.

Quels outils disponibles pour valider son site ?

Le World Wide Web Consorsium (W3C) est l’organisation régulateur des standards web. L’outil de validation du code HTML que propose le W3C est intéressant, puissant et facile d’utilisation grâce à son mode de détection. De plus le W3C peut également valider le CSS ou encore le format XML.

Le W3C Validator, n’est pas le seul outil pratique, des plugins aussi existent et rendent la validation encore plus accessible puisqu’un seul clic généralement suffit pour détecter toute erreur HTML.

- HTML tidy (développé par Dave Ragget) est un outil indispensable afin de vérifier et nettoyer les fichiers source HTML. Cet outil est actuellement maintenu par une équipe de bénévoles sur Source Forge. Le projet continue à être disponible sous une licence open-source. Vous êtes invités à apporter votre contribution en déclarant des bugs, ou en proposant de nouvelles améliorations sur cette page Source Forge.

- XHTML-CSS : Valide et corrige le HTML et le CSS attaché à une URL. Le point fort de cet outil c’est la validation des 2 langages en même temps. Vous pouvez accéder à ce site par le biais de ce lien.

- W3C CSS Validator : Un outil également développé par le W3C vous sera utile pour valider et à corriger vos feuilles de styles CSS. Il est accessible à partir de ce lien.

- W3C Feed Validator : Le dernier outil proposé par le W3C vous servira à valider vos flux RSS générés et vous proposera des solutions pour corriger vos erreurs. Cet outil garantie que vos flux soient interprétés correctement quel que soit le lecteur de flux utilisé. Cet outil est accessible à partir de ce lien.

Quelles erreurs sont fréquemment rencontrées ?

Les erreurs les plus fréquentes sont souvent des erreurs d’inattention des développeurs web. La plupart des erreurs présentées ci-dessous peuvent-être corrigées en quelques minutes seulement.

La plus lourde de conséquence en terme d’interprétation de votre page par les navigateurs est celle portant sur la déclaration du DOCTYPE. Cette déclaration permet de déterminer la version html utilisée et son mode de d’interprétation, sans cette information tout outil de validation ne pourra vous aider. Il ne reconnaîtra tout simplement pas la version actuelle de la page que vous tentez de valider.  Vous pouvez consulter les différents DOCTYPE à utiliser suivant vos contraintes sur cette page.

Les balises HTML restées ouvertes

Cet oubli comporte plusieurs conséquences plus ou moins grave. Des problèmes de mises en pages peuvent intervenir suivant le navigateur utilisé. Le message que vous risquez de rencontrer lorsqu’un tel oubli à été fait est le suivant :

end tag for “p” omitted, but OMITTAG NO was specified

Dans cet exemple, c’est la balise <p> qui ne trouve pas sa balise fermante </p>. Généralement un numéro de ligne pourra vous aider, utile en cas de html pur, mais lorsque votre site est dynamique vous pouvez ajouter le contexte de l’erreur ce qui ajoutera quelques lignes avant et après l’erreur afin de mieux la cibler.

Dans le même registre, on peut également trouver des erreurs au sujet des balises « auto-fermantes ». Simplement, ce sont les balises qui ne nécessitent pas de balises fermantes comme par exemple les balises <IMG /> ou <INPUT/>. L’erreur affichée par le validateur sera la même que la précédente. Pour résoudre cette erreur, il vous suffira d’ajouter un slash à la fin de la balise concernée pour qu’elle se ferme automatiquement.

Les caractères spéciaux non encodés

Dans ce cas d’erreur, la plus régulièrement mise en avant est celle du caractère & présent dans les url. Ces caractères sont souvent indispensables au bon fonctionnement de votre site puisqu’ils transmettent des paramètres. Voici l’erreur type :

Reference to « link » for which no system identifier could be generated

Afin de corriger cette erreur rapidement, vous devrez encoder les caractères spéciaux en html.  Par exemple pour l’utilisation du & dans un lien vous devrez l’encoder et le remplacer par &amp; il sera ainsi interprété de la bonne manière.

Non respect du type naturel des balises HTML

Les natures par défaut des balises sont importantes dans la sémantique HTML. 2 types  de balises s’imposent, les balises de type inline (<a>, <strong>, <em>, etc), et les balises de type block (<div>, <p>, <h1>, etc). Par définition, une balise de type block peut contenir une balise de type inline, mais pas l’inverse. Ceci est une règle de  sémantique, elle n’est pas liée au css que l’on pourrait appliquer à une balise de type block, par exemple la balise <p> à laquelle on ajoute la propriété display:inline; Dans ce cas, vous obtiendrez cette erreur :

document type does not allow element « div » here

Corriger ces erreurs est primordiale, il faut absolument respecter la sémantique HTML et la nature par défaut des balises que vous utilisez.

Texte alternatif inexistant

Le paramètre ALT de la balise <img/> est souvent mis de coté,  une erreur classique d’une image non référencée. Cet oubli va générer autant d’erreur que de balises <img/> ou ce paramètre manque.  Voici l’erreur en question :

required attribute « alt » not specified

Pour supprimer ces erreurs de validation, il vous suffira de remplir pour chaque image l’attribut ALT. Ainsi vos images seront correctement interprétées par les robots et seront prochainement référencées.

Les attributs width and height en paramètres

Ces paramètres de tailles sont souvent utilisés à toutes les sauces pour contraindre les éléments HTML à prendre une certaine taille. Cependant leurs utilisations sont restreintes suivant le DOCTYPE utilisé. En mode Transitional par exemple, le validateur ne les affichera pas comme des erreurs mais plutôt comme des alertes, alors qu’en mode Strict il affichera pour chaque image, une erreur à corriger. Ceci étant dit, l’utilisation des paramètres width et height sont fortement déconseillés car il est chronophage d’attribuer des valeurs de taille à une image avec cette méthode. L’élément HTML qui supporte le mieux ces paramètres est la balise <td>. Si vous obtenez cette erreur c’est que vous êtes dans ce cas :

there is no attribute « width »

Pour corriger ce type d’erreur, vous pouvez attribuer une taille d’image directement depuis le CSS ou encore appliquer un script/plugin de redimensionnement des images, le meilleur cas étant en PHP car il affichera les images directement à la bonne taille sans besoin d’ajouter les attributs width et height.

Les noms de classe ou d’id commençant par des chiffres

Ce type d’erreur est trés facile à corriger, car il n’y a pas d’alternative à cette contrainte. Les noms de classes CSS ou d’id ne peuvent commencer par des chiffres. Si vous êtes dans ce cas de figure, vous obtiendrez cette erreur :

Value of attribute « id » invalid : « 2 » connot start a name

Conclusion

J’espère que cet article vous sera utile pour corriger vos erreurs HTML les plus courantes afin que vous ayez le plus de pages valides. Ainsi vous améliorerez la sémantique HTML de votre site, son référencement par les bots de recherches et vous apporterez également une bonne dose d’accessibilité.

Cet article est inspiré d’un excellent article de line25.com source

[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

[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.