THELIA Forum

Welcome to the THELIA support and discusssion forum

Offline


Bonjour à tous et toutes,
Liste d'outils optimisation et suivi en ligne qui malgré la manière de créer des sites n'empêche pas l'utilisation de certains car nous ne sommes pas à l'abri d'un oubli, et cela peut vous servir de mémento-checklist si vous connaissez tout sur le bout des doigts.
Ceci n'est pas une obligation car chacun à sa propre méthodologie mais si cela peut aider certains
Vous trouverez des liens qui vérifient votre site au niveau sécurité, d'autres qui vous indiqueront vos erreurs css, les erreurs de links, optimisation de vos images suppression des formats exif, minifiers de scripts js et css, la doc Apache, htaccess, url rewriting, google news, liens Thelia forum et wiki [ce message n'est pas içi pour faire une redondance mais juste une aide ou tout est regroupé dans un seul et même thème bien sûr il reste l'optimisation proprement dite de Thelia en php, la structure hiérarchique de votre site, le design et votre niche (votre produit voire votre idée mise en valeur) ]

Tout ce qui est présenté dans cette liste (non exhaustive) est valable surtout pour les sites à hébergement mutualisé, mais vous avez de quoi vous occupez, même  pour les sites dédiés qui ont des supports et directives nginx (serveur web) http://www.wanadev.fr/kit-de-survie-symfony2-nginx/, varnish (accélérateur HTTP) http://symfony.com/fr/doc/current/cookb … rnish.html symphony http://symfony.com/ ...
Pour les visiteurs extérieurs à Thelia, certaines préconisations ne sont pas applicables sur des sites préconçus par exemple modification .htaccess, js and Co interdit, mais la minification des css reste possible à tester, modif de vos pages html, donc à voir sur l'hébergement ou votre site est installé

Autre remarque importante: faites une copie de vos fichiers avant toute modification magistrale de votre site: fichiers html, php, htaccess, css, js, cgi, vos entêtes, script... Vous pourrez revenir à un moment start de votre site de départ avant modif.
Vous pouvez avoir un hébergement qui ne supporte pas certaine modification par exemple
Les auteurs cités en référence et moi-même ne pouvons être tenu responsable si votre serveur est DOWN suite à un script installé ou une modification effectué dans un fichier css ou mise à jour de votre CMS pour endiguer des vulnérabilités. Il est sûr que si vous entreprenez des actions sur votre base SQL http://sql.developpez.com/ en direct vous pouvez vous retrouvez avec aucune donnée ou tout simplement plus de table dans votre base. CQFD Faites une copie de votre base et/ou travaillez éventuellement sur couple WAMP http://www.wampserver.com/

Après ces brèves descriptions et recommandations Place à l'optimisation & Co ... " Faites découvrir votre idée "

Permet de vérifier l'état de votre site
Free Website Malware Scanner
http://sitecheck3.sucuri.net/

Performance de votre site requêtes et compagnie
http://tools.pingdom.com/
http://www.webpagetest.org/
http://tools.pingdom.com/
http://developers.google.com/
http://www.whatsmyip.org/http-compression-test
http://gtmetrix.com/

Ce que certains vous révèlerons
Serve static content from a cookieless domain     
Leverage browser caching     
Specify a cache validator     
Avoid bad requests     
Minimize redirects     
Minimize request size     
Remove query strings from static resources     
Specify a Vary: Accept-Encoding header

Quelques explications des noms barbares passés à la moulinette par Yslow ou Pagespeed avec pas mal de liens explicatifs bien sûr c'est un forum dédié à MAGENTO mais reste applicable et compréhensible pour tous.
http://www.wikigento.com/optimisation-s … s-magento/
Le coté Doc Google en anglais
https://developers.google.com/speed/doc … ntro?csw=1

Quand on vous parle de CDN, prenez un café ou un thé voire un cachet d'aspirine
http://blog.wp-rocket.me/fr/difference- … -sharding/
Une petite explication sur les caches WEB
https://www.mnot.net/cache_docs/index.fr.html
La mise en place d'un CDN gratuit avec votre hébergeur sous Wordpress et des solutions payantes
http://www.seomix.fr/cdn-wordpress/

Vérifier et analyser votre entête header HTTP requête 200
http://www.webrankinfo.com/outils/header.php
ou
http://www.outils-referencement.com/out … ntete-http

Markup Validation Service css
http://validator.w3.org/

Vérifier la compression active
GIDZipTest™, a simple web page compression / gzip test tool.
http://www.gidnetwork.com/tools/gzip-test.php

Requête et performance
http://www.seomix.fr/guide-htaccess-per … hargement/

Tester vos snippets
http://www.google.com/webmasters/tools/richsnippets

