35
Programação Web Anderson Luís Furlan

Programação web e o front-end

Embed Size (px)

Citation preview

Page 1: Programação web e o front-end

Programação Web

Anderson Luís Furlan

Page 2: Programação web e o front-end

Web-Design

Front-end

Back-end

Programação Web

Page 3: Programação web e o front-end

Definição

Web Design

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

Page 4: Programação web e o front-end

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

Page 5: Programação web e o front-end

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

Page 6: Programação web e o front-end

Web-design

Ferramentas Gráficas: Photoshop, Fireworks e Corel

Draw

Page 7: Programação web e o front-end

Front-end

HTML, CSS e JavaScript

Page 8: Programação web e o front-end

Back-end

PHP, Java, Ruby, Pyhton, C, C++, etc.

Page 9: Programação web e o front-end

Programação Front-end

Page 10: Programação web e o front-end

Linguagens

Page 11: Programação web e o front-end

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.

Page 12: Programação web e o front-end

HyperText Markup Language

Page 13: Programação web e o front-end

HyperText Markup Language

Page 14: Programação web e o front-end

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.

Page 15: Programação web e o front-end

Cascade Style Sheets

Page 16: Programação web e o front-end

Cascade Style Sheets

Page 17: Programação web e o front-end

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

Page 18: Programação web e o front-end

JavaScript

Page 19: Programação web e o front-end

JavaScript

Page 20: Programação web e o front-end

Tecnologias

Page 21: Programação web e o front-end

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.

Page 22: Programação web e o front-end

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.

Page 23: Programação web e o front-end

Frameworks Front-end

Page 24: Programação web e o front-end

Frameworks Front-end

Page 25: Programação web e o 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.

Page 26: Programação web e o front-end

Bibliotecas JavaScript

Page 27: Programação web e o front-end

Bibliotecas JavaScript

Page 28: Programação web e o front-end

Bibliotecas JavaScript

Page 29: Programação web e o front-end

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

Page 30: Programação web e o 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.

➔ Adquire conhecimento aprofundado de JavaScript

Vantagens do aprendizado Front-end

Page 31: Programação web e o front-end

Vantagens do aprendizado Front-end

Page 32: Programação web e o front-end

Campo de Trabalho

➢ Desenvolvimento de Sistemas

➢ Agências de Publicidade e Propaganda

➢ Sites e e-commerces

➢ Freelancer

Page 33: Programação web e o front-end

➢ HTML5 ➢ Bootstrap ➢ Foundation

➢ jQuery

➢ AngularJS

Links

➢ Start Bootstrap

➢ Bootswatch

➢ Validadores W3C

➢ Am I Responsive?

Page 34: Programação web e o front-end

Perguntas

Page 35: Programação web e o front-end

Obrigado!

Anderson Luís [email protected]

http://github.com/alsfurlanhttp://facebook.com/alsfurlan

http://facebook.com/mendigoprogramador