Programme de Formation Google Apps Marketplace

Introduction

Notions fondamentales. OpenID, Marketplace, API...

Autres systèmes équivalents

Comparaison avec le Google Apps Engine, et GApps Scripts

Rappels technologiques Première application Développement d'une application minimale

Création d'un compte de vendeur sur Marketplace

Déploiement sur Marketplace ; les listings, privés et publiques

Utilisation de l'application

Atelier : une première application au complet Les API Google

Pourquoi utiliser une Application Programming Interface

L'API pour gmail

API bureautiques

L'API pour Google Site

Atelier : applications avec lecture et écriture grace aux API Authentification

Principes et détails d'authentification unifiée

Single Sign On : inscription

SSO : mise en place

Atelier : authentification complète par Google

Programme de Formation HTML/CSS : Fondamentaux + JavaScript

Introduction

Edition de sites internet

Architecture d'un site

Communication navigateur/serveur (protocole, url...)

Technologies associées au web

Outils de développement

Conception de pages web avec HTML

Présentation du HTML : Historique, versions

Balises et attributs : principes et fonctionnements

Structure d'une page web (en-tête et corps)

Atelier : première page internetPrincipales balises HTML

Mise en forme de texte (polices, titres, paragraphes, texte préformaté)

Création de liens hypertextes (page, fichier, messagerie) et cibles

Insertion d'images et légende

Listes à puces (non ordonnées / ordonnées)

Tableaux : en-têtes, corps, propriétés

Formulaires : principe, composants, propriétés, attributs

Sons, vidéos

Atelier : un premier formulaire d'envoi de mailPrincipes de base de CSS

Syntaxe d'une règle CSS

Types de sélecteurs (Balise, ID, Classe)

Pseudo-classes : de liens, de texte...

Architecture de feuilles de style

Politique de style d’un site Internet

Méthodes de création de sites web

Les sélecteurs et pseudo-selecteurs CSS3

Atelier : styliser une page existantePrésentation des enjeux du référencement

Concepts et insertion des balises d’en-tête

Quelques règles à respecter

Techniques avancées de création HTML

Présentation des techniques d’alignement

Présentation des balises sémantiques : Article, Header, Section, Footer

Création du squelette HTML5

Définition des feuilles de styles

Positionnement des block

Gestion de la compatibilité entre navigateurs (cross-browser compatibility)

Atelier : Réaliser un site avec une structure HTML5Accessibilité ( accès au web pour les personnes handicapées )

Standards et ergonomie (WAI et ADAE)

Définition de l’architecture HTML

Feuilles de styles

Création des pages de contenus et application des normes

Les éditeurs WYSIWYG et l’accessibilité

L’intégration d’outil CMS et l’accessibilité

Atelier : tester l'accessibilité d'un siteConcepts de base du JavaScript

Principes et fonctionnements

Variables et types de données

Opérateurs

Instructions

Structures de contrôles (conditions, boucles...)

Définition et utilisation de fonctions

Objets prédéfinis(document, window ...)

Contrôle de saisies et traitement de formulaires

Gestion des fenêtres (ouverture, fermeture, communication)

Boîtes de dialogue

Atelier : apprendre à valider un formulaireGestion des événements

Chargement d’une page

Gestion de la souris

Contrôle de la saisie clavier

Comportements et actions

Atelier : réaliser une galerie de photosManipulations de page en JavaScript / DHTML

Présentation du DOM (Document Object Model)

Accès, modification, ajout d'éléments et d'attributs

Gestion dynamique des CSS

Atelier : scénarios et menus dynamiques

Programme de Formation Webpack : créer un bundle de votre application web Découvrir Webpack Historique des versions

Les avantages de Webpack

Gulp vs Grunt vs Webpack

La documentation

Rappel node et npm

Atelier : Installer et créer un projet avec Webpack Comprendre les principes de base Configuration de l'environnement: webpack.config

Gestion des points d'entrées et des sorties

Utiliser les loaders et les plugins

Démarrer une application à l'aide des scripts npm

Utiliser les syntaxes ES6: babel loader

Atelier : Gérer un projet avec typescript

Gérer l'environnement et optimisations

Mode dev et mode prod

Créer un serveur local avec webpack-dev-server

Les sources map

Mise à jour automatique: watch mode

Minification des sources

Utiliser le lazy loading

Atelier : Configurer un projet pour l'environnement de développement et de production

Programme de Formation Sass : Construire dynamiquement vos styles CSS

Installer l'environnement

Présentation de Sass

Différence entre Less et Sass

Dart Sass vs LibSass vs RubSass

Différence entre Sass et scss

Atelier : Installer Sass et compiler un premier fichier Utiliser les syntaxes de base Déclaration de variables

Les types de valeurs

Les opérateurs

