Naissance du WWW

Le web a 20 ans! Vive le web!
Voici une petite photo de l'ordinateur sur lequel a été mis en place le world wide web, en mars 1989.L'Organisation européenne de recherche nucléaire (Cern) va célébrer cette naissance demain vendredi 13 mars.

LCI.fr retransmettra vendredi 13 mars de 14 h à 17h30 l'événement organisé par le Cern avec l'inventeur du web, Tim Berners-Lee.

Que ferions nous aujourd'hui sans notre internet ? sans nos emails ? 

Pensez à souffler la bougie d'anniversaire de votre modem demain !

• 
• 
• 
• 
• 
• 

CSS conditionnel

En tant que "bon" intégrateur nous avons à gérer l'affichage pour tous les types de navigateur. Jusque la nous avions toujours la possibilité d'utiliser les commentaires conditionnels IE pour lesquels Microsoft assure qu'ils seront toujours utilisés.... Mais Microsoft et confiance ne rime pas très bien ensemble.
Nous avions aussi la possibilité d'utiliser le javascript ou php pour loader tel ou tel css.

Voici un petit programme qui va peut etre en aider plus d'un. Conditional-CSS et un fichier php qui sera loader en début de page. Il contient les noms des fichiers css à mettre en ligne et permet d'y intégrer des conditions.
Les conditions sont donc directement inclus dans le css :

ou encore :
le programme permet d'utiliser php mais aussi c# ou c++. Une fois que vous avez un fichier type il vous suffit d'yajouter les différents css à loader vous n'avez donc pas besoin de générer un fichier pour chaque projet, vous pouvez partir du fichier type.

Le script permet de faire des import css conditionnels, de créer des groupes et d'affecter des règles css à un groupe :

voici la liste des navguateurs supportés :

• IE - Internet Explorer
• Gecko - Gecko based browsers (Firefox, Camino etc)
• Webkit - Webkit based browsers (Safari, Shiira etc)
• 'SafMob' - Mobile Safari (iPhone / iPod Touch)
• Opera - Opera's browser
• IEMac - Internet Explorer for the Mac
• Konq - Konqueror
• IEmob - IE mobile
• PSP - Playstation Portable
• NetF - Net Front

Un nouveau moyen d'utiliser un seul fichier css plutot que un par browser. Et cela permettra sans doute de facilité les ajustement nécessaires à chacun.

On pourrait d'ailleur envisager d'ajouter des conditions de résolution permettant de gérer très facilement les ecran 800*600.

Donnez-nous vos commentaires si vous essayer cette methode.

• 
• 
• 
• 
• 
• 

Enfin une solution pour faire tourner ie6 - ie7 - ie8 et d'autre sous vista

 
En tant que programmeur(e) ou intégrateur(trice) nous avons besoin de tester nos applications sous différents navigateurs. C'était (presque) parfait du temps de windows XP. Non pas que Windows XP était parfait mais au moins il était possible de faire tourner ie6 avec ie7 par divers procecus. Mais Vista est né, et avec lui les test sous IE6 sont morts....
Loin d'être sans ressource nous sommes passés par des machines virtuelles, nous avons garder précieusement notre windows xp, ou encore nous avons installer d'autres testeurs comme ieTester.

Finalement nous nous retrouvons avec 2 ordinateurs / claviers / souris, ou un ordinateur avec xxxGO de ram pour subvenir au besoin de la machine virtuelle, ou encore nous devons nous accomoder des limites de ieTester et devont tout de meme emprunter le xp de quelqu'un pour vérifier le resultats final.

Et voici que aujourd'hui je tombe sur le site de .xenocode. qui nous permet de télécharger un simple executable pour tester sous ie6 - ie7 - ie8 et d'autre.
Je viens d'installer ie6 et ie8 et tout semble correct pour l'instant . On peut même faire des tests d'impression !!!! ce qui n'était pas possible avec ieTester. 

Je vous invite donc a essayer cette nouvelle méthode qui n'installe rien sur votre ordinateur mais lance juste le navigateur. On pourrait également faire le test sous linux avec wine pour observer le resultat.
Donnez-nous vos commentaires.

• 
• 
• 
• 
• 
• 

FTP et SFTP depuis Eclipse

Pour travailler sur certains sites internet nous sommes parfois obligé de nous connecter en live pour modifier des fichiers. Jusque là j'utilisais Dreamweaver ou EditPlus qui permettent de se connecter via FTP.

Mais nous utilisant principalement Eclipse pour le développement et la synchronisation de nos projets, c'est pourquoi j'ai chercher la même fonctionnalité sous Eclipse.

