Une idée? Une remarque? Une envie? Une question? contactez moi
Les bons tuyaux de papa Troll
"Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse"
le png et IE Les balises auto-fermantes Quelques logiciels Un fil RSSLes validateurs Le référencement Pop-up et Dreamweaver®
Préambule:
Je n'ai pas la prétention de détenir la science infuse. Mais au cours de mes réalistions diverses et variées, j'ai rencontré certains problèmes qu'il m'a bien fallu résoudre d'une manière ou d'une autre.
Ce sont les fruits de ces expériences que je souhaite mettre à votre disposition, vous les webdesigners de ma connaissance, ou les étrangers à tout ceci, dont la curiosité vous a amené ici.
Quelques puristes trouveront certainement à redire. Et ils auront peut être raison. Mais notre métier étant ce qu'il est, nous devons tous les jours appliquer nos connaissances, mais aussi les mettre à jour.
Or il me semble que l'on peut mieux avancer si on peut bénéficier de
l'expérience d'autrui. Et une expérience non partagée me semble
dénuée d'intérêt.
Pendant ma formation j'ai profité du savoir de mes professeurs, puis -et c'est surtout vrai avec le PHP- de celles de développeurs. Le libre, dont fait partie le PHP, a une philosophie, une éthique: Celle de partager le savoir pour progresser.
C'était déjà la mienne avant, ça l'est encore plus aujourd'hui.
Et puis le web, n'est-ce pas le partage des savoirs?...en tout cas, ce le fut, et c'est à nous de faire en sorte que ça le reste!
Bien, commençons par....:
Le png et IE...!!!!!!!
Comme vous le savez certainement, IE, lorsqu'il rencontre un png -jusqu'à IE7- faisait
semblant de ne pas comprendre...et vous génère un horrrrrrrible fond gris/bleu
autour de votre image.
Bien! Pourquoi?
Hé bien disons que monsieur Micosoft n'aime guère le libre. Or le png est un format libre. Ah? Et alors? N'ayant pas ce format en odeur de sainteté, il fait semblant de ne pas savoir le lire correctement, et intreprète le transparent avec ce fameux gris/bleu. Mais comme, Microsoft aime bien qu'on utilise son language, il a créé un "filtre" rien que pour lui. Sympa, non?
Donc, à nous d'en profiter. Comment? J'y viens:
D'abord, voici le "filter" de Microsoft brut de décoffrage:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale src='/votre_dossier_image/votre_image.png').
Mais ce "filter" en main, qu'en faire, et où le mettre ?
Plusieurs solutions:
1) Dans votre code html, à l'emplacement souhaité. Ok, mais, m'sieur w3c n'aime pas beaucoup, et si vous souhaitez l'homologation...bhein c'est raté!
2) Dans votre css...c'est possible (voir plus bas), mais vous rencontrerez le même désagrement que signalé plus haut; en plus vous allez devoir l'utiliser de la manière suivante:
(nous sommes dans votre css, et nous imaginons que vous vouliez utiliser un png dans votre "header". Cela donne ceci:) =
#header{
background-image: url(votre-dossier_images/votre_image.png) !important
;
background-image: url(no-image);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale
src='votre-dossier_images/votre_image.png');
position: absolute;
margin: 0px;
width: 750px;
height: 120px;
top: 0px;
}
Notez bien le :"!important", c'est lui la clef de votre réussite. Il dit quoi? "L´attribut !important indique au navigateur que la ligne suivante qui concernera le même élément (ici le background-image) devra être ignoré. Heureusement pour nous IE ne gère pas cette information il lira donc successivement les deux lignes et la seconde écrasera la première."
Redoutablement efficace!!!!
Cependant, je vous suggère d'utiliser la méthodologie suivante:
3) Créez une autre css que vous appelerez (par exemple): "ie.css" (perso, je
préfère redonner le même nom que ma css d'origine, en rajoutant _ie.css).
Dans cette css dédiée IE, vous ne rajouterez que, et uniquement que les différences spécifiques à IE. Et vous ferez appel à
des "commentaires conditionnels". Comment? Hé bien regardez la source de cette page. Vous y verrez le code spécifique qui renverra IE sur sa css en complément de la css initiale.
C'est simple, facile, propre, et fabuleusement efficace!
Post du 17/12/07:
Alors, lorsque vous avez plusieurs images sur la même page, ou d'autres images sur d'autres pages, il est diffcile d'ajouter des lignes et des lignes sur votre css pour notre ami IE, voire déconseillé (voir plus haut). Que faire alors?
......(là je vous laisse réfléchir une minute tout seul).............
Hé oui, la solution passe par un include en php!
Pour commencer, vous copier/coller le script que vous trouverez ici (au passage vous noterez l'extrème originalité du nom que j'ai donné à ce fichier...), vous l'enregistrez dans votre dossier qui va bien, et sur la (les) page(s) oú cela est nécessaire, vous y allez de votre petit include...et ç marche! Ainsi, votre fichier en JS, complètement invalide pour nos amis du w3c, devient "invisible" et votre site conforme. Magique, non? Merci Qui?
Retour à la liste de choix
Ah, les balises auto-fermantes! tout ce qu'il y aurait à dire et redire. Règle? Pas règle? Bien, revenons au départ: il n'y a pas de règle, il n'y a que des recommandations...enfin, presque...mais bon, admettons. Vous faites donc ce que vous voulez...
sauf que: vous êtes des pros ou pas? Bien, je connaissais la réponse. Alors, HTML ou XHTML, tachons de raison garder, et admettons que ce qui ne doit pas nous echapper, c'est (entre autre) que les navigateurs eux respectent les recommandations. Or que disent elles, concernant le XHTML (nous verrons le HTML après):
C.2 Eléments vides
Inclure un espacement avant le / et >de fin des éléments vides, par exemple <br />, <hr /> et <img src="karen.jpg" alt="Karen" />. Utilisez également une syntaxe minale pour les éléments vides, par exemple <br />, comme syntaxe alternative de <br></br> qui est autorisé par XML, car cela donne des résultats inattendus dans certains agents utilisateurs.
Voilà. C'est clair, non? Vous retrouverez cela dans les specifications
que je vous encourage vivement à lire et relire, notamment celle ci.
Non, mais!....;-)
Pour le HTML, vous aurez aussi tout intérêt à lire ceci.
Bien sur, dans tous les cas, et on le regrette, ces documents n'ont pas été conçus dans un but didactique. C'est dommage, mais cependant et heureusement, il existe une forte littérature bien plus digeste sur le sujet. J'y reviendrai plus tard.
Bon courage, bon code, et à bientôt.
Retour à la liste de choix
Au fil de mes réalisations, j'ai été amené à essayé quelques logiciels pour des besoins spécifiques, ou par curiosité, ou (et c'est le cas le plus fréquent) par soucis de me tourner le plus souvent vers le "Libre".
"Libre" ne veut pas forcément dire gratuit. Ils sont libres parce que le code est open-source, à la différence des logiciels dits "propriétaires", dont le code source relève presque du secret-défense.
La plupart tourne sur PC, et rarement sous Mac...Je sais c'est pô bien, mais Microsoft® étant la cible principale il est normal que ces logiciels s'adressent d'abord aux "heureux" possesseurs de ce produit; aussi je vous signalerai l' (les) OS visé(s) en fonction.
Or donc, voici quelques logiciels pouvant venir en aide à des webdesigners, webmasters, et autres fanas du code:
Le client ftp:
À mon avis le meilleur d'entre tous:
Fillezilla. Pour PC. Simple (mais pas simpliste), rapide, efficace, facilement
paramétrable, léger, puissant, clair, et j'en passe! Depuis que je l'utilise, jamais eu un seul problème! Ah, j'allais oublier: Libre et gratuit!
Pour Mac: J'utilise (sans surprise!): cyberduck Mêmes avis que pour Fillezilla...
L'éditeur...enfin...les éditeurs:
Bon, la liste est trés longue des éditeurs sur le marché. Commençons par:
Dreamweaver: Bhé rien à dire, vous le connaissez
tou(te)s, on fait ses armes avec lui, puis on s'inquiéte un peu devant le prix, et
parfois le manque de possibilités quand on commence avec le PHP.
Alors, on peut se tourner vers:
PSPAD..pour PC sous windows seulement, hélas. Si c'est votre cas, rendez vous
ici pour le charger.
Perso c'est celui que j'utilise pour le moment. Parfait pour tout, même le html, etc.
Je l'ai allié à TopStyleLite, un super p'tit éditeur pour css...Lui, vous le trouverez aussi en chargement sur la page download de PSPAD.
Ok, je sais...et pour mon MAC, alors? Bhé moi, j'utilise
SMULTRON, que vous pourrez trouver ici.... Un seul défaut à mes yeux...il ne
parle qu'anglais.
Mais, LE éditeur que je vous invite à découvrir et à utiliser, c'est celui du w3c, j'ai nommé: Amaya,
chargeable ici....
Là c'est carrement le pied; j'utilise depuis quelques temps, et franchement rien à envier au mastodonte du marché.
Du swf sans Flash:
e-anim
vous créera des anims en swf, comme Flash de Macromédia®, bien évidemment. Il ne prétend nullement rivaliser avec le mastodonte aujourd'hui chez Adobe ®,
néanmoins, il pourra servir à bon nombre de webmasters pour créer des animations simples et réussies.
Retour à la liste de choix
Bon, primo: qu'est ce que c'est?
Tout le monde en a entendu parler, on sait plus ou moins à quoi ça sert, mais en fait, c'est quoi, et comment ça marche?
Bhé en fait c'est pas compliqué, même si je vous dis "XML et XSLT".
Voilà les deux gros mots sont lachés. Maintenant reprenons au début:
Habitué d'internet, vous avez vos sites préférés. Vous devez souvent aller sur chacun de ces sites pour voir ce qu'il y a de nouveau.
Qui met la table pendant ce temps?
L'idéal serait un logiciel qui irait visiter ces sites à votre place et qui vous
donnerait directement les nouveautés.
Et bien c'est possible !
Pour cela, il suffit que le site qui vous intéresse publie un petit fichier dans un format spécial (RSS) qui contient la liste des nouveautés du dit site.
Ensuite, vous prenez un logiciel qui va collecter les fichiers RSS de vos sites préférés, pour vous signaler les nouveautés.
C'est tout!
Du coup, en un seul écran, vous avez toutes les nouvelles informations sous les yeux.
Gain de temps évident
Si une information vous intéresse, un clic dessus vous montrera automatiquement la page web correspondante dans votre navigateur.
Ces logiciels s'appellent des aggrégateurs de flux ou syndicateurs de flux.
Bon, rapidement, un aggrégateur c'est un p'tit log qui permet d'aller chercher automatiquement (à intervalles réguliers) les flux RSS et qui vous les présente de manière agréable, en mettant en évidence les informations que vous n'avez pas encore lues.
Vous en trouverez ,ici, ou là, des tonnes de gratuits ou pas. A vous de choisir, sachant que les navigateurs aujourd'hui savent lire les flux RSS.
Bon, alors un RSS ça ressemble à quoi?
C'est simplement un fichier texte...au format XML, et ça se présente comme ceci:
Au passage, vous aurez un aperçu de PSPAD pour les ceusses qui ne connaitrait pas.
Comme vous le voyez, rien de compliqué, si ce n'est de bien veiller à la chronologie; lorsque vous allez vouloir ajouter un <item> vous le placerez en tête, le premier quoi. Date en anglais!
Ensuite vous enregistrer ce fichier texte au format xml, en précisant bien l'encoding.
En fait l'en-tête doit contenir ceci:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="XSLT_style.XSL" ?>
<rss version="2.0">
Dans mon exemple j'ai choisi le format RSS 2.0, mais vous avez le choix...
Autant d'item que vous le souhaitez.
* <title> : Titre de l'information.
* <link> : Lien vers la page web correspondante.
* <guid> : Un identifiant unique de votre information. Vous pouvez mettre le texte que vous voulez: L'important est qu'il soit unique (qu'on ne le retrouve pas dans un autre <item>). Cela permet de distinguer les <item> entre eux.
(N.B:Si vous mettez isPermaLink="true", alors vous devez mettre un lien utilisable dans un navigateur (http://...) ).
Si vous mettez isPermaLink="false", vous êtes libre de mettre n'importe quel texte, du moment qu'il est unique.)
* <description> : Texte descriptif ou résumé de l'information.
* <pubDate> : Date de cette information.
Et volà. Enregistrez au formal xml, déposez avec votre ftp....et communiquez à tout le monde l'URL de votre fichier.
Allez, je vous laisse tester, et vous revenez après......................
Alors? Ah bhé oui, votre page est en html, et vous vous demandez "Pourquoi ma page est en html, alors que celle d'Éric est vachement belle?"
Très simple, mais un peu plus délicat. Reprenons mon en-tête:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type=&text/xsl" href="XSLT_style.XSL" ?>
Vous voyez...une feuille de style! Hé oui...mais au format "XSLT".
(Oui je sais, je me suis pas cassé la nenette pour le nom...)
Une css simple me demanderez vous? Que nenni braves trolls et trollettes.
Maintenant que vous savez faire un document XML, allez voir ma feuille de style, inspirez vous en, copiez la, c'est libre de tout droit.
Pour vérifier la conformitéde votre flux RSS: Feevalidator, ou w3c
That's all, folks!
Merci à Sébastien Sauvage
Lorsque vous voulez vérifier la validité de votre code HTML ou XHTML, ou encore
XML, vous vous adressez naturellement au w3c, ici, et vous l'obtenez (je ne peux même pas imaginer le contraire). Problème, si monsieur w3c a quelque chose à vous dire...c'est en anglais. Or la langue de Sheakspeare, même si elle ne vous est pas inconnue a des subtilités qui parfois vous echappe (surtout mâtinée d'américanisme). Or donc, mes loupiots et loupiotes attentives, voilà ce qui vous sauvera, voire vous fera encore plus progresser.
Valdome.org vous propose une validation HTML et autres dans la langue de Molière qui vous
est, elle, totalement acquise, is'n't it? Pour ce faire, suivez ce lien, et progressez encore! Car à y regarder de très prés, ils me semblent encore plus rigoureux. Si, si...Bien sur le top, c'est de faire le test Valdone et le test w3c !
On en a tous et toutes rêvé: Voir notre dernier petit site en ligne se retrouver sur la première page, tout en haut, sur la première ligne de Google!
Ouais, ben c'est du boulot. Déjà, faire en sorte d'être trouvé c'est coton, alors la first page... Mais on peut arriver à quelque chose d'interressant si on suit quelques règles élémentaires, et les conseils que vous trouverez
ici, et en
règle générale de bons conseils sur le même site (en fait, une référence à lui tout seul !).
Il y a et aurait encore bien des choses à dire sur le référencement, et sans doute ce tuyaux n'en est-il qu'à ses débuts. Mais un conseil quand même:
Ne desesperez jamais !. Là comme ailleurs, perseverez.
A bientôt trolls heureux et trollettes magnifiques.
Avec une version qui date un peu de Dreamweaver ®, lorsque vous générez du code
avec la fonction "Ouvrir la fenêtre Navigateur" pour obtenir de zoulis
"pop-up", le dit-code est celui-ci:
function MM_openBrWindow(theURL,winName,features)
{ //v2.0 window.open(theURL,winName,features);}
Dans ce code "winName" est le nom de la fenêtre. Dans icelui
N'UTILISEZ PAS DE CARACTÈRES SPÉCIAUX comme les"-", "(espace)", "%", etc.
FF, Opera, Safari, etc, liront (parfois) plutôt bien et malgré tout votre code et ouvriront un pop-up, mais IE...RIEN!
La solution: Laisser la chaîne vide ' ' pour le nom.
À Suivre...!