Les CSS : la palette des CSS

Dans cette formation, nous allons voir la manière dont Dreamweaver appréhende la création d'un site web ainsi que les différents outils qu'il nous propose. L'idée de cette formation est de positionner Dreamweaver dans l'environnement au sein duquel il évolue. Pour ce faire, nous allons mettre en place un projet de site web dans le but d'utiliser tous les langages et fonctionnalités de Dreamweaver.

Dreamweaver est un outil qui nous permet de gérer et construire l'ensemble de nos sites web. Nous allons voir que les sites web doivent, eux, s'appuyer sur l'utilisation de standards afin de garantir leur pérennité et leur portabilité.

Les pages web sont constituées de trois langages de base : HTML, CSS, et JavaScript. Dans cette vidéo, nous allons étudier la manière dont ils s'imbriquent entre eux et quels sont leurs rôles.

Bien que cela ne soit pas nécessaire, il peut être intéressant de s'entourer de divers outils externes afin de compléter ou, tout du moins, de renforcer Dreamweaver. Par contre, pour évaluer le résultat de nos pages, il est nécessaire d'installer les principaux navigateurs présents sur la toile.

Nous allons, au cours de cette vidéo, doter les deux navigateurs principaux (Internet Explorer et Firefox) d'outils et d'extensions qui nous aideront à mieux travailler sur les tests à apporter à nos pages web.

Jusqu'à présent, nous avons configuré un espace de travail pour développer et tester la partie statique de nos sites web. Nous allons maintenant nous intéresser à la partie dynamique des relations client/serveur en mettant en place un environnement sous AMP (Apache MySQL PHP).

Afin d'éviter l'utilisation et la fragmentation trop rapide du disque racine (C:), nous allons voir comment créer un alias sous XAMPP et donc, comment décentraliser nos sites web sur divers supports (clé USB, disque externe, etc.).

Au cours de cette étape, nous allons aborder la partie distante de nos sites web. Commençons d'abord par explorer la location et la réservation d'un nom de domaine.

Le nom de domaine réservé, il ne nous reste plus qu'à trouver un local sur la toile, pour héberger nos sites. C'est ce que nous allons apprendre à faire dans cette vidéo. Nous en profiterons également pour aborder le principe de mise en relation entre le nom de domaine et l'espace web.

Bien qu'un tel chapitre nécessiterait une formation à part entière, il est bon de rappeler l'existence ainsi que l'importance de la prise en compte de l'accessibilité lors de la création de nos sites web.

Un site web a besoin d'exister auprès des divers moteurs de recherche, et surtout d'obtenir un bon positionnement. Encore une fois, bien que ce chapitre nécessiterait une formation entière, nous allons aborder quelques notions sur le référencement.

Fidèle à l'ergonomie de la suite CS, Dreamweaver propose une interface et un espace de travail très confortables et souples. Dans cette séquence, nous allons en découvrir les principaux axes.

En regardant cette vidéo, vous allez vous familiariser avec la manipulation des palettes, des panneaux et des autres onglets. Nous allons explorer l'ensemble des menus contextuels et mettre en place un espace de travail personnalisé.

Afin de travailler sur la gestion d'un site avec Dreamweaver, il faut toujours commencer par paramétrer la configuration du site. Dreamweaver CS5 propose une nouvelle approche que nous allons découvrir en partie dans cette vidéo.

Lors de la création d'un document, Dreamweaver CS5 nous propose le choix entre diverses versions du HTML, y compris le tout nouveau HTML5.

Souvent confondues avec la configuration du site, les principales propriétés de la boîte des préférences générales de Dreamweaver sont très importantes. Nous allons les explorer dans cette vidéo.

Les sites européens rencontrent souvent des problèmes d'encodage de caractères à cause des caractères accentués. Nous allons faire le tour des diverses solutions d'encodage qu'offre Dreamweaver.

Afin de pouvoir tester plus de navigateurs cible, Dreamweaver est capable de configurer tout un ensemble de navigateurs cible et de paramétrer par défaut un navigateur principal et un navigateur secondaire.

Imaginons que Dreamweaver ne propose pas un outil ou une particularité dont vous avez besoin. Vous pouvez alors faire un tour du côté d'Adobe.com/exchange où un grand nombre d'extensions qui permettent d'étendre les capacités de Dreamweaver sont disponibles. Dans cette vidéo, nous allons, par exemple, installer un générateur de faux texte.

