Le Blog de Mongo

La ponctuation sur Twitter... ou ailleurs!

2010-10-05T07:42:00.008-04:00

Je sais pas si ça vous arrive de rêver que vous parlez chinois et en vous réveillant de vérifier si ce que vous avez dit dans vos rêves était du vrai chinois, puis de vous rendre compte que c'était n'importe quoi. Moi ça vient de m'arriver. J'ai rêvé que j'avais les connaissances pour m'exprimer sur un sujet tel que «La ponctuation sur les réseaux sociaux», sauf que j'ai pas vérifié en me levant, j'ai écrit sur mon blogue.

Y'a pas si longtemps de ça on entendait un peu partout que l'internet allait tuer toutes les relations interpersonnelles et tout le blablabla de vieux qui marchait 3 kilomètres (dans 2 mètres de neige) pour se rendre à l'école. Plus le temps avance et plus l'utilisation de l'ordinateur est fréquente lors de nos communications. Personnellement, je trouve pas que ce soit une bonne ou une mauvaise chose, c'est juste de même. Dans tous les cas, ça reste mieux que le télégraphe.

La principale chose que j'ai remarqué avec ce changement, c'est à quel point il faut accorder de l'importance à la façon dont on écrit, car faute de pouvoir entendre ou voir notre interlocuteur, on doit pouvoir transmettre d'une façon ou d'une autre notre humeur et le ton sur lequel on "parle". La ponctuation est une excellent outil pour pouvoir donner un peu de vie à nos messages. Alors voici mes observations sur le sujet:

La virgule

On s'en fou un peu de la virgule sur internet car à part montrer qu'on écrit bien ça n'apporte pas pas grand chose au message.

EX:

@Interlocuteur1: Hier j'ai mangé une pomme.

@Interlocuteur1: Hier, j'ai mangé une pomme.

Ça reste quand même important lorsqu'on énumère des trucs.

EX:

@Interlocuteur1: Hier j'ai bu 1 verre de vin, 12 bières, 4 shooters de vodka et 2 margarita. J'ai vomi dans mon sommeil.

@Interlocuteur1: Hier j'ai bu 1 verre de vin 12 bières 4 shooters de vodka et 2 margarita... ««««Difficile à lire

Le point

C'est un point assez important des conversations sur le web(notez le jeu de mots). Son utilisation dépasse largement le simple fait de finir une phrase. En fait ce n'est pas obligatoire de l'utiliser à la fin de chacune de ses phrase. Voici quelques exemples d'utilisations

-Pour ajouter du poids à notre phrase

Ex:

@Interlocuteur1: L'auberge du chien noir est vraiment une très mauvaise émission

@Interlocuteur1: L'auberge du chien noir est vraiment une très mauvaise émission.

Je sais pas si c'est psychologique mais moi je trouve que ça fait plus important d'ajouter un point à la fin. C'est comme si on lisait «point final». On comprend donc mieux toute la médiocrité de «l'auberge du chien noir».

-Pour être drôle

Ex:

@Interlocuteur1: L'auberge du chien noir c'est bon

@Interlocuteur1: L'auberge du chien noir. c'est bon.

On comprend très bien que c'est sarcastique. Et le sarcasme c'est drôle...

-Pour faire chier/être bête

Ex:

@Interlocuteur1: Ouin, je sais pas je fais ça depuis 10 ans et j'ai jamais eu de problème.

@Interlocuteur1: Ouin. je sais pas. je fais ça depuis 10 ans. jamais eu de problème.

Donc la technique est de scinder sa phrase en partie plus courte pour donner un ton sec et fermé à notre réponse. C'est assez efficace, car on a juste envie de répondre «Meurt dans d'atroce souffrance, sale con!!!»

Les 3 petits points

Le dernier c'est mon préféré. J'ai remarqué que beaucoup beaucoup de personnes utilisent les 3 points sans vraiment y penser et franchement, ça me fait chier! Le 3 petits points démontre généralement un malaise ou un esprit de «Tout me fait chier en ce moment, j'ai aucun enthousiasme à répondre». On peut très bien comprendre le tout par l'exemple suivant:

@Interlocuteur1: @Interlocuteur2 Ça va bien aujourd'hui?

@Interlocuteur2: Oui ça va

