RamonPage.com . Web na ponta do lápis » XHTML http://ramonpage.com arte, desenvolvimento, design, programação, webstandards, acessibilidade, usabilidade, tipografia, UX, UI, IA Tue, 15 May 2012 17:44:02 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Eu no Be on the Net http://ramonpage.com/2008/12/14/eu-no-be-on-the-net/ http://ramonpage.com/2008/12/14/eu-no-be-on-the-net/#comments Mon, 15 Dec 2008 01:14:56 +0000 RamonPage http://ramonpage.com/?p=144 Neste mês de dezembro, desenvolvi um template para fazer parte da galeria do Be on the Net. Clientes podem escolher dentre os templates disponí­veis para utilizar no seu portal.

A grande problemática do projeto foi o tempo, pois dispunha de um prazo pequeno para implementação. Mesmo assim, o pessoal da Improve It foi bem solícito e tivemos uma boa sinergia no andamento do trabalho.

Por fim, nasceu o template “mosaico”, com uma paleta de cores mesclada entre o azul e o marrom.

Em breve, mais novidades minhas no Be on the Net. :)

]]> http://ramonpage.com/2008/12/14/eu-no-be-on-the-net/feed/ 1 HTML5 e o outro lado da moeda http://ramonpage.com/2008/09/23/html5-e-o-outro-lado-da-moeda/ http://ramonpage.com/2008/09/23/html5-e-o-outro-lado-da-moeda/#comments Tue, 23 Sep 2008 04:46:12 +0000 RamonPage http://ramonpage.com/?p=82 Para você que leu meu último post sobre HTML5 e encarou com estranheza a idéia de que só em 2022 ele estará definitivamente “pronto para uso”, alguns pontos importantes precisam ser esclarecidos. Saiba quais são eles.

1. Compatibilidade dos browsers

A expectativa é de que em 2009 (data programada para um novo rascunho) o HTML5 já esteja suportado na maioria dos browsers modernos, mas não por completo.

Assim como a guerra dos browsers propõe, cada browser deve se basear primeiramente naquilo que lhe convém. Dentro deste tema, será interessante ver a abordagem das tags <audio> e <video> que certamente implicarão em interesses pessoais de Microsoft (Media Player) e Apple (QuickTime).

2. Implementação incompleta

Veja uma pequena lista de implementações catalogada pelo pessoal do whatwg, cujo trabalho é voltado exatamente no HTML5.

Veja outra lista no wikipedia. O Opera Browser (Presto Engine), como já é de se esperar, tem o melhor suporte até então.

3. Cultura

Passamos um bom tempo até chegarmos numa web satisfatória (mesmo que numa percentagem pequena ainda). Poucos anos atrás, não existia a preocupação nos desenvolvedores em manter a marcação de seus sites organizada, que dirá pensar em standards: era perda de tempo demais!

Agora, nos deparamos com uma nova realidade, já que até quem trabalha com XHTML 1.x poderá se converter para o HTML5. Mas, será que os desenvolvedores querem mesmo isso? Esse ponto é importantíssimo para aqueles que correlacionam padrões web apenas com XHTML. Ledo engano.

John Resig, aquele do Jquery, escreveu no início do ano sobre uma forma prática de implementar sempre o mais recente DOCTYPE nas marcações. Essa técnica será válida para o HTML5. Assim, os desenvolvedores poderiam continuar com seu HTML4 e ir adicionando funcionalidades ao longo do tempo — de acordo com a compatibilidade dos browsers — dentro da marcação HTML5. Como o DOCTYPE não define a versão da marcação, ele sempre procurará corresponder à mais recente encontrada.

O código é simples:

<!DOCTYPE html>

Essa seria uma forma interessante de comerçarmos a nos acostumar com o HTML5.

Conclusão

