SlideShare une entreprise Scribd logo
1  sur  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!

Contenu connexe

Tendances

Tendances (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...
 

En vedette (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
 

Similaire à Um front end entre nós

Slide Aula - Curso CakePHP
Slide Aula - Curso CakePHPSlide Aula - Curso CakePHP
Slide Aula - Curso CakePHP
Rangel 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
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 

Similaire à 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
 

Dernier

Dernier (8)

Luís Kitota AWS Discovery Day Ka Solution.pdf
Luís Kitota AWS Discovery Day Ka Solution.pdfLuís Kitota AWS Discovery Day Ka Solution.pdf
Luís Kitota AWS Discovery Day Ka Solution.pdf
 
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docxATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
 
Boas práticas de programação com Object Calisthenics
Boas práticas de programação com Object CalisthenicsBoas práticas de programação com Object Calisthenics
Boas práticas de programação com Object Calisthenics
 
Padrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemploPadrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemplo
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docxATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
 
Programação Orientada a Objetos - 4 Pilares.pdf
Programação Orientada a Objetos - 4 Pilares.pdfProgramação Orientada a Objetos - 4 Pilares.pdf
Programação Orientada a Objetos - 4 Pilares.pdf
 
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docxATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
 

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/