Les tuto 2 Demolite

08 novembre 2010

Créer une bannière Flash avec Powerbullet

Voici un tuto en vidéo qui vous montre l’essentiel pour créer une bannière Flash comme celle sur ce blog…

Je ne maitrise pas encore toutes les fonctions et les possibilités, mais avec les info que je vous donne dans cette vidéo vous serez capable de créer votre propre animation et pourquoi pas de faire des découvertes.

Téléchargez le logiciel Powerbullet ici cliquez sur Download(3.8MB) le Zip contient la version 1.44 du logiciel + la traduction (le patch) en français de Colok.

Désolée pour la qualité du son, ma fille étant à la sieste je n’ai pas parler assez fort, alors il faudra surement monter le son…

Je ne précise pas en fin de vidéo, qu’une fois votre bannière terminée elle est enregistrée dans un dossier qui porte le nom que vous avez donné à votre projet au départ, dans cet exemple le dossier s’appelle bannière flash 1, il se trouve dans le dossier Powerbullet, (pour l’avoir toujours à portée de main, faites un raccourci que vous placez sur votre bureau ou dans votre barre des tâches) à l’intérieur vous avez plusieurs fichiers votre bannière est le fichier swf qui s’appelle bannière flash 1.

C’est ce fichier que vous devez importer sur votre serveur pour récupérer son adresse : http//bannièreflash1etc.swf

Vous devez ensuite coller cette adresse dans le script suivant pour voir l’animation sur votre blog :

<p><OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
WIDTH="1200" HEIGHT="308" align=right
CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=5,0,0,0">
<PARAM NAME="MOVIE" VALUE="http//bannièreflash1etc.swf">
<PARAM NAME="PLAY" VALUE="true">
<PARAM NAME="LOOP" VALUE="true">
<PARAM NAME="WMODE" VALUE="Transparent">
<PARAM NAME="QUALITY" VALUE="high">
<EMBED SRC="http//bannièreflash1etc.swf" WIDTH="979" HEIGHT="358"PLAY="true" LOOP="true" WMODE="Transparent" QUALITY="high"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT></p>

Vous devez coller l’adresse.swf deux fois dans le script et aussi changer les valeurs width et height, qui correspondent à la taille (hauteur largeur) de votre animation.

