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

luiztiago@luiztiago.com