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 » Ergonomie

Featured Post

[ToolBox] +10 snippets .htaccess

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

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.

[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