FACULDADE PARASO DO CEAR

Jonas Pinto Esteves

CRIANDO APLICAES WEB RESPONSIVAS COM INTERFACE HTML5
VOLTADAS PARA DISPOSITIVOS MOBILE
























Juazeiro do Norte CE
2012
2

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
3

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


4

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.





5

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.

6


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


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.






8

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
9

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.


10


Figura 5: Modelo de aplicao em HTML5


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


Figura 6: Cdigo fonte do exemplo principal deste artigo
12

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 estilos
1
, 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
13

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.



14

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

15


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

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.



17

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

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 W3C
2
, 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:


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


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


20

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"

21

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


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






23

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

* {
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 RGB
3
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
25

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;
}
26

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


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

28

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
29

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

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

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;
}
32

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
33



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.









34

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.