Html5 para estudantes universitários

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!

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>


<!DOCTYPE html>


<!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


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.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!


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*

Html5 para estudantes universitários

Education

Transcript of Html5 para estudantes universitários