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