Embed Size (px)
Citation preview
HTML 5 & JAVASCRIPTPARA STARTUPS
Giolvani de Matos
• Empreendedor
• Desenvolvedor 8+ anos
• Desenvolvedor PHP, .NET...
• Cofundador do Laminapp
• Colaborador no Iguassu Startups
https://github.com/giolvani
http://linkedin.com/in/giolvani
O que é startup?
HTML – história?
• Hypertext Markup Language
• Começou tom Tim Bernes-Lee
• Ficou popular com o Mosaic
• Mantido pela W3C
Guruhttp://w3schools.com/html
Estrutura básica
<!DOCTYPE HTML><html lang=“pt-br”>
<head><meta charset=“utf-8”><title>Page title</title>
</head><body>
<p>content here...</p></body>
</html>
Doctype
• HTML 5<!DOCTYPE html>
• HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org/TR/html4/loose.dtd">
• XHTML 1.0 Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
http://www.w3schools.com/tags/tag_doctype.asp
Motores de renderização
Motor Browser
Webkit Safari, Google Chrome
Gecko Firefox, Mozilla, Camino
Trident Internet Explorer 4 ao 9
Presto Opera 7 ao 10
Blink Google Chrome
Novos elementos
• section
• nav
• article
• aside
• hgroup
• footer
• time
http://www.w3c.br/cursos/html5/conteudo/capitulo5.htmlhttps://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/HTML5_element_list
Polyfill
• Bibliotecas que renderizam (o mais próximo possível) um elemento HTML 5, que ainda não tem suporte nativo do navegador.
https://en.wikipedia.org/wiki/Polyfill
Quais?
• Modernirz
• html5shiv
• JSON2
• es5-shim
• FlashCanvas
...
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Posso usar?http://html5please.com/
Mas, preciso
criar tudo do zero?
Bootstrap CSS
HTML 5 Boilerplate
JavaScript
write less, do more.
bower
