Séparation structure+contenu (HTML5) et présentation
HTML5
CSS
CSS Framework : bootstrap
Mini-projet
Introduction - CMS
CMS (Content Management systems - Systèmes de gestion de contenu) les plus utilisés :
Introduction - CMS
Avantages :
Développement rapide
Personnalisations avec thèmes et extensions
Sécurité
Désavantages
Méconnsaissance du CMS
Flexibilité limité
Dépendance du modèle économique
Introduction - Programme
Statistique langages côtés serveur
Introduction - Mobile Apps vs. Web Apps
Mobile app avantages
Interactivité, jeux
Usage régulier et personalisation
Calculs complexes
Utilisation hors connexion
Fonctionnalités natives
Introduction - Mobile Apps vs. Web Apps
Web app avantages :
Disponible instantanément
Compatible pour tous les mobiles
Mise à jour facile
Trouvables facilement avec moteurs de recherche
Se partagent facilement (via URL)
Cycle de vie (ne s’effacent pas)
Temps et coût de développement
Maintenance facile
Rappel - HTML5
Hello World :
<!DOCTYPE html><html lang="fr"><head><meta charset="utf-8"><title>Matchball</title></head><body><h1>Bienvenue sur le site Matchball</h1></body></html>
Séparation en partie <head></head> et <body></body>
Rappel - HTML5
Le Document Object Model (DOM) :
Le DOM est une interface de programmation (API) créé par le consortium W3C.
Avec le DOM, un document HTML5 peut être représenté sous la forme d’un arbre
ceci permet à des scripts d’examiner et de modifier le contenu du navigateur web
Rappel - HTML5
Le Document Object Model (DOM) :
Rappel - HTML5
Hyperliens :
<a href="http://www.equipe.fr">L'Equipe</a>
Rappel - HTML5
Paragraphes :
<p> Voici quelques exemples de liens hypertextes :</p>
Listes non-triées :
<ul><li>un lien relatif vers la page <a href="contact.html">contact</a></li><li>un lien absolu vers <a href="https://www.wikipedia.org/">la page d'accueil de Wikipedia</a></li><li>un lien absolu vers une page plus spécifique : un article sur les <a href="https://fr.wikipedia.org/wiki/V%C3%A9lo_%C3%A0_assistance_%C3%A9lectrique">vélos électriques sur wikipedia</a></li></ul>
Rappel - HTML5
Images :
<img src="image.png" alt="Photo de Mbappé"/><img src="images/image.png" alt="Photo de Mbappé"/><img src="../image.png" alt="Photo de Mbappé"/>
L’idée des règles CSS est de sélectionner un ou plusieurs balises HTML avec des sélecteurs afin d’y appliquer un ou plusieurs styles, définies entre accolades, et caractérisé par des propriétés auxquelles on attribue des valeurs. Ceci permet de préciser le style à appliquer aux balises sélectionnées.
Exemple pour sélectionner toutes les balises h1:
h1 { background-color: #CCCCCC}
Rappel - CSS
Voici une petite synthèse du fonctionnement : En CSS (cascading style sheets), on définit un ensemble de règles, et les règles ont la syntaxe suivante :
la référence W3C des propriétés : <https://www.w3.org/community/webed/wiki/CSS/Properties
Sites web dynamiques
Processus de création de site Web
simple page statique (HTML5, CSS)
ou page dynamique - éventuellement avec connexion à une base de données.
Il faut distinguer entre la programmation côté client ou côté serveur (architecture client serveur)
Sites web dynamiques
Sites web statiques - HelloWorld
<!DOCTYPE html><html lang="fr"><head><meta charset="utf-8"/><title>Hello World statique</title></head><body><p>Hello World !</p><p>Hello World !</p><p>Hello World !</p><p>Hello World !</p><p>Hello World !</p><p>Hello World !</p><p>Hello World !</p><p>Hello World !</p></body></html>
Sites web dynamiques - HelloWorld
<!DOCTYPE html><html lang="fr"><head><meta charset="utf-8"/><title>Hello World statique</title></head><body><?phpfor ($i=0;$i<10;$i++) {?><p>Hello World !</p><?php }?></body></html>
Sites web dynamiques - HelloWorld
<!DOCTYPE html><html lang="fr"><head><meta charset="utf-8"/><title>Hello World statique</title></head><body><?phpif (!isset($_GET['n']))$n=5;else$n=$_GET['n'];for ($i=0;$i<$n;$i++) {?><p>Hello World !</p><?php }?></body></html>
Sites web dynamiques - HelloWorld
<!DOCTYPE html><html lang="fr"><head><meta charset="utf-8"/><title>Hello World statique</title></head><body><?phpif (!isset($_GET['n']))$n=5;else$n=$_GET['n'];for ($i=0;$i<$n;$i++) {?><p>Premier exemple HTML5</p><?php }?></body></html>