ADOBE DREAMWEAVER Public : Webmasters, créateur de sites Internet, maquettistes, infographistes, responsables communication, chefs de projet. Pré-requis : Bonne connaissance de l environnement Mac ou Windows). Durée : 35 heures (5 jours) Moyens pédagogiques : 1 poste par stagiaire - 1 Vidéo projecteur - Support de cours fourni à chaque stagiaire Logiciel manipulé : Adobe Dreamweaver Objectifs : Devenez un tisseur de toile averti! Gérez votre image, soyez autonome dans la création d un site Internet de la découpe de la charte graphique jusqu à la mise en ligne sur le web. Notions de base Les différents types de site Les éléments : texte, images, animations, vidéo, son La navigation et l arborescence Initiation aux balises html de base Création d éléments html Interface de travail Configuration du site Les pages Création et modification Notions de modèles (templates) Intégration html depuis la charte graphique (Photoshop) Le texte Insertion et mise en page Hypertexte, liens, ancres Introduction à la gestion des fontes Utilisation de fontes dans Dream Modifier les familles de polices Polices, styles, taille Les images Insertion d images, propriétés Roll-over entre deux images Le rôle de la balise ALT Optimisation et manipulations avec les outils de la palette Propriétés Lien avec Photoshop et/ou Fireworks Utilisation de la palette des actifs Le format natif PSD Les tableaux Utilisation des tableaux aujourd hui Mise en forme et modification Les CSS2 Les DIV, les classes, les balises Les propriétés liées aux blocs Imbrication de styles Liens entre pages et styles CSS Appliquer plusieurs classes Aperçu des transitions CSS Utiliser la fonction transition CSS Modifier les transitions CSS Prise en compte des propriétés CSS Navigation et liens Les liens internes aux pages Les liens vers des sites externes Les liens vers le courrier électronique Création d une barre de navigation Utilisation du module SPRY pour créer une barre de navigation Les bibliothèques Création et modification d éléments Les formulaires Description de la palette formulaire Création, configuration et envoi d un formulaire en PHP Les spry de vérification de formulaires Les formulaires en HTML5 Les éléments dynamiques (DHTML) les comportements les images sprite en css Insertion d animation Flash ou Edge Insertion de fichier PDF, Word, Powerpoint... Initiation aux spry 1
Mise en ligne Nettoyage du code HTML Tester le site avec différents navigateurs Configuration et transfert FTP Photoshop Optimisation de la charte graphique utilisation de l outil tranche Options de référencement de Photoshop HTML5 Les nouveaux standards HTML5 Les balises html5 La vidéo et le son en html5 Les CSS3 Construire un site «full css» Utilisation de css3 La balise @media pour charger un css par rapport au terminal (pc, smartphone, tablettes) Les découpes dans photoshop par rapport aux css Création de css complexes Bootstrap La nouvelle utilisation en html5/css3 Comment concevoir un site responsive Installation de bootstrap Création de pages fluides Que sont les grilles fluides? Ajout/suppression des balises DIV de grille fluide Gestion des feuilles de style Extraits de codes Création et utilisation 2
Adobe Edge (Html5/Css3) - Niveau 1 Public : Graphistes, webmasters et développeurs d applications Internet Pré-requis : Avoir une bonne connaissance de la création de sites Web Durée : 14 heures (2 jours) Logiciel manipulé : Adobe Edge Objectifs : Utiliser Adobe Edge pour la conception d animations utilisant les nouveaux standard en HTML5 et CSS3. Installation Les concepts de bases de l animation vectorielle Les plus de HTML5 dans la diffusion de contenus multiplateformes (Iphone, Ipad...) Présentation des logiques d animation HTML5 (CSS, JavaScript, SVG) Format de fichiers, poids de fichiers Edge et le HTML5 par rapport à Flash Les fonctions Découverte de l environnement de travail L espace de travail et le panneau propriétés le panneau bibliothèque, actifs, symboles et polices Créer un nouveau document (taille, background...) Pré-visualisation d une animation Importer des images et autres médias Utiliser les outils de forme et de texte L animation Utiliser la ligne de temps Paramétrer la timeline (zoom, Auto-keyframe, Smooth Transition) Animation d objets avec les images clés et les transitions Copier/coller une transition d un objet à un autre Animation avec trajectoires de mouvement Animation de masque d écrêtage (clipping) Utilisation de commandes de lecture avec les symboles Créer des déplacements d objets Modifier les apparences d un objet (couleurs, formes...) Animer les éléments d une page web existante Intégrer une animation de preloading (gifs de preloading par défaut / gif personnalisés) Exporter une animation en HTML5 Publier vers indesign L interactivité dans Edge Le principe de l interactivité Le balisage Le JavaScript et jquery La gestion des événements Les comportements et boutons Insertion de code sur la timeline Actions sur les objets Responsive Design - gérer la fluidité Redimensionnement / positionnement élastique d objets sur la scène Propriétés d alignement et de centrage des images dans un bloc div Taille de redimensionnement min et max Options de redimensionnement des symboles Centrer parfaitement un élement dans la scène Centrage global d une animation EA dans la page html Utiliser un motif répété en background Les options supplémentaires Propriété Curseur Code sur la time line Utiliser les fonctions de réorganisation d objets Modifier l opacité, les couleurs (contours, fond) d un objet Redimensionner ou déformer un objet Utiliser la fonction de rotation ou d inclinaison d un objet 3
HTML5 et CSS3 Public : Webmasters, maquettistes, infographistes, responsables de communication, chefs de projet. Pré-requis : Connaître le langage html Durée : 14 heures (2 jours) Approche : Technique avancée Logiciel manipulé : Dreamweaver ou n importe quel éditeur html Objectifs : Cette formation vous permettra d apprendra à créer des pages et des applications Web en HTML5 et CSS3. Découvrez la puissance du HTML5 notamment en termes d applications multimédia (smartphones et tablettes) Introduction à HTML 5 et CSS3 Contexte : fonctionnement d un site internet Les normes du W3C Les changements avec HTML 5 Roadmap HTML 5 Quand choisir le HTML 5 Utiliser le HTML 5 avec des navigateurs qui ne le supportent pas Balises HTML 5 Disparition des notions «en ligne» et «bloc» Doctype, NameSpace, Encoding Les nouveaux éléments : section, article, aside, nav,... pour en-têtes, pied de pages, etc. Les indispensables balises telles que menu, command, details, summary La compatibilité entre les navigateurs Optimisation des balises pour les moteurs de recherche Les formulaires HTML 5 Balise form Créer et utiliser des formulaires HTML 5 email, url, date... Les validations de formulaire en HTML5 L Audio et la Video en HTML 5 Les conteneurs Contrôler la vidéo, l audio Support et formats (WebM, MP4, H.264, Ogg Theora, MP3, AAC, Vorbis) Gérer plusieurs sources vidéos et audios Sous-titres et vidéo HTML5 La géo-localisation avec HTML 5 Vue d ensemble La vie privée de l utilisateur Géolocaliser ses utilisateurs sur Google Maps CSS3 Ce que ça change Coins arrondis Ombres portés Transparence Mise en page et positionnement Autres propriétés Gestion des éléments de formulaire via CSS : enabled, disabled, valid, required, optionnal Intégrer ses propres polices Mise en page multi-colonnes Media Queries CSS3 pour créer des sites Web plus réactifs Responsive design Feuille de style CSS multi-écran pour ordinateur, mobile et tablette La mise en page et le positionnement Niveau de présentation Mise en page par patron ou multi-colonne Mise en page par boite horizontales ou verticales Positionnement par la grille CSS3 : Les animations Transformations (2D et 3D) Transitions L animation Dessiner avec HTML 5 Dessiner en JavaScript Contexte Accessibilité 4
CMS Word Press - Administrateur Public : gestionnaire de site, Webmasters et développeurs de sites Internet Pré-requis : Bonne connaissances de la création de sites Internet Durée : 35 heures (5 jours) Utilité : Réaliser votre blog ou votre site internet de manière totalement personnalisé. Logiciel manipulé : Wordpress Objectifs : Comprendre l utilisation du CMS Wordpress, paramétrer et personnaliser votre thème (css), installer des plugins et fonctionnalités supplémentaires. Introduction à quoi ça sert? La communauté WordPress. L interface Installation de WordPress Installation local de WordPress Installation sur serveur de WordPress Installation des Plugins et Thèmes WordPress Utilisation du SEO de son site pour améliorer son référencement. Gestion du Site WordPress Création d articles ou de pages Insertion de médias tels que les images, documents joints.. Gérer son administration Le tableau de bord Les articles et articles programmés Les médias Les liens Les pages Gestion et paramétrage des commentaires Gestion des utilisateurs L apparence Importation de contenus depuis d autres systèmes de gestion de contenu (youtube, dailymotion...) Mise en maintenance Lightbox (pop up photo) Slider (diaporama) Mise en place d un système de réservation à travers l extension Events manager Création d un thème personnalisé Utilisation d une maquette personnalisée Personnaliser son thème Utilisation des CSS pour la mise en forme Fabrication de thème wordpress Administration Faire sauvegarde du site Mettre en ligne le site Utiliser les réseaux sociaux Les métadonnées Bien démarrer son référencement Les plugins et extensions Recherche et installation de plugins supplémentaires Ajout d extensions complémentaires telles que : Formulaire 5
Les réseaux sociaux (Facebook, Twitter...) Public : Tout public Pré-requis : Aucun Durée : 07 heures (1 jour) Approche : Pratique et théorique Logiciel manipulé : Internet Objectifs : Savoir créer et administrer une page facebook et un compte twitter. Comprendre l utilité des réseaux sociaux dans la politique de communication et de référencement. Seront également abordés Viadeo, link in et les blogs. Facebook Pourquoi créer une page Facebook Les retours sur le web de l E-réputation Création d une page Paramétrage d une page Comment bien rédiger son profil Intégration d un lien «j aime», du «bloc facebook» sur un site internet. Les erreurs à éviter Twitter Qu est ce que twitter Les règles sur Twitter Que doit-on metter sur twitter? Comment «tweeter» efficace Comment augmenter ses abonnements Lier son compte twitter à son site internet Link in et Viadeo Description et utilisation des autres réseaux sociaux. Les blogs Introduction sur la création d un Blog Différencier les blogs et les sites Web Définir une charte d utilisation, modérer les commentaires Les responsabilités du blogueur Les erreurs à éviter Définir l objectif du Blog Installation Installation d un blog Insérer des éléments multimédias et enrichir les pages 6