UNIVERSITE GASTON BERGER DE SAINT-LOUIS
Développement d’Applications Web I
Awa DIATTARA
[email protected]
11/04/2022
Test d'entrée
1. C'est quoi le web ?
2. Qui a crée le web?
3. Quelle est l'architecture utilisée dans le web ?
4. Qu'est ce que le W3C ?
5. Quelle sont les technologies web que vous
connaissez ?
DIATTARA Awa Développement web
Pourquoi ce cours ?
Objectifs
o Apprendre la programmation web côté client.
Compétences à acquérir
o Comprendre les aspects avancés de la programmation web
o Connaître les bases des langages HTML et CSS
o Connaître les bases du langage JavaScript
o Être capable de structurer vos pages web
o Être capable de transformer une maquette en page web
o Être capable de mettre en ligne un site web
DIATTARA Awa Développement web
Déroulement du cours
Des cours magistraux : 08h
Des travaux pratiques : 12h
Un projet : 4h
DIATTARA Awa Développement web
Modalités d’évaluation
Les apprentissages seront évaluées par :
o Un contrôle sur table
o Des QCM
o Un projet
Première session
o Note finale = (contrôle_continu + (examen * 2)) / 3
Deuxième session
o Note finale = (contrôle_continu + (examen * 3)) / 4
DIATTARA Awa Développement web
Technologies abordées dans ce cours
Technologies web : cote client (front-end)
DIATTARA Awa Compléments à la programmation web
Bibliographie
o World Wide Web Consortium (W3C) : ww.w3.org
o World Wide Web School : w3schools.com
o Developper.com
o Youtube.com
o Openclassroom
o Google
o HTML5 et CC3, maitrisez les standards de la création des
sites web (Christophe Aubry)
Validateur en ligne : https://validator.w3.org/#validate_by_input
DIATTARA Awa Cours Génie Logiciel
Plan
1. Brève historique du web
2. Élaboration des spécifications par le W3C
3. Évolutions du langage HTML
4. Évolutions du langage CSS
5. Évolutions des navigateurs
6. Compatibilité des navigateurs
7. Outils de création des sites web
DIATTARA Awa Développement web
Alors, vous êtes prêts ?
DIATTARA Awa Développement web
C’est quoi le Web ?
10
Brève historique d’internet
Internet : réseau de réseaux
Au départ, réseaux locaux : ordinateurs reliés par des câbles.
1962. ARPA projet de création d’un réseau global d’ordinateurs.
1967. ARPANET premier réseau à transfert de paquets.
1969. Connexion des 4 premiers ordinateurs d’ARPANET
(universités américaines)
1972. Naissance du InterNetworking Working Group
1973. Angleterre et Norvège rejoignent avec 1 ordinateur
1979. Création des NewsGroups par des étudiants américains
1981. Apparition du Minitel en France
1982. Définition du protocole TCP/IP et du mot « Internet »
1983. Premier serveur de noms de sites
1984. 1 000 ordinateurs connectés
1987. 10 000 ordinateurs connectés
DIATTARA Awa Développement web
Brève historique du web
Mars 1989 : Tim Berners-Lee rédige l’article fondateur de
l’Internet : « information Management : a proposal » au CERN
(Centre Européen de Recherche Nucléaire).
Octobre 1990 : Tim Berners-Lee travaille sur l’hypertexte avec
un éditeur et un navigateur sur une station NeXT. Il donne le
nom de World Wide Web au programme.
Décembre 1992 : le CERN rend accessible les protocoles web.
1993 : premier serveur hors CERN est installé à l’université de
Stanford aux USA, le CERN rend libre les protocoles web.
Octobre 1994 : le Word Wide Web Consortium (W3C) est créé
au MIT (Massachusetts Institute of Technology).
Histoire de l’internet https://www.w3.org/History.html
Evolution d’internet : https://www.w3.org/2005/01/timelines/timeline-2500x998.png
DIATTARA Awa Développement web
Élaboration des spécifications par le W3C
Le W3C (https://www.w3c.org/) est un organisme international
chargé d’édicter les normes et les spécifications des langages
permettant de concevoir des sites et des applications web.
Pour élaborer des normes, le W3C s’organise autour de
groupes de travail qui conçoivent à travers un process :
• FPWD : First Public Working Draft
• WD : Working Draft
• CR : Candidate Recommendation
• PR : Proposed Recommandation
• REC : Recommendation
• SPSD : Superseded Recommendation
Plus de details : https://www.w3.org/2018/Process-20180201/
DIATTARA Awa Développement web
Évolution du HTML (HyperText Markup langage)
HTML 1 : première version créée par Tim berners-Lee en 1991.
HTML 2 : deuxième version, apparue en 1994 pose les bases des versions
suivantes. Normaliséé par le W3C.
HTML 3.2 : apparue en 1997 avec nouvelles fonctionnalités : les tableaux,
les applets, les scripts, le positionnement du texte autour des images etc.
HTML 4 : apparue en 1998 avec beaucoup de succès. Offre de nouvelles
possibilités : frames, tableaux complexes, amelioration des formulaires, etc.
Cette version permet pour la première fois d’exploiter des feuilles de style
(CSS).
XHTML : basé sur du XML pour pallier les ambiguités du HTML.
HTML 5 : apparue en octobre 2014 avec comme nouveautés : meilleur
agencement, ajout de vidéos, amélioration des formulaires, etc.
HTML5 : version 5.2 (apparue le 14 décembre 2017).
Août 2018 : brouillon HTML 5.3 publié
Premier document HTML : https://www.w3c.org/MarkUp/draft-ietf-iiir-html-01.txt
DIATTARA Awa Développement web
Petite histoire de HTML5
Plus de 10 ans après la sortie du XHTML, un groupe de travail
externe au W3C a commencé le travail sur la version 5 de
HTML, il s’agit de WHAT Working Group (WHATWG), soutenu
par Mozilla, Google, Apple et Opera.
HTML 5 : première version apparue en octobre 2014
La version 5.2 (apparue le 14 décembre 2017).
Le brouillon HTML 5.3 publié en août 2018 :
DIATTARA Awa Développement web
Quelles sont les nouveautés apportées
par le HTML5 ?
16
Nouveautés HTML5
Des nouveautés…..
o Des allègements de code
o De nouveaux éléments et attributs HTML5
o De nouveaux conteneurs sémantiques (ayant un sens que les
navigateurs et les outils d’indexation connaissent)
o Des formulaires plus évolués (nouveaux champs)
o Des prises en charge de flux multimédia (audio, vidéo ou
animation) sans besoin de plugin
o Des animations 2D et 3D,…
o De nouvelles APIs (géolocalisation, le Stockage web local…)
o De nouvelles fonctionnalités qui mettent en valeur le contenu
(glisser-déposer, accès aux périphériques tels que la
webcam,…)
o ….
Mais aussi des suppressions d’éléments dépréciés
DIATTARA Awa Développement web
Evolution du langage CSS ?
18
Exemples de page avec HTML/CSS
DIATTARA Awa Développement web
Évolution du CSS (Cascading Style Sheets)
CSS 1 : première version du CSS apparue en1996, pose les
bases du langage : les couleurs, les marges, les polices de
caractères, etc.
CSS 2 : deuxième version apparue en 1998, puis complétée
par CSS 2.1 en 2011 qui rajoute de nombreuses options parmi
lesquelles des techniques de positionnement très précises.
CSS 3 : dernière version, qui apporte des fonctionnalités
comme les bordures arrondies, les dégradés, les ombres, etc.
Avancées des modules CSS3 : https://www.w3.org/Style/CSS/current-work
DIATTARA Awa Développement web
Évolution des navigateurs
1994 : Tim Berners lee développa le premier éditeur et le
premier navigateur web (Nexus) au sein du CERN.
1994 : Mark Andreesen fonde Mosaic Communications Corp
(futur Netscape).
1995 : Microsoft Internet Explorer (Microsoft Edge depuis 2015)
2003 : Apple Safari
2004 : Mozilla Firefox
2005 : Opera
2008 : Google Chrome
…
DIATTARA Awa Développemen web
Les navigateurs mobiles
La plupart des navigateurs sur smartphone sont les mêmes que
sur ordinateur, dans une version plus légère adaptée aux
mobiles.
o iPhone : safari mobile
o Android : chrome mobile
o Windows Phone : Internet Explorer Mobile
o Blackberry : font exception et utilise leur propre navigateur
(pas d’equivalent sur ordinateur). Neanmoins, les versions
récentes sont très proches de Safari et Chrome.
DIATTARA Awa Developpement web
Compatibilité des navigateurs
C’est le W3C qui propose et c’est les navigateurs qui disposent.
Pour le HTML5, il n y a pas de problème de reconnaissance et
d’interprétation, la norme est officalisée en recommendation
depuis 2014.
Pour le CSS, les éditeurs des navigateurs peuvent proposer au
W3C leurs propres propriétés pour une éventuelle
standardisation.
DIATTARA Awa Développement web
Compatibilité des navigateurs
Pour connaître la compatibilité des propriétés CSS, la meilleure solution
est de vous rendre régulièrement sur le site Can I Use https://caniuse.com.
DIATTARA Awa Développement web
Les outils de développement
DIATTARA Awa Développement web
Logiciels de création de sites web : éditeur de code
DIATTARA Awa Développement web
Les outils de développement
Des outils destinés aux développeurs sont également proposés
dans les principaux navigateurs :
o Microsoft Edge : Paramètres Outils de développement
o Google chrome :
o Pour Windows : Paramètres Plus d’outils Outils de
développement
o Pour Mac OS : Menu Afficher Options pour les
développeurs.
o Mozilla Firefox : Menu Développement web Outils de
développement
o Firefox dispose de Firefox developer Edition un
navigateur spécialement dédié au développement des
sites web.
o Apple safari : Préférences Avancées cocher l’option
Afficher le menu Développement dans la barre des menus.
DIATTARA Awa Développement web
Logiciels de création de sites web
Deux categories :
o Les WYSIWYG (What You See Is What You Get – Ce que Vous Voyez
Est Ce Que Vous Obtenez)
o Pas besoin de connaîte de langage particulier
o Exemple : Mozilla Composer, Microsoft Expression Web,
Dreamweaver, Word,…
o Limites : mauvaise qualité du code HTML et CSS généré
o Un vrai créateur de site web doit connaître HTML et CSS
o Les éditeurs de texte : programmes dédiés à l’écriture de code.
o Vos puissants alliés pour créer des sites web
DIATTARA Awa Développement web
Éditeurs de texte
Sous Windows
o Notepad++
o Visual Studio Code
o jEdit (son equivalent sous LINUX et MAC OS)
o SublimeText
o Brackets
o Atom
o …
Sous Mac OS X
o TextWrangler
o Smultron
o …
Sous Linux
o Emacs
o gEdit
o Vim
…
DIATTARA Awa Développement web
Éditeurs de texte
Visual Studio Code (VSC)
DIATTARA Awa Développement web
Editeurs en ligne
Les éditeurs de code online permettent de tester des morceaux
de code HTML/CSS/JavaScript avec ou sans bibliothèques
Exemples d’outils collaboratifs
o http://jsfiddle.net/
o http ://selfcss.org/ pour le CSS
o http://jsbin.com/
DIATTARA Awa Dévéloppement web
Exemple d’éditeurs en ligne : JSFiddle
DIATTARA Awa Développement web
Exemple d’éditeur en ligne : selfCSS
DIATTARA Awa Développement web
Les bonnes pratiques (1)
Séparer le contenu de la mise en forme :
Bien séparer les deux langages (HTML et CSS) pour :
o Avoir un code plus propre, plus rigoureux et plus lisible
Séparer la gestion du contenu de la mise en forme et de la
mise en page pour :
o Homogénéiser la mise en forme et la mise en page CSS
o Avoir des mises à jour des CSS facilitées et rapides
DIATTARA Awa Développement web
Les bonnes pratiques (2)
Utiliser une structure sémantique
HTML5 est un langage parfaitement sémantique. Chaque
élément est fait pour contenir un type de contenu
spécifique.
Pour avoir un code propre, lisible, valide et accessible,
respectez cette structure sémantique.
o Exemples :
o L’élément <p> pour contenir du texte dans les
paragraphes.
o L’élément <h1> pour afficher les titres de premier
niveau.
DIATTARA Awa Développement web
Les bonnes pratiques (3)
Optimiser le code et organiser vos fichiers
o Bien indenter les lignes de code.
o Commenter le code, c’est indispensable.
o Essayer de nommer les sélecteurs CSS de manière
intelligible et logique.
o Créez des dossiers par types de fichier utilisé.
o Sauvegarder votre code, et pourquoi pas utiliser un outil
de gestion de versioning (GIT, SVN,…).
o Valider le code de vos pages.
Validateur en ligne : https://validator.w3.org/#validate_by_input
DIATTARA Awa Développement web
Test de sortie
1. C'est quoi le web ?
2. Qui a crée le web?
3. Quelle est l'architecture utilisée dans le web ?
4. Qu'est ce que le W3C ?
5. Quelle sont les technologies web que vous
connaissez ?
DIATTARA Awa Développement web
Prochain cours
Les bases du langage HTML
DIATTARA Awa Cours Génie Logiciel
