Sites para

MediaType

Dispositivos

Mveis

Felizmente, com a ajuda dos Web Standards, o trabalho para criar um site ficou muito
mais fcil, rpida e o mais importante, divertida. Hoje, voc troca de layout a hora que
quiser, sem se preocupar em ter que refazer todo o cdigo e programao. Eles j esto
feitos, por que ter que recri-los? Ento, voc troca [...]
06/12/2007 por Diego Eis
11 Comentrios

Artigos,

Internet Mvel,

Na Prtica

Felizmente, com a ajuda dos Web Standards, o trabalho para criar um site ficou muito
mais fcil, rpida e o mais importante, divertida.
Hoje, voc troca de layout a hora que quiser, sem se preocupar em ter que refazer todo o
cdigo e programao. Eles j esto feitos, por que ter que recri-los? Ento, voc troca
apenas 1 arquivo CSS, e seu site muda completamente, sem dor de cabea, apenas
mudando a lente de formatao.
E com as qualidades do CSS, tambm se tornou fcil fazer vrias veses de um mesmo
site para diversas medias. O que eu quero dizer com isso? Muito simples Antes, se
voc quisesse prover para seu visitante uma verso do seu site para imprimir, voc faria
uma verso do seu layout mais enxuta, sem as informaes que se tornariam
desnecessrias uma vez impressas. Teria que refazer o HTML, tirar partes de cdigo e
etc Hoje, voc simplesmente cria um CSS para a media de impresso, e pelo CSS
oculta os objetos que voc quiser. Muito mais fcil, muito mais prtico.
Do mesmo jeito que voc faz uma verso do CSS para site ser impresso, voc far uma
folha de estilo para os HandHelds. Ou seja, o camarada que entrar usando um
dispositivo mvel, ter uma verso totalmente compatvel, e sem informaes que no
lhe interessante quando est usando esse dispositivo.
A mecanica mesma. Com CSS voc oculta as informaes no so interessantes para o
usurio de mobiles. Por exemplo, se o cidado acessar o site da UOL com um mobile,
no interessante para ele, ver boa parte de cabealho do UOL. Como por exemplo os
links de ASSINE UOL ou links para o BATE-PAPO. Essas informaes seriam
facilmente ocultadas.
Voc far ento, vrias verses de CSS para vrios tipos de Medias. Usar o mesmo
XHTML, sem tocar em nenhum cdigo de programao, manipulando totalmente o site

para se adequarem s Medias desejveis.

Suas tags para linkar os arquivos CSS ficaro desta maneira:
Screen: Para Desktops
<link rel=stylesheet type=text/css href=screen.css media=screen />
Print: Para Impresso
<link rel=stylesheet type=text/css href=print.css media=print />
HandHelds: Para HandHelds, PDAs, etc
<link rel=stylesheet type=text/css href=handheld.css
media=handheld />
Perceba que em todas as linhas, h um atributo MEDIA. com esse atributo que
diremos ao navegar onde ele deve aplicar o CSS. Se o camarada visita o site com um
dispositivo mvel, com um navegador que seja de acordo com os Padres (bvio), vai
usar automticamente para renderizar o site, o CSS de HandHelds, em vez de Screen.
Voc no ter trabalho para fazer um script que chaveia nem nada parecido, como fazem
alguns sites hoje em dia. Esse chaveamento ser feito automticamente, pelo navegador.
Trabalho? Quase zero. Voc teve apenas que criar um novo CSS, escondendo objetos,
diminuindo e modificando outros. Alguns mais ousados, faro uma verso que segue o
estilo do site visto por desktops, mas mais direcionado a usurios de Mobiles, deixando
mais confortveis.
Compare as duas imagens abaixo. Usei como modelo o site do Opera, eles fizeram um
belo trabalho. Primeiro, um screeshot do site visto de um monitor, com MediaType
Screen.

Agora, confira o mesmo site, s que visto com o CSS destinado a HandHelds. Perceba
as diferenas e veja que eles ocultaram boa parte das informaes, como por exemplo,
aquela chamada enorme sobre o download do Opera 8.5, que interessante apenas para
os usurios de Desktop, no para usurios de Mobiles.

Eles aproveitaram tambm para rebuscar o design para esses dispositivos. A experincia
do usurio, com certeza ser satisfatria. confortvel de navegar. Voc pode trabalhar
melhor outras partes do desenvolvimento, como por exemplo, estudos de usabilidade.
Voc tem toda liberdade que o CSS pode lhe dar.

Propriedades CSS mais usadas

Todas as propriedades do CSS estaro disposnveis para o uso na manipulao para
qualquer media. Claro, na media screen que voc usar mais largamente os mais
variados tipos de propriedades que o CSS concede. Na media screen, as propriedades
que voc mais usar ser a WIDTH, HEIGHT e DISPLAY.
Width e Height so propriedades que serve para definir largura e altura,
respectivamente. Elas tem duas variao, onde voc define qual largura/altura mxima
que dado objeto pode ter. So elas max-width e max-hight.
Ento, voc definir no CSS de handheld, qual a largura mxima, que por exemplo, o
body dever ter.
body {max-width: 240px;}

J a propriedade display, ser muito usada para ocultar os objetos. Muitas informaes
que aparecem em alguma parte do layout, muitas vezes no so teis para os usurios de
mobiles, portanto, ocultar essas informaes um favor que voc faz para os usurios.
H algo sobre o assunto no site do Opera, no custa nada dar uma olhada Visite e leia.

Testando
Voc no precisa ter um dispositivo mvel para conseguir saber como seu site se
comportar. Basta simplesmente usar o sistema de SSR do Opera, ele ativado
apertando a combinao de teclado SHIFT + F11.
Se voc j tem um CSS para media de HandHeld, ele ativar automticamente esse CSS
no SSR.
Meu conselho voc primeiro tudo testar o site sem CSS para HandHeld para ter uma
noo de como ele ser exibido sem formatao especfica. Depois, aplique um CSS
para HandHelds, e compare a diferena. Veja como voc tem mais controle sobre o
layout.
E ateno No so todos os browsers que tem um sistema to bom quanto o Opera. E,
hoje em dia, apenas o Opera e o MiniMo (uma verso do Mozilla para mobiles) tem
amplo suporte de CSS. O resto dos browsers tem pouca ou quase nenhum suporte. O IE
para HandHeld por exemplo, no tem tanto suporte quanto os outros dois, por exemplo,
ele no reconhece MediaTypes.
Vamos nos dar mais ateno a esse mercado. Ele est crescendo e a cada ano surgem
novas possibilidades. um ramo que cresce rpido, e no vai demorar muito voc ver
qualquer pessoa na rua visitando algum site para consultar um mapa ou procurar
qualquer tipo de informao. muito importante que os desenvolvedores atentem para
esse grande caminho.