FACULDADE PARASO DO CEAR

Jonas Pinto Esteves

CRIANDO APLICAES WEB RESPONSIVAS COM INTERFACE HTML5

VOLTADAS PARA DISPOSITIVOS MOBILE

Juazeiro do Norte CE
2012

Jonas Pinto Esteves

CRIANDO APLICAES WEB RESPONSIVAS COM INTERFACE HTML5

VOLTADAS PARA DISPOSITIVOS MOBILE

Projeto de Pesquisa apresentado ao

Curso de Sistemas de Informao, da
Faculdade Paraso do Cear FAP, para
a obteno de nota na disciplina de
Estgio Supervisionado I.
Orientador: Prof. Csar Augusto Cusin

Juazeiro do Norte CE
2012
2

Sumrio
1. Introduo ............................................................................................................. 4
2. Um breve histrico do HTML ................................................................................ 4
3. Estrutura bsica do HTML .................................................................................... 5
4. Design Responsivo ............................................................................................... 8
5. Principais Ferramentas ......................................................................................... 8
6. Construindo uma aplicao .................................................................................. 9
6.1

O elemento META ........................................................................................ 12

6.2

O elemento LINK .......................................................................................... 12

6.3

O Elemento TITLE........................................................................................ 13

6.4

O Elemento BODY ....................................................................................... 13

6.5

O Elemento HEADER .................................................................................. 13

6.6

O Elemento ARTICLE .................................................................................. 14

6.7

O Elemento HGROUP.................................................................................. 14

6.8

Os Elementos IMG e VIDEO ........................................................................ 15

6.9

O Elemento NAV .......................................................................................... 17

6.10

O Elemento ASIDE ................................................................................... 17

6.11

O Elemento SECTION .............................................................................. 18

6.12

O Elemento FOOTER ............................................................................... 18

6.13

As demais pginas .................................................................................... 19

7. CSS .................................................................................................................... 21
7.1

Criando a folha de estilos ............................................................................. 23

8. A Aplicao em Android...................................................................................... 32
9. Concluso ........................................................................................................... 33
10.

Referncias ..................................................................................................... 34

1.

Introduo

Este projeto tem o objetivo de levar ao leitor o conhecimento bsico de como

criar aplicaes web responsivas em quaisquer dispositivos das mais variadas
resolues, em linguagem HTML5.
Para entender bem, necessrio que o leitor tenha conhecimento bsico em
linguagem HTML e programao.

2.

Um breve histrico do HTML

Segundo Flatschart (2012), HTML uma abreviao da expresso HyperText

Markup Language, que significa Linguagem de Marcao de Hipertexto. a
linguagem mais usada na web e permite a criao de documentos estruturados.
HTML5 tem o objetivo de levar informao e interatividade aos usurios.
Comeou a surgir por volta de 1980, quando Tim Berners-Lee fazia pesquisas na
CERN (Organizao Europeia para Pesquisa Nuclear).
Em 1990 foi criado o primeiro navegador para distribuir contedo de
Hipertexto na rede, alimentado pelo HTML.
Em 1994 foi fundado o W3C (World Wide Web Consortium), uma organizao
de desenvolvimento de padres abertos para a web. Entre os anos de 1990 e 1999
o HTML foi ganhando novas verses, at ser publicada sua verso 4.01, em
dezembro de 1999, utilizada at os dias de hoje. Em 2008 publicado o projeto de
trabalho HTML5, que vem se aprimorando at hoje e j adotado em muitos
desenvolvedores, mesmo ainda no tendo sido reconhecido oficialmente pela W3C.

3.

Estrutura bsica do HTML

O documento HTML organizado em tags (por exemplo: <html>) e

estruturado conforme a figura 1:

Figura 1: Estrutura bsica do HTML5

Onde:

Na linha 1, a utilizao de <!DOCTYPE html> est indicando a utilizao da

linguagem HTML na verso 5, possibilitando o emprego das novas tags,
como <section>, <nav>, <aside>, dentre outras.

Nas linhas 2 e 11, estamos iniciando e finalizando, respectivamente, o

documento. Todas as informaes da pgina devero estar inseridas neste
intervalo.

Na linha 3 observa-se a tag <head>. Dentro dela encontram-se informaes

no visveis ao usurio web, com exceo do contedo dentro da tag <title>,
que o ttulo da pgina, visvel na aba do navegador, conforme a figura 2. As
demais informaes sero utilizadas pelo navegador e pelos buscadores.

