pixeladas aleatórias » Web Standards http://s1mone.net Pequenas doses de (des)informação sobre a Vida, a Web e Tudo Mais Tue, 17 Aug 2010 16:27:07 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Definindo estrutura, apresentação e comportamento http://s1mone.net/blog/2007/10/definindo-estrutura-apresentacao-e-comportamento/ http://s1mone.net/blog/2007/10/definindo-estrutura-apresentacao-e-comportamento/#comments Wed, 24 Oct 2007 02:37:10 +0000 Simone Villas Boas http://s1mone.net/blog/2007/10/definindo-estrutura-apresentacao-e-comportamento/ Um desenvolvimento maduro para a Web conta com bons nomes de arquivos, um diretórios organizados e separação das camadas de estrutura, apresentação e comportamento.

O que é estrutura, apresentação e comportamento em uma interface Web

Definimos assim cada uma destas camadas:

Estrutura

A camada de estrutura é formada por uma linguagem de marcação, como o XML, HTML e XHTML. Este arquivo contém o conteúdo do documento, além de informações de indexação e documentos relacionados.

O conteúdo deve ser marcado de modo que seja perfeitamente compreensível para qualquer tipo de usuário, seja ele quem for ou qual seja o dispositivo utilizado. Deve-se marcar cada trecho com seu correspondente, de acordo com a definição do tipo de documento (DTD). No HTML, por exemplo, usamos as tags:

  • <p> para parágrafos;
  • <a> para links de hipertexto;
  • <h1>, <h2> e <h3> para títulos;
  • <ul>, <ol>, <li>, <dl>, <dt> e <dd> para listas;
  • <table>, <thead>, <tbody>, <caption>, <tr> e <td> para tabelas; e assim por diante.

Cada elemento deve procurar seu melhor correspondente no tipo de documento. Se um elemento ou um conjunto deles não tiver uma boa correlação deve-se usar elementos genéricos:

  • <div> para elementos em bloco;
  • <span> para elementos em linha (dentro de parágrafos, por exemplo).

A seguir, um exemplo de documento bem simples pronto para a publicação.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Meu site</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
  <script type="text/javascript" src="behavior.js"></script>
</head>
<body>

  <h1>Olá mundo!</h1>

  <div id="avatar">
    <img src="avatar.jpg" width="48" height="48" alt="Foto">
  </div>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    onummy nibh euismod tincidunt ut laoreet dolore erat
    olutpat. Ut wisi enim ad minim veniam, quis nostation
    llamcorper suscipit lobortis nisl ex.</p>

  <p>Ut wisi enim ad minim veniam, quis nostrud exerci.
    <a href="http://outrosite.com" rel="external"
        title="Outro site">link abre uma nova janela</a>.
        Lorem ipsum dolor sit amet, sectetuer cidunt ut
        dolore magna aliquam erat volutpat.</p>

  <p><a href="mailto:eu@provedor.com">mande um e-mail!</a></p>

</body>
</html>

Se somente este código for mostrado ao usuário, é muito provável que ele consiga realizar as tarefas possíveis nesta interface que incluem ler o texto, ver a foto, clicar no link externo e mandar uma mensagem eletrônica.

Nesta camada, são tomadas decisões de conteúdo, como a hierarquia das seções (definidas pelos seus títulos), como será o formato de data, como estruturar um menu de navegação ou um breadcrumb, entre outras. Além disso, é nesta camada que reside boa parte das definições de acessibilidade de uma interface.

Veja um exemplo de página apenas com a estrutura. Perceba que mesmo sem layout ela continua sendo compreensível e que continua funcionando sem JavaScript. Para ver a estrutura de qualquer página use uma extensão para como o WebDeveloper para Firefox e aperte Ctrl+Shift+S.

Apresentação

Na camada de apresentação, está tudo que caracteriza o layout da página. Com o CSS, definimos cores de fontes, fundos, posição dos elementos na página e todas as outras decisões estéticas.

Veja um exemplo de código CSS aplicado ao nosso exemplo de estrutura:

body{
	font: 0.8em Arial, Helvetica, sans-serif;
	background: url(fundo.jpg) no-repeat;
	padding: 140px 0 0 100px;
}
p{
	width: 400px;
	margin:0;
	padding:10px;
	background: url(fundo.png);
}
p + p + p{
	background: transparent;
}
h1{
	width: 400px;
	margin-left: -30px;
	font: bold 3.5em Georgia,Times New Roman,serif;
	color: #93360D;
}
div{
	float: left;
	margin: 0 10px 0 0;
}
img{
	border: 1px solid #000;
}
a{
	color: #000;
}
a:hover{
	color: #93360D;
}
a[rel="external"]{
	background: url(externo.png) center right no-repeat;
	padding-right: 13px;
}
a[href ^="mailto:"]{
	font-size: 0.85em;
	font-weight: bold;
	text-decoration: none;
	padding: 2px 10px;
	background: #E0C284;
}

Separando todas as definições de estilo num documento separado permite melhor gerenciamento de estilos diferenciados de acordo com a mídia. Pode haver um estilo diferenciado para impressão:

@media print{
	* {
		color: #000;
		font-family: Georgia,Times New Roman,serif;
		text-decoration: none;
	}
	p + p + p, img{
		display: none;
	}
}

Veja o exemplo anterior, agora com a camada de apresentação.

Comportamento

Já na camada de comportamento, estão todos os efeitos e todas as decisões funcionais da interface. Manter a programação separada da estrutura facilita a manutenção e evita erros. Além disso, é mais fácil tratar alternativas para usuários que não possuem suporte a esta camada, como usuários de celular e de quiosques.

No exemplo anterior, clique no link para abrir um site externo em nova janela.

Veremos um artigo mais detalhado sobre scripts não intrusivos mais adiante.

Referências:

Artigos relacionados:

Compartilhe: email Google Bookmarks del.icio.us Facebook StumbleUpon Digg Posterous Twitter

]]> http://s1mone.net/blog/2007/10/definindo-estrutura-apresentacao-e-comportamento/feed/ 12 Preservando recursos naturais com desenvolvimento Web http://s1mone.net/blog/2007/10/preservando-recursos-naturais-com-desenvolvimento-web/ http://s1mone.net/blog/2007/10/preservando-recursos-naturais-com-desenvolvimento-web/#comments Mon, 15 Oct 2007 12:56:21 +0000 Simone Villas Boas http://s1mone.net/blog/2007/10/preservando-recursos-naturais-com-desenvolvimento-web/ Blog Action DaySua família separa o lixo para reciclagem? Você prefere deixar o carro na garagem e ir para o trabalho utilizando transportes públicos ou não poluentes? Você todos os equipamentos eletrônicos e as luzes quando deixa um cômodo? Então você está pronto para um novo nível de conscientização de preservação do meio ambiente. Veja como medidas simples no desenvolvimento Web podem fazer a diferença na utilização de recursos naturais.]]> Blog Action Day

Estou reciclando este texto para o Blog Action Day 2007.

Sua família separa o lixo para reciclagem? Você prefere deixar o carro na garagem e ir para o trabalho utilizando transportes públicos ou não poluentes? Você todos os equipamentos eletrônicos e as luzes quando deixa um cômodo? Então você está pronto para um novo nível de conscientização de preservação do meio ambiente. Veja como medidas simples no desenvolvimento Web podem fazer a diferença na utilização de recursos naturais.Os educadores ambientais trabalham com os princípios dos 4 R’s para a redução no consumo de insumos naturais e controle de resíduos: Reduzir, Reciclar, Reutilizar e Recuperar. No desenvolvimento Web podemos trabalhar principalmente com o princípio de redução do consumo de papel e energia. Veja algumas idéias:

Otimizando o CSS de impressão

A produção de papel é um dos procedimentos mais nocivos à natureza. É necessário o desmatamento de grandes áreas para o plantio de uma ou duas espécies de árvores. O impacto no ecossistema é irreversível.

Não é possível impedir a impressão das interfaces e nem é aconselhável, mas é possível reduzir o número de páginas impressas disponibilizando para esta media apenas o essencial. Limpe o CSS eliminando fundos, cores, banners, menus e todo tipo de informação que não é útil para quem está imprimindo aquele conteúdo.

Utilizando protótipos navegáveis

No projeto de desenvolvimento Web o arquiteto de informação deve ser o maior consumidor de papel. Ele precisa de dezenas de impressões de wireframes para testes, correções e validação do cliente, sem mencionar a prototipação utilizando post-its. Protótipos navegáveis são de longe a melhor forma de fechar o escopo do projeto com o cliente, principalmente em sistemas altamente interativos. E podem ser reutilizados para a integração com as camadas de apresentação e comportamento.

