Nes’ Blog

Sliding Menu v1.3.1

Déjà ? Eh bien oui !

J’avais pourtant bien dit que je souhaitais faire une pause pour ce projet mais il s’est avéré que ce n’était finalement pas possible tant que tout ne serait pas parfait.

Je suppose que vous aviez remarqué que mon script ne gérait pas l’opacité des images sous IE. Je ne comprenais pas pourquoi et j’avais donc quand même décidé de sortir la nouvelle version sans attendre de régler ça (mauvaise idée en fait). Et puis hier soir j’y ai repensé dans mon lit (c’est là que je réfléchis le plus =° ) et je me souvenais que je n’avais essayé ça qu’en local, ce matin j’ai donc essayé en ligne : aucun résultat !
Comme je suis du genre têtu j’ai donc continué à chercher et j’ai fini par découvrir que cette saloperie de filtre pour l’opacité ne pouvait s’appliquer que sur des éléments HTML possédant le layout, et le layout avec IE c’est pas toujours drôle…

Bref, j’ai fini par résoudre le problème en appliquant le filtre d’opacité directement sur les images et non pas sur les liens qui les contiennent. Tant que j’y étais, j’ai cherché comment faire fonctionner l’opacité sous Konqueror mais ça m’a saoulé (navigateur alakon, je l’ai toujours dit).

Donc, pour ceux qui le souhaitent, la version 1.3.1 de Sliding Menu est disponible et arrange cette histoire d’opacité pour Internet Explorer, j’en ai aussi profité pour faire une légère restructuration du code, plus propre sur certains points.

Au passage, j’ai fini de lire mon roman : “La Guilde des Magiciens”. Je le recommande à tout ceux qui aiment le fantastique, c’est vraiment génial, maintenant il faut que j’achète les 2 autres tomes ^^ .

Concernant le blog, je ne sais pas si vous avez remarqué mais j’ai ajouté en haut à gauche un petit lecteur flash, j’y mettrai la musique que j’apprécie (d’avance, oui, j’ai des goûts bizarres). Je pense que je changerai les morceaux assez fréquemment.

Nes’

Tags: Sliding Menu

Sliding Menu v1.2.4 et Noël : quel rapport ? Aucun !

Oui, ça fait longtemps que je n’ai plus donné de nouvelles, mais j’ai plusieurs alibis (libre à vous d’y croire ou non) :

• J’ai eu quelques problèmes avec la nouvelle mise à jour de Wordpress (dont l’url-rewriting foireux comme l’avait fait remarquer smilz).
• J’ai eu peu de temps de sommeil à cause de la série manga GetBackers, je me suis couché vers 1h à 2h du mat’ chaque soir parce que je lisais environ 2 ou 3 tomes dans mon lit à chaque fois. Faut que mes amis arrêtent de me prêter des mangas sinon je vais pas tenir toute l’année…
• Et puis j’avais rien à vous dire §

Enfin bref, même si il y aura eu pas mal de temps écoulé, l’important est que la version 1.2.4 de Sliding Menu est terminée (depuis un moment en fait =° ). Donc pour marquer le coup j’ai décidé de lui offrir une page web (c’est ça qui a pris le plus de temps xD ). J’ai essayé de la faire la plus élégante possible et je pense avoir réussi même si ce n’est pas incroyablement beau, disons que c’est sobre.

La page web en question

Concernant le menu lui-même, plusieurs modifications ont été apportées, les voici :

• La première lettre du nom de la classe est maintenant une majuscule (pensez-y !).
• Quelques corrections de bugs (hauteur des fondus mal définie, z-index et margin foireux, etc).
• Modification de la licence (passage de la GPL à la LGPL).
• Remplacement du terme “melted” par “fade” dans le code (erreur de traduction).
• Initialisation automatique du menu (aucun appel à la méthode init() n’est nécessaire dorénavant).
• Si les fonds ne sont pas spécifiés on les remplace alors par un système d’opacité progressif.
• Vérification de la largeur des images, le menu se lance pas si elles n’ont pas toute la même largeur.

Bref, on peut donc dire qu’il y a eu 2 ajouts majeurs qui sont donc la nouvelle animation (compatible avec tous les navigateurs gérant le style CSS opacity) et le chargement du menu uniquement lorsque toutes les images font la même largeur. Cette dernière fonctionnalité fait aussi office de vérificateur de chargement, si toutes les images ont commencé à se charger alors on peut lancer le menu sans risque, en revanche, si une image ne se charge pas alors le menu ne s’exécutera pas.

Bon, on va maintenant parler de ma vie vu que ça vous intéresse (ou pas) :

