Presentation HTML5 – (orienté CSS) – Introduction

View Github Repository Open presentation in a new window

mattgu74

See all presentation from mattgu74

Presentation HTML5 – (orienté CSS) – Introduction

0 0

si28-html5

Presentation of HTML5 with reveal.js

On Github mattgu74 / si28-html5

Presentation HTML5

(orienté CSS)

Par Juliette LIMA et Matthieu GUFFROY

Plan de la présentation

  • Introduction
  • HTML
    • Rappels
    • Les nouveautés
  • CSS
    • Rappels
    • Les nouveautés
  • Et plus encore
    • Javascript
    • Canvas
    • Framework CSS
  • Atelier pratique
    • Réalisons une page web ensemble

Introduction

  • Une brève histoire du web
  • Le consortium W3C
  • HTML5 : Un ensemble de technologie

Une brève histoire du web

  • 1990 - Premier site internet et premier navigateur Tim Berners-lee
  • 1993 - <img>
  • 1995 - Javascript, HTML 2.0, première version d'internet explorer
  • 1996 - Le CSS
  • 2008 - Première publication d'un "draft" du HTML5

Le consortium W3C

  • Fondé par Tim Berners-lee en 1994
  • Le W3C est un organisme indépendant qui émet des standards pour le WEB et notamment le HTML
  • Il est administré par 3 entités :
    • Le MIT (Etats-Unis)
    • L'université Keio (Japon)
    • L'Ercim (Europe)

HTML5 : Un ensemble de technologie

HTML5 ~= HTML + CSS + JS

  • Le HTML 5 est fondamentalement le langage HTML dans sa 5ème version...
  • ... Mais il regroupe, par un abus de langage justifié, le HTML 5, le CSS 3 et le JavaScript.

Le HTML

Mais qu'est ce que c'est ?

Rappels

<!doctype html>
<html>
  <head>
    <title>Titre de ma page</title>
  </head>
  <body>
    Hello world !
  </body>
</html>

Exemples de balises

<p> </p>
<div> </div>
<span> </span>
<br />
<img src="url de l'image" />
<table>
  <tr>
    <td></td><td></td>
  </tr>
</table>

HTML 5: Les nouvelles balises

Balises structurantes

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <footer>

HTML 5: Les nouvelles balises

Relations sur les liens

<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed">
<link rel="icon" href="/favicon.ico">
<link rel="pingback" href="http://myblog.com/xmlrpc.php">
<link rel="prefetch" href="http://myblog.com/main.php">
...

<a rel="archives" href="http://myblog.com/archives">old posts</a>
<a rel="external" href="http://notmysite.com">tutorial</a>
<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
<a rel="tag" href="http://myblog.com/category/games">games posts</a>
...

HTML 5: Les nouvelles balises

Des balises pour les applications

<input list="cars"/><datalist id="cars">  <option value="BMW"/>  <option value="Ford"/>  <option value="Volvo"/></datalist>      <details>  <summary>HTML 5</summary>  This slide deck teaches you everything you need to know about HTML 5.</details>HTML 5This slide deck teaches you everything you need to know about HTML 5.
<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>Your score is: A+<progress>working...</progress>Download is: working...<progress value="75" max="100">3/4 complete</progress>Goal is: 3/4 complete

HTML5 : Les formulaires

De nombreuses nouveautés...

<input type="text" required="">
<input type="email" value="some@email.com">
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14">
<input type="range" min="0" max="50" value="10">
<input type="color" placeholder="e.g. #bbbbbb">
<input type="tel" placeholder="(555) 555-5555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$">

Le CSS

Mais qu'est ce que c'est ?

Syntaxe

p
{
  color:red;
  text-align:center;
}
  • Un sélecteur (p .center p.center #mon_div ...)
  • Des propriétés (color, text-align, border, background, margin, padding)

Quelques exemples de nouveautés

LIEN

Et plus encore !

Voyons quelques exemples de possibilités : LIEN

Atelier Pratique

Ouvrez le fichier step0.html

Etape 1 - HTML

Ajouter une feuille de style

	<link href="assets/css/style1.css" rel="stylesheet">

Etape 1 - CSS

Style Général

html, body {
	margin:0;
	padding:0;
	height:100%;
	font-family: Helvetica, Arial, sans-serif;
}

Etape 1 - CSS

Styliser les polices

p {
	font-family: Georgia, Arial, sans-serif;
	font-style: italic;
}

h1, h2, h3 {
	font-family: "Arial Black", Arial, sans-serif;
	text-transform: uppercase;
}

Etape 1 - CSS

Div principale

.container {
	width:1170px;
	margin:auto;
}

Etape 1 - HTML

Ajouter un titre

	<div class="container">
		<header class="row">
			<h1>Portfolio de Juliette LIMA</h1>
			<p>Front-End développeur</p>
		</header>
	</div>

Etape 1 - CSS

Styliser un titre

header {
  background-color:#EEE;
  padding:50px;
}

header h1 {
  font-size:58px;
}

header p {
  font-size:43px;
}

Etape 2 - HTML

Structure du menu

<nav id="navbar">
	<div class="container">
		<a class="navbar-brand" href="#">Mon Portfolio</a>
	</div>
</nav>

Etape 2 - CSS

Style du menu

nav {
	width:100%;
	background-color:#000000;
	overflow:hidden;
	font-size:14px;
}

Etape 2 - HTML

Liens du menu

<ul class="nav">
	<li><a href="#">Présentation</a></li>
	<li><a href="#competences">Compétences</a></li>
	<li><a href="#experiences">Expériences professionnelles</a></li>
	<li><a href="#formations">Formations</a></li>
	<li><a href="#contact">Contact</a></li>
</ul>

Etape 2 - CSS

Style des liens

nav ul li {
	display:inline-block;
}

nav ul li a, nav a.navbar-brand {
	color:#999;
	text-decoration:none;
	padding:15px;
}

nav a.navbar-brand {
	float:left;
	font-size:18px;
	line-height: 14px;
	padding:0 15px;
}

Etape 2 - CSS

Effet au survol des liens

nav ul li a:hover, nav a.navbar-brand:hover {
	color:#FFF;
}

Etape 3 - HTML

Structure de la partie compétences

<div class="row" id="competences">
	<div class="col-lg-4">
	</div>
</div>

Etape 3 - CSS

Style de la partie compétences

.row {
	overflow:hidden;
}

.col-lg-4 {
	width:390px;
	float:left;
	text-align: center;
}

#competences {
	margin-top:30px;
	border-top: 1px solid #eee;
	padding:30px 0;
}

