BlogNotes: janvier 2012

samedi 14 janvier 2012

Jouons un peu...

Cliquez sur "Start Game" (ou "play again") pour démarrer une partie et tenez compte de l'emplacement de la cible et de la direction et de la force du vent!
Cliquez sur "Jump" pour faire sauter Daffy
cliquez sur "chute" pour ouvrir le parachute

le code:

vendredi 13 janvier 2012

Cadre pour afficher du code (ou autre)

J'ai peut-être trouvé ce que je cherchais pou afficher mes codes dans ce blog
Exemple:

Voici le code du DIV:

<div style="background-color: #f7f0d7; border: solid 1px cyan; color: black; padding: 10px; width: 700px; ">
contenu
</div>

Alignement d'une image sur le texte

Dans Blogger, quand on insère une image à coté de texte, celle-ci est décalée vers le haut.
Ici un exemple avec un smiley:

Le voici bien aligné sur le texte avec valign="middle"

Et voilà le code (ce qui important est en rouge)

Les différentes options possibles:

VALIGN = TOP | MIDDLE | CENTER | BOTTOM | BASELINE

Notez que ce code peut aussi être utilisé dans les cellules de tableau

vendredi 6 janvier 2012

YouTube aussi, bien-sûr...

J'ai dit (écrit) une grosse bêtise dans le message précédent...

En effet, un bon nombre de vidéos YouTube sont présentées dans un iframe lorsque vous désirez les insérer sur votre site. Il me semble cependant que toutes les vidéos de ce genre ne le sont pas.

Voici un exemple:

Ici, en utilisant la méthode de l'image pour garder les proportions, j'ai donné comme dimensions 640x480 pixels.
Il s'agit d'une démonstration du plus beau des chasseurs (anglais) de la Deuxième Guerre Mondiale: le Spitfire (ici, le MK 19) . Le son du moteur est superbe!