@Interlocuteur1: @Interlocuteur2 Ça va bien aujourd'hui?

@Interlocuteur2: Oui ça va...

Dans le 2e exemple, on voit très bien que Interlocuteur2 ne va pas très bien ou qu'il ne veut pas parler à Interlocuteur1

On peut aussi l'utiliser pour être sarcastique

@Interlocuteur1: Tsé là, le monde qui font les chose d'une autre façon que moi, c'est vraiment gagnant...

@Interlocuteur1: @Interlocuteur2 Ouin t'es bon....

DONC J'ARRIVE À LA CONCLUSION DE L'ARTICLE, si au moment d'écrire une réponse sur Twitter, tu te sens bien et tu ne détestes pas la personne avec qui tu parles; AJOUTE DES POINTS D'EXCLAMATION ET DES SMILEYS!!! le monde sera ainsi plus joyeux...

Comme toujours, je vous invite à m'insulter en utilisant les commentaires.

Google Doodle (moving/bouncing circles logo) source code

2010-09-07T18:28:00.011-04:00

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

2010-06-30T08:28:00.007-04:00

Ç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!

Photo Argentique - La loi de sunny 16 (comment prendre une photo sans posemètre)

2010-06-20T09:13:00.002-04:00

Je vais publier plusieurs articles sur les techniques de photo argentique. Je ne crois pas que ce sera utile à grand monde, mais je trouverais ça dommage que ça se perde. Alors pour commencer, voici la règle de sunny 16 qui vous permet d'évaluer l'ouverture et la vitesse sans avoir recours à un posemètre. C'est particulièrement utile lorsque vous utilisez une toy camera (Holga, Lubitel,...) et toutes vieilles caméras qui n'a pas de posemètre intégré.

La règle est relativement simple.

Réglez la vitesse d'obturation au même chiffre que le iso de votre film. C'est possible que vous n'ayez pas la même vitesse sur votre caméra que le iso de votre film, dans ce cas prenez le chiffre le plus proche.

Ex: Film ISO 100 - on règle la vitesse à 1/125

Film ISO 400 - vitesse 1/500

Ensuite vous pouvez régler l'ouverture comme suit:

Au soleil (avec neige ou sable) : f22

Au soleil : f16

Partiellement nuageux : f11

Nuageux : f8

Très nuageux : f5.6

À l'ombre : f4

Donc voici un exemple complet :

Journée ensoleillé avec un film 100 ISO

ISO 100 - 1/125 - f16

Journée nuageuse avec un film 400

ISO 400 - 1/500 - f8

Biensûr avec la réciprocité vous pouvez créer d'autres couples équivalents. Il s'agit seulement d'une mesure de base. Voici d'autres couples(vitesse/ouverture) à partir des exemples ci-dessus:

ISO 100 - 1/125 - f16

ISO 100 - 1/60 - f22

ISO 100 - 1/250 - f11

ISO 100 - 1/500 - f8

ISO 100 - 1/1000 - f5.6

ISO 400 - 1/500 - f8

ISO 400 - 1/1000 - f5.6

ISO 400 - 1/250 - f11

ISO 400 - 1/125 - f16

ISO 400 - 1/60 - f22

La Presse gratuite !?!?

2010-05-11T08:22:00.004-04:00

Ça fait maintenant 2 matins qu'en prenant le métro on m'offre La Presse gratuitement. Je ne sais pas s'il s'agit d'une stratégie Anti Journal de Montréal, mais par hasard ça tombe le lendemain des parties de hockey.

C'est moi ou ils vivent sur une autre planète? Les médias imprimés sont en crise, non?

C'est certainement pas en me donnant La Presse que je vais finir par l'acheter... surtout si le cover c'est les Canadiens...