Etape 3 - HTML

Ajouter une Image

<div class="row" id="competences">
	<div class="col-lg-4">
		<img src="assets/img/developpement.png" alt="Développement">
	</div>
</div>

Etape 3 - CSS

Style des images

img.img-circle {
	width:140px;
	height:140px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

img.img-circle:hover {
	border:10px solid #64ebff;
}

Etape 3 - HTML

Ajouter une Description

<div class="row" id="competences">
	<div class="col-lg-4">
		<img src="assets/img/developpement.png" alt="Développement">
		<h2>Développement Web</h2>
		<p>HTML, CSS, JS, HTML5, CSS3, AS3</p>
		<p>Notions de PHP, MYSQL, Objective C</p>
		<p>Utilisation de git</p>
	</div>
</div>

Etape 4 - HTML

Titre de partie

<div class="row featurette" id="experiences">
	<h2>Expériences professionnelles</h2>
</div>

Etape 4 - HTML

Structure

<div class="row">
	<div class="col-lg-2">
	</div>
	<div class="col-lg-9">
	</div>
</div>

Etape 4 - CSS

Style de la structure

.col-lg-2 {
	float:left;
	width:200px;
}

#experiences {
	padding:30px 0;
}

#experiences .row {
	margin:10px 0 10px 40px;
}

Etape 4 - HTML

Ajouter une image

<div class="col-lg-2">
	<img src="assets/img/somo.png" alt="Somo Global">
</div>

Etape 4 - HTML

Ajouter une description


<div class="col-lg-9">
	<h3 class="featurette-heading">Somo Global - London</h3>
	<p class="lead">Front-end Développeuse</p>
	<p>Participation à différents projets clients 
	de l'entreprise au sein de l'équipe de production de l'entreprise. 
	Travail avec différents corps de métiers, 
	dont des chefs de projet et designers.</p>
</div>

Etape 4 - CSS

Style du contenu

#experiences p {
	margin:20px 0;
	font-size:14px;
}

#experiences p.lead {
	margin:10px 0;
	font-size:21px;
}

#experiences img {
	width:160px;
}

Etape 5 - HTML

Structure


<div class="row featurette" id="formations">
	<h2>Formations</h2>
	<div class="col-lg-4">
	</div>
</div>

Etape 5 - HTML

Ajouter une image

<div class="col-lg-4">
	<img src="assets/img/utc.png" alt="UTC">
	<h3> Master UxDesign</h3>
	<p>UTC - Compiègne</p>
</div>

Etape 5 - CSS

Style du contenu

#formations h3 {
	font-family: Georgia, Arial, sans-serif;
	font-style: italic;
	text-transform: none;
}

Etape 6 - HTML

Ajouter un pied de page

<footer id="contact">
	<div class="container">
		<p>Développé par Juliette LIMA
		<a href="mailto:juliette.lima@utc.etu.fr">Contacter par mail</a></p>
	</div>
</footer>

Etape 6 - CSS

Style du pied de page

footer {
	position:relative;
	width:100%;
	min-height:50px;
	background:#000;
	margin-bottom:0;
}

footer p {
	color:#FFF;
	line-height: 50px;
	margin:0 20px;
}

Etape 6 - CSS

Style du lien

footer a {
	float:right;
	color:#64ebff;
}

footer a:hover {
	color:#FFF;
	text-decoration: none;
}

Etape 7 - CSS

Bords arrondis CSS3

img.img-circle {
	-webkit-border-radius:70px;
	-moz-border-radius:70px;
	border-radius:70px;
}

Etape 7 - CSS

Animations CSS3

#formations img {
	transition: transform 0.8s ease-in;
	-webkit-transition: -webkit-transform 0.8s ease-in;
	-moz-transition: -moz-transform 0.8s ease-in;
}

#formations img:hover {
	-webkit-transform: scale(0.90);
	-moz-transform: scale(0.90);
	transform: scale(0.90);
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	filter: blur(5px);
}