Vérification de vos liens
http://www.brokenlinkcheck.com/
ou
http://validator.w3.org/checklink?uri=
http://www.verification-des-liens.com

Minifier et regrouper vos ressources CSS/Javascript :> Combine.php
A l'aide d'une simple réécriture d'URL et d'un script PHP, nous allons voir comment compresser, minifier, et regrouper vos fichiers CSS et Javascript.
L'auteur
http://rakaz.nl/code/combine
site français qui l'a utilisé pour différents projets
http://www.speedyweb.fr/combinez-vos-fi … cript.html

Minify your CSS
http://cssminifier.com/

Advanced lossy compression for PNG images that preserves full alpha transparency.
https://tinypng.com/

Optimisation image format JPEG et minifier css,js + Test page site
http://media4x.com/image/

Suppression des données EXIF
Jhead – Un outil en ligne de commande sous Linux pour modifier ou supprimer les données EXIF de vos fichiers JPEG, TIFF, WAVE etc …
http://la-vache-libre.org/jhead-un-outi … -wave-etc/

Optimization techniques specific to image format
http://www.smushit.com/ysmush.it/

Plugin navigateur
Firebug
SEO and Website Analysis by Woorank
Yslow
Page Speed

La vitesse et optimisation de chargement site
http://www.webrankinfo.com/dossiers/web … ite-rapide

Vous voulez identifiez une police que vous croisez sur le web ? Voici votre outil : TYPE SAMPLE
http://www.typesample.com/ avec Chrome

Pour savoir d'où provient une image ou si elle appartient à une agence ou qui l'utilise, il existe
https://www.tineye.com/

Un générateur de fontes aux différents formats otf, ttf, svg ... pour la lecture des différents navigateurs
Vérifier les droits d'utilisation des fontes commerciales, publiques et avec contraintes
http://www.fontsquirrel.com/tools/webfont-generator

une autre solution pour une correspondance de polices propriétaires ou sont regroupées 13 polices avec une alternative
Sans-Serif
    Avenir
    Century Gothic
    Eurostile
    Frutiger
    Futura
    Gill Sans
    Myriad Pro
    Stone Sans

Serif
    Bembo
    Cambria
    Rockwell
    Stone Serif
    Trajan
voir l'exemple
http://joelcrawfordsmith.com/new/font/eurostile

Le partage et l'emprunt des images et textes sont soumis à certaines règles de droit même si nous sommes sur le Net, les licences existent, différentes formules sont proposées, vous avez le choix entre 6 creatives commons
http://creativecommons.fr/licences/

Retrouvez vos descriptions d'annuaires avec Lazarus
le plugin vous permet de retrouver le texte que vous aviez entré dans un champ de texte et qui aurait disparu.
https://addons.mozilla.org/fr/firefox/a … -recovery/

XDEBUG EXTENSION FOR PHP
http://xdebug.org/

La doc APACHE
http://httpd.apache.org/docs/2.0/mod/co … #keepalive

Guide d'aide Htaccess
http://www.seomix.fr/guide-htaccess-per … hargement/

La doc .htaccess version anglaise
http://www.askapache.com/htaccess/htaccess.html

un exemple de fichier htacces

Options +FollowSymlinks -Indexes
AddDefaultCharset UTF-8
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([a-zA-Z_.\-0-9]+)$ index.php?url=$1 [L,QSA]
ErrorDocument 404 /?fond=404
</IfModule>

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /template/combine.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) /template/combine.php?type=javascript&files=$1

#Set Cookie with env variable
Header set Set-Cookie "language=%{lang}e; path=/;" env=lang

ErrorDocument 302 /302_MOVED_TEMPORARILY

RewriteEngine On
RewriteBase /
RewriteRule ^(.*)(fr|en)/$ - [co=lang:$2:.votredomaine.com:7200:/]

#HTTP PROTOCOL
#Denies any badly formed HTTP PROTOCOL in the request, 0.9, 1.0, and 1.1 only[403]
RewriteCond %{THE_REQUEST} !^[A-Z]{3,9}\ .+\ HTTP/(0\.9|1\.0|1\.1) [NC]
RewriteRule .* - [F,NS,L]

#Rewrite to www dynamically
RewriteCond %{REQUEST_URI} !^/(robots\.txt|favicon\.ico|sitemap\.xml)$
RewriteCond %{HTTP_HOST} !^www\.votredomaine\.com$ [NC]
RewriteRule ^(.*)$ http://www.votredomaine.com/$1 [R=301,L]

#301 Redirect Old File
RewriteCond %{REQUEST_URI} !^/robots\.txt$ [NC]
RewriteCond %{HTTP_HOST} !^www\.[a-z-]+\.[a-z]{2,6} [NC]
RewriteCond %{HTTP_HOST} ([a-z-]+\.[a-z]{2,6})$   [NC]
RewriteRule ^/(.*)$ http://%1/$1 [R=301,L]

RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?votredomaine\.com/.*$ [NC]
RewriteRule \.(gif|jpg|swf|flv|png)$ http://www.votredomaine.com/feed.gif [R=302,L]

#Trackback Spam 
RewriteCond %{REQUEST_METHOD} =POST
RewriteCond %{HTTP_USER_AGENT} ^.*(opera|mozilla|firefox|msie|safari).*$ [NC]
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /.+/trackback/?\ HTTP/ [NC]
RewriteRule .* - [F,NS,L]

#Blocking based on User-Agent Header
SetEnvIfNoCase ^User-Agent$ .*(craftbot|download|extract|stripper|sucker|ninja|clshttp|webspider|leacher|collector|grabber|webpictures) HTTP_SAFE_BADBOT
SetEnvIfNoCase ^User-Agent$ .*(libwww-perl|aesop_com_spiderman) HTTP_SAFE_BADBOT
Deny from env=HTTP_SAFE_BADBOT

#Blocking with RewriteCond
RewriteCond %{HTTP_USER_AGENT} ^.*(craftbot|download|extract|stripper|sucker|ninja|clshttp|webspider|leacher|collector|grabber|webpictures).*$ [NC]
RewriteRule . - [F,L]

# MOD_DEFLATE COMPRESSION
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
#Pour les navigateurs incompatibles
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
#ne pas mettre en cache si ces fichiers le sont déjà
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
#les proxies doivent donner le bon contenu
Header append Vary User-Agent env=!dont-vary
# BEGIN Expire headers
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresDefault "access plus 7200 seconds"
 ExpiresByType image/jpg "access plus 2592000 seconds"
 ExpiresByType image/jpeg "access plus 2592000 seconds"
 ExpiresByType image/png "access plus 2592000 seconds"
 ExpiresByType image/gif "access plus 2592000 seconds"
 AddType image/x-icon .ico
 ExpiresByType image/ico "access plus 2592000 seconds"
 ExpiresByType image/icon "access plus 2592000 seconds"
 ExpiresByType image/x-icon "access plus 2592000 seconds"
 ExpiresByType text/css "access plus 2592000 seconds"
 ExpiresByType text/javascript "access plus 2592000 seconds"
 ExpiresByType text/html "access plus 7200 seconds"
 ExpiresByType application/xhtml+xml "access plus 7200 seconds"
 ExpiresByType application/javascript "access plus 2592000 seconds"
 ExpiresByType application/x-javascript "access plus 2592000 seconds"
 ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
</IfModule>

### HEADER CACHING
<FilesMatch "\.(flv|gif|jpg|jpeg|png|ico)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
<FilesMatch "\.(js|css|pdf|swf)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
<FilesMatch "\.(html|htm|txt)$">
Header set Cache-Control "max-age=600"
</FilesMatch>
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
 
## ALTERNATE EXPIRES CACHING
ExpiresActive On
ExpiresDefault A604800
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType text/html A300
 
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
ExpiresActive Off
</FilesMatch>
 
## META HTTP-EQUIV REPLACEMENTS
<FilesMatch "\.(html|htm|php)$">
Header set imagetoolbar "no"
</FilesMatch>

# protect the htaccess file
<files .htaccess>
order allow,deny
deny from all
</files>
# protection de la lecture des répertoires
Options -Indexes

Sécuriser votre site en excluant certaines IP dans votre .htaccess qui Spam votre site ou redirige votre site sur un autre

 définir votre nom de domaine nom-domaine.org que vous souhaitez bannir
Deny from mon-domaine.org
ou
Deny from 132.132.132.132
On peut indiquer Deny from 132.132.132 qui affectera les IP de 132.132.132.0 à 132.132.132.255 

le filtrage suivant permet de rediriger l'ip bannie vers une page d'erreur
une liste non exhaustive

   401 : Authorization Required (mauvais mot de passe, par exemple))
    403 : Forbidden (Accès refusé)
    404 : Not Found (Ressource non trouvée)
    500 : Internal Server Error (Erreur interne du serveur)

Tout ceci n'exclu pas de changer votre mot de passe et d'effectuer une mise à jour de votre version Thélia ou autres CMS.
Vérifier aussi vos éventuels scripts qui sont percés et suivez le conseil ci-dessous MAJ

Mettre à jour Thelia Avant, Pendant, Après
http://thelia.net/wiki/index.php?title= … our_Thelia

Réecriture URL Rewriting
http://www.webmaster-hub.com/publicatio … riture-des