En ce moment nous sommes en pleine période de Noël (sans blague ?!) et il paraîtrait même que tout le monde se fait des cadeaux pendant cette période ! Bien sûr, comme je suis une véritable crevure, je pense avant tout à moi et il se trouve que je sais déjà quoi m’offrir =°

Pour commencer j’ai décidé d’acheter un bouquin Fantastique nommé “La Guilde des Magiciens” qui fait partie de “La Trilogie du Magicien Noir”. J’avais offert ce bouquin à ma sœur l’année dernière mais j’avais pas eu le temps de le finir avant de le lui remettre alors qu’il me plaisait (vu qu’elle habite à Paris et moi à Lyon, je pouvais pas le continuer), j’ai donc décidé de me l’acheter pour cette année =p

Voici la couverture pour les intéressés ainsi qu’un lien vers le résumé :

Pour ceux qui ne le savent pas, je suis un fan de mangas et d’animes (une liste de tout ce que je possède se trouve ici). J’ai en tout 54 volumes amassés en une année, et comme on en a jamais assez, j’ai quelques séries en vue et que je compte acheter plus tard (elles sont inscrites sur le lien ci-dessus). Et il se trouve que je vais très probablement entamer l’une d’elles qui est très connue : Love Hina ! Cela fait un moment que je la lorgne, mais faute d’argent je ne pouvais décemment pas commencer à l’acheter, je préférais continuer mes séries actuelles. Donc pour Noël je pense que je vais m’offrir les deux premiers tomes. En fait j’ai déjà lu la série mais je voudrais la posséder pour la relire autant de fois que je le souhaite ^^ .

Les couvertures des deux premiers tomes :

Et puis comme un manga ne vient jamais seul (comment ça c’est pas la bonne expression ?!), j’ai l’intention de m’offrir le 8ème tome de la série Lanfeust des Étoiles qui est sorti il y a maintenant 2 ou 3 semaines, le voici :

Voilà tout pour mes “occasions de Noël”, enfin plus ou moins… je m’achèterai peut-être d’autres choses (dont mon joystick qui se fait attendre).

Sinon je crois que c’est tout ce que j’avais à dire… Ah si ! Il manque quelque chose !

NOYEUX JOËL !!!

Nes’

PS : Selon Wordpress j’ai très exactement écrit 792 mots de conneries, c’est beau la technologie =’)

PPS : J’avais oublié de dire que je n’ai pas été accepté en tant que checkeur pour l’anime Hyakko.

Tags: Hyakko, Joystick, Lanfeust, Love Hina, Sliding Menu

Quelques petites choses…

Bon, je n’ai pas de sujet bien précis en revanche j’ai bien envie de vous parler de deux ou trois choses donc autant rassembler tout ça dans un seul et même article, ça fait des économies de papier. En plus ça fait un moment que je n’ai plus rien écrit =p

• Commençons par une innovation pour Firefox. Je rappelle tout d’abord aux incultes que la dernière version du célèbre navigateur Firefox est la version 3.0 et que la version 3.1 ne devrait plus trop tarder (une bêta existe déjà). Si je vous annonce cela c’est parce qu’ils ont ajouté une nouvelle fonctionnalité dans la 3.1 nommée les Workers, ces derniers permettent de lancer un code Javascript en arrière-plan et réduisent ainsi l’occupation du processeur par certains scripts gourmands. Personnellement, je trouve que ça a son intérêt car ça évite qu’un script bloque le chargement d’une page, c’est plus fluide quoi. Il faudra que je télécharge la version 3.1 de Firefox histoire de tester !

• Je passe à Sliding Menu, la version 1.2.4 est maintenant terminée et je ne pense pas faire de nouveaux ajouts avant sa sortie. Si vous êtes intéressés par cette version il vous faudra attendre un peu car je suis actuellement en train de réaliser une page web qui lui est consacrée, ce sera bien plus pratique pour le distribuer, voici un aperçu (non, je ne suis pas un dieu en graphisme, c’est clair…) :
  

  Page consacrée à Sliding Menu

  J’ai choisi d’exploiter un peu mon menu sur cette page (ben oui, faut bien en vanter les mérites ^^ ), je l’ai donc placé sur le bas avec un fondu et le contenu de la page viens se mettre “sous” le menu, je n’explique pas très bien mais vous verrez bientôt en quoi ça consiste.

  Concernant le menu lui-même, il y a quelques corrections de bugs et deux ajouts majeurs, vous en saurez plus par le biais d’un nouvel article.

