Google Doodle (moving/bouncing circles logo) source code

 

Here is the source code for the Google logo. Originally it uses google object for event listening and browser detection, switched to jQuery. You can find a working example here : http://quebe.ca/doodle.html

Mod_deflate (Compression apache) ou comment optimiser le poids de vos pages web

Ça faisait un bout de temps que Firebug (outil de développement pour Firefox qui permet de dominer le monde) me disait: «Compresse tes pages pour optimiser ton site». Alors hier, j'ai décidé de m'y mettre!

Il y a plusieurs méthodes pour optimiser la vitesse de votre site web. Je vais vous parler ici de la compression de vos fichiers pour que les navigateurs téléchargent plus rapidement votre site web. En gros, apache va compresser tous les fichiers textes avant de les envoyer au navigateur de votre visiteur ce qui réduira de BEAUCOUP la taille de votre site et augmentera la vitesse de chargement. Il existe 2 façons d'activer la compression sur apache: deflate et gzip. J'ai utilisé deflate car c'est plus simple à mettre en oeuvre. Alors on commence !?

Il faut donc ouvrir le fichier de configuration d'apache (httpd.conf) et chercher une ligne du genre :

LoadModule deflate_module modules/mod_deflate.so

Vous devez la dé-commenter en enlevant le # qui précède LoadModule . Si la ligne n'est pas commenté, vous êtes privilégié de Dieu. En passant, cherchez «mod_deflate» dans votre fichier httpd.conf plutôt que la ligne complète car elle pourrait varier d'un serveur à l'autre. Tant qu'il s'agit d'une ligne qui commence par LoadModule, c'est la bonne.

Une fois que vous avez activez le module mod_deflate, vous ajoutez les lignes suivantes à votre fichier de configuration (à la fin du fichier pour mieux se retrouver):

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

* La compression sera activée pour les fichiers html, txt, xml, css, js .

Vous enregistrez le fichier httpd.conf et vous redémarrez apache.

Voilà!

À titre d'exemple, j'ai activé la compression pour le site ecoutez.ca. Une page pèse environ 520 ko, avec la compression elle pèse maintenant 3o ko .

À vous de juger!

Créer un nouveau sélecteur jQuery pour rechercher dans le contenu HTML avec Javascript

Voici comment créer un nouveau sélecteur(selector) dans jQuery qui vous permettra de sélectionner des éléments qui contiennent le texte recherché. I s'agit d'un sélecteur semblable à :contains() mais il enlève les accents et ne tient pas compte de la casse.

//Premièrement on ajoute une fonction à l'objet String pour pouvoir enlever les accents

String.prototype.noaccent = function() {
  return this.replace(/[àâä]/gi,"a").replace(/[éèêë]/gi,"e").replace(/[îï]/gi,"i").replace(/[ôö]/gi,"o").replace(/[ùûü]/gi,"u");
};


//Ensuite on ajoute notre nouveau sélecteur :search() à l'objet jQuery
jQuery.extend(jQuery.expr[':'], {

 'search' : function(a,i,m) {
  var content = ((a.textContent || a.innerText || '') +'').noaccent();
  var words = m[3].noaccent().split(" ");
  for(var j = 0; j < words.length; j++) {
   if(content.toLowerCase().indexOf( words[j].toLowerCase() ) >= 0) {
                            return true;
                        }
  }
  return false;
 }

});

Voilà c'est fait! Vous pouvez maintenant l'utiliser de la façon suivante :

//Cet exemple ajoute la classe "found" à tous les éléments li qui contiennent le texte montreal, montréal, Montreal ou Montréal

$("ul li:search('montreal')").addClass("found");

Un autre exemple complet avec le HTML qui permet d'afficher seulement les éléments qui contienne le texte saisi dans un textBox.

Le HTML :

  
Abercorn
  
Acton Vale
  
Adstock
  
Aguanish
  
Akulivik
  
Akwesasne
  
Albanel
  
Albertville
  
Alleyn-et-Cawood
  
Alma
  
Amherst
  
Amos
  
Amqui
  
L'Ancienne-Lorette
  
Ange-Gardien
  
L'Ange-Gardien (La Côte-de-Beaupré)
  
L'Ange-Gardien (Les Collines-de-l'Outaouais)
  
Angliers
  
L'Anse-Saint-Jean
  
Armagh
  
Arundel
  
Asbestos
  
L'Ascension

Et maintenant le javascript qui fait fonctionner le tout :

$(function() {

  //On ajoute un événement au TextBox lorsqu'une touche est pressé

  $("input.query").keyup(function() {

    //On stocke le texte saisi dans une variable
    var query = jQuery.trim($(this).val());

    if(!query.length) {
      $("ul.list li").show(); // S'il n'y a pas de texte saisie (ou seulement des espaces) on affiche tous les éléments li
    } else {

      //Sinon on fait une boucle qui passe à travers tous les éléments li
      $("ul.list li").each(function() {

        if( $(this).is(":search('"+query+"')") ) {
          $(this).show(); //Si l'élément contient le texte on l'affiche
        } else {
          $(this).hide(); //On cache tous les autres
        }

      });

    }

  });

});

Liste des villes du Québec au format XML - Base de données avec coordonnées géographiques(latitude/longitude)

Lors du développement de Écoutez.ca nous avons développé une liste de toutes les villes du Québec avec leur régions administratives. Comme je crois beaucoup au web ouvert, j'ai décidé de rendre accessible cette liste pour les webmestres et programmeurs web qui voudraient l'utiliser pour leur site. Pour le moment, je vous fournis 2 fichiers XML. Le premier contient la liste des villes seulement et le deuxième la liste des villes avec leur région et le positionnement géographique(latitude et longitude, disponible pour toutes les villes, merci à Simon Pouliot). Vous pouvez facilement utiliser ces fichiers XML pour entrer l'information dans une base de données MySQL ou pour créer un SELECT BOX dans un formulaire HTML.

Le premier fichier est organisé de cette façon (Téléchargez ce fichier):

<?xml version='1.0' encoding='utf-8'?>
<cities>
<city>Abercorn</city>



</cities>

Voici un exemple en PHP pour afficher une SELECT BOX à partir du fichier XML 1 :

Avec SimpleXML :

<?php

$xml = simplexml_load_file("/chemin/vers/fichier/villes_du_quebec.xml");

echo "<select name='city'>";

foreach($xml->city as $city) {
 echo "<option>".$city."</option>";
}

echo "</select>";

?>

Sans SimpleXML

<?php

  $xml = "";
  $f = fopen( '/chemin/vers/fichier/villes_du_quebec.xml', 'r' );
  while( $data = fread( $f, 4096 ) ) { $xml .= $data; }
  fclose( $f );
  
  preg_match_all( "/\\<\!\[CDATA\[(.*?)\]\]\>\<\/city\>/s", 
  $xml, $cities );
  
  echo "<select name='city'>";

  foreach( $cities[1] as $city ) {
    echo "<option>".$city."</option>";
  }

  echo "</select>";


?>

Le deuxième fichier contient les coordonnées géographiques des villes. Il s'organise de la façon suivante : (Téléchargez ce fichier)

<?xml version='1.0' encoding='utf-8'?>
<cities>
<city>
  <name>Abercorn</name>
  <region>Montérégie</region>
  <lat>45.032999</lat>
  <lng>-72.663057</lng>
</city>



</cities>

Crédits

David Mongeau-Petitpas
Benoit Tétreault
Simon Pouliot



Liste des villes du Québec au format XML par Ecoutez.ca est mis à disposition selon les termes de la licence Creative Commons Paternité-Partage des Conditions Initiales à l'Identique 2.5 Canada.
Basé(e) sur une oeuvre à www.ecoutez.ca.

 

Petit cours de balises HTML et de CSS pour les pages MySpace et les réseaux sociaux

Cet article vise à aider les utilisateurs de MySpace et autre réseaux sociaux qui donne la possibilité d'utiliser du HTML et CSS dans leurs pages.

HTML

Le langage HTML est à la base de TOUTES les pages web que vous visitez, même les sites en FLASH. Ce langage est constitué de balises qui organise le texte ou l'informations (Images, vidéos, etc...). Un document HTML typique se constitue de la façon suivante :

<html>

<head>
<title>Le titre de votre page</title>
</head>

<body>
Contenu de votre page web...
</body>

</html>

La compréhension de la structure d'un document HTML n'est pas très importante lorsqu'on ne créé pas une page en totalité. Le plus important à retenir est que le langage HTML se compose de balises (ex:<body></body>) et que celles-ci doivent être refermées (ex:<div>Bonjour) (ex:<div>Bonjour</div>). Vous aurez compris que la balise de fermeture comprend un «/». Ces balises ne sont bien entendue pas visibles par l'utilisateur final qui consulte la page avec un navigateur comme Firefox.

Balises HTML utiles pour les pages MySpace:

<a href="http://www.ecoutez.ca">exemple de texte</a> : créé un lien vers http://www.ecoutez.ca avec le texte «exemple de texte»

<img src="http://www.ecoutez.ca/image.jpg" /> : affiche l'image http://www.ecoutez.ca/image.jpg (cette balise n'a pas besoin d'une balise de fermeture mais demande un «/» avant la fin.

<p>exemple de texte</p> : délimite un paragraphe

<div>exemple de texte</div> : délimite une boîte de texte (avec changement de ligne après)

<span>exemple de texte</span> : délimite une boîte de texte (sans changement de ligne)

La différence entre une balise <span></span> et <div></div> est le changement de ligne après la balise. Si vous voulez isoler un mot dans une phrase vous devez utiliser la balise <span></span> car elle ne brisera pas votre phrase avec un changement de ligne.

<span>Bonjour,</span> ce blog ...
Affiche :
Bonjour, ce blog ...

<div>Bonjour,</div> ce blog ...
Affiche :

Bonjour,

ce blog ...

Maintenant que vous connaissez les principales balises HTML, il est temps de leur trouver une utilité!

CSS

Le CSS est un langage ajouté au HTML qui permet de définir le style de votre page. Vous pouvez ajouter à toutes vos balises HTML un paramètre style="" contenant les informations de mise en forme (ex:<div style="font-weight:bold;">Bonjour</div> affiche le texte contenu dans la balise <div></div> en gras)

Voici les principaux paramètres CSS:

Détails	Valeurs
font-size	Définir la taille du texte Valeurs possibles: <chiffre> px ex: font-size:14px;
font-weight	Définir l'épaisseur du texte Valeurs possibles: normal bold ex: font-weight:bold;
color	Définir la couleur du texte Valeurs possibles: #<valeur hexadécimale> <nom de la couleur> ex: color:#ffffff; ex: color:red;
background	Définir l'arrière-plan Valeurs possibles: #<valeur hexadécimale> <nom de la couleur> url(<adresse de l'image>) no-repeat ex: background:#ffffff; ex: background:red; ex: background:url(http://www.ecoutez.ca/image.jpg) no-repeat;

Je vais ajouter peu à peu d'autres paramètres CSS et d'autres balises HTML.