front-end engineer

37
<FRONT-END /> ENGINEER

Upload: ivan-banov

Post on 29-Jun-2015

354 views

Category:

Technology


0 download

DESCRIPTION

O que faz um engenheiro front-end?

TRANSCRIPT

Page 1: Front-end ENGINEER

<FRONT-END />ENGINEER

Page 2: Front-end ENGINEER

<ivanbanov />

Page 3: Front-end ENGINEER
Page 4: Front-end ENGINEER
Page 5: Front-end ENGINEER

APLICAÇÃO WEB

Page 6: Front-end ENGINEER

Yahoo!

Page 7: Front-end ENGINEER

Yahoo!

Page 8: Front-end ENGINEER

Nike

Page 9: Front-end ENGINEER

Nike

Page 10: Front-end ENGINEER

Apple

Page 11: Front-end ENGINEER

Apple

Page 12: Front-end ENGINEER
Page 13: Front-end ENGINEER

E onde entra o tal Front-End?

Page 14: Front-end ENGINEER
Page 15: Front-end ENGINEER

Layout(designer)

Page 16: Front-end ENGINEER

Layout(designer)

java, python, ruby, C# ...

(back-end)

Page 17: Front-end ENGINEER

Layout(designer)

html / css/ js(front-end)

java, python, ruby, C# ...(back-end)

Page 18: Front-end ENGINEER

Ahhh, é o cara querecorta layout...

Page 19: Front-end ENGINEER
Page 20: Front-end ENGINEER
Page 21: Front-end ENGINEER

ENGENHARIAFRONT-END

Page 22: Front-end ENGINEER

<html>- marcação semântica- arquitetura e corpo da aplicação

Page 23: Front-end ENGINEER

<html>- marcação semântica- arquitetura e corpo da aplicação

{css}- estilização- classes modulares

Page 24: Front-end ENGINEER

<html>- marcação semântica- arquitetura e corpo da aplicação

{css}- estilização- classes modulares

- comportamento- eventos, metodos e firulas

js()

Page 25: Front-end ENGINEER

Performance

Page 26: Front-end ENGINEER

"80-90% of the end-user response

time is spent on the frontend."

- Steve Souder

Page 27: Front-end ENGINEER
Page 28: Front-end ENGINEER

E...

Page 29: Front-end ENGINEER

- Usabilidade (humano ~ computador)

- Acessibilidade

- Webstandards (w3c)

- Cross-browser

- Modularização de arquivos

- Escalabilidade

- HTTP

Page 30: Front-end ENGINEER

SEOBonus Track

Page 31: Front-end ENGINEER

<div class="titulo"> Harlem Shake </div><div class="subtitulo"> crazy dance </div>

<div class="conteudo">Con los terroristas(ta-ta-ta-ta-ta-ta-ta-ta-ta-ta-ta-ta)And do the Harlem ShakeShake, Ey (shake)

</div>

Page 32: Front-end ENGINEER

<h1> Harlem Shake </h1><h2> crazy dance </h2>

<article>Con los terroristas(ta-ta-ta-ta-ta-ta-ta-ta-ta-ta-ta-ta)And do the Harlem ShakeShake, Ey (shake)

</article>

Page 33: Front-end ENGINEER

E mais para os robôs...

Page 34: Front-end ENGINEER

- meta tags - tiltes - alternative texts para imagens - url amigavel - sitemap.xml - flash #fail

E mais para os robôs...

Page 35: Front-end ENGINEER
Page 36: Front-end ENGINEER

Ajuda?

maujor.comtableless.com.brcss-trick.comfrontendbrasil.com.brlea.verou.meimasters.com.br/front-endgoogle.com :)

@maujor@diegoeis@chriscoyier@zenorocha@leaverou

Page 37: Front-end ENGINEER

Obrigado!