Nous allons regarder de plus près les divers marqueurs de texte. Ils permettent de définir un certain degré de granularité à l'information qu'ils véhiculent. Une bonne connaissance des diverses balises permet de cibler au mieux le contenu et d'éviter de tomber dans une classite aigüe.

Dans cette vidéo, nous allons explorer les diverses possibilités de liaison que propose HTML notamment au niveau des ancres et des liens (liens hypertexte, de messagerie, vers des fichiers, etc.).

Il existe d'autres balises HTML importantes : les éléments de liste. Il y a les listes ordonnées, les listes désordonnées et les listes de définitions. Pour chaque liste, nous allons explorer sa mise en place, son intérêt et son utilisation.

Avant d'utiliser des images, il peut être intéressant de passer par une phase d'optimisation. Dans cette vidéo, nous allons voir comment préparer les images en insistant sur les points à ne pas négliger. Ensuite, nous allons intégrer les images au sein de nos pages.

Bien que très controversés pour la mise en pages du contenu, les tableaux restent un élément HTML incontournable pour structurer et formater les données tabulées. Nous verrons l'ensemble des balises que nous avons sous la main afin de mieux tagger nos données.

Eléments de division en bloc ou en ligne, les balises <div> et <span> restent de précieux alliés dont il ne faut cependant pas abuser. En attendant leur remplacement dans certains cas via l'usage du HTML 5, ces balises, accompagnées de classes ou ID restent incontournables pour structurer plus finement nos contenus.

Afin d'identifier et donner un sens plus précis au contenu, il peut être stratégique d'utiliser un nom de classe ou un ID significatif. A ce sujet, pourquoi ne pas avoir recours à des standards comme les micro-formats ? A l'aide d'un exemple, nous verrons le réel intérêt de ces choix.

Dans cette vidéo, nous allons voir le principe et l'utilisation des feuilles de style. Il existe diverses façons de les intégrer au contenu de nos pages : soit de manière interne, soit de manière externe. Nous allons explorer les avantages et les inconvénients de chaque méthode.

Bien que les CSS soient de puissants outils, ils ne sont pas totalement bien utilisés s'ils sont trompés par les paramètres par défaut que porte tout navigateur. Il nous est donc préférable d'avoir recours à une feuille de réinitialisation par défaut afin de partir sur des bases saines et contrôlées.

Deux des principales complexités liées à l'utilisation des CSS concernent le CSS-P ou encore le positionnement par CSS. Nous allons donc revoir ensemble les principales méthodes qui nous permettent de positionner les éléments de la page.

Dreamweaver nous propose une interface de création qui, couplée aux éléments à positionnement absolu, devient un véritable outil d'aide à la création basé sur les CSS-P. Maintenant la question est : mise en pages en tableau ou en CSS ?

Alternative à la création depuis des modèles, la mise en pages en mode grille permet d'apporter une solution qui a le mérite d'être simple, rapide et efficace. Cette mise en pages est parfois controversée de par sa facilité à créer des interfaces « à la mode blog » et donne donc l'impression de limiter la créativité et l'ouverture vers des interfaces plus libres.

Lors de la création d'un projet, il faut tout d'abord réfléchir à l'architecture des informations à mettre en place. De là découlera l'ensemble de la structure du site : arborescence, labels, mots et expressions-clés, vocabulaire contrôlé ou encore structure de pages.

Dans cette vidéo, nous allons définir les divers objectifs de réalisation que le fil conducteur devra couvrir. Entre front et back office, entre méthodologie et organisation, entre technologies et fonctionnalités de Dreamweaver, nous allons explorer les divers aspects abordés dans le chapitre de création et réalisation.

La maquette graphique est moins figée qu'une interface au pixel près. Nous allons désormais définir : une charte graphique, une iconographie, des choix de couleurs et de typographie qui devraient nous permettre de réaliser une interface liquide et adaptable. L'idée restant, avant tout, de garder une séparation entre contenu et contenant et pouvant s'adapter à toute fenêtre de navigateur.

Nous allons voir succinctement les diverses phases et points-clés de notre projet. Nous avancerons de manière évolutive et décortiquerons au fur et à mesure l'étroite relation entre technologies et fonctionnalités de l'outil. Nous nous pencherons également sur l'adaptatibilité du code et l'évolution des besoins du site.

