HTML5 e CSS3 Essentials

2
Como Funciona a Web

3
 Objetivos da Aula

Aula 02

FrontEnd e o Mercado Hoje;

Introduo a Web;
HTML e CSS;
Estrutura de um website;
Sites estticos e dinmicos;
Arquitetura Web;
Navegadores;
Editores de Texto.

4
FrontEnd e o Mercado Hoje

5
 Front End e o Mercado Hoje

Muitas empresas costumam contratar desenvolvedores back-end,

esperando que eles faam todo o trabalho do front-end.

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

resultado disso a falta de ateno a detalhes do layout como:

Alinhamento
Efeitos com Fonte Grids Performance
dos
CSS/JS s
elementos

Se ainda no fosse o bastante, esses desenvolvedores acabam

gastando para fazer o que (geralmente) no fazem.

6
 Front End e o Mercado Hoje

Com o tempo, as empresas comearam 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 nveis:

Back-End /
Front-End / Server-Side
Interface
Client-Side
Design

7
 Front End e o Mercado Hoje

Existem vrios exemplos de profissionais no mundo que tornam os nossos

dias mais fceis com interfaces amigveis e interativas, so eles:

Google
Google Gmail
Gmail Facebook
Facebook Hotmail
Hotmail Globo.com
Globo.com

Entre vrios outros servios, portais ou at mesmo websites.

Hoje o mercado est desesperado por profissionais, mas no encontram

com as caractersticas e experincias necessrias para os projetos.

8
 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 experincia e/ou conhecimento necessrio;

s vezes, os desenvolvedores vo para

outras empresas (Google, Facebook, etc).

9
 Front End e o Mercado Hoje

Fatos interessantes

No Brasil, em algumas empresas de mdio e grande porte, o

salrio de um Front-End Jnior pode chegar entre R$
2.000,00 R$ 2.500,00 (dependendo de seu conhecimento).

Algumas Startup's esto com necessidades extremas para

encontrar um profissional Front-End com uma boa
experincia, pagando s vezes, muito acima da mdia.

10
Introduo a Web

11
 Introduo a Web

A World Wide Web, tambm conhecida como Web e WWW, um

sistema de documentos disponvel na Internet. Ele permite o acesso
informaes no formato de hipertexto (ou hipermdia), que so
interligados e executados na Internet. Mas para acessar essas
informaes, necessrio utilizar um programa de computador chamado
navegador (browser). Os navegadores mais famosos so:

Google Chrome Mozilla Firefox Internet Explorer

Safari Opera

12
 Introduo a Web

Era uma vez...

A ideia de World Wide Web surgiu

em 1980, na Sua. O precursor da
ideia foi o britnico Tim Berners-Lee.

1980 1990 1991

13
 Introduo a Web

Era uma vez...

Em 1990, um computador NeXTcube foi

usado por Tim Berners-Lee como primeiro
servidor web, e tambm para escrever o
primeiro navegador, o WorldWideWeb.

1980 1990 1991

14
 Introduo a Web

Era uma vez...

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

resumo sobre todas as suas ideias e projetos no grupo
de notcias de nome alt.hypertext.
Esta data marca a estria oficial da Web como um
servio publicado na Internet.

1980 1990 1991

15
 Introduo a Web

Desde ento, a Internet cresceu em

propores gigantescas. A quantidade de
informaes que est disponvel no universo
online muito mais do que poderiamos
assimilar durante uma vida inteira.

A chance de ser perder em meio tantas informaes muito grande,

por esta razo importante saber como essas informaes esto
dispostas. a que entra o hipertexto.

16
 Introduo a Web

O que um hipertexto?

Os hipertextos so textos exibidos em formato digital, os quais podem

conter informaes em formato de imagens, sons, vdeos, etc.

Lorem ipsum dolor sit amet,

consectetur adipiscing elit.
O acesso a essas informaes se d
por meio de links, estes servem como
Nullan Integer
fermentum malesuada uma ponte entre os mais diversos
sites da Internet e seus contedos.
Sed efficitur,
neque convalli

17
HTML e CSS

18
 HTML e CSS

Sempre que acessamos uma pgina web, a informao pode estar na

forma de texto, imagem, udio ou vdeo e so inseridos por uma
linguagem chamada HTML (HyperText Markup Language).

Objetivo
Objetivo

11 22
Originalmente proposta por Tim Foi criado a partir de um
Berners-Lee no final da dcada mecanismo simples, que pudesse
de 1990, uma linguagem de ser utilizado por qualquer pessoa
marcao para produzir pginas interessada em disseminar
web. documentos cientficos.

19
 HTML e CSS

At os dias de hoje, a linguagem HTML sofreu diversas alteraes, e a

cada verso novos recursos so adicionados e os problemas corrigidos.

Hoje a verso 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 limitaes.

Voc pode ver a documentao aqui:

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

20
 HTML e CSS

As descries da linguagem HTML so especificadas pela W3C (World

Wide Web Consortium) que alm do HTML, tambm responsvel por
linguagens como o XML, SVG e pelo DOM, por exemplo.