Figura 2: Ttulo da pgina

Na linha 4, o elemento meta representa os metadados do documento. O

parmetro charset=utf-8 indica a codificao de caracteres utilizada no
documento.

Na linha 7 pode-se observar o elemento <body>, que representa o corpo do

documento e contm todas as informaes da pgina.

A nova linguagem HTML5 foi criada no propsito de aumentar o nvel de

representao e semntica do cdigo. Novos elementos criados garantem um
melhor grau de entendimento e interpretao do site, tanto para os usurios e
desenvolvedores, como para os mecanismos de busca.
A figura 3 representa apenas um exemplo de como pode ser organizado um
site em HTML5. Pode-se observar nela o uso de diversos elementos divididos em
vrias sees.

Figura 3: Exemplo de como pode ser organizado um site em HTML5.

Fonte: Imasters

So eles:

Header: cabealho do site; normalmente composto pela logomarca da

empresa ou informaes fixas.

Article: na maioria das vezes usado como o artigo principal da pgina.

Section: um elemento genrico dentro do documento que pode conter

qualquer tipo de contedo, inclusive os elementos header, article e
footer.

Nav: contm os itens do menu de navegao.

Aside: elemento que contm informaes complementares ao artigo principal

da pgina.

Footer: rodap da pgina. Tambm pode estar relacionado a um contedo de

seo.

4.

Design Responsivo

Aps conhecer a estrutura bsica de um site em HTML, ser falado

rapidamente de Design Responsivo.
Design Responsivo a adaptao do site ao browser do usurio em
diferentes tipos de resoluo, utilizando uma tcnica de HTML e CSS, sem a
necessidade de criar uma folha de estilo para cada tamanho de resoluo. A figura 4
apresenta o mesmo site em 3 resolues diferentes.

Figura 4: Exemplo de site em design responsivo visualizado em 3 resolues diferentes

5.

Principais Ferramentas

Existem algumas ferramentas que auxiliam o desenvolvedor a criar sites. Uma

das mais utilizadas o Dreamweaver por possuir recursos exclusivos que facilitam
muito o trabalho do desenvolvedor. Outras ferramentas gratuitas como Netbeans 7.3
e o Notepad++ facilitam o entendimento do cdigo. Porm, uma pgina HTML pode

ser desenvolvida at mesmo no Bloco de Notas do Windows, desde que, em todos

os casos, o arquivo seja salvo com a extenso *.html

6.

Construindo uma aplicao

Tendo em mente os conceitos j citados, pode-se dar incio construo de

uma aplicao em HTML5. As figuras 5 e 6 a seguir sero utilizadas como o
exemplo principal da construo da aplicao web deste artigo. Na figura 5, as
imagens 1 e 2 e as imagens 3 e 4 representam o mesmo site, com uma visualizao
em design responsivo, porm, com resoluo diferente.

Figura 5: Modelo de aplicao em HTML5

Os cdigos das figuras 1 e 2 so iguais, conforme pode-se observar a seguir:

10

Figura 6: Cdigo fonte do exemplo principal deste artigo

11

Conforme visto na figura 6, o cdigo possui todos os elementos citados no

tpico 3 deste artigo. A seguir sero detalhados e explicados cada um deles.

6.1

O elemento META

O elemento meta pode aparecer diversas vezes dentro de head. Seus

principais atributos so http-equiv, name e content, que identificam uma srie
de metadados do documento web. Neste caso, observa-se:

Linha 4: o conjunto de caracteres utilizado.

Linha 5: a descrio do contedo.

Linha 6: o atributo viewport indica a maneira como o contedo do

site ser visualizado. Em outras palavras, o contedo deste site ser
visualizado de acordo com o tamanho do dispositivo, em sua escala
inicial padro, de 1.0.

O atributo viewport, neste caso, importante, pois a aplicao web em

questo ser visualizada em design responsivo, ou seja, qualquer dispositivo mobile
que possua um navegador web poder apresentar ao usurio uma interface ntida,
com a largura adaptada margem do seu visor, sem a necessidade da utilizao de
zoom.

6.2

O elemento LINK

O elemento link disposto na linha 7 da figura 6 interpretado pelo

