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

Posts da TAG ‘acessibilidade’

Cuidado para não regredir

Você se lembra de quando esse treco todo de Web Standards começou a pegar aqui no Brasil? Muitos falavam que era moda, que ia passar… Outros queriam descobrir as vantagens e outros ainda as desvantagens. Foi bem parecido com o que aconteceu com o “Ajax”. Nos dois começaram a surgir pessoas praticando os conceitos com afinco e tendo resultados interessantes. Entretanto há uma outra parte que mesmo utilizando conceitos novos, conseguiram regredir.

Engraçado isso né? Mesmo utilizando tecnologias e metodologias que geram uma produtividade acima do normal para qualquer projeto, o desenvolvedor consegue regredir e usar essas novas idéias da maneira antiga. Com Tableless foi assim e está sendo agora com o Ajax. Hoje em dia o pessoal está utilizando Ajax em tudo! Quer mostrar algum texto, use Ajax. Quer mostrar uma coluna? Use Ajax. Desde de quando precisamos usar Ajax para poder mostrar um simples texto na tela? Deixa o site mais rápido? Deixa mais acessível? Fica melhor em relação a performance, compatibilidade ou algo parecido?

Vamos com calma. Vamos planejar e pensar antes de sentar o bumbum no banco e codificar. Essas metodologias ajudam demais o desenvolvedor mas só se forem usadas com moderação e da maneira correta. Caso contrário elas são tão penosas quanto as maneiras antigas de desenvolvimento.

O bom desenvolvimento é um conjunto de vários pontos. Vão desde planejamento até a relação de designers e programadores. É um caminho tortuoso, mas bem fácil de caminhar.

12 Comentários

Conteúdo é o rei do batatal

Texto interessante sobre dinheiro, conteúdo e design que um amigo me indicou.

Concordo com o que o Cardoso disse no artigo. O conteúdo é o rei do batatal e ponto final. Por favor, já aviso aos xiitas de plantão: também acho que design é importante. Muito importante. Importantíssimo. Mas sem conteúdo, design não é nada. O design existe para servir o conteúdo e não o contrário.

Em desenvolvimento web, não é só o design que serve o conteúdo, mas também o código. Como já disse aqui e aqui, o código deve ser feito pensando no conteúdo. Identificar bem o conteúdo é torná-lo mais acessível, mais poderoso. Um conteúdo semântico é acessível em todo lugar.

É óbvio que se você vê um site com um design bem feito, que encha os olhos, a sua experiência se transforma, melhora e você se sente mais motivado a navegar. Design bom é aquele que consegue apresentar bem o conteúdo.

15 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

Para ficar de olho: Microformats

Veja este artigo da Read/Write Web: Mozilla Does Microformats: Firefox 3 as Information Broker.

Enquanto isso, recebemos muitos e-mails de gente que ainda não entendeu o que são os tais microformats, ou, o que é muito mais comum, para que eles exatamente servem. Então vamos tentar elucidar, escolhendo um microformat como exemplo: hCard, um dos mais populares, vai servir perfeitamente. Continuar lendo »

19 Comentários

E ano que vem?

Eu vou apostar minhas fichas em mobilidade, internet móvel e tudo quanto é coisa que seja pequena e não use fios para se conectar.

Consegui adquirir meu primeiro celular no meio deste ano. Consegui também uma conexão ilimitada de dados. Experiência interessante. Uso o Opera Mini para navegar e é uma maravilha.

Não, não dá para ficar horas lendo artigos e escrevendo emails pelo celular. É chato, é cansativo. Mas com um smartphone dá. A experiência é outra, as funcionalidades são outras, o público é outro. Com meu celular consigo quebrar aqueles galhos de última hora. Com Smartphone consigo ter uma experiência muito parecida com o desktop. Tenho uma tela maior, uso um browser melhor, tenho uma experiência visual melhor. A boa notícia é que essas características e outra mais só tendem a melhorar.

As características dos dispositivos móveis tendem a ficar cada vez mais parecidas com as de um desktop. Entretanto, o dispositivo sempre vai ser pequeno, se não for, vai perder seu objetivo de mobilidade. Já existem vários smartphones cuja experiência de navegação é fantástica, quase que não dá para sentir falta de facilidades existentes em desktops.
O legal é que todo mundo gosta de celular. Todo mundo gosta de trocar de celular. Todo mundo gosta de enviar fotos por mms, bluetooth ou até mesmo email. Não acho que o preço da internet móvel vá demorar para se tornar mais acessível. Hoje o preço é absurdo… mas lembre-se que dial-up também era. Hoje todo mundo tem banda larga. Até lá, as operadores querem sugar tudo que puderem. Nada mais normal por aqui.