Définir des valeurs par défaut

Les expressions SassScript

Comprendre le scope des variables

Les conditions @if et @else

Les boucles @for, @while Atelier : Utiliser les variables pour définir les couleurs d'un thème Ecrire des règles de style

Présentation de l'acronyme DRY

Les règles d'imbrications

Le sélecteur parent "&"

Les combinateurs

Utiliser les interpolations de chaine

Imbrication de propriété

Atelier : Mettre en forme une barre de navigation Utiliser les mixins

Déclarer une mixin (@mixin)

Inclure une mixin dans une classe (@include)

Définir des arguments (optionel, obligatoire, nommé)

Transmettre une liste de valeur

Utiliser le bloc de contenu (@content)

Atelier : Utiliser les mixins pour créer une grille responsive Exploiter des collections

Présentation

Différence entre list et map

Parcourirs les valeurs à l'aide de @each

Manipuler les valeurs avec les modules sass:map et sass:list

Atelier : Utiliser les maps pour décliner un composant css dans plusieurs couleurs ou en plusieurs tailles Utiliser les fonctions

Déclarer et utiliser une fonction (@function)

Définir des arguments (optionels, obligatoires, nommés)

Transmettre une liste de valeur

Retourner des valeurs (@return)

Différence entre les fonctions et les mixins

Atelier : Recréer la fonction calc() de css Factoriser le code

Découper son code dans plusieurs fichiers: les _partials

Importer des partials avec @import

Utiliser @import pour importer des fichiers css

Les placeholder

Etendre les selecteurs @extend

Différence entre @extend et @mixin

Atelier : Répartir notre code dans plusieurs fichiers dédiés Créer des modules

Les modules Sass : color, list, map, etc

Présentation de la règle @use

Charger un module

Les règles de nommage

Rendre des propriétés privées

Configurer les variables à l'import

Atelier : Importer et paramètrer un module

Programme de Formation HTML/CSS : Fondamentaux

Introduction

Edition de sites internet

Architecture d'un site

Communication navigateur/serveur (protocole, url...)

Technologies associées au web

Outils de développement

Conception de pages web avec HTML

Présentation du HTML : Historique, versions

Balises et attributs : principes et fonctionnements

Structure d'une page web (en-tête et corps)

Atelier : première page internetPrincipales balises HTML

Mise en forme de texte (polices, titres, paragraphes, texte préformaté)

Création de liens hypertextes (page, fichier, messagerie) et cibles

Insertion d'images et légende

Listes à puces (non ordonnées / ordonnées)

Tableaux : en-têtes, corps, propriétés

Formulaires : principe, composants, propriétés, attributs

Sons, vidéos

Atelier : un premier formulaire d'envoi de mailPrincipes de base de CSS

Syntaxe d'une règle CSS

Types de sélecteurs (Balise, ID, Classe)

Pseudo-classes : de liens, de texte...

Architecture de feuilles de style

Politique de style d’un site Internet

Méthodes de création de sites web

Les sélecteurs et pseudo-selecteurs CSS3

Atelier : styliser une page existantePrésentation des enjeux du référencement

Concepts et insertion des balises d’en-tête

Quelques règles à respecter

Techniques avancées de création HTML

Présentation des techniques d’alignement

Présentation des balises sémantiques : Article, Header, Section, Footer

Création du squelette HTML5

Définition des feuilles de styles

Positionnement des block

Gestion de la compatibilité entre navigateurs (cross-browser compatibility)

Atelier : Réaliser un site avec une structure HTML5Accessibilité ( accès au web pour les personnes handicapées )

Standards et ergonomie (WAI et ADAE)

Définition de l’architecture HTML

Feuilles de styles

Création des pages de contenus et application des normes

Les éditeurs WYSIWYG et l’accessibilité

L’intégration d’outil CMS et l’accessibilité

Atelier : tester l'accessibilité d'un sitePassage de la certification (si prévue dans le financement)

Programme de Formation JavaScript

Concepts de base du JavaScript

Principes et fonctionnements

Variables et types de données

Opérateurs

Instructions

Structures de contrôles (conditions, boucles...)

Définition et utilisation de fonctions

Objets prédéfinis(document, window ...)

Contrôle de saisies et traitement de formulaires

Gestion des fenêtres (ouverture, fermeture, communication)

Boîtes de dialogue

Atelier : apprendre à valider un formulaire Gestion des événements

Chargement d’une page

Gestion de la souris

Contrôle de la saisie clavier

Comportements et actions

Atelier : réaliser une galerie de photos Manipulations de page en JavaScript / DHTML

Présentation du DOM (Document Object Model)

Accès, modification, ajout d'éléments et d'attributs

Gestion dynamique des CSS

Atelier : scénarios et menus dynamiques