Le fichier robots.txt
le code final est destiné à Wordpress mais il indique la procédure, l'explication de l'utilité du fichier
http://www.seomix.fr/robots-txt-wordpress/
Le fichier robots.txt contient une liste de ressources du site qui ne sont pas censées être indexées par les moteurs de recherches.
http://robots-txt.com/

Quelques conseils sur l'écriture d'un fichier robots.txt
http://www.webrankinfo.com/dossiers/ind … robots-txt

Générateur de robots.txt
http://tools.seobook.com/robots-txt/generator/

Outil de test de robots.txt
http://www.frobee.com/robots-txt-check

sinon un fichier robots.txt pour thelia

User-Agent: *
Disallow:
Sitemap: http://www.votredomaine.com/sitemap.html

A quoi sert un fichier sitemap
http://www.webrankinfo.com/dossiers/sit … er-sitemap

Liste des tutos 1.5.x
http://thelia.griggione.fr/fr/liste2.php

Bien entendu je ne l'ai pas oublié
Le WIKI THELIA
http://thelia.net/wiki/index.php/Accueil

Le Forum THELIA
http://thelia.net/forum

Les Modules ou plugins thelia
http://thelia.net/Plugins.html
En voici quelques uns qui sont les plus utiles que j'ai relevé sur un post par contre je ne peux désigner l'auteur, je ne m'en souviens plus, mais qu'il se fasse connaitre et j'indiquerai son nom
Formulaires magiques, Gestions des réécritures, Traduction, Connexion auto, Tinyce plus, SEO ver 1.0, filtre format nombre, filtre mail

2 liens d'optimisation Thelia sur le forum
http://thelia.net/forum/viewtopic.php?id=2412
http://thelia.net/forum/viewtopic.php?id=5378

Le Book Thelia http://files.allimant.org/file-Re3226b0 … 7e77a43ffe une ancienne version et bien des choses ne sont pas applicables à Thelia 1.5 mise à disposition par roadster31
autre source du manuel Réalisé par KARCHOUD S.
http://www.allindoc.com/story.php?title … D821772199

Réseau social Thelia
N'hésitez pas à suivre Thelia sur twitter : https://twitter.com/theliaecommerce

Le support pour paraître dans Google News
Publication des articles sur Google Actualités, le format, les exigences ...
https://support.google.com/news/publish … ic=4359865

Si vous désirez améliorer votre visibilité sur le Web et surtout auprès du moteur de recherche Google qui veut absolument être énorme par les contenus que nous apportons et notre dépendance de cette institution, voici quelques idées conseils, inscrivez votre site sur google news en ayant pris soin de lire et répondu aux exigences.
Lisez les consignes avant de proposer votre nouvelle entrée sachez quelle peut durer quelques semaines vu le nombre de postulants
Profil pour les website à contenus éditorialistes

Ce que Google Actu souhaite
Nous nous efforçons d'intégrer sur Google Actualités la plus grande diversité possible de types de sites. Toutefois, nous n'incluons que les articles portant sur des sujets d'actualité récents et importants ou intéressants pour notre audience. En règle générale, nous excluons les types de contenus suivants : articles pratiques, petites annonces, offres d'emploi, publicités ou articles strictement informatifs (prévisions météo, informations boursières, etc.).
https://support.google.com/news/publish … ic=4359926

Vérifiez vos articles sont bien inclus
A tester votre site[ Boxe site:xxx.com ]

Définissez votre ligne éditoriale
https://support.google.com/news/publish … ic=4359926

Consignes générales Google
https://support.google.com/news/publish … ic=4359866

Le choix des rédactions – Flux RSS
https://support.google.com/news/publish … ic=4359926

Les urls ne contenant pas d’ID ne sont tout simplement pas crawlées.
Exemples d’urls à id conformes pour Google Actualités
www.monsite.com/actu/1234/titre-article.html
www.monsite.com.actu/titre-article-1234.html

Créer un sitemap Google Actualités
A noter que vous ne pouvez pas utiliser le Générateur Sitemap de Google pour créer un sitemap pour Google Actualités.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
  <url>
    <loc>http://www.creactivit.com/blog/vie-commercante/commercant/pepinieres-valero-oliviersdeprovence-com/</loc>
    <news:news>
      <news:publication>
        <news:name>Expression graphique</news:name>
        <news:language>fr</news:language>
      </news:publication>
      <news:access>Subscription</news:access>
      <news:genres>PressRelease, Blog</news:genres>
      <news:publication_date>2008-12-23</news:publication_date>
      <news:title>Les entreprises A et B envisagent une fusion</news:title>
      <news:keywords>creation, graphisme, web, A, B</news:keywords>
      <news:stock_tickers>CREACTIVIT:A, CREACTIVIT:B</news:actualites>
    </news:news>
  </url>
</urlset>