Allez c’est parti ! (Désolée pour la qualité de l'image et du son)

Voici une vidéo supplémentaire avec quelques explications sur les effets, la durée et la transition des pages ect...

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Réaliser une animation flash avec Powerbullet

Ça faisait des lustres que j’avais envie de me lancer dans la création d’animations flash…(format swf)

Mais pour trouver un logiciel gratuit, traduit en français et surtout qui ne demande pas d’être ingénieur en informatique pour comprendre le fonctionnement…autant vous dire qu’il faut se lever de bonne heure !

Et puis il y a quelques jours, j’ai décidé de me remettre en chasse…

A force de chercher, j’ai fini par trouver ici, ce petit logiciel en anglais et traduit en français qui n’est pas mal du tout.

Je vous avouerais que j’ai tout de même passé 2 jours avant de comprendre certaines subtilités…

J’ai encore un tas de choses à découvrir et à comprendre d’ailleurs…

Nous allons voir aujourd’hui comment réaliser une photo de profil pour votre blog qui sera animée et aussi qui renverra vos visiteurs sur la page de votre profil lorsque l’on cliquera dessus.

Commencez par télécharger Powerbullet ici cliquez sur Download(3.8MB) le Zip contient la version 1.44 du logiciel + la traduction (le patch) en français de Colok.

Installez en premier le logiciel Powerbullet, si il s’ouvre en fin d’installation fermez-le, puis installez le Patch.

Voilà, le logiciel est maintenant en français, vous remarquerez que la traduction n’est pas tout à fait complète, les info-bulles des icônes ne sont pas toutes traduites…

J’ai préféré réaliser une vidéo pour ce tuto, vous pourrez réaliser votre animation flash a votre rythme en marquant des pauses…

Une fois que vous avez cliquez sur l’icône Publish as Html

un dossier portant le nom de votre projet est automatiquement créer dans le dossier Powerbullet.

Vous pouvez réouvrir votre animation plus tard pour la modifier, mais attention lorsque vous cliquez sur Publish as Html les modifications écrasent l’ancienne sauvegarde…il est donc plus prudent de visualiser

lorsque vous faites un changement.

Je vous conseille de faire une copie du fichier Profil.pbt qui se trouve le dossier Profil de Powerbullet (si votre projet s’appelle maison, le fichier se nomme maison.pbt bien sur…

Astuce : pour copier (duppliquer) un fichier, maintenez la touche Ctrl enfoncée, cliquez gauche sur le fichier sans relâcher, faites glisser sur une zone vide puis relâcher le clic de la souris puis le Ctrl.

Une fois votre animation terminée vous n’avez plus qu’à l’importer sur votre blog  pour récupérer son adresse.swf et de l’insérer dans un code qui permet l’affichage des Flash :

<p><object width="200" height="150" type="application/x-shockwave-flash" data="http://adresse.swf">
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<param name="allowfullscreen" value="true" />
<param name="movie" value="http://adresse.swf"</span>
</object></p>

Vous devez coller l’adresse.swf  2 fois dans le code, et changer les dimensions de la fenêtre pour l’adapter à votre animation width=”220″ height=”220″.

Télécharger le fichier d’aide en français Powerbullet ici

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Copier le contenu de son blog sur un CD avec HHtrack

Vous avez surement déjà entendu parler des aspirateurs de sites web…et bien grâce à ce petit logiciel gratuit HTtrack vous allez pouvoir faire une copie de votre blog dans son intégralité sur votre disque dur et ensuite le copier sur un CD ou un DVD, que vous pourrez ressortir en cas de problème ou quand vous serrez tout vieux pour montrer à vos petits enfants ce que vous saviez faire dans le temps…

Si vous êtes déjà “vieux”…n’oubliez pas que l’espérance de vie s’est considérablement allongée et qu’il vous reste certainement encore une bonne trentaine d’années à surfer sur le web ! en tout cas je vous le souhaite…

Une fois HTtrack téléchargé, installez-le, choisissez français, fermez le programme et ouvrez-le de nouveau.
Si une fenêtre Proxy s’ouvre ne vous en occupez pas, fermez là.

Vous êtes maintenant devant cet écran :

Faites suivant >

Entrez le nom de votre blog dans nouveau projet

Choisissez une catégorie pour ce projet

Choisissez le chemin de base, c’est à dire le dossier ou la copie sera enregistrée

et faites suivant >

Cliquez sur Ajouter…

Entrez l’adresse de votre blog dans la petite fenêtre qui s’ouvre et faites Oui.

Puis suivant >

Remplissez comme ceci et faites Terminer.

C’est parti l’aspirateur commence son travail…
Ça peut prendre 5 comme 20 minutes, ça dépend de la taille de votre blog.
Fermez le programme.

Maintenant lorsque vous allez dans le dossier de destination, celui que vous avez choisi au départ (chemin de base) vous avez un fichier Index :

(Si vous utilisez Internet Explorer, le document sera le même avec le logo d’explorer).

Double cliquez sur le fichier Index, une fenêtre va s’ouvrir dans votre navigateur internet, avec le lien de votre blog ou la liste si vous en aspirez plusieurs:

Vous n’avez plus qu’à cliquez sur le lien de votre blog et hop il apparait !
Génial non ?

Un dossier avec le nom du projet que vous avez donné au départ apparait aussi :

Vous devez maintenant copier le fichiez index et le dossier de votre blog sur CD pour le garder bien au chaud !
Pour ceux ou celles qui font évoluer leur blog en permanence il faut bien sur recommencer l’opération d’aspiration régulièrement…tous les mois par exemple.

Pour la gravure utiliser un CD ré-enregistrable, vous ferrez des économies…

J’ai entendu dire que Canalblog avait supprimer le blog d’une personne, comme ça, sans raison, ça doit faire un choc de se réveiller un matin et au moment de se connecter sur son blog, plus rien…une page blanche et orange !

Bouh…rien que d’y penser j’ai des frissons…pas vous ?

Pour faire des mises à jour au fur et à mesure faites comme ceci :

Il faut allez rechercher le projet dans le dossier où vous l’avez sauvegardé la première fois.

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Mettre un papier à lettre avec Mozilla Thunderbird

C’est sympa un papier à lettre non ? ça change du fond blanc traditionnel…

Commencez par allez dans Outils / Paramètre de compte… / Copies et dossiers et choisissez le compte sur lequel vous allez mettre le papier à lettre, un dossier Modèles va se créer dans ce compte et contiendra vos modèles de papiers à lettre.

Ouvrez ensuite un nouveau message, cliquez dans le message pour dégriser le menu Format puis allez dans Couleurs et fond de page…

Cliquez sur Choisir un fichier pour importer votre papier à lettre, vous pouvez aussi changer la couleur de la police et des liens pour les mettre aux couleurs de votre fond.

Faites Ok.

Pour enregistrer votre papier à lettre, faites Fichier / Enregistrer comme / Modèle, il sera enregistrer dans le dossier Modèles de votre compte de messagerie.

Avant d’enregistrer vous pouvez donner un nom à votre modèle de papier à lettre dans la zone Sujet.

Et voilà…pour utiliser ce modèle il suffit de cliquer sur le dossier Modèles dans la partie de gauche et ensuite de choisir le papier à lettre dans la liste, si vous en avez crée plusieurs…

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Enregistrer la radio sur son Pc avec Screamer radio

Voulez enregistrer votre radio préférée…pas de problème, il vous faut juste un petit logiciel en français et gratuit : Télécharger Screamer radio.

Grâce à Screamer radio vous écoutez la radio en live et vous l’enregistrez en 1 clic.

Installez le logiciel et choisissez la langue française en fin d’installation.

Ouvrez Screamer radio, cliquez sur Prédèf pour choisir une radio :

Vous avez plusieurs menus, ce qui vous donne un large choix de station de radio.

Une fois que vous avez cliquez sur le nom de la radio elle se met en route.

Pour enregistrer la radio, il suffit de cliquer sur le bouton Enr. pour démarrer l’enregistrement et pour l’arrêter cliquez sur Stopper.

Vous n’avez rien d’autre à faire, la radio est enregistré au format Mp3 dans un dossier par défaut de Screamer radio.

Pour changer la destination d’enregistrement et choisir un autre dossier allez dans Param. / Préférences / Recording :

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Créer des icônes personnalisées avec IcoFX

Je ne sais pas ce que vous en pensez, mais les icônes Windows elles sont…comment dire ?

“Pas terrible terrible…non ?”

Alors, pour donner à vos dossiers un peu de fantaisie, pourquoi ne pas leur offrir de belles icônes personnalisées…

Bon, c’est vrai que je ne me suis pas foulée dans cet exemple, j’en ai crée seulement 3 à la va vite...

Mais ça vous donne une idée de ce qu’on peut faire…

Vous allez voir avec ce petit logiciel en français, c’est un jeu d’enfant !

Commencez par télécharger IcoFX à l’adresse suivante : http://www.pcastuces.com/logitheque/icofx.htm

Installez le logiciel, ouvrez-le et allez dans Outils, puis Langue pour sélectionner French.

Pour transformer en icône une image, allez dans Fichier / Importer image…

Une fois que vous avez sélectionné votre image, cette fenêtre apparait.

True Color + canal-alpha (32 bits) est sélectionné par défaut, vous pouvez le laisser comme ça, l’icône est parfaite.

Pour la taille, j’ai choisi 48×48 pour faire une icône de dossier…pour une icône plus petite à mettre dans la barre d’adresse de navigation pour votre blog, 16 x 16 convient très bien.

Faites Ok.

Votre image s’ouvre vous pouvez la recadrer en remontant les points blancs vers le haut, cliquez ensuite sur Ok.

Pas d’inquiétude si votre image est floue…c’est normal cela vous permet maintenant d’apporter des modifications de couleur si vous le souhaitez.

Votre icône sera nette comme la miniature dans la fenêtre en haut à gauche.

Pour modifier l’icône, servez-vous de la palette de couleur comme dans un logiciel de retouche photo.

Une fois votre icône terminée, allez dans Ficher / Enregistrer sous et choisissez le dossier d’enregistrement.

Voilà c’est tout, votre icône est prête !

Pour attribuer une icône à un dossier, sélectionnez le dossier, puis cliquez droit dessus, faites Propriétés / Personnaliser / Changer d’icône.

Le fichier par défaut des icônes Windows s’ouvre, faites Parcourir et allez chercher votre icône dans le dossier où elle se trouve.

Faites Appliquer et Ok.

Voilà…

Il se peut que l’icône n’apparaisse pas tout de suite, actualisez la page.

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Run Pixie

Qué za co encore ce truc !?

C’est un tout petit logiciel de rien du tout (très léger) qui permet en une fraction de seconde de connaitre le code couleur de tout ce qui se trouve à l’écran !

Je m’explique…
Lorsque que vous ouvrez Run pixie où que vous soyez…sur le bureau, dans un dossier, sur une page weg, vraiment n’importe où, Run Pixie vous donne dans un petit rectangle blanc le code couleur Html (et bien d’autre) de la zone précise où se trouve votre curseur !

En image :

C’est vraiment super pratique !!!

Si comme moi vous aimez bien bidouiller des images ou des photos ou encore le look de votre blog, avec ça vous êtes équipé !

Toutes les couleurs de la toile n’ont plus de secret pour vous désormais…

Pour télécharger gratuitement ce logiciel c’est Ici !

Une fois ouvert, vous pouvez le déplacer sur votre page en cliquant dessus sans relâcher puis vous le faites Glisser.

Vous pouvez également le réduire dans la barre des tâches.

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Windows Live Writer

C’est quoi ça encore ?…un cours d’anglais?…non pas du tout !
C’est un logiciel qui permet de rédiger vos billets sur Canalblog et qui les publient directement sur votre blog !

Pratique si votre connexion internet n’arrête pas de couper comme la mienne en ce moment…vous pouvez rédiger vos billets tranquillement sans être connecté et faire pleins d’effets sympa avec vos photos, ajouter des images, des vidéos, des tableaux, etc…

Commençons par l’installation :

Allez sur ce site pour le téléchargement : http://www.windowslive.fr/writer/

Décochez toutes les cases, sauf  Writer et cliquez sur Installer !

Cochez la case je dispose déjà d’un blog

…Suivant >

Autre service de blog…Suivant >

Entrez l’adresse de votre blog dans la première case, Le nom d’utilisateur de votre blog (celui que vous utilisez pour vous connecter à Canalblog) et votre mot de passe de connexion, cochez la case Mémoriser mon mot de passe et faites Suivant >

Voilà, c’est fini…cliquez sur Terminer.

Une fois l’installation terminée, Writer s’ouvre…si ce n’est pas le cas, allez dans

Démarrer/Tous les Programmes/Windows live/Writer Live Writer

Vous pouvez maintenant rédiger votre premier billet avec Writer…

Pour mettre une image, cliquez sur l’icône Insérer une image

Servez vous des onglets Image et Effets pour ajouter un cadre ou un effet sur la photo, la placer à droite ou à gauche du texte etc…

Pour passez votre billet en mode html, cliquez sur Affichage et Code html

Si vous voulez faire une pause, cliquez sur Enregistrer le brouillon sur le pc

Vous pouvez reprendre le brouillon dans la colonne de droite en cliquant sur le titre de votre billet.

Une fois que votre billet est terminé et qu’il est prêt à être publié, cliquez sur l’icône Publier en haut à gauche.

Si vous voulez faire des ajouts de couleurs sur le texte avant de publier, choisissez Enregistrer le brouillon sur mon blog.

Voilà… je vous laisse découvrir le reste tout seul…

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Installer Web Developer Toolbar

Web Developer Toolbar est une extension Firefox…C’est une formidable boite à outils pour manipuler ou simplement regarder les pages web et celles des blogs…

On peut donc :

• Voir et modifier les CSS (avec aperçu en temps réel) de n’importe quelle page
• Désactiver complètement les CSS
• Examiner le style CSS s’appliquant à un élément particulier (affiche également les styles CSS hérités)
• Manipuler les formulaires (convertir POST en GET et inversement, modifier la taille des champs, etc.)
• Afficher les informations sur toutes les images (attributs alt, taille, dimensions…)
• Afficher les ancres du document, montrer les frontières entre éléments (DIV, tables…)
• Voir les commentaires HTML
• Valider la page (validateur W3C HTML, CSS, validateurs WAI..)
• Permettre le redimensionnement des frames
• Mettre la fenêtre de Firefox à une taille précise (800×600, etc.)
• Activer et désactiver java, javascript, HTTP Referer, cache…
• Manipuler les cookies, les désactiver par domaines, etc…
• Et bien d’autres !

Cette barre vous permettra de faire des changement en direct sur votre blog dans la feuille de style avec un effet immédiat à l’écran…il suffit ensuite de faire un copier de la feuille de style remanié et de la coller à la place de la votre.

Si vous n’utilisez pas encore Firefox, c’est le moment de vous débarrasser de votre vieil Internet Explorer inutile !!!
Et d’installer cette barre magique !

Et oui…comment croyez-vous que je me procure vos feuilles de style pour trouver les erreurs qu’il y a dedans ?
Non… je n’ai pas de don de voyance…déçu ?

Vous pouvez télécharger la version française sur ce site : http://joliclic.free.fr/mozilla/webdeveloper/ c’est la première ligne :

Web Developer 1.1.4 fr-FR pour Firefox

Démonstration :

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

07 novembre 2010

Redimensionner des images en série avec Xnview

A chaque fois que je fais des photos de mes petits plats pour les mettre sur mon blog culinaire, je dois toujours en faire un paquet, car malheureusement le soir et surtout l’hiver, ça manque cruellement de lumière dans mon salon !

Alors avant de charger mes photos dans Photofitre pour les modifier, les réduire c’est pas une mauvaise idée…

Commencez pas ouvrir Xnview…

Dans l’explorateur sur la gauche, sélectionnez le dossier où se trouve vos photos, elle vont ensuite s’afficher dans la fenêtre de droite.

Faites un clic dans la fenêtre de droite puis Ctrl+A pour sélectionner toutes les photos.

Faites ensuite un clic droit sur une des photos sélectionnée en bleu et cliquez sur Convertir !

Dans la fenêtre qui s’ouvre, choisissez le format de sortie (dans cet exemple jpg généralement idéal pour les photos sans texte) choisissez ensuite le dossier de destination (où vos photos seront enregistrées) puis cliquez sur l’onglet Transformations.

Dans la fenêtre qui s’ouvre, cliquez sur Redimensionner puis sur Ajouter.

Cliquez sur Redimensionner pour afficher les Paramètres, entrez la valeur 500 (par exemple) dans Largeur, cochez la case Garder les proportions.

Cliquez sur Lancer.

Vos photos sont redimensionnées dans le répertoire que vous avez choisi.

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici