Titre Professionnel Designer Web - Mandyben · • Première Pro les bases du montage vidéo • After Effects les bases du Motion Design • Référencement naturel et payant •

4Version du 08-2017

Lieu de la formation : Locaux de Mandyben ou chez le client | Nombre de stagiaires (si en session) : 3 minimum - 12 maximum

Moyens pédagogiques : 1 poste par stagiaire - 1 Vidéo projecteur - Plateforme E-learning

Modalités pédagogiques : Alterne temps de présentation, d’échanges en groupe avec l’intervenant et réflexion personnelle

Modalités d’évaluation : Cas pratique en continu avec évaluation par le formateur

Formalisation à l’issue de la formation : Attestation de fin de formation et certification possible

CCP 1 : Motion Designer / Designer Web (24 jours)• Prise de vue vidéo• Story board• Montage avec Première Pro• Compositing avec After Effects• Culture Web et Ergonomie UX/UI Design• Conception Cahier des charges• Maquette Graphique Interface Web (Webdesign responsive)

CCP 2 : Intégrateur Web E-commerce (25 jours)• Intégration HTML5/CSS3 et Bootstrap (Perfectionnement)• PHP MySQL• WordPress et le plugin WooCommerce• CMS Prestashop - Administrateur• JQuery et java script• Gestion de projet Web E-commerce

CCP 3 : Community Manager Chef de Projet (22 jours)• Gestion de projet de communication digitale• Cadrage et prise de vue vidéo• Première Pro les bases du montage vidéo• After Effects les bases du Motion Design• Référencement naturel et payant• Web marketing• Rédiger des contenus Web• Les réseaux sociaux

Notre certification intègre un dispositif pédagogique d’E-learning qui s’appuie sur :

• La mise à disposition sur support analogiqueet/ou numérique des ressources nécessairesà la formation sur une plateforme de BlendedLearning (alliant cours à distance, tutoriels,exercices et QCM en ligne avec Scoring)

• La vérification, la sécurité et la visibilité du tempspassé par le bénéficiaire (compteur de temps deconnexion), le scoring (résultats des QCM) et lapossibilité d’éditer les statistiques.

• Une expérience supplémentaire en adéquationavec la formation en présentiel.

• Le relationnel via la plateforme avec le formateur pour répondre à toutes questions concernant lescours et révisions en ligne.

• Un accès de 2 mois sur notre plateforme deBlended Learning pour continuer à effectuer latotalité des cours et exercices en ligne.

Form

atio

n ce

rtifi

ante

Public : Salarié, demandeur d’emploi, intermittent Pré-requis : Bonnes bases en graphisme, infographie, conception visuelle et informatique.

Durée : 3 modules (CCP) de 24, 25 et 22 jours | Possibilité de les passer séparemment

Objectifs : La formation DESIGNER WEB vous apportera les méthodes de conception et de production d’un projet multimédia de A à Z, élaborer des produits de communication, gérer un projet Web, gérer le référencement Web, utiliser des solutions E-commerce, concevoir et monter une vidéo, gérer la relation client ...

Titre Professionnel Designer Web

58 [email protected] ion.com Version du 08-2017

CCP2 : Intégrateur Web E-commerce25 jours (175 heures)

Le titre professionnel est composé de trois certificats de compétences professionnelles (CCP)Celui-ci prépare à la certification du CCP2: Permettre aux infographistes, webdesigners et intégrateurs web d’acquérir de nouvelles compétences en développement de solutions e-commerce en tenant compte du cahier des charges, du référencement, de l’accessibilitéet de l’ergonomie.Description des composants de la certification :- Intégrer des pages Web en tenant compte des standards, du référencement, del’accessibilité et de l’ergonomie- Adapter des systèmes de gestion de contenus à partir d’un cahier des charges- Publier des pages Web.

59Version du 08-2017

25 jours (175 heures) de formation dont 3 jours en Blended Learning

Le stagiaire dispose, en plus de la formation présentiel d’un accès à notre plateforme de E-learning durant 2 mois. Contenu du Dispositif et modalités d’encadrement et d’assistance pédagogique :L’action de formation objet des présentes est un dispositif pédagogique intégré qui s’appuie sur :- la mise à disposition sur support analogique et/ou numérique des ressources nécessaires à la formation sur une plateforme de Blended Learning (alliant cours à distance, tutoriels, exercices et QCM en ligne avec Scoring)- la vérification, la sécurité et la visibilité du temps passé par le bénéficiaire (compteur de temps de connexion), le scoring (résultats des QCM) et la possibilité d’éditer les statistiques de manière officielle.- une expérience supplémentaire en adéquation avec la formation en présentiel.- le relationnel via la plateforme avec le formateur pour répondre à toutes questions concernant les cours et révisions en ligne.







