Guia completo para estudantes universitários sobre HTML5 e desenvolvimento front-end
•
0 j'aime•629 vues
O documento apresenta informações sobre Paullo Norato, um desenvolvedor front-end. Ele é formado em análise de sistemas, fundador de um blog sobre front-end e participou do Google Developer Bus. O documento também fornece links para as redes sociais e sites de Paullo Norato.
Recommandé
Recommandé
Contenu connexe
En vedette
Similaire à Guia completo para estudantes universitários sobre HTML5 e desenvolvimento front-end
Similaire à Guia completo para estudantes universitários sobre HTML5 e desenvolvimento front-end (20)
Dernier
Dernier (20)
Guia completo para estudantes universitários sobre HTML5 e desenvolvimento front-end
- 3. 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!
- 4. Thom
- 5. ?
- 6. Tudo começou em 5 de fevereiro de 2004...
- 8. ...o tempo passou e ela foi lançada em 2008
- 16. ...e então, finalizada em 29 de outubro de 2014
- 25. - Localização geográfica (GPS) - API de orientação (acelerômetro) - WebGL (GPU) - API de áudio da web (hardware de áudio)
- 33. - alguns elementos morreram =/ - porém, outros nasceram =) - microdata e microformats *-* - resumindo: ficou mais... sensual <3
- 34. PRIMEIRAMENTE: o cabeçalho <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
- 37. 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
- 39. DE NOVO o cabeçalho <!DOCTYPE html>
- 40. Deixe que o browser faça o trabalho pesado ;)
- 41. SEGUNDAMENTE: quem partiu dessa pra melhor <acronym> <applet> <dir> <xmp> <frame> <frameset> <noframes> <basefont> <big> <center> <font> <strike> <tt> {CSS
- 43. TERCEIRAMENTE: quem nasceu (formulário: tipos de entrada) <color> <date> <datetime> <datetime-local> <email> <month> <number> <range> <search> <tel> <time> <url> <week>
- 44. TERCEIRAMENTE: quem nasceu (formulário: atributos) autocomplete formnovalidate placeholder required entre outras...
- 45. MICRODATA
- 46. http://youtu.be/XPLUH9I_IJs?t=4m55s Dados sobre dados: Microdata e Open Graph
- 48. 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/
- 52. 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/
- 53. IE’ca não é browser MAS LEMBRE-SE:
- 54. FEATURES: Transform Translate Skew Scale Rotate Transition ... Animation Keyframes (eh tipo Flash só quem sem o Flash) VEREMOS NO PRÓXIMO SLIDE
- 57. 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/
- 61. Performance is a Feature
- 62. - 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
- 63. “Não adianta ter feito um pu*a trampo no back-end se o front ta todo cag*do” Do grande pensador, Paullo Norato
- 64. Apenas um segundo de atraso no carregamento da página pode causar perda de 7% nas conversões de clientes http://bit.ly/1e6iJiA
- 65. Como um segundo pode custar para Amazon $1,6 bilhões em vendas http://bit.ly/1ejSNig
- 66. O PODER ESTÁ NO FRONT https://www.youtube.com/watch?v=cmT3clnhbiQ
- 68. 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/
- 71. - 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
- 72. <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>
- 73. ACABOU =}
- 74. Dúvidas
- 75. Muito obrigado *agora vcs batem palma*