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 
<input type="email" name="" value="" required placeholder="">
<input type="date" name="bday" min="2000-01-02">
Ex :

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 




GAME ?

Made with Slides.com