Trabalhando a acessibilidade em dispositivos móveis

O futuro da Web não depende exclusivamente de acesso nos computadores desktop como conhecemos hoje. Notebooks já são mais acessíveis para usuários finais e usuários corporativos estão obtendo acesso aos sistemas Web por dispositivos móveis cada vez menores. A fonte de energia destes dispositivos ainda são baterias recarregáveis com uma vida útil limitada. Nem sempre o despejo destas baterias, que são compostas por diversas substâncias tóxicas, é adequado. Estes despejos acabam em aterros sanitários comuns, contaminando o solo e as águas.

Trabalhando um pouco a media handheld no seu CSS é possível diminuir o tempo de uso de alguns destes dispositivos, mas a diferença aparece mesmo na verificação de acessibilidade. Passe suas interfaces nos verificadores automáticos e assegure-se de conseguir o maior nível de acessibilidade de acordo com os prazos disponíveis.

Lendo este artigo, esta iniciativa pode parecer ineficaz ou mesma utópica, mas são nas pequenas atitudes que conseguimos as pequenas economias que farão a diferença. É cada um fazendo a sua parte. Todos lucram.

Artigos relacionados:

Compartilhe: email Google Bookmarks del.icio.us Facebook StumbleUpon Digg Posterous Twitter

]]> http://s1mone.net/blog/2007/10/preservando-recursos-naturais-com-desenvolvimento-web/feed/ 3 Visie: Code Show http://s1mone.net/blog/2007/09/visie-code-show/ http://s1mone.net/blog/2007/09/visie-code-show/#comments Mon, 03 Sep 2007 22:28:19 +0000 Simone Villas Boas http://s1mone.net/blog/2007/08/visie-code-show/ Code Show
17 de Agosto de 2007.
E duas semanas depois, alguns notas sobre o Code Show:

  • Ótima dica do Élcio para separar entregas de um grande aplicativo em pequenos módulos. O cliente vê que o projeto está andando, os projetos mais fáceis de gerenciar e o tesãozinho de trabalho cumprido quase que diariamente.
  • Que nervoso me deu com Diego espalhando aquele font-family no código todo! Lembrete para mim mesma: escrever algo sobre boas práticas para CSS, reset.css ou mesmo sobre CSS frameworks. Update: Escrevi! Uma outra visão sobre CSS Frameworks.
  • Outro ponto que me deixou tensa foi a estrutura da página. Quando começo a montar um conteúdo, coloco apenas as tags indispensáveis para a compreensão do conteúdo. Qualquer div ou span de estrutura só entra quando estou feliz com o conteúdo e começo a montar o CSS. Isto minimiza a ocorrência de tags desnecessárias, principalmente para quem está começando com o CSS design.
  • Não vi os meninos validarem o código HTML durante o processo. Não vi se o CODA já faz isso e eu perdi a deixa. Estou sempre validando para evitar erros de renderização bizarros e evitar o acúmulo de erros em todas as páginas. O mesmo serve para a verificação de acessibilidade e usabilidade. Assim que estou com o HTML montadinho em todo site navego para ver se faz algum sentido. Isso antes mesmo de ter um layout! Eu sei que era apenas um exercício, mas era o lugar para aprendermos um pouco das práticas uns dos outros.
  • Subversion é tudo nesta vida. Ainda vou ter um! *:D
  • Estava curiosa sobre o Python, mas foi só isso. Não me apaixonei.
  • Foi ótimo finalmente conhecer Elcio, Diego, Rafael e Jader, e conhecer o menino Victor, que levou a gente para almoçar, e todo mundo mais!
    Visie Code Show
  • Preciso de um destes aparelhinhos wi-fi. Me senti em 1986 com bloquinho de notas e lapiseira.
  • Ainda não vi a gravação do CodeShow! Tenho que fazer isso logo!!!
  • Não comi pizza, mas tomei um chopp preto ótimo no Prainha Paulista (que infame!).
  • Nunca vá de vestidinho para SP no inverno. Você vai congelar.

Uma resenha mais profunda no blog do Jader.

Artigos relacionados:

Compartilhe: email Google Bookmarks del.icio.us Facebook StumbleUpon Digg Posterous Twitter

]]> http://s1mone.net/blog/2007/09/visie-code-show/feed/ 7 Desenvolvendo de acordo com os padrões Web http://s1mone.net/blog/2007/06/desenvolvendo-de-acordo-com-os-padroes-web/ http://s1mone.net/blog/2007/06/desenvolvendo-de-acordo-com-os-padroes-web/#comments Thu, 07 Jun 2007 22:53:11 +0000 Simone Villas Boas http://s1mone.net/blog/2007/06/desenvolvendo-de-acordo-com-os-padroes-web/ Cada novo dia que abrimos nosso navegador para acessar mais um dos milhares de mash-ups, APIs e XMLs que facilitam nossa vida estamos nos afastando cada vez mais da função primordial da Web e da forma como foi planejada para ser: um imenso e estático repositório de documentos. Alternativa fácil para a colaboração online, a Web facilita a publicação e a recuperação de informações para um público que não é informata por vocação ou formação. O HTML foi estabelecido e interpretado pelos navegadores para facilitar a vida destes marcadores amadores, resultando em uma linguagem simplória, sem muitos recursos e sem a obrigatoriedade de ser corretamente desenvolvida.

O uso comercial da Internet e o surgimento dos primeiros profissionais da Web não alteraram o curso do desenvolvimento desta plataforma até o final da década de 1990 com as primeiras versões das recomendações XML (e XHTML), CSS e DOM. Estas foram as primeiras tentativas para o estabelecimento de paradigmas para a criação profissional de documentos para a Web e para o desenvolvimento de aplicativos simples para auxiliar a publicação e a recuperação de informações. Ainda hoje, mesmo com Ajax, Ahah, Amass e hypes similares, algumas destas recomendações são as nossas ferramentas essenciais no desenvolvimento Web. Nos últimos meses isto vem sido questionado como no caso da picuinha do WHATWG e a polêmica do HTML 5 x XHTML 2.

No entanto, a Internet comercial já estava a pleno vapor quando estas recomendações saíram. Muitos de nós, os primeiros profissionais da Web, estávamos mais do que formados empiricamente durante os anos da bolha. E com estas recomendações ainda não corretamente implementadas pelos navegadores e nossa formação profissional comprometida pelo cotidiano, não há de se admirar a quantidade de maus hábitos criados, documentados e perpetuados desde então.

Citemos alguns dos vícios do profissional Web e como começar a abandoná-los:

  1. Não ligamos para a marcação do código
    Seja lá como o código estiver marcado, o navegador irá tentar solucionar e apresentar aquele conteúdo da melhor forma possível. Se for um conteúdo simples não teria problema algum, mas em interfaces com alto nível de interatividade (como Ajax) ou qualquer acesso à árvore do HTML (como CSS e DOM) a queda de performance e o surgimento de bugs de renderização acontecem o tempo todo.
    Escolha um doctype que melhor se adeque às necessidade do projeto e tente validá-lo. Nem sempre é possível conseguir a marca de zero erros e zero alertas de primeira. Apenas tentar ser válido já é um ótimo começo no caso de integração com produtos legados ou de terceiros. Validadores em tempo real como o HTML Validator são uma ótima opção para manter a produtividade.
  2. Usamos marcação ignorando sua verdadeiras finalidades
    Sem uma camada de apresentação estabelecida através de uma recomendação e com a devida implementação nos navegadores, conseguir uma boa identidade visual em um website é impossível. Para isso, por muito tempo, usamos marcações para gerar tabelas para montar estruturas de página. Para muitos desenvolvedores e designers, CSS design ou tableless resume o desenvolvimento de acordo com os padrões Web, enquanto é apenas uma parte dele. A marcação semântica do código vai além de trocar tds por divs.
    Leia a lista de tags HTML e adicione em seus favoritos de consulta rápida. A marcação semântica é essencial para a indexação automática de documentos e um facilitador na portabilidade para outros dispositivos.
  3. Desenvolvemos de acordo com o navegador e não seguindo as especificações
    Em um mundo onde só se acessa a Web de um computador com monitor, teclado e mouse, com um único sistema operacional dominante e dois navegadores Web com mais de 95% do market share, fazer uma interface que funcione em qualquer situação é tão fácil quanto um “se” e um “senão”. Não vivemos mais neste mundo. Hoje podemos escolher entre vários navegadores, sistemas operacionais e dispositivos. Testar uma interface em todas as possibilidades não é só uma tarefa ingrata. É praticamente impossível.
    Devemos trabalhar com o que é comum a todos, que é a Web e seus padrões. Há diferenças de renderização e funcionamento de um navegador para outro? Claro, não há navegador perfeito. Trabalhe com o que melhor implemente as especificações abertas (atualmente Opera, Firefox e Safari) e trate as exceções.
    No CSS, aprenda como não ser prisioneiro dos CSS hacks contornando propriedades que são problemáticas, como por exemplo no caso do box model do Internet Explorer.
    No JavaScript, use a detecção de objetos ao invés da detecção de navegadores. A lógica é simples: se tem o objeto que preciso, faça; senão, não. Mesmo entre as diferentes versões de um mesmo navegador há diferenças na implementação dos objetos.

