SlideShare uma empresa Scribd logo
1 de 13
Um front-end entre nós
  Gabriel do Nascimento Barbier
             @bielnb
        codepen.io/bielnb
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...
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.
Framework back-end
         O Você não precisa
          programar, mas
          precisa entender
          como o framework
          (ou linguagem)
          funciona na
          camada do HTML.
Padrões de projeto
         O É importante saber
           como funciona a
           árvore de arquivos
           do projeto;
         O O mais comum é o
           MVC (Model-View-
           Controller).
SEO
 O Auxiliar o Analista
   de Marketing;
 O Escrever um código
   HTML semântico
   (usar as tags certas
   para as funções
   certas).
Acessibilidade
       O 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.
Versionamento
      O Saber como são as
       regras do controle
       de versão do
       projeto, qual
       ferramenta é usada
       e como usar.
Codepen
   O “Portifolio open-
     source” que usa o
     login e regras do
     Github;
   O Suporta Pré-
     processadores CSS,
     Frameworks
     Javascript.
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++).
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.
Material de estudo
O   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/
Obrigado!

Mais conteúdo relacionado

Mais procurados

Designing Systems: An Approach to Responsive Web Design (Portuguese)
Designing Systems: An Approach to Responsive Web Design (Portuguese)Designing Systems: An Approach to Responsive Web Design (Portuguese)
Designing Systems: An Approach to Responsive Web Design (Portuguese)Pedro Moreira da Silva
 
.NET Standard 2.0: reuso de código entre projetos legados e .NET Core - .NET ...
.NET Standard 2.0: reuso de código entre projetos legados e .NET Core - .NET ....NET Standard 2.0: reuso de código entre projetos legados e .NET Core - .NET ...
.NET Standard 2.0: reuso de código entre projetos legados e .NET Core - .NET ...Renato Groff
 
Hangout Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout  Tempo Real Eventos - Javascript - Os Primeiros PassosHangout  Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout Tempo Real Eventos - Javascript - Os Primeiros PassosJackson F. de A. Mafra
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignGustavo Zimmermann
 
JavaScript e suas tendências no mercado de TI
JavaScript e suas tendências no mercado de TIJavaScript e suas tendências no mercado de TI
JavaScript e suas tendências no mercado de TIFred Souza
 
JavaScript Firme: Módulos com RequireJS e BDD com Jasmine
JavaScript Firme: Módulos com RequireJS e BDD com JasmineJavaScript Firme: Módulos com RequireJS e BDD com Jasmine
JavaScript Firme: Módulos com RequireJS e BDD com JasmineAndré Willik Valenti
 
Visao geralti netshoes03
Visao geralti netshoes03Visao geralti netshoes03
Visao geralti netshoes03Ale Uehara
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio FrameworkHiarison Gigante
 
Visao geral TI03 2-0
Visao geral TI03 2-0Visao geral TI03 2-0
Visao geral TI03 2-0Ale Uehara
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDiego Eis
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndRael Max
 
.NET + Microsserviços: alternativas open source para descomplicar a vida | TD...
.NET + Microsserviços: alternativas open source para descomplicar a vida | TD....NET + Microsserviços: alternativas open source para descomplicar a vida | TD...
.NET + Microsserviços: alternativas open source para descomplicar a vida | TD...Renato Groffe
 

Mais procurados (20)

Designing Systems: An Approach to Responsive Web Design (Portuguese)
Designing Systems: An Approach to Responsive Web Design (Portuguese)Designing Systems: An Approach to Responsive Web Design (Portuguese)
Designing Systems: An Approach to Responsive Web Design (Portuguese)
 
Pug.js
Pug.jsPug.js
Pug.js
 
Profissão Front-end
Profissão Front-endProfissão Front-end
Profissão Front-end
 
Eu sou talentoso, porque...
Eu sou talentoso, porque...Eu sou talentoso, porque...
Eu sou talentoso, porque...
 
.NET Standard 2.0: reuso de código entre projetos legados e .NET Core - .NET ...
.NET Standard 2.0: reuso de código entre projetos legados e .NET Core - .NET ....NET Standard 2.0: reuso de código entre projetos legados e .NET Core - .NET ...
.NET Standard 2.0: reuso de código entre projetos legados e .NET Core - .NET ...
 
Hangout Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout  Tempo Real Eventos - Javascript - Os Primeiros PassosHangout  Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout Tempo Real Eventos - Javascript - Os Primeiros Passos
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
 
JavaScript e suas tendências no mercado de TI
JavaScript e suas tendências no mercado de TIJavaScript e suas tendências no mercado de TI
JavaScript e suas tendências no mercado de TI
 
JavaScript Firme: Módulos com RequireJS e BDD com Jasmine
JavaScript Firme: Módulos com RequireJS e BDD com JasmineJavaScript Firme: Módulos com RequireJS e BDD com Jasmine
JavaScript Firme: Módulos com RequireJS e BDD com Jasmine
 
Codebeer #2
Codebeer #2Codebeer #2
Codebeer #2
 
Visao geralti netshoes03
Visao geralti netshoes03Visao geralti netshoes03
Visao geralti netshoes03
 
Visao geralti netshoes03
Visao geralti netshoes03Visao geralti netshoes03
Visao geralti netshoes03
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio Framework
 
Visao geral TI03 2-0
Visao geral TI03 2-0Visao geral TI03 2-0
Visao geral TI03 2-0
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
 
Microformatos
MicroformatosMicroformatos
Microformatos
 
