Html 5 e Css3

HTML 5 II Jornada de Sistemas para Internet - FATESM sexta-feira, 22 de outubro de 2010 1

O que é o HTML 5? sexta-feira, 22 de outubro de 2010 2

CSS 3 HTML 5 JavaScript XML APIs sexta-feira, 22 de outubro de 2010 3

Histórico HTML HTML 4 XHTML HTML 5 1990 1997 2000 2010+ sexta-feira, 22 de outubro de 2010 4

w3c e o xhtml 2 <img /> sexta-feira, 22 de outubro de 2010 5

XHTML 2 não é web! sexta-feira, 22 de outubro de 2010 6

Grupos de Trabalho WHAT WG HTML WG sexta-feira, 22 de outubro de 2010 11

Princípios básicos Simplicidade Adaptação sexta-feira, 22 de outubro de 2010 12

Enxergar o futuro Compreender o passado Tradição sexta-feira, 22 de outubro de 2010 13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1- transitional.dtd"> sexta-feira, 22 de outubro de 2010 14

<!DOCTYPE html> sexta-feira, 22 de outubro de 2010 15

<html xmlns="http://www.w3.org/1999/xhtml" lang=”pt-BR”> <html lang=”pt-BR”> sexta-feira, 22 de outubro de 2010 16

- XML + HTML sexta-feira, 22 de outubro de 2010 18

WEB 3.0 sexta-feira, 22 de outubro de 2010 19

sexta-feira, 22 de outubro de 2010 20

Quando vai estar pronto? sexta-feira, 22 de outubro de 2010 22

W3C: não utilize HTML 5! Mito ou verdade? sexta-feira, 22 de outubro de 2010 23

Chrome Firefox Opera Internet Safari Explorer sexta-feira, 22 de outubro de 2010 24

Globo.com Youtube Google Vimeo CNN Nike Time Apple Facebook The New York Times Flickr Videolog National Adobe Geographic sexta-feira, 22 de outubro de 2010 25

Progressive Enhancement ■ conteúdo e funcionalidades básicas disponível para qualquer browser ■ marcação semântica ■ CSS e JavaScript em arquivos externos e modularizados ■ manter os padrões do browser do usuário sexta-feira, 22 de outubro de 2010 27

Shims, Fallbacks e Polyﬁlls @rem // Remy Sharp http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyﬁlls http://goo.gl/KQDB sexta-feira, 22 de outubro de 2010 28

Estamos coletando todos os shims, fallbacks e polyfills a fim de implementar a funcionalidade do HTML 5 em browsers que não oferecem suporte ao mesmo. A ideia geral é: nós, desenvolvedores, devemos ser capazes de desenvolver com as APIs do HTML 5 e scripts podem criar os métodos e objetos que precisam existir. Desenvolver nesse modo “a prova de futuro” significa que enquanto os usuários se atualizam, seu código não precisa mudar e assim eles já migram para uma experiência melhor e nativa, através de uma forma limpa. sexta-feira, 22 de outubro de 2010 29

Novos elementos sexta-feira, 22 de outubro de 2010 30

Elementos estruturais hgroup video audio section nav header article aside footer ﬁgure ruby progress sexta-feira, 22 de outubro de 2010 31

section uma seção genérica do documento div passa a ser somente um bloco qualquer sexta-feira, 22 de outubro de 2010 32

header cabeçalho do documento ou seção footer rodapé do documento ou seção sexta-feira, 22 de outubro de 2010 33

aside conteúdo que não representa o assunto principal do documento ou seção nav seção de navegação sexta-feira, 22 de outubro de 2010 34

article uma seção independente do documento hgroup conjunto de títulos e subtítulos em um cabeçalho sexta-feira, 22 de outubro de 2010 35

video coisa mais linda do mundo audio coisa mais linda do mundo, só que você não vê sexta-feira, 22 de outubro de 2010 36

video elemento contento vídeo nativo, sem utilização de plugin externo audio o mesmo que acima, mas obviamente indica um áudio sexta-feira, 22 de outubro de 2010 37

