Sol@rweb WeBlog

Je ne sais pas si vous êtes comme moi mais j'aime beaucoup Gorillaz, ils font de super mélodies, j'adore les 2 albums.

J'ai appris récemment que le DVD d'un concert donné à Manchester est disponible, c'est un des rares concerts que Gorillaz peut donner, j'ai regardé des extraits du DVD et j'ai beaucoup aimé, que ça soit l'ambiance, les couleurs, la musique bien sûr...

Je vous invite d'ailleurs à regarder l'extraits de "Dirty Harry" avec les enfants qui chantent et dancent j'adore :)

Voila un petit coup de pub donc pour Gorillaz, vous pouvez regarder les extraits et les clips vidéos sur leur site officiel.

Comme je ne l'ai pas encore fait, je vais vous parler un peu de l'association, avec en premier lieu la problématique du serveur dédié et ensuite nos projets en cours.

Le serveur dédié

C'est l'outil essentiel de l'association, c'est le principal "pourquoi" de l'existance de l'association. Il nous permet d'héberger nos projets sans problèmes, il est l'outil essentiel au bon fonctionnement de l'offre d'hébergement de l'association Sol@rweb Hébergement.

Il se trouve qu'il y a quelques jours, OVH a proposé une nouvelle version de ses serveurs. Pour le notre, cela offre environ 6 fois plus de disque et 10 fois plus de bande passante ce qui n'est pas négligeable. Mais OVH ne propose pas de faire de migration à l'identique d'un serveur sur un autre.

Afin de bénéficier de cette amélioration nous avons donc dû commander un nouveau serveur en parallèle pour effectuer une migration.

Il y a donc tout d'abord le côté administration, où je suis le seul dans l'association à pouvoir m'en occuper (je recherche d'ailleurs un administrateur linux si vous êtes intéressé contactez-moi), et il y a aussi le côté client, ou il va falloir planifier une date quand tout sera prêt pour demander les changements de DNS, etc... en sachant que le serveur actuel expirera le 30 juin 2006.

Au final ça fait du travail mais c'est pour le bien de tout le monde :)

Les projets de l'association

Ce qu'il faut savoir en premier lieu c'est que nous avons nos projets personnels qui se développent lentement mais que nous avons aussi des projets pour des clients que nous favorisons, car cela nous apporte des références mais aussi un peu d'argent (pour payer un serveur dédié par exemple).

Le dernier site qui à vu le jour pour l'association, c'est WTG Fansubs, qui à une moyenne de 350 visiteurs par jours, moyenne qui grimpe doucement, ce qui est déjà pas mal. J'effectue des amélioration du robot de temps en temps, il est chargé d'aller récupérer les liens torrent sur les tracker des teams. J'espère prochainement pouvoir ajouter une page de statistiques, avec les teams, animes, fansub, les plus visités, les plus téléchargés, etc...

Le prochain site à voir le jour a aussi un lien avec le monde du fansub, c'est le site d'une team qui va voir le jour très bientôt et qui se nomme tenku-fansub. La partie visible n'est pas très impressionnante mais le back-office est très efficace et permettra d'administrer le site très rapidement. J'ai aussi réalisé un bot IRC, pour les connaisseurs, il se connecte tous les X heures et effectue des requetes de list XDCC sur les bots de la teams afin de les afficher ensuite sur le site. Vous pouvez avoir un aperçu sur l'espace de démonstration.

Nous travaillons aussi sur un site de cours et tutoriaux axés "web 2.0", nommé "Learn the web 2.0", nous avançons doucement mais j'espère que nous pourrons le sortir à la "rentrée". Vous pouvez voir un aperçu de maquette ici.

Un petit post pour présenter un jeu que l'on m'a fait connaître ce matin.

A l'origine c'est un peu un jeu de société mais il y a une version jouable sur internet. Le principe est simple, vous pensez à quelquechose, objet, sentiment... et le jeu essaye en vous posant 20 questions, de trouver ce à quoi vous pensiez.

Après quelques (nombreux) tests, je n'ai réussi à l'avoir qu'une seule fois avec "la colère", entre temps il a trouvé l'agenda électronique, l'ours en peluche...