• Autre chose, je ne sais pas si vous l’avez constaté mais une nouvelle version du navigateur Google Chrome est sortie, il s’agit enfin d’une version stable, la v1 quoi… mais le problème est que à mon goût ça reste une bêta, pourquoi ? Parce qu’il existe et subsiste un bug qui fait que le style CSS d’opacité foire sur les images PNG qui ont de la transparence, voyez plutôt… Ce genre de bug ne devrait pas être ignoré mais immédiatement rectifié, je ne comprends pas pourquoi ça n’a pas été fait pendant tout ce temps. Enfin bon, attendons encore un peu, on verra par la suite.

• Et enfin la dernière chose dont je souhaitais vous parler, cela concerne Wordpress, la plateforme de blog que j’utilise ici-même. Elle a bénéficié d’une mise à jour qui refond absolument toute l’interface d’administration, c’est assez impressionnant pour tout vous dire, ils ont dû y passer un sacré moment ! Voici un petit aperçu :
  

  Nouvelle interface Wordpress

  Tout ce que vous voyez peut être déplacé et ainsi réorganisé selon vos envies, la gestion des commentaires est devenue ultra-simple grâce à une utilisation intensive de l’Ajax (qui évite de recharger la page pour ceux qui ne savent pas). C’est pareil pour les articles, de plus le text-area servant à écrire à été amélioré, ça se sent, il est bien plus rapide qu’auparavant !

  Bref, je pense que je vous ferai un test de cette interface. Au passage, vous aurez sûrement noté qu’il y a de l’anglais et du Français, oui, c’est le point noir : la traduction n’est pas terminée ^^’

  L’autre problème c’est qu’ils ont dû changer quelques noms de classes car mon design a été légèrement modifié, je vais y remédier (Edit : J’ai rien dit, c’est juste qu’il manquait quelques styles à définir).

Voilà tout, je vous laisse =)

Nes’

Tags: Firefox, Sliding Menu

Left 4 Dead + Hyakko + SpeedBox : Au boulot !

Eh ben ! En ce moment je n’arrête pas de faire 36 choses à la fois. Entre mon achat de Left 4 Dead sur Steam et mon nouvel investissement dans un projet (Hyakko, un anime, j’en parlerai plus bas), je ne sais plus où donner de la tête, du coup je ne code plus depuis environ 6 jours (c’est rare) alors que pourtant j’ai un truc en tête (je vais vous en parler plus bas).

Commençons tout d’abord par Left 4 Dead : Si vous n’en n’êtes pas à votre première visite sur ce blog, vous devriez savoir que j’attendais ce jeu comme un prêtre attendrait le messie. Eh bien maintenant je l’ai ! Autant le dire tout de suite : À peine vous lancez le jeu que déjà vous vous prennez une grosse claque dans la figure en raison des graphismes. Je ne parle pas de graphismes extraordinaires qui mettent à plat n’importe quel PC, non, je veux bien entendu parler du rendu graphique optimisé que le moteur Source a toujours su faire, notamment au niveau des cinématiques physiques qui m’impressionneront toujours autant oO ! Je prends pour exemple la scène du crash d’un avion de ligne qui reste la plus impressionnante (ouais, Youtube ça pue, mais pour trouver une vidéo de bonne qualité de cette scène c’est pas simple, y’a bien celle-ci mais le type regarde pas beaucoup l’avion).

Concernant le gameplay, on ne pouvait pas espérer mieux ! C’est vraiment un jeu d’équipe car avancer tout seul est absolument impossible ! Dès qu’un camarade est à terre il faut le relever au plus vite, il faut aussi protéger les autres, éviter de leur tirer dessus, leur procurer des soins, etc… c’est l’enfer §

Il y a aussi le mode Versus qui oppose deux équipes de 4 joueurs chacune, une pour les survivants, l’autre pour les infectés, c’est vraiment planant que de foncer en tant que zombie et tuer un survivant =D

Alors bien sûr il reste encore quelques bugs (pas mal même) mais ça devrait être corrigé dans le futur.

Du coup, vu que j’ai un vieux PC et que pour faire tourner L4D ça devenait un peu limite (tout en moyen, sans AA, 1024*768), j’ai racheté la vieille 7600GT de Korgahn pour virer ma 6600GT, eh ben déjà ça fait un sacré changement même si ça n’a rien d’extraordinaire non plus ^^ .

Bref, Left 4 Dead c’est le bien, mangez-en !