Não estamos mais nos anos da primeira euforia da Web. Estamos na Web 2.0, na fase áurea dos aplicativos de publicação e indexação de documentos! Muitas das recomendações tiveram problemas de implementação e outras foram duramentemente criticadas, mas o espírito da Web prevalece o mesmo. Podem continuar tentando transformar a Web em uma plataforma avançada de desenvolvimento de software, mas o objetivo continua o mesmo: criação, colaboração e publicação de documentos.

O princípio fundamental do desenvolvimento dos padrões passa por esta definição. Qualquer interface gerada a partir deste princípio terá potencial de ser acessível para qualquer tipo de usuário, ser automaticamente indexável por qualquer mecanismo de busca e portável para qualquer navegador, sistema operacional e dispositivo.

Artigos relacionados:

Compartilhe: email Google Bookmarks del.icio.us Facebook StumbleUpon Digg Posterous Twitter

]]> http://s1mone.net/blog/2007/06/desenvolvendo-de-acordo-com-os-padroes-web/feed/ 2 Tornando o RSS mais amigável http://s1mone.net/blog/2005/07/tornando-o-rss-mais-amigavel/ http://s1mone.net/blog/2005/07/tornando-o-rss-mais-amigavel/#comments Fri, 22 Jul 2005 21:30:55 +0000 Simone Villas Boas http://s1mone/?p=181 Venci a preguiça e fiz uma interface em XSLT bem simples para o RSS deste blog (update: versão antiga do CMS). Fica bem mais legível deste modo para um usuário totalmente perdido que clicou neste link por acidente.

Saiba agora como fazer o seu primeiro XSL em apenas três passos!

Para efeitos de exemplo, irei usar o RSS 2.0, mas o mesmo pode ser feito para Atom, OPML ou qualquer outro XML. Basta ir mudando os nomes dos campos (ou namespaces) que o arquivo XML traz. Para saber o nome dos campos, não tem jeito: tem que abrir o XML no seu bloco de notas favorito e olhar o código.

Importante: Antes de mais nada, você sabe onde está o seu RSS? E como editá-lo? Dependendo do sistema ele não estará disponível para edição. Veja as observações no final deste artigo.

Primeiro passo:

Achando o template do RSS, acrescente a linha em negrito logo no início do código:


<rss version="2.0">
  <channel></channel>></rss>

Esta linha diz que aquele XML irá usar o arquivo XSL rss20.xsl.

Segundo passo:

Crie o arquivo rss20.xsl e cole este exemplo de XSLT:


	xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

Viu que o XSL é quase um HTML comum? Você pode acrescentar o conteúdo que desejar. Recomendo que coloque um link para algum artigo sobre o que é o RSS para usuários leigos, como faz o UOL ou link direto para o Projeto RSSficado.

Tome muito cuidado com a sintaxe do seu código. Qualquer erro no código e o XML pára de funcionar.

Para evitar problemas com o encoding, substitua acentos, cedilhas e quaisquer outros caracteres estranhos por entidades em formato decimal. Você pode obter a lista nas referências do Web Design Group

Terceiro passo:

Crie um arquivo CSS separado para os XSL e o nomeie de xslt.css. Eis uma sugestão:

body {
  font: 9pt Verdana, Geneva, Arial, Helvetica, sans-serif;
  padding: 50px 100px;
  background: url(bg_feed.png) #ffd;
}
p, ul {
  width: 520px;
  padding: 0;
  margin: 0;
}
a, a:visited {
  color: #f60;
}
a:hover, a:active {
  color: #f00;
}
h1 a {
  font: 500 2em Georgia, "Times New Roman", Times, serif;
  text-decoration: none;
}
ul {
  width: 490px;
  margin: 20px 0 40px 30px;
}
li {
  list-style: square;
  font-size: 0.9em;
  margin: 10px 0;
}
#cc {
  font-size: 0.8em;
}

Note que você pode manipular os dados da forma que bem quiser. Use imagens de fundo, fontes coloridas, efeitos de hover e o que mais quiser.

Prontinho! Agora veja o antes e o depois

Tutoriais sobre XSLT:
Observações:
  • MovableType: Todos os feeds podem ser alterados. Veja a seção de Templates do seu blog.
  • WordPress: Os feeds são gerados pelos arquivos wp-rss2.php, wp-rss.php e wp-atom.php que estão na raiz da instalação do WP.
  • Blogger.com: O sistema já possui um template padrão bem amigável, mas não customizável.

Artigos relacionados:

Compartilhe: email Google Bookmarks del.icio.us Facebook StumbleUpon Digg Posterous Twitter

]]> http://s1mone.net/blog/2005/07/tornando-o-rss-mais-amigavel/feed/ 16 Tableless na Webdesign http://s1mone.net/blog/2005/04/tableless-na-webdesign/ http://s1mone.net/blog/2005/04/tableless-na-webdesign/#comments Wed, 06 Apr 2005 17:58:34 +0000 Simone Villas Boas http://s1mone/?p=169 Já está nas bancas a edição 16 da revista Webdesign. A matéria de capa é sobre o desenvolvimento com a metodologia tableless. Colaborei com a matéria juntamente com o Diego Eis e Elcio Ferreira, do site Tableless. A matéria vai bem mais fundo e vê alguns aspectos dos padrões Web e acessibilidade. Corra até seu jornaleiro favorito e peça a sua!

Artigos relacionados:

Compartilhe: email Google Bookmarks del.icio.us Facebook StumbleUpon Digg Posterous Twitter

]]> http://s1mone.net/blog/2005/04/tableless-na-webdesign/feed/ 7 XML e as possibilidades para o usuário comum http://s1mone.net/blog/2005/04/xml-e-as-possibilidades-para-o-usuario-comum/ http://s1mone.net/blog/2005/04/xml-e-as-possibilidades-para-o-usuario-comum/#comments Tue, 05 Apr 2005 20:23:24 +0000 Simone Villas Boas http://s1mone/?p=168 Hoje me empolguei! Esqueci por alguns momentos que estou trabalhando há vários dias sem parar e achei disposição para fazer alguns testes no blog. Semanas atrás instalei o plug-in GetXML para Movable Type para colocar alguns links do del.icio.us. Não satisfeita, publiquei logo uma página inteira para todos os links. Acabei fazendo o mesmo para o blogroll. O que antes era apenas um link para o Bloglines e um download de um arquivo OPML, agora é conteúdo de verdade.

Ando encantada com o XML, confesso. Estou trabalhando com XSLT e senti um pouco as limitações do plug-in. Mesmo assim consegui salvar minhas informações que estavam em outros sites e formatá-los ao meu bel prazer. Tudo tão simples como editar templates de blog. Em outras palavras, dados contidos num arquivo XML podem ser manipulados por um usuário intermediário da Web sem maiores complicações. Pelo menos, aqueles XMLs básicos que são exportáveis por aplicações Web.

Até aí, nenhuma novidade. Estou surpresa é que finalmente a interoperabilidade da Web está de fato deixando a esfera teórica e atingindo os grandes sites. Não falta muito para seja um senso comum que qualquer aplicação Web que não permitir algum tipo de exportação de dados para outra webapp será totalmente obsoleta. O usuário comum pode não perceber conscientemente que aquele dado lhe pertence, mas é uma delícia (leia-se, diferencial) entrar num site como o 43Things e dar o seu login do Flickr. Feito isso, seu perfil é recheado com suas fotos, sem nenhum sofrimento para a carga inicial nem para a manutenção. Orkut e Fotolog já é tão semana passada…