Une entrevue choc avec Crosby qui pleure comme une fillette parce qu'il n'est plus capable de supporter les insultes de la foule. P-e que j'aurais payé pour lire ça. Mais pour savoir les détails de la game d'hier (si ça m'intéressait), le JDM reste plus facile. En plus, on l'ouvre par la fin et voilà!

Y'a de bonnes idées dans le dernier Infopresse, peut-être que DiGesca devrait le lire...

Utiliser la police de votre choix avec CSS (Sans Typeface,Javascript,...) (Firefox, Safari, Chrome, IE 6-7-8)

2010-04-13T17:40:00.011-04:00

Je ne suis pas designer. Alors moi utiliser une autre font que Verdana ça n'as jamais été un problème. Seulement en tant que programmeur ça me fait toujours rager d'inclure plusieurs fichiers javascripts dans une page web. Surtout quand ils n'ont pas été écrit par moi. Jusqu'à aujourd'hui, j'utilisais(ou plutôt, les designers avec qui j'ai travaillé utilisaient) typeface.js qui permet d'utiliser la police de votre choix sur votre site web. C'est bien beau... Mais typeface reste un script javascript qui recréé à la volée votre texte sous forme d'image en utilisant plusieurs techniques (dépendant du navigateur) assez demandante. De plus, si vous utilisez document.domain = 'domaine.com' dans votre code javascript pour pouvoir communiquer en AJAX entre plusieurs sous-domaines, typeface ne fonctionnera tout simplement pas sur Firefox... J'ai fouillé et il semblerait qu'on ne peut accéder à la propriété .cssRules, nécessaire au démarrage de typeface, quand on a utiliser la variable document.domain. Bref, de la merde. Quand on a la chance de faire quelque chose de relatif au design seulement en CSS, on en profite!

Alors voici comment inclure le fichier ttf de votre choix à votre site web en CSS:


@font-face { 
   font-family: "votre Police"; 
   src: url( /chemin/vers/votre/police.eot ); /* IE */ 
   src: local("vrai nom de la police"), url( /chemin/vers/votre/police.ttf ) format("truetype"); /* autres navigateurs */ 
} 

/* Vous pouvez maintenant utiliser votre police */ 
h1 {
   font-family:"votre Police", verdana, helvetica, sans-serif;
}

Première question: c'est quoi un fichier .eot!?
Il s'agit du format de police pris en charge par Internet Explorer. Pas de problème vous pouvez convertir votre fichier .ttf en .eot en allant à http://ttf2eot.sebastiankippe.com/

Deuxième question: Pourquoi je dois écrire "vrai nom de la police" dans local()?
L'instruction local() sert à charger une police sur l'ordinateur local si elle est présente. Vous éviterez alors au navigateur de télécharger votre police. Le nom qui doit se trouver dans local() est le nom d'origine de la font.

Notes importantes
- Vous pouvez définir font-family avec le nom de votre choix, mais il faudra utiliser ce nom pour l'attribuer à des éléments ou classes CSS.
- Il faut toujours placer la ligne src: du fichier .eot en premier. (Sinon la police ne fonctionnera pas sur Internet Explorer)
- Il faut toujours écrire local() avant le url() du fichier .ttf (Sinon Internet Explorer va charger votre fichier ttf inutilement)

Compatibilité avec les différents navigateurs
Safari v3.1 et + : TrueType(.ttf) et OpenType(.otf)
Safari iPhone : Police SVG
Opera v10 et + : TrueType(.ttf), SVG(.svg) et OpenType(.otf)
Internet Explorer v4 et + : Embedded OpenType (.eot)
Firefox v3.5 et + : TrueType(.ttf) et OpenType(.otf)
Chrome v4 et + : TrueType(.ttf) et OpenType(.otf)
Netscape v4 et + : Portable Font Resource (.pfr)

Référence : http://webfonts.info/wiki/index.php?title=@font-face_browser_support

Mise à jour
Google (on les aime) offre maintenant une api qui simplifie tout ce processus :
http://code.google.com/intl/fr/apis/webfonts/

Comment obtenir des statistiques sur son code source (nombre de lignes, mots, lettres)

2010-03-15T11:32:00.005-04:00

Voici comment obtenir des statistiques comme le nombre de lignes, le nombre de lettres et le nombre de mots de plusieurs fichiers textes ou d'un dossier complet. Cette technique peut être utile pour vous vanter aux 2-3 personnes qui trouvent ça impressionnant d'avoir écrit beaucoup de lettres de code.

Afficher le nombre de lignes:

find . -name "*.php" -exec wc -l '{}' \; | awk '{ sum += $1 } END { print sum }'

Afficher le nombre de lettres:

find . -name "*.php" -exec wc -m '{}' \; | awk '{ sum += $1 } END { print sum }'

Afficher le nombre de mots:

find . -name "*.php" -exec wc -w '{}' \; | awk '{ sum += $1 } END { print sum }'

Vous aurez compris que vous pouvez changer *.php pour l'extension de votre choix. Aussi pour rechercher dans un autre dossier que le dossier actuel, changez find . -name ... pour find /le/dossier/ -name ...

Le seul et unique article favorable à Google Wave

2010-02-23T07:28:00.005-05:00

Bon, je suis pas du genre : regardez, je pense et je tweet pour en parler, mais bon des fois ça s'impose.

J'ai entendu pas mal de truc à propos de Google dernièrement. Majoritairement, des phrases comme: «Google est en train de se planter», «Je ne les suis plus», «Je comprends pas où il s'en vont»....

Premièrement, pensez-vous vraiment que Google serait aussi riche si ses stratégies pouvait être comprises par le moindre petit twitteux partageur de lien de SEO?

....

La cause de toute cette perte de confiance, est en grande partie liée au lancement de Google Buzz et Google Wave. Je ne parlerai pas de Google Buzz pour le moment, car moi le sooocial....

Je ne vous apprendrai rien en vous disant que Google est une entreprise basée sur l'innovation. Qui dit innovation, dit avenir, dit pas encore fait, dit avant sont temps. Voilà un bon indice à propos de Wave. Et si on remplaçais le méchant nom de Google Wave, par disons GMail 2. Et si la petite fenêtre en bas à gauche (où c'est écrit Contacts et qu'il y a seulement votre mère) était rempli de vos contacts GMail. Je ne pourrais plus me passer de Google Wave.

Je sais pas si vous êtes comme moi mais l'idée de GMail de grouper les messages en conversations, je trouve ça franchement pratique. Le seul problème c'est que ça devient vite lourd, pleins de bout d'anciens messages, etc... Si vous regardez Wave, vous avez le même principe mais en 1000 fois mieux! Pas besoin de toujours reposter le message original avec notre réponse en haut, même pas besoin d'attendre que la personne est fini d'écrire son message on le voit en direct et on peut comprendre d'avance. Wow! Personnellement, j'appelle ça de l'innovation. En plus de tout ça on peut facilement partager des liens, cartes, vidéos, gadgets, etc.... Aussi, c'est fini les CC, CCi bla bla bla bla geek-stufff-ça-intéresse-personne. On ajoute des personnes (avec des tites photos à côté) à notre conversation. Tout ce qu'il y a de plus naturel.

Pas convaincu? .... Mangez de la marde!

En conclusion, je penses que Google Wave n'est qu'une préparation à ce que sera les emails dans quelques années. C'est d'ailleurs sûrement pour cette raison que Google lance ce service en version Alpha.

Sur ce, amusez-vous!

Nous dedans Vous - Le lien évident entre la STM et la sodomie

2010-01-17T14:41:00.004-05:00

Petite pensée pour nos chers amis de la STM qui auraient pu économiser sur la publicité et nous éviter une autre augmentation des tarifs.

Javascript : Ajouter des fonctions utiles à l'objet String

2009-12-17T19:16:00.005-05:00

Heureusement Javascript est un langage assez facile à personnaliser. Je vous propose donc quelques ajouts à l'objet String qui vous permettront d'en faire plus avec moins de code(On aime ça!).

L'objet string représente en fait une chaîne de caractères.



var text = "Bonjour"; //la variable text est un objet string

var chiffre = 0; // la variable chiffre n'est pas un objet String

//Voici comment la convertir en objet string
chiffre = chiffre + ''; //si la variable a été définie plus haut
var chiffre = 0+''; //ou encore lorsqu'on la définie

//Lorsque vous obtenez la valeur d'un élément input, il s'agit d'un objet String
var valeur = document.getElementById("id_du_input").value; //la variable valeur est maintenant un objet String

//Vous pouvez aussi directement créer un objet String
var texte = new String("Bonjour");

L'objet string comporte plusieurs méthodes et propriétés, voici les plus courantes (Pour une liste complète visitez MDC Javascript 1.5 reference ) :



//On définie une variable pour l'exemple
var texte = "Bonjour";

/*********************
  Propriétés
**********************/

////  length
// Retourne le nombre de caractères d'une chaîne
var longueur = texte.length; // Dans l'exemple, longueur = 7


/*********************
  Méthodes
**********************/

////  toLowerCase()
// Retourne le texte en lettres minuscules
var minuscules = texte.toLowerCase("bonjour"); // minuscules = "bonjour"

////  toUpperCase()
// Retourne le texte en lettres majuscules
var majuscules = texte.toUpperCase("bonjour"); //  majuscules = "BONJOUR"

////  substr(debut [,longueur])
//Retourne une partie d'une chaîne
/ *le premier caractère est à la position 0*/
var soustexte = texte.substr(3); // Réduit la chaîne à partir de la positon 3. Dans l'exemple, soustexte = "jour"
var soustexte = texte.substr(1,3); // Réduit la chaîne à  3 caractères à partir de la position 1. soustexte = "onj"

////  indexOf(texte)
//Retourne la position d'un ou plusieurs caractères dans une chaîne
//La fonction retourne la position du premier caractère trouvé
//Retourne -1 si les caractères ne sont pas trouvés
var position = texte.indexOf("o"); // position = 1
var position = texte.indexOf("j"); // position = 3
var position = texte.indexOf("ur"); // position = 5
var position = texte.indexOf("z"); // position = -1

////  lastIndexOf(texte)
//Retourne la position d'un ou plusieurs caractères dans une chaîne
//La fonction retourne la position du premier caractère trouvé
//Retourne -1 si les caractères ne sont pas trouvés
var position = texte.lastIndexOf("o"); //  position = 4

////  split(separateur)
//Retourne un tableau contenant la chaîne séparé selon le séparateur
//Si le séparateur n'est pas trouvé on retourne un tableau avec comme seul élément la chaîne.
var phrase = "Je m'en suis rappelé hier comme si ça me serait arrivé demain."; //Jean Perron
var tableau = phrase.split(" "); // Dans l'exemple, tableau = ["Je","m'en","suis","rappelé","hier","comme","si","ça","me","serait","arrivé","demain."];

Bon! maintenant on peut commencer à ajouter des fonctions (méthodes) à l'objet String.




//trim()
//retourne la chaîne sans les espaces au début et à la fin.
String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g, "");
};