Commençons d'abord par définir un espace de site différent de celui utilisé précédemment pour les tests. A terme, notre objectif est de pouvoir développer la mise en place d'un back office, nous allons donc faire appel à la technologie PHP/MySQL.

Voyons ici la création du modèle originel à partir d'un des modèles vierges que propose Dreamweaver. Dans un premier temps, nous allons le coupler à une feuille de réinitialisation, puis, profitons-en pour explorer sa structure, son articulation et son utilisation. Commençons à voiler les éléments de modèle.

Dans cette étape, nous allons mettre en place les éléments principaux de la page comme le header, le footer ainsi que tous les éléments de structure de la page. Nous mettrons également en place les zones modifiables afin de permettre la déclinaison de pages enfants.

Avant d'aller plus loin, nous allons créer dans cette vidéo diverses pages afin de commencer à utiliser notre modèle. Nous utiliserons des importations Word, Excel, en simulant le type de document que nos clients nous remettent régulièrement.

Afin de commencer à personnaliser notre travail, nous allons dresser les premières ébauches de la mise en forme du site au travers de feuilles de style CSS. Il est vrai que ce genre de travail peut être réparti tout du long de la création et de la mise en place du site.

Continuons à décliner le visuel en nous attardant cette fois sur le contenu et la barre de navigation secondaire. Cette approche par étape permet d'explorer les outils que Dreamweaver met à notre disposition pour nous aider dans notre tâche créative en nous évitant de devoir ouvrir le code à chaque ligne.

Pour clore ce chapitre, nous allons nous pencher sur l'aspect visuel de ce projet. Regardons de plus près la mise en forme du menu principal et le footer. L'avantage de travailler en séparant le contenu de la mise en forme est qu'à tout moment nous pouvons intervenir sur la mise en forme.

Afin de pouvoir travailler de manière plus autonome, il est intéressant de mettre en place une page HTML de référence. Cette page doit être composée de l'ensemble des balises et structures que pourront contenir les pages du site. La création d'une page HTML de référence permet, depuis un point central, de travailler sur l'intégralité de la mise en pages du contenu.

Il faut bien faire la distinction entre les images de contenu et les images d'illustration. Les images de contenu vont faire partie intégrante de la structure de la page, alors que les images d'illustration, beaucoup plus volatiles, seront liées aux feuilles de style CSS.

Nous allons voir comment utiliser des feuilles de style CSS afin de gérer les principales situations et les principaux contextes de mises en forme des images de contenu ainsi que des images d'illustration. Nous en profiterons pour aborder la gestion des fonds de page ou de bannière grâce à l'utilisation de motifs répétitifs.

Dans cette vidéo, nous allons voir comment marier des images de contenu et des images d'illustration. Pour ce faire, nous allons créer une galerie d'images sous forme de planche contact ou de table lumineuse.

Un autre aspect de l'utilisation d'images reste l'utilisation d'images interactives ou d'images de survol. Nous allons voir que Dreamweaver propose trois alternatives pour cette manipulation. Commençons par voir comment faire avec un outil intégré qui permet de tout gérer au travers d'une seule boîte de dialogue.

Autre alternative... le JavaScript. Tout commence par la mise en place d'une image de contenu puis, depuis l'inspecteur de comportements, il est très simple d'ajouter, contrôler et affiner avec souplesse la mise en place d'un élément de survol. Nous aborderons plus longuement les comportements dans une autre étape.

La troisième possibilité est l'utilisation des CSS. Cela permet de faire complètement abstraction des images de contenu et offre plus de possibilités d'adaptation, d'évolution et de maintenance.

Dreamweaver communique étroitement avec son comparse de longue date, Fireworks. Nous allons explorer les possibilités d'échange entre les deux logiciels et essayer d'en comprendre les subtilités.

Photoshop n'est pas laissé-pour-compte et au lieu d'entrer en conflit avec le couple Fireworks/Dreamweaver, ce pilier de la retouche photographique et de la composition d'images vient admirablement compléter les manques et apporte son lot de possibilités de maintenance et de suivi quant à la gestion des images issues du format .PSD.

Dreamweaver permet également de gérer beaucoup de tâches directement depuis son interface et ce, sans avoir systématiquement à faire appel à ses deux compagnons de retouches graphiques. Dans cette vidéo, nous allons explorer les diverses possibilités auxquelles nous avons accès depuis l'inspecteur de propriétés.