20Q un jeu a essayer de toute urgence :)

Il y a peu, Microsoft à publié un patch correctif qui a ajouté un nouveau problème pour les développeur vis à vis de Internet Explorer.

En effet, lors de la visualisation de flash, on nous oblige maintenant à cliquer une première fois sur l'animation pour l'activer. Cela a été mis en place pour éviter l'utilisation d'un swf sur un autre domaine que celui d'origine mais cette modification a surtout posé des problèmes à tout le monde...

Voici donc 2 méthodes au choix qui permettent de régler ce problème grâce au javascript, vous pouvez suivre cela dans le labo et bien évidemment sous Internet Explorer 6 avec le patch.

1. La première méthode est artisanale, je l'ai découverte dans cet article mais je l'ai optimisée car celle-ci ne respectait pas les standards, afin d'utiliser la méthode flash satay que vous pouvez voir dans cet article-ci..
   Elle consiste à appeler une fonction javascript en html pour afficher le flash :

   <script type="text/javascript">
   displayFlash("bouton.swf", 200, 50, "Contenu alternatif");
   </script>

   Et en javascript, à ajouter un paramètre et a simplement afficher le flash :

   function displayFlash(swf, hauteur, largeur, alternatif)
   {
   	document.write('<object type="application/x-shockwave-flash" data="'+swf+'" width="'+hauteur+'" height="'+largeur+'">');
   	document.write('<param name="allowScriptAccess" value="sameDomain" />');
   	document.write('<param name="movie" value="'+swf+'" />');
   	document.write(alternatif);
   	document.write('</object>');
   }

2. La deuxième méthode consiste à utiliser un objet qui est fourni par adobe et que vous pouvez trouver sur cette page Cette méthode est plus complète, permet d'ajouter des paramètres, etc... mais on remarquera notamment un retard lors de l'affichage.
3. EDIT : Une troisième méthode que j'ai trouvé sur le site de mon ami Nosegrind, assez simple, toujours en javascript, mais qui fera quand même fonctionner le flash si le javascript est désactivé, donc a priori une bonne méthode. Elle est a activer a la fin du chargement de tous les flash de la page :

   theObjects = document.getElementsByTagName("object");
   for (var i = 0; i < theObjects.length; i++)
   {
   	theObjects[i].outerHTML = theObjects[i].outerHTML;
   }

Au final, ces deux méthodes fonctionnent parfaitement, c'est à vous de choisir, personnellement, j'opterais pour la méthode artisanale (comme toujours ^^).

Il y a des règles fondamentales pour bien intégrer une maquette graphique en xHTML, afin qu'il soit bien accessible à tous et aux moteurs de recherche notamment, mais aussi qu'il fonctionne sur la majorité des navigateurs.

Une première chose fondamentale concerne les liens en image, une image avec son texte intégré ne doit être créée que dans le cas ou l'on ne peut pas écrire avec la police utilisée en xHTML.

Un exemple avec un menu en image, 2 manières possible, mais une seule réellement intéressante :

• La première méthode consiste à mettre les images dans le document xHTML et leur mettre l'attribut alt pour définir le contenu de l'image

  <a href="#" title="Mon menu 1">
     <img src="#" alt="Mon menu 1" />
  </a>

  Cette méthode est utilisable, si l'on désactive les feuilles de styles on aura toujours l'image, mais ce n'est pas la meilleure méthode sémantiquement parlant.