//noaccent()
//retourne la chaîne sans les accents (Vous pouvez en ajouter)
String.prototype.noaccent = function() {
  return this.replace(/[àâä]/gi,"a").replace(/[éèêë]/gi,"e").replace(/[îï]/gi,"i").replace(/[ôö]/gi,"o").replace(/[ùûü]/gi,"u");
};


//ucfirst()
//retourne la chaîne avec la première lettre en majuscule
String.prototype.ucfirst = function() {
  return (this.length == 1)? this.toUpperCase():(this.substr(0,1).toUpperCase()+this.substr(1));
};


//ucwords()
//retourne la chaîne avec la première lettre de chaque mot en majuscule
String.prototype.ucwords = function() {
  var words = this.split(" ");
  var uwords = [];
  for(var i = 0; i < words.length; i++) {
    uwords.push( ((words[i]+"").length == 1) ? (words[i]+"").toUpperCase():((words[i]+"").substr(0,1).toUpperCase()+(words[i]+"").substr(1)) );
  }
  return uwords.join(" "); //transforme un tableau en une chaîne
};

Plus à venir...

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

2009-12-17T18:31:00.008-05:00

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
        }

      });

    }

  });

});

Unix Timestamp en javascript - Équivalent de time() en PHP

2009-12-17T11:04:00.005-05:00

