Aller-retour avec Photoshop

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.

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.

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.

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.

Dreamweaver nous offre un outil très avancé pour nous permettre de créer, maintenir et gérer les feuilles de style CSS. Même si nous allons explorer les principales fonctionnalités de cet outil, nous ne pouvons être exhaustifs. Nous couvrirons donc les points nécessaires pour nous permettre de mener à bien le reste du projet.

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.

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.

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.

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é.

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.

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.

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.

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.

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.

Le second format pour représenter une image est le format vectoriel. Basé sur des formules mathématiques de représentation, il offre la possibilité de préserver sa qualité quelle que soit l'échelle à laquelle il est représenté.

Dans cette vidéo, nous allons aborder les différences entre les deux formats bitmap et vectoriel (avantages et inconvénients). Comment se complètent-ils ? Quels sont les outils utilisés généralement par la profession pour leur création ou leur édition ?

Fireworks ne travaille qu'en mode RVB. Quels sont les principaux modes de représentation d'une image rencontrés dans la chaîne graphique ? Nous devons bien comprendre la notion de Gamut surtout lors de communication croisée et d'impression écran.

Où se situe Fireworks par rapport aux autres outils ? En quoi se distingue-t-il des autres solutions logicielles ? Cette vidéo nous permet de voir que Fireworks tire parti de deux formats de représentation de l'image numérique : le vectoriel et sa précision et le bitmap et sa douceur.

Une fois les images travaillées, nous allons devoir les distribuer. Cette étape permet de balayer l'ensemble des formats d'image usuellement rencontrés (avantages et inconvénients).

Palliatif aux formats .JPG et .GIF réunis, le format .PNG existe sous deux formes. Il y a le .PNG d'exportation disponible en 8, 24 et 32 bits de manière aplatie et le .PNG natif enrichi de toutes les informations utilisées par l'application. Nous allons les explorer pour en comprendre le sens.

Fireworks est avant tout un logiciel pour réaliser des prototypes. Dans cette vidéo, nous allons définir les divers aspects de la production : le Wireframe, les prototypes et le Mockup. Ces notions seront revues plus largement au cours du chapitre qui leur est intégralement dédié.

Dans cette vidéo, nous découvrirons le mode de fonctionnement et de répartition de la palette Outils. Nous ferons la distinction entre les éléments liés au vectoriel et ceux liés au mode bitmap. Nous en profiterons pour observer l'empilage de certains des outils.

Pour utiliser des outils vectoriels, il faut bien comprendre le fonctionnement des courbes de Bézier. Explorons le fonctionnement des formes primitives et des particularités de l'outil Plume. Comprendre la différence entre la flèche noire et la flèche blanche est indispensable !

Tout élément vectoriel est régi par deux types de composantes principales : le remplissage (ou contenu) et le contour (ou conteneur). Nous allons distinguer les divers modes de travail et observer leurs principales propriétés.

Troisième élément de cet Inspecteur de propriétés : les filtres en temps réel. A ne pas confondre avec les filtres ! Nous explorerons également l'effet de transparence et les modes de fusion. Nous en profiterons pour réaliser certains allers-retours avec Photoshop.

Fireworks sait ouvrir ou importer les fichiers natifs en .PSD. Comment sont gérés les effets en temps réel de Photoshop ? Nous en profiterons pour réaliser quelques allers-retours entre les deux applications.

Une fois les objets vectoriels mis en place, il est encore possible de les combiner et d'obtenir ainsi de nouvelles formes composites et complexes. Nous allons étudier le menu de la nouvelle version CS5 accessible depuis la palette Propriétés.

La palette Alignement est un outil de positionnement incontournable. Elle permet de travailler autant avec des objets complets qu'avec les points qui les composent. Les possibilités de cette palette sont assez impressionnantes et d'une grande utilité lors de la réalisation de nos Wireframes ou prototypes.

L'utilisation constante de cette application nécessite de pouvoir manipuler en permanence le document autant sur l'espace de travail que dans sa mise à l'échelle. Vous devez également maîtriser son mode d'affichage et son interopérabilité entre les fenêtres et l'espace de travail.

Voyons ici la manipulation et le paramétrage de chacun des éléments. Explorons les divers menus contextuels et le groupement de chacun des panneaux et des palettes entre eux ainsi que les différents espaces de travail disponibles.

