HTML5/Json
Hadji Kouceyla
- Master en IA (USTHB-2011)
- Consultant / Formateur Web
- Intervenant, coach à plusieurs Events
-
Skills: HTML5/CSS3, PHP/Mysql,
JS/jQuery, Json/Ajax, Web Responsive,
Joomla, WordPress, Git
Web Developer?
HTML5 / json ?
HTML5 ?
Why HTML5 ?
What's New ?
Introduction to HTML5
-
HTML is a key element of the Internet
- HTML5 is the new HTML standard
- new elements
- new attributes
- Video and Audio
- 2D/3D Graphics
- local storage
- Local SQL data
- Web applications
- .....
SEMANTICS
- <section>
- <article>
- <nav>
- <header>
- <footer>
-
<aside>
HTML5 Vs HTML4
HTML5 audio and video
<video src="video.ogg" controls preload="auto" >
Your browser does not support the <code>video</code> element. </video>
<audio src="/test/audio.ogg" id="mediaElementID">
<p>Your browser does not support the audio element.</p>
</audio>
var mediaElement = document.getElementById('mediaElementID');
mediaElement.pause(); mediaElement.seekable.start(); // Returns the starting time (in seconds) mediaElement.seekable.end(); // Returns the ending time (in seconds) mediaElement.currentTime = 122; // Seek to 122 seconds mediaElement.played.end(); // Returns the number of seconds the browser has played
http://foo.com/video.ogg#t=60
Example
HTML5 and Forms
- New Input type => Best control
- Ex: color, date, datetime, datetime-local,
email, month, number, range, search, tel, time, url, week
Ex :<input type="email" name="" value="" required placeholder="">
<input type="date" name="bday" min="2000-01-02">
Grag & Drop
HTML5 & Canvas
Added in HTML5, the HTML <canvas> element can be used to draw graphics via scripting in JavaScript (MDN)
<canvas id="a" width="300" height="225"></canvas>
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
context.beginPath();
context.moveTo(0, 40);
context.lineTo(240, 40);
context.moveTo(260, 40);
context.lineTo(500, 40);
context.moveTo(495, 35);
context.lineTo(500, 40);
context.lineTo(495, 45);
HTML5 sVG
Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what XHTML is to text.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
baseProfile="full">
<g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<circle cx="6cm" cy="2cm" r="100" fill="red"
transform="translate(0,50)" />
<circle cx="6cm" cy="2cm" r="100" fill="blue"
transform="translate(70,150)" />
<circle cx="6cm" cy="2cm" r="100" fill="green"
transform="translate(-70,150)" />
</g>
</svg>
Example SVG
HTML5 AppCache
<!doctype html>
<html lang="en" manifest="example.appcache">
<head> ... </head>
<body> ... </body>
</html>
CACHE MANIFEST
# v1 2011-08-14
# This is another comment
index.html
cache.html
style.css
image1.png
# Use from network if available
NETWORK:
network.html
# Fallback content
FALLBACK:
/ fallback.html
HTML5 more
- GEOLOCATION
- Local Storage, Session Storage, IndexedDB
- Web Sockets
- Server-sent events
- WebRTC
- Using the Camera API
- WebGL
- Web Workers
- History API
- Fullscreen API
- Touch events
- Detecting device orientation
JSON
JavaScript Object Notation
is a lightweight data-interchange format (http://json.org/)
var foo = {};
foo.bar = "new property";
foo.baz = 3;
var JSONfoo = JSON.stringify(foo);
REFERENCE
- https://developer.mozilla.org/
- http://json.org/
THANK YOUUUUUUUU
- hadjikouceyla@gmail.com
-
/kouceyla.hadji
-
@kossa7
-
dz.linkedin.com/pub/kouceyla-hadji/34/b31/908/
-
http://be.net/kossa
-
kossahd
GAME ?
HTML5/Json
By kouceyla hadji
HTML5/Json
- 4,540