A equipe do Netscape DevEdge realizou um redesign completo, em um período de tempo relativamente curto, para mostrar como CSS avançado e XML podem ajudar desenvolvedores web em sua saga de criar sites cross-browser baseados nos padrões W3C (Web Standards). Entre outras coisas, o novo site tem a finalidade de demonstrar:
Embora esse seja um tópico sobre o qual a equipe tem dialogado freqüentemente, fomos definitivamente inspirados pelo trabalho que Douglas Bowman fez no redesign do site da Wired em outubro de 2002. (Você pode encontrar mais informações em nossa entrevista com Douglas Bowman). De certa forma, o que estamos fazendo aqui é uma tentativa de deixar o site DevEdge como um exemplo de última geração do que pode (e não pode) ser feito com markup limpo e visual definido por CSS.
Quando nos decidimos por dar este passo, tinhamos alguns objetivos básicos em mente. Eles eram:
No estágio atual, nós atingimos quatro dos nossos seis objetivos, sendo que quase chegamos em cinco. Os dois que não atingimos foram a utilização de XHTML 1.0 Transitional e a redução do tamanho das páginas.
Por que não estamos utilizando XHTML? Principalmente porque alguns dos nossos conteúdos antigos foram feitos utilizando-se HTML 4.x, e consideramos que o esforço de converter todo o conteúdo não valeria a pena. Ao invés disso, decidimos utilizar HTML 4.01 Transitional. Note que do lançamento do novo site nem todas as páginas validam segundo HTML 4.01 Transitional, em grande parte graças ao conteúdo legado já mencionado. Nós planejamos limpar esse conteúdo legado com o tempo e eventualmente ter um site que valide do início ao fim.
Nosso objetivo de redução do tamanho das páginas foi bem ambiciosa, e apesar de termos chegado perto, quase não reduzimos metade. Isso ocorreu parcialmente porque nós tinhamos um markup relativamente leve no nosso design anterior; apesar de usarmos tabelas para o layout, elas eram simples e já as tínhamos reduzido ao máximo possível. Se você verificar somente o markup do modelo, que é o markup que aparece em todas as páginas, nós teríamos chegado a uma redução de 50% se não tivéssemos feito nossa navegação muito mais abrangente. Mais a respeito em um momento.
Aqui estão algumas das novas vantagens que você pode verificar:
Para mostrar o quão fácil sites podem oferecer um look and feel controlado pelo usuário, nós decidimos utilizar um "seletor de estilos" que permitiria que usuários escolhessem um dentre quatro temas visuais e que também permitisse mudar o tamanho do texto. O código JavaScript básico para isto foi baseado no Paul Snowden's switching script, no entando foi incorporado um conjunto de mudanças. Embora tenhamos considerado originalmente uma ferramenta de customização um pouco mais complexa que permitisse que usuários pudessem definir estilos de cores arbitrários para vários elementos na interface, no final decidimos por manter as coisas relativamente simples. A customização avançada poderá ser implementada no futuro.
Quando você escolhe um tema, suas preferências são salvas em um "cookie" chamado
nde-style. Da mesma maneira poderia ser simplesmente oferecido a funcionalidade de oferecer customização de estilos para seções do site. É também possível a criação de estilos que possam rearranjar completamente o layout visual do site segundo a preferência do usuário.
O mesmo mecanismo básico é utilizado para relembrar o tamanho do texto, a diferença é que o "cookie" neste caso é chamado nde-textsize.
É fácil falar sobre os benefícios dos menus cross-browser, mas quando se introduz conceitos de CSS avançado, nota-se que é desafiador dar suporte para navegadores antigos que têm suporte reduzido aos W3C Standards. Tentamos várias vezes a utilização de menus em "CSS puro" versus menus mais tradicionais feitos em JavaScript. No final, a equipe do DevEdge combinou CSS avançado com JavaScript para criar uma solução híbrida onde os menus abrem elegantemente tanto em navegadores baseados no Netscape Gecko quanto no Internet Explorer e no Opera.
E o melhor, o código markup do menu é baseado em listas aninhadas não ordenadas, o que mantém o markup leve e estruturado para navegadores não-visuais e dispositivos alternativos como celulares ou navegadores de dispositivos palm. Ao fazer isto, a equipe do DevEdge se inspirou na demonstração "pure CSS menus" localizada em css/edge, e os menus DHTML disponíveis em gazingus.org, embora tenhamos adotado nossa própria abordagem na implementação. Isto nos permitiu criar facilmente menus com fácil capacidade de mudança de estilo visual e que funcionam em diversos navegadores usando muito pouco código JavaScript. Melhor ainda, o CSS e o código JavaScript são feitos de tal maneira, que se o JavaScript estiver desabilitado, os menus continuarão funcionando nos navegadores que estão em conformidade com CSS2. Aprenda à partir de nossas experiências e veja como seu site pode se beneficiar reusando este código.
Um dos grandes objetivos do esforço de redesign foi deixar o DevEdge ainda mais acessível do que ele tem sido em suas encarnações anteriores. Para tornar isto possível, a equipe de design decidiu logo de início que o site deveria ter seu layout definido através de posicionamento CSS. Isto permitiu que os documentos fossem estruturados de uma forma que fizesse sentido para dispositivos de acesso linear (como leitores de tela) e ao mesmo tempo permitindo um design visualmente rico.
Por exemplo, em navegadores modernos, as caixas de "procura" e "temas" ficam posicionadas uma do lado da outra. Se você olhar na fonte do documento, a área de procura é parte do cabeçalho principal do site e aparece próximo do início do documento, enquanto a área "temas" é a última coisa antes do rodapé da página. De maneira similar, a barra de navegação que aparece logo abaixo do cabeçalho, no topo da página, aparece na realidade abaixo do conteúdo da página na fonte do documento.
Devido ao fato de que a aparência do site é quase totalmente independente da ordem do conteúdo no documento, o DevEdge agora é muito mais amigável com navegadores wireless e outros dispositivos alternativos de navegação que não utilizam CSS. Além disso, o layout do site pode ser rearranjado sem que seja necessária nenhuma mudança no markup-- preservando os benefícios de acessibilidade não importando quais estilos são usados para criar a aparência visual do site.
Adicionalmente também foi incluído um experimento para simplificar a experiência do usuários, onde estilos CSS amigáveis para a impressão são automaticamente aplicados quando se imprime um artigo. Na impressão, hiperlinks contídos no corpo do documento são mostrados com a URL correspondente ao lado do texto do hiperlink, dando assim mais significado aos hiperlinks impressos.
O redesign inclui também um conjunto de outras melhorias menos visíveis:
Apesar destas mudanças não terem grande impacto direto na experiência do visitante, elas deixam bem mais fácil para a equipe do DevEdge manter o site rodando suavemente e deixar a informação que provemos mais diversa e útil para os visitantes.
Teoricamente, qualquer navegador pode acessar o site DevEdge. Em termos visuais, entretanto, o site utiliza técnicas que funcionam nos navegadores mais recentes que possuem maior suporte aos W3C Standards. Em qualquer user agent, o conteúdo do site deve estar completamente disponível para o usuário. O layout em CSS foi construído de forma que os seguintes navegadores e plataformas pudessem tirar proveito das características avançadas do site.
Preferências: Você terá que habilitar cookies e JavaScript para experimentar o efeito completo dos vários benefícios, em especial os temas do site. Sem JavaScript habilitado, você ainda pode navegar normalmente utilizando os índices de cada seção ou o menu CSS, que funciona no Netscape 7+ e Mozilla 1+.
Nota: Devido a problemas conhecidos em navegadores ou falta de conformidade com padrões W3C, você poderá encontrar alguns probleminhas. Além de querer priorizar padrões modernos, decidimos não otimizar para Netscape 4.x simplesmente porque temos visto uma drástica redução do número de visitantes usando 4.x, graças à popularidade do Netscape 7.x. Usuários do Netscape 4.x ainda receberão o conteúdo do site, mas não o estilo visual.
Apreciamos seu feedback caso você verifique que o site funciona bem em outros navegadores ou plataformas não listados aqui, ou qualquer sugestão de correção que irá aperfeiçoar o comportamento cross-browser do site.
Aprenda mais sobre CSS e o código JavaScript por debaixo do Netscape DevEdge, assim como nosso processo de tomada de decisão durante a construção do site.