Apesar de existir um longo caminho até o HTML5 substituir completamente o HTML4, estamos próximos de conseguirmos utilizá-lo aos poucos, já com certa compatibilidade de recursos nos browsers. De qualquer forma, penso que a “cultura” que trato neste artigo está diretamente ligada à previsão de 2022 tratada no artigo anterior, visto que certamente haverá um bom tempo até que alguma parte dos desenvolvedores/webdesigners se conscientizem da nova realidade. Vale lembrar que tínhamos bom suporte à HTML standard há muitos anos (mais de uma década) e só agora, desde poucos anos atrás, nos tocamos disso. :P

]]> http://ramonpage.com/2008/09/23/html5-e-o-outro-lado-da-moeda/feed/ 1 Preparando seu design para um realinhamento http://ramonpage.com/2007/04/01/preparando-seu-design-para-um-realinhamento/ http://ramonpage.com/2007/04/01/preparando-seu-design-para-um-realinhamento/#comments Mon, 02 Apr 2007 01:50:31 +0000 RamonPage http://ramonpage.com/2007/04/01/preparando-seu-design-para-um-realinhamento/ Já dizia Cameron Moll:

Good Designers Redesign, Great Designers Realign.

Então vai a pergunta: como se tornar um “grande designer” sem redesenhar?

Ser designer com um Q a mais

Quando falamos de profissionais de internet, sempre nos deparamos com certas questões que dificultam a definição de certas profissões. E quando falamos da relação Web designer ↔ Web Developer as definições se confundem ainda mais, visto que tais denominações são de profissões completamente complementares.

Montando legoPara ser um web designer preparado para realinhar sites, o primeiro passo, inevitavelmente, é saber se situar diante de uma estrutura de marcação, o que seria, inicialmente, uma atribuição de um web developer.

Eu separaria a estrutura de um site em dois tipos de design: o design interno e o externo.

Entendendo o design interno e externo

Design interno seria toda a cara que é dada à estrutura de marcação do site (XHTML + CSS). Tão importante quanto o design externo, é no design interno que acredito ser possível fazer um site ser realmente usual.

Para ser um “grande designer” (para web) não há como fugir dos conceitos de desenvolvimento, já que sem eles, acabamos por nos tornar meros desenhistas de “folders digitais”.

Tomemos como base o CSS Naked Day, uma iniciativa que visa disseminar a boa prática da semântica na web. A idéia é que se um site tiver um bom “design interno”, mesmo sem nenhuma estilização externa, terá uma boa apresentação visual, com todas as seções no devido lugar.

O design externo, por sua vez, entra para dar a beleza ao site e ser responsável pela externalização das funcionalidades do mesmo. Aí entram fatores de usabilidade, acessibilidade e tudo mais.

Organizando um design interno

A chave de tudo é uma boa estrutura de marcação. Resumidamente, isso inclui:

  • Utilização dos headers <h1> a <h6> para definição de títulos;
  • Separação de seções (cabeçalho, corpo e rodapé, por exemplo) de conteúdo com <hr />;
  • Não utilizar imagens no corpo da marcação para definir design. Deixe todas as imagens de layout para o CSS.

E por aí vai…

Como realinhar

Tendo uma boa marcação montada, realinhar se torna uma prática simples, porque tiramos do processo aquela cara de retrabalho que um redesign dá.

O realinhamento é um trabalho versátil, já que precisa, somente, de uma nova estilização (CSS) e das imagens do novo design. Nada na marcação precisa ser mudado1.

1 - É importante lembrar que, dependendo da grandeza da renovação, alguns componentes precisam ser inseridos na marcação do web site, mas nem por isso precisamos nos esquecer das boas práticas para se ter facilidade num realinhamento.

Conclusão

O prática do realinhamento mostra mais uma razão para o web standards ser tão importante para o desenvolvimento de soluções para web. Ao usarmos web standards, realinhar se torna como criar templates. Temos todas as peças na mão, bastando-nos, apenas, colocá-las nos lugares que o novo design pede.