Divers outils d'aide au positionnement sont disponibles : les règles, les grilles, les guides et les guides de positionnement. Tous ont leurs avantages et leurs particularités. Les repères commentés et l'affichage d'info-bulles nous permettent de manière très ergonomique d'être rapidement précis et efficaces.

Travailler sur un document, c'est également avoir la possibilité d'explorer le rendu ou d'optimiser l'affichage d'un élément sur lequel nous sommes en train d'intervenir. Nous allons voir les diverses possibilités que nous offre Fireworks.

Nous ne pouvions pas clore ce chapitre sans aborder la palette Préférences de l'application. Au cours de certains chapitres, nous avons pu en explorer certaines facettes. Dans cette vidéo, nous irons plus loin dans les possibilités que la palette Préférences de Fireworks nous propose.

Faisons un rapide tour d'horizon des quatre principales palettes de l'application qui sont les pages, les calques, les états et les bibliothèques. Comprenons les interconnections et les avantages cumulés de ces palettes.

Revenons plus en détail sur le fonctionnement particulier de la palette des calques, du calque spécifique et du calque web. Quelle est la relation que Fireworks concède aux calques, aux calques imbriqués et aux objets ? Comment travailler de manière simple et intuitive avec cette palette ? Observons également les diverses propriétés de ces calques dans cette vidéo.

Découvrons ici l'utilité, le fonctionnement et les propriétés du calque propre à Fireworks : le calque web. Nous reviendrons longuement sur son utilisation et sur son interactivité au sein de Fireworks.

Une autre force de Fireworks est de travailler avec des éléments récurrents au sein d'un document. Ce sont les symboles. Nous allons explorer les divers types de symboles que propose Fireworks et voir en quoi ils peuvent être extrêmement utiles et apporter toute la puissance nécessaire à ce type d'application.

Comme pour bien d'autres concepts, Fireworks a été un des premiers outils à proposer le mode de Mise à l'échelle par 9. Qu'il s'agisse de simples objets placés sur le document ou de symboles, cet outil de mise à l'échelle offre bien des possibilités et ouvre des portes qui permettent à Fireworks de se positionner confortablement dans le prototypage d'applications.

Qu'il s'agisse de la bibliothèque du document ou des bibliothèques communes, les bibliothèques permettent de stocker et gérer l'ensemble des symboles. Nous allons explorer leur manipulation et la manière dont elles gèrent les symboles qu'elles contiennent.

Sans être une présentation de Bridge, cette étape se veut au moins une modeste introduction à ce fabuleux outil passerelle qui accompagne les diverses applications de la Suite. Nous allons regarder quelques avantages de cette application et voir en quoi elle peut nous être utile en complément de Fireworks.

L'histogramme est le principal outil de contrôle de l'équilibre d'une image. Dans cette étape, nous allons en détailler l'interprétation. Nous observerons également deux des outils qui permettent d'intervenir sur sa correction : l'outil Niveaux et l'outil Courbes. Nous explorerons les principales différences.

Bien que certains n'hésiteront pas à ouvrir Photoshop pour ce genre d'opération, Fireworks propose un grand nombre d'outils de réglage. Nous allons en explorer les principaux et pointer leurs avantages. Bien qu'il s'agisse parfois d'un univers sans fin, nous définirons également quelques intérêts des modes de fusion.

Fireworks propose six modes de copier-coller qui permettent tous d'explorer les nombreuses facettes de l'outil. Qu'il s'agisse d'HTML, d'attributs, de mode masques ou encore de simple copier-coller, nous allons détailler chacune des possibilités qu'offre Fireworks.

Il existe généralement deux principaux modes de masquage. Fireworks ne déroge pas à la règle en proposant des masques vectoriels (écrêtage) et des masques en mode de fusion (bitmap). Fireworks propose une multitude de possibilités qui permettent d'obtenir toujours l'effet ou le mode de masquage souhaité. Nous allons les détailler.

Toujours innovant, Fireworks a été un des premiers outils, si ce n'est le premier, à proposer une interface d'optimisation et d'exportation de document. Nous allons voir les diverses facettes de ses possibilités et explorer les réglages pour chacun des principaux formats d'exportation d'image pour le web.

Cette étape va nous permettre d'explorer un grand nombre de manipulations que nous propose Fireworks. Qu'il s'agisse de permutation de casse de caractères ou encore d'importer du texte au format .RTF, les possibilités ne sont pas limitées dans Fireworks !