Validation des sitemap pour google news bien que précisé facultatif mais vous pouvez indiquer leur présence dans votre fichier robots.txt
    Éléments spécifiques de Google Actualités : http://www.google.com/schemas/sitemap-n … p-news.xsd
    Éléments Sitemap fondamentaux : http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd

La page dédié aux outils Webmaster
https://developers.google.com/webmaster … s_meta_tag

sitemap-generators
http://code.google.com/p/sitemap-genera … Generators

Gestion des erreurs d'exploration propres à Google Actualités
https://support.google.com/news/publisher/answer/93994

outils Google pour les médias. Son objectif: vous aider à mieux collecter et diffuser plus largement des informations à la télévision, à la radio, sur papier et en ligne
http://www.google.com/get/mediatools/

Créez un profil Google+ et Créez un lien vers votre profil Google+ à partir de votre page Web
https://accounts.google.com/ServiceLogi … rc%3Dgplp0

Vous pouvez créer sur votre site une partie indiquant les rédacteurs de votre ligne journalistique, cela amènerait un peu plus de crédit à votre site vis à vis de Google (à voir et à tester) aucune information probante comme tout est donné au compte goutte mais très possible et déjà en service pour certains qui répondent à certaines exigences et références en terme de qualité de rédaction journalistique et source de l'info

A propos de Google authorship
http://www.webrankinfo.com/dossiers/authorship/tuto

Un complément sur le taux de rebond calculé par Google analytics
http://www.seomix.fr/le-taux-de-rebond- … hangez-le/

Si vous avez l'intention de questionner vos followers, visiteurs and Co. Créez un questionnaire via google formulaire
https://accounts.google.com/ServiceLogi … tmpl=forms

Optimisation Présence Web
A propos de votre situation et votre présence sur Google
Inscrivez-vous sur Google Adresses gratuitement
Situation et descriptif de votre entreprise en signalant la présence de votre boutique ayant pignon sur rue et sur internet

Si votre activité n’est pas seulement locale, s’inscrire à Google Adresses vous permettra d’être plus facilement trouvable sur les moteurs de recherche par les gens qui habitent à proximité de votre adresse associée à une recherche sur votre ville ou département.
Indiquer correctement votre raison sociale, vos horaires d'ouverture, une description éloquente brève mais synthétique et n'oubliez pas de valider votre fiche mais c'est précisé dans le formulaire.
https://www.google.com/local/business/

Optimisation coté Design

Template Thelia
http://www.openstudio.fr/lab/Template-M … helia.html
sinon vous avez une banque de maquette gratuites à adapter c'est selon vos envies
http://www.freewebsitetemplates.com/pre … index.html
http://www.freewebsitetemplates.com/

Association des couleurs pour votre site
Parce que les couleurs évoquent de suite un sentiment, qui colle à l’activité. Un bref rappel des couleurs avec leur signification

Et aussi en Marketing : comment les couleurs d’une marque ou d’un produit influencent les consommateurs
Source avec une infographie de l'importance des couleurs utilisée pour votre site
En savoir plus sur http://frenchweb.fr/marketing-comment-l … urs/159713
un extrait
95% des entreprises n’utilisent qu’une ou deux couleurs pour représenter leur marque. Un choix crucial pour la perception de la marque par les consommateurs, selon une infographie publiée par Marketo et Column Five. En effet, la couleur influencerait entre 60% et 80% des choix du consommateur. 41% des marques choisissent de ne faire apparaître que le nom – seul -, alors que 9% d’entre elles n’utilisent que leur logo sans citer le nom. Dans ce dernier cas, il s’agit bien sûr, le plus souvent, des marques à fortes notoriétés.

    33% des marques choisissent le bleu, symbole de confiance et de sécurité ;
    29% des marques plébiscitent le rouge, couleur énergique qui capte l’attention ;
    28% des marques préfèrent le noir ou le gris, pour le prestige et la durabilité ;
    13% des marques utilisent le jaune ou l’or, symbole de lumière (motivation et créativité).

