Tableless - Padrões Web com Pastel e Caldo de Cana

Posts da TAG ‘mobilidade’

Quem precisa de versão mobile?

Parece ser um erro comum dos novatos criar versões diferentes do mesmo site.

O ano era 1997. Eu e e todo mundo que eu conhecia usávamos Netscape Navigator. Foi o ano em que, pela primeira vez, fiz um site sozinho. Tudo, atendi o cliente, preparei textos, fotos, fiz o layout, se é que se pode chamar aquilo de layout, criei uma conta no Geocities e publiquei. Em seguida entrei no Yahoo! e cadastrei o site, para que aparecesse nas buscas.

Depois de alguns dias recebi um e-mail do Yahoo! dizendo que o site não poderia ser publicado no diretório porque não funcionava no Internet Explorer. Continuar lendo »

27 Comentários

Sites para Dispositivos Móveis - MediaType

Felizmente, com a ajuda dos Web Standards, o trabalho para criar um site ficou muito mais fácil, rápida e o mais importante, divertida.
Hoje, você troca de layout a hora que quiser, sem se preocupar em ter que refazer todo o código e programação. Eles já estão feitos, por que ter que recriá-los? Então, você troca apenas 1 arquivo CSS, e seu site muda completamente, sem dor de cabeça, apenas mudando a lente de formatação.

E com as qualidades do CSS, também se tornou fácil fazer várias vesões 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 versão do seu site para imprimir, você faria uma versão do seu layout mais enxuta, sem as informações que se tornariam desnecessárias uma vez impressas. Teria que refazer o HTML, tirar partes de código e etc… Hoje, você simplesmente cria um CSS para a media de impressão, e pelo CSS oculta os objetos que você quiser. Muito mais fácil, muito mais prático.

Do mesmo jeito que você faz uma versão do CSS para site ser impresso, você fará uma folha de estilo para os HandHelds. Ou seja, o camarada que entrar usando um dispositivo móvel, terá uma versão totalmente compatível, e sem informações que não lhe é interessante quando está usando esse dispositivo.
A mecanica é mesma. Com CSS você oculta as informações não são interessantes para o usuário de mobiles. Por exemplo, se o cidadão acessar o site da UOL com um mobile, não é interessante para ele, ver boa parte de cabeçalho do UOL. Como por exemplo os links de ASSINE UOL ou links para o BATE-PAPO. Essas informações seriam facilmente ocultadas.

Você fará então, várias versões de CSS para vários tipos de Medias. Usará o mesmo XHTML, sem tocar em nenhum código de programação, manipulando totalmente o site para se adequarem às Medias desejáveis.
Suas tags para linkar os arquivos CSS ficarão desta maneira:

Screen: Para Desktops: <link rel=”stylesheet” type=”text/css” href=”screen.css” media=”screen” />
Print: Para Impressão: <link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />
HandHelds: Para HandHelds, PDA´s, 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 móvel, com um navegador que seja de acordo com os Padrões (óbvio), vai usar automáticamente para renderizar o site, o CSS de HandHelds, em vez de Screen. Você não terá trabalho para fazer um script que chaveia nem nada parecido, como fazem alguns sites hoje em dia. Esse chaveamento será feito automáticamente, pelo navegador.

Trabalho? Quase zero. Você teve apenas que criar um novo CSS, escondendo objetos, diminuindo e modificando outros. Alguns mais ousados, farão uma versão que segue o estilo do site visto por desktops, mas mais direcionado a usuários de Mobiles, deixando mais confortáveis.

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 diferenças e veja que eles ocultaram boa parte das informações, como por exemplo, aquela chamada enorme sobre o download do Opera 8.5, que é interessante apenas para os usuários de Desktop, não para usuários de Mobiles.

Eles aproveitaram também para rebuscar o design para esses dispositivos. A experiência do usuário, com certeza será satisfatória. É confortável 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 estarão disposníveis para o uso na manipulação 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 são propriedades que serve para definir largura e altura, respectivamente. Elas tem duas variação, onde você define qual largura/altura máxima que dado objeto pode ter. São elas max-width e max-hight.
Então, você definirá no CSS de handheld, qual a largura máxima, que por exemplo, o body deverá ter.

body {max-width: 240px;}

Já a propriedade display, será muito usada para ocultar os objetos. Muitas informações que aparecem em alguma parte do layout, muitas vezes não são úteis para os usuários de mobiles, portanto, ocultar essas informações é um favor que você faz para os usuários.

Há algo sobre o assunto no site do Opera, não custa nada dar uma olhada… Visite e leia.

Testando

Você não precisa ter um dispositivo móvel para conseguir saber como seu site se comportará. Basta simplesmente usar o sistema de SSR do Opera, ele é ativado apertando a combinação de teclado SHIFT + F11.
Se você já tem um CSS para media de HandHeld, ele ativará automáticamente esse CSS no SSR.