Mas como funciona essa estrutura? sexta-feira, 22 de outubro de 2010 38

header section footer sexta-feira, 22 de outubro de 2010 39

header section#container section#artigos aside footer sexta-feira, 22 de outubro de 2010 40

header hgroup h1 com título da página h2 com um subtítulo bem legal nav section / div ul li: home contato faq docs pesquisar... section#container footer sexta-feira, 22 de outubro de 2010 41

header section#container section#artigos aside article article article footer sexta-feira, 22 de outubro de 2010 42

article header h1 com título do artigo algum texto aqui, o próprio conteúdo do artigo footer algumas informações nesse rodapé do artigo, sobre o artigo sexta-feira, 22 de outubro de 2010 43

H1 no artigo?? E a hierarquia???!?! sexta-feira, 22 de outubro de 2010 44

Nova ordenação hierárquica dos títulos sexta-feira, 22 de outubro de 2010 45

Como ﬁca a marcação? sexta-feira, 22 de outubro de 2010 46

Temos mais elementos? sexta-feira, 22 de outubro de 2010 47

E o que não temos mais? font acronym marquee!!! applet big frame frameset sexta-feira, 22 de outubro de 2010 48

A marcação HTML não deﬁne estilização visual sexta-feira, 22 de outubro de 2010 49

O HTML 5 não tem <marquee>! sexta-feira, 22 de outubro de 2010 50

Mais simplicidade sexta-feira, 22 de outubro de 2010 51

<head> e <body> podem ser omitidos... sexta-feira, 22 de outubro de 2010 52

<head> e <body> podem ser omitidos... Mas não faça isso! sexta-feira, 22 de outubro de 2010 52

tags únicas não precisam de / <br /> <br> sexta-feira, 22 de outubro de 2010 53

Esqueça os blocos sexta-feira, 22 de outubro de 2010 55

Problema Estrutural sexta-feira, 22 de outubro de 2010 56

É muito simples resolver... sexta-feira, 22 de outubro de 2010 57

Podemos criar elementos “novos” document.createElement(‘article’); article { display: block } sexta-feira, 22 de outubro de 2010 58

<style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> sexta-feira, 22 de outubro de 2010 59

As APIs do HTML 5 sexta-feira, 22 de outubro de 2010 60

- WebForms 2.0 - Geolocation - Web Storage - Video & Audio - Web Sockets - Canvas & SVG - Web Workers - Aplicações Ofﬂine sexta-feira, 22 de outubro de 2010 61

SVG <svg> <circle id="sol" cx="50%" cy="50%" r="100" fill="yellow" /> </svg> sexta-feira, 22 de outubro de 2010 62

WebForms 2.0 sexta-feira, 22 de outubro de 2010 63

Novos tipos de input email number search datetime range etc sexta-feira, 22 de outubro de 2010 64

Se o browser não reconhece? sexta-feira, 22 de outubro de 2010 65

Novos atributos dos inputs required autocomplete autofocus min / max pattern placeholder sexta-feira, 22 de outubro de 2010 66

<form> <input type=”search” id="q" autofocus required placeholder=”Pesquisar...”> <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" value="Ir"> </form> sexta-feira, 22 de outubro de 2010 67

Validando um form <script> form = document.getElementById(‘f’); if ( form.checkValidity() ) console.log(‘form válido’); </script> sexta-feira, 22 de outubro de 2010 68

Aplicações Off-line <html manifest=”cache.manifest”> sexta-feira, 22 de outubro de 2010 69

CACHE MANIFEST #comentarios e versões CACHE: Arquivos cacheados index.html stylesheet.css imagens/logo.png js/script.js Arquivos que necessitam NETWORK: de status online login.php /myapi http://api.twitter.com FALLBACK: Fallback para recurso /main.php /static.html não disponível sexta-feira, 22 de outubro de 2010 70

var cacheStatus = window.applicationCache.status; window.applicationCache.update(); window.applicationCache.swapCache(); sexta-feira, 22 de outubro de 2010 71