Véritable outil de navigation visuelle, les cartes image peuvent parfois être un plus dans certaines situations. Nous allons explorer une des possibilités qu'offre Dreamweaver pour les gérer et voir quels peuvent être les avantages et les inconvénients.

Envie d'aller plus loin dans les images interactives ? Fireworks vient compléter admirablement les manques de l'interface de Dreamweaver. De plus, grâce à la relation en RoundTrip HTML qu'il y a entre les deux logiciels, développer et maintenir une telle fonctionnalité est un jeu d'enfant.

L'utilisation d'animations Flash dans une page HTML a été continuellement améliorée depuis plusieurs versions de Dreamweaver. Aujourd'hui, bien que cela puisse sembler complètement transparent, c'est une véritable usine à gaz qui s'installe avec un simple clic de souris. Nous allons regarder ensemble les mécaniques et surtout les principales options de cette fonctionnalité.

Aujourd'hui, utiliser de la vidéo sur le web reste une affaire de format. Le .FLV, le format vidéo utilisé par Flash, a su s'imposer sur le marché. De Dailymotion à YouTube, ce format est devenu incontournable ! Nous allons voir comment le générer et comment l'utiliser en toute transparence au sein de nos pages HTML.

Si, au sein de nos pages, nous utilisons des fichiers liés à des animations Flash, et que ces fichiers font référence à des chemins relatifs, ils feront forcément référence au chemin d'accès de la page HTML qui héberge l'animation Flash et non plus au fichier Flash en lui-même.

Afin de pouvoir décliner diverses versions du modèle principal, nous allons avoir recours à des modèles imbriqués. Profitons-en, à l'aide de la charte iconographique, pour mettre en place des feuilles de style CSS adaptées à chacun. Ces modèles liés au premier recevront toutes les modifications effectuées en amont.

Pour mettre en application les jeux de l'imbrication, commençons par remplir quelques pages issues de ces nouveaux modèles. Pensons également à lier l'ensemble des menus afin de garder une liaison de navigation entre les divers contenus mis en place.

Apportons une modification au modèle principal de base et suivons la propagation sur : la mise à jour entre les modèles imbriqués, les pages de ces modèles et les pages directement issues du premier modèle. Nous commençons à pouvoir apprécier la force de cette logique qui nous permet tout en vacant dans la mise en place de revenir en arrière sans être lié.

Nous avons exploré des modèles et utilisé de simples régions modifiables. Dans les prochaines vidéos, nous allons découvrir d'autres outils plus ciblés qui vont nous permettre d'affiner l'utilisation de nos modèles. Commençons par explorer les modèles à régions ou à tableaux répétés.

Qu'elles soient modifiables ou non, il peut être parfois très utile de mettre en place des régions facultatives. Nous allons explorer leur mode de fonctionnement, voir comment les affecter depuis les instances de modèle et comprendre le principe des paramètres de modèle.

Autres composants de l'optimisation de notre architecture, les éléments de librairie sont des briques indispensables qui vont nous permettre de pouvoir affiner le contenu récurrent de nos pages. Couplés à des feuilles de style diverses, ils pourront alors très simplement s'intégrer dans nos contenus sans donner l'impression d'être répétitifs, bien au contraire !

Afin de gérer et centraliser l'ensemble des éléments que nous avons vu jusqu'ici (les modèles, les éléments de librairie, les images, les animations Flash ou multimédia, les couleurs, les liens, etc.), une palette est nécessaire. Dreamweaver répond à cette attente en nous proposant sa fameuse palette des actifs.

Avant d'aller plus loin dans l'interaction et les éléments interactifs, abordons en douceur un des langages des plus répandus dans les interfaces HTML : le JavaScript. Nous n'allons pas attaquer celui-ci par la face nord, mais simplement le démystifier et en comprendre son utilisation et son implémentation au sein de nos pages afin de pouvoir mieux utiliser ensuite les librairies que nous propose Dreamweaver.

La palette des comportements constitue la première solution d'implémentation du JavaScript au sein de nos pages. Nous l'avions déjà utilisée lors d'une première utilisation au cours d'une étape précédente. Cette fois-ci, nous allons essayer d'aller plus loin et d'en comprendre la plupart des subtilités.

Au cours de cette étape, nous allons faire un rapide tour des diverses librairies disponibles dans l'univers de l'Open Source. Nous allons, plus particulièrement, nous pencher sur la libraire SPRY, son utilisation et son implémentation au sein de l'interface de Dreamweaver.

