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 web.
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
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
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 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.
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 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.
Cascade Style Sheets
Cascade Style Sheets
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
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. 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.
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.
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 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.
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.
➔ 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
➔ 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
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 Responsive?
Perguntas
Obrigado!
Anderson Luís [email protected]
http://github.com/alsfurlanhttp://facebook.com/alsfurlan
http://facebook.com/mendigoprogramador
Top Related