36ª Reunião Presencial – Lisboa - 03/02/2013 http://netponto.org          O que é o HTML5 e porque é que me devo          ...
Tag                                       Description<datalist>   Specifies a list of pre-defined options for input contro...
Tag                                         Description<article>    Defines an article<aside>      Defines content aside f...
Tag                                        Description<hgroup>     Groups a set of <h1> to <h6> elements when a heading ha...
New Atributes
Make an Element Draggable<img draggable="true">What to Drag - ondragstart and setData()function drag(ev){ev.dataTransfer.s...
main.js:var worker = new Worker(task.js);worker.onmessage = function(event) { alert(event.data); };worker.postMessage(data...
pagescript.js: var worker = new SharedWorker("jsworker.js"); worker.port.addEventListener("message", function(e) {alert(e....
var socket = new WebSocket(ws://RedDog.websocket.org/echo);socket.onopen = function(event) {  socket.send(Hello, WebSocket...
<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,...
ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.stroke();ctx.font="30px Arial";ctx.fillText("Hello World",10,50);ctx.str...
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">  <polygon points="100,10 40,180 190,60 10,60 160,180" ...
Canvas                                       SVG•Resolution dependent                       •Resolution independent•No sup...
<audio controls>  <source src="horse.ogg" type="audio/ogg">  <source src="horse.mp3" type="audio/mpeg">Your browser does n...
<video width="320" height="240" controls>   <source src="movie.mp4" type="video/mp4">   <source src="movie.ogg" type="vide...
<script>var x=document.getElementById("demo");function getLocation(){  if (navigator.geolocation){    navigator.geolocatio...
if (localStorage.clickcount)  {  localStorage.clickcount=Number(localStorage.clickcount)+1;  }else  {  localStorage.clickc...
if (sessionStorage.clickcount)  {  sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;  }else  {  sessionStorag...
Deprecated. Will not be supported on IE or Firefox, andwill probably be phased out from the other browsers atsome stage.
<section> Hello, my name is John Doe, I am a graduate research assistant atthe University of Dreams.My friends call me Joh...
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
HTML5 - Pedro Rosa
Upcoming SlideShare
Loading in …5
×

HTML5 - Pedro Rosa

967 views

Published on

Nesta sessão é objetivo mostrar as novas funcionalidade do HTML5, bem como a integração com tecnologias existentes.

Nesta sessão vão ser abordadas as diferenças existentes entre o HTML 4 e o HTML 5, vai ser possível perceber quais são as novas funcionalidades, novos controlos, integração com tecnologias existentes (CSS e Javascript). Vamos também discutir como fazer offline, ligações ao servidor para enviar ou receber informação e como utilizar o Canvas e o SVG para desenhar em HTML.

Comunidade NetPonto, a comunidade .NET em Portugal!
http://netponto.org

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
967
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 - Pedro Rosa

  1. 1. 36ª Reunião Presencial – Lisboa - 03/02/2013 http://netponto.org O que é o HTML5 e porque é que me devo preocupar com isso? Pedro Rosa
  2. 2. Tag Description<datalist> Specifies a list of pre-defined options for input controls<keygen> Defines a key-pair generator field (for forms)<output> Defines the result of a calculation
  3. 3. Tag Description<article> Defines an article<aside> Defines content aside from the page content<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it<command> Defines a command button that a user can invoke<details> Defines additional details that the user can view or hide<summary> Defines a visible heading for a <details> element<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.<figcaption> Defines a caption for a <figure> element<footer> Defines a footer for a document or section<header> Defines a header for a document or section
  4. 4. Tag Description<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels<mark> Defines marked/highlighted text<meter> Defines a scalar measurement within a known range (a gauge)<nav> Defines navigation links<progress> Represents the progress of a task<ruby> Defines a ruby annotation (for East Asian typography)<rt> Defines an explanation/pronunciation of characters (for East Asian typography)<rp> Defines what to show in browsers that do not support ruby annotations<section> Defines a section in a document<time> Defines a date/time<wbr> Defines a possible line-break
  5. 5. New Atributes
  6. 6. Make an Element Draggable<img draggable="true">What to Drag - ondragstart and setData()function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}Where to Drop - ondragoverevent.preventDefault()Do the Drop - ondropfunction drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}
  7. 7. main.js:var worker = new Worker(task.js);worker.onmessage = function(event) { alert(event.data); };worker.postMessage(data);task.js:self.onmessage = function(event) { // Do some work. self.postMessage("recvd: " + event.data);};
  8. 8. pagescript.js: var worker = new SharedWorker("jsworker.js"); worker.port.addEventListener("message", function(e) {alert(e.data);}, false); worker.port.start(); // post a message to the shared web worker worker.port.postMessage("Alyssa");jsworker.js: var connections = 0; // count active connections self.addEventListener("connect", function (e) { var port = e.ports[0]; connections++; port.addEventListener("message", function (e) {port.postMessage("Hello " + e.data + " (port #" + connections +")"); }, false); port.start(); }, false);
  9. 9. var socket = new WebSocket(ws://RedDog.websocket.org/echo);socket.onopen = function(event) { socket.send(Hello, WebSocket);};socket.onmessage = function(event) { alert(event.data); }socket.onclose = function(event) { alert(closed); }
  10. 10. <canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>
  11. 11. <script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script>ctx.moveTo(0,0);ctx.lineTo(300,150);ctx.stroke();
  12. 12. ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.stroke();ctx.font="30px Arial";ctx.fillText("Hello World",10,50);ctx.strokeText("Hello World",100,500);var img=document.getElementById("scream");ctx.drawImage(img,10,10);
  13. 13. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"></svg>
  14. 14. Canvas SVG•Resolution dependent •Resolution independent•No support for event handlers •Support for event handlers•Poor text rendering capabilities •Best suited for applications with large•You can save the resulting image as .png rendering areas (Google Maps)or .jpg •Slow rendering if complex (anything that•Well suited for graphic-intensive games uses the DOM a lot will be slow) •Not suited for game applications
  15. 15. <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>
  16. 16. <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"> </object> </video>http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/
  17. 17. <script>var x=document.getElementById("demo");function getLocation(){ if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition); }else{ x.innerHTML="Geolocation is not supported by this browser."; }}function showPosition(position){ x.innerHTML="Latitude: "+position.coords.latitude+ "<br>Longitude:"+position.coords.longitude;}</script>
  18. 18. if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; }else { localStorage.clickcount=1; }document.getElementById("result").innerHTML="You have clicked thebutton " + localStorage.clickcount + " time(s).";
  19. 19. if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; }else { sessionStorage.clickcount=1; }document.getElementById("result").innerHTML="You have clicked thebutton " + sessionStorage.clickcount + " time(s) in this session.";
  20. 20. Deprecated. Will not be supported on IE or Firefox, andwill probably be phased out from the other browsers atsome stage.
  21. 21. <section> Hello, my name is John Doe, I am a graduate research assistant atthe University of Dreams.My friends call me Johnny.You can visit my homepage at <a href="http://www.JohnnyD.com">www.JohnnyD.com</a>.I live at 1234 Peach Drive, Warner Robins, Georgia.</section><section itemscope itemtype="http://schema.org/Person"> Hello, my name is <span itemprop="name">John Doe</span>, I am a <span itemprop="jobTitle">graduate research assistant</span> at the <span itemprop="affiliation">University of Dreams</span>. My friends call me <span itemprop="additionalName">Johnny</span>. You can visit my homepage at <a href="http://www.JohnnyD.com" itemprop="url">www.JohnnyD.com</a>. <section itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> I live at <span itemprop="streetAddress">1234 Peach Drive</span>, <span itemprop="addressLocality">Warner Robins</span>, <span itemprop="addressRegion">Georgia</span>. </section></section>

×