MODULES WEBMASTER WEBDESIGNER

Transcription

1 WEBDESIGNER Pré requis La maîtrise de l environnement Windows ou Mac est fortement recommandé ainsi que l utilisation d internet. Toute personne ayant à gérer des sites web statiques. Etre en mesure concevoir le design de sites web, les réaliser et les mettre à jour. abordés : 26 jours (26*7h = 182 heures) Introduction, ce que vous avez à savoir Les langages du web HTML / XHTML / HTML5, CSS / CSS3, Javascript, PHP / MySQL. Comment coder en respectant les standards du web? Travailler avec un CMS ou framework Où héberger mon site? Quel nom de domaine choisir, où l acheter? Comment mettre en ligne mon site? Formation Photoshop Photoshop est l outil incontournable pour la retouche et le montage photo. Il est de même une référence pour la conception de bannières ou boutons pour le web. : 3 jours Formation Illustrator Illustrator est un logiciel de création graphique vectorielle. Il vous permettra de créer des boutons, bannières et illustrations à intégrer dans vos sites web. : 3 jours Javascript Javascript et le web devient encore plus dynamique notamment grâce aux apports d ajax et Jquery. : 3 jours Boostrap Twitter et Zurb Foundation Découvez la puissance de ces 2 frameworks. : 5 jours Wordpress Le plus célèbre des systèmes degestion de contenu, un incontournable dans les agences web. : 3 jours Prestashop Réaliser facilement votre boutique en ligne avec Prestashop : 3 jours Formation HTML / XHTML / CSS HTML et XHTML sont des langages dit de description, ils sont des références pour la création de page statique. Le CSS pemet de mettre en forme votre contenu. : 3 jours Formation HTML5 / CSS3 HTML5 est le dernier standard du web, il devient désormais un incontournable, le CSS3 révolutionne le web. : 3 jours INTRA-ENTREPRISE 400 HT par jour pour la 1ère personne par personne supplémentaire INTER-ENTREPRISE 250 HT par jour et par personne POLE EMPLOI 200 HT par jour et par personne

2 MODULES PAO PHOTOSHOP Une connaissance de base de l environnement Windows ou Mac est nécessaire Graphistes, webdesigners, photographes ou toutes personnes ayant besoin de retoucher, corriger, monter des photos Etre en mesure de retoucher des images, les modifier, les assembler, créer des montages photo à l allure professionnelle abordés : 3 jours (3*7h= 21 heures) L image numérique L image bitmap, l image vectorielle Les types d images, résolution d image L espace de travail de Photoshop L utilisation des palettes, la boîte à outils Barre d options, règles, repères et grille Fenêtres d images et barre d état Les documents Création, ouverture de document L explorateur de fichiers Bridge Enregistrement dans un format spécifique Enregistrement d un document pour le Web L historique, l impression Les couleurs Sélection d une couleur, l outil pipette Le sélecteur de couleurs prédéfinies La palette muancier Conversions de mode de couleur Le dessin Le crayon, le pinceau, l aérographe Formes géométriques ou prédéfinies Suppression d une zone de l image Le pot de peinture, les dégradés, dégradé personnalisé Les contours Les motifs et textures Les techniques de transformation Photoshop et les retouches L outil goutte d eau, l outil netteté L outil doigt, densité, tampon Le texte Insertion de texte Définition d un type de texte Texte curviligne Techniques de détourage La baguette magique Détourage en mode masque, la plume Les effets de style Application d un effet de style à un calque Gestion des effets de style, copier les effets de style Les sélections Les formes de sélection La baguette magique L outil déplacement Le lasso Le recadrage Les calques dans Photoshop Création, gestion des calques Conversion d un calque d arrière-plan Contour de calque Liaison, fusion, protéger un calque Les corrections Contraste, luminosité d une image Niveau automatique Niveau automatique des contrastes, des couleurs Les fonctions web Les contraintes du web L outil tranche Exporter pour le web LC Formateur , rue de Lecelles St Amand les eaux - Bureau : 57 rue des Féves St Amand les Eaux - Tél: +33 (0) Gsm : +33 (0) contact@lc-formateur.com Siret: Déclaration d activité enregistrée sous le numéro

