optimisation-outweb

Spriter

Posté le par dans la catégorie Optimisation.

Pour faire suite à l’article sur l’optimisation, voici comment gagner du temps sur le chargement des images de vos pages web.

En général, les développeurs débutants, ou peu soucieux du temps de chargement de la page, utilisent un nombre conséquent d’images différentes. Chaque image est donc téléchargée une à une lors de l’affichage de la page web. Donc s’il y a 100 images sur la page il faudra 100 requêtes HTTP pour toutes les afficher.

Maintenant, il y a une solution alternative, le spriter, qui permet d’afficher les 100 images simultanément et en une seule requête. La page en question s’affiche donc très rapidement. Les grands sites Internet comme Google, Facebook, Amazon, … utilisent cette technique.

Voici par exemple le spriter de Google

outweb-spriter

La solution, c’est de réunir toutes les images en une seule grande et de n’afficher que la portion dont nous avons besoin grâce au css.

Voici un exemple simple de spriter

(les icones proviennent de iconFinder)

Nous allons utiliser cette image pour afficher seulement une icône à la fois.

<html>
	<head>
		<style>
		.user_16{ background: url(csg-4dff2e3d67db5.png) 0px 0px; width: 16px; height: 16px; } 
		.home{ background: url(csg-4dff2e3d67db5.png) 0 -66px; width: 16px; height: 16px; } 
		.world{ background: url(csg-4dff2e3d67db5.png) 0 -132px; width: 16px; height: 16px; } 
		.premium{background: url(csg-4dff2e3d67db5.png) 0 -198px; width: 32px; height: 32px; } 
		.star{background: url(csg-4dff2e3d67db5.png)0 -280px; width: 16px; height: 16px; } 
		.logout{ background: url(csg-4dff2e3d67db5.png) 0 -346px; width: 16px; height: 16px;} 
		.my-account{ background: url(csg-4dff2e3d67db5.png) 0 -412px; width: 32px; height: 32px; } 
		.calendar{ background: url(csg-4dff2e3d67db5.png) 0 -494px; width: 16px; height: 16px; } 
		.my-account{ background: url(csg-4dff2e3d67db5.png) 0 -560px; width: 16px; height: 16px; } 
		.attibutes{ background: url(csg-4dff2e3d67db5.png) 0 -626px; width: 32px; height: 32px; } 
		.email{background: url(csg-4dff2e3d67db5.png) 0 -708px; width: 32px; height: 32px; } 
		.upcoming-work{ background: url(csg-4dff2e3d67db5.png) 0 -790px; width: 32px; height: 32px; } 
		.monotone_arrow_play_right_next{ background: url(csg-4dff2e3d67db5.png) 0 -872px; width: 128px; height: 128px; } 
		</style>
	</head>
	<body>
             <div class='home'></div>
	     <div class='calendar'></div>
	     <div class='email'></div>
	     <div class='user_16'></div>
             
     </body>
</html>

Ici, je vous présente un exemple simple d’utilisation de spriter. Seulement les quatre icônes sélectionnées sont affichées, elles apparaissent toutes en même temps.

Différents sites Internet vous permettent de fusionner et de récupérer les coordonnées des icônes dans le spriter : Spritemapper , spritegen ou spritecow

outweb-jquery

Des tooltips élégants avec tipTip

Posté le par dans la catégorie JQuery.

Quand vous souhaitez donner des informations à la volée, vous utilisez sûrement l’attribut title sur vos liens. Cependant, le rendu ne sera pas le même d’un navigateur à l’autre. De plus, les infos bulles basiques du navigateur ou du système d’exploitation sont rarement belles. Mais grâce au plugin JQuery tipTip vous allez pouvoir mettre en place des tooltips élégants. TipTip est fourni avec un CSS par défaut noir, mais libre à vous de le changer car il n’est pas très complexe.

Pour l’utiliser c’est très simple, pour le mot où vous souhaitez ajouter un tooltip il faut faire :

   <a class="tiptip" href="#" title="message tooltip">mot</a>

Et côté JavaScript, vous avez juste à faire appel au plugin sur votre classe tipTip :

    $(function(){
	$(".tiptip").tipTip();
    });

Voici un exemple en images, avec un contenu assez long dans la tooltip :

Exemple : démo ou télécharger

debuggage-outweb

Analyseur et correcteur CSS

Posté le par dans la catégorie Débogage.

Voici un web service qui va vous faire gagner pas mal de temps lors de la création de vos styles. Souvent on n’obtient pas le résultat voulu, sans savoir pourquoi. CSS Lint vous permet de trouver les règles qui ne respectent pas la norme et vous proposent en plus une correction qui se révèle très souvent être bonne.

