Curso Web Designer - UTDAula 01

Objetivos da Aula

Aula 01

● Introdução a Web;● O que é um Web Design?● FrontEnd e o Mercado Hoje;● HTML e CSS;● Estrutura de um website;● Sites estáticos e dinâmicos;● Arquitetura Web;● Navegadores;● Editores de Texto.

11

Introdução a Web

Introdução a Web

A World Wide Web, também conhecida como Web e WWW, é um

sistema de documentos disponível na Internet. Ele permite o acesso à

informaçõesinterligados

informações,

no formato de hipertexto (ou hipermídia), que são

e executados na Internet. Mas para acessar essas

é necessário utilizar um programa de computador chamado

navegador (browser). Os navegadores mais famosos são:

12

Safari Opera

Internet ExplorerMozilla FirefoxGoogle Chrome

Introdução a Web

Era uma vez...

A ideia de World Wide Web surgiu

em 1980, na Suíça. O precursor daideia foi o britânico Tim Berners-Lee.

1980 1990 1991

13

Introdução a Web

Era uma vez...

Em 1990, um

usado por Tim

computador

Berners-Lee

NeXTcube foi

como primeiroservidor

primeiro

web, e também para escrever o

navegador, o WorldWideWeb.

1980 1990 1991

14

Introdução a Web

Era uma vez...

Em 6 de agosto de 1991, Tim Berners-Lee postou um

resumo sobre todas as suas ideias

de notícias de nome alt.hypertext.

e projetos no grupo

Esta data marca a

na

estréia oficial

Internet.

da Web como um

serviço publicado

1980 1990 1991

15

Introdução a Web

Desde então, a Internet cresceu

quantidade

em

deproporções gigantescas. A

informações que está disponível no universo

online é muito mais do que poderiamos

assimilar durante uma vida inteira.

A chance de ser perder em meio à tantas informações é muito grande,

por esta razão é importante saber como essas informações estão

dispostas. É aí que entra o hipertexto.

16

Introdução a Web

O que é um hipertexto?

Os hipertextos são textos exibidos em formato digital, os quais podem

conter informações em formato de imagens, sons, vídeos, etc.

17

O acesso a essas informações se dá

por meio de links, estes servem como

uma ponte entre os mais diversos

sites da Internet e seus conteúdos.Sed efficitur, neque convalli

Integer malesuada

Nullan fermentum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

18

O QUE É WEB DESIGN?

O web design é uma área de estudo caracterizada pelo desenvolvimento de interfaces com o usuário em web sites e aplicações web. Podemos considerar o web design como parte do design gráfico, que é muito mais abrangente, pois envolve o desenho de qualquer tipo de layout, banner ou mídia computadorizada.

O que é Web design

O que faz o Web Designer?O profissional que estuda web design é então chamado de web designer, que é responsável por projetar e desenhar web sites, blogs, sistemas e aplicativos web. Seu papel é criar a interface gráfica do site, onde ocorrerá toda interação do usuário, portanto é importante que o web designer tenha em mente atributos como: facilidade de uso do site e emoções que o design pode despertar no usuário, dessa forma seu design será mais eficiente.

5

FrontEnd e o Mercado Hoje

Front End e o Mercado Hoje

Esse é um dos maiores erros cometidos, pois em muitos casos, o

resultado disso é a falta de atenção a detalhes do layout como:

Alinhamentodos elementos

Efeitos comCSS/JS

Fonte Grids Performance

Se ainda não fosse o bastante, esses desenvolvedores acabam

gastando para fazer o que (geralmente) não fazem.

Muitas empresas costumam contratar desenvolvedores back-end,

esperando que eles façam todo o trabalho do front-end.

Front End e o Mercado Hoje

Com o tempo, as empresas começaram a entender a necessidade de ter

um profissional focado apenas em desenvolver interfaces, o que,

ultimamente, tem aquecido muito o mercado profissional mundial.

Normalmente um projeto é dividido em 3 níveis:

Back-End /Server-SideFront-End /

Client-SideInterface

Design

Google Gma Facebook Hotmail Globo.com

Front End e o Mercado Hoje

Existem vários exemplos de profissionais no mundo que tornam os nossos

dias mais fáceis com interfaces amigáveis e interativas, são eles:

Hoje o mercado está desesperado por profissionais, mas não encontram

com as características e experiências necessárias para os projetos.

8

Entre vários outros serviços, portais ou até mesmo websites.

Globo.comHotmailFacebookGmailil

Google

Front End e o Mercado Hoje

A Globo.com, por exemplo, está sempre contratando novos

desenvolvedores por 2 simples motivos:

Nem sempre encontram um profissional com

a experiência e/ou conhecimento necessário;

Às vezes, os desenvolvedores vão para

outras empresas (Google, Facebook, etc).

9

No

salá

Front End e o Mercado Hoje

Fatos interessantes

10

Brasil, em algumas empresas de médio e grande porte, o

rio de um Front-End Júnior pode chegar entre R$

2.000,00 à R$ 2.500,00 (dependendo de seu conhecimento).

Algumas Startup's estão com necessidades extremas para

encontrar um profissional Front-End com uma boa

