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

1. Introdução ao
Front-end no
Desenvolvimento
Web
Anderson Luís Furlan

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

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

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. Front-end Web - Linguagens

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

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

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

12. Front-end Web - Tecnologias

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

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

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

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

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

18. Vantagens do aprendizado Front-end

19. Campo de Trabalho
➔ Desenvovlimento de Sistemas
➔ Agências de Publicidade e Propaganda
➔ Freelancer
➔ Sites e e-commerces

20. Obrigado!
alsfurlan@gmail.com
github.com/alsfurlan
facebook.com/alsfurlan
facebook.com/mendigoprogramador