Introduction à HTML 5 et CSS3 (2h)• 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 (2 h)• 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 (2 h)• 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 (1 h)• 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

Dessiner avec HTML 5 (2 h)• Dessiner en JavaScript• Contexte• Accessibilité

La géo-localisation avec HTML 5 (1 h)• Vue d’ensemble• La vie privée de l’utilisateur• Géolocaliser ses utilisateurs sur Google Maps

CSS3 (2 h)• 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 (1 h)• 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 (1 h)• Transformations (2D et 3D)• Transitions• L’animation

Public : Maquettistes, infographistes, Webmasters, responsables communication, chefs de projet, demandeur d’emploi Pré-requis : Bonne connaissance de l’environnement informatique (pratique courante d’OS X ou de Windows)

Durée : 14 heures (2 jours)

Objectifs : Cette formation vous permettra d’apprendra à créer des pages et des applications Web en HTML5 et CSS3. Décou-vrez la puissance du HTML5 notamment en termes d’applications multimédia (smartphones et tablettes)

HTML5 et CSS3







Bootstrap (HTML5/CSS3/responsive)

Vue d’ensemble de Bootstrap (2 h)• Présentation du framework Bootstrap• Pourquoi Bootstrap ?• Bootstrap et le responsive design• Bootstrap et le frameworks javascript: JQuery

Inclure Bootstrap dans un projet (4 h)• Architecture Bootstrap• Des composants basés sur des classes CSS• Les templates de base• Doctype HTML5• Le système de grille pour positionnement o Grille fixe o Grille élastique• Les layouts• Le responsive Design

Les classes CSS de base avec Bootstrap (3 h)• Typographie• Les tableaux• Les formulaires• Les boutons• Les images• Les icones• Vignettage

Les composants Bootstrap (4 h)• Menus déroulants • Groupement de boutons • Barres de navigation• Fil d’arianne• Alertes• Barre de progression• Pagination• Barres de progression• Classes diverses

Manipuler Bootstrap en Javascript via jquery (4 h)• Les transitions• Gérer les fenêtres modals (type lightbox)• Menus déroulants• Créer des tabulations• Mettre en place des aides• Le caroussel de photos

Graphisme (4 h)• S’approprier Bootstrap graphiquement• Ajouter, gérer son proper css• Surécriture de css

Public : Maquettistes, infographistes, Webmasters, responsables communication, chefs de projet, demandeur d’emploi Pré-requis : Avoir suivi la formation HTML/CSS Niveau 1, une formation équivalente, ou attester de son niveau.


Objectifs : S’approprier bootstrap, le template responsive design de twitter permettant la réalisation de site internet dans un usage actuel des langages Html5, css3, javascript (via jquery) et multisupport (Ordinateur, smartphone, tablette)







PHP MySQL - Niveau 1

Le modèle relationnel (6 h)• Origine des bases de données• Les différents modèles• Les bases de données navigationnelles, les bases de données relationnelles Les types de données (6 h)• Les différents types• Normalisation ANSI• Les conversions explicites et implicites• La valeur NULL• La pseudo colonne ROWNUM• La pseudo table DUAL sous Oracle Gestion des objets (5 h)• Les tables : CREATE TABLE, ALTER TABLE, DROP TABLE• Les vues : CREATE VIEW, CREATE OR REPLACE VIEW, DROP, VIEW

Sélection d’information Opérateur Select From Where Les plugins (8 h)• La syntaxe de l’ordre SELECT : sélection de colonnes, tri des lignes, restriction• Les opérateurs de comparaison• Les opérateurs logiques, les jointures : equi-jointure, auto-jointure, jointure croisée, jointure externe

Les fonctions (10 h)• Les différents types de fonctions : numériques, sur caractères, sur les dates• Les fonctions de conversion • Les fonctions de groupe• Les autres fonctions• Les ordres de mise à jour• Les commandes INSERT, DELETE, UPDATE

Public : Gestionnaire de site, Webmasters, Développeurs de sites Internet, Demandeur d’emploi Pré-requis : Bonnes connaissances dans le langage javascript, HTML, CSS