Web Storage Máximo de 20 Cookies Limitados a 4KB Reduzem velocidade da página pois são transferidos via headers do HTTP sexta-feira, 22 de outubro de 2010 72

localStorage domínio de acesso sessionStorage aba/janela aberta sexta-feira, 22 de outubro de 2010 73

localStorage.chave = “valor”; localStorage[‘chave’] = “valor”; sessionStorage.chave = “valor”; sessionStorage[‘chave’] = “valor”; sexta-feira, 22 de outubro de 2010 74

SQL Database sexta-feira, 22 de outubro de 2010 76

var db = openDatabase(“nome”, “versão”); db.transaction(function(tx) { tx.executeSql(“SELECT * FROM tabela”, callbackSucesso, callbackErro); }); sexta-feira, 22 de outubro de 2010 77

Geolocation sexta-feira, 22 de outubro de 2010 79

if (navigator.geolocation) { var geo = navigator.geolocation; geo.getCurrentPosition( function (posicao) { lat = posicao.coords.latitude; lng = posicao.coords.longitude; }); } sexta-feira, 22 de outubro de 2010 80

Web Workers sexta-feira, 22 de outubro de 2010 81

Script principal Worker A Worker B Worker C Worker D sexta-feira, 22 de outubro de 2010 82

main.js: var worker = new Worker('paralelo.js'); worker.onmessage = function(event) { alert(event.data); }; paralelo.js: self.onmessage = function(event) { // trabalho a ser exeucado em paralelo. self.postMessage(dados); } http://leobalter.net/html5/webworkers.html sexta-feira, 22 de outubro de 2010 83

WebSockets sexta-feira, 22 de outubro de 2010 84

Ajax Uma requisição ao servidor vale para um pedido e uma resposta sexta-feira, 22 de outubro de 2010 85

WebSockets Uma única requisição da pra ﬁcar mandando e recebendo mensagens do servidor o dia todo! sexta-feira, 22 de outubro de 2010 86

http://www.rumpetroll.com/ sexta-feira, 22 de outubro de 2010 88

Canvas sexta-feira, 22 de outubro de 2010 89

<canvas id="myCanvas" width="300" height="300"></canvas> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect( 10, 10, 55, 50 ); ctx.fillStyle = "rgba(0,0,200, 0.5)"; ctx.fillRect( 30, 30, 55, 50 ); sexta-feira, 22 de outubro de 2010 90

Audio <audio src="sound.mp3" controls></audio> sexta-feira, 22 de outubro de 2010 92

Video sexta-feira, 22 de outubro de 2010 93

<video width="480" height="267" poster="imagemPoster.jpg" controls> <source type="video/mp4" src="video.mp4" /> <source type="video/webm" src="video.webm" /> <source type="video/ogg" src="video.ogv" /> </video> sexta-feira, 22 de outubro de 2010 94

Tipos de Vídeo WEBM MP4/h.264 OGV Safari Safari Safari Chrome 6 Chrome 5 Chrome 5 IE 9 com v8 IE 9 Firefox 3.5 Firefox 4 iPhone Opera 10.5 Opera 10.6 Android sexta-feira, 22 de outubro de 2010 95

Atributos HTML e JS para <video> controls loop preload autoplay sexta-feira, 22 de outubro de 2010 96

HTML: <video src=”exp.mov” controls preload=”false” loop autoplay></video> JS: var vid = document.getElementById('idVideo'); console.log(vid.controls); console.log(vid.preload); console.log(vid.loop); console.log(vid.autoplay); sexta-feira, 22 de outubro de 2010 97

Controles JS play() / play pause() / pause volume muted currentTime loadeddata ended sexta-feira, 22 de outubro de 2010 98

Como colocar vídeo para funcionar em qualquer browser? sexta-feira, 22 de outubro de 2010 100

<video controls> <source type="video/mp4" src="video.mp4" /> <img src="placeholder.jpg" /> </video> <video controls> <source type="video/mp4" src="video.mp4" /> Esse browser não toca esse vídeo super legal </video> <video controls> <source type="video/mp4" src="video.mp4" /> <object><embed> // Muito flash no meio disso </embed></object> </video> sexta-feira, 22 de outubro de 2010 101

http://www.thewildernessdowntown.com/ sexta-feira, 22 de outubro de 2010 102

CSS 3 sexta-feira, 22 de outubro de 2010 103

HTML JavaScript CSS sexta-feira, 22 de outubro de 2010 104

Cascading Style Sheet sexta-feira, 22 de outubro de 2010 105

1996 sexta-feira, 22 de outubro de 2010 106

Usamos o CSS 2.1 sexta-feira, 22 de outubro de 2010 107

E um pouco de CSS 3 sexta-feira, 22 de outubro de 2010 108

Podemos implementar 100%? sexta-feira, 22 de outubro de 2010 109

html5readiness.com sexta-feira, 22 de outubro de 2010 112

caniuse.com (html5 + css3) IE 6 IE 7 IE 8 IE 9 Firefox 3.6 Firefox 4 Opera Safari Chrome 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% sexta-feira, 22 de outubro de 2010 113

caniuse.com (css3) IE 6 IE 7 IE 8 IE 9 Firefox 3.6 Firefox 4 Opera Safari Chrome 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% sexta-feira, 22 de outubro de 2010 114

O que temos de novo? sexta-feira, 22 de outubro de 2010 115

Novos seletores sexta-feira, 22 de outubro de 2010 116

tag #id .class sexta-feira, 22 de outubro de 2010 117

tag[atributo=valor] ex.: input[type=text] sexta-feira, 22 de outubro de 2010 118

Toda tag “a” com atributo href em que o valor começa com a palavra “http”: a[hrefˆ=http] sexta-feira, 22 de outubro de 2010 119

Toda tag “a” com atributo rel em que nele esteja contido - em qualquer parte - o valor “nofollow”: a[rel*=nofollow] sexta-feira, 22 de outubro de 2010 120

inputs que não sejam do tipo texto: input[type!=text] sexta-feira, 22 de outubro de 2010 121

.linha:nth-child(even) { background: #dde; } .linha:nth-child(odd) { background: white; } sexta-feira, 22 de outubro de 2010 122

selecionar elementos que não tenham a classe “box” :not(.box) sexta-feira, 22 de outubro de 2010 123

li:ﬁrst-child li:last-child sexta-feira, 22 de outubro de 2010 124

@font-face sexta-feira, 22 de outubro de 2010 125

Times new Roman é legal mas... sexta-feira, 22 de outubro de 2010 126

Quero um texto assim no meu site... sexta-feira, 22 de outubro de 2010 127

@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url ('GraublauWeb.ttf') format('truetype'); } @font-face à prova de balas! sexta-feira, 22 de outubro de 2010 128

@font-face Kit Generator http://www.fontsquirrel.com/fontface/generator sexta-feira, 22 de outubro de 2010 129

Google Web Fonts http://code.google.com/webfonts sexta-feira, 22 de outubro de 2010 130

text wrapping sexta-feira, 22 de outubro de 2010 131

p.test { text-overflow: ellipsis; } p { width: 300px; overflow: hidden; height: 50px; white-space: nowrap; border: 1px solid #000; } sexta-feira, 22 de outubro de 2010 132

Border Radius sexta-feira, 22 de outubro de 2010 133

#elemento { border-radius: 10px; } sexta-feira, 22 de outubro de 2010 134

CSS 3 Mozilla Webkit border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius -moz-border-radius- -webkit-border-bottom-right- border-bottom-right-radius bottomright radius -webkit-border-bottom-left- border-bottom-left-radius -moz-border-radius-bottomleft radius border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius border-radius -moz-border-radius -webkit-border-radius sexta-feira, 22 de outubro de 2010 135

A B C D border-radius: 10px 10px 10px 10px; A top-left A B B top-right C bottom-right D C D bottom-left sexta-feira, 22 de outubro de 2010 136

A B border-radius: 10px 10px; A B B A sexta-feira, 22 de outubro de 2010 137

Border Image sexta-feira, 22 de outubro de 2010 138

border-image: url(border.png) 27 27 27 27 round round; border-image: url(border.png) 27 27 27 27 stretch stretch; http://ejohn.org/blog/border-image-in-ﬁrefox/ http://www.lrbabe.com/sdoms/borderImage/ sexta-feira, 22 de outubro de 2010 139

Cores sexta-feira, 22 de outubro de 2010 140

RGB color: rgba(100,100,100, 0.5); background-color: rgb(230,230,230); HSL color: hsl(0,100%,50%); background-color: hsla(120, 100%, 50%, 0.6); sexta-feira, 22 de outubro de 2010 141

Box-Shadow sexta-feira, 22 de outubro de 2010 142

#boxshadow { -webkit-box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.6 ); -moz-box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.6 ); box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.6 ); } sexta-feira, 22 de outubro de 2010 143

box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.6 ); Distância horizontal Cores RGB Distância vertical Opacidade “Nitidez” sexta-feira, 22 de outubro de 2010 144

Text Shadow text-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.6 ); sexta-feira, 22 de outubro de 2010 145

