This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Chapitre 11 – Le référencement . . Les modèles liés aux CSS . . . Le référencement naturel . . Le référencement payant . .
. . . . . . . . . . . . . . . . . . . . .
. . . .
. . . .
. . . .
. . . .
. . . . . . . . . . . . . . . . . . . . .
. . . .
. . . .
. . . .
217 217 218 220
Chapitre 12 – Gérez l’hébergement de votre site . . . L’accès au réseau Internet . . . . . . . . . . . . . L’hébergement du site . . . . . . . . . . . . . . . Le nom de domaine . . . . . . . . . . . . . . . . Le transfert des fichiers vers le serveur . . . . . . Transférer les fichiers de son site vers l’hébergeur
Avant-propos À propos de cet ouvrage Expression Web est un nouveau logiciel de création et de publication de sites web, paru en 2007 et faisant partie de la gamme logicielle Microsoft : Expression. Cet ouvrage aborde les fonctionnalités de la version 1, celles de la version 2 n’étant, à l’heure où cet ouvrage paraît, pas encore complètement établies. Écrit par un formateur infographiste, l’ouvrage aborde de façon simple et varié, toutes les fonctionnalités du logiciel, permettant à des néophytes de pouvoir, dès les premières pages, créer leur propre site web. Tout au long de l’ouvrage, de nombreux exercices, accompagnés de leurs corrections, vous permettront de mettre en pratique vos acquis.
À qui s’adresse ce livre ? En premier lieu aux utilisateurs de FrontPage désireux d’évoluer. Ils trouveront dans cet ouvrage un chapitre qui leur est entièrement consacré, décrivant en détail comment faire passer leur site, d’une version FrontPage à une version Expression Web. Ensuite, le reste du livre leur permettra d’acquérir de nouvelles techniques, qu’ils ne pouvaient pas mettre en œuvre précédemment. En second lieu, à toute personne désireuse d’acquérir les règles de création de site, dans les standards actuels, au moyen d’un logiciel professionnel. Vous découvrirez combien l’écriture d’un site avec Expression Web est aisée, grâce notamment à son mode Wysiwyg permettant un contrôle et un positionnement très précis des éléments du site, à ses capacités d’analyse du code produit, ce qui évite dès le départ de nombreux dysfonctionnements
@ 1
Expression Web
futurs, et à l’excellence de son module de gestion des styles (CSS) qui se révèle très pratique à l’usage. En dernier lieu, aux professionnels : graphistes, intégrateurs, webmasters, travaillant avec ou au sein d’équipes de développement utilisant les environnements de programmation Microsoft, et qui désormais vont enfin pouvoir travailler sur des projets communs, avec des outils communs, utilisant les mêmes interfaces et les mêmes structures de projets. Les utilisateurs de Visual Studio ne seront pas dépaysés avec l’emploi des logiciels de la gamme Expression, et notamment Expression Web.
Les tutoriels en ligne Tous les tutoriels de cet ouvrage ont été conçus et organisés pour être facilement accessibles et exploitables dans l’interface d’Expression Web et son interface de gestion. Les tutoriels sont téléchargeables sur la page associée à cet ouvrage sur le site dunod.com.
Nomenclature et ergonomie de lecture Organisation des tutoriels Les tutoriels sont classés dans les dossiers respectifs des chapitres auxquels ils sont rattachés. Par ailleurs, dans certains cas, nous vous fournissons les corrections des tutoriels à différents niveaux de leurs réalisations, ce qui permet de se rattraper et de pouvoir continuer les exercices, même en cas de difficultés sur une étape du tutoriel.
Lecture du code Les passages essentiels figurent en gras.
FLOTTE -- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisi.
petit DIV relative
Cras placerat metus rutrum velit.
Conseils et astuces L’ouvrage est parsemé de « conseils, Trucs et Astuces », acquis par expérience. Utilisez-les sans modération !
@ 2
Introduction Expression Web succède à FrontPage, dont il reprend les atouts qui ont fait son incroyable succès et notamment sa simplicité d’emploi et son ergonomie qui ont permis à des milliers d’utilisateurs de créer un site web sans écrire une ligne de code. Mais Expression Web va beaucoup plus loin, offrant des passerelles vers tous les nouveaux formats du Web qui permettent de faire des sites multimédias riches et variés. Et surtout, il s’inscrit comme l’élément déterminant, dans l’environnement de développement Microsoft, entre développeurs et graphistes, puisqu’il leur permet de partager les mêmes projets web.
La gamme Expression La collection regroupe cinq logiciels de qualité professionnelle :
3 Expression Design : outil d’illustration vectorielle novateur, notamment en termes d’ergonomie, utilisant des effets dynamiques (non destructifs et modifiables) et capable d’exporter vers un ensemble varié de format tel que le code XAML. Des spécificités qui vont forcément lui permettre de rencontrer beaucoup de succès auprès des designers et codeurs.
3 Expression Blend : la suite logique d’Expression Design. Permet la création d’interfaces graphiques multimédias riches en contenus graphique 2D ou 3D, en graphisme d’animation, en vidéos.
3 Expression
Encoder : complément indispensable à Expression Blend, puisqu’il permet d’encoder une vidéo vers SilverLight, le nouveau plug-in de Microsoft, outil multi-plate-forme permettant aux navigateurs Mac et PC, tels qu’Internet Explorer
@ 3
Expression Web
version 6 ou 7, Safari ou Firefox, d’afficher des contenus multimédias ou des applications Internet enrichies (RIA). Beaucoup y voient un concurrent direct de Flash.
3 Expression Media : outil permettant de visualiser et d’organiser les contenus numériques. Il est capable de gérer un très grand nombre de formats, des plus classiques aux plus récents. Certains le connaissent peut-être déjà, mais sous son ancien nom : iView Media Pro, avant qu’il ne soit racheté par Microsoft.
3 Expression Web : logiciel professionnel permettant la création, la publication et la mise à jour de sites Internet ou extranet, de type statique ou dynamique et capable d’intégrer de nombreux formats de code en plus du HTML, CSS et JavaScript, tels que XML, ASP.NET et XHTML. À noter que la version 2 présentera quelques nouveautés dont la possibilité d’intégrer du PHP, langage de programmation open source permettant, comme l’ASP.NET, la création de sites dynamiques, ainsi que l’insertion d’objets Flash, SilverLight et Windows Media File.
À propos d’Expression Web Expression Web qui, avant sa commercialisation en 2007, se nommait « Web Designer », est donc un outil logiciel « aidant » à la réalisation de sites web modernes et respectant les standards du Web, tels qu’énoncés par le W3C. Pourquoi « aidant » ? Car en fait, pour écrire un site Internet, un logiciel de type « Blocnotes » peut amplement suffire puisqu’il s’agit, pour un site simple, d’écrire du code HTML1 et des feuilles CSS2. Pour ce type de site, modeste, il faut surtout du HTML (pour la structure et le contenu texte), une ou plusieurs feuilles CSS (pour la mise en styles du contenu), saupoudrés si on le souhaite d’un peu de JavaScript, de Flash ou de SilverLight pour apporter un enrichissement multimédia (animation, vidéo, audio…) et du dynamisme. Attention, ne pas oublier que les navigateurs (Internet Explorer, Firefox, Opéra, Safari…) qui permettent l’interprétation de ces langages, ne comprennent de base que le HTML et les CSS, et le reste en fonction des plug-ins installés.
Mais ce langage, même s’il est simple, demande de connaître sa structure, sa syntaxe, ses mots-clés, autant d’éléments qu’il faut apprendre par cœur, ou aller puiser dans un livre ; pas ce qu’il y a de plus pratique et rapide pour faire un site ! Sans compter le fait, que pour voir le résultat, il faut charger la page HTML dans un navigateur à chaque fois. Et les choses se compliqueront quand vous allez vouloir apporter un peu d’animation à vos pages, ou
1. HTML ou HyperText Markup Langage pour « langage utilisant des balises de navigation hyper-texte ». 2.CSS : Cascading Style Sheet traduit en feuille de style en cascade, permettant la mise en style d’une page HTML.
@ 4
Introduction
quand vous souhaiterez que celles-ci soient couplées avec une base de données afin de les alimenter en contenu. C’est pour cela que sont apparus des logiciels comme FrontPage de Microsoft, Dreamweaver de chez Adobe Corporation (anciennement édité par la société Macromedia) et… bien sûr Expression Web. Difficile de prédire si Expression Web deviendra leader dans ce créneau, toujours est-il qu’il possède toutes les qualités pour le devenir, voire même certaines qui font défaut à ses concurrents.
Tour d’horizon des fonctionnalités d’Expression Web
3 Prise en charge des normes XHTML1, DHTML2 et CSS3. 3 Gestion des DOCTYPE. 3 Interface modulable et proche de FrontPage et Visual Studio. 3 Visualisation du code en mode Wysiwyg. 3 Fonctions « IntelliSense » permettant l’anticipation du code
à écrire, en mode
HTML et CSS.
3 Gestion avancée des feuilles de styles CSS. 3 Prévisualisation et application de styles. 3 Affichage et modification directs des marges des blocs. 3 Gestion des couches (layer). 3 Insertion d’objets multimédias aux formats Flash, SilverLight, Windows Media File. 3 Prise en charge du langage PHP version 5. 3 Prise en charge d’ASP.NET 2.0, AJAX et Data Controls pour créer des applications web modulables.
3 Contrôles ASP.NET directement accessibles 3 Emploi de pages maîtres ASP.NET. 3 Modules de modèles web dynamiques (bibliothèques de templates). 3 Bibliothèque d’extraits de code. 3 Intégration directe par glisser-déposer de données XML et XLT. 3 Serveur Web de développement ASP.NET fourni (serveur logiciel). 1. XHTML : pour HTML extensible. Ce n’est jamais qu’une reformulation du HTML 4.01. 2. DHTML : HTML dynamique, mais qui est un peu passé de mode. 3. CSS : Cascading Style Sheet traduit en feuille de style en cascade, permettant la mise en style d’une page HTML.
@ 5
Expression Web
3 Module FTP actif ou passif pour pouvoir synchroniser et placer les fichiers du site sur le serveur.
3 Module de recherche d’erreur de schéma. 3 Module de production de rapport et d’analyse portant sur : • gestion des styles CSS ; • compatibilité avec les navigateurs ; • accessibilité.
3 Module d’optimisation du code. 3…
@ 6
1
Les sites web OBJECTIF Découvrir les différents types de site, les technologies employées, comprendre leurs différences, quels outils faut-il embarquer avec soi pour débuter dans la création d’un site, tels sont les objectifs de ce chapitre.
•••
Généralités Un site web est composé d’un ensemble de pages reliées entre elles et affichées par un navigateur tel qu’Internet Explorer, Firefox, Opéra ou Safari pour ne citer que les plus connus. En théorie, le choix du navigateur n’influe pas sur le rendu du site, puisque cet affichage est régi par une syntaxe commune, édictée par un organisme international, le W3C. La base d’écriture des pages est le langage HTML ou XHTML et le langage CSS, tout en sachant que d’autres langages, tels que le JavaScript, l’ASP.NET et le PHP peuvent s’inviter dans ces pages pour offrir aux visiteurs un contenu plus riche, plus dynamique ou fabriquer à la volée, suivant la demande de l’internaute, des pages dynamiques. Pour que ce site soit ensuite visible par l’ensemble des internautes, il faut que :
3 les pages de ce site soit disposées sur un ordinateur ouvert sur le monde (le rôle des hébergeurs qui vous feront disposer de leurs « serveurs ») ;
3 le nom de domaine qui caractérise votre site soit déclaré à une adresse (URL) bien précise, afin d’ être accessible par la communauté.
@ 7
Expression Web
On peut compléter cette mise en visibilité par un travail de référencement, c’est-à-dire appliquer les règles de référencement naturel et/ou mettre en place une politique marketing de référencement payant afin que les moteurs de recherche (Google, Yahoo, Live Search) puissent proposer votre site comme un résultat pertinent face à la requête d’un internaute sur un mot (mot-clef) ou une expression censés représenter une thématique particulière (voir chapitre 11).
•••
Classement des sites On peut classer les sites de diverses manières :
3 en fonction des technologies employées pour leur construction ; 3 en fonction de leurs modes de communication. Bien entendu, cette distinction est arbitraire et évolue très vite en fonction des technologies, des modes et des attentes des utilisateurs ; peut-être vous permettra t-elle d’avoir une meilleure vision de ce monde en perpétuel mouvement, tout en vous aidant à choisir la technologie et le type de site adapté à vos besoins personnels, à ceux de votre association ou de votre société.
En fonction des technologies employées Soit les pages reçues par le navigateur sont figées, c’est-à-dire que chaque page sera affichée de manière identique, en termes de contenus, pour tous les internautes (site statique), soit le contenu des pages varie en fonction de la demande des utilisateurs (site dynamique). Au final, le navigateur reçoit toujours du langage HTML (ou XHTML) et des feuilles de style CSS principalement ; tant mieux, car il ne sait lire à peu près que ça.
Site statique Dans le cas des sites statiques, le contenu des pages est figé et prédéterminé. Chaque visiteur verra la même chose, aura accès aux mêmes informations. Le serveur se contente d’envoyer le contenu du fichier de la page HTML qu’il a sur son disque dur sans se poser de questions. C’est bien entendu, le type de sites le plus facile à mettre en œuvre, et ils peuvent parfaitement convenir aux besoins de particuliers, d’associations, de petites et moyennes entreprises, souhaitant présenter leur gamme de produits. C’est aussi, bien sûr, les plus rapides à monter ; ils ne nécessitent pas d’être un professionnel de la programmation, mais juste de connaître les principales balises HTML et propriétés CSS. C’est donc aussi ceux qui seront les meilleurs marchés.
@ 8
Chapitre 1. Les sites web
Site dynamique Dans le cas d’un site dynamique, le contenu des pages (contenu texte ou contenu « riche » audio, vidéo) varie en fonction de la demande des visiteurs. Pas forcément sur toutes les pages, mais au moins sur les pages qui nécessitent de présenter des contenus en fonction de requêtes du visiteur, comme il peut en faire sur une page « produits » d’un site d’e-commerce par exemple. Imaginons que le visiteur souhaite voir s’afficher tous les produits ayant un prix inférieur à 200 euros. Le fait de faire cette demande est une requête. Au moment de la validation par l’utilisateur, celle-ci est envoyée par le navigateur vers le serveur du site. Un programme spécifique (de type PHP, ASP.NET ou Java pour les plus répandus) va alors aller glaner dans une base de données (présente également sur le serveur) les renseignements demandés puis, une fois la récolte faite, va construire une nouvelle page HTML et la renvoyer au poste client, qui va pouvoir être affichée par le navigateur. Ainsi, à plusieurs requêtes différentes, vont correspondre des pages différentes. Pour pouvoir ainsi générer du code dynamique, l’HTML, le CSS et le JavaScript ne suffisent plus. Il faut ajouter une programmation en ASP.NET ou PHP principalement, au sein des pages HTML. La mise en place de ce type de site est donc plus lourde, plus chère et nécessite déjà d’avoir quelques connaissances en programmation. Cependant, dans les deux cas, sites statiques ou dynamiques, Expression Web saura vous être utile, voire indispensable. Dans le cas de sites statiques, nous verrons qu’Expression Web vous permettra de construire facilement et simplement votre site, en vous signalant vos erreurs, en optimisant le code, en vous proposant des modèles. Par contre, dans le cas de sites dynamiques, il saura être un parfait partenaire, puisque si vous travaillez avec des développeurs ASP.NET, vous pourrez partager vos projets avec les développeurs. Eux travaillant sous Visual Studio (l’outil de développement pour écrire du code .NET), et vous sous Expression Web, mais sur un projet commun, le site. Ainsi, et suivant la volonté de Microsoft, Expression Web devient la passerelle entre développeurs Microsoft et web designers.
En vertu des fonctionnalités Qu’y a-t-il de commun… Qu’y a-t-il de commun entre une newsletter, un site d’association, le portail du ministère des Finances, le site de vente par correspondance d’un grand magasin parisien, le wiki de mon encyclopédie en ligne favorite, le forum dans lequel vous vous exprimez régulièrement, le tchat sur lequel vos enfants passent des nuits entières à discuter et le blog de ma voisine, très jolie au demeurant, sans oublier les mails et les spams qui inondent votre boîte aux lettres ?
@ 9
Expression Web
Réponse : le code HTML et les feuilles de styles CSS. Ce qui permet d’affirmer :
3 qu’en connaissant l’HTML et les CSS, vous vous ouvrez des possibilités de communication importantes et variées ;
3 que dans cette énumération, on va trouver des technologies statiques et d’autres dynamiques.
Analysons plus en détail ces éléments en les comparant Nous allons juste passer en revue ce que l’on trouve désormais sur, dans et autour d’Internet, histoire de démystifier tous ces termes et technologies qui souvent, par manque d’information, effraient.
3 Différences
entre une newsletter et un site web : une newsletter est en fin de compte une page de site, isolée, utilisant du code HTML et du code CSS, mais prévue pour être envoyée par mail, alors qu’un site web comporte plusieurs pages HTML, liées entre elles par des hyperliens. Par ailleurs, on se déplace pour la visionner (on va à son adresse URL), à la différence de la newsletter qui vient vers vous.
3 Différences entre un site personnel et le site d’un grand magasin : • Aucune si l’on se fie au code lu par le navigateur client ; du HTML, du CSS et
du JavaScript. • Nombreuses si l’on se réfère aux technologies ayant produit le HTML (dynami-
que), aux temps et donc aux coûts de développement, au niveau de sécurité exigé pour protéger les données, aux débits d’entrée et de sortie des données côté serveur.
3 Différence entre un blog et un site : aucune, car un blog est un site web. Cependant, dans le cas d’un site web, vous avez tout à faire (création du design, de la structure, du contenu…), tout à gérer techniquement (référencement, hébergement, nom de domaine…) mais vous avez une totale liberté en termes de fonctionnalités et de quantité de contenus. Un peu comme si vous achetiez un terrain pour ensuite construire de vos mains une somptueuse demeure (mais vous avez le droit d’embaucher des ouvriers ou de vous faire aider). Tandis qu’avec un blog (issu du terme Weblog), vous emménagez dans un logement tout équipé. Même la cuisine est fonctionnelle, c’est beau, c’est propre mais vous êtes en location. Un blog est un ensemble de pages, construites suivant un modèle préétabli, et composées d’une suite de « billets ». Ces « billets », genre d’articles assez courts en général, peuvent être accompagnés d’éléments riches, tels que des passages audios, vidéos ou des images. En général, si le blog a une certaine audience, les billets sont suivis de commentaires rédigés par les internautes lecteurs. Par ailleurs, une des pratiques très en vogue sur les blogs, consiste à relayer des billets parus sur d’autres blogs ou d’autres sources d’informations.
@ 10
Chapitre 1. Les sites web
Pour monter un blog, il faut passer par un moteur spécialisé. Les deux principaux sont DotClear et WordPress. Le blog est le reflet de ce que certains nomment le Web 2.0, où il y a un contenu participatif. Avant l’avènement du Web 2.0, l’information présente dans un site était rédigée par l’auteur du site ; avec le Web 2.0, une bonne partie de l’information est écrite par les visiteurs. Mais attention, aussi bien dans le cas d’un site que dans le cas d’un blog, le directeur de publication (c’est-à-dire vous, dans le cas d’un site ou d’un blog perso) est responsable du contenu, de tous les contenus, qu’ils soient ou non de lui ; à partir du moment où des contenus sont publiés sur votre site ou votre blog, vous en êtes responsable. Cela veut donc dire qu’il est préférable de toujours travailler en « modération », c’est-à-dire se réserver la liberté de lire et de pouvoir supprimer un commentaire envoyé par un lecteur.
3 Et le Wiki ? Un Wiki est également un site web, mais totalement orienté vers le travail collaboratif ; un espace, ouvert pour un projet, où chaque visiteur peut apporter des éléments de contenus, mais aussi en effacer. Ce genre de site est très courant dans les communautés de développeurs.
•••
Organisation et structure d’un site
Fondations d’un site Au départ, un site se construit en « local », c’est-à-dire que les fichiers composant le site sont créés et sauvegardés sur une machine présente dans les locaux du créateur ou de la société. Il est également possible, dans le cas de sites plus importants, que plusieurs personnes travaillent conjointement sur un site. La encore, les fichiers seront tous placés sur la même machine, que l’on peut présenter comme un « serveur local ». Une fois le site créé et testé, on le bascule alors sur le disque dur de l’hébergeur, par connexion à distance (un upload en protocole FTP). Mais pour un site de type dynamique, il faut, pendant sa création et ses phases de tests, pouvoir reproduire le comportement du site tel qu’il sera en ligne. On doit donc pouvoir tester des requêtes passées dans une page « produits », par exemple « affiche-moi tous les produits de marque X, et inférieurs à 200 € ». Pour cela, tous les environnements de développement permettent de « transformer » la machine locale en serveur web local : serveur Apache pour les environnements PHP, et IIS pour les environnements .NET de Microsoft.
@ 11
Expression Web
Les outils et services nécessaires Un éditeur de site pour : 3 écrire le code des pages HTML ;
3 écrire le code des feuilles de styles (CSS) ; 3 écrire le code des fonctions JavaScript ; 3 écrire le contenu texte ; 3 insérer des objets multimédias images, des vidéos ; 3 transférer vers l’hébergeur (FTP) ; 3 etc. Outils conseillés : Expression Web bien sûr.
Un logiciel d’art graphique pour : 3 créer les visuels en mode bitmap ou vectoriel (boutons, illustrations, bannières, fond de pages) ;
3 faire des retouches photos (correction, trucage, modification de tailles) ; 3 faire les « découpes d’images ». Outils conseillés : Expression Design, Photoshop CS3, Flash, Illustrator mais aussi PaintShopPro, PhotoFilter, Pixia et GIMP (gratuit).
Des navigateurs web pour : 3 visualiser ce que verront les internautes. Le navigateur le plus répandu actuellement, est Internet Explorer V6 et 7, suivis par Firefox V2 et Opéra. Il est fortement conseillé, pour les créateurs de site, de disposer de plusieurs navigateurs, car certains interprètent de manière particulière le code HTML ou CSS qu’ils reçoivent, provoquant des défauts d’affichage ;
3 valider votre site ; 3 pouvoir modifier en temps réel les attributs des sélecteurs CSS (possible sous Firefox avec l’extension « Web Developper Tool Bar »). Outils conseillés : Internet Explorer version 6 et version 7, Firefox v2 et bientôt v3, Opéra v9, Safari v3. Tous ces navigateurs sont gratuits.
Un outil de transfert de fichiers pour : 3 transférer les fichiers composant le site, de votre disque dur vers le disque dur du serveur de l’hébergeur. Pour sécuriser le transfert mais également autoriser une vitesse d’échange plus importante, on utilise un protocole d’échange particulier appelé FTP (File Transfert Protocol) et non le protocole HTTP.
@ 12
Chapitre 1. Les sites web
Notez qu’Expression Web possède son propre module de transfert, utilisant le protocole FTP. Outils conseillés : FileZilla (gratuit).
Un hébergeur : pour que le monde entier puisse accéder à votre site. Ils sont nombreux, et les critères de choix sont de trois ordres :
3 qualité des services offerts (bande passante, espace de stockage, boites mails…) ; 3 tarifs pratiqués ; 3 choix de la technologie serveur en fonction des outils de développement que vous aurez utilisé pour faire le site : • vous avez fait un site statique ; un hébergeur supportant les serveurs Apaches est
suffisant. C’est la majorité des hébergeurs et aussi les moins chers ; • vous avez fait un site dynamique, utilisant une ou des bases de données MySQL
et du PHP : pareil au cas précédent ; • vous avez fait un site dynamique utilisant une plate-forme de développement
Microsoft (.NET, ASP.NET) avec une ou des bases de données SQL. Dans ce cas, il faut choisir un hébergeur possédant un serveur de type Microsoft.
Un nom de domaine pour : 3 être « domicilié » sur le Net. Ce nom de domaine est pour ainsi dire votre marque de site. Il est impossible de l’acheter définitivement, par contre, vous pouvez simplement louer son usage durant un laps de temps déterminé (un an minimum) auprès de sociétés privées, spécialement habilitées à fournir ce service, et que l’on nomme des « registrars » ou bureaux d’enregistrement en français. Attention : pour un même nom de domaine, « maisons-bretonnes » par exemple, il va exister plusieurs suffixes possibles : .com, .fr, .org, .eu, .uk (pour un site anglais par exemple). À chaque fois, il vous faut déposer une demande différente. Au final, vous pouvez donc disposer de plusieurs noms de domaine tels que : « maisons-bretonne.com », « maisons-bretonne.fr », « maisonsbretonne.uk », etc.
Un site est un ensemble de pages web Un site est un ensemble de pages HTML reliées entre elles par des liens nommés aussi hyperliens. La notion de lien est donc primordiale dans l’univers des sites, et c’est même à la base de la naissance de l’Internet. Les liens sont principalement placés sur des mots, des expressions ou des images. Un lien n’est rien d’autre que l’indication exacte de l’emplacement de l’objet recherché (pages, images, autre site), sur le disque dur du serveur ou vers une adresse (URL) extérieure. Les
@ 13
Expression Web
pages web comportent de nombreux éléments, tels que des images, des vidéos, des fichiers audios, des documents PDF, etc., tous chargés dans la page par un lien.
Plusieurs langages dans une même page web Divers langages sont utilisés pour la construction des pages, même si au final un navigateur lit essentiellement de l’HTML ou du XHTML et du code CSS.
Langages de base
3 Le langage HTML ou XHTML, la base, permet de construire la structure et de placer les contenus variés. Il existe indifféremment deux suffixes pour définir une page HTML : HTM ou HTML au choix.
3 Les feuilles de style CSS, en code CSS, sont responsables de la décoration (mise en style), comme par exemple la taille des polices, leur couleur, la couleur des fonds. Elles jouent également un rôle important dans la disposition des différents blocs ou conteneurs (paragraphes, colonnes…). Par ailleurs, elles permettent d’adapter les contenus (mise en page et mise en style) en fonction du support utilisé pour visualiser les pages (écran, imprimantes, téléphone mobile, périphériques de lecture ou de saisie pour handicapés). Peu employées au début du Web, elles sont aujourd’hui la garantie des sites de qualité, en favorisant la lisibilité, l’ergonomie de navigation, l’accès de l’information aux handicapés, les mises à jour et le travail collaboratif entre designers et développeurs. Elles offrent la distinction entre écriture du code de développement et webdesign. Le code CSS se place : • soit dans la page HTML : on parle alors de feuille de style interne ; • soit dans un fichier séparé, comme feuille de style externe, portant une extension
CSS. Un lien dans la page HTML permet de relier page HTML concernée et feuille de style.
3 Le JavaScript : apparu en 1995 dans le navigateur Netscape et créé par Sun et Netscape. Ce langage permet d’apporter essentiellement de l’interactivité dans les sites. Attention, interactif ne veut pas dire dynamique. Un site statique peut comporter du JavaScript, il ne deviendra pas dynamique pour autant. L’un des emplois les plus courants de ce langage se retrouve dans les roll-over, c’est-à-dire le fait qu’une image ou un fond de bouton par exemple change d’aspect au survol ou au clic de la souris. Son extension est .JS et comme pour les CSS, le code JavaScript peut être soit placé en interne, dans la ou les pages HTML concernées, soit placé dans un fichier externe, avec un lien dans la page HTML.
@ 14
Chapitre 1. Les sites web
Autres langages utilisés pour la création de sites dynamiques
3 ASP.NET : développé par Microsoft, le langage ASP.NET permet l’élaboration de sites web dynamiques. L’extension des pages écrites en ASP.NET est .ASPX. Ce type de programmes travaille souvent en synergie avec une ou plusieurs bases de donnés de type Microsoft SQL Server. Microsoft propose diverses versions de son éditeur, Visual Studio, pour produire du code ASP.NET. De même, Microsoft multiplie les offres commerciales auprès des centres universitaires permettant, pour les étudiants, de disposer d’environnement de développement bon marché, voire gratuits.
3 PHP : langage créé par Rasmus Lerdorf en 1994, permettant également la création de pages dynamiques mais, à la différence d’ASP.NET, ce langage fait partie du monde de l’open source, c’est-à-dire créé par l’interaction et la collaboration de centaines de développeurs dans le monde, et d’un usage gratuit, même dans une application commerciale. À l’instar d’ASP.NET, le PHP a besoin de pouvoir échanger avec des bases de données ; par défaut, le PHP travaille avec MySQL, faisant également partie du monde de l’open source. D’ailleurs, l’installation du PHP sur votre poste, par l’intermédiaire du pack EasyPHP, installe également l’administration de cette base de données (ou SGBD).
3 ColdFusion
: langage payant, proche de la syntaxe de l’HTML et désormais propriété d’Adobe system, après avoir été créé par les frères Allaire et racheté par Macromedia. ColdFusion est moins présent sur le marché de la génération de sites dynamiques, sans doute parce qu’il est payant. Néanmoins, il est capable de travailler naturellement avec les SGBD rencontrées précédemment, Microsoft SQL Server ou MySQL pour le PHP. L’extension des pages écrites en ColdFusion est .CFM.
3 Java : il est à noter que l’univers Java est également très présent dans le domaine de la création de sites web dynamiques. Similaire en termes de fonctionnalités aux technologies dynamiques déjà évoquées, cette plate-forme est fortement portée par la richesse de sa communauté et par ses nombreux outils librement distribués. Si le langage Java vous attire, l’IDE « Eclipse » vous permettra notamment d’éditer vos pages JSP (JavaServer Pages) qui pourront être servies par nombre de serveurs web compatibles comme TomCat d’Apache, Blazix, WebSphere d’IBM, etc. Attention : le choix du langage de développement a une répercussion sur le choix de l’hébergeur, qui doit disposer sur ses serveurs, des librairies de programmation des langages utilisés.
Autres langages rencontrés : le XML et XSLT (présentations de contenus et structure par balisage des pages), le Java, le VBScript. Un coup d’œil tout particulier par contre pour la programmation en ActionScript. Ce langage, orienté objet comme l’ASP.NET par exemple, est le langage de programmation des
@ 15
Expression Web
applications Flash, anciennement de la société Macromedia, et depuis propriété de la société Adobe. Nous en sommes à la version 3, dénommée AS3. Le Flash permet de développer soit de simples animations, interactives ou non (très prisées par exemple par les bannières de publicité, qui sont désormais presque à 100 % composées d’animations Flash), mais également de proposer des modules entiers (comme une page de formulaire par exemple) ou bien un site 100 % Flash. Les applications Flash sont capables de communiquer avec les serveurs et le code HTML, JavaScript, PHP, ASP.NET et ColdFusion. Mais, de toute façon, les applications Flash seront toujours, pour être présentes dans une page Web, encapsulées dans un objet HTML. À la différence du PHP, du JavaScript ou de l’ASP.NET, vous ne trouverez jamais de code ActionScript, « libre », directement dans une page HTML. Et bien sûr, il est préférable de disposer du programme Flash. Par contre, pour pouvoir être chargées par les navigateurs, les applications Flash ne nécessitent que de disposer du Player Flash en relation avec le navigateur utilisé.
Structure d’une page web Une page HTML comporte toujours deux parties bien distinctes :
3 l’entête, délimité par les balises « HEAD » et « /HEAD » ; 3 le corps de page délimité par les balises « BODY » et « /BODY ». L’entête L’entête est bien sûr indispensable, car c’est dans cette zone, invisible à l’affichage dans les navigateurs, que vont être placés tous les paramètres caractérisant la page, comme le DOCTYPE qui définit le langage informatique utilisé :
On va également y trouver le titre de la page (entre les balises <TITLE>) et la liaison vers une feuille de style externe
ou les caractéristiques des styles, si ceux-ci sont en interne : <style type="text/css"> #container { height: 400px; position: relative; width: 400px; color: #FF00FF; border: 4px solid; padding: 1px 4px; }
Le corps de page Représenté par les balises et . C’est entre cette balise ouvrante (la première) et la balise fermante concordante, que va être placé tout le contenu de la page. Ici, dans notre exemple, nous avons d’abord placé des blocs distincts, qui servent de conteneurs pour y placer les éléments textes ou images (balises DIV) :
…
puis nous avons mis un titre :
Page d'accueil du Site
puis inséré une image avec sa légende : Bienvenue sur mon site
Fig. 1.1 Le code de la page…
@ 17
Expression Web
Fig. 1.2 et son résultat dans un navigateur
Pour en finir avec ces généralités et cette introduction à l’HTML, je me permets de vous apporter ci-dessous quelques conseils et règles de conduite qu’il me semble préférable d’appliquer pour optimiser ses chances de réussite dans la construction d’un site web.
Quelques règles simples et élémentaires à respecter Au départ, un site comporte peu de fichiers et il est aisé de s’y retrouver. Par contre, au fil des jours, il va grossir au rythme des ajouts de pages, ajouts de contenus médias (images, photos, vidéos), fichiers annexes (feuilles de style, fichier JavaScript). Il est donc important de prendre de bonnes habitudes dès le départ :
3 pour éviter les erreurs « bêtes » (écrasement de fichiers, corrections sur les mauvais fichiers, liens cassés…) ;
3 pour retrouver plus facilement la cause d’un bug ; 3 pour faciliter les mises à jour et sauvegardes de sécurité ; 3 pour optimiser le référencement de votre site par les moteurs de recherche. En effet, ceux-ci sont par exemple très friands de nom de fichier en rapport avec le contenu. Par exemple, ne nommez pas une page servant de vitrine à des produits bio sous le terme : « page02.htm » mais plutôt « produits_bio.htm ». De plus, cela vous permettra également de connaître immédiatement le contenu de la page, quand vous
@ 18
Chapitre 1. Les sites web
reviendrez sur le site dans 6 mois pour une correction. C’est également valable pour le nom des fichiers de médias (audio, images, vidéos…).
Les règles de base
3 Ne placez pas d’accents ou de caractères spéciaux (cédilles, apostrophes, guillemets, etc.) dans les noms de fichier ou de répertoires.
3 Si vous souhaitez séparer deux mots, utilisez le tiret (-) ou l’underscore (_), mais surtout n’utilisez pas d’espaces. En effet, suivant les polices employées, il est parfois difficile de savoir s’il y a un, deux ou pas d’espace. En décidant de ne jamais en mettre, vous vous simplifierez la vie ! De même, n’utilisez aucun caractère de ponctuation dans le préfixe ou le suffixe de vos fichiers, tels que le point, le point-virgule ou la virgule. Seul le point est autorisé pour séparer préfixe du suffixe.
3 Préférez
les minuscules aux majuscules et ne les mélangez pas dans un nom de fichier. Si en local votre système d’exploitation ne fait pas de différences entre majuscules et minuscules, il n’en est pas de même des systèmes présents sur certains serveurs. Au final, vous risquez de vous retrouver avec une véritable énigme pour vous ; un site qui fonctionne en local, mais pas sur le serveur de l’hébergeur avec, notamment, la présence de « liens cassés », c’est-à-dire l’impossibilité pour le programme d’aller chercher la cible du lien.
3 Organisez
vos fichiers dans le répertoire du site, en créant des sous-répertoires. Chacun aura son organisation dans laquelle il se sentira à l’aise. Ainsi, moi par exemple, je préfère placer toutes les pages (leur fichier) en racine du site, alors que certains, comme Microsoft avec les modèles par exemple, n’hésitent pas à créer un sous-répertoire par page. Mais le plus important, et sur ce point il existe un consensus, c’est de séparer les images utilisées dans le site, en les plaçant dans un sous-répertoire « images ». Attention, à ne pas associer dans ce dossier, les maquettes ayant servi à créer ces images. Pourquoi ? lors du transfert de votre site vers le serveur de l’hébergeur, il sera beaucoup plus rapide, s’il n’y a que des images servant au site, de recopier directement le sous-répertoire « images ». Il est hors de question de placer vos maquettes (.PSD en général) sur le serveur, au su et au vu de tous. Donc, si ces maquettes sont dans le répertoire « images », il va vous falloir faire du tri avant de procéder au transfert des contenus. Idem pour les mises à jour du site : pensez que le sous-répertoire « images » sera amené à être souvent modifié.
3 Faites du code « propre », c’est-à-dire respectant la syntaxe et les règles de programmation, et annoté (avec des commentaires pour éclairer certains points précis du développement). Non seulement cela facilite le travail de débogage mais, en plus, cela améliore le référencement.
3 Faites du code léger en limitant l’emploi des tableaux aux données tabulaires qui les nécessitent (et non pour faire de la pseudo-mise en page).
@ 19
Expression Web
3 Séparez le contenu du style, en confiant la gestion des styles aux feuilles de styles CSS2.
3 Pensez aux règles d’accessibilité aux handicapés (et en plus, c’est bon pour le référencement).
3 Ne bouleversez pas les règles de lecture et d’ergonomie simplement pour vous faire remarquer. Vous risquez surtout de faire fuir !
3 Testez votre site sur plusieurs navigateurs : Internet Explorer v6 et v7, Firefox, Opéra et Safari.
@ 20
2
Convertir un site FrontPage OBJECTIF Si vous lisez ce chapitre, c’est que vous êtes désormais conscient des avantages d’Expression Web dans le domaine du développement de sites. Après 10 ans de présence, FrontPage ne correspond plus aujourd’hui aux attentes des développeurs et des concepteurs web, car trop éloigné des standards du Web et des règles définies par le W3C. En fait, FrontPage n’est pas remplacé dans la gamme de produits de Microsoft par un mais par deux produits : – Expression Web pour répondre à 90 % des besoins de création de site, qu’ils soient statiques ou dynamiques. – Microsoft SharePoint Designer 2007, pour les concepteurs travaillant sous la plate-forme Microsoft SharePoint®. Par ailleurs, rien ne vous empêche de garder FrontPage installé sur votre poste, en même temps qu’Expression Web, le temps d’effectuer les transformations de vos sites. Ce chapitre passe en revue la compatibilité des pages créées sous FrontPage et reprises sous Expression Web, les éléments ou fonctionnalités de FrontPage qui ont disparu et les solutions pour les remplacer sous Expression Web.
@ 21
Expression Web
•••
Différences entre FrontPage et Expression Web
Ce qui n’existe plus… Les thèmes et bordures Datant des premières versions de FrontPage, ces mécanismes permettaient d’appliquer à une ou plusieurs pages un style prédéfini. Très pratiques sans doute, mais devenus totalement obsolètes, et surtout faisant appel à du code « propriétaire » c’est-à-dire du code avec une syntaxe propre à FrontPage. Les barres de liens Il existait trois types de barres de liens :
3 une assujettie à la structure de navigation ; 3 une avec les deux liens « Suivant » et « Précédent » ; 3 et une avec des liens personnalisables. Ces trois types de barres utilisaient les extensions FrontPage Server. Par ailleurs, l’ajout de nouveaux liens se faisait par l’intermédiaire de la « vue Navigation » qui n’existe plus dans Expression Web. Donc, sous Expression Web, s’il est toujours possible de travailler sur des pages comportant des barres de menus, il est par contre impossible de rajouter de nouveaux liens, puisqu’on ne dispose plus de cette fameuse « Vue Navigation ». Cependant, sous Expression Web, il est très facile de mettre en place ces barres de menus : non plus avec une technologie propriétaire faisant appel à des ressources sur les serveurs, mais grâce à l’emploi des feuilles de style (les CSS). C’est léger, faisant partie des standards, conseillé par le W3C et, en plus, ce type de menus géré en CSS facilite le référencement.
Les composants web FrontPage Nécessitant de nombreuses lignes de code, les composants web, aussi appelés webbots, étaient donc lourds et entraînaient des ralentissements dans le chargement des pages. Autre conséquence, les modifications ou personnalisations ultérieures étaient pénalisées. Disparus dans Expression Web, ils peuvent être, comme nous le verrons dans ce chapitre, facilement remplacés, notamment par les services web, qui sont devenus d’un usage courant pour les développeurs. Néanmoins, vos sites comportant des composants web créés sous FrontPage pourront toujours être chargés dans Expression Web, mais sans aucune possibilité de modification sur ces composants web et, à condition que les extensions nécessaires soient toujours disponibles sur le serveur.
@ 22
Chapitre 2. Convertir un site FrontPage
FrontPage Server Extensions Les composants web avaient besoin d’extensions FrontPage Server installées sur les serveurs. Déjà, la version FrontPage 2003 ne prend plus en charge que les composants web compatibles avec les extensions FrontPage 2002 Server. Avec Expression Web, plus besoin de FrontPage Server.
Ce qui existe toujours… Les interfaces Remarquez la grande similitude entre les deux interfaces, avec notamment les trois modes de visualisation des pages web en construction, qui restent identiques :
3 Création. 3 Fractionné. 3 Code.
Fig. 2.1 L’interface logicielle de FrontPage 2003
@ 23
Expression Web
Fig. 2.2 L’interface logicielle d’Expression Web
Ce qu’il y a en plus…
3 Plus de fonctionnalités. 3 Gestion des feuilles de style CSS. 3 Respect des standards. 3 Qualité du code généré. 3 Poids du code généré. 3 Pérennité du code. 3 Facilité de mise à jour. 3 Portabilité du code. 3 Gestion des modèles web dynamiques et des pages maître ASP.NET. 3 Analyse des paramètres d’accessibilité des sites. 3 Prise en charge de langages de développement professionnel, permettant la création et la gestion de sites dynamiques tels que le langage ASP.NET dans la version 1 d’Expression Web, et également du langage open source, PHP dans la version 2.
3 Plate-forme commune de réalisation entre développeurs Microsoft et web designers. Ainsi, pour toutes ces raisons, il semble très nettement préférable d’utiliser, en 2008, Expression Web plutôt que FrontPage 2003, pour créer un site.
@ 24
Chapitre 2. Convertir un site FrontPage
•••
Compatibilité entre FrontPage et Expression Web
Compatibilité et conséquences Mais que se passe-t-il pour les sites déjà créés sous FrontPage, est-il possible de les reprendre sous Expression Web, de modifier leur code, d’y apporter des mises à jour ou de rajouter des éléments ? En fait, tout dépend des technologies de code utilisées pour la création des pages du site :
3 Si le code des pages (langages) est composé uniquement d’HTML, de code CSS ou de code JavaScript (voire de PHP ou d’ASP.NET dans le cas de sites dynamiques) et que vous n’avez pas employé de composants web : pas de soucis. Ces langages sont les standards du marché. Donc, l’intégralité des pages du site pourra être reprise, modifiée, mise à jour ou se voir adjoindre de nouvelles pages ou de nouveaux contenus. Notez que si vous avez placé non pas des composants web mais des « Comportements », pas de soucis non plus puisque dans la plupart des cas les « Comportements » sont le résultat de fonctions JavaScript, langage et méthodologie tout à fait acceptés par Expression Web, et qui continuent à être couramment employés. Astuce : pour vérifier qu’une page ne contient pas de composant web : il suffit de lancer un « chercher/remplacer » (Ctrl + F) sur le terme : « webbot », car ce terme est placé en début du code des composants web.
3 Par contre, si vous avez placé des composants web, le problème est différent : • Primo : vos pages pourront toujours être chargées dans Expression ; • Secundo : des modifications pourront être apportées à certains composants web
présents dans les pages mais pas à tous, comme nous le verrons dans les paragraphes suivants. Mais dans tous les cas, vous continuerez à avoir besoin des extensions FrontPage Server, qui doivent être placées côté serveur. • Tertio : il vous sera désormais impossible, en étant sous Expression Web, de rajou-
ter de nouveaux composants web.
Évolution d’un site En résumé : si vous souhaitez pouvoir faire évoluer votre site dans les mois et les années futures, alors profitez de l’occasion qui vous est donnée au cours de cette migration de FrontPage vers Expression Web, pour revoir sérieusement le code de vos pages, voire le réécrire, bref offrir à votre site un grand « nettoyage de printemps ».
@ 25
Expression Web
Voyons les avantages que ce grand nettoyage pourrait procurer à votre site :
3 Faire disparaître toute trace des composants web qui, comme nous l’avons déjà dit : • utilisent du code « propriétaire » et n’offrent donc pas tous les gages de compa-
tibilité avec les divers navigateurs ; • alourdissent le code, ce qui a pour effet de ralentir le chargement des pages ; • pénalisent les mises à jour en limitant leurs champs d’action ; • sont considérés comme hors standards par les instances mondiales du Web, le
W3C notamment ; • sont amenés à plus ou moins long terme à disparaître et à ne plus bénéficier de
support technique de la part de Microsoft ; • nécessitent de disposer des extensions de Microsoft FrontPage Server côté ser-
veur.
3 Mise à niveau des méthodologies de programmation : • suppression de l’utilisation des tableaux pour faire des mises en pages ou mises
en style, au profit de l’emploi de feuilles de style CSS2 ; • allègement du code par des méthodes à base de CSS2, comme pour les roll-over
par exemple ; • suppression de la technologie avec des frames (qui empêchent le référencement) ; • profitez avec Expression Web de la mise en commun des plates-formes de déve-
loppement, pour les sites utilisant les technologies Microsoft, ASP.NET et Dot.Net, en utilisant par exemple les contrôles ASP.NET accessibles directement dans l’interface de travail d’Expression Web ;
3 Mise à niveau de l’ergonomie de navigation. Profitez-en pour revoir le chemin de navigation (si vous disposez par votre hébergeur, ou par les services de Google par exemple, de statistiques de fréquentation de votre site, c’est le moment de les utiliser) : elles vont vous permettre de voir les pages vues ou visitées. À partir de là, posez-vous des questions pour savoir pourquoi certaines pages ne sont pas lues ; est-ce un problème de contenu, un problème de lien cassé, une mauvaise accessibilité de la page ?
3 Mise en place ou mise à niveau des « options d’accessibilité pour les handicapés ». Les systèmes et les logiciels d’aide à la lecture des sites web, notamment pour les handicapés, ont fait en quelques années de réels progrès. Depuis longtemps déjà, les instances du Web prêchent pour que les développeurs intègrent dans leurs méthodologies de programmation les éléments qui permettent cette accessibilité des handicapés aux sites web. Vous découvrirez un excellent dossier sur ce sujet à l’adresse suivante : http://openweb.eu.org/accessibilite/.
3 Mise à niveau des éléments d’optimisation du référencement naturel par les moteurs de recherche.
@ 26
Chapitre 2. Convertir un site FrontPage
•••
Transformer les composants web Sous Expression Web, il est donc toujours possible d’utiliser les composants web (webbots) mais avec certaines restrictions :
3 il n’est plus possible d’ajouter un composant web ; 3 certains n’ont pas d’équivalents dans Expression
Web, il faudra donc trouver un moyen différent si l’on veut continuer à offrir la même fonction ;
3 certains permettent encore de modifier leur action. Pour cela, double-cliquer sur le composant tel qu’il apparaît en mode « Création » ou dans la partie « Création » du mode « Fractionné ». Cependant, n’oubliez pas qu’en laissant des composants actifs dans votre page, vous vous laissez un handicap puisqu’il vous faudra garder les extensions FrontPage Server sur le serveur, avec le risque que dans le futur, Microsoft ne supporte plus ces extensions et donc que les hébergeurs ne les proposent plus. Nous allons maintenant passer en revue tous les composants et sous-composants présents dans FrontPage, et découvrir ce qu’il advient de leurs fonctionnalités propres.
Fig. 2.3 Les différents composants web tels qu’ils apparaissent dans le panneau d’insertion sous FrontPage. Effets dynamiques
@ 27
Expression Web
Texte défilant (remplacé) Cet effet de texte pouvant défiler horizontalement dans la page est géré par la balise propriétaire <marquee>. <marquee class="navtxt">Exemple de Texte défilant
Propriétaire, ce qui veut donc dire que seul Internet Explorer est capable de l’interpréter, puisque non établi par le W3C. Cependant, si vous souhaitez cet effet, vous avez deux solutions viables :
3 créer
l’animation en Flash, quitte à placer le contenu du texte défilant dans un fichier externe texte ou XML, afin de pouvoir actualiser facilement le message ;
3 le faire en HTML avec une fonction JavaScript, qui fait ça très bien. (Je n’évoquerai pas la solution du Gif animé qui, sur ce type d’animation, se révélera catastrophique, et lourde.)
Bouton interactif (conservé) En fait, un bouton interactif est un bouton qui possède un effet roll-over, c’est-à-dire qui est capable de changer d’aspect au survol ou au clic par la souris. FrontPage offre un éventail de modèles de boutons. Une fois sélectionné le bouton de votre choix, il se charge de créer les déclinaisons du bouton pour le mode « over » ou « clic », qui seront utilisés pour donner cet effet roll-over. Expression Web a intégralement repris la fonction, toujours accompagnée de la bibliothèque de boutons. Remarque : l’effet de roll-over ne peut être obtenu, dans ce cas, qu’avec la complicité de code JavaScript embarqué dans la page. Cela ne pose aucun problème dans la majorité des cas, mais sachez que certains internautes désactivent la lecture du code JavaScript dans leur navigateur. Dans ce cas, votre bouton semblera très « endormi ». Il existe une méthode utilisant les CSS pour générer cet effet de roll-over, méthode qui ne présente pas l’inconvénient précité.
Fig. 2.4
@ 28
Appel du composant dans Expression Web
Chapitre 2. Convertir un site FrontPage
Fig. 2.5 Choix du bouton du composant
Recherche Web (disparu) Recherche de mots-clés dans les sites Il n’existe pas d’équivalence dans les fonctionnalités d’Expression Web car, outre le fait qu’Expression Web se doit de respecter les standards, les deux principales sociétés de moteurs de recherche (Google et Microsoft) offrent, gratuitement ou non, la possibilité d’intégrer dans son propre site, un accès direct à leur moteur de recherche. Voici les liens pour installer vous-même ces moteurs de recherche :
3 Live Search (Microsoft) : http://help.live.com/help.aspx?mkt=fr-FR&project=wl_webmasters
3 Google: http://www.google.com/coop/cse/ Recherche sur le texte intégral Sous Front Page, ce composant doit disposer en plus de Windows SharePoint Services. Sous Expression Web, on est dans le même cas que précédemment et c’est donc à vous d’installer un service de recherche.
@ 29
Expression Web
Feuilles de calculs et graphiques (disparu) Feuille de calcul Office – Graphique Office – Tableau croisé dynamique Office Ces trois déclinaisons de ce composant web font appel à un composant Microsoft Office. Hors, d’une part les composants Office ne sont pas considérés comme des objets en HTML et, d’autre part, Expression Web ne fait pas partie de la gamme de produits Office.
3 L’une des solutions les plus rapides et les plus fiables (mais non dynamique) pour faire afficher ce type de document par les navigateurs, en travaillant sous Expression Web, consiste à transformer ceux-ci en documents de type PDF. Ce format PDF, inventé par la compagnie Adobe, est devenu au fil du temps le format standard multi-plate-forme et multisystème d’exploitation, pour pouvoir lire et échanger des documents entre machines et systèmes différents. À ce titre, tous les navigateurs disposent d’un plug-in (l’équivalent d’un petit programme associé, pour effectuer une tâche précise), permettant de lire les documents PDF. Notez cependant, qu’il est de la responsabilité de chaque internaute, d’installer ou non ce plug-in dans son navigateur.
3 Par contre, si la fourniture de documents Office dans vos pages web est primordiale, je vous conseille alors de vous orienter vers les solutions Microsoft prévues à cet effet, telles que SharePoint Designer, SharePoint Server, et Windows SharePoint Services.
Compteur d’accès (disparu) Bien que n’étant plus proposé dans Expression Web, il vous sera toujours possible de modifier ces compteurs mais, par contre, désormais, aucun nouvel ajout de compteur n’est possible.
Fig. 2.6 Insertion dans FrontPage, du composant « Compteur d’accès »
@ 30
Chapitre 2. Convertir un site FrontPage
Cela dit, il faut savoir que ces compteurs de pages sont soumis à une grande imprécision et qu’il est nettement préférable de faire appel :
3 soit à son hébergeur qui, en règle générale, met à disposition de sa clientèle un ou des outils de statistiques de fréquentation du site, plus ou moins élaborés et détaillés ;
3 soit
auprès des moteurs de recherche, tels que Google qui, dans ses outils pour webmasters, peut vous proposer, gracieusement, un rapport hebdomadaire de plusieurs pages, de la fréquentation de votre site.
Galerie d’images (disparu) Comme pour le précédent composant web, il est possible, sous Expression Web, si le composant Galerie d’images est présent dans le site, de modifier celui-ci. Cependant, la lourdeur et la rigidité de son code, alliée au fait qu’il ne répond à aucun standard présent sur le Web, rende l’outil très difficile à manier. Diverses solutions existent pour remplacer avantageusement ce composant, en utilisant du PHP, Dot.Net, JavaScript ou Ajax. Il est également possible, et c’est souvent une très bonne solution, d’intégrer dans son code HTML, un objet Flash, avec alimentation dynamique des contenus par du code XML.
Contenu inclus Substitution (disparu)
Fig. 2.7 Les différentes possibilités de « Substitution »
Ce composant fait apparaître, de manière dynamique, l’auteur, une description, l’URL de la page et d’autres éléments propres à la page en cours. Aucun de ces sous-composants n’a d’équivalent dans Expression Web. Le fait est qu’ils n’ont pas non plus une utilité extraordinaire et ne sont pas d’un emploi très courant. Par ailleurs, il est toujours possible, dans la plupart des cas, de remplacer ces sous-composants par une programmation classique de type PHP ou ASP.NET.
Page (remplacé) Ce composant permet de recopier le code d’une autre page entière dans une page existante. Il ne fait pas appel aux extensions FrontPage Server.
@ 31
Expression Web
Cependant, si vous souhaitez réaliser la même chose sous Expression Web, il existe une fonctionnalité très pratique : « Ajout d’extrait de Code » qui permet, en mode Code, d’insérer une ou plusieurs lignes de code, que l’on aura sauvegardées précédemment. Pour inclure un nouvel extrait de code :
3 allez dans « Outils>Option de l’Editeur de Page>Extraits de Code » ; 3 puis choisissez « Ajouter » et insérez votre fragment de code. Pour rappeler ce code à l’endroit souhaité, il suffit juste, en mode « Code », de placer le curseur à l’endroit où l’on désire insérer le code, puis à faire : Ctrl + Entrée. Cela provoque l’ouverture d’une petite fenêtre vous permettant de choisir le code désiré.
Page basée sur la planification (supprimé) Ce composant est en quelque sorte une variante du précédent puisqu’il permet de déclencher l’apparition d’une page à un moment donné. Il n’existe pas dans Expression Web de fonction équivalente. Image basée sur la planification (supprimé) Ce composant est dans le même esprit que le précédent, en autorisant l’apparition d’une image à un moment donné. Il n’existe pas dans Expression Web de fonction équivalente. Bannière de page (supprimé) Attention, il ne s’agit pas de créer une bannière publicité, mais simplement :
3 soit de créer une image à partir d’un court texte au choix ; 3 soit de créer un contenu texte à partir de même texte court. Ce composant n’a aucun intérêt et vous pourrez aisément le remplacer dans Expression Web, soit en insérant votre texte entre des balises
ou
, soit en le composant sous forme d’image avec un logiciel de création graphique puis en l’insérant entre des balises ou en le plaçant sous forme d’image de fond dans une CSS.
Barre de liens (disparu) FrontPage propose trois sous-composants pour l’insertion de barres de liens.
Barre de liens personnalisés (disparu) Barre de liens « Précédent » et « Suivant » (disparu) Barre basée sur la structure de navigation (disparu) Les trois composants utilisent les extensions FrontPage Server, mais il est bien sûr toujours possible de les modifier. Néanmoins, leur modification devient difficile et surtout il ne vous sera plus possible d’ajouter de nouveaux liens, car vous ne disposez plus du mode « Navigation » sous Expression Web. Le mieux est donc de remplacer ces composants, par leur équivalence en CSS.
@ 32
Chapitre 2. Convertir un site FrontPage
Fig. 2.8 Les différentes barres de liens disponibles grâce aux composants web
Table des matières (disparu) Le composant Table des matières génère soit une carte du site, soit une liste des pages en fonction des critères assignés. Comme précédemment, s’il est possible de modifier ces Composants, en revanche, vous ne pourrez pas créer de nouvelles Table des Matières. Comme il n’y a aucune fonctionnalité dans Expression Web remplaçant ce composant, vous devrez le refaire de manière manuelle. Je ne peux d’ailleurs que vous encourager à faire une page « Plan du Site » car, outre le fait qu’elle permet au visiteur de pouvoir accéder directement à la page de son choix, cette page « Carte du Site » revêt une grande importance auprès des robots des moteurs de recherche, car ils y trouvent de nombreux paramètres dont ils sont friands et qui leur permettront ensuite de mieux référencer les sites.
Liste Top 10 (disparu) Que ce soit pour l’affichage :
3 des dix pages les plus visitées du site ; 3 des dix principaux domaines de référence ; 3 des dix URL de référence ; 3 des dix chaînes utilisées par les visiteurs dans les moteurs de recherche ; 3 des dix visiteurs qui ont le plus fréquenté le site ;
@ 33
Expression Web
3 des dix systèmes d’exploitation (!!!!) les plus populairement utilisés ; 3 ou enfin des dix navigateurs les plus couramment utilisés pour visualiser le site. Vous obtiendrez ces renseignements par les services de statistiques de votre hébergeur, ou par les services de Microsoft avec Live Search ou Google (Google Analytics) par exemple. Ce composant nécessitait les extensions FrontPage Server ou SharePoint Services.
Fig. 2.9 Les différentes possibilités du composant web « Top 10 » dans FrontPage
Affichage de liste (disparu) Le composant Affichage de liste nécessitait SharePoint Services.
Affichage Bibliothèque de documents (disparu) Ce composant nécessite l’enregistrement de la page sur un serveur web utilisant SharePoint Services de Microsoft.
Mappage MSN (disparu) Ce composant insère et gère une carte à l’emplacement que vous désirez dans votre page web. Il existe désormais des services dédiés à cette tâche et que vous pouvez mettre en œuvre au sein de votre page.
@ 34
Chapitre 2. Convertir un site FrontPage
Composants MSN (disparu) Les composants MSN insèrent un formulaire de recherche et/ou la cotation d’une action sur la page de votre choix. Avec l’avènement des fils RSS, il est assez facile, désormais, d’intégrer ce fil RSS au sein de votre page.
Composants MSNBC (disparu) Ce type de composant, les Web MSNBC, affiche des liens vers des portails d’informations et financiers gérés par MSNBC. Pour garder un contact permanent, utilisez un flux RSS.
Contrôles avancés L’option Contrôles avancés permet d’intégrer divers types d’objets comme des applets Java, des contrôles ActiveX, des animations de type Flash et d’autres objets.
Fig. 2.10 Les différentes possibilités du composant web « Top 10 » dans FrontPage
Insertion d’objets de type Flash (Adobe System) (code conservé) En réalité, même si sous FrontPage cet item est classé dans les composants web, il n’en n’est pas un. En effet, pour intégrer l’objet Flash, il fait appel à la balise