Ce support s’adresse à de grands débutants en développement informatique, qui n’ont jamais programmé avec HTML5, CSS3 et JavaScript. L’auteur guide le lecteur en lui enseignant des méthodes efficaces et actuelles pour créer son premier site web, en partant vraiment de zéro et en allant jusqu’à un niveau suffisant pour qu’il soit ensuite autonome. Dès le début du support l’auteur présente un tour d’horizon du développement sur le Web : les langages côté client et serveur, les formats d’images,...
Ce support s’adresse à de grands débutants en développement informatique, qui n’ont jamais programmé avec HTML5, CSS3 et JavaScript. L’auteur guide le lecteur en lui enseignant des méthodes efficaces et actuelles pour créer son premier site web, en partant vraiment de zéro et en allant jusqu’à un niveau suffisant pour qu’il soit ensuite autonome.
Dès le début du support l’auteur présente un tour d’horizon du développement sur le Web : les langages côté client et serveur, les formats d’images, les navigateurs… afin que le lecteur comprenne les mécanismes par lesquels le contenu d’une page s’affiche sur un écran. Le chapitre suivant enseigne les règles générales à observer pour développer de manière efficace : lisibilité du code, organisation des dossiers, utilisation des éditeurs de code, référencement…
Ensuite, l’auteur entre dans le vif du sujet et présente tout d’abord le langage HTML5 qui permet de structurer une page, de disposer les éléments visuels très précisément. Le second langage présenté est le CSS3, qui permet quant à lui d’ajouter des styles, des animations, des effets visuels rendant inutile l’utilisation d’images et permettant d’adapter l’affichage aussi bien sur un téléphone que sur un ordinateur. Pour avoir une bonne connaissance des langages utilisés côté client, le troisième présenté dans ce livre est le JavaScript. C’est ce langage qui va permettre d’ajouter de l’interactivité sur les pages, de faire des comparaisons, de répéter des actions, d’utiliser une base de données côté client…
Au travers d’exemples concrets et au-delà de l’aspect purement technique de cet apprentissage, l’auteur transmet au lecteur les principales règles de mise en page à respecter pour rendre le site agréable à l’œil, convivial et facile d’utilisation ainsi que les bonnes méthodes de développement et les pièges à éviter. Après la lecture de ce livre, le lecteur pourra créer un site web fonctionnel dont il pourra être fier.
Des éléments complémentaires sont en téléchargement sur le site www.editions-eni.fr.
Préserver la lisibilité : l’indentation, les commentaires
1. L’indentation
2. Les commentaires
Penser au référencement
Dossiers et chemins vers les fichiers
Les éditeurs pour le code
Des raccourcis bien pratiques
1. Sauvegarder et tester une page
2. Sélectionner du texte ou se déplacerplus vite sans la souris
HTML
Création d’une page web
Code HTML obligatoire
Le doctype
La balise <head></head>
1. Lien avec une feuille de style
2. Lien avec un fichier JavaScript
La balise <body></body>
1. Méthode et balises pour structurer une page
2. Le texte dans la page HTML
3. Les caractères spéciaux
CSS3
Les trois styles de base possibles
1. Le style de balise
2. Le style de classe
3. Le style d’ID
4. Combinaison des trois méthodes
Les polices de caractères et le Web
Les sélecteurs
Les pseudoclasses
1. Pour les liens
2. Pour le texte
3. Pour les sélecteurs
Les couleurs en hexadécimal, en RGBA ou en HSLA
Les images et les bordures
Les boutons issus d’images ou de polices
Les fonds et fonds multiples
Le positionnement
Le débordement
Utilisation de padding et margin
Les variables
Des propriétés décoratives (ombre, dégradé, arrondi...)
Des colonnes dans le texte
Les transformations 3D
Les transitions et animations
Le responsive design et les media queries
Le menu Burger
Le donut
JavaScript
Introduction
La liste des tâches
Variables et affectation
Les types de variables
1. Les valeurs numériques
2. Le texte et la concaténation
3. Les tableaux
4. Les booléens
5. Les objets
Les opérateurs
Les conditions
1. if, else et les accolades
2. switch case
Les itérations
1. La boucle for
2. while
3. do ... while
4. break et continue
5. Foreach
Déboguer un programme
Les fonctions
1. Déclaration
2. Nouvelle notation pour les fonctions
3. Appel
4. Les variables locales et globales
5. Le retour d’une fonction
Les cookies
Le drag and drop
Afficher le site HTML en plein écran
Interactions entre JavaScript, HTML et CSS
Les bases de données locales
1. Création d’une base de données
2. Création d’une table
3. Insertion d’enregistrements
4. Lecture d’informations
Générer des PNG en JavaScript
Ajax
Gestion des timers (setTimeout(), setInterval(), Date)
Déplacer un élément au clavier
Mise en page HTML et CSS
Les blocs et leur position à l’écran
1. Les tableaux
2. Les div et les nouvelles balises HTML5
Les listes
Les méthodes de dessin
La balise Canvas
La balise SVG
Avantages et inconvénients des deux technologies
Le multimédia
La balise <video></video>
Les codecs vidéo
La balise <audio></audio>
Les codecs audio
Les formulaires
Introduction
Fonctionnement d’un formulaire client/serveur
Les différentes balises du formulaire
Les expressions régulières
La validation du formulaire
Ajout d’un script CGI sur le serveur
Les liens et menus en HTML5
Introduction
Création de liens
1. Ouverture de page HTML
2. Ouverture d’une image
3. Navigation dans la page
4. Proposer le téléchargement d’unfichier
5. Envoyer un e-mail
6. Déclenchement d’un script JavaScript
Création d’un menu (liste + liens + CSS)
Agir sur la page grâce au menu
Ajout de « data » dans les liens
Liste complexe organisée par JavaScript et le CSS
Correction des exercices
Exercice sur les sélecteurs CSS
Exercice : une horloge qui se balance
Exercice : modifier l’heure en JavaScript
Exercice : position personnage
Exercice : créer l'animation d'un personnage qui marche
Exercice : génération de donuts
Conclusion
Introduction
Denis Matarazzo
Denis Matarazzo développe depuis plus de quarante ans dans de nombreux langages de programmation. Également passionné d’art graphique, cette double compétence de développeur et d’infographiste, lui a permis d’accompagner de nombreux projets où la communication entre ces deux mondes n’était pas facile. Pédagogue, il travaille aujourd’hui essentiellement comme formateur pour des développeurs ou des infographistes et accompagne des projets de développement informatique liés au web. Dans ce livre, il rassemble tout son savoir-faire et toute son expérience pour permettre au lecteur de réaliser en toute autonomie le site qu’il a en tête.