HTML5 - Pedro Rosa

  • Published on
    06-May-2015

  • View
    645

  • Download
    3

DESCRIPTION

Nesta sesso objetivo mostrar as novas funcionalidade do HTML5, bem como a integrao com tecnologias existentes. Nesta sesso vo ser abordadas as diferenas existentes entre o HTML 4 e o HTML 5, vai ser possvel perceber quais so as novas funcionalidades, novos controlos, integrao com tecnologias existentes (CSS e Javascript). Vamos tambm discutir como fazer offline, ligaes ao servidor para enviar ou receber informao e como utilizar o Canvas e o SVG para desenhar em HTML. Comunidade NetPonto, a comunidade .NET em Portugal! http://netponto.org

Transcript

  • 1.36 Reunio Presencial Lisboa - 03/02/2013 http://netponto.orgO que o HTML5 e porque que me devopreocupar com isso?Pedro Rosa

2. Tag Description Specifies a list of pre-defined options for input controls Defines a key-pair generator field (for forms) Defines the result of a calculation 3. Tag DescriptionDefines an articleDefines content aside from the page contentIsolates a part of text that might be formatted in a different direction from other text outside it Defines a command button that a user can invokeDefines additional details that the user can view or hide Defines a visible heading for a element Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. Defines a caption for a element Defines a footer for a document or section Defines a header for a document or section 4. TagDescription Groups a set of to elements when a heading has multiple levels Defines marked/highlighted textDefines a scalar measurement within a known range (a gauge)Defines navigation links Represents the progress of a task Defines a ruby annotation (for East Asian typography) Defines an explanation/pronunciation of characters (for East Asian typography) Defines what to show in browsers that do not support ruby annotationsDefines a section in a document Defines a date/timeDefines a possible line-break 5. New Atributes 6. Make an Element DraggableWhat 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. 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. 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. 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. 11. ctx.moveTo(0,0);ctx.lineTo(300,150);ctx.stroke(); 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. 14. Canvas SVGResolution dependent Resolution independentNo support for event handlersSupport for event handlersPoor text rendering capabilities Best suited for applications with largeYou can save the resulting image as .png rendering areas (Google Maps)or .jpg Slow rendering if complex (anything thatWell suited for graphic-intensive gamesuses the DOM a lot will be slow)Not suited for game applications 15. Your browser does not support the audio element. 16. http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/ 17. 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. 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. Deprecated. Will not be supported on IE or Firefox, andwill probably be phased out from the other browsers atsome stage. 21. 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 www.JohnnyD.com.I live at 1234 Peach Drive, Warner Robins, Georgia.Hello, my name isJohn Doe,I am agraduate research assistantat theUniversity of Dreams.My friends call meJohnny.You can visit my homepage atwww.JohnnyD.com.I live at1234 Peach Drive,Warner Robins,Georgia.