Un petit truc pour ceux qui ne le sauraient pas encore: Si votre connexion est un peu lente, n'essayez pas de voir la vidéo du premier coup! Lancez-la, puis immédiatement après, cliquez sur "Pause". Laissez la barre de téléchargement prendre de l'avance (jusqu'au 2/3 par exemple) puis cliquez à nouveau sur la flèche "Start".

Une manière simple d'insérer une animation Flash...

Quand on insère un fichier Flash, cela donne quelque chose dans ce genre...

Il y a une autre méthode qui "marche" bien. Je ne sais pas si c'est accepté par les puristes et validé par le W3C mais ça fonctionne!

Il suffit simplement de l'insérer dans un iframe ou un "object", l'adresse étant celle du fichier flash. Le flash s'adaptera automatiquement aux dimensions de votre iframe. Il faut simplement connaître ses proportions d'origine (c'est le plus long à trouver)

Comment faire?

Vous avez déjà les dimensions de votre flash?. Il vous suffit donc de créer une image vide de la même taille avec votre logiciel graphique (ici: 640x476 px) puis de la réduire en gardant les proportions à 480x367. Vous donnerez donc ces dimensions à votre iframe.
Vous ne connaissez pas les dimensions de votre Flash?. Affichez-le dans votre navigateur par exemple en cliquant ici: http://dl.dropbox.com/u/19586410/Blogs/noel-nbbc.swf. Faites une capture d'écran et recadrez l'image de votre flash dans votre logiciel graphique préféré. Ici, j'avais réduit ma fenêtre de navigateur avant la capture d'image. Après recadrage, celle-ci fait 667x496 pixels. Je veux que mon Flash fasse 480 pixels de large. Je réduit donc l'image à 480 pixels (en conservant les proportions) et je note la nouvelle hauteur: 367 px. Mon iframe fera donc 480x367 px

Voici le code:

Et voici le résultat:

Je n'ai pas essayé avec un Flash Vidéo type YouTube (je ne pense pas que cela fonctionnera).

Difficultés de mise-en-page d'un widget "HTML/Javascript"

Un objet récalcitrant?

Il arrive parfois que Blogger, pour une raison ou une autre, refuse de centrer un objet, tableau, iframe, image ou autre... Ça vous "gonfle" de chercher pourquoi? Alors utilisez ces balises:

<center> objet </center> (on peut remplacer "center" par "left" ou "right")

Idem avec une ligne d'espacement? (saut de ligne)

Ajoutez sur une ligne: <br /> ou

<p>

 </p>

Des difficultés de mise-en-page d'un widget Javascript/HTML ?

En effet, l'éditeur des Widgets est très limité et ne permet pas de faire grand-chose...
Vous pouvez bien-sûr copier-coller votre code HTML dans un éditeur WYSIWYG en ligne ou pas, mais il y a plus rapide...

Copiez votre code HTML dans un "Nouveau Message" (en mode "Modifier le code HTML") qui ne sera pas publié (il sera sans doute enregistré automatiquement, alors supprimez-le par la suite)
Faites votre mise-en-page tranquillement et facilement en mode "Rédiger"...
Re-passez en HTML
Sélectionnez tout le code et copiez-le...
..puis collez-le dans votre widget (en mode HTML)
Re-passez en mode "rédiger" de l'éditeur du widget, vérifiez la mise-en-page et corrigez-la éventuellement (Blogger rajoute parfois "en douce" des lignes d'espacement).

mardi 3 janvier 2012

Image sans bordure ni ombre ni rien dans Blogger.

Le seul truc tout bête pour afficher une image toute simple sans bordure, sans encadrement ni ombre dans Blogger...
C'est possible autrement, mais c'est beaucoup plus complqué et ... définitif. Ici, c'est seulement ponctuel.
Il suffit de mettre l'image en arrière-plan d'un tableau ou de l'afficher dans un iframe. Il faut seulement donner les dimensions de l'image au tableau ou à l'iframe.Pas de bordure non plus à votre objet: border="0".

Ici, un exemple avec un tableau:

Le code:

<table align="center" background="http://dl.dropbox.com/u/19586410/Blogs/101218_131127.jpg"
border="0" cellpadding="0" cellspacing="0" style="height: 447px; width: 590px; "></table>

InstantMobilizer (2)

Pour utiliser InstantMobilizer facilement, il suffit de modifier l'adresse ci-dessous (Modifiez ce qui est en rouge)

http://preview.instantmobilizer.com/m.php?imz_preview=1&u=http://blogtricker.blogspot.com/

Je pense que je vais faire un formulaire bientôt, mais n'en abusez pas, ça pourrait ne pas leur plaire, si on "tire" trop sur leur serveur! (je pense qu'il s'agit d'un proxy)

lundi 2 janvier 2012

Transformez n'importe quel site web en site mobile avec InstantMobilizer !

InstantMobilizer permet de transformer n'importe quel site web en site Mobile...

Je m'en suis servi pour afficher les infos météo de Sint Maarten sur mon blog http://st-martin-meteo-weather.blogspot.com/#sss (plutôt un site web conçu sur la plateforme Blogger...).
En effet, les prévisions météorologiques de St Maarten avaient le gros défaut de ne pas entrer complètement dans un iframe (ou un object ou un div...); et cela me taquinait depuis pas mal de temps...

Comment ai-je fait ?

Je suis donc allé sur InstantMobilizer, j'ai entré l'adresse du site météo de St Maarten et Go! La page demandée s'est affichée en tout petit dans le téléphone de gauche (dans un iframe)...
..et il m'a suffit de récupérer avec un clic droit l'adresse de l'iframe. Avec Google Chrome dans Linux, il faut faire un clic droit, puis "afficher le code source du cadre".
Ensuite, dans la barre de navigation vous obtenez ça: view-source:http://preview.instantmobilizer.com/m.php?imz_preview=1&u=http://www.meteo.an/Forecast_SSS_Gen.asp
Supprimez "view-source", puis "tapez entrée" et le contenu de l'iframe s'affiche en grand.
Récupérer l'adresse obtenue: http://preview.instantmobilizer.com/m.php?imz_preview=1&u=http://www.meteo.an/Forecast_SSS_Gen.asp
On peut donc ensuite s'en servir pour créer un iframe adapté à nos besoins....