On lui donne en entrée un code css (par exemple le suivant) qui ne donnera pas le même résultat sur tous les navigateurs. En effet, il y aura un effet de transparence sous IE. La balise body n’est ici pas utilisée correctement et en plus on ne met rien dans la règle. Bref un code css erroné et avec une partie inutile. 

div {
  background: url("something.png");
  display: inline;
  padding-left: 3px;
  overflow-x:hidden ;
  border-right: 1px dotted #066;
  filter : alpha(opacity=10); 
}

#body
{}

Voici la sortie de CSS Lint :

Css lint nous ressort bien toutes nos erreurs. Le seul bémol c’est qu’il ne détecte pas les règles propriétaires comme filter : alpha.

En conclusion, c’est un outil qui peut aider, car il détecte les erreurs, mais à la sortie le css corrigé n’est pas compatible avec tous les navigateurs. Encore un peu de boulot pour le web designer :P

outweb-jquery

Détecter des visages avec JQuery

Posté le par dans la catégorie JQuery.

Vous souhaitez mettre en place un système d’avatar sur votre site Internet, et vous souhaitez que l’utilisateur puisse envoyer sa photo, puis puisse la recadrer selon son désir ? Le problème réside dans la détection du visage. Comment faire pour pré-cadrer le ou les visages ?

Face Detection est un plugin JQuery qui vous permettra de récupérer les coordonnées des visages présents sur la photo, et ainsi permettre de recadrer celle-ci.

Vous trouverez à la page Face Detection un exemple, sur une image de bonne taille et contenant deux visages de face.

Encore une fois, l’utilisation est très simple, il vous suffit, après avoir inclu les fichiers javascript, de faire un appel de cette manière :

var coords = $('#myPicture').faceDetection();

Après cet appel, la variable coords contient (comme son nom l’indique) les coordonnées des visages qui ont été détectés sous le format suivant :

  • x: coordonnée X du visage
  • y: coordonnée Y du visage
  • width: largeur du visage
  • height: hauteur du visage
  • positionX: positon en x par rapport à document
  • positionY: positon en y par rapport à document
  • offsetX: positon en x par rapport à parent
  • offsetY: positon en y par rapport à parent

Voici le résultat obtenu sur une image après avoir fait appel au plugin, ici les coordonnées sont utilisées pour dessiner un rectangle autour de la tête :

En combinant ceci à Système de tag d’images avec JQuery image annotate on pourrait obtenir un tag d’images avancé, détectant les visages et vous proposant d’y mettre un nom.

outweb-jquery

Personnaliser vos menus déroulants avec DropKick

Posté le par dans la catégorie JQuery.

Vous trouvez que vos menus select sont trop simples ? Le plugin JQuery DropKick vous permet de faire des menus déroulants élégants sans perdre de temps à changer le css, et à travailler sur la compatibilité.

Si les thèmes par défaut ne vous conviennent pas, vous avez la possibilité de vous faire le vôtre assez simplement.

De tels plugins rendent plus attirants des formulaires qui d’habitude rebutent un peu les utilisateurs.

Voici un exemple de menu réalisé avec ce plugin :

Vous admettrez que le style de base est plus que correct, ce qui change des menus déroulants basiques présents sur beaucoup de sites Internet.

Exemple : Démo ou Télécharger

referencement-outweb

Améliorer le référencement d’un site Internet

Posté le par dans la catégorie Référencement.

Sur Internet, faire un lien d’une page A vers une ressource B, c’est y faire référence et donc référencer la ressource B depuis la page A. Par vulgarisation, l’action générique d’inscription dans les moteurs de recherche s’est vue appelée référencement. Aujourd’hui sa pratique s’articule autour des outils de recherche, plus particulièrement des moteurs et des annuaires de recherche, en tentant d’améliorer le positionnement d’un site (et donc sa visibilité) dans leurs pages de résultats.

Wikipédia, Référencement

Les moteurs de recherche

Si vous venez de mettre en ligne un nouveau site Internet, il va falloir le soumettre aux moteurs de recherche afin qu’il sache que vous êtes là. Sinon, cela risque de prendre du temps.
Voici comment faire :

  • Proposer votre site Internet aux principaux moteurs de recherche lors de sa mise en ligne : Google, Bing, Yahoo
  • Mettre en place un sitemap à la racine de votre site, vous pouvez utiliser  un générateur pour le créer
  • Rendez-vous sur Google webmaster tool pour le soumettre, il permettra une indexation plus simple pour le bot et donc plus rapide. Au passage, cet outil est une mine d’informations, il vous indique toutes les pages où le bot à rencontré des erreurs d’exploration, votre positionnement dans les recherches Google selon les mots clés saisis…
  • Après le post d’un article ou d’une nouvelle page, envoyez un ping vers les moteurs de recherche afin qu’ils viennent faire un tour sur la nouvelle page. Des outils comme pingomatic permettent de le faire rapidement