3 MODULES PAO ILLUSTRATOR La maîtrise de l environnement Windows ou Mac est nécessaire pour cette formation Toute personne, graphistes désirant découvrir le dessin vectoriel Maîtriser le dessin vectoriel avec Illustrator abordés 3 jours (3*7h=21 heures) Notions de base Image bitmap et vectorielle Taille et résolution d image Paramétrage d un nouveau document L interface graphique La barre d outils Les palettes Gérer l espace de travail Zoom, règles, repères et grille Le dessin vectoriel Les formes simples Les formes de tache Le crayon, le pinceau Le trait, l arc, la spirale... La Plume Outil de dessin en perspective Les sélections Outil sélection Outil sélection directe La baguette magique Le lasso Déplacement, modifications, alignement Déplacer des objets Transformation des objets Outil mise à l échelle, déformation, modelage Outil rotation, miroir Outil largeur, déformation, tourbillon, contraction, dilatation.. Outil gomme, ciseau, cutter Alignement des objets Modification avec le Pathfinder Outil concepteur de formes Recadrage Les calques Le principe des calques Organisation des calques Afficher, masquer Ajouter, supprimer Verrouiller Les sous calques Les couleurs Couleurs CMJN / RVB La fenêtre couleur Le nuancier Les dégradés L outil pipette Le texte Outil texte Texte captif, curviligne, vertical Modification de texte Fenêtre caractère et paragraphe Vectoriser un texte Les fonctions web L outil tranche L outil sélection de tranche Sauvegarder pour le web Format de fichier Les fichiers natifs ai Sauvegarde des fichiers pour l impression Exporter en PDF Exports divers LC Formateur , rue de Lecelles St Amand les eaux - Bureau : 57 rue des Féves St Amand les Eaux - Tél: +33 (0) Gsm : +33 (0) contact@lc-formateur.com Siret: Déclaration d activité enregistrée sous le numéro

4 HTML / XHML / CSS Une connaissance du monde de l internet (navigation, recherche) est requise Toute personne désirant créer un site web statique en HTML / XHTML et CSS sans utiliser un éditeur WYSIWIG. Être en mesure de créer des pages web statiques en HTML/ XHTML avec un éditeur basique (Notepad ++) et les mettre en forme avec du CSS. abordés. : 3 jours (3*7h= 21 heures) Le matériel et les logiciels Ressources nécessaires Quel éditeur choisir? Notepad ++, Netbeans, Brackets Les navigateurs Structure de base d un document HTML La balise HTML Définition de l encodage La balise HEAD Les metas informations Les balises utiles pour le référencement La balise BODY Mettre en forme du texte Le formatage du texte Les balises d entêtes Les listes non ordonnées Les listes ordonnées Les listes de définition Les abbréviations Les espaces insécables, les sauts de ligne... Les caractères accentués Les paragraphes L alignement des éléments Les tableaux Insertions de tableaux Insertion de lignes et colonnes Fusionner des lignes et colonnes Fractionner des lignes et colonnes Remplissage avec une couleur Mise en forme avancée avec des tableaux Les principaux attributs des tableaux Les images Les formats d images du web Les contraintes liées aux images Insertion d images Les liens hypertexte sur une image Les principaux attributs d une image Les liens hypertexte Création de lien hypertexte sur du texte Vers une page web, vers un serveur ftp Création de lien vers messagerie (mailto) Création de lien hypertexte sur des images Les principaux attributs sur un lien hypertexte Les médias Insertion de flash Insertion de vidéo Flash Insertion de vidéo Youtube Les formulaires La balise form Les champs de texte Les zones de texte Les listes déroulante Les boutons radiox Les cases à cocher Les boutons envoyer et rétablir HTML avancé Insertion de code Javascript. Gestion des couleurs web Caractères spéciaux LC Formateur , rue de Lecelles St Amand les eaux - Bureau : 57 rue des Féves St Amand les Eaux - Tél: +33 (0) Gsm : +33 (0) contact@lc-formateur.com Siret: Déclaration d activité enregistrée sous le numéro