Voici quelques exemples basiques :

    Le Rouge est dynamique, mais doit être utilisé à petites doses, sous peine de virer à l’agressif. Couleur du sang, parfois de la violence, il est à utiliser avec discernement, à côté de couleurs plutôt apaisantes (comme le gris, noir, blanc…)
    Le Noir est très classe, universel, mais il peut aussi devenir banal, voire sinistre (symbole de mort dans nos cultures). Il est à rehausser de couleurs gaies (comme le fuchsia, l’orange…) ou pastel par exemple, pour l’adoucir (vieux rose, jaune poussin, vert amande…)
    Le Rose layette est bien sûr très enfantin dans son code, souvent réservé aux filles, utilisé parfois dans des blogs de cuisine, de mariage, ou de prêt à porter en conjugaison avec d’autres couleurs qui le sortent de ce contexte enfantin (comme un beau marron ou gris taupe). Il est symbole de douceur et de féminité. Le bleu layette est bien sûr l’équivalent masculin
    Le Bleu: soutenu, roi ou marine, convient à des activités industrielles, car il est symbole d’une force tranquille, d’un dynamisme bien géré, voire de calme. Le côté marine est bien sûr relié à la mer, et peut être parfait pour un gîte en bord de mer, du prêt à porter, rendu plus gai avec des couleurs comme le jaune doré et blanc par exemple (ambiance maritime assez connue)
    Le Vert, sans grande surprise, est relié à la nature, à la verdure : il est apaisant et assez neutre (sauf pour les artistes !), surtout dans ses tons clairs, amande, pastel. Les activités liées à la nature (comme le bio, un service de randonnée, de centre de plein air…), gagneront à intégrer du vert dans leur graphisme. Plus vif, il est dynamique et symbole d’espoir. Il peut aussi convenir à des professions intellectuelles, à l’industrie, etc… : c’est une couleur qui peut s’associer à beaucoup d’activités, et dont l’impact change pas mal selon la teinte choisie
    Le Jaune rappelle le soleil, son énergie, son dynamisme. Dans sa version « poussin », il est plus doux. C’est une couleur chaude et sympathique car reliée à l’été. Un jaune très clair ou doré ira très bien avec des couleurs plus sombres comme un bleu profond, du noir, des tons de gris, mais aussi du violet, qu’il rend éclatant. Il peut s’associer sans problème à son copain l’orange, voire le rouge pour un côté très punchy. Pour le rose, le vert ou le bleu, c’est plus délicat et il faut jouer sur les teintes pour les accorder correctement, sous peine d’avoir un résultat criard
    L’Orange a un peu le même code que le jaune côté dynamisme, avec un aspect très chaleureux. Il va réveiller le violet, bleu marine ou noir
    le violet plaît beaucoup ces dernières années. Longtemps relégué aux activités de type spirituel, il est à présent très utilisé dans les professions intellectuelles, dont le conseil. Couleur dite froide, il suggère la réflexion, la patience et la profondeur, d’où son affinité avec des activités de type conseil. Pour ne pas être perçu comme froid, on l’associe généralement avec des couleurs plus dynamiques comme l’orange, vert ou rose
    Le Blanc est LA couleur passe partout, symbole de pureté, reliée au mariage ou à la naissance, sympathique par excellence. Mais qui peut aussi devenir froide ou fade, si elle est utilisée seule. Les activités dont le contenu est très visuel gagneront à recourir largement au blanc, en l’accompagnant par petites touches de couleurs : comme le noir, il s’accorde avec toutes les couleurs, puisque dans le spectre chromatique, il les contient toutes

On trouve aujourd’hui sur le web des sites pour aider à créer des harmonies de couleurs sans se tromper. Par exemple https://kuler.adobe.com/create/color-wheel/ ou http://colorschemedesigner.com/

Ajouter une favicon dans le navigateur
Une favicon est au format 16px x 16px avec l'extension .ico qui s’affiche dans l’onglet de notre navigateur ou devant la barre d’adresse
Convertissez votre image en favicon
http://iconverticons.com/online/
Créer un favicon en ligne
http://www.favicon.cc/
Tester le TAG, La présence de votre favicon
http://www.html-kit.com/favicon/validator/

Visualisez votre site sous d'autres navigateurs et résolutions
Extensions Chrome pour les développeurs
IE Tab : tester le rendu sous Internet Explorer dans Chrome
Window Resizer : tester les sites dans différentes résolutions d'écran

Test en ligne de votre site qui vous permet de visionner le rendu de vos documents web sous différents navigateurs.
http://browsershots.org/

Optimisation de vos textes afin de définir votre déontologie par exemple
Si vous utilisez un blog wordpress, drupal ou autre qui serait incorporé dans votre site afin de diffuser des textes voici un comparateur de texte qui vous évitera le plagiat
http://www.plagium.com/

Optimisation de vos images constantes CAD les sprites
http://www.alsacreations.com/tuto/lire/ … ition.html
exemple d'insertion dans votre fichier css

{background-image:url("../img/votre_sprite.png"); <= le lien et situation de votre sprite
background-position:-13px -199px;}<=la position sur votre sprite 

Optimisation code page Les Erreurs HTML et CSS et 404

Erreur #FermetureBalise
Oublier de fermer une balise
fermer les balises comme ceci :

<votrebalise></votrebalise> OU <votrebalise />

Erreur #BalisesObsolètes
Les balises telles que

<font>, <center>, <basefont>

sont déclarées obsolètes. Evitez de les utiliser. intégrez les dans votre code CSS.