Le référencement naturel

En théorie le référencement naturel est une chose simple, il suffit d’être patient. Cependant il existe un certain nombre de techniques permettant d’augmenter la rapidité du référencement naturel. Le référencement naturel se fait par l’exploration de votre site Internet par des bots. Les bots sont bêtes et méchants, ils suivent les liens pour trouver d’autres pages à explorer. Voici quelques points qui leurs permettent d’explorer rapidement tout votre site Internet.

  • Un site qui bénéficiera d’un bon référencement est un site où pratiquement toutes les pages sont accessibles depuis la page d’accueil. Par conséquent, utilisez votre footer comme usine à liens internes. Si vous avez un blog, ajoutez un nuage de tags, et faites des liens entre vos articles.
  • Les balises méta ne sont pas à négliger, elles sont encore très aimées des robots.
    Vous pouvez utiliser un générateur si vous ne connaissez pas exactement quelles balises existent. A savoir que la balise meta description doit changer pour chaque page de votre site, elle décrit la page et non le site.
  • Il y a quelques bonnes pratiques à respecter côté HTML pour aider à votre référencement :
    • Un title différent par page, ni trop long, ni trop court
    • Une balise h1 par page
    • L’attribut ALT pour les images est indispensable
    • Les 100 premiers mots de votre contenu doivent contenir les mots clefs importants de votre page, car c’est en moyenne la partie visible sans scroll.
  • Les URLs sont un point central du référencement, c’est la fin des URLs du type http://domaine.com/index.php?page=1533, Il vaut mieux travailler avec des URIs segment, du type http://outweb.fr/category/optimisation

Le référencement manuel

Nous allons parler ici des techniques qui existent pour avoir des backlinks (le nerf de la guerre en référencement). Un backlink c’est un lien vers votre site depuis un autre site. Pour en obtenir il y a plusieurs méthodes ; la plus simple est d’attendre que notre contenu soit remarqué par d’autres personnes et qu’il partage le lien vers la page, ou de le faire par nous-mêmes :p.

Les réseaux sociaux

Les réseaux sociaux attirent énormément de monde et ce sont de très bons backlinkers. Il faut donc à chaque nouvelle publication (pour un blog) ou chaque mise à jour (pour les autres) poster sur un maximum de réseaux le lien vers la page en question. Les réseaux les plus simples à utiliser sont Twitter, Facebook, Digg, Delicious, Identi.ca… L’idéal est de pouvoir poster partout en une seule fois, pour cela il faut regarder du côté de onlywire par exemple.

Les forums

Rendez-vous sur des forums traitant de la même thématique que la vôtre et trouvez, s’il y en a une, une partie présentation. Maintenant, rien de plus simple, vous allez créer un topic/ une discussion pour présenter votre site Internet, pensez à mettre 4 ou 5 liens vers différentes pages de celui-ci. (accueil, nouveautés, RSS, contact). En plus du référencement, vous allez attirer quelques visiteurs.

Pensez à mettre une bannière dans votre signature, comme cela à chaque post vous vous faites un peu de publicité.

Les annuaires

Contrairement à la croyance populaire, les annuaires ne sont plus à la joie. Google, par exemple, n’aime pas tomber sur ce type de page car il y a trop de liens pour peu de contenu. Evitez donc la plupart des annuaires de mauvaise qualité. Mieux vaux éviter les mauvais backlinks.

Les commentaires

Rendez-vous sur les sites ayant une bonne notoriété et traitant d’un thème proche du vôtre.
Rendez-vous section commentaire. Et là c’est un peu plus technique, il va falloir regarder dans le code source si les liens vers les sites persos des personnes qui ont commenté ont un attribut rel différent de nofollow. Si c’est le cas, à chaque post, vous obtiendrez un backlink de qualité. Le but n’est pas de spammer le site, mais juste de se faire quelques liens vers son site.

Le partenariat

Le partenariat, ou échange de liens, est un système gagnant-gagnant ou chacune des deux parties met sur son site, un lien ou une bannière vers l’autre site. L’idéal est dans une sidebarre, car elle est visible des utilisateurs. Le plus dur est de trouver des partenaires ayant un référencement au moins aussi bon que le vôtre.

Bien sûr si vous utilisez un CMS beaucoup de ces techniques seront déjà intégrées dedans ou des extensions sont disponibles pour le faire simplement.

outweb-social1

Google plus invitation

Posté le par dans la catégorie Autre.


