WebCamps Belgium HTML 5-Fr

8/2/2019 WebCamps Belgium HTML 5-Fr

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



1.2.3… WEB!

[Loïc Bar]

http://twiter.com/loicbar





Loïc Bar

http://www.thesmartcompany.be

@loicbar

A propos de moi

http://www.thesmartcompany.be/

http://www.thesmartcompany.be/



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!



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?

http://www.webcamps.ms/






Part 1

Platform overview

Pour vous!

WebMatrix

Orchard CMSPart 2

HTML 5

Modernizr

Web fontsPart 3

Now it’s your turn!

Agenda



Webforms

MVC

WebPages DynamicData

WebMatrix

VisualStudio

Platform overview



MVC4

Webforms 4.5

HTML 5CSS 3

IE 10

WebMatrix 2Et plus encore!

Pour vous!



Demo time

ASP.NETMVC 4, VS11



Introduction à WebMatrix

Customizer PublierCréer



Introduction à WebMatrix

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



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.



Demo time

WebMatrix



BreakLets have a short break (till 11)



Part 1

Platform overview

Pour vous!

WebMatrix

Orchard CMSPart 2

HTML 5

Modernizr

Web fontsPart 3


Agenda



t h S l t



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!



HTML 5: Ouvrons la boite:



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

http://joshduck.com/periodic-table.html



<div id=”nav”>

<divid=”sidebar”>

<div id=”article”>

<div id=”footer”>

<div id=”header”>



<nav>

<aside><section>

<article>

<footer>

<header>



Avant:

ajax (pull toutes les secondes)

Comet (long polling)

HTML 5

WebSockets (bidirectional)

Server-Sent events (unidirectional)



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

http://websocket.org/echo.html

http://websocket.org/echo.html



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

http://googlecodesamples.com/html5/sse/sse.html

http://googlecodesamples.com/html5/sse/sse.html



XML

Vectoriel

Référence en dur dans le HTML

SVG

Demo

http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html

http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html



<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

http://www.spielzeugz.de/html5/space-noodles/

http://www.spielzeugz.de/html5/sticky-thing/

http://www.spielzeugz.de/html5/sticky-thing/

http://www.spielzeugz.de/html5/space-noodles/



Web storage (key - value)

Web SQL Database (deprecated)

IndexDB (key - value with indexes >fast!)

File API

Cache manifest



Geolocation

Device orientation

http://c/Users/Krvn/Desktop/WebCamps

http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html

http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html




Audio

<audiopreload="auto" controls autoplay 

loop autobuffer muted crossorigin> 

<source src="intro.ogg" type="audio/ogg" /> <source src="intro.mp3" type="audio/mpeg" /> 

<source src="intro.wav" type="audio/wav" /> 



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

Demo1 Demo2

http://www.beatkeep.net/Popular.htm





http://www.beatkeep.net/Popular.htm



Video

<videowidth="320" height="240" poster="intro.jpg" 

autoplay controls loop autobuffer> 

<source src="intro.mp4" type="video/mp4" /> <source src="intro.webm" type="video/webm" /> 

<source src="intro.ogv" type="video/ogg" /> 



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

Demo 1

http://craftymind.com/factory/html5video/CanvasVideo.html

http://craftymind.com/factory/html5video/CanvasVideo.html



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



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

http://css3please.com/

http://css3please.com/



Définir ces propres fonts

Pas de grosse différence deperformance

Fallback pour les plus vieux navigateur

Font face

Fonts online

http://www.google.com/webfonts

http://www.google.com/webfonts



Mais…



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



Browser Fragmentation



Fragmentation

Différents niveaux de support

Par navigateur

Par version

Nouvelle version constante



FEATURE DETECTION



Pas de check par navigateur

Disponibilité de la fonctionnalité

HTML5 d’abord Fix dynamique

Permettra une meilleure maintenance!

Feature detection



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);

}



Bon

if (window.addEventListener) {

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

} else if (window.attachEvent) {

window.attachEvent( “onload”, popMessage);

}

M i d l é ifi i



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;

};



La meilleure option du moment

http://www.modernizr.com/

Détection de fonctionnalité





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)



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;

};



Test for @font-face

if (Modernizr.fontface){… }



Demo time

Modernizr





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



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?



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



Microsoft Approach with HTML5

beautyoftheweb.com ietestdrive.com html5labs.com

http://www.beautyoftheweb.com/

http://www.ietestdrive.com/

http://www.html5labs.com/

http://www.html5labs.com/

http://www.ietestdrive.com/

http://www.beautyoftheweb.com/



BreakLets have a break (till 13:30)



Part 1

Platform overview

What’s coming for you

WebMatrix

Orchard CMSPart 2

HTML 5

Modernizr

Web fonts

Part 3


Agenda



Orchard with WebMatrix HOL

HTML 5 HOL

Part 3



Q&A

Documents

WebCamps Belgium HTML 5-Fr