• La meilleure méthode consiste à mettre un style sur le lien pour rendre le texte invisible, et appliquer l'image. Ainsi si la feuille de style est désactivée on se retrouvera bien avec un menu en texte avec lequel tout le monde peut naviguer facilement.
  
  Je vois 2 solutions pour cacher le texte (il en existe peut-être d'autres), la première consiste à bidouiller en mettant le texte en font-size:1px;

  <a href="#" title="Mon menu 1" class="menu1">Mon menu 1</a>

  Le css ressemblera à cela :

  .menu1 {
  background-image....
  font-size:1px;
  color...
  }

  Mais la meilleure solution consiste a ajouter un élément inline dans le lien pour le rendre invisible en CSS (si on définissait le display directement sur le lien on ne verrait pas l'image) :

  <a href="#" title="Mon menu 1" class="menu1"><span>Mon menu 1</span></a>

  Et le css :

  .menu1 {
  background-image....
  }
  .menu1 span {
  display:none;
  }

Maintenant une technique plus visuelle, avec la question des png transparent et ce fameux bug sous IE <= 6.0 qui ne les accepte pas, on pourra espérer que à la sortie de IE 7 tout le monde migrera vers la nouvelle version (ou encore mieux sous firefox) mais cela ne se fera pas en un jour...

Il y a un script javascript que tout le monde connait et qui permet d'appliquer un filtre sur les images png pour les rendre transparentes (qu'elles en aient besoin ou pas) mais l'on peut rencontrer des problèmes et notamment :

1. Des liens qui ne fonctionnent plus si ils sont au dessus d'une image transparente, une solution possible est de mettre la position du lien en relatif.
2. Des images non transparente qui sont déformées par le filtre.

Ce qu'il faut faire :

• Si le site n'a pas besoin d'images transparentes, vous pouvez tout mettre en png, c'est le meilleur format pour le web (il serait toujours utilisé sans ce problème de transparence).
• Vous avez besoin d'images transparentes, mettez tout votre sites en jpg ou en gif et ne mettez que les images qui en ont besoin en transparence, vous éviterez ainsi de nombreux bugs.

Pour finir je vous met un lien vers la source du script javascript de correction qui ne s'activera que sous IE

Hier je me suis amusé un peu à scripter en bash et en perl pour améliorer certaines petites choses pour l'hébergement. C'est pour moi la plus grande force des systèmes unix, on peut faire tellement de choses avec.

J'ai commencé par améliorer mon script de backup mysql, qui se contentait de faire une copie sur le disque local, donc si le disque crashait et bien ça ne servait pas à grand chose. Avec OVH j'ai un FTP de backup de 40Go et je comptais bien l'utiliser.

J'ai donc modifié mon script bash afin de créer un fichier tar à partir des bases de données et de l'uploader sur le serveur FTP ensuite. Voici le script en question commenté pour ceux que ça intéresserait :

#!/bin/bash
# On rentre dans le répertoire qui contient les bdd
cd /home/backup/mysql
 
# Compression en tar avec un nom en Ymd
tar -cf `date +%Y%m%d`.tar /home/mysql
 
# On déplace sur le ftp
ftp -n X.X.X.X <<EOF
user login pass
cd mysql
put `date +%Y%m%d`.tar
bye
EOF
 
# On supprime les fichier
rm -r `date +%Y%m%d`.tar

C'est assez simple finallement :) Bien sur une tâche cron permet de l'exécuter à intervales réguliers.

Ma deuxième bidouille à concerné le fameux OVHm, module pour webmin développé par OVH pour automatiser la création des domaines, sous domaines, etc...

Ce qui me dérangeait était principalement la création d'un répertoire www pour mettre le répertoire stats complètement inutile, je ne comprend pas pourquoi il font cela... J'en ai profité pour ajouter automatiquement, lors de la création d'un domaine ou d'un sous-domaine, les statistiques awstats dans un repertoire /awstats.

Vous pourrez trouver prochainement les sources des fichiers modifiés dans OVHm 0.4.4k dans mon labo qui sera bientôt skinné (et développé), et bien sur si vous voulez profiter de tout cela il y a Sol@rweb Hébergement, l'offre de l'association Just Plug & Play.

A la manière de Tristan Nitot sur son Standbog voici quelques news et liens en vrac.

• Tout d'abord comme vous avez dû le remarquer j'ai rechangé le style, celui-ci me semble sympa, lisible, et pourra accueillir mon nouveau logo en haut à gauche lorsque je changerais de domaine (solarweb.fr pour bientôt).
• J'ai aussi tout mis sans "chapô", on accède plus vite à l'information, à vous de me dire si vous préférez :)
• Ensuite un premier lien vers un nouveau jeu sur la toile sympathique, on doit répondre le plus vite possible à une réponse posée sans prévenir sur le site, ces questions étant parfois très instructives : http://www.fast2reply.com/
• Jamendo, un site pour trouver des albums libres de droits, avec des artistes peu connus mais il y a de quoi trouver son bonheur ! C'est un site qui commence à faire parler de lui avec son 1000 ème album en ligne dernièrement : http://www.jamendo.fr
• Un autre site musical que je découvre en ce moment, on install un plug-in avec son player favoris, et celui-ci va lire les tags de vos fichiers pour faire des stats des musiques, genres que vous écoutez, et ensuite vous proposer des news, une radio personnalisées, etc... http://www.last.fm/, vous pourrez me trouver sous le pseudo "shgamer", et voir ma page par ici : http://www.last.fm/user/shgamer
• Je termine par une technique CSS que je ne connaissais pas, pour ajouter les langues après les liens en les récupérants dans l'attribut hreflang :

  a[hreflang]:after
  {
    content: "\0000a0[" attr(hreflang) "]";
    color : #666;
  }
  