Voici comment obtenir un timestamp en javascript comme la fonction time() en php.



/////////////////////////////////////////////
//Obtenir le timestamp actuel
/////////////////////////////////////////////

var timestamp = Math.round((new Date()).getTime()/1000);

/***************************
Note :
La fonction getTime() en javascript retourne un timestamp en millisecondes, donc on divise par 1000 pour obtenir un timestamp en secondes
***************************/


/////////////////////////////////////////////
//Obtenir le timestamp du 1er janvier 2009
/////////////////////////////////////////////

var timestamp = Math.round((new Date(2009,0,1)).getTime()/1000);

/***************************
Note :
Les paramètres de Date sont :

  Date(année,mois,jour)
  Date(année,mois,jour,heures,minutes,secondes)

Les mois commence à 0 donc le mois de janvier est 0 et non 1 et le mois de décembre est 11
***************************/

Portée des variables en Javascript (Variable scope)

2009-12-06T12:53:00.012-05:00

Cacher des variables

En javascript toutes les variables déclarées dans une fonction ne sont visibles que dans cette fonction.



function maFonction() {
  var variableCachee = "une variable cachée";
}

alert(variableCachee); // Retourne une erreur car la variable est inaccessible à l'extérieur de la fonction.

/////////////////
//Autre exemple//
/////////////////