Fireworks propose divers paramétrages qui permettent d'interagir sur la mise en forme du texte. Dans cette vidéo, nous allons détailler les principales fonctionnalités.

Dans la continuité de l'étape sur le masquage, nous allons utiliser du texte comme masque ou au sein d'un masque. Bien souvent le texte peut rester constamment éditable, ce qui ouvre encore davantage les portes de la maintenance de nos applications et de leurs prototypes.

Fireworks propose de nombreuses palettes de gestion des couleurs. Du nuancier à la palette Couleurs, du mélangeur à la palette Couleurs, que ce soit en mode RVB ou TSL, nous allons explorer diverses méthodes pour créer ou recréer les ambiances colorées de nos documents.

Autre fonctionnalité assez impressionnante de Fireworks : les styles. Qu'il s'agisse de styles de texte ou d'objet, nous allons étudier leur mode de fonctionnement et voir comment décliner leur utilisation de façon simple et rapide. Les styles peuvent s'échanger entre documents et se coupler à des symboles.

Créer des animations peut s'obtenir de diverses manières. Nous allons explorer la première. Comme pour un dessin animé classique, elle s'opère sur un travail en image par image. Bien que ce travail puisse être fastidieux, nous allons voir que les outils de Fireworks peuvent parfois nous faciliter la tâche.

Voici la seconde facette des animations : les animations par interpolation. Des animations à la manière de Flash peuvent être réalisées grâce aux outils de Fireworks. L'intérêt majeur de cette approche reste sa maintenance et son ajustement.

Troisième approche propre à Fireworks pour créer de l'animation : l'animation par symboles animés. Nous allons explorer la mise en place et le paramétrage de telles animations.

Qu'il s'agisse du format bitmap .GIF animé ou du format vectoriel .SWF, nous allons voir comme il est simple et rapide d'exporter nos animations. Nous allons pouvoir facilement optimiser, contrôler et exporter les animations.

Sur les traces de Freehand, Fireworks propose un certain nombre d'outils très pointus pour la gestion des formes vectorielles. Nous allons en mettre quelques-uns en application et en faire ressortir les avantages.

La palette Tracé est le fidèle compagnon du travail sur des objets vectoriels. Elle permet de sélectionner rapidement ou de manipuler un objet.

Fireworks propose un ensemble d'outils propres au vectoriel. De la même manière, Fireworks propose son lot d'outils propres au bitmap. Au cours de cette étape, nous allons en explorer les principaux et faire ressortir leur utilité.

De part sa forte relation avec le code JavaScript, Fireworks propose des objets vectoriels intelligents : les formes automatiques. En utilisant les poignées spécifiques ou l'Inspecteur de propriétés, il est possible d'interagir avec ces objets complexes. Certains sont accessibles depuis la palettes Outils et d'autres depuis la palette Formes automatiques.

L'étape suivante consistera à apporter l'aspect évolutif, modifiable et interactif à notre projet. Partant d'un document numérisé, d'un document vierge, d'un modèle (nouveauté de CS5), nous allons voir que Fireworks propose un arsenal d'outils prévus pour ces tâches qui vont grandement nous simplifier le travail.

Comment distinguer les divers modes de découpe et de structuration qu'utilise Fireworks ? Nous allons voir comment pousser encore plus en avant les possibilités de structuration de nos applications en prémâchant le travail depuis Fireworks.

Lors du découpage de l'ensemble des zones de notre application ou de nos documents, il est très facile de préciser si les images sont des images devant être conservées au sein du contenu, ou au contraire extraites du document et utilisées directement par les feuilles de style CSS. Il est également possible de spécifier des zones comme contenant du code HTML.

Afin de nous aider à aller plus vite dans la construction de nos prototypes, Fireworks propose des librairies de symboles qui peuvent s'enrichir depuis une palette d'informations. Nous allons voir que réaliser un formulaire ou tout autre interface propre à Windows ou Mac OS X est possible en un tour de souris.

Cette étape intermédiaire qui traite des prototypes et des Mockup va nous permettre de voir où nous en sommes dans la création de notre site web.

Il est toujours important, lorsqu'on réalise une maquette de projet ou un Wireframe, d'en extraire une arborescence de site et de la préparer. Cela va nous permettre de centraliser des ressources, de mutualiser des éléments ou encore de visualiser une architecture.