En réalité, j'ai inclus l'iframe dans un DIV (genre LAYER) avec un décalage négatif:, et ça donne ça:

<html><head><title>SSS Weather Forecast</title></head><body>
<div id="sssforecastdiv" style="width:650px; height:440px; position:absolute; left:10px; top:-340px; z-index:1;"><p><object data="http://preview.instantmobilizer.com/m.php?imz_preview=1&u=http://www.meteo.an/Forecast_SSS_Gen.asp" height="695" scrolling="no" type="text/html" width="100%"></object></p></div>
</body></html>

Depuis le bloc-note, j'ai enregistré ce code dans une page html dans mon dossier "Public" de DropBox.
Pour finir, j'ai copié le lien public de ma page et l'ai affiché à travers un nouvel iframe (oui! encore un!)

Voici le résultat:

Prévisions Sint Maarten - St. Maarten forecast

On remarquera cependant que le texte est un peu coupé en haut du cadre. Mais sur mon blog http://st-martin-meteo-weather.blogspot.com, il n'y a pas de problème. C'est le principal!

InstantMobilizer est dans Outils-Tools

Pour info, je vis dans la partie française de St Martin qui est une petite île des Antilles à environ 270 km au nord de la Guadeloupe. Un peu plus étendue (93 km2) que Belle-île-en Mer, St Martin a la particularité d'être partagée entre la France (Communauté d'Outre-Mer) et Sint Maarten (Antilles Néerlandaises). L'anglais est la langue la plus répandue dans l'île.

Saint-Martin dans Wikipedia

dimanche 1 janvier 2012

Ancre (anchor) modifiée par Blogger...

Si vous avez déjà utilisé des "ancres" pour baliser votre page, vous avez sans doute remarqué que Blogger prend un malin plaisir à les modifier et même de les corrompre. Résultat, le lien ne fonctionne plus!

Que faire?

Et bien, pas grand-chose... Mais pour vous éviter des crises de nerfs, il vous suffit de travailler sur un post (ou un widget) qui comprend une ancre, seulement en mode HTML et non pas en mode "Compose" ou WYSIWYG. Si vous restez en HTML, Blogger ne touchera à rien.

Note: il semble que si l'on passe en mode Wysiwyg puis que l'on revient en mode HTML, il ne se passe rien. C'est (apparemment) quand on publie le message en mode Wysiwyg (ou mode "Rédiger") que le tour de passe-passe se produit...

Actuellement, malgré de nombreuses recherches, je n'ai pas trouvé d'autre solution.

A noter aussi que si on publie alors qu'on est en mode HTML, lors de la prochaine modification, Blogger ouvrira automatiquement l'éditeur dans ce mode.

Exemple d'ancre corrompue:

<a name="anchorname"></a>

donne ça:

<a href="http://www.blogger.com/post-create.g?blogID=24561613285xxxxx" name="anchorname"></a>

2 tuyaux...

Et d'abord...

Bonne Année 2012 !

Premier "tuyau"...

Comme vous avez pu peut-être le voir dans le précédent message, j'utilise assez souvent DropBox pour mes images mais aussi mes fichiers Flash. En effet, il n'est pas possible de uploader ces derniers sur Picasa. Je rappelle aussi que l'on peut aussi créer une page web dans le dossier "Public" de DropBox.

Un autre "tuyau"...