// Variable globale
var x = 0;

(function() {

  // Variable privée
  var x = 1;
  alert(x); // Renvoi 1

})();

alert(x); // Renvoie 0

En utilisant la technique de la fonction sans nom il est possible de "cacher" des variables pour qu'elles soient invisibles dans le reste du code javascript.



(function() {

  // Variable "cachées"
  var varChache1 = 1;
  var varChache2 = 1;
  var varChache3 = 1;
  

})();

alert(varChache1); // retourne une erreur car la variable est seulement accessible à l'intérieur de la fonction sans nom

* La fonction sans nom est immédiatement exécutée grâce au 2 parenthèses à la fin "();".

La variable this

En javascript la variable this est relative à chaque fonction.



function maFonction() {
  
  this.variable = "Ceci est une variable";

  function autreFonction() {

    alert(this.variable); //Retourne une erreur car this est maintenant relatif à autreFonction

  }
  

}

Une bonne pratique pour avoir accès au this d'une fonction parente est de l'attribuée à une autre variable.



function maFonction() {

  //On attribue la variable this à une autre variable nommé self
  var self = this;
  
  self.variable = "Ceci est une variable";

  function autreFonction() {

    alert(self.variable); //Retourne "Ceci est une variable"

  }
  

}

Si vous utilisez jQuery, cette technique est souvent utile car la variable this fait souvent référence à l'élément en cours.