Que la barre de menus soit verticale ou horizontale, son utilisation est d'une simplicité et d'une polyvalence sans pareil. Nous allons, au cours de ces tests, explorer les modifications depuis le code, depuis le mode aperçu ou depuis l'inspecteur des propriétés et voir avec quelle souplesse il est possible de passer de l'une à l'autre.

Autres éléments incontournables de nos interfaces web, les menus accordéons permettent de jouer avec l'affichage et le masquage de certains contenus. Nous définirons diverses manières d'intervenir sur les CSS qui mettent en forme les menus accordéons.

Nous allons pouvoir installer une barre d'onglets dans l'une de nos pages et en explorer les avantages et les inconvénients. Dans une prochaine étape, nous verrons qu'il est possible de coupler divers aspects d'un formulaire avec un tel outil d'interface.

Dans cette vidéo, nous aborderons les deux derniers éléments de l'interface utilisateur : les panneaux réductibles et les info-bulles qui, couplés avec des CSS, peuvent être de précieux outils de compléments d'informations pour les visiteurs de nos sites.

Au cours des dernières étapes, nous avons exploré l'ensemble des éléments d'interface SPRY ou du moins leur utilisation depuis l'interface de création de Dreamweaver. Nous allons voir qu'il n'est pas si compliqué d'ouvrir le capot sans plonger dans le code et qu'il est possible d'affiner leur utilisation juste avec une ou deux instructions.

Lorsque nous avons besoin de présenter des interfaces dynamiques de type master/détails, nous avons souvent recours à des interfaçages client/serveur. Nous allons voir qu'une fois encore grâce à la librairie SPRY, il est possible, et ce de manière très simple, d'intégrer ce genre de mécanisme à partir d'un simple tableau de données formaté en HTML.

Dans le but de pouvoir mieux appréhender une technologie, il est toujours bon de regarder de près de quoi elle se compose et comment elle s'intègre au sein de notre environnement de travail et de nos documents. Bien que nous n'ayons pas une seule ligne de code à écrire pour le reste du chapitre, nous allons faire nos premiers pas en PHP.

Compagnon de route du PHP, le serveur de base de données MySQL et son inséparable interface d'administration PHP MyAdmin sont, au fil du temps, devenus aussi simple d'utilisation que peut l'être Dreamweaver. Nous allons faire le tour de cet ensemble et en comprendre son fonctionnement, son vocabulaire et la manière dont il peut nous être utile.

Avant de pouvoir connecter le système, il faut commencer par créer une base de données, définir ses tables et avoir au moins un ou deux enregistrements. Nous allons donc mettre en place le système d'information de notre projet et comprendre le typage de chaque donnée. Nous en profiterons pour explorer rapidement une manière d'importer ou d'exporter ces datas.

Nous voici de retour dans Dreamweaver ! Nous allons étudier la mécanique de connexion avec la base de données, et voir à quel point, et ce grâce au serveur installé précédemment, Dreamweaver est capable de dialoguer en toute transparence avec la base de données.

La mise en place d'un jeu d'enregistrement constitue la deuxième étape de l'extraction de données du système d'information. Bien que pouvant être complexes, la définition de la requête, l'envoi, le filtrage, le tri et la présentation des données résultantes sont intégralement absorbés par l'interface ergonomique et intuitive de Dreamweaver. Et il existe encore un onglet Avancé...

Les données dans une page sont renvoyées par le serveur et utilisables directement en faisant un glisser-déposer depuis l'interface en mode création (ou code) de Dreamweaver. Nous allons voir que l'intégration est même poussée au niveau des boîtes de dialogue Windows qui proposent soit un accès aux systèmes de fichiers soit à la source de données.

Les possibilités de Dreamweaver ne s'arrêtent pas là ! Nous pouvons encore améliorer la présentation en ayant recours à des comportements mais à des comportements serveur cette fois. Tous les principaux besoins sont couverts : affichage du nombre d'enregistrements, régions répétées, navigation dans les enregistrements, protection par mot de passe, etc.

Certaines données sont tellement visibles pour nous que nous les interprétons immédiatement : titre de la fenêtre du navigateur, titre mis en gras, éléments mis en forme dans le contenu du texte et des images, etc. Mais voyons ce qu'il en est pour les lecteurs d'écran et les moteurs de recherche.

