20-100.ch // Prog, news et autres trucs de geek...

Aller au contenu | Aller au menu | Aller à la recherche

vendredi 27 juillet 2007

Changer dynamiquement l'attribut onclick d'un élément HTML

Il arrive parfois de vouloir changer dynamiquement l'attribut onlcick d'un élément HTML. Supposons que l'on veuille attribuer la fonction suivante au clic sur un élément :

function newFunction() {
    alert('Hello World !');
}


L'astuce est qu'il ne faut pas passer une chaîne de caractère, ou un appel à la fonction, mais un pointeur vers celle-ci ! Ainsi, les deux notations suivantes sont fausses :

element.onclick = newFunction(); // faux
element.onclick = 'newFunction();'; // faux aussi !


La bonne manière de faire est :

element.onclick = newFunction;


Cependant, on ne peux pas passer d'arguments à notre fonction en procédant de cette manière. Il faut alors passer par une "fonction anonyme" :

function newFunction2(name) {
    alert('Hello ' + name + ' !');
}

element.onclick = function () {
    newFunction2('World');
}

mardi 24 juillet 2007

Comment configurer Subversion et ToirtoiseSVN en SVN+SSH (partie 1)

Pour les développeurs, subversion est un outil vraiment pratique. Il permet non seulement de garder un historique de toutes les modifications sur un projet, mais facilite aussi le travail à plusieurs. Sous Windows, il existe un soft parfait pour intégrer Subversion à l'explorateur de fichiers : TortoiseSVN. Ce petit programme ramène à un clic droit toutes les opérations courantes lorsqu'on travaille avec Subversion : commit, update, mais aussi résolution de conflits et comparaison de versions.

Cet article est la première partie d'un guide détaillant la configuration de TortoiseSVN sur un poste Windows pour utiliser subversion en mode SVN+SH, à savoir une connexion à un serveur subversion via SSH. Il détaille la génération des clés SSH ainsi que l'installation de la clé privée sur le serveur.

Comment configurer Subversion et ToirtoiseSVN en SVN+SSH (partie 2)


Lire la suite...

mercredi 11 juillet 2007

Pour tous les percutionnistes qui manquent de place...

... ou qui n'ont pas les moyens de s'acheter la batterie de leurs rêves, ThinkGeek a l'objet de tous les désirs : une batterie à doigts !

Une grosse caisse, une caisse claire, deux toms et une cymbale, le tout tactile et illuminé lorsqu'on joue dessus ! Et le must du must : une fonction d'enregistrement ! De quoi enregistrer pour la postérité vos plus beaux riffs... Et exaspérer vos collègues ;) !

mardi 10 juillet 2007

Hébergement gratuit avec 10Go d'espace disque

Un nouveau service d'hébergement comme on voudrait en voir plus souvent vient de sortir : http://www.freehostingnow.com. Au programme :

  • 10Go d'espace disque
  • 10Go de bande passante
  • 3 bases de données MySQL
  • Accès FTP
  • Gestionnaire de fichiers via le navigateur
  • Statistiques
  • Possibilité d'utiliser son propre nom de domaine ou un sous-domaine en XXX.freehostingnow.com
  • Panneau d'administration

Le tout avec une interface assez sobre mais intuitive, qui permet de faire à peu près tout ce qu'on veut : gérer ses bases de données, ses fichiers, son compte, etc... Et surtout, pour ceux qui veulent un site sans s'embêter à devoir tout installer et configurer soi-même, ce panneau d'administration donne accès à l'installation en un clic d'une vingtaine d'outils :

  • tikiwiki
  • ZenCart
  • Nucleus
  • MyBB
  • cutenews
  • SMF
  • 4images
  • UseBB
  • coppermine
  • osCommerce
  • Mambo
  • wikiwig
  • gallery
  • bBlog
  • sBlog
  • MyLittleForum
  • Joomla
  • phpBB2
  • wordpress
  • Xoops

Et le tout gratuitement ! Que demander de plus ?

vendredi 6 juillet 2007

Tester ses sites sous plusieurs versions d'Internet Explorer