Dev Heroes
Dev HeroesDev Heroes
Dev Heroes
 
O Desenvolvedor Web
O Desenvolvedor WebO Desenvolvedor Web
O Desenvolvedor Web
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
.NET + Microsserviços: alternativas open source para descomplicar a vida | TD...
.NET + Microsserviços: alternativas open source para descomplicar a vida | TD....NET + Microsserviços: alternativas open source para descomplicar a vida | TD...
.NET + Microsserviços: alternativas open source para descomplicar a vida | TD...
 

Destaque

Destaque (9)

Leticia, rafael , milena, larissa.
Leticia, rafael , milena, larissa.Leticia, rafael , milena, larissa.
Leticia, rafael , milena, larissa.
 
Drogas 2011 Artur Neiva
Drogas 2011 Artur NeivaDrogas 2011 Artur Neiva
Drogas 2011 Artur Neiva
 
Apoio Fraterno
Apoio FraternoApoio Fraterno
Apoio Fraterno
 
Cocaina
CocainaCocaina
Cocaina
 
Dinamicas caps
Dinamicas capsDinamicas caps
Dinamicas caps
 
A Cocaína
A CocaínaA Cocaína
A Cocaína
 
Cocaína
CocaínaCocaína
Cocaína
 
Serviço social e alcoolismo
Serviço social e alcoolismoServiço social e alcoolismo
Serviço social e alcoolismo
 
O trabalho do assistente social no caps ad
O trabalho do assistente social no caps adO trabalho do assistente social no caps ad
O trabalho do assistente social no caps ad
 

Semelhante a Um front end entre nós

Time de Desenvolvimento: Trabalhando em equipe sem matar o coleguinha
Time de Desenvolvimento: Trabalhando em equipe sem matar o coleguinhaTime de Desenvolvimento: Trabalhando em equipe sem matar o coleguinha
Time de Desenvolvimento: Trabalhando em equipe sem matar o coleguinhaDeblyn Prado
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Valmir Justo
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Gustavo Zimmermann
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúClécio Bachini
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHPRangel Javier
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal Clécio Bachini
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Cristofer Sousa
 
Python mudando o modo de desenvolver para a internet
Python mudando o modo de desenvolver para a internetPython mudando o modo de desenvolver para a internet
Python mudando o modo de desenvolver para a internetMarcos Petry
 
Python mudando o modo de desenvolver para a web - Marcos Daniel Petry
Python mudando o modo de desenvolver para a web  - Marcos Daniel PetryPython mudando o modo de desenvolver para a web  - Marcos Daniel Petry
Python mudando o modo de desenvolver para a web - Marcos Daniel PetryTchelinux
 
Desenvolvimento de aplicações web em Dart
Desenvolvimento de aplicações web em DartDesenvolvimento de aplicações web em Dart
Desenvolvimento de aplicações web em DartRoger Ritter
 
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e ZendAnálise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e ZendThiago Sinésio
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloWorkshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloTchelinux
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designerRoney Sousa
 

Semelhante a Um front end entre nós (20)

Time de Desenvolvimento: Trabalhando em equipe sem matar o coleguinha
Time de Desenvolvimento: Trabalhando em equipe sem matar o coleguinhaTime de Desenvolvimento: Trabalhando em equipe sem matar o coleguinha
Time de Desenvolvimento: Trabalhando em equipe sem matar o coleguinha
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
 
Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHP
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 
Python mudando o modo de desenvolver para a internet
Python mudando o modo de desenvolver para a internetPython mudando o modo de desenvolver para a internet
Python mudando o modo de desenvolver para a internet
 
Python mudando o modo de desenvolver para a web - Marcos Daniel Petry
Python mudando o modo de desenvolver para a web  - Marcos Daniel PetryPython mudando o modo de desenvolver para a web  - Marcos Daniel Petry
Python mudando o modo de desenvolver para a web - Marcos Daniel Petry
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
Desenvolvimento de aplicações web em Dart
Desenvolvimento de aplicações web em DartDesenvolvimento de aplicações web em Dart
Desenvolvimento de aplicações web em Dart
 
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e ZendAnálise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
Análise sobre a utilização de frameworks em PHP: CakePHP, CodeIgniter e Zend
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloWorkshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
 
Web components
Web componentsWeb components
Web components
 
Web components
Web componentsWeb components
Web components
 
Introdução a: Frameworks front end web
Introdução a: Frameworks front end webIntrodução a: Frameworks front end web
Introdução a: Frameworks front end web
 
HTML5
HTML5HTML5
HTML5
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 

Um front end entre nós

  • 1. Um front-end entre nós Gabriel do Nascimento Barbier @bielnb codepen.io/bielnb
  • 2. 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...
  • 3. 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.
  • 4. Framework back-end O Você não precisa programar, mas precisa entender como o framework (ou linguagem) funciona na camada do HTML.
  • 5. Padrões de projeto O É importante saber como funciona a árvore de arquivos do projeto; O O mais comum é o MVC (Model-View- Controller).
  • 6. SEO O Auxiliar o Analista de Marketing; O Escrever um código HTML semântico (usar as tags certas para as funções certas).
  • 7. Acessibilidade O 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.
  • 8. Versionamento O Saber como são as regras do controle de versão do projeto, qual ferramenta é usada e como usar.
  • 9. Codepen O “Portifolio open- source” que usa o login e regras do Github; O Suporta Pré- processadores CSS, Frameworks Javascript.
  • 10. 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++).
  • 11. 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.
  • 12. Material de estudo O 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/