Post on 03-Aug-2015
PARA ESTUDANTES UNIVERSITÁRIOS
Paullo Norato, prazer ;)
Desenvolvedor front-end há 5 anos
Formado em análise de sistemas
Fundador do blog Front-end Para Leigos
Participou do Google Developer Bus
Desenvolveu seu próprio framework
Aprendeu a mexer no Github há alguns dias
fb.com/paullonorato
github.com/paullonorato
instagram.com/paullonorato
ou simplesmente
Paullo Norato no Google,
mas cuidado!
Thom
?
Tudo começou em 5 de fevereiro de 2004...
...o tempo passou e ela foi lançada em 2008
pessoas_aleatorias.jpg
http://caniuse.com/#search=html5
...e então, finalizada em 29 de outubro de 2014
http://abgocreate.funlearning.com/
http://www.marky.pl/vector-field/ http://codepen.io/ma77os/full/spekH
http://studio.gootechnologies.com/skazka/
www.chromeexperiments.com/webgl
- Localização geográfica (GPS)
- API de orientação (acelerômetro)
- WebGL (GPU)
- API de áudio da web (hardware de áudio)
http://html5demos.com/geo
http://bit.ly/1g0MTFD
http://labs.dinahmoe.com/ToneCraft/http://labs.dinahmoe.com/plink/
http://html5-demos.appspot.com/static/getusermedia/photobooth.html
- alguns elementos morreram =/
- porém, outros nasceram =)
- microdata e microformats *-*
- resumindo: ficou mais... sensual <3
PRIMEIRAMENTE: o cabeçalho
<!DOCTYPE html><html><head>
<meta charset="UTF-8"><title></title>
</head>
<body></body></html>
PRIMEIRAMENTE: o cabeçalho
<!DOCTYPE html>
PRIMEIRAMENTE: o cabeçalho
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ou
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
ou
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
http://www.w3.org/TR/html401/struct/global.html
DE NOVOo cabeçalho
<!DOCTYPE html>
Deixe que o browser faça o trabalho pesado
;)
SEGUNDAMENTE: quem partiu dessa pra melhor
<acronym>
<applet>
<dir>
<xmp>
<frame>
<frameset>
<noframes>
<basefont>
<big>
<center>
<font>
<strike>
<tt>{CSS
SEGUNDAMENTE: quem nasceu
<header>
<nav>
<menu>
<section>
<article>
<aside>
<main>
<footer>
<strong>
<em>
<abbr>
<address>
<figure>
<figcapture>
<figcapture>
<video>
<audio>
<svg>
<canvas>
<details>
TERCEIRAMENTE: quem nasceu
(formulário: tipos de entrada)
<color>
<date>
<datetime>
<datetime-local>
<email>
<month>
<number>
<range>
<search>
<tel>
<time>
<url>
<week>
TERCEIRAMENTE: quem nasceu(formulário: atributos)
autocomplete
formnovalidate
placeholder
required
entre outras...
MICRODATA
http://youtu.be/XPLUH9I_IJs?t=4m55s
Dados sobre dados:Microdata e Open Graph
More efficient connectivity means more real-time chats, faster games, and better
communication. Web Sockets and Server-Sent Events are pushing data between client and
server more efficiently than ever before.
Conectividade mais eficiente significa mais chats em tempo real, jogos mais rápidos e uma melhor comunicação. Web Sockets e Eventos enviados pelo servidor estão empurrando dados entre cliente e servidor de forma mais
eficiente do que nunca.
http://www.w3.org/html/logo/
http://html5demos.com/offline
http://scrumblr.ca/HTML5
CSS3 delivers a wide range of stylization and effects, enhancing the web app without
sacrificing your semantic structure or performance
CSS3 oferece uma ampla gama de estilização e efeitos, reforçando a aplicação web sem sacrificar a sua estrutura ou desempenho semântico
http://www.w3.org/html/logo/
IE’ca não é browser
MAS LEMBRE-SE:
FEATURES:
Transform
Translate
Skew
Scale
Rotate
Transition
...
Animation
Keyframes
(eh tipo Flash só
quem sem o Flash)
VEREMOS NO PRÓXIMO SLIDE
www.raphaelfabeni.com.br/lab-css3
Web Apps can start faster and work even if there is no internet connection, thanks to the
HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API
specifications
Web Apps pode começar mais rápido e trabalhar mesmo se não houver conexão com a internet, graças ao HTML5 App Cache, bem como o
armazenamento local, indexad DB e os arquivos de especificações de API
http://www.w3.org/html/logo/
http://www.html5rocks.com/pt/features/storage
http://www.ellipsetours.com/Demos/storage/
Performance is a Feature
- cada bit vale muito
- reaproveite as classes do CSS
- comprima os CSSs, JSs, imagens (...tudo)
- Elimine redirecionamentos desnecessários
- Adote o PageSpeed Insights by Google
“Não adianta ter feito um pu*a trampo no back-end se ofront ta todo cag*do”
Do grande pensador, Paullo Norato
Apenas um segundo de atraso no carregamento da página
pode causar perda de 7% nas conversões de clientes
http://bit.ly/1e6iJiA
Como um segundo pode custar para Amazon
$1,6 bilhões em vendas
http://bit.ly/1ejSNig
O PODER ESTÁ NO FRONThttps://www.youtube.com/watch?v=cmT3clnhbiQ
Audio and video are first class citizens in the HTML5 web, living in harmony with your apps
and sites. Lights, camera, action!
O áudio eo vídeo são cidadãos de primeira classe na web HTML5, vivendo em harmonia com seus aplicativos e sites. Luzes, câmera, ação!
http://www.w3.org/html/logo/
https://www.youtube.com/html5
- as tags de áudio e vídeo são iguais ;)
- você pode definir mais de uma extensão *-*
- caso nenhuma for aceita pelo browser,você pode exibir uma mensagem =O
<video src="foo.ogg" controls></video>
ou
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
Seu navegador não suporta o elemento <code>video</code>
</video>
ACABOU =}
Dúvidas
Muito obrigado
*agora vcs batem palma*