Eu aposto nisso. Esse mercado tende a crescer muito. Empresas e mais empresas estão acordando o interesse para esse mercado. Vai ser divertido.

9 Comentários

Validar é importante?!

Não sei se você já parou para pensar neste assunto, mas validar seu código é importante? Se é importante, o quanto ele é importante?

O que é validar? O que faz de miraculoso o validador do W3C quando você coloca o endereço do site e clica no botão?! Nada. Ué. Nada que você não saiba fazer também. Ele apenas - escute bem - verifica a sintaxe do seu código XHTML/HTML. Sabe aquele código “bonito” que você escreveu em alguma madrugada dessas? Ele te mostra o que está escrito errado. Mais nada. Só isso. Finito. Foi-se. Já era. Diga tchau Lilica, tchau Lilica.

Hoje, a causa mais importante (se não a única) de validar um documento XHTML é aquela história de tudo um dia ser baseado em XML/RDF e tudo mais. Isso ainda não é certo. Há uma série de discussões por debaixo dos panos sobre esta intenção e a possibilidade de adotar um pseudo HTML 5. Todos que trabalham ou já trabalharam com XML sabem que se você cometer o menor erro de sintaxe, o XML simplesmente pára de trabalhar. Ele é chato. Você precisa validar o XML, precisa escrever tudo certo, correto, na mais perfeita ordem.
Não estou dizendo que você não precisa escrever corretamente um HTML, longe disso. Não me entenda mal.

Validação também não mede o nível de semântica do seu código. Ele não vai te falar que você colocou um p onde deveria ser um h3. Isso não existe. Semântica além de significado é bom senso. O melhor robô para verificação de semântica é você. Certo, pode pedir para aumentar o salário.

A linguagem de marcação que iremos utilizar como padrão ainda é muito incerto. Eu uso XHTML. Já o Bruno Torres usa HTML 4. Não há vantagens para nenhum dos dois. Os dois estão usando praticamente o mesmo código sem nenhuma vantagem espetacular que os faça mudar de idéia.

Moral da história: Validar não é tão importante como alguns dizem. Ainda. Um site validado não é digno de honras e méritos. Mas validar um documento não faz mal a ninguém e te ajuda a manter a ordem no código. Isso sim pode servir como diferencial. Criar um código bom, enxuto com sintaxe bem feita não é para muitos. Ter um código válido, só serve pra dizer que ele não tem erro de sintaxe alguma e claro agradar o chefe/cliente. Apenas isto.

Mais do mesmo:

* Facilite a sua vida e assine nosso FEED no seu agregador favorito!

53 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

Video Tutorial #11 - Amostra do Opera Mini

Bem, este não é um video tutorial como os outros. Eu só tentei capturar com uma webcam furreba algumas imagens do Opera Mini.

Para quem não sabe, o Opera Mini é a versão do Opera para celulares com Java. O Opera tem uma série de versões de seu browser. Começa em desktops, passa pelo Nintendo DS, chegando até ser base para Media Lounge. Sem dúvida, um dos melhores browsers atualmente.

Eu capturei o video em AVI, mas ficou enorme, na faixa de 200, 300Mb… Tentei transformar em SWF, como faço normalmente com os videos tutoriais do Tableless, mas ficou com 30Mb, muito ruim também. O melhor jeito que eu encontrei foi transformar em DIVX. Para ver, você precisará ter algum player que toque arquivos .divx.
Vou tentar criar outra versão mais acessível, se alguém souber de algum jeito fácil, por favor, diga.

Video Tutorial #11 - Opera Mini
Tamanho: ~7Mb
Tempo: ~1m00

O Opera Mini se mostrou muito robusto. Bem fácil de manusear. Fazer um browser para aparelhos celular não é coisa fácil. Você é muito limitado a algumas ações, mas o Opera conseguiu se mostrar muito acessível. As opções são fáceis de encontrar e de acessá-las pelo teclado.

Nos desktops, o Opera sempre teve as melhores formas de navegação via teclado, e no celular ele ainda consegue manter este padrão. Você consegue navegar facilmente pelos links. Rolar a página também não se mostrou um problema, ele tem um rolamento suave que quebra um galhão.

Como estamos falando de um browser para celular, as configurações que você tem acesso são bem resumidas. Você pode baixar skins, gerenciar marcadores (favoritos), gerenciar histórico, aumentar qualidade das imagens, definir se você quer ver ou não ver imagens, aumentar tamanho de fonte, etc…

Quem tiver a oportunidade de instalar no seu celular, não perca tempo.
Se você não pode instalar o Opera Mini, não se preocupe, no site do Opera há um Simulador do Browser em seu site. É só visitar e testar.

Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.

17 Comentários

O que são Microformatos com Tantek Çelik