Objectifs : Cette formation permet de maîtriser toutes les tâches d’administration d’un serveur de bases de données MySQL







CMS WordPress - Administrateur

Introduction (1 h)• à quoi ça sert ?• La communauté WordPress.• L’interface Installation de WordPress (2 h)• 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 (7 h)• 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...)

Les plugins et extensions (4 h)• Recherche et installation de plugins supplémentaires

Création d’un thème personnalisé (4 h)• Utilisation d’une maquette personnalisée• Personnaliser son thème• Utilisation des CSS pour la mise en forme

Administration (3 h)• 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

Public : Maquettistes, infographistes, Webmasters, demandeur d’emploi Pré-requis : Bonne connaissance de l’environnement informatique (pratique courante d’OS X ou de Windows)


Objectifs : Comprendre l’utilisation du CMS Wordpress, paramétrer et personnaliser votre thème (css), installer des plugins et fonc-tionnalités supplémentaires.







WordPress et le plugin WooCommerce

Découvrir les sites de e-commerce (1/2 h) Comprendre ce qu’est WooCommerce (1 h)• Installer WooCommerce• Installer un thème WooCommerce• Intégrer les exemples de produits Paramétrer sa boutique (8 h)• Paramétrage général• Paramétrer son catalogue en ligne• Les permaliens

• Les comptes client• Configurer les e-mails de sa boutique en ligne• L’ emailings pour votre eCommerce• Modes de paiements • Options de commande • Payer en ligne par carte de crédit• La taxation de sa boutique

• Faire l’inventaire des produits en ligne• Gérer les produits de sa boutique• Ajouter un nouveau produit• Les données des produits• Catégories de produits• Images aux produits• Noter et commenter les produits• Modes de livraison

Personnaliser sa boutique (2 h 1/2)• Les meilleurs plugins pour faire du eCommerce avec WordPress• Page d’accueil de l’e-boutique

Gérer les ventes (2 h)• Gérer les commandes de sa boutique en ligne• Analyser les ventes de son site e-commerce

Public : Gestionnaire de site, Webmasters, Développeurs de sites Internet, Demandeur d’emploi Pré-requis : Avoir suivi la formation Wordpress Niveau 1, une formation équivalente, ou attester de son niveau.


Objectifs : Apprendre à gérer le Ecommerce sur Wordpress. Faire de la vente et gérer de vos produits, utiliser différents systèmes de paiement (Paypal, CB), générer des statistiques de vente, ajouter des plugins spécifiques (meilleures ventes, promotions, etc), calculer les différents coûts de transport et des taxes, mettre en place une gestion des stocks.







CMS Prestashop - Administrateur

La mise en place (3 h)• Mise en place opérationnelle d’une boutique en ligne• Administration avancées du catalogue produits (gestion des références, images, stocks, catégories...)

Le référencement (3 h)• Ecriture pour le ecommerce et le référencement• Réseaux sociaux et ecommerce• Gestion des stats

Les modules (10 h)• Installation de divers modules (diaporama, pub, calendrier , google map...)• Administration du moteur de recherche• Modules Prestashop : whishlist, gestion des catégories avançées, modules de promo ...• Gestion des modules et positions des blocs dans la page

Les thèmes (7 h)• Création d’un thème Prestashop, notions de CSS• La personnalisation des thèmes prestashop,• Modules complémentaires Prestashop.

Administration (7 h)• Administration avancée des clients et groupes de clients• Administration des commandes• Administration des transporteurs et frais de ports• Administration des employés et permissions• Administration des préférences et outils (imports, etc..)• Le cache et les outils de debug

Le paiement (3 h)• paiement par virement et chèque• paiement par paypal• paiement par carte bleue



Objectifs : Comprendre l’utilisation du CMS Prestashop, réalisez des intégration de templates, installez des plug-in, rentrer dans le paramétrage avançé de Prestashop.







JQUERY et java script

JAVA SCRIPT (10 h)• La boîte de dialogue alert()• Les instructions• Les fonctions• Où placer le code dans la page• Les variables • Les types de variables • Tester l’existence de variables avec typeof• Les opérateurs arithmétiques • Calculs simples • La concaténation• Interagir avec l’utilisateur • Convertir une chaîne de caractères et nombre• Les conditions • Les opérateurs de comparaison • Les opérateurs logiques • « if else » • Incrémentation• Les boucles • La boucle while • La boucle for

