SlideShare a Scribd company logo
1 of 57
HTML5 Overview
Agentes Timeline Simplificações Novidades Tags Mantidas Estrutura Estrutura Antiga Nova Estrutura Tópicos da Apresentação
Tecnologias Class: Semantics Class: Offline & Storage Class: Device Access Class: Connectivity Class: Multimedia Class: 3D, Graphics& Effects Class: Performance & Integration Class: CSS 3 Tópicos da Apresentação
Compatibilidade Opiniões Referências Imagens Tópicos da Apresentação
Web HipertextApplication Technology WorkingGroup (WHATWG) - http://www.whatwg.org/ Criado em 2004 – Contribuidores individuais: Apple, Mozilla, Google e Opera Aberto para Contribuições Demos, APIS, Contribuições ligadas ao HTML World Wide Web Consortion (W3C) - http://www.w3.org/ Draft do HTML5 em 2008 Agentes
1991 – Tags (HTML) mencionadas 1993 – Draft HTML 1995 – HTML 2 1997 – W3C HTML 3.2 (Janeiro) HTML 4 (Dezembro) 1999 – HTML 4.1 – recomendação W3C 2000 – XHTML 1.0 Timeline
2001 – XHTML 1.1 2001/2007 – W3C “Sleeps” 2004 – WATWG inicia Project Web Applications (HTML5) 2008 – Draft HTML5 pela W3C 2009 – W3C anuncia fim do grupo XHTML Timeline
Doctype 	<!DOCTYPE html> 	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 	"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Type não necessário 	<scriptsrc="myscript.js"></script> 	<linkhref="myapp.js"></link> Simplificações
Novidades article aside audio canvas command datagrid datalist datatemplate event-source figure footer header mark meter nav output progress source time video
Tags Mantidas acronym applet basefont dir font s strike u big center frame frameset noframes tt
Estrutura
Estrutura antiga
Estrutura Nova
<header> <nav> <article> <aside> <footer>
<time> <figure> <legend> <meter>
<section> <h1> <h1> <h1>
Givingmeaningtostructure, semantics are front and center with HTML5. A richer set oftags, alongwithRDFa, microdata, andmicroformats, are enabling a more useful, data driven web for bothprogramsandyourusers. Class: Semantics
HTML5 appscan start faster, andworkevenifthereis no internet connection, thankstotheApp Cache, Local Storage, Indexed DB, andthe File APIs. Class: Offline & Storage
Withgeo-locationjustthebeginning, HTML5 will help appstoaccessdevicesoutsideofyour browser andconnectedtoyourcomputer. Class: Device Access
Class: Device Access
More efficientconnectivitymeans more real-time chats, faster games, andbetter communication. Web Sockets and Server-SentEvents are pushing (punintended) data betweenclientand server more efficientlythaneverbefore. Class: Connectivity
Audioandvideo are firstclasscitizens in the HTML5 web, living in harmonywithyourappsand sites. Lights, camera, action! Class: Multimedia
Audioelement (OGG): SRC, AUTOBUFFER, CONTROLS, LOOP, AUTOPLAY 	<audiosrc="music.ogg"autoplaycontrols></audio> Videoelement (OGV, MP4): SRC, CONTROLS, LOOP, AUTOPLAY <videosrc="video.ogv" loop autoplay /> Áudio e Vídeo
<objectclassid="clsid:d27cdb6e- ae6d-11cf-96b8-444553540000"width="425"height="344"codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=6,0,40,0"> 	<paramname="allowFullScreen"value="true" /> 	<paramname="allowscriptaccess"value="always" /> 	<paramname="src"value="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;" /> 	<paramname="allowfullscreen"value="true" /> 	<embedtype="application/x-shockwave-flash"width="425"height="344"src="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;"allowscriptaccess="always"allowfullscreen="true”></embed> </object> Áudio e Vídeo
<objectclassid="clsid:d27cdb6e- ae6d-11cf-96b8-444553540000"width="425"height="344"codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=6,0,40,0"> 	<paramname="allowFullScreen"value="true" /> 	<paramname="allowscriptaccess"value="always" /> 	<paramname="src"value="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;" /> 	<paramname="allowfullscreen"value="true" /> 	<embedtype="application/x-shockwave-flash"width="425"height="344"src="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;"allowscriptaccess="always"allowfullscreen="true”></embed> </object> Áudio e Vídeo
<videowidth="640"height="360"src="http://www.youtube.com/demo/google_main.mp4"controlsautobuffer> 	<p>Trythispage in Safari 4! Oryoucan<ahref="http://www.youtube.com/demo/google_main.mp4">download thevideo</a>instead.</p> </video> Class: Multimedia
OggTheora/Vorbis Firefox 3.5+ Chrome Opera MPEG-4 H.264/ACC Safari Chrome Opera Formatos de Vídeo
Controles Nativos
Player HTML5 http://sublimevideo.net/
Between SVG, Canvas, WebGL, and CSS3 3D features, you'resuretoamazeyouruserswithstunningvisualsnativelyrendered in the browser. Class: 3D, Graphics & Effects
Canvas <canvas id="myCanvas"width="300"height="150">Your browser does nothavesupportfor Canvas.</canvas> <scripttype="text/javascript"><!-- window.addEventListener('load', function () { // Getthecanvaselement. varelem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } http://dev.opera.com/articles/view/html-5-canvas-the-basics/
Canvas context.fillStyle= '#00f'; // blue context.strokeStyle = '#f00'; // red context.lineWidth   = 4; // Draw some rectangles. // Arguments: x, y, width, height context.fillRect  (0,   0, 150, 50);   context.strokeRect(0,  60, 150, 50); context.clearRect (30, 25,  90, 60);   context.strokeRect(30, 25,  90, 60); }, false); // --></script> http://dev.opera.com/articles/view/html-5-canvas-the-basics/
Canvas Aplicações - Exemplo Newton Polinomial - http://www.benjoffe.com/code/demos/interpolate/ BlobSallad - http://www.blobsallad.se/ Star-Field flight - http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html 3D Walker - http://www.benjoffe.com/code/demos/canvascape/ paintWeb-  http://code.google.com/p/paintweb/
Makeyour web app, andthe web, fasterwith a varietyoftechniquesandtechnologiessuch as Web WorkersandXMLHttpRequest 2. No usershalleverwaitonyourwatch. Class: Performance & Integration
CSS3 delivers a wide range ofstylizationandeffects, enhancingthe web appwithoutsacrificingyoursemanticstructureor performance. Additionally Web Open FontFormat (WOFF) providestypographicflexibilityandcontrolfarbeyondanythingthe web hasofferedbefore. Class: CSS 3
Em desenvolvimento Está sendo desenvolvido em sub-especificações transformation animation transition Exemplo do que pode ser feito com CSS 3: http://www.zurb.com/playground Class: CSS 3
Class: CSS 3
Class: CSS 3
Class: CSS 3
Form Demo <formaction="formdemo.php"method="post">     <label for="name">Name:</label>     <inputtype="text"name="name"requiredplaceholder="Name" />     <label for="email">Email:</label>     <inputtype="email"name="email"requiredplaceholder="email@example.com" /> <label for="website">Website:</label> <inputtype="url"name="website"requiredplaceholder="http://www.example.com" /> <label for="number">Number:</label> <inputtype="number"name="number" min="0"max="10"step="2"requiredplaceholder="Even num < 10"> <label for="range">Range:</label> <inputtype="range"name="range" min="0"max="10"step="2" /> <label for="message">Message:</label> <textareaname="message"required></textarea> <inputtype="submit"value="SendMessage" /> </form> http://www.bradshawenterprises.com/tests/formdemo.php
Form Demo (CSS) input:not(:focus), textarea:not(:focus) { opacity:0.5; } input:required, textarea:required { background:url("/tests/formdemo/asterisk_orange.png") no-repeat 280px 7px; } input:valid, textarea:valid { background:url("/tests/formdemo/tick.png") no-repeat 280px 5px; } input:focus:invalid, textarea:focus:invalid { background:url("/tests/formdemo/cancel.png") no-repeat 280px 7px; } input[type=submit] {     padding:10px; background:none; opacity:1.0; } http://www.bradshawenterprises.com/tests/formdemo.php
Form –Tipos search tel url email datetime date month week time datetime-local number range color
Form –Tipos
Form –Tipos
Tabela de Compatibilidade do HTML5 com os principais browsers: http://caniuse.com/ Compatibilidade
“The world ismovingto HTML5” Steve Jobs Opiniões
“Ihad no ideatherewassomuch HTML5 already in play” Tim O’Reilly Opiniões
“The Web hasnotseenthisleveloftransformation, thislevelofaceleration, in thepast 10 years... we’re betting big on HTML5” VicGundotra, Google Opiniões
Coding a HTML 5 Layout from Scratch: (http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/) A preview of HTML 5 (http://www.alistapart.com/articles/previewofhtml5/) HTML 5 and CSS 3: The Techniques You’ll Soon Be Using (http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/) Classic CSS Techniques Made Simple with CSS3 (http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/) HTML 5 differences from HTML 4 (http://dev.w3.org/html5/html4-differences/) Google Bets Big on HTML 5: News from Google I/O (http://radar.oreilly.com/2009/05/google-bets-big-on-html-5.html) Recursos
WHATWG - HTML 5 - http://www.whatwg.org/specs/ IETF - WebSockethttp://tools.ietf.org/html/draft-hixie- thewebsocketprotocol-76 W3C - HTML5 - http://dev.w3.org/html5/spec/Overview.html Blog - Vídeo/HTML5 - http://paulrouget.com/ Referências
http://people.mozilla.com/~prouget/demos/ DynamicContentInjection/play.xhtml http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual- Cheat-Sheet.pdf CSS 3 - http://www.zurb.com/playground/ http://www.slideshare.net/nathansmith/echo-html5 Tag de Vídeo - http://html5doctor.com/the-video-element/ Referências
http://www.w3.org/html/logo/downloads/HTML5_Logo.svg http://www.w3.org/html/logo/downloads/HTML5_Tech_Classes_SVG.zip http://dclips.fundraw.com/zobo500dir/elkbuntu_FBI_Dude_3.jpg http://igs.indiana.edu/geology/ancient/ribbontimeline/timeline01.gif http://www.flickr.com/photos/12905355@N05/4301184191/ http://www.flickr.com/photos/improbulus/311039122/sizes/m/in/photostream/ http://www.flickr.com/photos/niallkennedy/4166725591/sizes/m/in/photostream/ Imagens

More Related Content

What's hot

HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
Todd Anglin
 
Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3
Karambir Singh Nain
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter Lubbers
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
Steven Cahill
 

What's hot (20)

Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
 
What is HTML5
What is HTML5What is HTML5
What is HTML5
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
 
Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
 
HTML5와 오픈소스 기반의 Web Components 기술
HTML5와 오픈소스 기반의 Web Components 기술HTML5와 오픈소스 기반의 Web Components 기술
HTML5와 오픈소스 기반의 Web Components 기술
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
 
Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!Html5 - Novas Tags na Prática!
Html5 - Novas Tags na Prática!
 
Google’s PRPL Web development pattern
Google’s PRPL Web development patternGoogle’s PRPL Web development pattern
Google’s PRPL Web development pattern
 
Develop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will loveDevelop a vanilla.js spa you and your customers will love
Develop a vanilla.js spa you and your customers will love
 

Viewers also liked

Presentation for International Day of Prayer for Creation
Presentation for International Day of Prayer for CreationPresentation for International Day of Prayer for Creation
Presentation for International Day of Prayer for Creation
Gretchen Peck
 

Viewers also liked (16)

Ivcvnz13
Ivcvnz13Ivcvnz13
Ivcvnz13
 
HootUpBCN Atención al cliente con Hootsuite
HootUpBCN Atención al cliente con HootsuiteHootUpBCN Atención al cliente con Hootsuite
HootUpBCN Atención al cliente con Hootsuite
 
Case STudy: Building A Custom Space While Managing A Pediatric Dental Office
Case STudy: Building A Custom Space While Managing A Pediatric Dental OfficeCase STudy: Building A Custom Space While Managing A Pediatric Dental Office
Case STudy: Building A Custom Space While Managing A Pediatric Dental Office
 
11.1 family.istock proofread
11.1 family.istock proofread11.1 family.istock proofread
11.1 family.istock proofread
 
The.past.cont.tense.istock
The.past.cont.tense.istockThe.past.cont.tense.istock
The.past.cont.tense.istock
 
Hiearquia Window
Hiearquia WindowHiearquia Window
Hiearquia Window
 
4 015 smart_obesity
4 015 smart_obesity4 015 smart_obesity
4 015 smart_obesity
 
Presentation for International Day of Prayer for Creation
Presentation for International Day of Prayer for CreationPresentation for International Day of Prayer for Creation
Presentation for International Day of Prayer for Creation
 
1.1 alphabet.istock proofread
1.1 alphabet.istock proofread1.1 alphabet.istock proofread
1.1 alphabet.istock proofread
 
Dogs andpeople
Dogs andpeopleDogs andpeople
Dogs andpeople
 
¿Cómo era Al-ándalus?
¿Cómo era Al-ándalus?¿Cómo era Al-ándalus?
¿Cómo era Al-ándalus?
 
Workstream messaging bc summit2016
Workstream messaging bc summit2016Workstream messaging bc summit2016
Workstream messaging bc summit2016
 
BC Summit Vendor Landscape 2016
BC Summit Vendor Landscape 2016BC Summit Vendor Landscape 2016
BC Summit Vendor Landscape 2016
 
Detection, Rectification and Segmentation of Coplanar Repeated Patterns
Detection, Rectification and Segmentation of Coplanar Repeated PatternsDetection, Rectification and Segmentation of Coplanar Repeated Patterns
Detection, Rectification and Segmentation of Coplanar Repeated Patterns
 
Java Swing
Java SwingJava Swing
Java Swing
 
Selection Sort
Selection SortSelection Sort
Selection Sort
 

Similar to Html5 Overview

WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
George Kanellopoulos
 
Wordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebWordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The Nextweb
George Kanellopoulos
 

Similar to Html5 Overview (20)

HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Daniel Egan Msdn Tech Days Oc
Daniel Egan Msdn Tech Days OcDaniel Egan Msdn Tech Days Oc
Daniel Egan Msdn Tech Days Oc
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5
 
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
Wordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebWordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The Nextweb
 
The current status of html5 technology and standard
The current status of html5 technology and standardThe current status of html5 technology and standard
The current status of html5 technology and standard
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
 
HTML5 and Beyond
HTML5 and BeyondHTML5 and Beyond
HTML5 and Beyond
 

More from Daniel Arndt Alves

More from Daniel Arndt Alves (20)

Sessao
SessaoSessao
Sessao
 
Variaveis Superglobais
Variaveis SuperglobaisVariaveis Superglobais
Variaveis Superglobais
 
Programacao Modular
Programacao ModularProgramacao Modular
Programacao Modular
 
Strings, Arrays e Manipulação Datas em PHP
Strings, Arrays e Manipulação Datas em PHPStrings, Arrays e Manipulação Datas em PHP
Strings, Arrays e Manipulação Datas em PHP
 
Introducao ao PHP
Introducao ao PHPIntroducao ao PHP
Introducao ao PHP
 
Arquitetura web
Arquitetura webArquitetura web
Arquitetura web
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Histórico de Participação do Mackenzie na Maratona de Programação
Histórico de Participação do Mackenzie na Maratona de ProgramaçãoHistórico de Participação do Mackenzie na Maratona de Programação
Histórico de Participação do Mackenzie na Maratona de Programação
 
Polimorfismo
PolimorfismoPolimorfismo
Polimorfismo
 
Insertion Sort
Insertion SortInsertion Sort
Insertion Sort
 
Bubble Sort
Bubble SortBubble Sort
Bubble Sort
 
Análise de Algoritmos
Análise de AlgoritmosAnálise de Algoritmos
Análise de Algoritmos
 
Java RMI
Java RMIJava RMI
Java RMI
 
Java Platform, Enterprise Edition
Java Platform, Enterprise EditionJava Platform, Enterprise Edition
Java Platform, Enterprise Edition
 
Conceitos Básicos de Objetos Distribuidos
Conceitos Básicos de Objetos DistribuidosConceitos Básicos de Objetos Distribuidos
Conceitos Básicos de Objetos Distribuidos
 
Exercicios - Java Swing Listeners
Exercicios - Java Swing ListenersExercicios - Java Swing Listeners
Exercicios - Java Swing Listeners
 
Gerenciadores de Layout
Gerenciadores de LayoutGerenciadores de Layout
Gerenciadores de Layout
 
Exercicios - Java Swing
Exercicios - Java SwingExercicios - Java Swing
Exercicios - Java Swing
 
Java AWT
Java AWTJava AWT
Java AWT
 
Estrutura de Dados II - Plano de Ensino
Estrutura de Dados II - Plano de EnsinoEstrutura de Dados II - Plano de Ensino
Estrutura de Dados II - Plano de Ensino
 

Recently uploaded

BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
SoniaTolstoy
 

Recently uploaded (20)

Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 

Html5 Overview

  • 2. Agentes Timeline Simplificações Novidades Tags Mantidas Estrutura Estrutura Antiga Nova Estrutura Tópicos da Apresentação
  • 3. Tecnologias Class: Semantics Class: Offline & Storage Class: Device Access Class: Connectivity Class: Multimedia Class: 3D, Graphics& Effects Class: Performance & Integration Class: CSS 3 Tópicos da Apresentação
  • 4. Compatibilidade Opiniões Referências Imagens Tópicos da Apresentação
  • 5. Web HipertextApplication Technology WorkingGroup (WHATWG) - http://www.whatwg.org/ Criado em 2004 – Contribuidores individuais: Apple, Mozilla, Google e Opera Aberto para Contribuições Demos, APIS, Contribuições ligadas ao HTML World Wide Web Consortion (W3C) - http://www.w3.org/ Draft do HTML5 em 2008 Agentes
  • 6. 1991 – Tags (HTML) mencionadas 1993 – Draft HTML 1995 – HTML 2 1997 – W3C HTML 3.2 (Janeiro) HTML 4 (Dezembro) 1999 – HTML 4.1 – recomendação W3C 2000 – XHTML 1.0 Timeline
  • 7. 2001 – XHTML 1.1 2001/2007 – W3C “Sleeps” 2004 – WATWG inicia Project Web Applications (HTML5) 2008 – Draft HTML5 pela W3C 2009 – W3C anuncia fim do grupo XHTML Timeline
  • 8. Doctype <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Type não necessário <scriptsrc="myscript.js"></script> <linkhref="myapp.js"></link> Simplificações
  • 9. Novidades article aside audio canvas command datagrid datalist datatemplate event-source figure footer header mark meter nav output progress source time video
  • 10. Tags Mantidas acronym applet basefont dir font s strike u big center frame frameset noframes tt
  • 14.
  • 15.
  • 16.
  • 17. <header> <nav> <article> <aside> <footer>
  • 20. Givingmeaningtostructure, semantics are front and center with HTML5. A richer set oftags, alongwithRDFa, microdata, andmicroformats, are enabling a more useful, data driven web for bothprogramsandyourusers. Class: Semantics
  • 21. HTML5 appscan start faster, andworkevenifthereis no internet connection, thankstotheApp Cache, Local Storage, Indexed DB, andthe File APIs. Class: Offline & Storage
  • 22. Withgeo-locationjustthebeginning, HTML5 will help appstoaccessdevicesoutsideofyour browser andconnectedtoyourcomputer. Class: Device Access
  • 24. More efficientconnectivitymeans more real-time chats, faster games, andbetter communication. Web Sockets and Server-SentEvents are pushing (punintended) data betweenclientand server more efficientlythaneverbefore. Class: Connectivity
  • 25. Audioandvideo are firstclasscitizens in the HTML5 web, living in harmonywithyourappsand sites. Lights, camera, action! Class: Multimedia
  • 26. Audioelement (OGG): SRC, AUTOBUFFER, CONTROLS, LOOP, AUTOPLAY <audiosrc="music.ogg"autoplaycontrols></audio> Videoelement (OGV, MP4): SRC, CONTROLS, LOOP, AUTOPLAY <videosrc="video.ogv" loop autoplay /> Áudio e Vídeo
  • 27. <objectclassid="clsid:d27cdb6e- ae6d-11cf-96b8-444553540000"width="425"height="344"codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=6,0,40,0"> <paramname="allowFullScreen"value="true" /> <paramname="allowscriptaccess"value="always" /> <paramname="src"value="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;" /> <paramname="allowfullscreen"value="true" /> <embedtype="application/x-shockwave-flash"width="425"height="344"src="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;"allowscriptaccess="always"allowfullscreen="true”></embed> </object> Áudio e Vídeo
  • 28. <objectclassid="clsid:d27cdb6e- ae6d-11cf-96b8-444553540000"width="425"height="344"codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=6,0,40,0"> <paramname="allowFullScreen"value="true" /> <paramname="allowscriptaccess"value="always" /> <paramname="src"value="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;" /> <paramname="allowfullscreen"value="true" /> <embedtype="application/x-shockwave-flash"width="425"height="344"src="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;"allowscriptaccess="always"allowfullscreen="true”></embed> </object> Áudio e Vídeo
  • 29. <videowidth="640"height="360"src="http://www.youtube.com/demo/google_main.mp4"controlsautobuffer> <p>Trythispage in Safari 4! Oryoucan<ahref="http://www.youtube.com/demo/google_main.mp4">download thevideo</a>instead.</p> </video> Class: Multimedia
  • 30. OggTheora/Vorbis Firefox 3.5+ Chrome Opera MPEG-4 H.264/ACC Safari Chrome Opera Formatos de Vídeo
  • 33. Between SVG, Canvas, WebGL, and CSS3 3D features, you'resuretoamazeyouruserswithstunningvisualsnativelyrendered in the browser. Class: 3D, Graphics & Effects
  • 34. Canvas <canvas id="myCanvas"width="300"height="150">Your browser does nothavesupportfor Canvas.</canvas> <scripttype="text/javascript"><!-- window.addEventListener('load', function () { // Getthecanvaselement. varelem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } http://dev.opera.com/articles/view/html-5-canvas-the-basics/
  • 35. Canvas context.fillStyle= '#00f'; // blue context.strokeStyle = '#f00'; // red context.lineWidth = 4; // Draw some rectangles. // Arguments: x, y, width, height context.fillRect (0, 0, 150, 50); context.strokeRect(0, 60, 150, 50); context.clearRect (30, 25, 90, 60); context.strokeRect(30, 25, 90, 60); }, false); // --></script> http://dev.opera.com/articles/view/html-5-canvas-the-basics/
  • 36. Canvas Aplicações - Exemplo Newton Polinomial - http://www.benjoffe.com/code/demos/interpolate/ BlobSallad - http://www.blobsallad.se/ Star-Field flight - http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html 3D Walker - http://www.benjoffe.com/code/demos/canvascape/ paintWeb- http://code.google.com/p/paintweb/
  • 37. Makeyour web app, andthe web, fasterwith a varietyoftechniquesandtechnologiessuch as Web WorkersandXMLHttpRequest 2. No usershalleverwaitonyourwatch. Class: Performance & Integration
  • 38. CSS3 delivers a wide range ofstylizationandeffects, enhancingthe web appwithoutsacrificingyoursemanticstructureor performance. Additionally Web Open FontFormat (WOFF) providestypographicflexibilityandcontrolfarbeyondanythingthe web hasofferedbefore. Class: CSS 3
  • 39. Em desenvolvimento Está sendo desenvolvido em sub-especificações transformation animation transition Exemplo do que pode ser feito com CSS 3: http://www.zurb.com/playground Class: CSS 3
  • 43. Form Demo <formaction="formdemo.php"method="post"> <label for="name">Name:</label> <inputtype="text"name="name"requiredplaceholder="Name" /> <label for="email">Email:</label> <inputtype="email"name="email"requiredplaceholder="email@example.com" /> <label for="website">Website:</label> <inputtype="url"name="website"requiredplaceholder="http://www.example.com" /> <label for="number">Number:</label> <inputtype="number"name="number" min="0"max="10"step="2"requiredplaceholder="Even num < 10"> <label for="range">Range:</label> <inputtype="range"name="range" min="0"max="10"step="2" /> <label for="message">Message:</label> <textareaname="message"required></textarea> <inputtype="submit"value="SendMessage" /> </form> http://www.bradshawenterprises.com/tests/formdemo.php
  • 44. Form Demo (CSS) input:not(:focus), textarea:not(:focus) { opacity:0.5; } input:required, textarea:required { background:url("/tests/formdemo/asterisk_orange.png") no-repeat 280px 7px; } input:valid, textarea:valid { background:url("/tests/formdemo/tick.png") no-repeat 280px 5px; } input:focus:invalid, textarea:focus:invalid { background:url("/tests/formdemo/cancel.png") no-repeat 280px 7px; } input[type=submit] { padding:10px; background:none; opacity:1.0; } http://www.bradshawenterprises.com/tests/formdemo.php
  • 45. Form –Tipos search tel url email datetime date month week time datetime-local number range color
  • 48. Tabela de Compatibilidade do HTML5 com os principais browsers: http://caniuse.com/ Compatibilidade
  • 49. “The world ismovingto HTML5” Steve Jobs Opiniões
  • 50. “Ihad no ideatherewassomuch HTML5 already in play” Tim O’Reilly Opiniões
  • 51. “The Web hasnotseenthisleveloftransformation, thislevelofaceleration, in thepast 10 years... we’re betting big on HTML5” VicGundotra, Google Opiniões
  • 52. Coding a HTML 5 Layout from Scratch: (http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/) A preview of HTML 5 (http://www.alistapart.com/articles/previewofhtml5/) HTML 5 and CSS 3: The Techniques You’ll Soon Be Using (http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/) Classic CSS Techniques Made Simple with CSS3 (http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/) HTML 5 differences from HTML 4 (http://dev.w3.org/html5/html4-differences/) Google Bets Big on HTML 5: News from Google I/O (http://radar.oreilly.com/2009/05/google-bets-big-on-html-5.html) Recursos
  • 53.
  • 54.
  • 55. WHATWG - HTML 5 - http://www.whatwg.org/specs/ IETF - WebSockethttp://tools.ietf.org/html/draft-hixie- thewebsocketprotocol-76 W3C - HTML5 - http://dev.w3.org/html5/spec/Overview.html Blog - Vídeo/HTML5 - http://paulrouget.com/ Referências
  • 56. http://people.mozilla.com/~prouget/demos/ DynamicContentInjection/play.xhtml http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual- Cheat-Sheet.pdf CSS 3 - http://www.zurb.com/playground/ http://www.slideshare.net/nathansmith/echo-html5 Tag de Vídeo - http://html5doctor.com/the-video-element/ Referências
  • 57. http://www.w3.org/html/logo/downloads/HTML5_Logo.svg http://www.w3.org/html/logo/downloads/HTML5_Tech_Classes_SVG.zip http://dclips.fundraw.com/zobo500dir/elkbuntu_FBI_Dude_3.jpg http://igs.indiana.edu/geology/ancient/ribbontimeline/timeline01.gif http://www.flickr.com/photos/12905355@N05/4301184191/ http://www.flickr.com/photos/improbulus/311039122/sizes/m/in/photostream/ http://www.flickr.com/photos/niallkennedy/4166725591/sizes/m/in/photostream/ Imagens