Un petit billet de bon matin pour vous montrer quelques articles que j'ai découverts récemment, avec un "pro-américain loving bush" qui nous explique pourquoi linux c'est mal et un article qui nous explique pourquoi internet explorer c'est bien (ironiquement cette fois-ci).

Le premier épisode est parti de cet article-ci : Article chez nuxo

On y apprend que linux est une menace européene pour les jolis ordinateurs américain sous windows. Personnellement je trouve que ça fait peur d'avoir une pensée aussi étroite... Dans cet article ou dans un autre il affirme que jamais il ne serait hébergé sur du linux ! Mais dans un commentaire quelqu'un lui met les caractéristiques de son serveur bien évidemment sous linux, on a alors le droit à un nouveau post : Shelley républican sous linux !

Au passage on remarquera aussi un autre post illarant sur un ingenieur certifié microsoft qui veut effectuer une comparaison entre windows 2003 et une redhat... 3... qui est donc une très vieille version, c'est comme si il comparait avec windows 3.1 : Comparons linux et windows

Heureusement un peu de réalisme dans ce monde de brute avec un article qui nous explique pourquoi internet explorer est si bien. Evidemment ceci est de l'ironie, si vous utilisez encore Internet Explorer notez bien ce qui est dit car c'est plutôt vrai... Pourquoi utiliser internet explorer ?

Voici mon passage préféré à propos de l'élevage de joyeux petits programmes que peuvent faire les utilisateurs de ce navigateur :

En utilisant Internet Explorer, vous permettez à des dizaines de petits programmes de s'installer joyeusement sur votre ordinateur toute les semaines. Ces petits programmes apportent de la gaieté dans la grisaille quotidienne, vous affichant des images coquines à tout bout de champ, rajoutant des boutons vous permettant de voir la météo à Ouagadougou en permanence, bref que du bonheur. Pourquoi vouloir s'en priver ? Certes, cela ralentit votre ordinateur, mais vous avez justement de la puissance en trop !

Une petite astuce que j'ai découverte récemment et testée pour trouver la meilleure utilisation. Le but est donc de ne plus avoir de gestion d'événements (onload, onlick...) dans le code xHTML mais que tout soit géré dans le javascript.

On va d'abord définir une fonction quelconque en javascript que l'on va essayer d'appeler avec l'événement interne, puis en externe :

function tell(personne, objet_creux_feminin_singulier)
{
	alert(personne+" rentre dans sa "+objet_creux_feminin_singulier);	
}

Voici la manière classique d'appeler cette fonction avec l'événement onclick dans un document xHTML :

<a href="#" onclick="tell('toto', 'maison')">Interne</a>

Maintenant le but est d'appeler cette fonction sans l'événement, on va donc ajouter un id à l'élément "a" mais on aurait pu essayer de le retrouver avec getElementsByTagName() (ce qui serait plus difficile dans une page avec x liens).

<a href="#" id="toto_maison">Externe</a>

La méthode pour lier un événement est tout simplement "element.evenement" lorsque il n'y a pas de paramètres et "element.evenement = function() {}" lorsqu'il y a un ou plusieurs paramètres.

Ce qui donne dans notre cas :

document.getElementById('toto_maison').onclick = function()
{
	tell('toto', 'maison');	
}