navegador. Seu atributo rel, neste caso, indica que a pgina web possui uma folha
de estilos1, do tipo CSS, que est localizada na pasta estilos do documento. H
ainda a possibilidade de acrescentar o atributo media ao elemento link. Este
atributo indica qual dispositivo poder aplicar o estilo em questo. Por exemplo, este
1

Folha de Estilos um arquivo CSS (Cascading Style Sheet) que garante a formatao homognea e
uniforme de todas as pginas HTML. Este assunto ser visto mais adiante. Fonte: UFPA

12

documento web poderia ser aplicvel a dispositivos de baixa resoluo, utilizando o

atributo media=handheld, mas a no disponibilizao deste atributo no
elemento link indica, por padro, que o atributo media ter o parmetro all, ou
seja, aplicvel todos os dispositivos.

6.3

O Elemento TITLE

O elemento title, visto na linha 8, de uso obrigatrio no documento web.

Ele define o ttulo da pgina web e importante para que os mecanismos de busca
da internet possam indexar e disponibilizar corretamente o contedo do site.
Conforme dito anteriormente, o nico elemento com informaes disponveis para
visualizao do usurio (ver Figura 2).

6.4

O Elemento BODY

Na linha 10 aparece o elemento body. Como dito anteriormente, ele contm

todo o corpo do documento. dentro dele que viro todos os demais elementos que
montaro a pgina web e que sero visveis ao usurio.

6.5

O Elemento HEADER

O elemento header contm o contedo introdutrio da pgina. Normalmente,

dentro deste elemento, so colocados a logomarca, informaes fixas, elementos
hgroup ou elementos de navegao.

13

6.6

O Elemento ARTICLE

Segundo Flatschart (2012), o article o elemento que contm um

contedo independente e altamente relevante. Nele estar contido um artigo, bloco
de texto ou publicao, que pode ser o contedo principal da pgina. No est
presente no cdigo da figura 6, mas poder ser observado mais adiante.

6.7

O Elemento HGROUP

O elemento hgroup agrupa diversos ttulos. Estes ttulos podem ir de h1 a h6

e podem fazer parte de uma hierarquia, onde h1 tem maior valor sobre h2, e assim
sucessivamente, conforme a figura 7. Na figura 8 observa-se o resultado do cdigo
da figura 7. Pode ser visto que a fonte do ttulo principal maior que a do subttulo.

Figura 7: Exemplo de valor hierrquico

14

Figura 8: Visualizao do cdigo da figura 7

Os ttulos, normalmente so utilizados com letras. No caso do exemplo da

figura 6, pode-se observar na linha 13 que existe a chamada de uma imagem ao
documento web, onde h1 est atribuindo maior valor semntico a esta chamada.

6.8

Os Elementos IMG e VIDEO

Os elementos img e vdeo trazem ao documento a possibilidade de exibir,

respectivamente, uma imagem e um vdeo.
Na figura 5, pode-se observar a logo do NexTI. Na sua chamada tem o
seguinte cdigo:

<img

class="logo"

alt="NexTI

Desenvolvendo

Aprendendo"

src="imagens/nextibaixo_pequeno.png" />
O atributo class=logo utilizado como identificador no cdigo CSS. O
atributo alt contm uma descrio da imagem, caso ela, por um motivo qualquer,
no possa ser visualizada no documento, ser exibido o parmetro contido no alt.
O parmetro do atributo src indica o endereo da imagem na pasta raiz do site em
15

questo. Em outras palavras, a imagem se encontra dentro da pasta imagens e se

chama nextibaixo_pequeno.png.
Para o elemento vdeo utiliza-se o mesmo conceito. Se, ao invs de uma
imagem, fosse colocado um vdeo, seria utilizado o seguinte cdigo da figura 9:

Figura 9: Exemplo de insero de vdeo

Onde:

Na linha 8 observa-se o src, que o endereo do vdeo. Pode ser visto

tambm os atributos height e width, que so, respectivamente, a altura e a
largura da visualizao do vdeo na aplicao. O atributo controls indica
que os controles do vdeo, como play, pause ou volume devem aparecer
para que o usurio possa controlar a visualizao do vdeo. O atributo
preload indica que o vdeo deve ser pr-carregado no momento em que a
pgina for aberta.

Na linha 9 o elemento a um link interno que d ao usurio a possibilidade

de fazer o download do vdeo, caso seu navegador no seja compatvel com
exibies de vdeo.

Muitos navegadores de dispositivos mveis hoje em dia j so compatveis