Pour installer le ftp référez-vous à WebDav. et pour le sftp prenez SFTP. Une fois le plugin installé via le menu de mise à jour du logiciel et "rechercher et installer" vous pourrez synchronisez vos fichiers directement.

• Ouvrez la vue Fenetre->Afficher la vue -> équipe -> synchronisation
• Puis cliquez sur "Synchronisez..."
• Choisissez votre mode (FTP, SFTP, SNV, ...)
• Selectionnez le projet que vous souhaitez synchroniser
• Puis creer votre connexion

Attention j'ai rencontré un pb avec l'upload, en effet il faut déployer le contenu de votre serveur et cliquez sur le repertoir que vous souhaitez uploader.
Ex : Si vous souhaitez uploader MonSite/MonRepertoire alors vous devez cliquez une fois sur MonRepertoire.
Par conséquent si vous souhaitez uploader le site en entier il vous faudra acceder au niveau superieur dans la hierarchi des dossiers pour cliquez sur www/MonSite.

Mais une fois installé vous pouvez modifier vos fichiers directement et les uploader via la fenêtre de synchronisation. L'avantage d'eclipse c'est que vous pouvez comparer vos sources local avec celles sur le serveur et vous garder un historique local de vos fichiers.

• 
• 
• 
• 
• 
• 

Long bouton avec IE

Il apparait que sous IE les input de type button / submit / reset ont un padding relatif à la longueur de leur value.

On s'explique : plus la value est longue plus le padding left/right est grand. Et ce même en précisant des paddings et des margins en css.

le problème se resoud comme suis :

input.monBouton {
width:auto;
overflow:visible;
}
vive IE

• 
• 
• 
• 
• 
• 

noConflict() prototype / Jquery

Avec le web 2.0 est arrivé le temps des fade-in /fade-out /accordéons et autres gugusses adorées par les integrateurs et programmeurs que nous sommes.

Et bien entendu nous n'avons jamais rencontré de problème de compatibilité entre un toutes ces librairies qui ont chacune leur bons et mauvais point.

Bien sur que non, car nous utilisons tous la fonction jQuery.noConflict().

Bon juste un petit rappel (car je suis certaines que vous le saviez déjà) :

<script>
jQuery.noConflict();

// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});

// Use Prototype with $(...), etc.
$('someid').hide();
</script>

Plus d'info

• 
• 
• 
• 
• 
• 

7 1/2 à louer Montréal 875$

Les maudits français de la game souhaitant se rapprocher de leur boss préféré, ils ont décidés d'acheter une maison sur la rive sud.

Notre appartement sur montréal est donc à la recherche d'un nouveau locataire :

7 1/2 dans pointe saint charles,
avec beaucoup de cachet, plancher bois franc et mur de brique.
reprise de bail 875$/mois
Adresse : avenue ASH H3K 2R4
2eme étage d'un triplex dans rue tranquille
15 min à pied metro charlevoix ou lassale,
200m du CLSC,
500m YMCA avec garderie,
2min à pied du Parc,
25min à pied du centre ville.
20 min à pied du marché atwater
entrée laveuse sécheuse, grande cuisine, salon double, salle à diner, 3 chambres (ou 2chambres +bureau)
stationnement gratuit dans la rue.
2 Bus en face de la porte (57 et 61). Cause: Achat d'une maison

Libre au 1er décembre

• 
• 
• 
• 
• 
• 

Comment imprimer une lightwindow ?

Le web 2.0 et tous les gadgets qui vont avec c'est bien beau mais parfois ca rend la vie des integrateurs bien compliqués.

En l'occurence les lightwindows, qui donnent beaucoup de style aux sites, sont parfois un vrai casse tête à imprimer.