Seulement si vous insérez directement ce code dans votre fichier javascript, il ne va pas fonctionner car il va vouloir lier l'événement alors que la page n'est pas terminée de charger et que cet élément n'existe pas encore !

La solution est alors de faire une fonction pour englober les liaisons :

function loadEvents()
{
	// Evenement pour le lien toto
	document.getElementById('toto').onclick = function()
	{
		tell('toto', 'maison');	
	}
}

Une fois cette fonction créée il faut encore la charger elle aussi, on pourrait le faire avec un onload() sur le body mais on a décidé de tout externaliser.

La solution consiste alors à définir l'exécution de cette fonction une fois que la fenetre est chargée :

window.onload = loadEvents;

Et voila, nous avons notre code final qui externalise totalement le javascript. Exemple complet ci-dessous :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Externalisation</title>
<script type="text/javascript" src="externalisation.js"></script>
</head>
<body>
	<a href="#" onclick="tell('toto', 'maison')">Interne</a>
	<br/>
	<a href="#" id="toto_maison">Externe</a>
</body>
</html>

// JavaScript Document
window.onload = loadEvents;
 
function loadEvents()
{
	// Evenement pour le lien toto
	document.getElementById('toto_maison').onclick = function()
	{
		tell('toto', 'maison');	
	}
}
 
function tell(personne, objet_creux_feminin_singulier)
{
	alert(personne+" rentre dans sa "+objet_creux_feminin_singulier);	
}

EDIT : Ce script est maintenant disponible dans mon labo

Un dernier post pour cette matinée et pour lancer le blog, sur les derniers animes sortis au japon qui m'intéressent, car il y en a bien sûr d'autres, soit qui ne m'intéressent pas, soit que je n'ai pas eu le temps de découvrir. Pour ceux qui ne connaissent pas le monde des animes c'est par ici qu'il faut commencer !

Je vais donc parler de 4 animes que je regarde en ce moment dans l'ordre de préférence :

Noein - Mou hitori no kimi e

Le meilleur anime actuellement en diffusion pour moi est Noein, c'est une histoire de science-fiction qui tourne autour des mondes parallèles, du temps et de l'espace, un sujet que l'on ne connait pas du tout, qui est basé sur des suppositions, et l'anime tire sa force justement de là ! Dès le premier épisode on tombe dans un monde imaginaire, avec des musiques sublimes, un "chara design" un peu déroutant au premier abord mais on s'y habitue très vite ! En bref un anime a découvrir de toute urgence ! L'anime est rendu à l'épisode 21 sur 24.

Kiba

Kiba est plutôt un anime fantastique que science-fiction, c'est beaucoup plus de l'imaginaire, avec des "esprits" que l'on invoque pour combattre, etc... On en est à l'épisode 6, l'intrigue n'est pas aussi forte que celle de Noein mais mérite le détour, l'animation est sympathique et la musique aussi (il y a d'ailleurs un sacré thème de trompette solo...), on a eu le droit a une histoire parallèle entre deux personnages qui se connaissaient au tout début pour le moment et l'on se demande quel sera leur lien dans les futurs épisodes...

Major

Major est un anime du genre sport, et plus précisemment du baseball, il raconte l'histoire de Goro, jeune fan de baseball qui semble avoir une bien belle carrière de joueur professionnel devant lui mais qui va en voir de toutes les couleurs si il souhaite y parvenir... Bon alors moi je ne suis pas un fan de baseball mais cet anime est vraiment bien fait et nous fait aimer ce sport, on s'attache aux personnage, les musiques sont aussi très bien. Major est rendu à l'épisode 44, c'est donc la saison 2, la saison 1 étant terminée depuis le 26 ème épisode. Vous pouvez commencer à la saison 1 elle n'est pas encore licenciée (liens sur wtg fansubs).

.hack//Roots

Le dernier, hack roots correspond quand a lui à un genre assez peu commun, fantastique certes, mais l'histoire se déroulant dans un MMORPG, vous savez ces jeux Online Persistants comme World of Warcraft on l'on n'a plus de vie sociale après ^^. Hack est une série ayant plusieurs "saisons" différentes. La première, et selon moi la meilleure est .hack//Sign, l'histoire est vraiment fantastique, et les musiques géniale aussi, cette saison étant licenciée vous pouvez la trouver en DVD. Hack Roots se raprocherait de ce premier épisode et pour ce que j'ai vu pour le moment (4 épisodes sortis), l'histoire est un peu lente, mais on sent que quelquechose se met en place et ça donne vraiment envie de savoir quoi...