Regardons de plus près les données propres aux images. Nous utilisons fréquemment les attributs alt et title, mais qu'en est-il des métadonnées ? En explorant Bridge, nous allons voir qu'il est possible d'aller plus loin et d'intégrer à nos images beaucoup d'informations que nous allons pouvoir mettre à contribution pour organiser nos flux de travail.

Dans cette vidéo, nous allons utiliser et révéler une vieille fonctionnalité parfois sous-exploitée dans Dreamweaver. Cependant, bien que nous ne l'utilisions pas, c'est grâce à elle que l'ensemble de nos sites se synchronisent ou encore que Dreamweaver utilise les outils externes pour modifier les images avec les fichiers source : les design notes.

Nous avons vu lors de la prise en main de Dreamweaver que nous pouvions intégrer en toute transparence des documents Word ou Excel. Nous allons aller plus loin en usant de données tabulées. Nous allons nous apercevoir que les mécaniques sont tout autant performantes. Le copier-coller n'est pas en reste non plus !

Si nous utilisons des sources provenant de divers origines logicielles sans y prêter une attention particulière, le code peut devenir très verbeux, voire anti-performant d'un point de vue lisibilité 'humaine' (lisibilité dans le sens accessibilité et lecteur d'écran, et/ou compréhension par les moteurs de recherche). Nous allons donc voir comment y remédier et nettoyer le code en toute simplicité.

Comme nous l'avons fait pour HTML, CSS, JavaScript et PHP, voyons de près comment se compose, s'écrit et s'utilise le XML. Bien que nous ne puissions décrire ce format juste en quelques mots, il regorge de ramifications et la famille des technologies usant de la grammaire XML est très étendue. Sans le savoir, et avec l'aide de Dreamweaver, nous allons pourtant toutes les utiliser... ou presque.

Les feuilles de style XSL sont à XML ce que les CSS sont à HTML. En nous appuyant sur une base HTML, voyons comment Dreamweaver va pouvoir nous aider à transformer des données XML en une page que le navigateur présentera comme toutes les autres pages web de notre site. Convertissons le HTML en XSLT.

Le réceptacle est désormais prêt ! Ajoutons-lui du contenu grâce aux mêmes outils que ceux que nous avions utilisés pour nous connecter à un système d'information. La palette de liaison va s'adapter et cette fois à la place d'une base de données c'est vers un fichier XML qu'elle va pointer. Pour le reste c'est identique, nous allons faire un glisser-déposer des données directement sur la page, ou utiliser des boîtes de dialogue Windows ouvrant sur les sources de données.

Cette fois-ci, les comportements serveur sont remplacés par l'onglet XSLT de la palette d'insertion. Un peu déroutant au départ pour qui n'a pas d'expérience avec du XML, nous allons voir que Dreamweaver nous aide énormément à prendre vite goût à ce genre d'outil et de technologie pour présenter nos données.

Abordons ici les différences et les complexités d'harmonisation entre les différents documents XML rencontrées lors d'un lancement dans les navigateurs. En fait, il existe deux manières d'approcher la transformation XSL (XSLT). Elle peut être soit côté client, soit côté serveur (dans certains cas, la seconde manière est préférable). Néanmoins, quelle que soit la solution retenue, la préparation des fichiers restera identique.

Tout au long de notre création, nous avons testé notre site sur divers navigateurs. Néanmoins, il faut noter qu'à chaque fois nous avions la subjectivité de la version du navigateur installé et de notre système d'exploitation. Qu'en est-il pour les autres plateformes et environnements de lecture ? Nous allons explorer diverses possibilités que nous propose le web.

Hormis la véracité, l'intérêt et la valeur ajoutée aux informations contenues dans nos sites web, un des principaux points négatifs qui ressort des retours utilisateurs concerne les fautes d'orthographe. Si le contenu du site a été rédigé dans Dreamweaver, il est important de lancer une mécanique d'aide à la correction.

Adobe nous propose depuis la version CS5 de Dreamweaver une alternative en ligne qui apporte également son lot de fonctionnalités et d'outils qui sont à la hauteur de nos besoins. Nous en explorerons les principaux attraits dans cette vidéo.

