Introduction à la formation webmestre

Introduction

Qu’est-ce qu’un site Internet?

Qu’elles sont les différentes catégories de site sur Internet ?

Les métiers du Web

Modèle Client/Server:  Les protocoles associés (HTTP ; SMTP ; FTP ; NNTP)

Sites statiques

Sites dynamiques

Outils de développement

Atelier pratique: Mise en évidence et installation des outils de développement

Apprendre HTML

Principes de fonctionnement

Structure d’un document XHTML

Doctype

Présentation des principales balises

Format des balises

Type des balises

Atelier pratique: Création d’un premier site web

Créer des formulaires

Principes de l’interaction avec l’utilisateur

Les champs de saisie, les boutons de sélection

Cases à cocher

Les listes de sélection

Boutons d’envoi

Atelier pratique: Création d’un formulaire de contact

Apprendre les feuilles de style CSS

Fonctionnement et avantages

Insérer et Définir un style

Principes des règles CSS

Associer un style à une balise HTML

Types de sélecteurs : balise, classe, ID, composé

Les couleurs et arrière plans

Organisation en boîtes : bordures et marges

Atelier pratique: mettre en forme notre site web

Web-marketing

Présentation des enjeux du référencement

Connaître les actions de base.

Choix des mots-clés

Soumission dans les moteurs et annuaires

E-mailing, affiliation.

Atelier pratique: référencer les pages de notre site web

Graphisme pour le web

Les différents formats d’images

Présentation du logiciel Gimp ou PhotoShop

Recadrage d’images

Gérer la taille et la résolution de l’image

Atelier pratique: Manipulations élémentaires des images : format, dimension, recadrage

Transférer son site sur un serveur distant

Qu’est-ce que le FTP ?

Installer FileZilla

Atelier pratique: mise en ligne de notre site

Choisir son nom de domaine et son hébergeur

Comment bien choisir son nom de domaine ?

Présentation d’hébergeurs

Comment bien choisir son hébergeur ?

Introduction à la programmation côté serveur

Notion de site dynamique (PHP)

Notions de base en PHP

Traitement des données d’un formulaire en PHP

L’envoi d’un formulaire par email

Atelier pratique: Envoi des données d’un formulaire par mail avec PHP

Découvrir les principes de base de l’ergonomie d’une page Web

La barre de navigation

Fil d’Ariane

Menu déroulant

Onglet

Utiliser JavaScript

Présentation de Javascript

Les base du langage

La gestion des évènements

Atelier pratique: vérification des champs de notre formulaire de contact

Interagir avec une base de données

Présentation de MySQL

Présentation de PhpMyAdmin

Introduction au langage SQL

Atelier pratique: Stocker les données de notre formulaire de contact dans une base de donnée.

Introduction à la formation Avancée : HTML5/CSS3, JavaScript/DOM + Responsive Design

Pourquoi HTML5 ?

Format des balises

Les normes HTML, CSS, XHTML, XML, HTML5

Le W3C et les validateurs

La logique d’encodage, ISO-8859-1, UTF-8,..

Rappel sur les bases

Type des balises

syntaxe des règles de style

Positionnement css(relatif, absolu, flaot, display)

Atelier pratique : Créer un site XHTML/CSS

Passage en HTML5

Syntaxe, nouveau doctype et outils

structure et sémantique
Div et span

Nouvelles balises HTML5

Atelier pratique : Reconstruire notre site en HTML5/CSS3

Balises multimédias

inserer une image(Balises <figure>)

insérer une vidéo(Balises <video>)

insérer un son (Balises <audio>)

Compatibilité navigateur

Atelier pratique : Utiliser JavaScript pour contrôler les objets audio et video

Les formulaires

Nouveaux types pour <input>

Nouveaux attributs

Nouveaux éléments <output>,

Les validations de formulaire en HTML5v

Atelier pratique : Réaliser un formulaire HTML5

Dessiner : Création dynamique d’images en JavaScript

