O documento discute programação web, definindo web design, front-end e back-end. Explica que web design cria interfaces, front-end codifica essas interfaces em HTML, CSS e JavaScript, e back-end organiza e armazena dados. Também lista ferramentas e linguagens comuns a cada área.

1. Programação Web
Anderson Luís Furlan

2. Web-Design
Front-end
Back-end
Programação Web

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. 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. 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. Web-design
Ferramentas Gráficas:
Photoshop, Fireworks e Corel Draw

7. Front-end
HTML, CSS e JavaScript

8. Back-end
PHP, Java, Ruby, Pyhton, C, C++, etc.

9. Programação
Front-end

10. Linguagens

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. HyperText Markup Language

13. HyperText Markup Language

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. Cascade Style Sheets

16. Cascade Style Sheets

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. JavaScript

19. JavaScript

20. Tecnologias

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. 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. Frameworks Front-end

24. Frameworks Front-end

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. Bibliotecas JavaScript

27. Bibliotecas JavaScript

28. Bibliotecas JavaScript

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. ➔ 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. Vantagens do aprendizado Front-end

32. Campo de Trabalho
➢ Desenvolvimento de Sistemas
➢ Agências de Publicidade e Propaganda
➢ Sites e e-commerces
➢ Freelancer

33. ➢ HTML5
➢ Bootstrap
➢ Foundation
➢ jQuery
➢ AngularJS
Links
➢ Start Bootstrap
➢ Bootswatch
➢ Validadores W3C
➢ Am I Responsive?

34. Perguntas

35. Obrigado!
Anderson Luís Furlan
alsfurlan@gmail.com
http://github.com/alsfurlan
http://facebook.com/alsfurlan
http://facebook.com/mendigoprogramador