$("#bouton").click(function() {

  //On attribue l'élément en cours à une variable pour pouvoir l'utiliser dans les fonctions suivantes
  var bouton = $(this);
  
  bouton.val("Chargement...");

  //On fait par exemple une requète AJAX
  $.get("/contact.php",function(data) {

    //La variable «bouton», déclarée plus haut, nous permet d'accéder à l'élément «bouton» même à l'intérieur d'une autre fonction.
    bouton.val("Terminé");

  });
  

}

Architecture Javascript pour entreprise avec Google Closure

2009-12-06T12:14:00.007-05:00

Dernièrement j'ai fait beaucoup de recherche sur la façon de structurer son code javascript dans de gros projets web. Il n'y a pas vraiment d'informations sur le sujet car l'utilisation poussée de javascript est relativement récente. Mais comment doit-on organiser son code lorsqu'on bâtit une application web qui utilise AJAX et Javascript de façon intensive comme le fait Facebook ou GMail? Google offre depuis peu une solution à ce problème, Google Closure.

Ce projet vient en 3 morceaux:

Closure Compiler : Un compilateur javascript qui rassemble votre code en un seul fichier et supprime les commentaires, les espaces ainsi que les fonctions/variables inutilisées. Vous pouvez compiler votre code à l'aide de l'outil en ligne.

Closure Library : Une librairie javascript qui offre une grande quantité de fonctions utiles mais aussi de modules pour votre interface utilisateur (Bouton, Rich text editor, Tree view, etc...). Cette libraire est particulièrement utile car elle encourage les bonnes pratiques de programmation pour garantir une structure intelligente et la possibilité de réutiliser vos modules. Cette librairie est utilisée dans de gros projets web comme Google GMail.

Closure Templates : Un système de templates pour Javascript qui utilise un langage simple et efficace.

Je n'ai pas encore utilisé activement Google Closure mais je prévoit en faire l'essai pour la nouvelle version de Écoutez.ca .

À suivre...

Objets et Classes Javascript pour débutants / Programmation orientée objet en Javascript (Public/Private/Static)

2009-12-06T11:35:00.008-05:00

Voici une traduction d'un article fort intéressant publié sur le blog de Komodo Média.

Cet article prend pour acquis que vous connaissez les bases de javascript et savez ce qu'est la programmation orientée objet.

Principe de base des classes en Javascript

Voici comment déclarer une classe et création d'une instance de celle-ci :



//Déclaration de la classe
function MaClasse() {
//...
}

//Création d'une instance de la classe
var classe = new MaClasse();

//Création d'une deuxième instance de la classe
var classe2 = new MaClasse();

//...

Variables(propriétés) et Fonctions(méthodes) publiques

Une variable ou une fonction publique est accessible à l'intérieur d'une classe et lorsque vous créez une instance de votre classe.


function MaClasse() {
//...
}

//Déclaration d'une variable publique
MaClasse.prototype.variablePublique = "Ceci est une variable publique";


//Déclaration d'une fonction publique
MaClasse.prototype.fonctionPublique = function() {
alert(this.variablePublique);
};

//Création d'une instance de la classe
var classe = new MaClasse();

//Utilisation d'une fonction publique
classe.fonctionPublique(); //Renvoie le texte contenu dans classe.variablePublique

//Vous pouvez aussi modifier la valeur d'une variable publique
classe.variablePublique = "Nouveau message";

classe.fonctionPublique(); //Renvoie "Nouveau message"

Variables(propriétés) et Fonctions(méthodes) privées

Les variables et fonctions privées sont accessibles seulement à l'intérieur de la classe et ne sont pas accessibles par l'instance de votre classe.



//Déclaration de la classe
function MaClasse() {

 //on stocke la référence à this dans une variable.
 var self = this;

 //Déclaration d'une variable privée
 var variablePrivee = "Ceci est une variable privée";

 //Déclaration d'une variable publique
 this.variablePublique = "Ceci est une variable publique";

 //Déclaration d'une fonction privée
 var fonctionPrivee = function() {

   alert(self.variablePrivee); //Renvoie la valeur de la variable privée

 };

}

//Création d'une instance de la classe
var classe = new MaClasse();

classe.fonctionPrivee(); //retourne une erreur car la fonction est privée

alert(classe.variablePrivee); //retourne une ereur car la variable est privée

alert(classe.variablePublique); //renvoie "Ceci est une variable publique"

Variables(propriétés) et Fonctions(méthodes) statiques

Les variables et fonctions statiques n'ont pas accès au variables/fonctions privées et publiques.



//Déclaration de la classe
function MaClasse() {

 //...

}

MaClasse.variableStatique = "Ceci est une variable statique";


MaClasse.fonctionStatique = function () {
  
  alert(MaClasse.variableStatique);

};

//Création d'une instance de la classe
var classe = new MaClasse();

classe.fonctionStatique(); //retourne une erreur car la fonction est statique est invisible par une instance de la classe

//Une fonction statique est accessible directement à partir de la classe
MaClasse.fonctionStatique(); // Renvoie "Ceci est une variable statique";

Variables(propriétés) et Fonctions(méthodes) privilégiées

Les variables et fonctions privilégiées ont accès aux variables/fonctions privées et publiques.



//Déclaration de la classe
function MaClasse() {

 //on stocke la référence à this dans une variable.
 var self = this;

 //Déclaration d'une variable privée
 var variablePrivee = "Ceci est une variable privée";

 //Déclaration d'une fonction privée
 this.fonctionPrivilegiee = function() {

   alert(self.variablePrivee); //Renvoie la valeur de la variable privée

 };

}

//Création d'une instance de la classe
var classe = new MaClasse();

classe.fonctionPrivilegiee(); //Renvoie la valeur de la variable privée

Voilà, vous savez maintenant comment utiliser tout le pouvoir de la programmation orientée objet avec Javascript.

Ajax Dialog box avec jQuery et jQuery UI

2009-12-05T12:36:00.011-05:00

Voici comment créer une Dialog Box dont le contenu est chargé par Ajax avec jQuery.

Vous avez besoin de jQuery et de jQuery UI



//Si vous n'avez pas déjà d'élément pour contenir le DialogBox
$("Chargement...
").dialog().load("/adresse/dufichier.html");

//Créé une DialogBox dans un élément avec l'id "dialog"
$("#dialog").dialog().load("/adresse/dufichier.html");

Vous pouvez aussi inclure les librairies jQuery et JQuery UI sans les télécharger en utilisant le CDN de Google :

Cette technique est pratique car si un visiteur à déjà le fichier javascript en cache (parce qu'il a visité un autre site qui utilisait le CDN Google) il n'aura pas besoin de le télécharger à nouveau. Votre site se chargera donc plus rapidement.

Icônes gratuites pour sites web (Réseaux sociaux, Drapeaux, ...)

2009-12-05T12:26:00.005-05:00

Voici quelques sites intéressants pour trouver des icônes gratuites et libres de droits.

Famfamfam (www.famfamfam.com)
Silk icons
700 icônes 16x16 pixels . Probablement la librairie la plus complète et la mieux réalisée.
Drapeaux
Tout les drapeaux du monde entier 16x16 pixels

Komodo Média (www.komodomedia.com)
Réseaux Sociaux
Icônes 16x16 pixels et 32x32 pixels des réseaux sociaux comme Facebook, Youtube, MySpace, ....
Très belles icônes et beaucoup de réseaux sociaux.

Si vous connaissez d'autres adresses, n'hésitez pas à les partager en écrivant un commentaire à cet article.

Télécharger de la musique gratuitement à partir de Google

2009-10-01T07:31:00.004-04:00

J'ai découvert ce nouveau truc dernièrement et je dois dire que c'est assez efficace. En utilisant tout le potentiel du moteur de recherche Google vous pouvez arriver à chercher seulement les fichiers MP3 disponible gratuitement sur le web. Vous n'avez qu'à chercher ceci dans Google :

intitle:index.of -html -htm -download mp3 [mot clés]

Vous devez biensûr remplacer [mot clés] (y compris les crochets) par le nom de l'artiste ou de la chanson que vous cherchez

De cette façon Google ne vous donnera que les fichiers mp3 téléchargeables. Il faut cependant faire attention car beaucoup de sites créent de fausses pages qui donne l'impression qu'il s'agit d'une liste de fichiers mp3 mais en fait ce sont des liens vers de la publicité.

Amusez-vous!

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

2009-08-23T17:45:00.014-04:00

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.

Service d'intégration web

2009-05-28T09:53:00.003-04:00

J'offre mes services d'intégration web pour les designers et entreprises de création de sites web. Je suis spécialisé PHP/MySQL et Javascript. Vous pouvez me contacter en tout temps à dmongeau_petitpas@ecoutez.ca .

Voici quelques exemples de sites :
http://www.boiteamusique.ca
http://www.uniondufeu.ca
http://www.guillaumearsenault.com
http://www.cinematproductions.com

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

2008-10-30T12:36:00.015-04:00

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.

BoosterBlog

2008-10-30T09:38:00.002-04:00

Votez pour mes photos sur JPG Mag

2008-10-28T17:14:00.005-04:00

Un petit truc pour éviter que votre page MySpace EXPLOSE!

2008-10-27T20:55:00.015-04:00

En me promenant sur MySpace pour chercher des groupes du Québec pour Écoutez.ca, j'ai remarqué une erreur d'affichage sur la plupart des pages MySpace. Beaucoup utilisent des widgets Flash ou des vidéos YouTube sur leur page. Le chargement peut parfois être long et les widgets se mettent à apparaître un après l'autre ce qui a pour conséquence d'agrandir la page et de déplacer le lien où vous alliez cliquer. Voici la solution pour que votre page s'ouvre avec la bonne taille. Fini les liens qui se retrouvent 1 km plus bas après le chargement de vos widgets. Oui oui, rien de moins!

Donc, je commence! Vous devez aller dans «modifier votre profil» et repérer tous les éléments Flash(les balises commençant par <object> et se finissant par </object>). Dans ces balises se trouvent les dimensions finales de l'élément Flash.

Voici un exemple avec le code d'un player YouTube :

Largeur : 425
Hauteur : 344

Il vous suffit donc d'utiliser ces dimensions pour entouré votre élément Flash avec une balise <div> à grandeur fixe. Attention, il est important d'entourer la balise <object> seulement et de ne pas y inclure d'autres balises <div> ou du texte.

N'oubliez pas d'ajouter px après les chiffres.

Voilà c'est fait, votre page est beaucoup plus agréable à visiter!