Erreur #InclureCSS dans le HTML
On inclut le CSS dans le code HTML de cette façon :

 <p style=”color:red; font-size:12px;”>Votre texte</p>.

Centraliser tout votre CSS dans un fichier dédié = maintenance plus facile et votre code HTML plus cool. Vous n’aurez qu’à déclarer votre feuille de style dans le head comme ceci :

 <link rel=”stylesheet” href=”style.css”>.

Erreur #MauvaiseVersionHTML
Vérifier si vous utilisez bien le bon DOCTYPE

Erreur #MélangerBalisesentreelles
Organisez votre code !! Ne mélangez pas des choses comme cela :

<p><div><h1></p></div></h1>

Erreur #MetaInutiles et celles que vous pouvez utiliser !!
Ne vous encombrez pas avec des balises meta qui ne servent à rien. Les balises meta “Keyword”, “Revisit-after”, “Author”… ne sont strictement plus utilisés. Renseignez-vous sur les balises meta obsolètes.
http://www.slow-lab.com/guide-balises-meta.php

Erreur #Encodage
Utiliser un encodage universel comme l’UTF-8 en le précisant dans l’entête head.
<meta charset=”UTF-8″>
Pour les versions de thélia déjà préconfiguré dans le meta inclus dans le header ainsi que d'autres CMS tel Wordpress, Dotclear, Prestashop, Magento ...

Erreur #Oublier de fermer les crochets ou les points-virgules
on peut oublier le dernier point virgule d’une règle, mais uniquement le dernier.

Exemple correct :

#ma-div { display: block; margin: 0 auto; width: 650px; height: 200px }

–> OK

Non correct

#ma-div { display: block margin: 0 auto width: 650px; height: 200px }

–> Ko ;-)

Une explications des erreurs via google
Erreurs de type "soft 404"
https://support.google.com/webmasters/a … ic=1724951

Erreurs 404 inattendues
https://support.google.com/webmasters/a … ic=1724951

Si vous avez oubliez votre dernière modif qui bloque votre site dans un fichier voici un utilitaire qui pourra vous rendre service
Comparaison de fichier original, copie, modification
WinMerge http://winmerge.org/?lang=frest un petit utilitaire permettant de comparer le contenu de deux fichiers. Très utile lorsque vous devez retrouver les lignes modifiées dans un fichier par rapport au fichier original ou à une nouvelle version du fichier.

Optimisation fiche produit
Tuto : Google e-commerce pour analytics via Lexa
http://thelia.net/forum/viewtopic.php?id=6691

Démarche de diagnostic et d'optimisation pour améliorer les performances d'un site Web base MySQL. via TheCodingMachine
http://thecodingmachine.developpez.com/ … -site-web/

Optimisation e-marketing référencement
Marketing et Référencement Web
https://plus.google.com/communities/103 … 0401873765

Des outils pour tester configurer votre site sur un serveur local et éditer vos fichiers

EasyPHP, WAMP, CodeLobster c'est selon, ils vous fournissent tous un environnement type mais bien rôdé
http://www.easyphp.org
http://www.mamp.info : version Mac OSX
http://www.wampserver.com : version Windows

    un serveur Apache
    un serveur MySQL
    PHP
    phpMyAdmin

CodeLobster http://www.codelobster.com/ Cet IDE vous apportera la coloration syntaxique, la complétion de code, l'auto-indentation du code ...

Editeurs de code
sous WinNotepad++ sous Mac Text Mate souos linux Emacs ou gedit

Notepad++ http://notepad-plus-plus.org/  éditeur de code pour le code PHP ou les feuilles de style.

Pour en savoir + sur notre activité Créactivi't Sandrine ou Stéphane 84380 Mazan http://www.creactivit.com/blog/actualit … tre-credo/

À propos de ce document

Tous les descriptifs documents et marques cités et publiés dans ce mémento restent la propriété intellectuelle des auteurs et sites respectifs mentionnés.
La présentation du " Mémento Outils optimisation site Web " reste la propriété de Créactivi't.
Vous pouvez partager, diffuser, conserver et améliorer cette liste en indiquant la source du partage
Je vous remercie par avance et faites en bon usage
Stéphane https://www.facebook.com/stephane.webgraph
Ce document est protégé © 2014 Stéphane Lieppe. Ce travail est concédé sous licence Creative Commons.
Tous les noms de marques cités sont les propriétés de leurs détenteurs respectifs.

Last edited by stephst84 (01-08-2014 08:05:34)

  • manu
  • faï tot petar miladiu

Offline


Bonjour,

petit erreur dans ton exemple de fichier robots.txt, tu as copié le contenu d'un .htaccess


http://doc.thelia.net/
http://thelia.net/modules
http://raynaud.io
PGP public Key : 0xC6E546A6

Offline