Passons maintenant à Hyakko. Il s’agit d’un anime que je regarde depuis qu’il a commencé à être fansubbé, il en est maintenant au 3ème épisode mais ceux-ci paraissent assez lentement. Un recrutement a donc été effectué et je me suis proposé pour faire le Check (sachant que je suis du genre pointilleux, ça devrait le faire). Donc, dorénavant je rectifierai les fautes d’orthographe (ayant été validateur sur le SdZ je pense en être capable =° ) et je relèverai toutes les erreurs que je pourrai trouver. Pour le moment je suis seulement à l’essai, j’ai corrigé hier l’épisode (à 1h du mat’ =° ) et ça c’est plutôt bien passé, je n’ai pas rencontré de problème particulier. J’ai donc envoyé le tout et là j’attends qu’Ajira (le boss tqvu §) réponde.

Je vous conseille de regarder cet anime ! Non pas parce que je vais bosser dessus mais parce qu’il est hilarant (c’est bien pour ça que j’aide au fansub) !

Pour l’histoire il n’y a rien de vraiment spécial, ça raconte les journées de quatre Lycéennes mais c’est vraiment drôle.

Je passe maintenant à mon dernier sujet qui concerne SpeedBox, un remake de LightBox que je suis en train de réaliser (même si j’ai rien foutu depuis que j’ai L4D). Pour ceux qui ne connaissent pas le nom de “LightBox”, vous connaissez très probablement le concept, il s’agit de faire apparaître un cadre avec une image en taille originale dès que l’on clique sur la miniature de cette dernière, je vous propose d’aller voir le projet LightBox et de cliquer sur une image pour vous rendre compte de ce que c’est réellement (vous avez sûrement déjà vu ce genre de truc).

L’intérêt de ce système est de permettre de visionner une image en plus grand sans pour autant briser la navigation de l’utilisateur car il n’aura pas besoin de faire de retour arrière. Seulement, le concept original (celui du projet LightBox donc) ne me semble pas vraiment très bien exploité car son but est normalement d’éviter de briser la navigation (et donc d’aller plus vite) or je trouve les animations beaucoup trop longues à mon goût (dans la version 2, la version 1 ne comporte pas d’animations) et le design est vraiment… moche. ^^’

Le but de SpeedBox sera donc de rester esthétique, pratique et rapide. Ce sont les trois points principaux sur lesquels je veux travailler, pour le moment je n’ai pas fait grand chose et ça reste surtout à l’état de l’élaboration mentale (j’ai commencé à coder un bout mais ça ne casse pas trois pattes à un canard).

Alors attention, oui j’ai envie de réaliser ce projet, cela dit ce n’est pas sûr que je le continue ! Ce n’est pas comme Sliding Menu… celui-là je vous l’avais présenté alors qu’il était déjà bien avancé, là pour le moment ça reste seulement un projet naissant.

D’ailleurs je suis en train de bosser sur Sliding Menu, je pense faire quelques remaniements au niveau de l’initialisation de l’objet, j’essaye aussi de mettre en place un système pour que le menu ne se lance pas tant que les images ne sont pas chargées (sinon ça peut bugger) et pour finir je crois avoir une petite idée d’animation qui m’a été inspirée par les menus de Left 4 Dead.

Dernière chose, est-ce que vous pensez que ce serait intéressant de faire en sorte que Sliding Menu puisse aussi gérer le défilement de haut en bas ou bien se serait superflu ?

Nes’

Edit : J’ai refais toutes les catégories et les tags suite à la publication de cet article, c’est mieux non ^^ ?

Tags: Hyakko, Left 4 Dead, SpeedBox

Sliding Menu V1, enfin !

Edit : Attention ! Une nouvelle version existe !

Oui, vous avez bien lu le titre : j’ai terminé Sliding Menu !!! Alors pour ceux qui n’auraient pas suivi, il s’agit d’un menu animé en Javascript et réalisé par moi-même qui ne demande qu’un code minime en HTML pour pouvoir fonctionner, si vous voulez plus d’infos référez-vous à l’article précédent. En fait le menu est déjà terminé depuis environ une semaine mais j’avais eu la flemme de faire un article (surtout que j’en fais un paquet en ce moment)…

Bref, c’est bien beau de vous dire qu’il y a enfin la première version qui est sortie mais le plus important pour vous est de savoir : Qu’est que ça change ?!

Mais TOUT jeune inconscient ! Je me suis amusé à tout recoder de A à Z afin de sortir une version exemptée de bugs et tournant sur n’importe quel navigateur (bon, je ne garantis pas le résultat en-dessous de IE6 =° ), de plus tout à été réécrit de façon Objet, c’est pas de la merde en boîte ça !

Mais passons plutôt aux nouveautés, qu’est-ce qui a vraiment changé pour l’utilisateur ? Je vous fait une petite liste ci-dessous :

