Date post: | 13-Dec-2014 |
Category: |
Technology |
Upload: | luiz-oliveira |
View: | 1,011 times |
Download: | 0 times |
Front-end doséculo XXI.I
HTML5, CSS3, JS and more things...
LuizTiago.com
Luiz Tiago...
Front-end Manager @ MGR Tecnologia
iPhone Developer
jQuery Brasil Team
Especialista em “Mobile Development”
And more things...
Um pouco do passado...Um pouco do passado...
ultrad.com.br
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
Um pouco do passado...“Escolha o browser que você utiliza”
“Qual resolução você utiliza?”
( ) 640x480 ( ) 800x600
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
Melhoria progressiva
O projeto é feito de baixo para cima
Em seguida o desenvolvedor adiciona funcionalidades e melhorias para o comportamento da página
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
Timeline
20019,8 milhões
201158 milhões
2021?????
Mercado
Mercado
Como ser procurado?
Como ser escolhido?
Como manter destaque?
Tríade Client-side
HTML
CSS
Javascript
Front-endDesigner x Engineer
HTML e CSS, hoje, é obrigação de todo o time
Javascript cresce cada dia mais
Por que ficar de fora?
Hands on...
CSS3
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
CSS3
Não é CSS3,mas vale à pena!
CSS3
Chrome / Firefox / Safari IE6 / IE7 / IE8
http://www.css3files.com/
http://www.css3.info/
http://www.css3generator.com/
CSS3
Anunciado no início de 2009
Conclusão (implementação 100%) prevista para 2022
Esperar?
Navegadores antigos são como TV’s preto e branco....
Navegadores modernos são como TV’s Full HD....
A TV já resolveu esse problema... (Zeno Rocha)
E você esperando?
Tags semânticas
<header> <footer>
<article> <section> <content>
<nav> <hgroup>
<data>
entre outras...
Elementos multimídia
audio
video
Desenhos
canvas
svg
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
“JAVASCRIPT”;var comoFaz =
JAVASCRIPTTop Languages @ Github
JAVASCRIPTNão tem nada haver com Java
jQuery
AJAX
JSON
Futuro!
jQuery
Há muito tempo é a biblioteca Javascript de maior uso
Código-aberto
Cross-browser :)
Qualquer um pode contribuir
jQuery - quem usa?
Google, Amazon, IBM, Microsoft, Twitter, Dell, Best Buy, NBC, EA, Match, ESPN, CBS News, Bank of America
Eu...
Você!
jQuery - como contribuir?Código
https://github.com/jquery/jquery
http://bugs.jquery.com/
Tradução (EN -> PT-BR)
http://www.jquerybrasil.org
More things...NoSQL
Node.JS
Testes
Patterns
Git
Performance
Mobile
Escalabilidade
Modularização
Front-end do século XXI.I
Um ninja não aparece muito...
mas deixa um resultado considerável
(Leo Balter)
Can I help you?
@ luiztiago
www.luiztiago.com