um front end entre nós
DESCRIPTION
Minha primeira palestra sobre Front-end, apresentada na Universidade Estácio de Sá. Nela, eu tentei expôr o papel de um desenvolvedor Front-end na equipe de desenvolvimento, mas como só tive 10 minutos, o conteúdo é bem compacto.TRANSCRIPT
![Page 1: Um front end entre nós](https://reader035.vdocument.in/reader035/viewer/2022062419/5590b1ba1a28abdf058b46d4/html5/thumbnails/1.jpg)
Um front-end entre nós
Gabriel do Nascimento Barbier@bielnb
codepen.io/bielnb
![Page 2: Um front end entre nós](https://reader035.vdocument.in/reader035/viewer/2022062419/5590b1ba1a28abdf058b46d4/html5/thumbnails/2.jpg)
What the fuck?!O Antigamente era o
“Garoto do HTML”,hoje, uma peça importante no projeto;
O HTML, CSS, Javascript (com ou sem frameworks), Framework Back-end, Padrões de projeto, SEO, Acessibilidade, Versionamento...
![Page 3: Um front end entre nós](https://reader035.vdocument.in/reader035/viewer/2022062419/5590b1ba1a28abdf058b46d4/html5/thumbnails/3.jpg)
HTML, CSS e Javascript
O Estrutura básica;O HTML = Marcação,
CSS = Estilização, Javascript = Efeitos (em condições normais de temperatura e pressão);
O Frameworks: Twitter Bootstrap, Grid 960, jQuery, Prototype.
![Page 4: Um front end entre nós](https://reader035.vdocument.in/reader035/viewer/2022062419/5590b1ba1a28abdf058b46d4/html5/thumbnails/4.jpg)
Framework back-endO Você não precisa
programar, mas precisa entender como o framework (ou linguagem) funciona na camada do HTML.
![Page 5: Um front end entre nós](https://reader035.vdocument.in/reader035/viewer/2022062419/5590b1ba1a28abdf058b46d4/html5/thumbnails/5.jpg)
Padrões de projetoO É importante
saber como funciona a árvore de arquivos do projeto;
O O mais comum é o MVC (Model-View-Controller).
![Page 6: Um front end entre nós](https://reader035.vdocument.in/reader035/viewer/2022062419/5590b1ba1a28abdf058b46d4/html5/thumbnails/6.jpg)
SEOO Auxiliar o
Analista de Marketing;
O Escrever um código HTML semântico (usar as tags certas para as funções certas).
![Page 7: Um front end entre nós](https://reader035.vdocument.in/reader035/viewer/2022062419/5590b1ba1a28abdf058b46d4/html5/thumbnails/7.jpg)
AcessibilidadeO Fazer o site ser
acessível para todos. Aqueles com deficiência menor ou maior;
O Código semântico faz isso;
O Responsive design.
![Page 8: Um front end entre nós](https://reader035.vdocument.in/reader035/viewer/2022062419/5590b1ba1a28abdf058b46d4/html5/thumbnails/8.jpg)
VersionamentoO Saber como são
as regras do controle de versão do projeto, qual ferramenta é usada e como usar.
![Page 9: Um front end entre nós](https://reader035.vdocument.in/reader035/viewer/2022062419/5590b1ba1a28abdf058b46d4/html5/thumbnails/9.jpg)
CodepenO “Portifolio open-
source” que usa o login e regras do Github;
O Suporta Pré-processadores CSS, Frameworks Javascript.
![Page 10: Um front end entre nós](https://reader035.vdocument.in/reader035/viewer/2022062419/5590b1ba1a28abdf058b46d4/html5/thumbnails/10.jpg)
Ferramentas de trabalho
O Gecko, Webkit e Internet Explorer;
O Firebug e depurador do IE9;
O IDEs gratuitas ou o mais perto disso (Sublime Text 2, Notepad++).
![Page 11: Um front end entre nós](https://reader035.vdocument.in/reader035/viewer/2022062419/5590b1ba1a28abdf058b46d4/html5/thumbnails/11.jpg)
Profissionais de destaque
O Bernard de Luna - @bernarddeluna;O Diego Eis - @diegoeis;O Leonardo Balter - @leobalter;O Maurício Sammy - @maujor;O Zeno Rocha - @zenorocha.
![Page 12: Um front end entre nós](https://reader035.vdocument.in/reader035/viewer/2022062419/5590b1ba1a28abdf058b46d4/html5/thumbnails/12.jpg)
Material de estudoO MDN - https://developer.mozilla.org/pt-PT/O MSDN - http://
msdn.microsoft.com/en-us/library/ie/ms531209%28v=vs.85%29.aspx
O Codecademy - http://www.codecademy.com/O Site do grupo tableless - http://tableless.com.br/O Site do Maujor - http://www.maujor.com/O Blog do Bernard de Luna -
http://bernarddeluna.com/category/blog-2/O Nettuts - http://net.tutsplus.com/
![Page 13: Um front end entre nós](https://reader035.vdocument.in/reader035/viewer/2022062419/5590b1ba1a28abdf058b46d4/html5/thumbnails/13.jpg)
Obrigado!