com a visualizao de vdeo. No caso do Android, os navegadores que no so
compatveis, geralmente, ao invs de exibir o vdeo no navegador, executam o vdeo
atravs do seu prprio aplicativo do youtube, caso o mesmo esteja linkado para seus
servidores.

16

6.9

O Elemento NAV

Conforme dito anteriormente, o elemento header pode conter o menu de

navegao do site. Ainda na figura 6, pode-se observar na linha 15 o elemento nav
dentro do elemento header, contendo o menu de navegao do site. Este menu
possui 3 links dispostos em uma lista no ordenada <ul>: Projetos, Depoimentos e
Sobre. Cada link est em uma linha <li>, conforme observado na figura 10 a
seguir.

Figura 10: Links do menu

6.10 O Elemento ASIDE

O elemento aside, visto na linha 23 da figura 6, um bloco de contedos

que normalmente referente ao contedo geral da pgina. Tambm pode conter
informaes publicitrias, blocos de navegao secundria, assuntos relacionados,
etc.
Pode ser usado dentro do elemento article, porm, neste caso,
obrigatrio que seu contedo seja relacionado ao contedo do article.
17

Neste caso, o exemplo da figura 6 no possui elemento article. O elemento

aside contm links referentes ao contedo global da aplicao. So 4 links que
direcionam para as redes sociais do NexTI e para os validadores do cdigo HTML5
e CSS3 do W3C2, conforme pode ser visto na figura 10.

6.11 O Elemento SECTION

O elemento section, presente na linha 26 da figura 6, o que possui menor

valor semntico. Genericamente, ele usado para criar sees ou blocos dentro do
documento com contedos de caractersticas relevantes nicas. O section como
uma nova semntica para o elemento div, que ainda usado, mas tem valor
semntico ainda menor que section.
Neste caso, o elemento section est dividindo o elemento aside em duas
partes: uma contendo links para as redes sociais e outra contendo os links para os
validadores do W3C.
O atributo id presente em section o identificador do elemento. Ele ser
usado como referncia posteriormente no arquivo CSS.

6.12 O Elemento FOOTER

O Elemento footer, visto na linha 36 da figura 6, o rodap da pgina. Nele

podem estar contidas informaes referentes ao autor, direitos autorais, links
relacionados, mapa do site, fale conosco, entre outros. Tambm pode estar presente
dentro de sees, porm, neste caso, seu contedo deve estar diretamente
relacionado seo. A figura 11 mostra o footer da pgina:

World Wide Web Consortium (W3C) um consrcio internacional com cerca de 300 membros, que
agrega empresas, rgos governamentais e organizaes independentes, e que visa desenvolver
padres para a criao e a interpretao de contedos para a Web. Fonte: wikipedia

18

Figura 11: Rodap do exemplo

O exemplo acima contm um link para o twitter do autor. A chamada deste

link tambm pode ser visualizada na linha 37 do cdigo.

6.13 As demais pginas

As demais pginas da aplicao utilizada como exemplo deste artigo seguem

o mesmo cdigo padro. Utilizam todos os elementos citados no ttulo 5 deste artigo.
A figura 12 representa o link Sobre da pgina principal e a figura 13, o seu
respectivo cdigo. Nele est presente o uso do elemento article.

Figura 12: pgina "Sobre" do exemplo principal

19

A disposio dos elementos e das partes visveis ao usurio sero explicadas

mais adiante, no ttulo 6 deste artigo.

Figura 13: Trecho do cdigo da pgina "Sobre"

20

Tambm esto presentes no elemento aside dois selos da W3C. Estes selos
direcionam para um validador de cdigos HTML5 e CSS3, indicando que todo o
cdigo fonte do site est dentro dos padres W3C.

7.

CSS

CSS a abreviao do termo Cascading Style Sheet, que significa folha de

