front-end do século xxi.i
DESCRIPTION
HTML5, CSS3, JS and more things...TRANSCRIPT
![Page 1: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/1.jpg)
Front-end doséculo XXI.I
HTML5, CSS3, JS and more things...
LuizTiago.com
![Page 2: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/2.jpg)
Luiz Tiago...
Front-end Manager @ MGR Tecnologia
iPhone Developer
jQuery Brasil Team
Especialista em “Mobile Development”
And more things...
![Page 3: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/3.jpg)
Um pouco do passado...Um pouco do passado...
ultrad.com.br
![Page 4: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/4.jpg)
Um pouco do passado...
A web não tinha forma
A W3C estava começando
Os desenvolvedores estavam começando
Os browsers estavam começando
![Page 5: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/5.jpg)
Um pouco do passado...“Escolha o browser que você utiliza”
“Qual resolução você utiliza?”
( ) 640x480 ( ) 800x600
![Page 6: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/6.jpg)
Estamos no passado?
“Este site só funciona no Internet Explorer”
“Resolução máxima recomendada”
Sites que não funcionam em dispositivos móveis
Falta de mão-de-obra qualificada
![Page 7: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/7.jpg)
Melhoria progressiva
O projeto é feito de baixo para cima
Em seguida o desenvolvedor adiciona funcionalidades e melhorias para o comportamento da página
![Page 8: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/8.jpg)
Melhoria progressiva
As funcionalidades não são afetadas
A navegabilidade não é afetada
Apenas o layout e efeitos avançados podem sofrer pequenas alterações dependendo do browser em que estiver acessando
![Page 9: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/9.jpg)
Timeline
20019,8 milhões
201158 milhões
2021?????
![Page 10: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/10.jpg)
Mercado
![Page 11: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/11.jpg)
Mercado
Como ser procurado?
Como ser escolhido?
Como manter destaque?
![Page 12: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/12.jpg)
Tríade Client-side
HTML
CSS
Javascript
![Page 13: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/13.jpg)
Front-endDesigner x Engineer
HTML e CSS, hoje, é obrigação de todo o time
Javascript cresce cada dia mais
Por que ficar de fora?
![Page 14: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/14.jpg)
Hands on...
![Page 15: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/15.jpg)
CSS3
![Page 16: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/16.jpg)
Bordas arredondadas
Sombras e degradês
Animações / Transições
Fontes diferenciadas
Fácil criação de layout em colunas
Nem todo browser suporta...
CSS3
![Page 17: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/17.jpg)
CSS3
![Page 18: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/18.jpg)
Não é CSS3,mas vale à pena!
![Page 19: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/19.jpg)
CSS3
Chrome / Firefox / Safari IE6 / IE7 / IE8
![Page 20: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/20.jpg)
http://www.css3files.com/
http://www.css3.info/
http://www.css3generator.com/
CSS3
![Page 21: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/21.jpg)
![Page 22: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/22.jpg)
Anunciado no início de 2009
Conclusão (implementação 100%) prevista para 2022
Esperar?
![Page 23: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/23.jpg)
Navegadores antigos são como TV’s preto e branco....
![Page 24: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/24.jpg)
Navegadores modernos são como TV’s Full HD....
![Page 25: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/25.jpg)
A TV já resolveu esse problema... (Zeno Rocha)
E você esperando?
![Page 26: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/26.jpg)
Tags semânticas
<header> <footer>
<article> <section> <content>
<nav> <hgroup>
<data>
entre outras...
![Page 27: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/27.jpg)
Elementos multimídia
audio
video
![Page 28: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/28.jpg)
Desenhos
canvas
svg
![Page 29: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/29.jpg)
Elementos que valorizam a semântica;
Elementos multimídia;
Facilidade para desenhos dinâmicos (canvas);
Drag and Drop de elementos;
Geolocation API;
Armazenamento de dados no cliente;
Não faz quase nada sozinho
![Page 30: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/30.jpg)
“JAVASCRIPT”;var comoFaz =
![Page 31: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/31.jpg)
JAVASCRIPTTop Languages @ Github
![Page 32: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/32.jpg)
JAVASCRIPTNão tem nada haver com Java
jQuery
AJAX
JSON
Futuro!
![Page 33: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/33.jpg)
jQuery
Há muito tempo é a biblioteca Javascript de maior uso
Código-aberto
Cross-browser :)
Qualquer um pode contribuir
![Page 34: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/34.jpg)
jQuery - quem usa?
Google, Amazon, IBM, Microsoft, Twitter, Dell, Best Buy, NBC, EA, Match, ESPN, CBS News, Bank of America
Eu...
Você!
![Page 35: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/35.jpg)
jQuery - como contribuir?Código
https://github.com/jquery/jquery
http://bugs.jquery.com/
Tradução (EN -> PT-BR)
http://www.jquerybrasil.org
![Page 36: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/36.jpg)
More things...NoSQL
Node.JS
Testes
Patterns
Git
Performance
Mobile
Escalabilidade
Modularização
![Page 37: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/37.jpg)
Front-end do século XXI.I
Um ninja não aparece muito...
mas deixa um resultado considerável
(Leo Balter)
![Page 38: Front-End do Século XXI.I](https://reader033.vdocuments.us/reader033/viewer/2022051323/548bdb7db479597e6a8b463e/html5/thumbnails/38.jpg)
Can I help you?
@ luiztiago
www.luiztiago.com