5 HTML / XHML / CSS (SUITE) Norme actuelle et tendance du CSS CSS 2 CSS 3 Compatibilé dans les navigateurs Mettre en ligne mon site De quoi ai je besoin? Les outils indispensables Mise en forme à l aide de CSS Principes des styles Créer des régles de style Comment structurer le CSS? Ou placer votre code CSS? Dans une feuille de style externe Dans un document Dans un style intégré Avantages et inconvénients des différentes méthodes La syntaxe Les sélecteurs de style Les balises Les classes Les identificateurs Les sélecteurs d éléments imbriqués (Héritage) Les pseudo-éléments : les liens CSS, les lettrines Les propriétés CSS La gestion du texte, polices, couleur, taille, grassage... Les arrière-plans Les blocs Les boites Les bordures Les listes Le positionnement Appliquer un style CSS à un élément Sur quelle balise HTML? Avec une classe Avec une id Avec la balise span Cas pratiques Colonnes en CSS Eléments flottants Mise en forme de menu Jquery en CSS Développement d un site en XHTML et CSS

6 HTML5 / CSS3 Connaissance de base des pages web et de la programmation web Développeur web, webmaster Comprendre l importance d HTML 5 et savoir créer des pages web simples en utilisant HTML et CSS 3. abordés. 3 jours (3*7= 21 heures) HTML5 Définition et orientations d HTML5 L histoire d HTML et CSS Aperçu des nouveaux standards HTML 5 et CSS3. Définition des pages web et des navigateurs Séparation du contenu (code HTML 5) et de la mise en forme (feuille de style CSS) Utilisation des requêtes multimédias La compatibilité des navigateurs et le futur de HTML 5 Définition des parties de la page par des sections Les balises et les parties de la page HTML 5 : <section>, <article>, <aside>, <nav>, etc Sous-sections HTML 5 : <header>, <hgroup>, <footer> Simplification des contenus multimédias (audio, vidéo, animations) Logiciel de lecture intégré au navigateur Balises simplifiées <audio> et <video> Insertion simplifiée de contenus Flash Les Formats vidéos : Theora, H264 et WebM (codec VP8 ) Définition des éléments graphiques Canvas et le dessin de graphiques sur une page web SVG (Scalable Vector Graphics) et la création de graphiques interactifs CSS3 Les nouveaux sélecteurs CSS3 Puissance des sélecteurs Cibler des balises au sein du même parent Cibler les balises en fonction de leurs attributs Les nouvelles pseudo classes Les bordures des blocs Création et réglage des coins arrondis Utilisation d images Les ombres et effets d ombres Le fond des blocs Spécifier la taille Définir son positionnement Sélection de plusieurs fonds Le texte Ombres et effets d ombres Coupures et mises à la ligne Justifier et aligner le texte Utilisation de polices personnalisées Transformations, transitions et animations Les effets 2D Les effets 3D Les animations simples et multiples Multicolonnage automatique Nombre et largeur des colonnes Trait de séparation des colonnes Espacement entre les colonnes Equilibrage des colonnes