Meu conselho é você primeiro tudo testar o site sem CSS para HandHeld para ter uma noção de como ele será exibido sem formatação específica. Depois, aplique um CSS para HandHelds, e compare a diferença. Veja como você tem mais controle sobre o layout.

E atenção… Não são todos os browsers que tem um sistema tão bom quanto o Opera. E, hoje em dia, apenas o Opera e o MiniMo (uma versão 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, não tem tanto suporte quanto os outros dois, por exemplo, ele não reconhece MediaTypes.

Vamos nos dar mais atenção a esse mercado. Ele está crescendo e a cada ano surgem novas possibilidades. É um ramo que cresce rápido, e não vai demorar muito você ver qualquer pessoa na rua visitando algum site para consultar um mapa ou procurar qualquer tipo de informação. É muito importante que os desenvolvedores atentem para esse grande caminho.

5 Comentários

Sobre Internet Explorer para Mobile - Breve impressão

Desde que adquiri um MotoQ (se lê MotoQUIU) eu venho usando o Opera Mobile como browser padrão. Ao contrário da versão pra desktops, o Opera Mobile é pago. Por este motivo, quando a data expirou, eu resolvi usar por um tempo o Internet Explorer.
Descobri que a forma com que o IE Mobile renderiza as páginas é tão boa quanto a do Opera Mobile. A velocidade de navegação também é ótima.

O Opera usa muito um sistema que eles chamam de SSR,que em teoria, melhoraria (ou pelo menos tentaria) a visualização de sites em dispositivos móveis. Acontece que esse modo deixa o site muito, mas muito feio. Neste caso, tive a impressão de que o Internet Explorer renderiza melhor os sites que não foram feitos para mobile.

Para quem quer dar uma ajuda para o pessoal que usa browsers mobiles, existe uma metatag chamada MobileOptimized:

<meta name="MobileOptimized" content="sualargura" />

Essa metatag é usada principalmente pelo Internet Explorer Mobile para otimizar melhor o site quando visto de SmartPhones, PocketPCs, etc. O valor colocado ali no atributo “content” deve ser a largura que o browser deve limitar seu layout quando visto de um mobile.

Aviso aos navegantes: fazer image-replacement usando text-indent não funciona no IE para Mobiles. Parece que ele não reconhece o text-indent, o que faz com que o texto fique por cima do logo.

A qualidade de rederização das fontes também achei melhor que a do Opera Mobile. Achei as fontes muito mais nítidas e legíveis.

Uma coisa ruim que achei o IE para Mobiles é a falta de abas. Isso seria muito útil. Normalmente estou sempre visitando e usando mais de dois sites simultâneamente. E sair de um para visitar o outro é uma alterativa terrível. Isso sim me faria voltar para o Opera.

11 Comentários

Navegação em mobiles

Adquiri faz pouco tempo um MotoQ. Já estou passando da parte de adaptação e me acostumando melhor com as frescuras, limitações e vantagens do aparelho. Agora, consigo dar mais atenção a pontos mais interessantes e claro, que irão me ajudar no trabalho diário. Um deles é a navegação.

Se acostumar a navegar num aparelhinho desses é algo realmente interessante e dependendo dos casos quebra um galho absurdo.
Hoje eu uso o Opera Mobile para navegar. E uma coisa que andei percebendo é que as versões mobiles dos sites (os que tem essa versão) são horríveis. O pessoal ainda não gasta tanto tempo planejando e implementando versões mobiles. Será que essas versões são menos importantes? Será que devemos dar atenção para isso somente se os clientes ou os visitantes pedirem?

Eu mesmo não costumo fazer versões mobiles dos meus sites. O Tableless não tem um (na próxima versão já vai ter) nem o site da Visie (que vergonha! Por enquanto.). Acontece que no meio de tanta a coisa para se pensar no site para desktop, que muitas vezes simplesmente, deixamos de lado. Para depois. O pior é que dependendo do site, fazer uma versão razoável para mobiles não demora tanto.

O que você acha? Você faz sites para versão mobile? Ou só faz por livre e espontânea pressão do chefe ou cliente?

Estou começando a colocar na minha cabeça que todo desenvolvedor devia ter um SmartPhone. Pelo menos os que trabalham com interface e padrões web.

20 Comentários

Mobilidade na cabeça

Ontem, depois do lançamento do iPhone e de ter visto suas funcionalidades (nem tão novas assim, mas reinvatadas de verdade), fiquei pensando em uma funcionalidade em particular: navegação na internet. Quem assistiu o Keynote viu o camarada navegando de verdade com um browser de verdade (Safari) e tendo uma experiência realmente boa. O browser carrega o site inteiro, lendo XHTML e CSS, nada de SSR ou qualquer coisa parecida e é renderizado como se fosse uma miniatura na tela, mas a formatação é integral, como se estivesse sendo visualizado de um desktop. Sim, ficou impossível de ler, mas isso foi resolvido quando o nosso camarada tocou duas vezes no lugar que ele gostaria de ler e o browser deu um ZOOM, possibilitando a leitura.
Essa experiência é muito comum hoje em dia, só que em vez de dedos, você estaria usando uma Stylus (aquela canetinha nojenta), muito pior de manejar do que seus dedos.

A impressão que eu tive sobre a experiência de navegação no iPhone é ótima. Será um dispositivo que os desenvolvedores não terão que se preocupar com compatibilidade, você nem vai precisar fazer uma versão especifica para mobiles (no caso do iPhone). Sim! Você ainda precisa se preocupar com desenvolvimento de sites para dispositivos móveis. O iPhone não é o único dispositivo do mercado, infelizmente.

Também hoje, o Yahoo! liberou para download um pacote de programas direcionados para celulares. O Yahoo! sempre foi antenada quando se trata de mobiles. E você sabe que eles fazem um trabalho bem feito. Sem comentar do Opera, que é um dos melhores (ou melhor) browsers para dispositivos móveis que existe.
Mobilidade é uma coisa que todo mundo precisa e quer. Quem tem um celular hoje, não consegue mais viver sem. Quem tem um celular com conexão à internet também não consegue viver sem. E assim o público vai mudando e se inovando. Aí é onde a coisa fica mais interessante.

Já falei e repito: pra mim, este ano será da mobilidade. Haverá mais interesse nesse mercado, mais procura, mais agitação. Se as empresas acima estão dando uma certa atenção pra isso, já é motivo para mexermos nossos ossos e corrermos atrás do prejuízo desde agora.

5 Comentários

Podcast Tableless #23 - .mobi

Pois é… parece que lá fora, a moda (ou quase) é registrar domínios .mobi para sites destinados a dispositivos móveis.

Isso está gerando uma polêmica muito produtiva: Uns acham que isso não é certo, porque defendem uma única versão do site para vários dispositivos. Outros, acham que é uma saída fazer uma versão específica para esses dispositivos.

Este assunto na verdade não é tão novo quanto parece, mas agora que foi tudo aprovado, discussões serão travadas e ainda não há como saber qual caminho o mercado irá tomar.

Fizemos este podcast expondo nossa primeira impressão. Nenhum dos dois ainda tem uma opinião totalmente formada, mas ambos acham que foi a pior droga que pode acontecer. E você, o que acha? Ouça o podcast e exponha sua opinião.
Agora você pode interagir melhor com o nosso podcast. Se você quiser mostrar sua opinião, dar um comentário ou sugestão, pode fazer isso deixando um recado de voz no skype. O usuário é tablelessbr. Adicione no seu skype e manda bala.

Podcast Tableless #23 - .mobi
Tempo: ~30min
Formato: Mp3
Tamanho: ~10Mb

Breve introdução: XHTML Mobile Profile

XHTML MP é um subset do já conhecido XHTML. Ele é baseado em um outro subset de XHTML chamada XHTML Basic. O XHTML Basic é uma versão simplificada do XHTML definido pelo W3C. Ele foi feito especificamente para dispositivos com baixo poder de processamento como celulares, PDAs, pagers etc… O XHTML Basic não contém algumas características que esses dispositivos dificilmente suportam, como por exemplo: Frames, Folhas de Estilo em Cascata e scripts.

O ponto forte do XHTML MP é trazer para os dispositivos móveis tecnologias atuais para criar uma experiência melhor ao navegar. Antes do nascimento do XHTML MP, os desenvolvedores para internet móvel usavam WML e WMLScript para criar sites em WAP. Enquanto isso, os desenvolvedores para a internet convencional trabalhavam com HTML/XHTML e CSS para construir web sites.

Com a vinda do XHTML MP, a linguagem da internet sem fio e a linguagem da internet convencional finalmente convergiram. XHTML Mobile Profiles juntamente com o WCSS deram mais flexibilidade para os desenvolvedores de sites para dispositivos wireless. Agora, desenvolver para dispositivos móveis ficou tão fácil quanto desenvolver web sites normais. Não é mais necessário ter dispositivos ou softwares especificos para testar seu projeto. Não é mais necessário aprender outra linguagem, é tudo XHTML e CSS, claro, com mudanças específicas para mobiles.

Assunto interessante. Dá muito pano para manga.
O texto não está tão elaborado porque é um rascunho sobre algumas coisas que ando lendo. Como não tive tempo de fazer um texto mais completo, acabei postando esse mesmo.

obs.: quase uma tradução do texto que está em XHTML MP. E uma prévia para breves lançamentos na Visie.

10 Comentários

Sites para Dispositivos Móveis - Breve introdução

Você tem celular? De acordo com a Teleco, em novembro de 2005, havia mais ou menos 82.351.644 de celulares. Ainda me lembro de quando eles eram artigos de luxo, mesmo sendo grandes e pesados.
Hoje, por um preço razoável, você consegue celulares que tiram fotos e fazem outras coisas que nem James Bond ousava imaginar. E quer saber da melhor? Esse é só o começo.

Aparelhos com essas e outras possibilidades aparecerão. Os HandHelds com funcionalidades iguais as de um Desktop estarão em alta. Pessoas acessarão a internet de qualquer canto… não serão dependentes dos poucos HotSpots. Conexões como Wi-Max não serão novidade. Ninguém arregalará os olhos quando você tirar um Palm ou PPC do bolso para anotar algo e enviar por email, pelo contrário. A internet estará espalhada em cada bolso, em cada palma de mão.

O Google acabou de lançar uma versão do seu webmail para mobiles. Sem contar com sua versão de busca para Mobiles. O Flickr também tem sua versão para dispositivos móveis. Isso mostra que os grandes, de uma maneira ou de outra, estão preparados para essa nova etapa.

Como introdução a criação de sites para esses dispositivos, criamos dois artigos que poderão ajudar o desenvolvedor. É importante que comecemos a fazer da maneira certa. Ter em mente suas possibilidades, seus limites. Um dos artigos fala sobre SSR - Small-Screen Reader. O outro fala um pouco sobre MediaType para HandHelds.

13 Comentários

Podcast #15

Estava ouvindo um podcast (ótimo por sinal) por aí, que me fez pensar um pouco sobre os anos vindouros.
Comecei a pensar então sobre a entrada triunfal dos celulares e outros aparelhos móveis. É melhor começarmos a ficar espertos com eles.

Você pode baixar o Mp3 direto, ou se quiser receber automagicamente nossas atualizações, cadastre nosso Feed.

Tamanho: ~14.32Mb
Tempo: ~15 Min

Você está gostando do podcast? O cara tá falando bem? Precisa de uma consulta com a fonoaudiologa? Comente.

14 Comentários

Browsers dos Dispositivos Móveis

Dispositivos Móveis. Este é um terreno muito estranho para os desenolvedores de sites.
Talvez você tenha ouvido falar em fazer sites para Dispositivos Móveis (Mobiles) depois que começou a estudar Web Standards. Confesso que comecei a dar mais atenção a essa área depois que estudei a fundo os Padrões.

Mas, para aquele usuário um pouco mais avançado, que quer fazer seus sites aparecerem melhores nestes dispositivos, nada melhor que conhecer os Browsers que estão disponíveis e que são usados pelos usuários de Mobiles.
Tentei montar abaixo uma tabelinha de compatibilidade entre os browsers. Como eu, muitos não devem ter como comprar um aparelho desses para testar, por isso eu recomendo muito pesquisar pela internet. Tentarei na medida do possível dar algumas dicas por aqui sobre os dispositivos, browsers, compatibilidades e etc. Existem muitos sites que são ótimas fontes de estudos, com links e material farto sobre o assunto.

Browser	HTML	XHTML 1.0	CSS 1.0	CSS 2.0	DOM	JavaScript
Palm Web Pro 3.0	sim	sim	sim	sim	?	v1.5
Palm Web Pro 3.5	sim	sim	sim	sim	?	v1.5
PalmSource Web Browser 2.0	sim	sim	sim	Parcial	?	v1.5
PalmSource Web Browser 3.0	sim	XHTML 1.0 + XHTML Mobile Profile	sim	sim	Nível 1 / Parc. Nível 2	sim
EudoraWeb Browser	sim
Handspring(TM) Blazer(TM) 2.0	sim	sim
Pocket Internet Explorer	sim	?	?	?	?	?

Claro.
Como nos Desktops, os Mobiles tem seus Sistemas Operacionais. O Pocket Internet Explorer é para PocketPc (PPC), todos os outros são para Palm. Sim, há vários tipos de sistemas operacionais para Palm; e não, os browser não são compatívels com todos os tipos de Palms. Por exemplo, o browser Web Browser 3.0 só é compatível com Palm OS Cobalt que ainda nem saiu.

Se alguém souber mais alguma informação sobre especificamente o Internet Explorer. Por favor, nos diga para que possamos melhorar a tabela acima.

Mais do mesmo: Palm Web Pro 3.0; Palm Web Pro 3.5; PalmSource Web Browser 3.0; PalmSource Web Browser 2.0; Pocket Internet Explorer; Handspring(TM) Blazer(TM); Mobile Life