Formation au métier d`intégrateur web

Transcription

Formation au métier d`intégrateur web
Formation au métier d’intégrateur web
L’objectif de la 3W Academy est de former des petits groupes d’élèves à l’intégration de
sites internet ainsi qu’à la création d’applications web simples telles qu’un blog ou un site
d’e-commerce en utilisant des outils (CMS).
Aucun prérequis en programmation n’est nécessaire pour intégrer la 3W Academy : la
formation est concentrée sur ce qui est uniquement nécessaire et sur les bonnes
pratiques pour obtenir des résultats de qualité et ainsi devenir un intégrateur web
opérationnel.
Les technologies enseignées pour notre formation d’intégrateur sont toutes celles
indispensables aujourd’hui : HTML 5, CSS 3, JQuery 2, Bootstrap 3, LESS, WordPress 4.
Elles sont utilisées sur presque 100% des sites internet, nous avons choisi les langages
de l’intégration (HTML, CSS) mais aussi les outils / bibliothèques (JQuery, LESS,
Bootstrap, WordPress) les plus utilisés et les plus demandés dans ce milieu.
Notre programme en cours du soir vous permettra d’être capable de réaliser n’importe
quel design de site internet.
Vous y découvrirez énormément de bonnes pratiques pour gagner du temps, et être
productif, car nous savons qu’une grande partie de nos étudiants finissent par se bâtir
une carrière Freelance.
3WA - Formation au métier d’intégrateur web
HTML - CSS - JQuery - LESS - Bootstrap - WordPress
Page 1 / 10
Informations sur le cours
Nom : Intégrateur web HTML5 CSS3
Pré-requis : Comprendre les différents langages web
Horaires : 5:30PM-8:30PM
Jours : Mardi, Mercredi et Jeudi soir + un Samedi sur deux
Durée de la formation : 2 mois
Nombre d'heures : 112
Localisation : 460 Rue Ste-Catherine Ouest, Suite 301, H3B 1A7,
Montréal
Prochaine session : 4 Août 2015
Capacité : 15 étudiants
Prix : 2,000$ CAD
3WA - Formation au métier d’intégrateur web
HTML - CSS - JQuery - LESS - Bootstrap - WordPress
Page 2 / 10
Plan du cours
Semaine 1
Objectif
Découverte des langages HTML et CSS.
*
*
*
*
*
*
*
Première balises HTML
Sémantique web
Bonnes pratiques d’accessibilité
Nos premiers styles CSS (font-*, text-*)
Modèle de boite (block, inline, margin, padding).
Utiliser un environnement de travail (PHPStorm)
Utiliser les bons outils d’un intégrateur : générateur de contenu, compression…
Pré-requis
*
*
*
*
Comprendre les différents langages web HTML / CSS / PHP / JS
Compétences en Dactylographie
Utilisation d’un Système d’Exploitation
Connaissances des principaux raccourcis clavier
Notes
Cette première partie nous permet de démarrer sur de bonnes bases. Notre cours vous
permettra de vous remettre à niveau pour bien comprendre HTML5. De nombreuses
choses ont changé, et il est préférable d’y aller pas à pas.
3WA - Formation au métier d’intégrateur web
HTML - CSS - JQuery - LESS - Bootstrap - WordPress
Page 3 / 10
Semaine 2
Objectif
Approfondir la sémantique et commencer à positionner nos éléments.
*
*
*
*
*
Nouvelles balises HTML5 pour la structure d’un site
Utilisation des pseudo sélecteurs (hover, target, focus…)
Positionnement en CSS (fixed, float…)
Découper une maquette pour en faire un site internet
Mettre en pratique toutes les techniques apprises
Pré-requis
*
*
*
Sémantique HTML
Utilisation et règles simples en CSS
Bonnes pratiques de l’intégrateur
Notes
Cette seconde partie nous permet d’approfondir nos connaissances HTML et CSS.
L’utilisation de bonnes pratiques (comme la syntaxe Emmet dans PHPStorm), vous
permettra de sauver beaucoup de temps.
3WA - Formation au métier d’intégrateur web
HTML - CSS - JQuery - LESS - Bootstrap - WordPress
Page 4 / 10
Semaine 3
Objectif
Réaliser des sites internet concrets à partir de maquette.
*
*
*
*
Positionnement flottant
Effets de transition
Comment bien séparer son code CSS (bonne organisation, création de thèmes)
Intégration de contenu différent en gardant un design homogène
Pré-requis
*
*
Pseudo sélecteurs
Positionnement flottant
Notes
Nous souhaitons rentrer rapidement dans le métier d’intégrateur. Nos exercices sont
basés sur des vrais demandes de client.
3WA - Formation au métier d’intégrateur web
HTML - CSS - JQuery - LESS - Bootstrap - WordPress
Page 5 / 10
Semaine 4
Objectif
Apprendre à réfléchir sur la structure d’un site. Quelles sont les limites du CSS ?
*
*
*
*
*
*
*
*
Les dégradés en CSS3
Création de logo en HTML
Les pseudo sélecteurs d’enfant (:last-child, :first-child…)
Les positionnements « relative » et « absolute«
Utilisation des displays (inline, block, inline-block….)
Les sélecteurs :before et :after
Les transformations CSS
Utiliser ses propres polices / font
Pré-requis
*
*
Pseudo sélecteurs
Positionnement flottant
Notes
Afin de pouvoir évoluer de manière autonome après la formation, les étudiants ont besoin
de connaitre les limites des langages HTML et CSS. Attention à toujours garder à l’esprit
la sémantique et non l’affichage d’un site.
3WA - Formation au métier d’intégrateur web
HTML - CSS - JQuery - LESS - Bootstrap - WordPress
Page 6 / 10
Semaine 5
Objectif
Utiliser efficacement les formulaires et les tableaux en HTML.
*
*
*
*
*
Créer des formulaires efficaces et réutilisables
Utiliser pleinement les capacités des tableaux
Identifier des éléments CSS via ses attributs
Améliorer son design en utilisant le CSS3 (ombre, transition, transparence…)
Projet : créer un menu déroulant entièrement en CSS sur plusieurs niveaux.
Pré-requis
*
*
Excellente utilisation des displays
Positionnement absolut et relatif
Notes
Nous allons étudier les tableaux de la façon qu’ils devraient toujours être utilisés. En
jouant avec toutes les compétences acquises, nos étudiants peuvent déjà faire des
petites animations !
3WA - Formation au métier d’intégrateur web
HTML - CSS - JQuery - LESS - Bootstrap - WordPress
Page 7 / 10
Semaine 6
Objectif
Comprendre et utiliser des systèmes de grille pour obtenir un site responsive.
*
*
*
Créer un système de grille à 4 colonnes
Intégration complète d’une maquette en Flat Design
Utiliser des plugins JQuery
Pré-requis
*
*
Très bonne maîtrise de toutes les techniques de positionnement
Syntaxe emmet
Notes
Cette semaine vise à réaliser un autre projet concret en utilisant les techniques
d’aujourd’hui : le responsive web design, le design Flat, les plugins JQuery…
3WA - Formation au métier d’intégrateur web
HTML - CSS - JQuery - LESS - Bootstrap - WordPress
Page 8 / 10
Semaine 7
Objectif
Découvrir et utiliser efficacement Bootstrap. Le langage LESS.
* Le système de grille à 12 colonnes
* Gérer un design responsive facilement avec Bootstrap
* Les Glyphicons et styles de bases
* Utiliser et modifier des composants (onglet, barre de navigation, popover,
collapse…)
* Reproduire un site avec Bootstrap
* Le langage LESS (variables, mixins, imbrication de CSS, calculs…)
Pré-requis
*
*
Très bonne maîtrise de toutes les techniques de positionnement
Syntaxe emmet
Notes
Bootstrap est aujourd’hui une référence en matière d’intégration, il convient de bien
comprendre son fonctionnement. D’un autre côté, le langage LESS permet de sauver
beaucoup de temps lorsque nous faisons le CSS d’un site, c’est donc un point important
de notre formation.
3WA - Formation au métier d’intégrateur web
HTML - CSS - JQuery - LESS - Bootstrap - WordPress
Page 9 / 10
Semaine 8
Objectif
Apprenez à vous servir de WordPress 4!
*
*
*
*
Création d’un blog WordPress 4
Utilisation de thèmes et plugins supplémentaires
Création d’un thème sur mesure : plusieurs pages, templates sur mesure
Administration de son thème via le backoffice WP
Pré-requis
*
*
Tout ce que nous avons vu avant
Utilisation de Bootstrap
Notes
WordPress est incontournable aujourd’hui. Il faut savoir réaliser des sites internet avec ce
CMS. Nous allons approfondir son utilisation et réaliser un thème complet sur mesure et
administrable.
3WA - Formation au métier d’intégrateur web
HTML - CSS - JQuery - LESS - Bootstrap - WordPress
Page 10 / 10

Documents pareils