Comme éditeur Web en ligne WYSIWYG, on peut très bien utiliser celui de AUTOPEN qui est une excellent extension pour Google Chrome permettant de créer des "blocs signature" pour Gmail. L'éditeur de Autopen est une version allégée mais très puissante de TINYMCE. Une fois que vous avez fini votre mise-en-page, il suffit d'afficher le code HTML et de faire un copié-collé dans un bloc-note quelconque ou directement dans l'éditeur de Blogger. Il permet de faire des tableaux, ce qui manque cruellement à Blogger...

Menu flottant dans Blogger

J'ai créé 2 menus flottants et toujours visibles dans mon blog st-martin-meteo-weather.blogspot.com pour permettre une navigation instantanée à la fois dans l'interminable barre latérale de menus et widgets (menu flottant de gauche) et aussi dans la page elle-même (menu flottant de droite). Ces menus sont faits sur le même principe que la flèche "haut" ou "Up" dont j'avais déjà parlé. Ce code est placé dans un widget sans titre en bas de page.

Code du menu flottant (et fixe) de gauche (je n'ai pas mis celui de droite)

<ul id="floatmenu"><div name="menuflottant" style="left:0.2%; top:20%; z-index:1; visibility:visible; position: fixed;">
<table border="0" cellpadding="0" cellspacing="2" style="width: 70px; ">
<tbody><tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#toplinks" target="_self" title="Menu top - Haut du Menu"><strong>TOP</strong></a></div> </td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#mainlink" target="_self" title="Liens principaux - Main links - Quick access"><strong>MainLinks</strong></a></div> </td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#cyclone" target="_self" title="Cyclones - Ouragans - Hurricanes - Storms"><strong>Cyclones</strong></a></div>
</td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#divers" target="_self" title="Divers - Miscellaneous"><strong>Divers</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#tool" target="_self" title="Utilitaires - Tools"><strong>Outils</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#radar" target="_self" title="Radars Météo - Weather radar"><strong>Radars</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#sat" target="_self" title="Satellites"><strong>Sat</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#seamer" target="_self" title="Mer - Sea - Marine"><strong>Sea</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#tsuna" target="_self" title="Séismes - tremblements de terre - tsunamis - Earthquake"><strong>Seisms</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#vol" target="_self" title="Vols - Flights- Arrivals - Departures - Alerts"><strong>Vols</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#weather" target="_self" title="World Weather - Meteo monde"><strong>Wx-Met</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#idn" target="_self" title="Meteo Regionale - Regional weather"><strong>Wx-Met</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#webcam" target="_self" title="Webcams"><strong>Webcams</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#bottom" target="_self" title="Bas du Menu - Bottom of the Menu"><strong>BOTTOM</strong></a></div></td></tr></tbody></table></div></ul>

Le code en vert "appelle" le style CSS (inclu dans le HEAD) et le code en rouge permet au DIV d'être flottant et fixe.

J'ai cependant pas mal "ramé" pour la couleur de liens. Voici donc le code de style CSS à éventuellement modifier et à inclure dans le HEAD de votre modèle. Ce code agit évidemment aussi sur le menu de droite. Il aurait été intéressant, je pense, d'y mettre aussi l'image d'arrière-plan des boutons et autres instructions, mais bon, j'avoue que c'est du "bricolage" à la va-vite pour résoudre un problème... Par la suite, je modifiera cela peut-être...

#floatmenu {
margin: 0;
padding: 0;
}
#floatmenu a {
color: #D7F2EA;
display: block;
text-decoration: none;
font-weight:normal;
}
#floatmenu a:hover {
color: #F83008;
font-weight:normal;
}

Et pour rappel, le code d'une ancre à placer en tête de code d'un Post ou d'un widget:

<a name="anchorname"></a>:

Précision: comme vous pourrez le constater, st-martin-meteo-weather.blogspot.com qui a été quasiment mon premier blog, ressemble plutôt à un site web classique et non pas à un blog. C'est un choix délibéré!