Les formations du Net
Formations
last revised :
November 17, 2004
 |
 |
|
 |
|
 |
|
 |
|
 |
Webmaster pro : Les "astuces" du HTML (1)
Au cours de ta formation HTML, tu t'es rendu compte que les "chemins" d'un programmeur ne sont pas toujours "tout droits". Plus d'une fois, tu avais besoin de te "débrouiller", de puiser dans tous tes registres pour réussir un code légèrement "hors norme", de vaincre les navigateurs qui faisaient tout pour te "boycotter" - bref, tu as étudié un nombre énorme de règles et, en même temps, tu as appris que, souvent, ces règles ne sont là que pour être ... ignorées.
Parmi les insiders, ces efforts de se débrouiller au mieux sont souvent traités en "secrets" qui ne sont révélés qu'aux copains - des secrets qui, finalement, sont connus par tous les Webmasters dignes de ce nom. Lors de la réalisation de tes divers exercices, tu as déjà été confronté par un bon nombre de ces "secrets de Polichinelle" pour, petit à petit, prendre l'habitude de les intégrer dans ton répertoire des astuces de tous les jours.
Maintenant, le moment est venu de te présenter une série de chapitres sur les "astuces du HTML" qui a pour objectif de reprendre un à un ces "trucs" pour qu'ils rentrent définitivement dans tes routines.
Les exercices suivants basent tous sur des techniques que tu as déjà utilisées pour réussir tes exercices ou améliorer la présentation de ton site personnel. Les réponses ou réalisations qu'ils te demandent n'exigent donc rien qu'un peu de réflexion - ou, alternativement, la relecture de quelques leçons de la formation HTML.
Astuce 1
Après avoir terminé tes études du HTML, les réponses aux questions suivantes ne devraient pas te poser problème :
Question I
L'emplacement des expressions du style "XVème s.", "Charles V" etc. s'avère parfois difficile. C'est qu'il arrive que leur première partie - "Charles", par exemple - se trouve à la fin d'une ligne et la deuxième, donc "V", au début de la suivante.
De telles coupures sont évidemment interdites par les règles de la typographie. C'est pourquoi nous sommes obligés de trouver une "astuce" censée empêcher la séparation des deux mots. - As-tu une idée, quel code peut être employé pour atteindre cet objectif ?
Question II
Réussir une mise en page est toujours plus facile lorsque nous avons la possibilité de nous servir d'un nombre assez important d'images. Mais souvent, nous sommes obligés de réaliser un site dont le contenu ne consiste que dans du texte. C'est donc à nous de choisir une présentation qui permet à l'internaute de le saisir rapidement, qui le rend bien lisible et qui le transforme en un ensemble de page agréable à regarder.
Prenons donc l'exemple d'un texte assez long, partagé en plusieurs paragraphes mais où, pour une raison ou une autre, l'emploi d'interlignes n'est pas désirable. Dans un tel cas, il est d'usage de mettre en retrait les premières lignes de chaque paragraphe. - Quelles sont les solutions les plus aptes à nous permettre de produire de tels alinéas ?
Question III
Parfois, nous avons besoin d'introduire un espace en haut ou à gauche d'un texte ou d'une image. Le moyen le plus facile pour réaliser une telle tâche nous est évidemment offert par la technique des feuilles de style. Mais parfois, des raisons d'héritage ou autres nous empêchent de nous en servir.
Microsoft a donc "inventé" une balise qui nous permet de renoncer aux style sheets - sans pour autant être obligés de nous passer de l'effet graphique d'un espace placé devant ou au-dessus d'un texte ou d'une image. Toutefois, bien que ce marqueur soit bien pratique, il n'a jamais été adapté par des navigateurs comme Netscape ou Opera. Nous sommes donc obligés de trouver une autre solution.
Quelle méthode proposes-tu pour "imiter" cet effet sans te servir ni de la fameuse balise Microsoft ni des feuilles de style ?
Question IV
Le problème d'affichage dans les divers navigateurs pose déjà un tracas énorme aux Webmasters. Mais les différences entre le traitement du code par un PC ou un Mac nous rendent la vie encore plus dure. Si, par exemple, nous programmons la taille <H2>, notre code sorte en <H3> sur un écran de Mac, et <FONT size="6"> y ressemble plutôt à une valeur de "5".
Pourtant, le délai presque toujours trop court dont nous disposons pour réaliser un site nous empêche souvent de résoudre le problème de la taille différente. Mais il reste une question encore plus importante : celle du type de la police. C'est que les systèmes de PC et Mac ne se servent pas des mêmes polices - la Times New Roman bien répandue chez les utilisateurs de PC, par exemple, manque chez Mac. Il est donc nécessaire de prévoir une police qui, chez les amateurs du Mac, s'approche au maximum du style que nous avons envisagé. D'un autre côté, nous n'avons évidemment pas envie de nous passer des polices du genre PC.
Quelle est donc la méthode à employer pour que chaque système affiche une police qui ressemble le plus aux idées du Webmaster ?
Parfois, il arrive que nous tombions sur un client qui nous demande de négliger cet effet et lance un "tant pis pour vous" aux internautes amateurs du Mac. Mais en tant que Webmaster, nous ne pouvons pas nier leur existence. Et il ne faut pas non plus oublier tous ces groupements professionnels - pour ne nommer que les journalistes ou les architectes - qui se servent presque exclusivement des ordinateurs du genre Mac. Un Webmaster n'a donc pas vraiment le droit de "chasser" ce groupe relativement important d'internautes qui, finalement sont susceptibles de se transformer en visiteurs de son site.
Astuce 2
A l'aide d'un moteur de recherche, tu trouveras rapidement le site de nokia.com, une entreprise dont les produits ne te sont certainement pas inconnus. La dernière version de ce site, comme tu la découvres aujourd'hui, a été chargée sur Internet il n'y a pas très longtemps. Mais il y a un bout de temps, l'aspect du site était tout à fait différent : à l'époque, le Webmaster employé par Nokia préférait se servir des techniques plutôt "anciennes". Si, à ce moment, tu avais regardé le code de la page d'accueil, tu te serais rendu compte qu'il avait vraiment besoin d'être "modernisé".
Part I
Ta première tâche consiste en la réalisation d'une page HTML qui présente l'analyse de ce code. Dans cette page, tu nommes les désavantages - les "négligences" ou, carrément, les "fautes" - dus à cette programmation "à l'ancienne".
Part II
Ensuite, tu charges le code dans Arachnophilia, et tu le transformes en une page "moderne" où ne figure plus une seule balise "ancienne" - mais qui, par contre, témoigne de tes connaissances des feuilles de style. Il va de soi, toutefois, que tes corrections de code ne modifient pas l'affichage de la page dans les navigateurs.
Part III
Finalement, tu examines les effets graphiques de la page d'accueil - de nouveau sur une page rédigée en HTML - et tu expliques en détail, quelles techniques ont été utilisées pour leur création et comment ces techniques ont été employées.
Astuce 3
Si, avec chaque nouvelle commande, un Webmaster recommence à créer les bases d'une page, il ne perd pas seulement énormément de temps - son travail devient aussi "routine" et, par conséquent, peu passionnant. Il a donc intérêt à prendre exemple aux éditeurs HTML qui ont l'avantage de fournir un "squelette" de page pré-préparé.
Ce qui ne veut évidemment pas dire que ce squelette correspond forcément à nos besoins. Entre-temps, nous avons pris l'habitude de structurer nos pages selon notre propre méthode, d'employer les techniques qui nous conviennent le mieux - bref, nous avons développé notre propre style... et les squelettes de pages fournis par les éditeurs sont loin d'être adaptés à nos "écritures" personnelles.
Une telle base contient d'abord les diverses balises qui se répètent toujours, dont <HTML>, <HEAD>, <BODY> etc., puis le "squelette" de l'en-tête, c'est-à-dire les indications du style <META...>, <LINK...> etc. Ensuite, nous commençons à créer la partie "personnelle" de nos pages - nous fixons les cadres censés envelopper nos techniques préférées, nous préparons les tableaux, les frames, les formulaires etc., nous définissons les tailles et couleurs dont nous avons l'habitude de nous servir, prévoyons l'insertion des photos...
Part I
Ta tâche consiste donc dans la conception d'un squelette de page le plus complet possible qui correspond au style personnel que tu as développé au cours de ta formation - le style qui représente alors ton "tampon" de Webmaster.
Part II
Ensuite, tu t'occuperas de la structuration de tes sites. Ton objectif consiste à trouver un maximum d'éléments de structuration communs à la plupart de tes créations. Finalement, tu en conçois une structuration "type" et tu la fixes en forme d'un dessin muni et complété de toutes les explications nécessaires.
Astuce 4
Lorsque nous rédigeons un code, nous avons évidemment la possibilité d'écrire chaque balise dont nous avons besoin pour, ensuite, commencer à réfléchir sur les attributs qui lui conviennent. Cette méthode est tout à fait correcte, mais elle a le désavantage de nous "coûter" beaucoup de temps et, surtout, de nous faire courir le risque d'oublier l'un ou l'autre attribut.
Mais nous pouvons aussi nous servir d'une base de données qui contient les marqueurs nécessaires pour la construction d'un site en HTML avec tous les attributs susceptibles de leur être associés.
Toutefois, bien qu'il soit très pratique de disposer d'une telle base de données - elle n'a pas encore été créée. C'est donc à toi de la concevoir pour, à l'avenir, pouvoir en profiter. On te demande donc d'établir une sorte de base de données qui comporte toutes les balises que tu connais avec tous les attributs dont elles disposent. Voici un exemple :
Exemple : <IMG lowsrc="" src="" alt="" title="" height="" width="" hspace="" vspace="" border="" name="" longdesc="" ismap="" usemap="" id="" class="" style=""> |
Lorsque cette base de données sera terminée, tu n'auras qu'à t'en servir en utilisant tout simplement la fameuse technique du copier-coller.
Astuce 5
Sur un PC, nos pages ne se présentent pas de la même manière que sur un Mac. Netscape 4.7 n'accepte pas les même balises que Netscape 6.0 qui, de sa part, se distingue de Netscape 6.1 ou d'Internet Explorer... Parfois, nous avons l'impression que la tâche du Webmaster est impossible à réaliser : comment, face à ces "querelles" entre les différents navigateurs ou systèmes, pouvons-nous créer des pages qui se ressemblent chez tous les internautes ?
Malgré tous les obstacles, nous sommes obligés de nous débrouiller. Chaque utilisateur, peu importe s'il est adepte de PC ou Mac, s'il préfère Netscape, Internet Explorer ou Opera, doit être en mesure de capter nos pages d'une manière qui s'approche le plus de nos idées initiales. Souvent, nos essais de positionnement de balise, d'emploi d'attributs et de feuilles de style etc. nous font atteindre notre objectif. Mais parfois, nous ne disposons que d'un seul moyen : créer plusieurs versions parallèles, une pour chaque navigateur.
Ces différentes versions une fois réalisées, il nous manque encore un "détail" essentiel : un script qui "sonde" l'ordinateur du visiteur de notre site pour, ensuite, le guider vers la bonne version. Car il va de soi qu'un site où l'utilisateur doit cliquer pour trouver la bonne version n'a pas l'air très "pro". Ce qu'il faut, c'est un script qui "automatise" le choix entre les diverses versions.
Actuellement, on ne te demande pas encore de rédiger un tel script - le prochain chapitre t'en livrera un qui sera "prêt à l'emploi". Mais avant de le recevoir, tu auras pour tâche d'analyser le script suivant, issu du site "ibm.com". Explique en détail - pas à pas - les fonctions de ses différentes lignes.
Le script : var i = navigator.appVersion.indexOf('MSIE 6'); |
Copyright: TechnoLangue, 1997-2004
last revised: November 17, 2004