Qu'il s'agisse d'un partage d'écran ou directement d'une réunion Acrobat.com, Fireworks permet une interaction rapide entre les différents partenaires ou clients afin de valider des mécaniques de fonctionnement des applications en cours de développement.

Nous allons explorer rapidement les diverses possibilités d'exportation de Fireworks. Simplement par le menu Enregistrer Sous, le menu Exporter ou le menu Commande, les possibilités d'exportation sont nombreuses.

Côté interactivité, Fireworks propose deux types de mode de découpe de la structure : des zones sensibles pouvant capter une interaction utilisateur et des zones de découpe permettant de modifier indépendamment certaines régions du document. Nous allons explorer ces fonctionnalités.

Dans cette vidéo, nous allons découvrir une particularité de l'un des symboles : les boutons. Fonctionnant en étroite relation avec les états, les boutons permettent de gérer les effets de survol des utilisateurs. Un détail important est la propriété Texte qui permet de modifier le texte de chacune des instances de ce type de symbole.

Le survol simple reste une manière plus rapide pour réaliser un double état d'une zone. Pas besoin de symbole, une simple zone de découpe suffit pour réaliser cette tâche. Nous allons explorer cela au cours de cette étape.

Allons plus loin sur les traces de l'étape précédente et remplaçons une zone de découpe non plus par un autre état de l'image et du document, mais par un fichier externe. Et pourquoi pas de surcroît par un fichier lui-même animé comme un .GIF !

Une des particularités intéressantes de Fireworks est la souplesse et la simplicité avec lesquelles on peut réaliser des menus contextuels qui s'exporteront avec leurs feuilles CSS et leur JavaScript. Leur implantation permet d'utiliser soit des arrière-plans colorés, soit directement des effets de lumière obtenus par des images.

Nous avons vu, au cours des étapes précédentes, comment ajouter de l'interaction à nos prototypes et à nos documents. Nous allons voir qu'il existe une palette Comportements qui nous permet également d'intervenir sur les interactions. Bien sûr, l'ensemble des méthodes est complémentaire et interchangeable.

Nous ne pouvions conclure ce chapitre, qui a commencé par les découpes du document, sans explorer la manière autonome et distincte de pouvoir exporter et optimiser chacune d'entre elles.

Avant d'exporter le document, il est toujours bon de procéder à une démonstration. Celle-ci va nous permettre de vérifier rapidement les divers états d'un document et d'en valider les contenus ou aspects. Ceci est un excellent complément aux divers affichages dans le navigateur ou le mode Aperçu.

A ne pas confondre avec l'exportation image et CSS que nous avions explorée au cours du chapitre sur la réalisation de prototype ! L'exportation d'images et HTML permet d'exporter directement nos interactions et nos contenus en un document HTML directement exploitable au sein de nos sites.

Fireworks permet d'exporter un document vers de multiples fichiers et ce en fonction des divers calques, des diverses pages ou encore des divers états qui le composent. Chaque nouveau fichier portera alors le nom respectif de chaque élément concerné : calques, pages ou états.

Depuis le menu Commande, il est possible d'accéder à une véritable interface logicielle qui va nous permettre de mettre en place des diaporamas d'images soit sous HTML soit sous Flash. Ces diaporamas n'ont rien à envier à un grand nombre de widgets disponibles ici et là sur le web.

Les outils Explorer ne sont pas forcément des outils d'exportation globale. Malgré tout, ils permettent l'exportation de nos documents. Leur envoi direct par mail à nos partenaires ou clients permet de s'assurer ensemble de certains points et de les valider.

Il existe deux manières de travailler avec Flash : utiliser directement le format .PNG, qui est intégralement géré par Flash, ou exporter au travers du format .FXG2. Quoiqu'il en soit, l'une et l'autre des solutions préserve l'intégralité des informations : nom de calques, structure, imbrication, symboles, images ou vecteurs, texte éditable, etc. Bref, que du régal !

Fireworks CS5 permet d'exporter vers la toute nouvelle mouture du moteur d'exécution d'applications RIA, AIR 2. Bien que l'idée ne soit pas de rivaliser avec les applications riches publiées à partir de Flash ou Flex, Fireworks nous permet d'exporter vers cette technologie des prototypes fonctionnels que nous pourrons échanger avec nos partenaires ou nos clients.