Introdução ao 
Front-end no 
Desenvolvimento 
Web 
Anderson Luís Furlan
Definição 
Front-end 
• O front-end é a interface, 
responsável por coletar a 
entrada em várias formas do 
usuário e proc...
Desenvolvimento Web 
Web-Design 
Back-end 
Front-end
Web-design 
Ferramentas Gráficas: 
Photoshop, Fireworks e Corel Draw
Front-end 
HTML, CSS e JavaScript
Back-end 
PHP, Java, Ruby, Pyhton, etc.
Front-end Web - Linguagens
Front-end Web - HTML 
É uma linguagem de marcação, utilizada como padrão na Internet 
responsável por definir a ESTRUTURA ...
Front-end Web - CSS 
É uma linguagem de folhas de estilo em cascata, do inglês Cascade Style 
Sheets, responsável por defi...
Front-end Web - JavaScript 
Anteriormente era considerada uma linguagem de script, hoje é considerada 
uma linguagem de pr...
Front-end Web - Tecnologias
Pré-processadores CSS 
Less e Sass são pré-processadores CSS, ou seja, inserem funções e 
variáveis na linguagem de estilo...
Bibliotecas JavaScript 
Bibliotecas contém código e dados auxiliares, que provém serviços a 
programas independentes, o qu...
Frameworks Front-end 
Framework é uma abstração que une códigos comuns entre vários projetos 
de software provendo uma fun...
A importância do Front-end 
➔ O usuário valoriza cada vez mais a aparência do 
sistema, quanto mais agradável melhor. 
➔ U...
Vantagens do aprendizado Front-end 
➔ Aprende conceitos de web-design e usabilidade 
➔ Aprende sobre o negócio 
➔ É tendên...
Vantagens do aprendizado Front-end
Campo de Trabalho 
➔ Desenvovlimento de Sistemas 
➔ Agências de Publicidade e Propaganda 
➔ Freelancer 
➔ Sites e e-commer...
Obrigado! 
alsfurlan@gmail.com 
github.com/alsfurlan 
facebook.com/alsfurlan 
facebook.com/mendigoprogramador
Introdução ao Front-end no Desenvolvimento Web
Próximos SlideShares
Carregando em…5
×

Introdução ao Front-end no Desenvolvimento Web

532 visualizações

Publicada em

Palestra ministrada para o curso de Sistemas da Informação da ESUCRI, ministrada dia 01 de outubro de 2014.

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
532
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução ao Front-end no Desenvolvimento Web

  1. 1. Introdução ao Front-end no Desenvolvimento Web Anderson Luís Furlan
  2. 2. Definição Front-end • O front-end é a interface, responsável por coletar a entrada em várias formas do usuário e processá-la para adequá-la a uma especificação em que o back-end possa utilizar.
  3. 3. Desenvolvimento Web Web-Design Back-end Front-end
  4. 4. Web-design Ferramentas Gráficas: Photoshop, Fireworks e Corel Draw
  5. 5. Front-end HTML, CSS e JavaScript
  6. 6. Back-end PHP, Java, Ruby, Pyhton, etc.
  7. 7. Front-end Web - Linguagens
  8. 8. Front-end Web - HTML É uma linguagem de marcação, utilizada como padrão na Internet responsável por definir a ESTRUTURA em uma página. Por meio dela se define, por exemplo, títulos, subtítulos, listas ordenadas, não ordenadas, blocos de códigos, links, etc. O HTML5 é a última versão da linguagem onde foram incluídos uma série de recursos de multimídia (áudio e vídeo), deixando-a também mais semântica.
  9. 9. Front-end Web - CSS É uma linguagem de folhas de estilo em cascata, do inglês Cascade Style Sheets, responsável por definir o ESTILO de uma página da Web. É o que define o layout de apresentação, as cores e todas as formas de apresentação de uma página, site ou sistema web. A versão 3 da linguagem CSS permite animações através de regras, sem a necessidade de programar em JavaScript ou plugins para tal.
  10. 10. Front-end Web - JavaScript Anteriormente era considerada uma linguagem de script, hoje é considerada uma linguagem de programação, sendo responsável pela AÇÃO em uma página da Web. JavaScript ou ECMAScript, realiza manipulações do DOM, animações, validação de formulários, em APIs do HTML5 e diversas outras funcionalidades no lado client (browser). Atualmente vem ganhando espaço no lado server.
  11. 11. Front-end Web - Tecnologias
  12. 12. Pré-processadores CSS Less e Sass são pré-processadores CSS, ou seja, inserem funções e variáveis na linguagem de estilo. Na verdade você “programa estilo” e, posteriormente, através de uma compilação ou interpretação, eles traduzem para CSS. O SASS é feito em Ruby e o Less, em JavaScript e tanto pode ser interpretado no navegador via JavaScript, como compilado via NodeJS ou Rhino, que são aplicações lado server em JavaScript.
  13. 13. Bibliotecas JavaScript Bibliotecas contém código e dados auxiliares, que provém serviços a programas independentes, o que permite o compartilhamento e a alteração de código e dados de forma modular. jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client-side que interagem com o HTML. Torna mais simples a manipulação do DOM, de eventos e uso do AJAX. O AngularJS é do Google e uma das bibliotecas JS mais populares e inovadoras por ter “acabado” com a manipulação do DOM.
  14. 14. Frameworks Front-end Framework é uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. Os Frameworks Front-end provém funcionalidades como sistema de layout de grid, responsividade na web, cross-browsers, plug-ins entre outros recursos. No caso do Bootstrap e Foundation, os mais populares frameworks front-end, compreendem uma “compilação” de componentes CSS e JavaScript.
  15. 15. A importância do Front-end ➔ O usuário valoriza cada vez mais a aparência do sistema, quanto mais agradável melhor. ➔ Usabilidade é um fator chave para a popularização de um sistema, quanto mais fácil melhor. ➔ Não adianta nada um sistema bem arquiteturado no back-end com a interface mal projetada ➔ Interatividade é a chave
  16. 16. Vantagens do aprendizado Front-end ➔ Aprende conceitos de web-design e usabilidade ➔ Aprende sobre o negócio ➔ É tendência cada vez mais entre empresas que desenvolvem para web, dividirem os desenvolvedores entre front-end e back-end. ➔ Adquiri conhecimento aprofundado de JavaScript
  17. 17. Vantagens do aprendizado Front-end
  18. 18. Campo de Trabalho ➔ Desenvovlimento de Sistemas ➔ Agências de Publicidade e Propaganda ➔ Freelancer ➔ Sites e e-commerces
  19. 19. Obrigado! alsfurlan@gmail.com github.com/alsfurlan facebook.com/alsfurlan facebook.com/mendigoprogramador

×