• Adoption d’une syntaxe Objet afin de faciliter l’intégration du menu dans une page mais aussi pour améliorer la gestion des variables.
• Les noms des variables ont tous été redéfinis et en anglais afin de donner une meilleure clarté au code.
• Suppression de deux arguments qui, auparavant, étaient nécessaires à l’initialisation du menu. L’argument spécifiant la largeur des images a été supprimé ainsi que celui définissant les attributs à transférer (eh oui, ça sera plus simple maintenant) !
• Résolution du problème de la constante inconnue (voir le premier article pour comprendre), je remercie au passage V@ldun car c’est grâce à lui que ça a été résolu, donc : MERCI ! =)
• Ajout de deux fonctions permettant de mettre en pause ou en lecture le menu.
• Optimisation au niveau du temps d’exécution  et au niveau du téléchargement des images (les fondus ne sont plus que des background, si vous mettez une image de 96*1px, celle-ci sera dupliquée en hauteur, c’est moins lourd pour l’utilisateur).
• Et enfin, dernier ajout : possibilité de choisir le sens de défilement ! Droite ou gauche ? À vous de choisir ! Bon, ça peut paraître banal comme ça mais quand vous avez un code qui a été entièrement prévu pour effectuer un défilement vers la gauche c’est pas si simple que ça de l’adapter pour fonctionner vers la droite. Surtout qu’il a fallu redéfinir un paquet de variables mais je suis TRÈS content du résultat, je crois que je ne pouvais pas mieux coder !

Voilà, ça fait pas mal de changements hein ^^ ? Passons maintenant à la version de démonstration (au cas où vous n’auriez pas vu que l’image plus haut redirige au même endroit =° ), je signale au passage que le menu n’est pas initialisé directement sur cette page (mais ça reste possible vous verrez), ceci afin que vous puissiez bien voir son fonctionnement de A à Z, j’ai aussi mis des boutons pour que vous puissiez contrôler le menu comme vous le voulez, ces boutons n’auront pas à apparaître normalement, c’est juste moi qui ai mis ça pour vous laisser le contrôle.

Voyons maintenant comment initialiser le menu, ben oui, ça a changé vu que j’ai recodé de façon Objet et c’est bien mieux comme ça. Bref, tout d’abord il vous faut un code HTML dont voici un exemple :

Voilà, pour faire un bouton il faut donc un ensemble de balises A + IMG, c’est pas bien dur ! Et vous définissez les attributs que vous souhaitez, ils seront conservés tout au long de l’animation. À noter que pouvez très bien ajouter une balise P afin de rendre votre code valide XHTML 1.0 Strict. Vous pouvez même ajouter du texte si vous le souhaitez, celui-ci ne sera alors affiché que si le Javascript est désactivé chez le visiteur.

Quant à l’initialisation du menu en lui-même, elle se fait par le biais de deux lignes de code en Javascript :

La première ligne sert à créer l’objet et à définir les options que vous souhaitez. La deuxième ligne lance l’initialisation (et donc l’animation) du menu.

Voici une définition des attributs pour la première ligne :

• cible : La cible du div contenant votre menu. Vous pouvez entrer soit le nom d’identification, soit un getElementById().
• sens : Le sens du menu. Il peut être défini par deux chaînes de caractères : “left” ou “right”.
• fondu_gauche : Le chemin d’accès au fondu gauche. Mettez plutôt une image de hauteur réduite (elle sera dupliquée si ce n’est pas assez), ainsi ça évitera de télécharger un gros fichier.
• fondu_droit : Même chose que pour le fondu gauche mais concerne le fondu droit cette fois-ci.
• vitesse : Dernier argument, facultatif. Il défini la vitesse de défilement du menu exprimée en millisecondes. Cette vitesse est le temps d’attente entre le déplacement de chaque pixel, par défaut il est à 30.

Voilà pour le code à fournir.

À noter que même si certains styles CSS sont redéfinis par mon script, la plupart d’entre eux peuvent être utilisés sans problème. La seule chose est que pour centrer votre menu, il vous faudra employer un margin:auto et non pas un text-align:center ;)

Eh bien c’est tout pour Sliding Menu, vous pouvez télécharger le pack ici. Au passage, pour ceux qui voudraient un menu compatible y compris au niveau de la transparence des images comme je l’ai fait sur ma page, je vous conseille d’aller voir ceci =)

Bon, et puis je crois que je vais faire une réforme dans mes catégories d’article parce que là c’est du grand n’importe quoi…

Nes’

PS : Si vous utilisez Sliding Menu, faites-le moi savoir, je serai ravi de voir ce que ça donne sur votre site web =D ! Et si vous trouvez un bug, n’hésitez pas à me le dire !

Tags: Sliding Menu