Optimisation de Dreamweaver et Fireworks CS4

Optimisez votre flux de production !

Le but de cette formation vidéo est avant tout d’aborder divers points que l’on ne trouve pas systématiquement dans l’aide en ligne ou dans les formations d’introduction à Dreamweaver ou à Fireworks. Le formateur Birnou Sébarte vous donnera les outils qui vous permettront d’exécuter vos tâches plus facilement et rapidement. En un mot, cette formation vidéo est un condensé de trucs et astuces inédits, rarement abordés.

Votre formateur/Vos formateurs: Birnou Sébarte

Date de parution: 27 mars 2009

EUR 29,95

Durée: 3h

Qu'est-ce que je reçois ?

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation ! Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo. N'hésitez pas à nous contacter si vous avez des questions !

Compatible avec l´iPad

Formation téléchargeable

Fichiers source

Dans le panier Téléchargement

Dans ma sélection Recommander à un ami Soumettre un commentaire

Formations similaires

Trailer - Optimisation de Dreamweaver et Fireworks CS4 Le formateur Birnou Sébarte vous présente "Optimisation de Dreamweaver et Fireworks CS4".

Nous allons aborder au cours de ces vidéos quelques pratiques d'utilisation au niveau de l'interface de Dreamweaver.

Interface
- La palette des CSS a évolué en même temps que l'interface de Dreamweaver. L'idée de cette vidéo n'est pas de reprendre une à une les fonctionnalités de cette palette, mais de se concentrer sur certains des points qui ne sont pas souvent mis en avant.
  
  Exploiter la palette Style CSS
  
  06:07
- Lors de la création de contenu, des visuels trop riches, ou des visuels qui ne seront générés que lors de la publication par le serveur, peuvent faire défaut aux contributeurs. Pour cela, Dreamweaver propose des feuilles de style à la conception.
  
  Style CSS à la conception
  
  03:16
- Dreamweaver propose divers modes d'affichage et de rendu. Nous allons donc explorer les modes code / création, mais aussi les divers modes de rendu : écran / print / handheld, etc. Enfin, nous verrons les derniers modes apparus avec la CS4 : l'affichage en direct et le code en direct.
  
  Mode d'affichage
  
  05:07
Nous verrons au cours de ces étapes comment tirer parti de diverses fonctionnalités d'automatisation présentes dans Dreamweaver comme dans Fireworks.

Automatisation
- Parfois, nous recevons le contenu du site sous forme de document Word ou autre, qu'il faut nettoyer. S'il est vrai que Dreamweaver possède une commande Nettoyer Word HTML assez efficace, il reste néanmoins toujours toute une série de filtres et de nettoyages à appliquer. C'est là que les commandes enregistrées peuvent entrer en action.
  
  Commande enregistrée
  
  04:53
- Il s'agit là d'une vieille extension de Fireworks mais dont on ne se lasse jamais : la génération de documents image depuis un modèle Fireworks et un fichier XML. C'est tellement simple d'utilisation et si redoutable d'efficacité qu'on ne pouvait pas la représenter à nouveau.
  
  Générateur d'images Fireworks utilisant XML
  
  11:49
- Il existe plusieurs manières d'automatiser ou de reproduire certaines tâches dans Fireworks. Au cours de cette vidéo, nous allons les présenter et essayer de faire ressortir leurs mises en application dans les flux de production quotidiens.
  
  Rechercher, Script, Traitement par lot
  
  09:50
Il est possible, soit de manière native, soit par l'ajout d'extensions gratuites, d'étendre ou d'améliorer les fonctionnalités déjà riches de Dreamweaver ou de Fireworks.

Fonctionnalités diverses
- L'éditeur de code de Dreamweaver propose une aide à l'écriture et permet d'accéder à divers éléments comme la Palettes de couleurs, les Styles en cours, la boîte Parcourir du système, etc. Ces aides sont complètement paramétrables et il est très facile d'intervenir.
  
  Editeur de Balises
  
  03:41
- Par défaut Dreamweaver contient les bibliothèques de plusieurs langages comme HTML, CSS, JavaScript, PHP, etc. Et de ce fait, l'outil Aide à l'écriture de l'éditeur de code nous est de grande utilité. Vous pouvez être amené à travailler sur un langage qui n'est pas natif et intégré à Dreamweaver : alors installons-le !
  
  Ajout de langage (SMIL par exemple)
  
  03:04