Artigos relacionados:

Compartilhe: email Google Bookmarks del.icio.us Facebook StumbleUpon Digg Posterous Twitter

]]> http://s1mone.net/blog/2005/04/xml-e-as-possibilidades-para-o-usuario-comum/feed/ 2 Guerra de pixels http://s1mone.net/blog/2005/03/guerra-de-pixels/ http://s1mone.net/blog/2005/03/guerra-de-pixels/#comments Sun, 13 Mar 2005 22:51:51 +0000 Simone Villas Boas http://s1mone/?p=166 O CSS House é uma boa referência do que é possível fazer com o CSS. Mas estas demonstrações estão passando das meras demonstrações para o campo das batalhas pixelares. Até aonde se sabe, culpa do Maurício que criou a primeira bandeira feita com CSS. Inspirado nele, Stu Nicols fez a dele. Veja outras bandeiras:

Quem se atreve a criar a bandeira do Brasil?

Links obtidos em post no webgraphics

Artigos relacionados:

Compartilhe: email Google Bookmarks del.icio.us Facebook StumbleUpon Digg Posterous Twitter

]]> http://s1mone.net/blog/2005/03/guerra-de-pixels/feed/ 4 É buguento porque quer? http://s1mone.net/blog/2004/11/buguento-porque-quer/ http://s1mone.net/blog/2004/11/buguento-porque-quer/#comments Mon, 29 Nov 2004 18:23:08 +0000 Simone Villas Boas http://s1mone/?p=153 Após ler artigo “How Microsoft can support CSS2 without breaking the Web“, referenciado no The Web Standards Project, nem precisa ser muito anti-Microsoft para perceber o jogo cruel de Redmond. Segundo uma entrevista citada de Gary Schare, a Microsoft se recusa fazer com que o Internet Explorer dê total suporte ao CSS 2 e outros porque estaria fazendo com que vários websites desenvolvidos para IE deixassem de ser visualizados corretamente. Bobagem, conforme contesta o artigo.

Acredito que é apenas mais uma estratégia para enfraquecer a adoção de navegadores alternativos, mesmo os não open source como o Opera. É muito fácil manter uma guerra dos browsers nos mesmos moldes de 1998 jogando os desenvolvedores uns contra os outros como se fosse uma coisa de gangue sem pensar no usuário. O que não consigo entender é porque continuar com isso? O que a Microsoft lucra com este navegador? Esta guerra até fazia algum sentido no contexto de seis anos atrás, mas hoje chega a ser patético. Competição é saudável para a evolução de tudo na natureza. Só pedimos que seja uma competição civilizada.

Tudo seria tão mais fácil se pensassem mais nos usuários/consumidores que acessam a página da padaria da esquina. Imagina como seria bom se os desenvolvedores baixassem seus custos de produção e ainda pudessem criar um produto de melhor qualidade. Afinal, se diminuir o tempo de produção para manter um site compatvel no IE e nos outros, sobra um pouco mais de tempo para pensar em alternativas para outras mídias e aplicar melhor as técnicas de acessibilidade. Todo mundo lucra! Por que então não dar suporte aos padrões? Não entendo! Não entendo! Grrr!

Veja também:

Artigos relacionados:

Compartilhe: email Google Bookmarks del.icio.us Facebook StumbleUpon Digg Posterous Twitter

]]> http://s1mone.net/blog/2004/11/buguento-porque-quer/feed/ 5 Grupo de discussão http://s1mone.net/blog/2004/11/grupo-de-discussao/ http://s1mone.net/blog/2004/11/grupo-de-discussao/#comments Thu, 25 Nov 2004 14:24:09 +0000 Simone Villas Boas http://s1mone/?p=152 Depois de ler algumas discussões interessantes na lista do WSG e ver que muita gente ainda acha que basta ser tableless para estar nos padrões, imaginei se não podemos tentar de novo as listas de discussão como um ponto de compartilhamento de informação eficiente. Então, criei no Yahoo!Groups a lista Web Standards. Estão todos convidados! 8:*

Faça sua inscrição!

Artigos relacionados:

Compartilhe: email Google Bookmarks del.icio.us Facebook StumbleUpon Digg Posterous Twitter

]]> http://s1mone.net/blog/2004/11/grupo-de-discussao/feed/ 6