Pour terminer, je pense que pour juger un anime il faut regarder le premier épisode, ce que je vous invite à faire ;)

Comme prévu je vais commencer par Mission Impossible 3 vu en salle mardi dernier. Pourquoi en parler ? On se souviendra du 1 et du 2 qui n'étaient pas franchement des chefs d'oeuvres, mais celui-ci a la particularité d'être réalisé par J.J. Abrams !

Et alors ? Qui est JJ Abrams ? On trouvera une description sur allociné mais on retiendra principalement qu'il réalise les séries Alias et Lost !

On a alors parlé d'un film plus humain que les précédents, qui montre un visage différent du personnage Ethan Hunt joué par Tom Cruise (qui produit aussi le film) et il a donc fallu vérifier que tout ceci était bien vrai !

Et bien certes, après l'avoir vu je trouve qu'il est sans conteste le meilleur des trois, il y a tout de même énormément d'action, on en ressort en voyant des explosions partout et en sautant entre les immeubles :)

Le seul point négatif c'est malheureusement la bande annonce, qui montre déjà les répliques les plus marquantes du film (par le méchant).

Et maintenant profitons-en, pour parler de Lost ! J.J. Abrams en a toujours parlé dans ses interviews pour mission impossible. Avant-hier sortait l'épisode 21 de la saison 2 de Lost (aux états-Unis), je l'ai regardé hier soir et comme prévu ça commence vraiment à redevenir très intéressant et l'on repart comme au début de la saison à redécouvrir plus de choses sur la Dharma Initiative et sur Mr Eko qui semble donc jouer un rôle important dans tout ça (sans parler de John ^^). En bref un très bon épisode qui ogure de très bonnes choses pour le 22, le "season final", qui sera un double épisode si mes souvenirs sont bons :)

PS : Je viens de penser à ceux qui en sont toujours à la saison 1 :) Ne vous inquiétez pas vous comprendrez bientôt avec le tout début de la saison 2 qui est vraiment extraordinaire !

Bonjour tout le monde, J'ai décidé ce matin (sur un coup de tête comme dab ^^) de réouvrir un blog, j'ai déjà tenté plusieurs fois l'expérience mais je n'arrivais pas à blogguer, manque de temps, manque d'envie ?

Ecrire n'est pas forcément ce que je fais le mieux mais c'est peut-être aussi une des raisons pour lesquelles il faut que je m'y mette ? Si l'on écrit pas on ne progresse pas non plus :) (Sans compter qu'il va bientôt falloir que je rédige un rapport de stage ^^).

Donc et bien je vais parler un peu de tout ce que j'aime, qui fait mon quotidien :

• Internet et le multimédia qui restent ma grand passion, mon métier, avec des astuces, un devBlog, mais aussi quelques billets sur l'association Just Plug & Play que j'ai créé il y a quelques temps pour parler de son avancement.
• Le cinéma, quelques séries télés qui font aussi partie de ce que j'adore, se plonger dans un univers, oublier le monde alentours, se réveiller complètement désemparé...
• L'animation japonaise, qui, dans la même optique que les séries télés et le cinéma nous fait découvrir des mondes totalement différents, le japonais (je commence à comprendre de plus en plus d'expressions sans regarder les sous-titres :)), des histoires vraiment intéressantes...
• The world, avec un peu de tout, il y aura peut-être la DADVSI mais c'est presque terminé maintenant, l'affaire clearstream ah ah comment perdre son temps pour des conneries avec les projets de lois importants qu'il y a à côté (DADVSI ?), des découvertes quelconques qui m'intéressent..
• Et moi, je sais pas si je vais beaucoup blogguer sur moi c'est pas ce que je préfère mais peut-être si il m'arrive des trucs de fou (quand je serais plus à saint-dié ça ^^).

Voila et bien bonne lecture je vais commencer par trouver un style pour le blog et je post sur M:I:3 !