Objectifs. Programmation Tablette. Journée type. Organisation. Dominique Rossin Cours 1 - HTML / CSS

Transcription

1 Objectifs Programmation Tablette Dominique Rossin Cours 1 - HTML / CSS Comprendre le fonctionnement d une application Web Comprendre le fonctionnement d une application Smartphone Programmer et déployer votre application sur une tablette Organisation Journée type Aout Septembre Octobre Matin Après-midi Oraux (24) Cours 1-5 Cours 6-8 Présentation des concepts de base d une application (design, modèle, programmation) Présentation de concepts avancés et culture générale Mise en application par des TDs suivis Développement du projet personnel

2 Le projet Réalisé en binôme Application Tablette (web) Notation du modal par soutenance du projet Présentation orale Démonstration javascript Questions Environnement de développement Eclipse I - HMTL Ordinateur portable Phonegap + mustache.js + bootstrap + jquery

3 Structure d une page web html Aperçu <div> <div> Entête Encodage / titre Corps de la page <div> <div> Différentes balises html Les listes Entêtes Paragraphes Non ordonnées Ordonnées h1 h2 h3 h4 h5 h6 <p>voici un premier paragraphe </p> <p>voici un autre paragraphe</p> <li>informatique</li> <li>mathématiques</li> <ol> <li>inf 441</li> <li>inf 431</li> </ol>

4 Liens entre pages <a> informatique.html Images <img. /> <li><a href="informatique.html">informatique</a></li> <li><a href="mathematiques.html">mathématiques</a></ li> <a href="">accueil</a> <h1>informatique</h1> <p>présentation du département</p> <img src="img/x.gif" style="width: 100%"/> <li><a href="informatique.html">informatique</a></li> <li><a href="mathematiques.html">mathématiques</a></li> Blocs div <div> II - Trop stylé le site : CSS Blocs servant à représenter des zones rectangulaire

5 Restyler les balises <link rel="stylesheet" type="text/css" href="css/mafeuille.css" /> <li><a href="informatique.html">informatique</a></li> <li><a href="mathematiques.html">mathématiques</a></li> <img src="img/x.gif" /> <p> </p> mafeuille.css couleur h1 { alignement color: white; text-align: center; background-color: black; font-family: cursive; img { width: 20%; couleur fond type police Autres styles mafeuille.css alignement liste ul { float:right; texte dans la liste text-align: right; list-style-type: none; Pas de rond ul li { background-color: #999999; margin: 0; Aucun marge ul li a { text-decoration: none; padding: 10px 20px; margin:0; color: white; On ne souligne pas les liens Modèle de boite left top margin border padding Contenu de l élément bottom right Modification de certains éléments (class ou id) Utilisation d une classe <li class="depinfo"><a href="informatique.html">informatique</a></li> <li class="depmat"><a href="mathematiques.html">mathématiques</a></li> <p>vous trouverez ici la liste des départements scientifiques comme le <span class="depinfo">dix</span> ou encore le <span class="depmat">depmat</span>.</p> Utilisation de la même classe mafeuille.css.depinfo { background-color:blue; color: white; li.depmat { background-color: pink; color: white;

6 class Et les id? Peut être associée à tout élément class= xxx Une classe peut apparaître plusieurs fois class= xxx On peut spécifier l application du style à un élément li.xxx Idem class Un seul élément d un id donné. Fichier de style #depinfo { color:red; css <li id="depinfo"><a href="informatique.html">informatique</a></li> <li class="depmat"><a href="mathematiques.html">mathématiques</a></li> <p>vous trouverez ici la liste des départements scientifiques comme le <span class="depinfo">dix</span> ou encore le <span class="depmat">depmat</span>.</p> Librairie bootstrap Intégration Inclusion du css Librairie css de composants pour mobile. Visitez pour voir la galerie. <link rel="stylesheet" type="text/css" href="css/mafeuille.css" /> <link rel="stylesheet" type="text/ css" href="css/bootstrap.min.css" /> <div><div>

7 Barre de navigation Barre de navigation Entête Liste Notification Entête Liste <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">enseignement</a> </nav> Ajout d une liste Notifications (badges) </nav> <ul class="list-group"> <li class="list-group-item list-group-item-info">liste des cours</li> <li class="list-group-item">inf 471 Modal Tablette</li> <li class="list-group-item">inf 411 Info...</li> <ul class="list-group"> <li class="list-group-item list-group-item-info"> Liste des cours</li> <li class="list-group-item">inf 471 Modal Tablette <span class="badge">2</span> </li> <li class="list-group-item"> INF 411 Info <span class="badge">1</span></li>

8 Conclusion Cet après midi Création facile des pages de l application avec HTML, CSS Utilisation de bootstrap pour avoir des composants mobiles Intégration aisée sur smartphone Fin de l installation Création du début du site de vente aux enchères Mise en place des pages «statiques» AMENER VOS ORDINATEURS PORTABLES