En parallèle des divers outils de contrôle extérieur et en complément des outils de prévisualisation et d'affichage que nous propose Dreamweaver, la version CS5 nous propose un outil de navigation interne assez complet et remarquablement conçu. Cet outil va nous permettre, sans 'sortir' de Dreamweaver, de continuer à suivre, explorer et corriger notre document.

Tout est prêt, notre site peut être mis en ligne. Nous allons voir les réglages de la toute nouvelle boîte de dialogue de gestionnaire de site. Nous en profiterons pour en explorer les diverses facettes et comprendre certains des paramètres que notre hébergeur nous a transmis lors de notre abonnement.

Bien que tout semble prêt, il nous reste encore deux étapes. La première consiste à préparer le site distant car en effet la base de données et son contenu sont pour l'instant toujours installés sur notre serveur local. Nous allons donc devoir transférer et installer tout cela sur le site distant.

La deuxième et dernière étape concerne le nom de domaine. Il est toujours intéressant de séparer gestion de l'hébergement et réservation du nom de domaine. Nous allons voir qu'il est facile d'administrer soi-même ce genre de réglages.

L'Arlésienne est enfin là ! Nous pouvons actionner le bouton de publication. Notre site est en ligne ! Nous allons maintenant le tester dans BrowserLab et demander à certains internautes de venir tester les fonctionnalités du site. Ces internautes nous communiqueront leurs impressions pour que nous puissions optimiser l'utilisabilité de l'ensemble.

Bien que le site soit en ligne, le travail de finition et d'optimisation ne s'arrête pas là... Bien au contraire, il ne fait que commencer ! Nous allons pouvoir dorénavant utiliser tous les outils mis à disposition, qui fonctionnent uniquement en service en ligne, afin de pouvoir valider et certifier les langages et les technologies utilisés. La validation HTML et CSS viendra nous aider à assurer la bonne portabilité du contenu au plus grand nombre.

Que l'on travaille en équipe ou bien de manière sporadique sur les contenus, il est impératif de s'assurer des besoins de synchronisation entre le site distant et le site résidant en local sur nos machines. Nous verrons que Fireworks peut être inclus à la boucle et ce toujours grâce à l'utilisation transparente des design notes.

Le travail collaboratif apporte son lot de souplesse et de confort. Cependant, si manque d'organisation il y a, la maintenance d'un site à distance à plusieurs peut rapidement devenir chaotique. Dreamweaver nous permet d'accéder à diverses technologies pour palier à cela. De plus, depuis maintenant deux versions, nous avons même accès à des outils de versionning venant du monde libre.

Nous allons revenir sur le front et back office pour avoir une bonne compréhension de la différence entre les deux. Ensuite, nous mettrons en place un modèle de page afin de l'appliquer sur l'ensemble des pages de notre interface d'administration. Ajoutons également les pages de listage, d'ajout et de modification de contenu.

Sous forme de révisions, nous allons réitérer l'utilisation et le listage d'un jeu de données permettant de lister l'ensemble des news présentes dans notre système d'information. Cette manipulation nous permettra de doter les news d'un bouton de modification et de suppression.

Avant de pouvoir utiliser les pages d'ajout et de modification de news, nous allons prendre le temps de bien comprendre et de décortiquer les fonctionnements et la gestion des formulaires. Nous explorerons également l'ensemble des balises englobantes et leur mise en relation avec les scripts côté serveur.

Dans cette seconde étape sur les formulaires, nous énumérerons les divers éléments de saisie utilisateur. Entre cases à cocher, éléments de menu, champs de saisie, nous verrons qu'il n'existe que peu de balises pour les distinguer. Elles nous aideront néanmoins grandement pour la gestion de leur affichage.

Encore utile sur cet aspect de nos documents, la librairie SPRY vient nous aider par sa simplicité d'utilisation à gérer tout un ensemble de mécaniques parfois complexes à mettre en place. Elle nous est d'une grande aide pour les validations de contenu saisies par les utilisateurs avant l'envoi des données vers le serveur.

Les formulaires peuvent être peuplés de manière dynamique. Qu'il s'agisse de contenus de champs ou de cases à cocher, de menus déroulants, ou encore de sélections de valeurs dans un menu déroulant, Dreamweaver reste fidèle à sa philosophie de WYSIWYG et est encore à la hauteur de la tâche.

Nous voilà de retour sur notre projet de site. Nous allons mettre en place notre premier formulaire pour envoyer, côté serveur, l'ajout d'une news. Nous en profiterons pour formater l'ensemble du contenu par des feuilles de style CSS. Nous nous occuperons ensuite de la page de retour vers le listage des news pour en contrôler le bon fonctionnement.

