Web Design e Programação

Front-end

Anderson Luís FurlanClaiton de Melo

Marcílio

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

Web-Design

Front-end

Back-end

Desenvolvimento Web

Web-design

Ferramentas Gráficas: Photoshop, Fireworks e Corel

Draw

Front-end

HTML, CSS e JavaScript

Back-end

PHP, Java, Ruby, Pyhton, 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

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

Campo de Trabalho

➢ Desenvolvimento de Sistemas

➢ Agências de Publicidade e Propaganda

➢ Sites e e-commerces

➢ Freelancer

➢ Bootstrap ➢ Foundation

➢ jQuery

➢ AngularJS

Links

➢ Start Bootstrap

➢ Bootswatch

➢ Validadores W3C

➢ Am I Responsive?

Perguntas

Obrigado!

Anderson Luís Furlanalsfurlan@gmail.com

Claiton de Melo Marcílio claitonmelomarcilio@gmail.com