Voici donc quelque coup de pousse :
Les lightwindow sans iframe :
on va positioner un petit lien à coté du lien de fermeture sur lequel on va lancer la fonction suivante :
''$('lightwindow_title_bar_print_link').onclick = function() {

var domaine =link;
var WindowObject = window.open (link, link, config='toolbar=no, menubar=yes, scrollbars=yes, location=no, directories=no, status=no')
WindowObject.document.write (document.getElementById ('lightwindow_stage') .innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}''

lightwindow_stage correspond à l'id du bloc contenant mon lightwindow
et link correspond à l'adresse de la page chargé dans la lightwindow.

les lightboxes utilisants des iframes :
document.getElementById("iframe").contentWindow.print();
(à tester)

N'hésitez pas à ajouter vos solutions....

• 
• 
• 
• 
• 
• 

Google trends VS Google insights for search

Google continu de faire des petits et tente d'attirer les "web-marketeux" et progammeurs que nous sommes.

Commençons par Google trends

Cet outils permet "d'analyser les tendances de recherche". En résumé on peu comparer la popularité de plusieurs mots clés donnés. On pourrait considérer cet outil comme complémentaire à AdWords qui lui fait de la suggestion de mots-clé et de la prévision de trafic.
Google trends quant à lui permet de savoir si une requête est souvent faite (sur Google). Le point fort de l'application est que l'on peut connaitre les régions qui ont générées le plus de requêtes.

Ceci-dit il a toujours des petits malins qui profite de la visibilité de Google. En effet sur la page d'accueil de Google trends il est possible de voir les 10 plus "hot" requête de la journée. Bien entendu le but du jeu est d'être dedans. C'est donc avec "svastika" (卍) il y a quelques semaine et plus récement avec "ǝlƃooƃ noʎ ʞɔnɟ" que des petits malins on "hacker" le système.
On pourrait peut-être essayer de faire passer ☯ la prochaine fois....


Google trends semblait donc un bon point de départ pour attirer les pros du référencements.

Mais pourquoi s'arrêter en si bon chemin ??? et bien Google ne s'arrête pas et continu de plus belle avec Google insights for search

Mettons que Google insights for search serait la version "hot" de Google trends. C'est simple cet outil permet de rechercher les tendances des mots clé (comme son petit frère), maiss aussi de lister les mots-clés connexes les plus populaires, Ceux en forte augmentation pour le moment, il est aussi possible de distinguer les tendances par catégories (Apple : le fuit ou la marque), de visualiser les résultats sur une carte et ce par pays, régions ou villes.

Un vrai bac à sable pour marketeux en manque de SEO !

Mais on ne va pas encore s'arrêter ici !!!! non non non. C'est juste la pause lunch. Google va encore nous appater avec Google Ad Planner. Un outils encore en version béta (et sur invitation) ciblé vers les agences de communication. On pourra ainsi entrer un profil démographique d'audience désiré ainsi que des exemples de sites qui montrent déjà leur publicité.... et Google Ad Planner va nous retourner une liste d'autres sites web qui pourraient s'avérer interressant par rapport à la cible visée.

Définitivement, en couplant Google Ad Planner, Google Ad Review, Google Ad Manager, Google insights for search et les outils pour wemaster, il ne manque plus qu'une personne volontaire pour assurer un suivi permanant et offrir un service de référencement efficaces et à moindre prix (comparer à Comscore ou Nielsen).

• 
• 
• 
• 
• 
• 

DELETE et INNER JOIN mysql

Je me suis posé la question ce matin du comment supprimer des données d'une table dont la region liée dans une autre table avait une valeur précisée.

En gros un DELETE à la place d'un 'SELECT * FROM maTable INNER JOIN monAutreTable WHERE maTable.maRegion = monAutreTable.cle'

Le SELECT fonctionnait très bien mais le DELETE me retournait une erreur. Soit, après quelques recherches voici la bonne syntaxe :

'DELETE first FROM maTable AS first INNER JOIN monAutreTable AS second WHERE first.maRegion = seconde.cle'

Dans ce cas, ce sont les données de maTable qui seront supprimées alors que monAutreTable n'aura aucune altération.

Pour supprimer dans les deux table, ce serait :
'DELETE first, second FROM maTable AS first INNER JOIN monAutreTable AS second WHERE first.maRegion = seconde.cle'

Ça servira sans doute à d'autres....

• 
• 
• 
• 
• 
• 

Clay Database Modelling

Depuis quelques temps je cherchais a lier toutes les données d'un même projet dans le dossier eclipse du projet en question.
Entre autre pouvoir gérer la base de données du projet directement depuis eclipse sans avoir à passer par phpMyAdmin.

Malheureusement entre les plugins non-compatibles avec les dernières versions d'eclipse, ceux qui sont devenus payants et ceux pour lesquels il est nécessaire d'avoir la version commerciale ça devenait compliqué. Après plusieurs installations et désinstallation je pense enfin avoir trouvé ma solution : Clay Database Modelling

Et en plus un tuto assez simple pour installer le tout : jmdoudoux

Ce petit outil permet de gérer ses bases de données, de les créer mais aussi de faire de la rétro-conception d'un modèle. On peut alors modifier la base, y ajouter des données et ensuite de créer un fichier contenant les ordres de création des éléments de la base de données grâce à un assistant. Ceci produisant un fichier sql on garde ainsi un historique de toutes les modification apportée à une base de donnée. Le tout relié à un serveur SVN et au commit des fichier on retrouve les modification apporté par d'autres utilisateur ainsi que le modèle de BD à jour.

Il serait donc possible d'avoir un serveur de DB accessible à tous les programmeurs. On aurait ainsi plus besoin d'avoir les Bases de données installées sur chacun des postes mais une seule version toujours à jour.

J'attends le test des programmeurs pour savoir si ça fonctionne correctement sous linux aussi.

PS : notez que c'est l'intégratrice qui vous parle de prog !

• 
• 
• 
• 
• 
• 

Le référencement du flash : le bout du tunnel ?

Google Yahoo et Adobe semblent s'être unis pour améliorer et rendre possible le référencement de texte contenu dans les animations Flash. On parle bien ici du texte et non des images ou encore des vidéos.Google prendra maintenant en compte les liens contenu dans les textes des animations lors de son crawler. Le moteur de recherche pourra alors indexer les pages du site liées entre elles.
Le contenu appelé par Javascript dans le Flash ne pourra quant à lui pas être indexer pour le moment. Il ne sera pas non plus possible d'indexer une ressource externe tel un fichier XML ou tout autre document appelé.

Alors va-t-on pouvoir répondre à la frénésie des clients pro flash ? À priori, non pas encore. Le système est encore à tester. Et puis le référencement de ce type de site restera toujours plus difficile et moins prévisible. Finalement à moins d'avoir un joli site en Flash avec beaucoup de texte, l'indexation des site Flash avec toutes leurs belles gugusses, images, video, et animation n'est pas encore tâche facile.

• 
• 
• 
• 
• 
• 

CSSTidy optimisateur de CSS

CSSTidyest un parser et un optimiseur css open source. Il est possible de l'utiliser comme un executable ou en lignes de commande ou encore en php.

Le but : Optimiser le code. Pour ce faire votre CSS doit être valide. Ensuite CSSTidy passera au travers du fichier afin d'meliorer la syntaxe. Par exemple :
- color:black; ou color:rgb(0,0,0) deviendra color:#000;
- margin:1px 1px 1px 1px; deviendra margin:1px;
- les unités oubliées seront corrigées
- les erreurs syntaxiques seront aussi corrigées
- les espaces indesirables seront supprimés de même que les commentaires.

Résultat : CSSTidy permet de générer un css plus léger et optimiser ce qui permettra un téléchargement plus rapide. Il est possible de gagner en moyenne 30% de compression par rapport au fichier original.

Plusieurs options sont disponibles lors de l'optimisation :
- Le type de compression : du plus compacte au sur mesure (il est aussi possible de definir un gabarit de telle maniere que votre code puisse apparaitre comme indenté)
- Trier les selecteurs ou les propriétés
- Fusionner les sélecteurs
- Compresser les couleurs
- Case de propriétés
- Supprimer les propriétés non valide (CSS1 à CSS2.1)

Bref de quoi rendre optimal le code.

Cependant il est toujours bon de faire une sauvegarde du fichier original. Perso, je vais faire le test de cette technique en ligne en loadant le fichier optimisé. Mais je garderai une version de mon bon vieux fichier css de xxxx lignes plein de commentaires et indenté histoire de m'y retrouver rapidement lors de modifications.

Faites votre test.

• 
• 
• 
• 
• 
• 

Googolopoly

Toujours dans la partie Google Voila de quoi nous divertir durant nos longues soirée d'hiver : le googolopoly.

Le but : dominer toute l'information !
Basé sur le monopoly les deux propriétés les plus chères sont bien évidement Microsoft et Yahoo.

Attention au page 404 qui pourraient vous coûter cher !


À télécharger ici :
googolopoly

et que le meilleur gagne....

• 
• 
• 
• 
• 
• 

Le petit larousse du webmaster made in google

Google a récemment mis en ligne une wiki pour webmaster regroupant les bonnes pratiques du web, les langages CSS, HTML, JAVASCRIPT, et bien d'autres.

Bien sur il y a beaucoup d'autres ressource sur le net sur le même sujet. Pas besoin de nommer Wikipedia et devGuru. Google a un petit plus : Il est possible de trouver les renseignements mais également des codes source déjà programmés via googleCode.

On trouvera également pour chaque propriété ou balise sa compatibilité IE (6, 7, 8) ainsi que Firfeox (2 et 3). Une petite avance par rapport aux autres du fait que IE8 et Firefox 3 ne sont pas encore totalement disponible ou en version beta.

Deplus étant un wiki, chacun pourra y mettre du sien pour améliorer la chose.

• 
• 
• 
• 
• 
•