Un des principaux problème des webdesigners, et plus généralement des développeurs web, est d'assurer la compatibilité avec les divers navigateurs. En effet, la majorité des internautes surfent avec Internet Explorer, dans sa version 6 (la version 7, qui est sortie il y a déjà plusieurs mois, commence à prendre de l'ampleur, mais est toujours loin derrière son prédécesseur). Et le problème, c'est que ces deux navigateurs ne sont pas connus pour leur respect des standards et leur bonne interprétation du HTML/CSS (contrairement à d'autres, comme Firefox ou Opera, qui se débrouillent plutôt bien !).

Ainsi, même si tout bon geek qui se respecte surfera avec Firefox, il devra développer sous IE afin de s'assurer que son site sera fonctionnel pour la majorité des gens. Là où cela peut poser problème, c'est que le bon geek, justement, aura mis à jour son OS. Et n'aura donc que la version 7 d'Internet Explorer.

Il existe plusieurs solutions pour faire cohabiter différentes versions d'Internet Explorer, en ne faisant pas la mise à jour pour garder la version 6 et en installant une version standalone de la 7, par exemple, mais cela reste à mon avis du bricolage (il manque certaines fonctionnalités, etc...).

Il existe par contre un installeur, très bien fait, qui permet d'installer une floppée de vielles versions (à partir de la 3 !), toutes mises à jour et patchées pour pallier aux failles de sécurité connues, et tout ça en trois clics ! Ainsi, vous aurez votre version "normale" qui se mettra à jour avec les update de Windows, et vos anciennes versions que vous utilisez pour tester !

Vous trouvez cet installeur sur sa page dédiée, ou en téléchargement direct. Happy testing ;) !

mercredi 4 juillet 2007

Insérer des images à l'URL relative au thème en .Net

Une des nombreuses fonctionnalités du .Net, pour la création de sites web, est la possibilité d'utiliser des thèmes. Ceux-ci permettent d'avoir à disposition plusieurs jeux de fichiers CSS et d'images, ainsi qu'un moyen, via des "skins", de définir le style CSS par défaut des composants ASP.Net.

Cependant, un problème subsiste : on ne peut pas, en dehors des fichiers CSS et skins qui sont situés dans le dossier du thème, définir l'url d'une image de manière relative au dossier du thème (par exemple, "Images/logo.jpg" qui pointera vers "/App_Themes/Theme2/Images/logo.css" selon le thème choisi).

Ce problème peut heureusement être contourner très facilement, en étendant le composant Image pour lui faire remplacer dynamiquement l'url de l'image ! Il suffit de créer une nouvelle classe, de la faire étendre System.Web.UI.WebControls.Image, et de lui ajouter la méthode suivante :

protected override void Render(HtmlTextWriter writer) {
    string oldUrl = this.ImageUrl;
    this.ImageUrl = String.Format("~/App_Themes/{0}/{1}", this.Page.Theme, this.ImageUrl);

    base.Render(writer);

    this.ImageUrl = oldUrl;
}


Ensuite, dans votre page ASPX, vous l'utilisez de la manière suivante :

<VotrePrefixe:ThemeImage ID="ImageLogo" runat="server" ImageUrl="Images/logo.jpg"/>


Un grand merci à http://blog.iridescence.no pour son article sur la gestion des images dans les thèmes !

mardi 3 juillet 2007

Problème avec le PATH_INFO pour Dotclear 2

Une des nombreuses fonctionnalités de Dotclear 2 est de permettre l'utilisation du PATH_INFO (au lieu de QUERY_STRING) comme méthode pour générer les liens. En pratique, cela veut dire que vous aurez des liens du type :

  • http://20-100.ch/blog/index.php/post/2007/07/02/Lancement-du-blog

au lieu de :

  • http://20-100.ch/blog/index.php?post/2007/07/02/Lancement-du-blog.

Quelle différence ? Hé bien, tout d'abord, c'est plus joli ;) ! Ensuite, il paraît que c'est mieux pour le référencement (une URL en mode QUERY_STRING verrait parfois la partie située après le ? être ignorée... à confirmer, mais c'est toujours ça de gagné !). Et pour finir, ça apporte un grand plus pour les statistiques de votre blog : en mode QUERY_STRING, toutes les requêtes sont considérées comme étant sur la même page (index.php), tandis qu'en PATH_INFO, chaque poste sera considéré comme ayant sa propre adresse ! Ce qui permet d'avoir des statistiques plus détaillées...