JQUERY (11 h)• Les bases du framework• Inclure jQuery• fonction de base : jQuery()• ready • Vérifier que tout cela est fonctionnel• Le principe de fonctionnement • Les sélecteurs (Frères et parents)• jQuery et les événements • click, dblclick, scroll, L’écoute sur le clavier• Manipuler le code CSS avec jQuery • Propriété nativement géré par jQuery• Animez vos éléments • hide/show/toggle,fade, slide, animate, stop, Callback, setInterval

Public : Maquettistes, infographistes, Webmasters, responsables communication, chefs de projet, demandeur d’emploi Pré-requis : Bonnes connaissances dans le langage HTML, CSS


Objectifs : Actualisation des connaissances en Html, Css et utilisation du Javascript (via jquery ), le langage complémentaire à un usage des navigateurs toutes générations.







Gestion de projet Web E-commerce

Connaitre les missions et responsabilités du chef de projet web (3 h)• Rôle & Importance de la mission du chef de projet• Le cahier des charges client• Le cas particulier de l’A.M.O. (assistance à maitrise d’ouvrage)• Les phases du processus de production web : conception / création graphique / intégration / développement• Les métiers du web• Les étapes de validation• Le rétroplanning de production• Analyser les devis et évaluer les prestataires ( nombre de jours/homme afectés aux phases du processus de production)

Connaitre les diférentes technologies existantes, maîtriser la Technologie du web et des langages, des infrastructures réseau, de L’architecture réseau, de l’accessibilité et et de la sécurité

Les basiques du web (2 h)• navigateurs & OS• résolutions d’écran (ordinateurs, tablettes, smartphone)• protocole http et ftp• local/distant• nom de domaine & hébergement• la gamme serveur (mutualisé, virtualisé, dédié)• site statique et dynamique (frontend/backend)• la notion de gabarit

Les différents langages (2 h)• HTML/CSS• javascript (le framework jquery)• php/mysql• java & objective C (application smartphone : native, hybrique, webapp)• les frameworks front-end & back-end

Les diférents CMS (1 h)• wordpress/Joomla/Drupal/EZ Publish• Typo3/Prestashop/Magento• etc...

Les wireframes (schéma fonctionnels) et les basiques de l’ergonomie web (3 h)• les zones• les menus• les niveaux de l’arborescence• la mise en forme éditoriale (titre, sous-titre, chapeau, intertitre,paragraphe...)• pertinence des termes choisis pour les items de navigations

Savoir intégrer le web 2.0 Et le web mobile (3 h)• Le responsive design (bootstrap)• Les réseaux sociaux (facebbok, twitter, google plus…)• Le hotlinking et les plateformes de difusion média (youtube, dailymotion,vimeo, soundcloud, fickr...)• Les plateformes en fonction du secteur d’activité (exemple secteur tourisme : abritel, homelidays, airbnb...)• La stratégie du déploiement et de la circulation de l’information



Objectifs : Faciliter la prise en compte des nouveaux outils numériques pour les TPE/PME, notamment pour mettre en oeuvre un projet Web E-commerce.



Objectifs : Discussion, cas concrêt, rappel, E-learning et préparation et présentation du book et de l’entretien pour l’examen final.

Selon l’évolution du programme, notre formateur donne une série d’exercices pratiques, ainsi que des tutoriaux pour une mise en pratique professionnelle des acquis de la formation.

Les programmes sont disponibles ici :

http://www.mandyben-formation.com/programmes/elearning/photoshop.pdf

http://www.mandyben-formation.com/programmes/elearning/Illustrator.pdf

http://www.mandyben-formation.com/programmes/elearning/Indesign.pdf

http://www.mandyben-formation.com/programmes/elearning/acrobat.pdf

http://www.mandyben-formation.com/programmes/elearning/dreamweaver.pdf

http://www.mandyben-formation.com/programmes/elearning/edge-animate.pdf

http://www.mandyben-formation.com/programmes/elearning/reseaux-sociaux.pdf

http://www.mandyben-formation.com/programmes/elearning/wordpress.pdf

http://www.mandyben-formation.com/programmes/elearning/muse.pdf

http://www.mandyben-formation.com/programmes/elearning/ergo_web.pdf

Formation tutorée et/ou FOAD - E-Learning

Documents

Titre Professionnel Designer Web - Mandyben · • Première Pro les bases du montage vidéo • After Effects les bases du Motion Design • Référencement naturel et payant •