La ponctuation sur Twitter... ou ailleurs!

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

 

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!

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

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

ou

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

ou

ISO 400 - 1/1000 - f5.6

ISO 400 - 1/250 - f11

ISO 400 - 1/125 - f16

ISO 400 - 1/60 - f22

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

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

Javascript : Ajouter des fonctions utiles à l'objet String

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

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

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
***************************/

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

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)

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.

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

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 :

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/ZJhIYXmZEFs&hl=fr&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/ZJhIYXmZEFs&hl=fr&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>

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.

<div style="width:425px; height:344px;">
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/ZJhIYXmZEFs&hl=fr&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/ZJhIYXmZEFs&hl=fr&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>
</div>

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

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