Programação Web
Anderson Luís Furlan
Web-Design
Front-end
Back-end
Programação Web
Definição
Web
Design
O Web Design é uma área do
design gráfico focada na
elaboração de interfaces para
sites e sistemas we...
Definição
Programação
Front-end
É uma área da
programação
responsável por codificar
a interface do Web
Design em páginas d...
Definição
Programação
Back-end
É a parte da
programação
responsável pela
organização, tratamento,
manutenção e
armazenamen...
Web-design
Ferramentas Gráficas:
Photoshop, Fireworks e Corel Draw
Front-end
HTML, CSS e JavaScript
Back-end
PHP, Java, Ruby, Pyhton, C, C++, etc.
Programação
Front-end
Linguagens
HyperText Markup Language
É uma linguagem de marcação, utilizada como padrão na Internet
responsável pela ESTRUTURA em uma...
HyperText Markup Language
HyperText Markup Language
Cascade Style Sheets
É uma linguagem de folhas de estilo em cascata, do inglês Cascade Style
Sheets, responsável por defin...
Cascade Style Sheets
Cascade Style Sheets
Anteriormente era considerada uma linguagem de script, hoje é considerada
uma linguagem de programação, sendo responsável ...
JavaScript
JavaScript
Tecnologias
Pré-processadores CSS
Less e Sass são pré-processadores CSS, ou seja, inserem funções e
variáveis na linguagem de estilo. ...
Frameworks Front-end
Framework é uma abstração que une códigos comuns entre vários projetos
de software provendo uma funci...
Frameworks Front-end
Frameworks Front-end
Bibliotecas JavaScript
Bibliotecas contém código e dados auxiliares, que provém serviços a
programas independentes, o que ...
Bibliotecas JavaScript
Bibliotecas JavaScript
Bibliotecas JavaScript
A importância do Front-end
➔ O usuário valoriza cada vez mais a aparência do
sistema, quanto mais agradável melhor.
➔ Usab...
➔ Aprende conceitos de web-design e usabilidade
➔ Aprende sobre o negócio
➔ É tendência cada vez mais entre empresas que
d...
Vantagens do aprendizado Front-end
Campo de Trabalho
➢ Desenvolvimento de Sistemas
➢ Agências de Publicidade e Propaganda
➢ Sites e e-commerces
➢ Freelancer
➢ HTML5
➢ Bootstrap
➢ Foundation
➢ jQuery
➢ AngularJS
Links
➢ Start Bootstrap
➢ Bootswatch
➢ Validadores W3C
➢ Am I Respon...
Perguntas
Obrigado!
Anderson Luís Furlan
alsfurlan@gmail.com
http://github.com/alsfurlan
http://facebook.com/alsfurlan
http://facebo...
Próximos SlideShares
Carregando em…5
×

Programação web e o front-end

398 visualizações

Publicada em

Palestra ministrada para o curso de Programador de Computador do Bairro da Juventude.

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

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
398
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
38
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Programação web e o front-end

  1. 1. Programação Web Anderson Luís Furlan
  2. 2. Web-Design Front-end Back-end Programação Web
  3. 3. Definição Web Design O Web Design é uma área do design gráfico focada na elaboração de interfaces para sites e sistemas web.
  4. 4. Definição Programação Front-end É uma área da programação responsável por codificar a interface do Web Design em páginas da web
  5. 5. Definição Programação Back-end É a parte da programação responsável pela organização, tratamento, manutenção e armazenamento de dados de um site ou sistema
  6. 6. Web-design Ferramentas Gráficas: Photoshop, Fireworks e Corel Draw
  7. 7. Front-end HTML, CSS e JavaScript
  8. 8. Back-end PHP, Java, Ruby, Pyhton, C, C++, etc.
  9. 9. Programação Front-end
  10. 10. Linguagens
  11. 11. HyperText Markup Language É uma linguagem de marcação, utilizada como padrão na Internet responsável pela 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.
  12. 12. HyperText Markup Language
  13. 13. HyperText Markup Language
  14. 14. Cascade Style Sheets É 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, os efeitos e todas as formas de apresentação de um 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.
  15. 15. Cascade Style Sheets
  16. 16. Cascade Style Sheets
  17. 17. 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 de elementos na página, animações, validação de formulários, em APIs do HTML5, como geolocalização e diversas outras funcionalidades no lado client (browser). JavaScript
  18. 18. JavaScript
  19. 19. JavaScript
  20. 20. Tecnologias
  21. 21. 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.
  22. 22. 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.
  23. 23. Frameworks Front-end
  24. 24. Frameworks Front-end
  25. 25. 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 desenvolvida para simplificar os scripts que interagem com o HTML. Simplifica a manipulação da página e de eventos. O AngularJS é do Google e uma das bibliotecas JS mais populares e inovadoras por ter “acabado” com a manipulação do DOM.
  26. 26. Bibliotecas JavaScript
  27. 27. Bibliotecas JavaScript
  28. 28. Bibliotecas JavaScript
  29. 29. 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
  30. 30. ➔ 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. ➔ Adquire conhecimento aprofundado de JavaScript Vantagens do aprendizado Front-end
  31. 31. Vantagens do aprendizado Front-end
  32. 32. Campo de Trabalho ➢ Desenvolvimento de Sistemas ➢ Agências de Publicidade e Propaganda ➢ Sites e e-commerces ➢ Freelancer
  33. 33. ➢ HTML5 ➢ Bootstrap ➢ Foundation ➢ jQuery ➢ AngularJS Links ➢ Start Bootstrap ➢ Bootswatch ➢ Validadores W3C ➢ Am I Responsive?
  34. 34. Perguntas
  35. 35. Obrigado! Anderson Luís Furlan alsfurlan@gmail.com http://github.com/alsfurlan http://facebook.com/alsfurlan http://facebook.com/mendigoprogramador

×