Reﬂexos sexta-feira, 22 de outubro de 2010 146

-webkit-box-reflect: pos dist máscara sexta-feira, 22 de outubro de 2010 147

-webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); <img src="http://www.saomateus.edu.br/Images/logo.jpg" /> http://jsbin.com/ufusa4/edit sexta-feira, 22 de outubro de 2010 148

Transforms sexta-feira, 22 de outubro de 2010 149

-webkit-transform: rotateZ(5deg); sexta-feira, 22 de outubro de 2010 150

Gradient sexta-feira, 22 de outubro de 2010 151

-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(white), color-stop(0.5, white), color-stop(0.5, #66cc00)) sexta-feira, 22 de outubro de 2010 152

-webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000)) sexta-feira, 22 de outubro de 2010 153

background-size sexta-feira, 22 de outubro de 2010 154

background-size: 100% auto contain cover sexta-feira, 22 de outubro de 2010 155

Múltiplos Backgrounds sexta-feira, 22 de outubro de 2010 156

background-image: url(image1.jpg), url(image2.jpg); background-position: top left, bottom right; background-repeat: no-repeat, repeat-y; sexta-feira, 22 de outubro de 2010 157

Colunas sexta-feira, 22 de outubro de 2010 158

-webkit-column-count: 2; -webkit-column-rule: 1px solid #bbb; -webkit-column-gap: 2em; -moz-column-count: 2; -moz-column-rule: 1px solid #bbb; -moz-column-gap: 2em; column-count: 2; column-rule: 1px solid #bbb; column-gap: 2em; sexta-feira, 22 de outubro de 2010 159

Transitions sexta-feira, 22 de outubro de 2010 160

#bola { -webkit-transition: margin-left 1s ease-in-out; -moz-transition: margin-left 1s ease-in-out; -o-transition: margin-left 1s ease-in-out; } #bola.left { margin-left: 0; } #bola.right { margin-left: 780px; } sexta-feira, 22 de outubro de 2010 162

Animations sexta-feira, 22 de outubro de 2010 163

@-webkit-keyframes pulse { from { font-size: 100%; } to { font-size: 200%; } } div { -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; } sexta-feira, 22 de outubro de 2010 164

@-webkit-keyframes pulse { from { font-size: 100%; } to { Pulso font-size: 200%; } } div { -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; } sexta-feira, 22 de outubro de 2010 164

http://goo.gl/mc76 sexta-feira, 22 de outubro de 2010 165

http://goo.gl/Vnqe sexta-feira, 22 de outubro de 2010 167

Leo Balter @leobalter leo@balter.com.br yayquery.com.br sexta-feira, 22 de outubro de 2010 168

Html 5 e Css3

by Faculdade São Lucas on Oct 22, 2010

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 2

Statistics

Html 5 e Css3 Presentation Transcript