8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 1/56

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 2/56

1.2.3… WEB! 

[Loïc Bar]

http://twiter.com/loicbar 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 3/56

Loïc Bar 

http://www.thesmartcompany.be 

@loicbar

A propos de moi

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 4/56

Félicitation! Vous faites maintenant partie d’une communauté de plusieurs milliers dedéveloppeurs voulant rester à jour endéveloppement Web.

Web Camps ça se déroule sur 6 continentsdans plus de 30 pays. 

Rejoingnez la communautéFacebook (recherchez Web Camps)

Suivez @Webcamps sur Twitter

Si vous souhaitez plus d’information:www.webcamps.ms

Vous êtes un Web Camper!

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 5/56

Tout ce que vous allez voir aujourd’hui est disponible sur www.webcamps.ms (cliquez sur Web Camps Training Kit)

Mais aussi des informations sur:ASP.NET MVC 3

HTML5 and IE9

 jQueryWeb Apps!

Et c’est gratuit!  

Where do I get this content?

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 6/56

Part 1

Platform overview

Pour vous!

WebMatrix

Orchard CMSPart 2

HTML 5

Modernizr

Web fontsPart 3

Now it’s your turn! 

Agenda

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 7/56

Webforms

MVC

WebPages DynamicData

WebMatrix

VisualStudio

Platform overview

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 8/56

MVC4

Webforms 4.5

HTML 5CSS 3

IE 10

WebMatrix 2Et plus encore!

Pour vous!

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 9/56

Demo time

ASP.NETMVC 4, VS11

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 10/56

 

Introduction à WebMatrix

Customizer PublierCréer

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 11/56

Introduction à WebMatrix

Server Web Base de données Outil de développement

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 12/56

Pour qui est-ce destiné ?

J’aime les applications

web et je recherche juste un outil pour plus

facilement lesconfigurer

Je veux créer des

sites web moi mêmeavec des outils etframework facile à

utiliser

Je suis un profesionnel

et je crée des sites webcomplexes et utiliséspar des milliers de

personnes.

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 13/56

Demo time

WebMatrix

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 14/56

BreakLets have a short break (till 11)

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 15/56

Part 1

Platform overview

Pour vous!

WebMatrix

Orchard CMSPart 2

HTML 5

Modernizr

Web fontsPart 3

Now it’s your turn! 

Agenda

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 16/56

t h S l t

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 17/56

Audio elementCanvascontenteditable attributeDatalist elementdataset & data-* attributes

Details & Summary elementsDrag and DropForm validation HTML5 form featuresNew semantic elementsOffline web applicationsProgress & MeterRuby annotation

Session history managementText API for CanvasToolbar/context menu Video elementWebGLBlob URLsCross-document messagingCross-Origin Resource SharingDevice Orientation eventsFile APIFileReader APIFilesystem & FileWriter APIGeolocationHashchange event

IndexedDBJSON parsing

matchesSelectorNavigationTiming APIServer-sent DOM eventsTyped ArraysWeb Notifications

Web SocketsWeb StorageWeb WorkersAudio APIStream APIWeb SQL Database

SVG:Inline SVG in HTML5SVG effects for HTMLSVG filtersSVG fontsSVG in CSS backgrounds

SVG in HTML img elementSVG SMIL animation

@font-face Web fontscalc()2.1 selectorsGenerated content

GradientsGrid La out

inline-blockmin/max-width/heightposition: fixedRegionsTable display

3D TransformsAnimationBackground-imageBorder imagesBorder-radiusBox-shadowBox-sizing

ColorsMedia QueriesMultiple backgroundsMultiple column layoutobject-fit/object-positionOpacityselectorsText-shadow TransformsTransitionsWord-wrapFlexible Box LayoutModule rem unitsTTF/OTF support

Canvas+ way much more!

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 18/56

HTML 5: Ouvrons la boite:

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 19/56

footer header nav section article aside hgroup

figure figcaption video audio source track embed

mark progress meter time ruby rt bdi

wbr canvas command details datalist keygen output

rp

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 20/56

<div id=”nav”> 

<divid=”sidebar”> 

<div id=”article”> 

<div id=”footer”> 

<div id=”header”> 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 21/56

<nav>

<aside><section>

<article>

<footer>

<header>

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 22/56

Avant:

ajax (pull toutes les secondes)

Comet (long polling)

HTML 5

WebSockets (bidirectional)

Server-Sent events (unidirectional)

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 23/56

WebSocketsvar socket = new WebSocket( "ws://html5rocks.websocket.org/echo" );

socket.onopen = function() { // connection has been openedconsole.log( "Connection opened" );socket.send( "Hello World!" ); // send a message to the server

};

socket.onerror = function( error ) { // an error has occuredconsole.log( error );

};

socket.onmessage = function( e ) { // message was sent from the serverconsole.log( e.data ); // message from server

};

socket.onclose = function( e ) { // connection has been closedconsole.log( "Connection closed" );

};

console.log( socket.readyState ); // { 0:"Connecting", 1:"Open", 2:"Closed }

Demo 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 24/56

Envoie de données du serveur

var source;if ( window.EventSource ) {

source = new EventSource( "eventSource.aspx" );} else {

// Fallback to some other technique}

source.bind( "message", function( e ) {e = e.originalEvent;

console.log( e.data );});

source.bind( "open", function( e ) {// The connection was opened

});

source.bind( "error", function( e ) {...

Demo 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 25/56

XML

Vectoriel

Référence en dur dans le HTML

SVG

Demo 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 26/56

<canvas>

Référence possible en JavaScript

Canvas

<canvas id="fancyCanvas" width="200" height="200"></canvas>

var context, image;

if ( Modernizr.canvas ) {context = $( "fancyImage" )[ 0 ].getContext( "2d" );image = new Image();image.src = "./images/HTML5_3D_effects_128.png";

image.onload = function() {context.drawImage( image, 0, 0 );

};} else {

// Do something else... flash, image only, etc}

Demo 1 Demo 2 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 27/56

Web storage (key - value)

Web SQL Database (deprecated)

IndexDB (key - value with indexes >fast!)

File API

Cache manifest

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 28/56

Geolocation 

Device orientation 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 29/56

Audio

<audiopreload="auto" <!-- preload none, metadata, or auto (laisser le choix au navigateur) -->controls <!-- display controls to manipulate playback -->autoplay <!-- automatically start audio when page loaded -->

loop <!-- loop the media playback -->autobuffer <!-- if not autoplay, then buffer so starts quickly -->muted <!-- initialized audio output to mute -->crossorigin> <!-- setting if use CORS -->

<source src="intro.ogg" type="audio/ogg" /> <!-- remember to add type --><source src="intro.mp3" type="audio/mpeg" /> <!-- otherwise has to -->

<source src="intro.wav" type="audio/wav" /> <!-- download pieced & check -->

<!-- Add fallback flash object markup here... -->

This content appears if the audio tag or the codec is not supported.</audio>

Demo1 Demo2 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 30/56

Video

<videowidth="320" <!-- pixel width. defaults to width of video -->height="240" <!-- pixel height. defaults to height of video -->poster="intro.jpg" <!-- image displayed before or while loading -->

autoplay <!-- automatically start video when page loaded -->controls <!-- display controls to manipulate playback -->loop <!-- loop the media playback -->autobuffer> <!-- if not autoplay, then buffer so starts quickly -->

<source src="intro.mp4" type="video/mp4" /> <!-- remember to add type --><source src="intro.webm" type="video/webm" /> <!-- otherwise has to -->

<source src="intro.ogv" type="video/ogg" /> <!-- download piece & check -->

<!-- Add fallback flash object markup here... -->

This content appears if the video tag or the codec is not supported.</video>

Demo 1 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 31/56

JavaScript n’est pas multi-thread

Les performances peuvent êtremauvaises et conduire à une mauvaise

expérience utilisateur.L’utilisation de setTimeout peut aidermais ne rend pas les choses pour autantmulti thread

Web Worker représente la solutionpuisque cela vous permet d’exécuter unetâche en background

Web Workers

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 32/56

Not all functions are alreadyimplemented by all browsers! To solvethis make use of browser prefexis

Browser prefixes

-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;

-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

Demo 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 33/56

Définir ces propres fonts

Pas de grosse différence deperformance

Fallback pour les plus vieux navigateur

Font face

Fonts online 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 34/56

Mais… 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 35/56

Non-Modern Browsers

La plus part des navigateurs ne supportent pas HTMNon-modern Browsers (ref: caniuse.com )

IE 6 - 8

Firefox 3.6 and below

Safari 4.0 and below

Chrome 7

Opera 10.x and below

Même les navigateurs récents ont des problèmes

Pas toujours la même implémentation 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 36/56

Browser Fragmentation

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 37/56

Fragmentation

Différents niveaux de support

Par navigateur

Par version

Nouvelle version constante

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 38/56

FEATURE DETECTION

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 39/56

Pas de check par navigateur

Disponibilité de la fonctionnalité

HTML5 d’abord Fix dynamique

Permettra une meilleure maintenance!

Feature detection

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 40/56

Mauvais

// If not IE then use addEventListener… if (navigator.userAgent.indexOf("MSIE") == -1) {

window.addEventListener( “load”, popMessage, false );

} else if (window.attachEvent) {

window.attachEvent( “onload”, popMessage);

}

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 41/56

Bon

if (window.addEventListener) {

window.addEventListener( “load”, popMessage, false );

} else if (window.attachEvent) {

window.attachEvent( “onload”, popMessage);

}

M i d l é ifi i

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 42/56

Mais quand les vérificationsressemble à ça: 

unction(){

varsheet, bool,head = docHead || docElement,style = document.createElement("style"),impl = document.implementation || { hasFeature: function() { return false; } };

style.type = 'text/css';head.insertBefore(style, head.firstChild);sheet = style.sheet || style.styleSheet;

var supportAtRule = impl.hasFeature('CSS2', '') ?function(rule) {

if (!(sheet && rule)) return false;var result = false;try {

sheet.insertRule(rule, 0);result = (/src/i).test(sheet.cssRules[0].cssText);sheet.deleteRule(sheet.cssRules.length - 1 );

} catch(e) { }return result;

} :function(rule) {

if (!(sheet && rule)) return false;sheet.cssText = rule;

return sheet.cssText.length !== 0 && (/ src/i).test(sheet.cssText) &&sheet.cssText

.replace(/\r+|\n+/g, '')

.indexOf(rule.split(' ')[0]) === 0;};

bool = supportAtRule('@font-face { font-family: "font"; src: url(data:,); }');head.removeChild(style);return bool;

};

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 43/56

La meilleure option du moment

http://www.modernizr.com/  

Détection de fonctionnalité

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 44/56

Super à jourDétecte:

HTML5CSS3

Inclut HTML5Shim pour les tag sémantiqueLargement utilisé

Twitter, National Football League, Burger King,and many more… 

Toujours à jour(Se trouve par défaut dans vos projetsASP.NET MVC3)

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 45/56

Test for @font-facefunction(){

varsheet, bool,head = docHead || docElement,style = document.createElement("style"),impl = document.implementation || { hasFeature: function() { return false; } };

style.type = 'text/css';head.insertBefore(style, head.firstChild);sheet = style.sheet || style.styleSheet;

var supportAtRule = impl.hasFeature('CSS2', '') ?

function(rule) {if (!(sheet && rule)) return false;var result = false;try {

sheet.insertRule(rule, 0) ;result = (/src/i).test(sheet.cssRules[0].cssText);sheet.deleteRule(sheet.cssRules.length - 1);

} catch(e) { }return result;

} :function(rule) {

if (!(sheet && rule)) return false;sheet.cssText = rule;

return sheet.cssText.length !== 0 && ( /src/i).test(sheet.cssText) &&sheet.cssText

.replace(/\r+|\n+/g, '')

.indexOf(rule.split(' ')[0]) === 0;};

bool = supportAtRule('@font-face { font-family: "font"; src: url(data:,); }');head.removeChild(style);return bool;

};

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 46/56

Test for @font-face

if (Modernizr.fontface){… }

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 47/56

Demo time

Modernizr 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 48/56

Qu’est-ce que c’est ?JavaScript, HTML & CSS

Qu’est-ce que ça fait ?

Vous donne accès à la technologie quevous devriez recevoir du browser

Support pour le manquement defonctionalité

Quand les utiliserComme fallback

Polyfills & Shims

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 49/56

Polyfill:

Réplique extacte de la fonctionalité

Vous permet de développer pour le

future

Shims

Vous fourni une API différente

Non standard

Amène plus de fonctionalités

What is the difference?

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 50/56

Liste ici: http://bit.ly/b5HV1xAttention: tous ne sont pas bons

Ceux qui sont souvent utilisésPolyfill:

HTML5Shim – pour les tags sémantiqueStorage Polyfill - HTML5 localStorageH5F – pour les différents types de formulaires

Shims:

Amplify Store – persistent client-side storageusing localStorage, globalStorage,sessionStorage & userDataeasyXDM – Cross-domain messaging

Polyfills and Shims

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 51/56

Microsoft Approach with HTML5

beautyoftheweb.com  ietestdrive.com  html5labs.com 

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 52/56

BreakLets have a break (till 13:30)

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 53/56

Part 1

Platform overview

What’s coming for you 

WebMatrix

Orchard CMSPart 2

HTML 5

Modernizr

Web fonts

Part 3

Now it’s your turn! 

Agenda

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 54/56

Orchard with WebMatrix HOL

HTML 5 HOL

Part 3

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 55/56

 

Q&A

8/2/2019 WebCamps Belgium HTML 5-Fr

http://slidepdf.com/reader/full/webcamps-belgium-html-5-fr 56/56