Rectifié avec un exemple pour chacun robot et htaccess

Offline


Pour rappel, le poids moyen des pages du top 1 000 des sites les plus visités dans le monde est de 1093 ko.
vu sur https://www.dareboost.com

Offline


Merci smile


le-bouquiniste.com                                                      tongue  plugin 1.4.x / 1.5   => valeurstock / Mailpaiement / formcontact

Offline


Comment créer un module Thelia - partie 1
par Manuel Raynaud

Thelia permet d’étendre ses fonctionnalités grâce à l’ajout de plugins. Nous allons voir ici comment en réaliser un.

Il existe 4 types de plugins permettant d’étendre les fonctionnalités de Thelia :
http://thelia.net/v1/blog/article/comme … 2013-01-28

Offline


Complément d'info orientés sur les serveurs mutualisés
un lien intéressant " Sécuriser son site web des attaques des pirates et hackers " à partir du fichier htaccess, protection des fichiers et dossiers, protection mots de passe ... à tester
auteur du post enycu
http://forum.ovh.com/showthread.php?192 … et-hackers

Last edited by stephst84 (23-01-2015 11:53:42)

Offline


2 outils gratuits, mais vous pouvez effectuer une donation
CrawlTrack, tableau de bord du webmaster.
Web analytique et référencement

CrawlProtect, la sécurité de votre site internet.
Protection anti-hacking, anti-spam et anti-vol de contenu
http://www.crawltrack.fr/crawlprotect/documentation.php

Offline


Parce que c'est bien d'avoir un Zoli site !!! mais cela ne suffit peut-être pas, donc comme vous vous en doutez il faut rajouter un peu de magie SEO

Valable pour les versions Thelia  1.53 pas testé au dessus (si vous avez des infos vous pouvez partager votre expérience)

Donc vous avez un plugin qui fera l'affaire, Je vous laisse chechez sur la contrib et je vous mets sur la piste

 http://thelia.net/v1/Plugins.html plugin de Manuel Raynaud 

Si vous avez besoin d'infos sur le sujet traité par d'autres personnes

Requète search "seo+thelia" sur le forum dédié


Le SEO pour Thélia

J'ai pris ce post pour exemple qui est le plus complet

 http://thelia.net/forum/viewtopic.php?id=3875 

relever dans le post suivant

cit : "Baxter89


Bonjour,

Bon j'ai modifier les boucles SEO, qui a priori fonctionne très bien. pour le champ Meta Description (#METADESC) comme le précise griggione sa ferait un doublon. Donc en attendant d'avoir une explication de ce champ meta description je met le mot France.

Meta rubrique
<THELIA_seo type="SEO" rubrique="#RUBRIQUE_ID">
     <title>#TITRE #VARIABLE(nomsite)</title>
     <meta name="description" content="#DESCRIPTION"/>
    <meta name="keywords" content="#METAKEYWORDS"/>
</THELIA_seo>

Meta produit
<THELIA_seo type="SEO" produit="#PRODUIT_ID">
    <title>#TITRE #VARIABLE(nomsite)</title>
    <meta name="description" lang="fr" content="#DESCRIPTION"/>
    <meta name="keywords" content="#METAKEYWORDS"/>
</THELIA_seo>

Contenu et Dossier non testé j'ai en pas sur mon site

Meta contenu
<THELIA_seo type="SEO" contenu="#CONTENU_ID">
    <title>#TITRE #VARIABLE(nomsite)</title>
    <meta name="description" content="#DESCRIPTION"/>
    <meta name="keywords" content="#METAKEYWORDS"/>
</THELIA_seo>

Meta dossier
<THELIA_seo type="SEO" dossier="#DOSSIER_ID">
    <title>#TITRE #VARIABLE(nomsite)</title>
    <meta name="description" content="#DESCRIPTION"/>
    <meta name="keywords" content="#METAKEYWORDS"/>
</THELIA_seo> 

"

Donc pour jouer du SEO, vous installer votre plugin décompressé (dossier) directement dans le répertoire plugin, vous activer le plugin dans votre B.O. et ajouter l'une de ces quelques lignes dans vos metas appropriées

A savoir que les "#METAKEYWORDS" ne sont plus trop pris en compte

La partie SEO de vos rubriques, dossiers, produits ... s'affichera automatiquement dans le bas de votre fiche courante, vous remplissez les données et vous validez pour la prise en compte par le moteur de thelia et les moteurs de recherches
Petit rappel
<title> 68  caractères
<Description> 160 caractères sinon texte tronqué par ...

Pour tester vos différentes inscriptions

http://www.annuaire-info.com/outil-referencement/title-meta-description/ 

et vous aurez un aperçu de vos textes bien sûr cette partie est la 1ère étape du SEO qui permet de prendre la bonne direction