estilos em cascata. Segundo o W3C, Folha de estilo em cascata um mecanismo
simples para adicionar estilos (por exemplo: fontes, cores, espaamentos) aos
documentos web..
Embora seja permitida a utilizao do elemento <style> para a
personalizao de um site em HTML5 seguindo os padres de um documento CSS,
o HTML foi criado para ser uma linguagem de marcao de contedos, ou seja, no
funo da linguagem HTML fornecer informaes sobre a apresentao de
documentos. Alm disso, desta maneira, o programador teria que repetir todo o
cdigo de estilos para cada pgina do site, fazendo cada pgina ter muito mais
linhas de cdigo do que o necessrio. Se o programador desejasse mudar a cor de
fundo (background) das pginas do site, ele precisaria mudar o cdigo de todas as
pginas, uma por uma. Por exemplo, se o site tivesse 50 pginas diferentes, ele
precisaria fazer 50 alteraes para mudar o background de todo o site. A mudana
de estilos, fontes, cores ou eventos feita toda atravs das CSS, pois esta a sua
principal funo.
Na figura 6 deste artigo pode-se observar na linha 7 que o elemento link
indica que o documento web possui uma folha de estilos do tipo CSS. As figuras 14
e 15 mostram como ficariam algumas pginas do site, com e sem o uso de folhas de
estilo. Conforme pode ser observado, a no utilizao de CSS deixa o site
totalmente sem personalizao.

21

Figura 14: Pgina inicial do site com o uso de folha de estilo direita e sem o uso de folha de estilo
esquerda

Figura 15: Pgina "Projetos" do site com uso de folha de estilos direita e sem o uso de folha de estilos
esquerda

22

7.1

Criando a folha de estilos

O CSS pode ser criado a partir de um documento de texto. Abre-se um bloco

de notas no local desejado e salva-se com o formato *.css. Conforme dito
anteriormente, o documento web precisa saber que possui uma folha de estilos para
a formatao da sua aparncia visual. Para linkar corretamente o HTML ao seu
respectivo CSS, pode-se utilizar a maneira descrita na linha 7 da figura 6. Feito isso,
hora de modificar a folha de estilos.
Para organizar semanticamente um documento CSS necessrio seguir os
seguintes passos:
1. Definem-se regras para os elementos principais do HTML (body,
header, nav, etc).
2. Definem-se regras para os identificadores (exemplo: <section
id=redes>). Identificadores so elementos nicos dentro do cdigo
HTML.
3. Definem-se regras para as classes (exemplo: <img class=logo>).
Classes so como identificadores, porm, pode ser usada mais de uma
vez no cdigo.
4. Todos os estilos so ordenados conforme so dispostos no documento
HTML, levando em considerao as regras 1, 2 e 3 acima.
5. Os atributos de cada estilo so ordenados em ordem alfabtica.
6. Caso haja estilo global (iniciado com *), este dever ser o primeiro a
aparecer.

Para um conhecimento mais amplo dos atributos utilizados a seguir,

recomendvel o acompanhamento do Guia de Referncia do CSS 2.1, disponvel
em: http://www.w3c.br/divulgacao/guiasreferencia/css2/
Na figura 14 foi possvel observar como ficaria a pgina inicial do site sem
folha de estilos. O cdigo abaixo sugere uma definio para bordas, margem e
espaamento de todos os elementos do HTML com valor 0. Em seguida, so
definidos alguns atributos para o corpo (body) do documento. A figura 16 mostra
como o documento j pode ser visualizado.
23

* {
border: 0;
margin: 0;
padding: 0;
}
body {
background: #1a6194;
color: #fff;
font-family: verdana;
font-size: 14px;
text-shadow: 3px 5px 5px rgba(0,0,0,0.5);
}

Figura 16: Visualizao do documento aps as modificaes do CSS

A regra global ( * ) adiciona pgina valor 0 para bordas, margens e

espaamento, ou seja, todo o contedo do documento alinhado nas bordas do
browser.
A regra para o elemento body define no atributo background uma cor de
fundo em RGB3 para a pgina. A cor visualizada na figura 16 equivale ao cdigo
RGB #1a6194. O atributo color, como se encontra dentro da regra body, est
definindo uma cor global para a fonte da pgina. Observa-se que algumas letras no
3

O site do Maujor explica como definir cores em regras CSS. http://maujor.com/tutorial/cores.php

24

esto na cor global. Isso acontece porque, conforme pode ser observado na figura 6,
estas palavras so, na realidade, links para outras pginas.
Tambm possvel definir outras caractersticas para a fonte, como estilo,
tamanho e sombras. Conforme a regra para body, esto definidos a fonte verdana,
tamanho 13, com sombras, que d uma aparncia diferente ao texto.
Ao adicionar a regra header{ text-align: center;} ao CSS, todo o
contedo presente dentro do elemento header do HTML ser alinhado ao centro da
pgina, conforme a figura 17.