experiência, pagando às vezes, muito acima da média.

18

HTML eCSS

HTML e CSS

Sempre que acessamos uma página web, a informação pode estar na

forma de texto, imagem, áudio ou vídeo e são inseridos por uma

linguagem chamada HTML (HyperText Markup Language).

Objetivo

11

22

19

Foi criado a partir de um

mecanismo simples, que pudesse

ser utilizado por qualquer pessoa

interessada em disseminar

documentos científicos.

Originalmente proposta por Tim

Berners-Lee no final da década

de 1990, é uma linguagem de

marcação para produzir páginas

web.

HTML e CSS

Até os dias de hoje, a linguagem HTML sofreu diversas alterações, e a

cada versão novos recursos são adicionados e os problemas corrigidos.

20

Hoje a versão mais atual da linguagem HTML é a

5 que foi finalizada em meados de Outubro de

2014. A maioria dos navegadores suportam o

HTML5 com pequenas limitações.

Você pode ver a documentação aqui:

http://www.w3.org/TR/html5.

HTML e CSS

As descrições da linguagem HTML são especificadas pela W3C (World

Wide Web Consortium) que além do HTML, também é responsável por

linguagens como o XML,

SVG e pelo DOM, por exemplo.

DOMDocument Object Model

SVGScalable Vector Graphics

XMLeXtensible Markup Language

C

ad

u

nã

to

HTML e CSS

Os navegadores não exibem o HTML com o estilo que é determinado

por quem implementa. Isso gera problemas, pois os navegadores

passam a decidir a formatação que será adotada.

onsiderando que cada navegadorNavegadorota uma formatação diferente em

ma mesma página web, a informaçãoFormatação diferente

o será exibida da mesma

dos os navegadores.

forma em

HTML e CSS

Vale lembrar que as

formatações adotadas pelos

principais navegadores não são

“bonitas”, desta forma

podemos padronizar a maneira

que as páginas web serão

exibidas nos diferentes

navegadores, e obter um visual

agradável de acordo com a

nossa propria formatação.

HTML e CSS

Os estilos das páginas devem ser definidas com a linguagem CSS

(Cascading Style Sheets).

IMPORTANTE

Assim como a linguagem HTML, a linguagem CSS

é definida pelo W3C, e você pode consultar a

documentação do CSS no seguinte endereço:

http://www.w3.org/Style/CSS/specs.

HTML e CSS

O W3C faz diversas recomendações sobre como implementar as

funcionalidades do CSS, mas nem sempre os navegadores respeitam

essas recomendações.

Eventualmente os navegadores

adotam uma

acordo com

abordagem propria de

sãoa funcionalidade, e

essas diferenças que podem gerar

problemas para o

páginas.

desenvolvimento de

26

Estrutura de um website

Estrutura de um Website

O desenvolvimento Client-side é baseado em 3 principais camadas:

Informação Formatação Comportamento

Em outras palavras:

Estrutura de um Website

28

Informação

Sem dúvidas é a camada mais importante ficando sob

controle do HTML, que por sua vez, é o responsável por dar

significado ao conteúdo da página, sendo reconhecido por

robôs, aplicações, sistemas e outras coisas que possam

acessar e reutilizar essa informação.

CONTEÚDO DA PÁGINAHTML

INFORMAÇÃO

Estrutura de um Website

29

InformaçãoInformação é tudo o que o usuário consome e compartilha de maneira rápida e dinâmica, por meio de recursos portáveis que não seja acessível somente por um meio.

Nos entendemos o significado dos elementos porque sabemos a diferença entre um titulo e um parágrafo, por conta de suas características visuais, como tamanho da fonte, escrita, etc...

Mas, qual é a diferença entre conteúdo e informação?

Estrutura de um Website

As máquinas (sistemas de busca, leitores de tela, browsers,

etc) não tem essa mesma visão, eles não conseguem

entender

imagem,

visualmente o que é um título, um parágrafo, uma

entre outras coisas. No entanto, o papel da

marcação do HTML é dar sentido as

a

coisas, pois se

todas as outras camadas falharem mensagem será

entregue independente do visual.

30

E a

con

me o

Com

mp

Estrutura de um Website

31

Formatação

Esta camada é responsável por controlar o visual da informação

exibida pelo HTML, ou seja, é a camada que deixa tudo bonito,

que faz vender e enche os olhos do cliente.

Ela é controlada pelo CSS, que formata todo o

conteúdo deixando mais agradável em qualquer

meio de acesso (TVs, Smartphones,

Computadores e até mesmo meios de

impressão).

Estrutura de um Website

Formatação com CSS é muito mais do que

pintar divs e trocar letras e cores, ele é o

responsável por desenvolver a informação

adequadaque será exibida de forma

independente do dispositivo.

32

Estrutura de um Website

33

Comportamento

Esta camada é quem cuida dos comportamentos da

nossa página. Hoje o JavaScript é o principal responsável

por esta camada, pois nele definimos os elementos que

serão arrastados, dimensionados, rotacionados, etc.

Ele pode controlar as características de um determinado

elemento através do CSS manipulando assim suas

propriedades.

Estrutura de um Website

