O documento discute Web Design e Programação Front-end, definindo-os como a área do design gráfico focada na elaboração de interfaces para sites e a área responsável por codificar essas interfaces em páginas da web, respectivamente. Também apresenta as principais ferramentas, linguagens e tecnologias envolvidas, como HTML, CSS e JavaScript.

1. Web Design e
Programação
Front-end
Anderson Luís Furlan
Claiton de Melo Marcílio

2. Definição
Web
Design
• O Web Design é uma área do
design gráfico focada na
elaboração de interfaces para
sites e sistemas web.

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

4. Web-Design
Front-end
Back-end
Desenvolvimento Web

5. Web-design
Ferramentas Gráficas:
Photoshop, Fireworks e Corel Draw

6. Front-end
HTML, CSS e JavaScript

7. Back-end
PHP, Java, Ruby, Pyhton, etc.

8. Programação Front-end
Linguagens

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

10. HyperText Markup Language

11. HyperText Markup Language

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

13. Cascade Style Sheets

14. Cascade Style Sheets

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

16. JavaScript

17. JavaScript

18. Tecnologias

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

20. Frameworks Front-end

21. Frameworks Front-end

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

23. Bibliotecas JavaScript

24. Bibliotecas JavaScript

25. Bibliotecas JavaScript

26. A importância do Web Design
➢ O usuário valoriza cada vez mais a aparência
➢ Usabilidade é um fator chave para uma boa
experiência na web
➢ As empresas buscam consolidar suas marcas na
Internet, por meio de uma identidade visual
➢ Não adianta um sistema que funcione corretamente,
mas que seja de difícil compreensão

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

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

29. Perguntas

30. Obrigado!
Anderson Luís Furlan
alsfurlan@gmail.com
Claiton de Melo Marcílio
claitonmelomarcilio@gmail.com