eXtensible Markup Language XML

Scalable Vector Graphics SVG

Document Object Model DOM

21
 HTML e CSS

Os navegadores no exibem o HTML com o estilo que determinado

por quem implementa. Isso gera problemas, pois os navegadores
passam a decidir a formatao que ser adotada.

Considerando que cada navegador

Navegador
adota uma formatao diferente em
uma mesma pgina web, a informao
Formatao diferente
no ser exibida da mesma forma em
todos os navegadores.

22
 HTML e CSS

Vale lembrar que as

formataes adotadas pelos
principais navegadores no so
bonitas, desta forma
podemos padronizar a maneira
que as pginas web sero
exibidas nos diferentes
navegadores, e obter um visual
agradvel de acordo com a
nossa propria formatao.

23
 HTML e CSS

Os estilos das pginas 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
documentao do CSS no seguinte endereo:
http://www.w3.org/Style/CSS/specs.

24
 HTML e CSS

O W3C faz diversas recomendaes sobre como implementar as

funcionalidades do CSS, mas nem sempre os navegadores respeitam
essas recomendaes.

Eventualmente os navegadores
adotam uma abordagem propria de
acordo com a funcionalidade, e so
essas diferenas que podem gerar
problemas para o desenvolvimento de
pginas.

25
Estrutura de um website

26
 Estrutura de um Website

O desenvolvimento Client-side baseado em 3 principais camadas:

Informao Formatao Comportamento

Em outras palavras:

27
 Estrutura de um Website

Informao
Sem dvidas a camada mais importante ficando sob
controle do HTML, que por sua vez, o responsvel por dar
significado ao contedo da pgina, sendo reconhecido por
robs, aplicaes, sistemas e outras coisas que possam
acessar e reutilizar essa informao.

CONTEDO DA PGINA
HTML
INFORMAO

28
 Estrutura de um Website

Informao
Mas, qual a diferena entre contedo e informao?

Informao tudo o que o Nos entendemos o significado

usurio consome e dos elementos porque
compartilha de maneira sabemos a diferena entre
rpida e dinmica, por meio um titulo e um pargrafo, por
de recursos portveis que conta de suas caractersticas
no seja acessvel somente visuais, como tamanho da
por um meio. fonte, escrita, etc...

29
 Estrutura de um Website

As mquinas (sistemas de busca, leitores de tela, browsers,

etc) no tem essa mesma viso, eles no conseguem
entender visualmente o que um ttulo, um pargrafo, uma
imagem, entre outras coisas. No entanto, o papel da
marcao do HTML dar sentido as coisas, pois se
todas as outras camadas falharem a mensagem ser
entregue independente do visual.

30
 Estrutura de um Website

Formatao
Esta camada responsvel por controlar o visual da informao
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

contedo deixando mais agradvel em qualquer
meio de acesso (TVs, Smartphones,
Computadores e at mesmo meios de
impresso).

31
 Estrutura de um Website

Formatao com CSS muito mais do que

pintar divs e trocar letras e cores, ele o
responsvel por desenvolver a informao
que ser exibida de forma adequada
independente do dispositivo.

32
 Estrutura de um Website

Comportamento

Esta camada quem cuida dos comportamentos da

nossa pgina. Hoje o JavaScript o principal responsvel
por esta camada, pois nele definimos os elementos que
sero arrastados, dimensionados, rotacionados, etc.

Ele pode controlar as caractersticas de um determinado

elemento atravs do CSS manipulando assim suas
propriedades.

33
 Estrutura de um Website

O CSS tambm um p nessa camada, j

que com CSS3 podemos controlar o
comportamento simples dos elementos
como animaes ou transies por exemplo.

34
Sites estticos e dinmicos

35
 Sites estticos e dinmicos

O que so sites estticos e dinmicos?

Sites estticos Sites dinmicos

Sites estticos so aqueles que no possuem banco de dados e

ferramentas de gerenciamento incorporadas a ele.
A sua manuteno muito difcil, ou seja, tudo o que adicionado
precisa ser feito a mo, o que dificulta muito a vida do cliente,
sempre dependendo de um programador.

36
 Sites estticos e dinmicos

O que so sites estticos e dinmicos?

Sites estticos Sites dinmicos

Sites dinmicos so facilmente gerenciados atravs de algum sistema

feito sob medida, ou algum CMS (Content Management System) onde
suas informaes esto armazenadas em um banco de dados.
Podem ser facilmente atualizados e corrigidos pelo proprio site,
utilizando linguagens de programao como PHP, Java, Python e
outras para que tudo seja facilmente alterado.

37
Arquitetura Web

38
 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 bsica 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, no possuem uma
base solida de como o back-end de
uma aplicao funciona.

Por esse motivo, se torna necessrio a abordagem de algumas boas

prticas para produtividade de toda equipe, partindo da organizao de
todos os arquivos.

40
 Arquitetura Web

Acompanhe, agora, um exemplo de organizao de projeto:

CSS /- css
/- pages
- (seus arquivos .css)
- main.css
IMAGEM /- img
/- sample
- (suas imagens na raiz da
pasta)
JAVASCRIPT /- js
/- components
/- modules
main.js

41
 Arquitetura Web

Agora veja as funcionalidades do CSS, JAVASCRIPT e IMAGENS:

CSS
CSS CSS

main.css: o arquivo principal que pode ou no

JAVASCRIPT
JAVASCRIPT importar arquivos correspondentes de cada pgina.

pages: Pasta que contm os arquivos .css para

IMAGENS
IMAGENS
cada pgina/componente do projeto.

42
 Arquitetura Web

Agora veja as funcionalidades do CSS, JAVASCRIPT e IMAGENS:

CSS
CSS JAVASCRIPT

components: Armazenar suas bibliotecas,

JAVASCRIPT
JAVASCRIPT frameworks, etc.

modules: Armazenar os arquivos especficos para

cada modulo necessrio na aplicao.
IMAGENS
IMAGENS
main.js: o arquivo JavaScript principal da
aplicao.

43
 Arquitetura Web

Agora veja as funcionalidades do CSS, JAVASCRIPT e IMAGENS:

CSS
CSS IMAGENS
sample: Pasta que contm um tipo especfico de
imagem, por exemplo, onde so armazenadas
JAVASCRIPT
JAVASCRIPT
imagens vindas do back-end da aplicao.

: Imagens, CSS e arquivos JS que ficam na raiz

IMAGENS
IMAGENS da pasta pai.

Obs: Voc pode organizar suas imagens em vrias

subpastas da maneira que achar melhor.

44
 Arquitetura Web

Modularizar a aplicao, ajuda a organizar arquivos e tambm

implementar uma determinada funcionalidade para uma pgina especfica.

Ainda, facilita debugar quaisquer

tipos de erros, tirando o fato de que
cada desenvolvedor trabalha em
paralelo com modulos diferentes da
aplicao, sem atrapalhar ningum.

45
Navegadores

46
 Navegadores

Como os navegadores funcionam?

Quando acessamos um site atravs da barra

de endereo, ele realiza uma requisio ao
Servidor onde as pginas esto armazenadas.

Ao receber a resposta do Servidor, o

navegador exibe a pgina atravs de uma
requisio de respostas trocadas e definidas
pelo protocolo HTTP.

47
 Navegadores

Agora, considere um site ou uma aplicao web implantado em um

Servidor e conectado a uma rede. A princpio, qualquer navegador que
executar a aplicao no dispositivo conectado a essa rede, poder realizar
requisies a esse Servidor.

48
 Navegadores

Os servidores so identificados atravs de endereos formados por

sequncias de nmeros chamados de endereos IP. A princpio, para
acessar uma pgina de um site ou de uma aplicao web, devemos
conhecer o endereo IP do Servidor que contm no site ou na aplicao
web.

Endereo IP do Servidor

187. 165. 102.3

49
 Navegadores

Atualmente, o endereo IP
do Servidor onde o site da
4Linux est implantado
54.225.197.247.

Podemos utiliz-lo para

acessar as pginas do site
sem nenhum problema.

50
 Navegadores

Ateno

O endereo IP 200.144.183.244 est vinculado a um

dos Servidores onde o site da USP est implantado.

51
Navegadores

Os domnios so controlados por

organizaes geralmente vinculadas ao
governo. Por exemplo, os dominios.br
so controlados e disponibilizados pelo
Registro de Dominios para a Internet
no Brasil (registro.br).

52
Editores de Texto

53
 Editores de Texto

Escolhendo um editor de texto

importantssimo saber utilizar diferentes tipos de editores de texto, no

entanto, altamente recomendvel ter um editor de texto que melhore
seu workflow, desta forma, ser possvel ter mais agilidade nas
execues.

No se importe em utilizar o Dreamweaver, desde que voc esteja

ciente do que est fazendo e no fique to dependente dele. Assim, ele
no servir de muleta, o que para o desenvolvedor muito ruim.

54
 Editores de Texto

Voc precisa entender o codigo, e no depender de nada que faa tudo

sozinho como o Dreamweaver, Eclipse, entre outros.

Se voc esta comeando a ter um editor que fica auto-completando tudo

o que voc faz, desabilite esta funo pelo menos por enquanto. Com
isto, voc precisar procurar a resposta e se esforar a lembrar do que
voc se esqueceu.

55
 Editores de Texto

Durante este curso vamos utilizar o Sublime Text 2, mas caso voc
tenha um editor melhor, pode utiliz-lo sem problema algum.

www.sublimetext.com

56
 Prximos Passos

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

seguintes atividades disponveis no Step 2:

Aula 3: Conhecendo o HTML

Fazer a leitura dos Slides;

Assistir a aula Sncrona;
Realizar o Laboratorio e Teste de Conhecimento;
Faa os exerccios propostos do Projeto Dexter.

Mos obra!

57