O CSS também é um pé nessa camada, já

oque com CSS3 podemos controlar

comportamento simples dos elementos

como animações ou transições por exemplo.

34

35

Sites estáticos e dinâmicos

Sites estáticos e dinâmicos

O que são sites estáticos e dinâmicos?

Sites estáticos Sites dinâmicos

36

Sites estáticos são aqueles que não possuem banco de dados e

ferramentas de gerenciamento incorporadas a ele.

A sua manutenção é muito difícil, ou seja, tudo o que é adicionado

precisa ser feito a mão, o que dificulta muito a vida do cliente,

sempre dependendo de um programador.

Sites estáticos e dinâmicos

O que são sites estáticos e dinâmicos?

Sites estáticos Sites dinâmicos

37

Sites dinâmicos são facilmente gerenciados através de algum sistema

feito sob medida, ou algum CMS (Content Management System) onde

suas informações estão armazenadas em um banco de dados.

Podem ser facilmente atualizados e corrigidos pelo proprio

site, utilizando linguagens de programação como PHP, Java, Python

e outras para que tudo seja facilmente alterado.

38

Arquitetura Web

Arquitetura Web

Alguns profissionais se especializam no client-side (Front-end) e outros

no server-side (Back-end). Mas o nosso foco é:

O desenvolvimento do lado

cliente, por tanto vamos usar a

estrutura básica do Front-end.

39

Arquitetura Web

O desenvolvedor que organiza o

projeto, acaba dizendo muito sobre

ele. No entanto, muitos front-ends

recentes na área, não possuem umabase solida de como o back-end de uma

aplicação funciona.

Por esse motivo, se torna necessário a abordagem de algumas “boaspráticas” para produtividade de toda equipe, partindo da organização de todos os

arquivos.

40

Arquitetura Web

Acompanhe, agora, um exemplo de organização de projeto:

CSS

IMAGEM

JAVASCRIPT

41

/- css/- pages

- … (seus arquivos .css)- main.css

/- img/- sample- … (suas imagens na raiz da pasta)

/- js/- components/- modules main.js

CSS

JAVASCRIPT

IMAGENS

Arquitetura Web

Agora veja as funcionalidades do CSS, JAVASCRIPT e IMAGENS:

42

CSSCSS

main.css: É o arquivo principal que pode ou não

importar arquivos correspondentes de cada página.

pages: Pasta que contém os arquivos .css para

cada página/componente do projeto.

JAVASCRIPT

IMAGENS

CSS

JAVASCRIPT

IMAGENS

Arquitetura Web

Agora veja as funcionalidades do CSS, JAVASCRIPT e IMAGENS:

43

CSSJAVASCRIPT

components: Armazenar suas bibliotecas,

frameworks, etc.

modules: Armazenar os arquivos específicos para

cada modulo necessário na aplicação.

main.js: É o arquivo JavaScript principal da

aplicação.

JAVASCRIPT

IMAGENS

CSS

JAVASCRIPT

IMAGENS

Arquitetura Web

Agora veja as funcionalidades do CSS, JAVASCRIPT e IMAGENS:

44

CSS IMAGENS

sample: Pasta que contém um tipo especÍfico de

imagem, por exemplo, onde são armazenadas

imagens vindas do back-end da aplicação.

…: Imagens, CSS e arquivos JS que ficam na raiz

da pasta pai.

Obs: Você pode organizar suas imagens em várias

subpastas da maneira que achar melhor.

JAVASCRIPT

IMAGENS

Arquitetura Web

Modularizar

implementar

a aplicação, ajuda a organizar arquivos e também

uma determinada funcionalidade para uma página específica.

Ainda, facilita à debugar quaisquer

tipos de erros, tirando o fato de quecada desenvolvedor trabalha em

paralelo com modulos diferentes da

aplicação, sem atrapalhar ninguém.

45

53

Editores de Texto

Editores de Texto

Escolhendo um editor de texto

É importantíssimo saber utilizar diferentes tipos de editores de texto, no

entanto, é altamente recomendável ter um editor de texto que melhoreseu workflow, desta forma, será possível ter mais agilidade nas

execuções.

Não se importe em utilizar o Dreamweaver, desde que você esteja

ciente do que está fazendo e não fique tão dependente dele. Assim, ele

não servirá de “muleta”, o que para o desenvolvedor é muito ruim.

54

Editores de Texto

Você precisa entender o codigo, e não depender de nada que faça tudo

sozinho como o Dreamweaver, Eclipse, entre outros.

Se você esta começando a ter um editor que fica auto-completando tudo

o que você faz, desabilite esta função pelo menos por enquanto. Comisto, você precisará procurar a resposta e se esforçará a lembrar do que você se

esqueceu.

55

Próximos Passos

Para que você tenha um melhor aproveitamento do curso, participe das

seguintes atividades disponíveis no Step 2:

Aula 2: Conhecendo o HTML

Fazer a leitura dos Slides;

Assistir a aula Síncrona;Realizar o Laboratorio e Teste de Conhecimento; Faça

os exercícios propostos do Projeto Dexter.

➢➢

➢

➢

Mãos à obra!

57