7 JAVASCRIPT La connaissance du HTML, la pratique d un langage de programmation est un plus Concepteurs ou futurs concepteurs de sites web concevoir des sites web interactifs en utilisant JavaScript et DHTML, créer des animations, des interfaces sécurisées... abordés 3 jours (3*7h= 21 heures) Les bases du langage Qu est-ce que JavaScript? Maîtriser les bases : variables, expressions, opérateurs, structures de contrôles Définir des fonctions Gérer les erreurs Accéder aux ressources du navigateur Objets Javascripts Les objets String, Math, Date, Array, Window, Navigator Les méthodes et fonctions JavaScript Animation Gérer les événements OnLoad, OnUnload Gérer les rollovers : OnmouseOver, OnmouseOut Déclencher par rapport au temps : setinterval et settimeout Gérer les zooms, les diaporamas Le DHTML et DOM Accéder aux éléments du document HTML via DOM Modifier, masquer et afficher des objets DHTML Modifier dynamiquement les attributs des éléments d interface (Police, couleur ) Déplacer du texte, des images Gérer un menu dynamiquement Les apports d Ajax L objet HttpRequest Accéder à des ressources et éléments XML et/ou PHP Les bibliothèques Ajax : prototype, script.aculo.us. Les flux RSS Contrôle des données de formulaire Gérer les objets Form, Text, Checkbox, Radio, Button, Submit Utiliser les litstes : Select, Option Sécuriser les saisies Gérer les évenements Javascript Valider les données avec OnSubmit Aider à la saisie avec OnFocus Vérifier les données avec OnChange, OnBlur

8 BOOTSTRAP TWITTER Des connaissances de base en HTML, CSS sont un plus indéniable. Concepteurs ou futurs concepteurs de sites web. Etre en mesure de concevoir des sites web responsive au design innovant avec le framework Bootstrap. abordés 3 jours (3*7h= 21 heures) Introduction et prise en main Présentation : concept, versions et historique Qu est-ce qu un framework CSS Framework CSS et «UI Kit» Ressources : Bootstrap Expo Les plug-ins et autres extensions Télécharger et intégrer Bootstrap Générer une version personnalisée de Bootstrap Le système de grille Mise en page statique, fluide, adaptative Le principe Utiliser plusieurs grilles dans une page Imbriquer des grilles Modifier l ordre des colonnes Atelier : création de gabarits de mise en page Les éléments de base (CSS) Présentation La typographie L insertion de code Les tableaux Les images Les outils CSS Atelier : création d une page article Les panneaux Les barres de progression Atelier : création d une fiche produit Les extensions Javascripts Présentation : API Bootstrap Les transitions Les boîtes de dialogue (modales) Menus déroulants Scrollspy Les onglets Les infobulles (tooltip et popover) Alertes et messages d information Afficher / Masquer des éléments : accordéon Carrousel Le système de navigation secondaire «Affix» Atelier : création d une page d accueil Personnaliser Bootstrap avec LESS Qu est-ce qu un préprocesseur Variables et mixins Règles imbriquées Fonctions internes à Bootstrap Composants et approche modulaire Atelier : Mise en place d un mini site complet Les composants réutilisables Les icônes Les boutons Les formulaires La navigation Le fil d Ariane La pagination Les badges Les vignettes et les médias Les listes

9 ZURB FOUNDATION Des connaissances sur le HTML et CSS sont indispensables pour appréhender sereinement cette formation. Etre en mesure de concevoir des sites RWD et les maintenir à jour à l aide du framework Zurb Foundation. Concepteurs ou futurs concepteurs de sites web. abordés 2 jours (2*7h= 14 heures) Introduction Qu est-ce qu un framework CSS? Trouver des ressources sur le net Télécharger et installer Foundation Du CSS structuré Organisation de la feuille de style Les medias queries Principe et fonctionnement Le système de grille fluide Le principe de la grille Compter jusqu à 12 Mise en page Utiliser plusieurs grilles dans une page Imbriquer des grilles Les basiques La typographie Les positionnements Les tableaux Les tableaux de prix Les images Les styles imprimables Visibilité en fonction de la taille d écran Les panneaux Les égaliseurs Les barres de progression Vidéo adaptive Les extensions JS Les menus déroulant (Off-canvas, Magellan Sticky nav ) Les boites de dialogue (modal) Les infobulles Les accordéons Les onglets Diaporama Orbit slider Galerie d image Lightbox Les validations de formulaire Personnaliser Foundation avec SASS Qu est-ce qu ;un préprocesseur CSS? Quel intérêt? Les variables Les mixins Les composants Les boutons et groupes de bouton Les formulaires, switch et barres de rangées La navigation Le fil d Ariane La pagination Les étiquettes Les vignettes et les médias Les listes