- Les outils de la suite Adobe sont tous installés avec un Adobe Extensions Manager, qui comme son nom l'indique permet de gérer les extensions ajoutées à chaque produit. Nous allons parcourir son fonctionnement et son utilisation.
  
  Ajout d'extension
  
  03:33
- Cette incontournable extension permet de générer du faux texte pour Dreamweaver. Il faut avoir recours aux services de deux extensions, Lorem and More et Lorem Ipsum Generator.
  
  Lorem Ipsum
  
  02:59
- Demandée depuis longtemps, cette extension permet de pouvoir uploader un fichier vers le serveur. Vous créez un site et vous demandez à votre visiteur de faire parvenir un document, CV, Dossier, Courrier, etc. Cette extension est faite pour vous.
  
  PHP Upload
  
  03:49
- Lors de travaux sur des interfaces graphiques, il est souvent nécessaire de réaliser des documents chartés présentant des pastilles colorées et de voir la valeur hexadécimale correspondante afin de pouvoir travailler en équipe sur ces valeurs. Draw swatches est une extension qui permet de faire ce travail pour nous.
  
  Draw swatches (nuancier Fireworks)
  
  03:37
- Si vous devez gérer des sites Ordres et que la fabrication de thèmes personnalisés vous cause du souci, il existe une extension (en version d'évaluation de 15 jours) qui peut éventuellement vous être d'utilité.
  
  Gérer les thèmes Ordres
  
  04:46
- Lors de travaux de préparation, nous avons souvent plusieurs versions d'un même document. Nous pouvons toujours les nommer en fonction. Mais qu'en-est il lorsque nous imprimons des épreuves ? L'extension Chrono est là pour nous aider à placer rapidement un Timestamp sur nos documents.
  
  Chrono (Fireworks)
  
  02:32
- Incontournable extension pour Fireworks qui permet, comme son nom l'indique, de générer du faux texte. La documentation fournie est relativement complète, et l'intégration au sein de la CS4 est sans pareil.
  
  Lorem Ipsum (Fireworks)
  
  03:20
Dreamweaver et Fireworks sont un réel tandem des premiers jours. Dès leurs premières versions, ils dialoguaient déjà bien entre eux et cela s'améliore avec le temps.

Inter-Logiciel
- Dreamweaver est un éditeur de code et de site assez complet. Toutefois, il est possible de pouvoir relayer certaines tâches à des éditeurs externes. Voyons un exemple pour ajouter un éditeur de CSS externe, sans quitter le flux de production de Dreamweaver.
  
  Gestion des Editeurs externes
  
  05:22
- Générer une barre de menu en CSS et depuis Fireworks, sans pour ainsi dire quitter le flux de production de Dreamweaver, est une tâche complètement intégrée au flux de travail entre ces deux logiciels. Nous allons le mettre en application.
  
  Round Trip HTML Fireworks 1
  
  13:49
- Nous sommes souvent amenés à gérer des graphiques d'images réactifs au survol de la souris. Bien sûr, les CSS peuvent nous permettre de gérer cela, d'où une judicieuse utilisation d'image map dans Dreamweaver. Mais en fonction du temps qui vous est imparti ou du degré de précision dont vous avez besoin, il existe une alternative toute simple à partir de Fireworks.
  
  Round Trip HTML Fireworks 2
  
  13:36
- Lorsque l'on prépare une maquette d'interface, nous pouvons utiliser du faux texte, et également de fausses images, qu'il sera très facile ensuite d'éditer et de compléter, voire même modifier avec Fireworks.
  
  Créer de fausses images rééditables
  
  02:04
- Fireworks permet de générer directement des éléments de bibliothèque Dreamweaver. Nous explorons ce fonctionnement depuis l'exportation d'un logo de pied de page contenant du HTML.
  
  Elément de librairie depuis Fireworks
  
  03:40
- On a parfois besoin de transmettre un tableau Excel à des partenaires, le souci reste leur mise en forme ou leur présentation de rendu. Pas de souci, un simple copier-coller entre Excel et Dreamweaver suffit.
  
  Tableau Excel
  
  02:11
Retravailler de vieux sites est parfois plus rapide que de repartir d'une page blanche. Grâce à la fonction Rechercher / Remplacer de Dreamweaver et l'aide d'expressions régulières, tout est possible.

Productivité
- L'outil Rechercher / Remplacer de Dreamweaver est très complet et permet de pouvoir intervenir sur tout type de contexte, qu'il s'agisse de documents ouverts, ou du site entier, ou encore uniquement de documents sélectionnés. De plus, il est possible d'agir sur le contenu ou sur la source HTML, et ce de manière très précise.
  
  Rechercher / Remplacer
  
  03:50
- Si la palette de Rechercher / Remplacer ne propose pas les options de recherche dont vous avez besoin, n'hésitez pas à utiliser les expressions régulières. C'est un peu abrupt au début, mais rapidement on se demande comment nous avons pu travailler sans elles auparavant !
  
  Expressions régulières
  
  03:17
- Une option d'exportation parfois oubliée de Fireworks est la possibilité d'exporter certains aspects du document (pages, aspect, calques, etc.) comme des fichiers autonomes et distincts.
  
  Exporter des fichiers
  
  05:28
Comportement d'usine ou fait maison : le tout est de les préparer avec goût et dosage.

Comportements
- Si les comportements serveurs de Dreamweaver venaient à manquer de possibilités, ou que le code généré ne vous convenait pas, libre à vous de les réécrire ou d'en composer de nouveaux.
  
  Créer ses propres comportements
  
  07:42
- Depuis quelques versions de Dreamweaver, Adobe propose sa librairie JavaScript, Adobe Spry. Nous allons rapidement la mettre en application et voir avec quelle simplicité il est facile de la personnaliser.
  
  Utiliser Spry
  
  08:33
Si Dreamweaver ne permet pas certaines fonctionnalités et qu'il n'est pas possible de créer facilement ces comportements serveurs, il reste toujours la possibilité de créer ses propres fragments de code et de les réutiliser à souhait.

Fragments de code
- Un petit bout de code qui va vous permettre d'explorer par vous-même l'envoi d'e-mails depuis le serveur. Qu'il s'agisse d'un envoi de contact ou d'une newsletter, le principe en reste le même.
  
  Envoi d'un e-mail
  
  15:52
- Sans entrer dans la mise en place d'un backoffice complet qui prendrait en charge la mise en ligne, la gestion, la modification et la suppression d'images dans une base de données, nous allons explorer les mécaniques à mettre en place pour poster et lire des images sur une base de données, en utilisant PHP.
  
  Poster une image
  
  22:38
- Lorsque vous commencez à récupérer des bouts de code réutilisables, utilisez la palette des fragments de code présente dans Dreamweaver. Cette palette va vous permettre par simple clic ou glisser-déposer de pouvoir exploiter au mieux l'ensemble des codes qui d'un coup seront organisés.
  
  Stocker ses fragments de code
  
  02:23
Avant de commencer, il est toujours bon de remettre les compteurs à zéro avec une feuille CSS de réinitialisation, et une fois terminé, de s'assurer d'une bonne portabilité sur l'ensemble des navigateurs cible.

Vérification
- Avant de placer son site en ligne, un dernier doute sur une compatibilité navigateur. La fonction est là et surtout CSS Advisor.com qui lui est associé. Au travers de cette courte vidéo, nous explorerons leur fonctionnement.
  
  Contrôle de compatibilité navigateur
  
  06:00
- En se basant sur les travaux de Eric Meyer, Tantek Celik et Andy Clarke, on s'aperçoit qu'il est toujours bon de réinitialiser les affichages par défaut de chaque navigateur. Au cours de cette vidéo, nous allons voir pourquoi il est bon d'avoir recours à une telle feuille de style.
  
  Feuille CSS de réinitialisation
  
  04:42

Trailer - Optimisation de Dreamweaver et Fireworks CS4

Le formateur Birnou Sébarte vous présente "Optimisation de Dreamweaver et Fireworks CS4".

Nous brossons rapidement un tableau de fonctionnalités qui peuvent être utiles dans le flux de production quotidien entre les deux outils. Ces fonctionnalités sont parfois présentes par défaut, maiselles doivent prfois être installées, gratuitement, par l’intermédiaire d’Adobe Exchange Manager.

Notre intention était également de fournir quelques fragments de code à garder sous la main et pouvant être utiles lors du déploiement de sites web. Nous voyons par exemple l’envoi et la gestion d’images sur le serveur, l’envoi d’e-mails depuis un script serveur, etc. Ces extraits de code ne sont pas intégrés à Dreamweaver, alors que nous avons souvent besoin de les utiliser.

Cette formation vidéo va vous présenter un éventail d’idées d’utilisation et vous faire découvrir les nombreuses facettes de Dreamweaver et de Fireworks CS4.

Vue d’ensemble de la formation :

Interface

Nous allons aborder au cours de ces vidéos quelques pratiques d'utilisation au niveau de l'interface de Dreamweaver.

Automatisation

Nous verrons au cours de ces étapes comment tirer parti de diverses fonctionnalités d'automatisation présentes dans Dreamweaver comme dans Fireworks.

Fonctionnalités diverses

Il est possible, soit de manière native, soit par l'ajout d'extensions gratuites, d'étendre ou d'améliorer les fonctionnalités déjà riches de Dreamweaver ou de Fireworks.

Inter-Logiciel

Dreamweaver et Fireworks sont un réel tandem des premiers jours. Dès leurs premières versions, ils dialoguaient déjà bien entre eux et cela s'améliore avec le temps.

Productivité

Retravailler de vieux sites est parfois plus rapide que de repartir d'une page blanche. Grâce à la fonction Rechercher / Remplacer de Dreamweaver et l'aide d'expressions régulières, tout est possible.

Comportements

Comportement d'usine ou fait maison : le tout est de les préparer avec goût et dosage.

Fragments de code

Si Dreamweaver ne permet pas certaines fonctionnalités et qu'il n'est pas possible de créer facilement ces comportements serveur, il reste toujours la possibilité de créer ses propres fragments de code et de les réutiliser à souhait.

Vérification

Avant de commencer, il est toujours bon de remettre les compteurs à zéro avec une feuille CSS de réinitialisation, et une fois terminé, de s'assurer d'une bonne portabilité sur l'ensemble des navigateurs cible.

Conditions requises

Connexion Internet DSL
Navigateur actuel avec le plug-in Flash
Résolution d’écran minimum : 1024x768
Carte son, haut-parleurs ou casque d’écoute
Pentium4 à partir de 2,6 GHz ou bien G4 à partir de 1 GHz

Compatible avec l´iPad

Vous pouvez regarder les vidéos de cette formation sur iPad et iPhone 4 directement dans votre navigateur. Pour la consultation hors ligne, les abonnés au "Tutorium de luxe" ainsi que les utilisateurs ayant acheté la formation peuvent télécharger le dossier « Vidéos iPad » qui comprend la liste de lecture ainsi que les vidéos compatibles avec l’iPad. Toutes les formations vidéo compatibles sur l’iPad le sont également sur les autres tablettes. Le transfert et la consultation de la formation sont soumis aux conditions des différentes plateformes.

Formation téléchargeable

La formation téléchargeable vous permet de visualiser votre formation sur Mac ou PC sans connection à Internet pour un confort d'utilisation optimal. Une fois téléchargée et décompressée, vous avez la possibilité de la graver si vous le souhaitez. La formation téléchargeable est disponible pour les abonnés au "Tutorium de luxe" ainsi que les utilisateurs ayant acheté la formation.

Fichiers source

Les fichiers source pour reproduire les exemples de cette formation sont disponibles en téléchargement individuel ou à l'intérieur de la formation téléchargeable. Vous pouvez ainsi refaire tous les exercices étape par étape et optimiser votre apprentissage ! Les fichiers source sont disponibles pour les abonnés au "Tutorium de luxe" ainsi que les utilisateurs ayant acheté la formation.

Mode : Apprendre et faire !

Vous avez le choix ! Soit vous apprenez en regardant la formation en mode plein écran, soit vous passez en mode Apprendre et faire ! par un simple clic. Ainsi, vous pouvez vous exercer sur votre ordinateur et regarder la formation en même temps.

Les signets

Pendant que vous regardez une formation vidéo, vous pouvez placer à tout moment vos propres signets, qui seront ensuite matérialisés par une barre orange sur la barre temps de votre formation. Le signet peut être un simple mot mais également une courte note. Une liste récapitulative vous permet de retrouver facilement vos signets lors des visionnages suivants.

Agréablement surpris !

Grégory Moreau

Je connais déjà très bien Dreamweaver et Firefox, et pensais juste parfaire mes connaissances avec cette vidéo. En fait, ça va bien plus loin ! Cela donne de très bonnes astuces pour travailler plus rapidement, notamment grâce l´ajout d´extensions gratuites très utiles (qui font gagner un temps considérable d´un simple clic). Je conseil vraiment. Bravo !