Figura 17: Uso da regra para o elemento HEADER

Pode-se definir uma srie de atributos regra para o elemento nav, de forma
que se personalize e faa as letras tomarem aparncia de botes.

nav a{
background: #f69401; /*cor de fundo dos links*/
border: 0.1em solid #57abb8;
border-radius: 4px;
display: block;
font-family: verdana;
font-size: 22px;
padding: 1px;
text-align: center;
}
25

A primeira linha do cdigo acima (nav a) indica que todos os atributos

presentes entre chaves { } sero referentes aos links <a> do elemento <nav>, ou
seja, Projetos, Depoimentos, e Sobre. Cada um dos 3 links ter suas prprias
caractersticas, no sendo uma caracterstica global do elemento nav. Por exemplo:
a cor do atributo background ser apenas para o fundo de cada um dos links,
individualmente, conforme figura 18.

Figura 18: Cores nos links do elemento NAV

Alm do background, esto sendo definidas as bordas e seus o

arredondamentos nos cantos e o display, que como os links ficaro dispostos para
visualizao do usurio, ou seja, em blocos. Tambm esto definidos para nav
caractersticas para as fontes, espaamento entre os links e alinhamento dos textos.
O cdigo a seguir indica caractersticas visuais que os links de nav devem
apresentar ao passar o cursor do mouse sobre eles. Pode-se observar o resultado
na figura 19.

nav a:hover {
background: #212121;
border: 0.1em dashed #f60;
border-radius: 0 8px 0 8px;
color: #f69401;
26

-ms-transition: all 0.3s ease-out; /*IE*/

-moz-transition: all 0.3s ease-out; /*firefox*/
-o-transition: all 0.3s ease-out; /*opera*/
-webkit-transition: all 0.3s ease-out; /*chrome*/
transition: all 0.3s ease-out; /*geral*/
}

Figura 19: Como o link se comporta ao passar o cursor

As ltimas 4 linhas do cdigo acima indicam, para cada navegador, um

intervalo de tempo de 0,3s para a mudana de efeitos.
So adicionadas as seguintes definies para o rodap da pgina:

footer {
background: #f69401;
border-radius: 4px;
font-size: 10px;
margin: 0 auto;
padding: 0.75em 0;
text-align: center;
width: 100%;
}
footer a:hover{
color: #1e6381;
}

27

A primeira regra estabelece um background para todo o rodap, bordas,

tamanho da fonte, sua margem e o alinhamento de texto. possvel notar que a
largura definida em width: 100% dada em porcentagem. Isto significa que a
largura ser exibida de acordo com o tamanho da janela do browser. Assim, no
haver barra de rolagem. A segunda regra (footer a:hover) estabelece a cor
que os links dentro do rodap devem ficar ao passar o cursor do mouse sobre eles.
Tambm possvel modificar as fontes de todos os links da pgina. As
prximas duas regras indicam uma cor pra o link e qual cor ele deve ficar ao passar
o cursor sobre ele.

a {
color: #FFF; /*#57abb8;*/
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #f60;
}
Por fim, definindo novas regras para o aside do HTML, pode-se observar
novas mudanas na aplicao, conforme a figura 20.

aside #redes {
background: #fff;
border-radius: 8px;
color: #1e6381;
display: block;
margin: 5px auto;
max-width: 40%;
padding: 4px;
text-align: center;
vertical-align: top;
}
aside #w3c {
padding-top: 20px;
text-align: center;
}
Aparentemente, no elemento aside do HTML foram modificados somente a
cor de background, bordas arredondadas e cor da fonte. Porm, cada linha do
28

cdigo acima refere-se a algum detalhe do aside. Por exemplo: a largura mxima
permitida para o aside de 40% (max-width: 40%). Assim como a largura do
elemento footer, esta porcentagem indica que a largura do aside referente ao
tamanho da tela do navegador, ou seja, a largura do elemento aside no pode
ultrapassar os 40% da largura total da janela do browser; no haver barra de
rolagem horizontal.

Figura 20: Modificao de atributos para o elemento ASIDE

A estrutura completa do CSS vista no item 7 deste artigo, juntamente com

alguns ajustes de detalhes, pode ser observada a seguir:

* {
border: 0;
margin: 0;
padding: 0;
}
body {
background: #1a6194;
color: #fff;
font-family: verdana;
29

font-size: 14px;
text-shadow: 3px 5px 5px rgba(0,0,0,0.5);
}
header{
text-align: center;
}
h1, nav {
background: #1a6194;
display: block;
max-width: 100%;
vertical-align: central;
}
nav {
background: #1a6194;
display: block;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
nav ul {
list-style: none;
}
nav li {
display: block; /*alinhar os itens do menu*/
padding: 2px; /*distancia entre o itens do menu*/
vertical-align: top;
}
nav a{
background: #f69401; /*cor de fundo dos links*/
border: 0.1em solid #57abb8;
border-radius: 4px;
display: block;
font-family: chiller, verdana;
font-size: 22px;
padding: 1px;
text-align: center;
-ms-transition: all 0.3s ease-in; /*para IE*/
-moz-transition: all 0.3s ease-in; /*firefox*/
-o-transition: all 0.3s ease-in; /*opera*/
-webkit-transition: all 0.3s ease-in; /*chrome*/
transition: all 0.3s ease-in; /*geral*/
}
nav a:hover {
background: #212121;
30

border: 0.1em dashed #f60;

border-radius: 0 8px 0 8px;
color: #f69401;
-ms-transition: all 0.3s ease-out; /*para IE*/
-moz-transition: all 0.3s ease-out; /*firefox*/
-o-transition: all 0.3s ease-out; /*opera*/
-webkit-transition: all 0.3s ease-out; /*chrome*/
transition: all 0.3s ease-out; /*geral*/
}
footer {
background: #f69401;
border-radius: 4px;
font-size: 10px;
margin: 0 auto;
padding: 0.75em 0;
text-align: center;
width: 100%;
}
footer a:hover{
color: #1e6381;
}
a { /*mudar a fonte dos links*/
color: #FFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #f60;
}
aside #redes {
background: #fff;
border-radius: 8px;
color: #1e6381;
display: block;
margin: 5px auto;
max-width: 40%;
padding: 4px;
text-align: center;
vertical-align: top;
}
aside #w3c {
padding-top: 20px;
text-align: center;
}
31

Conforme observado, o CSS tem o poder de mudar completamente o design

da aplicao. Ao aumentar e diminuir o tamanho da janela nota-se a responsividade
da pgina, que se adequa perfeitamente ao tamanho da janela do browser. A pgina
aqui criada pode ser visualizada em qualquer navegador Web, porm sua disposio
mais agradvel em dispositivos mveis, pois foi desenvolvida especialmente para
eles.

8.

A Aplicao em Android

Apesar de ser possvel visualizar em qualquer browser de dispositivos

mveis, a aplicao criada neste artigo tambm pode funcionar perfeitamente como
um App nativo. No caso do exemplo da figura 21 abaixo, foi criado no Android um
aplicativo contendo somente uma barra de ttulos e uma webview. Esta webview
nada mais, nada menos que um browser, que contm um endereo pr-inserido da
aplicao na web, acessando somente o prprio endereo do site, no sendo
possvel visitar outras pginas web.
Na figura 22 pode-se observar o funcionamento da aplicao e seu atalho
criado na lista de aplicativos.

Figura 21: Template da aplicao para Android

32

Figura 22: Funcionamento do App nativo

9.

Concluso

Aps o desenvolvimento deste artigo, pode-se concluir que atualmente

possvel desenvolver qualquer aplicao nativa com interface totalmente HTML5. A
principal vantagem desta prtica a facilidade que o desenvolvedor ter em criar
uma aplicao, no sendo necessrio conhecer a fundo a linguagem de
programao especfica para cada dispositivo. Alm disso, caso o dispositivo no
possua o app, ainda possvel visualizar a aplicao atravs do browser.

33

10.

Referncias

FLATSCHART, Fbio. HTML5: Embarque imediato. 2 Tiragem. Rio de Janeiro:

Brasport, 2011.
SAMY Silva, Maurcio. CSS3: Desenvolva aplicaes web profissionais com uso dos
poderosos recursos de estilizao das CSS3. 1 Edio. So Paulo: Novatec, 2012.
Biblioteca

on-line.

Disponvel

em:

<http://imasters.com.br/artigo/16598/web-

standards/html5-semantica-seo-e-organizacao> Acesso em: 15 out. 2012.

Biblioteca

on-line.

Disponvel

em:

<http://www.w3c.br/divulgacao/guiasreferencia/css2/> Acesso em: 01 nov. 2012.

34