10 WORDPRESS L utilisation régulière d un système d exploitation Windows ou Mac et d un navugateur internet est nécessaire Toute personne ou webmaster souhaitant créer son site web et l administrer via CMS Maîtriser le CMS Wordpress pour créer et administrer un site Internet. Un poste par personne, exposés théoriques, mise en pratique, suivi de travaux de synthèse reprenant les points abordés 3 jours (3*7h= 21 heures) Installer Wordpress Présentation de Wordpress Installation locale de WAMP Modification du fichier de configuration Installation de Wordpress en 5 minutes Les articles Créer, modifier, supprimer un article Mise en forme de l article ation Créer, modifier, supprimer une catégorie Affecter un article à une catégorie Les mots clés Les médias Ajouter, modifier, supprimer une image Joindre un fichier à un article ou une page Les liens Insertion de lien Les options du lien Ajouter, modifier, supprimer une catégorie de lien Les pages Créer, modifier, supprimer une page Mise en forme de la page ation Mettre une image à la une Les commentaires Ajouter un commentaire Gérer les statuts des commentaires L apparence Installer, activer un théme Les options du théme Activer, déscativer un Widget Ajouter, modifier, positionner un menu Gérer l entête de votre site Changer l arrière plan de votre site L editeur (Modifier le code HTML, CSS, PHP) Les extensions Installer une extension Activer, désactiver une extension Configurer une extension Editer une extension Les utilisateurs Ajouter, modifier un utilisateur Affecter les droits aux utilisateurs Gérer votre profil Les outils Installer de nouveaux outils Les imports Les exports Les réglages Paramétrage du blog Les options de lecture et d écriture Les options de discussion Les options des médias Les options des permaliens Mise en ligne de votre blog Quel type d hébergement? Transférer mon site chez mon hébergeur

11 PRESTASHOP Utilisation régulière de système Windows ou Mac et d un navigateur internet Toute personne désirant mettre en place un site marchand. Être capable d installer et d administrer une boutique en ligne réalisée avec Prestashop abordés 3 jours (3*7h= 21 heures) Téléchargement et installation Télécharger Prestashop Installer un serveur local pour configurer sa boutique Configuration de prestashop Transfert FTP pour la mise en ligne Configuration de la boutique Gestion des langues Gestion des taxes (zones, états) Gestion des transporteurs et des livraisons Gérer vos préférences de boutiques (apparence, logo, s...) Le catalogue des produits Créer et supprimer des catégories de produits Créer et renseigner des fiches produits Créer des déclinaisons de produits (tailles, couleurs, ) Gérer le catalogue (fabricants, attributs, prix dégressifs) Personnaliser sa boutique Prestashop Les outils nécessaires Installer des templates Déplacer les blocs dans la page Les plus Créer des bons de réduction Insérer des CMS (création de pages de contenu) Gérer de multiples utilisateurs et de leurs permissions Statistiques et optimisation du volume de commandes Visualiser des paniers Optimiser référencement SEO (URL-rewriting, keywords ) Sauvegarde et sécurité Principales règles de sécurité Sauvegarder le site Sauvegarder la base de données Les comptes clients Créer et modifier des comptes clients Gérer des groupes de clients Les commandes et la facturation Gérer les commandes et les factures Gérer des retours produits et avoirs Gérer des stocks produits Mode de paiement sécurisé Présentation des solutions de paiement Avantages et inconvénients Installation d un module bancaire