Google vient de mettre en ligne la nouvelle mouture de son réseau social Google+.
Très peu de personnes ont eu des invitations, cependant, j’ai eu la chance d’en faire partie.

J’apprécie tout particulièrement la gestion de la confidentialité de nos informations et les cercles de confidentialité en un simple clic.
En effet, on peut décider de divulguer un statut, une image ou une information personnelle à un ou plusieurs cercles. Les autres ne le verront pas. L’avantage c’est que l’on peut choisir au cas par cas.

Comme l’indique très bien Google sur le réseau social :

Note importante à propos de la version test de l’application -Vous faites partie d’un petit groupe de personnes qui testent Google+. Lorsque vous partagez un contenu avec des personnes qui ne sont pas encore en mesure d’utiliser Google+, ces dernières le reçoive par e-mail, mais ne peuvent pas le commenter ni l’utiliser comme les autres utilisateurs de Google+. Elles pourront rejoindre Google+ à mesure que nous accepterons davantage d’utilisateurs.

Par conséquent une fois l’invitation envoyée il faudra attendre que Google décide d’accepter de nouveaux utilisateurs pour les utiliser. Mais étant donné la bonne avancée du projet et l’absence de bogues importants, je pense que les invitations seront validées dans les 48h maxi.

Comme je fais partie des privilégiés à avoir un compte, je peux inviter quelques personnes sur Google+.

150 invitations à google plus disponible

outweb-jquery

Aider les webmasters avec UpgradeBrowsers

Posté le par dans la catégorie JQuery.

Vous en avez marre de devoir faire des designs pour des versions non mises à jour de navigateur ? Oui, moi aussi. Alors insérez le plugin UpgradeBrowsers dans votre site Internet, dans votre page d’accueil par exemple. Le plugin indiquera simplement à l’utilisateur que son navigateur n’est pas à jour en l’invitant à le mettre à jour. Les autres utilisateurs ne se douteront même pas de la présence du plugin sur votre site.
Voici les quelques lignes de code à insérer dans votre page pour mettre en place le plugin, avant la fermeture du body.

<script type="text/javascript" src="http://upgradebrowsers.com/upgradebrowsers_v01/jquery.upgradebrowsers.min.js"</scrip>
<link rel="stylesheet" type="text/css" media="screen" href="http://upgradebrowsers.com/upgradebrowsers_v01/jquery.upgradebrowsers.min.css" />
 <script type="text/javascript">
                $(function(){
                        $.upgradebrowsers();
                });
</script>

En cas de navigateur non mis à jour voici le résultat affiché en haut de votre page :

Pensez-y, pour nous simplifier la vie.

outweb-jquery

Zoomer sur des images avec Cloud Zoom

Posté le par dans la catégorie JQuery.

Cloud Zoom est un plugin JQuery qui permet de faire simplement des zooms sur des images. En plus de son style soigné, il propose plusieurs types de zooms, selon l’intégration que vous voulez faire de celui-ci.

Voici l’exemple le plus basique, mais aussi le plus commun :

Et pour metttre en place cet effet, il vous suffit d’inclure le fichier javascript cloud-zoom.1.0.2.js (dans le dossier images).
Puis pour chacune des images où vous voulez ajouter un zoom, vous devez définir les paramètres pour le zoom :

       <div class="zoom-small-image"> <a href='grosseimage.jpg' class = 'cloud-zoom' rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4"> 
       
        <img src="petiteimage.jpg" title="Message" alt=''/></a> </div>

Voici un exemple : Demo ou Télécharger

outweb-tex

Convertir des formules Latex en HTML

Posté le par dans la catégorie Autre.

Le Latex est à mis chemin entre le langage de programmation et le traitement de texte. Il permet de rédiger des documents officiels sans avoir à mettre en forme manuellement le texte. En effet, avec de simples instructions, on peut ajouter des paragraphes, des titres ou des chapitres avec une mise en forme automatique.
Le point fort de Latex est qu’il permet d’insérer des formules mathématiques complexes.
C’est d’ailleurs pour cela que la plupart des mathématiciens l’utilisent régulièrement dans leurs articles ou leurs rapports.

Tout ceci est très intéressant, mais comment faire pour insérer une telle formule mathématique dans une page HTML ?
Eh bien, jusqu’à présent on écrivait nos formules en Latex puis on faisait une capture d’écran…

Mais la librairie mathjax vous permet, à partir de votre code Latex, d’afficher en HTML votre formule comme vous l’auriez eue sur un document pdf.

Vous pourrez trouver une démonstration complète de cette librairie à l’adresse suivante http://www.mathjax.org/demos/tex-samples/.

Je trouve le résultat assez impressionnant !

Voici une image montrant la qualité du résultat obtenu.