Apresentação show de bola criada pelo Tantek Çelik.

What Are Microformats?

10 Comentários

CSS Modular - Breve explicação

Se você faz sites grandes usando CSS, já deve ter notado que chega uma etapa do trabalho que se não prestar a atenção devida, podemos nos perder em mundo de propriedades, classes e ids. O CSS ajuda muito no desenvolvimento, isso é fato e ninguém duvida. Acontece que se você não tiver o mínimo de organização, pode ficar tão bagunçado quanto desenvolver sites usando tabelas.

Há uma maneira de organizar melhor seu CSS e deixá-lo organizado para que a manutenção seja rápida e transparente. Isso é possível quando modulamos o CSS.

Separando as seções

Os sites costumam ser dividos em vários pedaços. Um site simples, por exemplo, pode ser divido em 5 pedaços principais: Topo, Coluna da esquerda (onde normalmente vai um menu lateral), Coluna do meio (onde geralmente vai o conteúdo do site), Coluna da direita (publicidade, busca, etc) e Rodapé.

Exemplo de estrutura

Você pode dividir seu CSS de acordo com este padrão. Ou seja, criar um arquivo CSS para cada pedaço do site, e depois importá-los em apenas um arquivo CSS principal, que será linkado na home.

No caso deste nosso sites simples, com 5 pedaços, você teria um arquivo CSS para o topo, onde você formataria tudo que pode estar no cabeçalho do site: Logo, menu, busca, data, etc… Outro CSS que formataria a coluna da esquerda, outro arquivo para coluna do meio, e assim por diante.

Você teria 5 arquivos CSS que conteriam a formatação de cada pedaço do site unicamente. Isso evitaria ter apenas um arquivo de CSS com centenas de linhas. Onde é um tanto custoso fazer alguma alteração. Separando seu CSS em pequenos módulos, você consegue ser mais rápido na hora de executar manutenções, porque você sabe onde exatamente encontrar a formatação de cada área do site. Se o problema é na lateral esquerda, você vai direto no arquivo responsável pela formatação da coluna da esquerda. Poupa trabalho de ficar procurando onde fazer a alteração.

Importando

Para importar todos os arquivos CSS em apenas um, usaremos o comando @import:

@import url(topo.css); /** CSS do cabecalho **/ @import url(colunaesquerda.css); /** Coluna da esquerda **/ @import url(conteudo.css); /** Conteúdo do site **/ @import url(colunadireita.css); /** Coluna da direita **/ @import url(rodape.css); /** Rodapé **/Os nomes que eu usei para os arquivos são apenas para explicação. Não é bom usar nomes tão específicos por falta de semântica. Isso é papo para outro post.
Você pode ainda ir mais além, e criar arquivos individuais para seções específicas do site, como por exemplo telas que usem formulários: Telas de cadastro, contatos, logins, etc.

Use o bom senso. Não exagere. Não adianta você criar dezenas de arquivos CSS, em vez de facilitar a vida, você vai piorar. Já vi muito desenvolvedor criar um arquivo CSS para formatar apenas duas ou três propriedades de um objeto. Isso é contraproducente. Não vale a pena criar um arquivo para tão pouco código.

Planejando

Um bom planejamento antes de começar a estrutura seu CSS é muito bem vindo. Analise o layout e defina as seções principais. Mapeie as páginas que terão formulários, elas costumam ser mais complicadas que o geral, é bom que elas tenham um arquivo CSS individual.

Crie uma pasta CSS onde você irá colocar toda a formatação do site. Nesta pasta se encontrarão apenas os arquivos CSS e a pasta de imagens que estes arquivos irão utilizar.

Não crie nomes complicados para os arquivos CSS. Tente manter a simplicidade e objetividade nos nomes para que não haja problemas posteriores de conflito. Já vi muita gente colocar nomes como: cabecalho_interna_sistema_logado.css
É muito fácil cometer erros com uma nomeclatura desta maneira. Seja sucinto na hora da escolha dos nomes.
Fazendo todo este planejamento, é simples de controlar toda a estrutura de formatação do site.
A maneira que eu apresentei aqui é muito básica. Você com certeza fará sites bem maiores e complexos do que nosso exemplo. Mas a idéia continua a mesma. Adapte esta técnica de acordo com as necessidades do projeto. Invente maneiras novas… lembre-se que padrões web vieram para libertar.

38 Comentários

Sobre Internet Móvel

Seção do tableless destinada a desenvolvimento web para dispositivos móveis. Entenda as características do mundo móvel e seus dispositivos.

Sobre Wordpress

Wordpress é uma plataforma de publicação de conteúdo grátis baseada em padrões web e usabilidade. Leia artigos técnicos sobre Wordpress aqui.