La balise Canvasv

SVGv

Tracer de formes(rectangle, cercle,,,,)

Couleurs, remplissages, dégradés

Atelier pratique : Améliorer la lecture de notre vidéo par une barre de progression

Géolocalisation

Vue d’ensemble

Se positionner (latitude, longitude)

CSS3

Vue d’ensemble

Syntaxe, préfixes CSS3

Coins arrondis

Ombres portés

Text-Shadow

Box-shadow

Dégradé linéaire

font-face

Sélecteur d’attribut

CSS3 :Transformations, transitions et animations

Rotation,

translation

Animations

Atelier pratique : Animer les différentes propriétés d’un élément

Découvrir JavaScript

Introduction à JavaScript

Concepts de base du Javascript

Notion d’événements

Gestion dynamique des CSS

Atelier pratique : Validation des champs de notre formulaire de contact

Document Object Model

Qu’est-ce que le DOM ?

Concept de noeud

Hiérarchisation des noeuds(Arbre DOM)

Les proprités de rélation

Les proprités d’état

Les méthodes d’accès aux noeuds

Firefox DOM Inspector

modification du contenu HTML

Modification du style des elements HTML

Atelier pratique : Créer une galerie photo

Faire du responsive design

Principe

Medias queries CSS 3

Atelier pratique : création d’un site multiplateforme (smartphone, tablette..)

Utiliser Bootstrap

Présentation de Bootstrap

Installation de Bootstrap

Le système de grille pour positionnement

Les layouts

Le responsive Design

Atelier pratique : créer une page avec Bootstrap

Les composants Bootstrap

Menus déroulants

Barres de navigation

Fil d’arianne

Introduction à la formation PHP/MySQL

Rappel html/css

Architecture client/server

Outils de developpement: installer un server local, un IDE

Atelier pratique: Installation des outils de developpement

Les bases  pour apprendre le PHP

structure d’une page PHP

Insertion de code PHP dans un document html

les types de variables

Déclaration et utilisation de tableaux

les constantes

les opérateurs

les boucles et conditions

Atelier pratique: Revue des balises principales HTML et des commandes de style, mise en place d’une page modèle

Création de fonctions, utilisation de fonctions prédéfinies

Déclaration de fonctions

Les paramètres et l’instruction return

Création de bibliothèques de fonctions

Fonctions prédéfinies : exemples, organisation, documentation

Fonctions pour les dates, tableaux, chaînes de caractères

Fonctions include et require

Atelier pratique: Réalisation de fonctions personnalisées et utilisation de fonctions prédéfinies

Traiter les données d’un formulaire

création d’un formulaire

Récupérer les données du formulaire

Atelier pratique: Création d’un formulaire de contact

Formation en Lien : PHP/MySQL: création d’un système de gestion de contenu WebPHP/MySQL

Interagir avec l’utilisateur

Récupérer et utiliser des paramètres GET

utiliser les cookies pour stocker des informations

envoyer un email

Atelier pratique: Validation d’un formulaire de contact

PhpMyAdmin

Présentation de phpMyAdmin

Créer une base avec phpMyAdmin

Créer des tables avec phpMyAdmin, voir les différents types de champs.

Modifier la structure d’une table

Atelier pratique: Création d’une base MySQL et création de tables

SQL

Sélectionner des enregistrements (SELECT)

Insérer des enregistrements (INSERT INTO)

Supprimer des enregistrements(DELETE)

Opérateurs et critères.

Atelier pratique: Ecriture de requêtes SQL simples

Utiliser une base de données MySQL avec PHP

Présentation des SGBD

Types de données

Connexion au serveur MySQL

Remplissage de la base à partir d’un formulaire.

Ajouter des données dans la base avec PHP

Supprimer des données dans la base avec PHP

Protéger les données à envoyer à MysQL

Atelier pratique: Enregistrement en base des données de notre formulaire de contact

Pour bonifier votre apprentissage

Formation PHP | Programmation orientée Objet – MVC