Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


HTML5 - the challenge

HTML5 presentation + development challenge for the aufeminin.com product seminar

Laurent Mirguet

on 25 September 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML5 - the challenge

Laurent Mirguet - Sept 26th 2012 HTML5 presentation - the challenge HTML5 introduction HTML5 features Game Development The challenge Adobe Flash is no longer necessary to watch video or consume any kind of web content.
New open standards created in the mobile era, such as HTML5, will win Steve Jobs - Apr 2010 HTML 4.01 was last updated in 2000

In 2004, some representatives of Apple, the Mozilla foundation and Opera, fed up by the slowness of the W3C, created the WHATWG in order to standardize some of the innovation that the browsers were already bringing in

In 2007, the W3C adopted the HTML5 draft from WHATWG as the starting point of the work of the new HTML working group
In 2011, the W3C defined some clear milestone to release an HTML5 spec by 2014

Meanwhile WHATWG continues to put in its specs some new features, continuing to call its project : HTML5 HTML 5 introduction So what is HTML5 ? HTML5 = HTML(5) + CSS(3) + JAVASCRIPT The challenge By teams of 5-6 developers, develop a fully working HTML5 game, in one single day of work. http://atari.com/arcade#!/arcade/superbreakout/play Many many new features !!! <body>
<h1>Page title</h1>
<h2>Page subtitle</h2>

<article> Semantic Improvements <header>

Top links...

<img src="..."/>
<figcaption>Chart 1.1</figcaption>

Copyright ©
<time datetime="2010-11-08">2010</time>.
</body> CSS 3 : new selectors new selectors: .row:nth-child(even) {
image like display
specific attributes: input[type="text"] {
negation: :not(span) {
specific targetting: h2:first-child { CSS 3 : more features Text wrapping
Text stroke
Hue/saturation/Luminance Color
Rounded corners
Gradients Shadows
Background sizing
Border image
Flexible box model
Animations Check
http://slides.html5rocks.com/#text-wrapping Browser support At the end of the day, the only things that matters is the browser support. Check
http://html5test.com/ Canvas 2D Most used in games. <canvas id="canvas" width="838" height="220"></canvas>

var canvasContext = document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);

canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
</script> WebGL - 3D graphics <canvas id="canvas" width="838" height="220"></canvas>

var gl = document.getElementById("canvas").getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
</script> <audio> and <video> tags Most famous feature of HTML5 !

<audio id="audio" src="sound.mp3" controls></audio>
document.getElementById("audio").muted = false;

<video id="video" src="movie.webm" autoplay controls></video>
document.getElementById("video").play(); Offline and persistency features application cache (appcache): allows to store a copy of web app's HTML, CSS and other assets off line, to be used when the network is not available
web storage (local or session): key/value type of storage, maybe used to replace cookies, good for small chunks of data
indexeddb: transactional NoSQL database, good for storing large structured data. Deprecates Web SQL Databases.
filesystem API: allows to create files and folders on the client's disk
offline API: allows to detect whenever the browser is going offline Background and asynchronous features Web sockets var socket = new WebSocket('ws://html5rocks.websocket.org/echo');
socket.onopen = function(event) {
socket.send('Hello, WebSocket');
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('closed'); } (bidirectional communication) Web workers var worker = new Worker('task.js');
worker.onmessage = function(event) { alert(event.data); };
// task.js
self.onmessage = function(event) {
// Do some work.
self.postMessage("recv'd: " + event.data); }; (long-running scripts independents of UI) OS and Hardware access drag'n drop API: inside a web page, or from the desktop
geolocation API
device orientation API (for tablets)

navigator.getUserMedia(): for native audio and video capture
Gamepad API More info http://www.html5rocks.com/ (Google)
https://developer.mozilla.org/en-US/docs/HTML/HTML5 (Firefox)
http://msdn.microsoft.com/en-us/library/ie/hh673546%28v=vs.85%29.aspx (MSDN)
https://developer.apple.com/technologies/safari/html5.html (Safari)

and many other resources on the Web... http://jsbin.com/uharo3 Let's make a game ! The HTML Background management Character and animation Physics and controls Platforms and collisions (skipped)
Scrolling and Game states Several HTML5 gaming frameworks exist LimeJS http://www.limejs.com/
ImpactJS http://impactjs.com/ ($99)
CreateJS http://createjs.com/ (OS)
and many others... Create the best game ! the game can be of any kind:
single, multiplayer
action, adventure, casual
sport, platform, racing, fighting
the game should use at least 2 technologies provided by HTML5 By teams of 5 developers,
you will have a full day to create an HTML5 game Theme: THE 4 ELEMENTS Seminar Day 2 Agenda 9h30: arrival at conference center - breakfast
10h: start of work - grouped by teams
12h30: lunch
14h: work continues
16h30: break + more food
17h: last sprint run
18h30: presentation of the games + vote
19h30: free time
21h: dinner Teams & recommandations each team has one webmaster/designer (who may be better at working on graphics...)
several teams have a non-programer
work with them on the project definition / requirements. And on the graphics.
it is very difficult to parallelize on 4 different tracks on such a short timeframe
find 2 or 3 development tracks and pair-program them
Full transcript