Toujours est-il qu'au lancement de ce blog, il m'était impossible d'utiliser ce mode ! En regardant un peu de plus près comment le PATH_INFO fonctionne, voici ce que j'ai trouvé :

  1. Le serveur web (Apache) extrait les données situées après le nom de la page (le /post/2007/07/02/Lancement-du-blog) pour les mettre dans un variable système
  2. Le script PHP récupère cette valeur via la variable $_SERVER["PATH_INFO"]

Je suis donc allé voir dans mon phpinfo(), si cette variable était bien définie, et je ne l'ai pas trouvée. A la place, une variable $_SERVER["ORIG_PATH_INFO"] contenait la valeur attendue. J'ai donc poursuivi mes investigation, pour découvrir que ce cas de figure apparaît sur les serveurs où PHP est en mode CGI (ce qui est le cas chez Wrackweb). J'ai aussi découvert ces lignes dans le fichier inc/config.php de Dotclear 2 :

// If you have PATH_INFO issue, uncomment following lines
// if (!isset($_SERVER['ORIG_PATH_INFO'])) {
//      $_SERVER['ORIG_PATH_INFO'] = '';
// }
// $_SERVER['PATH_INFO'] = $_SERVER['ORIG_PATH_INFO'];


Il suffisait donc de décommenter ces lignes pour que le PATH_INFO fonctionne...

Moralité : RTFM, comme diraient mes "amis" de la mailing-list Typo3 ;-)...

lundi 2 juillet 2007

Forcer le téléchargement d'un fichier

Il peut arriver certaines fois que l'on veuille force le navigateur à télécharger un fichier plutôt que de l'afficher directement dans la fenêtre. Pour ce faire, il suffit de spécifier des headers HTTP indiquant au navigateur ce qu'il doit faire.

Dans notre cas, les headers qui nous intéressent sont les suivants :

  • Content-Type : application/force-download (indique au navigateur que le contenu doit être téléchargé et non affiché)
  • Content-Disposition : attachment; filename="Nom de votre fichier.pdf" (indique au navigateur que la réponse comprend un attachment, et spécifie le nom de celui-ci)

Ces headers s'ajoutent généralement dans le code côté serveur. Voici comment faire en PHP :

header('Content-Type : application/force-download');
header('Content-Disposition : attachment; filename="Nom de votre fichier.pdf"');


et en C# :

protected void Page_Load(object sender, EventArgs e) {
   string fileName = "Nom de votre fichier.pdf";
   this.Response.ContentType = "application/force-download";
   this.Response.AddHeader("content-disposition", "attachment; filename=\"" + fileName + "\"");
}

Lancement du blog

Bonjour à tous !

Après des mois d'hésitations, de réflexions quant au contenu de ce blog, et de l'utilité de celui-ci, je me lance ! Vu le nombre de fois que je tombe sur des blogs de développeurs qui ont eu le même problème que moi, et qui mettent à disposition la solution qu'ils ont trouvée, je me suis dit qu'il fallait quand même que j'apporte ma pierre à l'édifice !

Vous trouverez donc un peu de tout sur ce blog, des hacks CSS aux configuration d'outils de développement, en passant par des coups de coeur pour des sites/programmes et des bouts de code en divers langages, bref, tout ce qui compose mon quotidien d'étudiant EPFL en stage, mais aussi de geek à ses heures perdues !

Ce blog évoluera certainement au fur et à mesure de mes découvertes, et de mes envies, mais je vais essayer de poster à un rythme plus ou moins régulier ! J'espère que parmi mes visiteurs, certains d'entre vous trouverez des réponses à vos problèmes, et que je vous épargnerai quelques heures de recherches sur Google et d'essais à vous arracher les cheveux ;-) ! Et, si le coeur vous en dit, n'hésitez pas à poster dans les commentaires vos compléments et vos alternatives à mes solutions !

Merci, et bonne lecture !

page 2 de 2 -