Profitons-en justement pour améliorer notre page de liste de news. Dans un premier temps, ajoutons-lui les liens vers les pages de modification, puis vers les pages de suppression. Enfin, complétons l'information par des indications sur la pagination de l'ensemble des résultats retournés. Nous lui apporterons une dernière touche avec le masquage éventuel des éléments inutiles.

A l'aide des étapes précédentes sur l'utilisation des formulaires et de leur remplissage de manière dynamique et de l'ajout de composants SPRY, nous allons mettre en place la page de modification des news. Une petite modification pour l'envoi de paramètres depuis la page de liste des news et un clonage de la page d'ajout feront largement l'affaire.

Les fonctionnalités de suppression peuvent surprendre car la suppression est directe et sans appel. Il va falloir intégrer cette particularité à notre flux de travail et ainsi mettre en place une page de validation intermédiaire. Nous en profiterons pour présenter une alternative sous forme d'extension.

Dreamweaver n'intègre pas la gestion d'envoi de fichiers binaires côté serveur (images, documents PDF, documents Word... ). Pour gérer cela, il faut avoir recours à des extensions tierces. Il est facile d'en trouver sur le site d'exchange et nous verrons pourquoi une telle fonctionnalité ne peut être prise à la légère.

Nous devons protéger l'accès au back office. Il existe pour cela diverses solutions. Une solution est déjà intégrée à Dreamweaver mais elle nécessiterait certainement plus de travail que la gestion du back office en lui-même. Il nous faudrait prendre en considération les comptes utilisateur, la gestion des mots de passe et autres fioritures du genre. Il existe une alternative qui n'est pas sans intérêt : utiliser des fichiers .htaccess sur le serveur Apache.

Notre travail de gestion de données est maintenant terminé. Nous devons cependant penser à mettre en place un flux de travail nous permettant de faire évoluer le système sans pour autant mettre en danger les données qu'il contient. De même, il est nécessaire d'archiver régulièrement les données afin d'en sécuriser la pérennité.

Dans cette vidéo, nous allons rapidement présenter le principe de fonctionnement d'InContext Editing : les diverses étapes qui constituent sa mise en place et son déploiement sur un site existant.

Nous allons maintenant mettre en place des zones depuis Dreamweaver. Tout commence par la définition, depuis Dreamweaver, de zones spécifiques qui seront éditables, modifiables et répétées. Les paramètres et les contraintes sont minimes et permettent d'intervenir directement sur les documents tels que nous les avons conçus au départ. Aucune modification ou adaptation particulière n'est requise.

Une fois les fichiers préparés et mis en place sur le site, nous devons paramétrer l'espace de gestion au sein d'IncontextEditing.com ainsi que les divers comptes utilisateur. Une fois cette formalité et le paramétrage FTP réalisés, il ne nous restera plus qu'à lancer des invitations auprès des auteurs et des éditeurs de contenu.

L'utilisation et l'implémentation d'InContext Editing sont déconcertantes de simplicité d'un point de vue concepteur/intégrateur de site. Il en est de même en ce qui concerne les auteurs et éditeurs. Nous allons jouer le rôle de ces utilisateurs et mettre à jour le contenu des pages concernées depuis un navigateur et un compte utilisateur.

Voici une rapide étape de synthèse afin de rappeler les principaux points de paramétrage de l'interface d'administration du site et des comptes utilisateur.

Premières recherches depuis le site d'Adobe et la déclinaison des sources d'information n'est pas des moindres : adobe.com se décline en Lab, DevNet, tv, help, LiveDocs, etc. Et ces sites ne sont pas passifs ! Il s'agit là de véritables espaces communautaires.

En complément des sites vus précédemment, la liste continue et s'enrichit avec des espaces de blogs et forums en tout genre. La communauté de Dreamweaver est étendue et il est toujours possible de trouver diverses sources d'information.

Et puis, nous ne pouvions pas conclure cette formation sans vous laisser la parole et vous offrir la possibilité d'émettre un souhait pour la prochaine version de Dreamweaver. Vous pouvez également poster une remarque sur une fonctionnalité qui ne serait pas à la hauteur de vos attentes. Le site de whish list (en anglais dans le texte) est là pour ça !