É como brincar de lego. :P.

]]> http://ramonpage.com/2007/04/01/preparando-seu-design-para-um-realinhamento/feed/ 0 O vício dos divs http://ramonpage.com/2006/05/31/o-vicio-dos-divs/ http://ramonpage.com/2006/05/31/o-vicio-dos-divs/#comments Wed, 31 May 2006 05:38:28 +0000 RamonPage http://ramonpage.com/?p=5 Para quem está iniciando no mundo do tableless, nada melhor do que pensar nos seus layouts completamente sem tabelas. Mas isso pode se tornar um vício, e um recurso que pode e deve ser utilizado em XHTML acaba entrando no esquecimento.

Pensando nisso, um dos meus últimos projetos foi efetuado completamente sem tabelas (até para textos tabulados). O resultado foi interessante, mas ainda assim não foi possível chegar à todos os recursos (como larguras flexíveis) que as tabelas proporcionam. Caso eu fosse tentar me aventurar nisso, com certeza perderia um pouco de tempo, em vão.

Darei um exemplo. Ele funciona bem no IE, Opera e Firefox (ou firer0x, apelido carinhoso).

O código

Definindo as colunas e células da nossa “tabela”.

Definindo o título:

  1. <div class="row-order">
  2. <div class="col-title-1">Código</div>
  3. <div class="col-title-2">Produto</div>
  4. <div class="col-title-3">Quantidade</div>
  5. </div>

Definindo o conteúdo:

  1. <div class="row-order">
  2. <div class="col-1">102</div>
  3. <div class="col-2">Arroz</div>
  4. <div class="col-3">1kg</div>
  5. </div>

Definindo o CSS:

  1. #content .row-order {
  2. width: 500px;
  3. background: #fff;
  4. margin: 0;
  5. border-bottom: 1px dotted #c7c7c7;
  6. }
  7. /**/
  8. #content .row-order .col-title-1 { /* Título tabela - primeira coluna */
  9. display: table-cell;
  10. margin: 0;
  11. padding: 10px;
  12. width: 60px;
  13. background: #f1f1f1;
  14. font-weight: bold;
  15. color: #0678b3;
  16. border-left: 1px solid #fff;
  17. }
  18. /**/
  19. * html #content .row-order .col-title-1 { /* Título tabela - primeira coluna (hack IE) */
  20. display: list-item;
  21. float: left;
  22. }
  23. /**/
  24. #content .row-order .col-1 { /* Conteúdo tabela - primeira coluna */
  25. display: table-cell;
  26. margin: 0;
  27. padding: 10px;
  28. width: 60px;
  29. border-left: 1px solid #fff;
  30. }
  31. /**/
  32. * html #content .row-order .col-1 { /* Conteúdo tabela - primeira coluna (hack IE) */
  33. display: list-item;
  34. float: left;
  35. }
  36. /**/
  37. /* E assim sucessivamente até chegar até a terceira coluna respeitando o tamanho total de 500px para cada célula da tabela. Ou seja: com três colunas, divida os 500px em três como desejar.*/

Esta técnica dá certo, porém vejam o trabalho para a construção de toda a marcação, além do inconveniente do uso dos hacks para IE. Todas as colunas posteriores à primeira precisarão de ajustes via hack para ficarem com seu tamanho similar ao apresentado em outros browsers.

A solução

Na realidade não é bem uma solução, já que, ao meu ver, deve ser a forma correta de marcação. Fica como uma conscientização, então. Lá vai:

  1. <table>
  2. <caption>Minha tabela de produtos</caption>
  3. <thead>
  4. <tr>
  5. <th>Código</th>
  6. <th>Produto</th>
  7. <th>Quantidade</th>
  8. </tr>
  9. </thead>
  10. <tbody>
  11. <tr>
  12. <td>102</td>
  13. <td>Arroz</td>
  14. <td>1kg</td>
  15. </tr>
  16. </tbody>
  17. </table>

Para este trabalho, uma simples tabela de três colunas resolveria o problema. E melhor: sem grandes truques de CSS. Tabelas servem para isso! Use-as para isso!

]]> http://ramonpage.com/2006/05/31/o-vicio-dos-divs/feed/ 5