Em desenvolvimento web estamos sempre dependendo da máquina do visitante, então estamos na mão do sistema operacional, hardware e principalmente dos navegadores.

Isto normalmente não é um problema, com exceção dos navegadores da Microsoft, que por anos se mostram muito inferiores. (Entenda mais sobre o assunto lendo este post)

Mas finalmente a versão atual do Internet Explorer( versão 8), é aceitável (mas ainda inferior).

Diante desta situação decidimos parar com o suporte a qualquer versão do Internet Explorer que seja inferior ao 8. E para mostrar isto ao usuário nós testamos diversas alternativas como barrinhas em Javascript. Mas como sempre, a alternativa mais simples é a melhor:

Basta colocar o css em seus arquivos de css do layout e o comentário condicional. No meu caso estou sempre utilizando Rails, por isto aparecem os comandos link_to e image_tag, se você estiver usando HTML puro então substitua por <img... e <a href...

As imagens que utilizo (já com a cor de fundo na tonalidade correta) estão abaixo para download:

Logos do Browsers

Também adote e esta empreitada contra a péssima qualidade de serviço apresentada nos navegadores da Microsoft.

Durante anos brigamos com um navegador cheio de bugs e fora dos padrões, o que nos custa milhares em horas de trabalho para deixar tudo compatível com o Internet Explorer 6. Quem sai mais prejudicado? Os visitantes, por terem um serviço medíocre por limitações de compatibilidade!

O problema é que a Microsoft não aprende e está trazendo o mesmo problema para o Outlook (o atual já é um pouco assim), eles confirmaram os planos de usar a engine do Word para páginas HTML ao invés de usar Webstandard.

Então será impossível fazer até um layout simples para newsletters funcionar de forma compatível com vários clientes de email.

Participe do protesto abaixo postando em seus twitters (texto retirado do site (http://fixoutlook.org/):

“Microsoft have just confirmed they plan on using the crippled Word rendering engine to display HTML emails in Outlook 2010.

This means for the next 5 years your email designs will need tables for layout, have no support for CSS like float and position and no background images. Not to mention the long list of bugs and quirks that break the simplest of layouts.

Outlook 2010 is still in beta and Microsoft have confirmed they want to hear your feedback on this decision. It’s time for the email marketing and design community to rally together and encourage Microsoft to embrace web standards before it’s too late.

What’s the best way to do that? Twitter of course.

Visit fixoutlook.org to see how you can help and what the community is saying right now.”

Basicamente é possivel fazer um tooltip sem nada de Javascript, apenas com um link (ou qualquer outra tag que aceite hover) com uma outra tag com display:none (dizendo que não deve ser exibida) que é alterado no hover para display:block.

Muito tem se falado sobre ter recursos como bordas arredondadas, gradients nativos, transparência, reflexo, background duplo, video e aúdio como recursos nativos dos navegadores (sem precisar instalar plugins como Flash ou SilverLight) e de fato boa parte destes problemas serão solucionados com HTML5 e CSS3 porém não adianta nós falarmos de futuro se os browsers não suportarem estas tecnologias. CSS3 já está aí mas ainda não posso utiliza-lo pois os clientes ainda utilizam navegadores antigos e inferiores (leia IE) mas tudo precisa de um tempo de transicição, e também de uma atitude nossa como projetistas web.

Acredito que em pouco tempo já teremos a grande maioria dos browsers suportando CSS3 e HTML5 já que a Microsoft tem tentado correr a trás do prejuízo que vem tendo com sua má fama em navegadores inferiores enquanto Opera, Apple e Mozilla nós já sabemos que continuarão fazendo o bom trabalho de costume.

E é isso que Apple anuncia com Safari4. Apple tem sido um das empresas a dar amplo apoio ao uso do HTML, JS e CSS para criar aplicativos ricos e seu novo Safari caminha para isso (Mozilla também já anúnciou o suporte a HTML5 em versões futuras do Firefox).

Se você tem o Safari4 instalado acesse o link abaixo e olhe o código fonte da página:

http://www.apple.com/safari/welcome/

Dicazinha rápida para quem desenvolve em MAC e utiliza o Firefox mas também gosta do Safari. ( vale lembrar que também temos Safari para Windows )

Algo que pode ser muito díficil de manter estável entre vários browsers são layout líquidos, ou fluid layout se prefererir, algumas vezes 100% pode significar um tamanho no IE e outro no Firefox caso você esteja usando margin e padding, graças as implementações de box model… o problema de usar layout líquido é que ele restringe o uso de imagens até um certo ponto, então layouts com muitas imagens, modelos 3d e etc é melhor optar por layout fixo o que é bem mais simples de desenvolver. Em nossos projetos, normalmente optamos por layout líquido em portais, sites com muito texto ou sistemas.

Se você for utilizar layout líquido, então vale a pena dar uma olhada no atual YUI do Yahoo. Nate Koechley, na minha opnião um dos grandes nomes do Yahoo, tem feito um trabalho bem bacana no YUI (apesar de pessoalmente eu não gostar de frameworks css) e postou em seu blog como utilizar as novas funcionalidades de layout líquido do framework do Yahoo.

Vale a pena conferir.

Existem várias formas para arrendondar coisas no html, mas várias delas podem ser infernais de fazer e de manter através de vários browsers.

Muitos scripts em JS fazem este trabalho (apesar de até hoje não ter encontrado nenhum 100% compatível com o IE6) em divs e outras tags, mas pessoalmente quando o assunto são menus em abas gosto mais de uma solução puramente em HTML e CSS.

Definitivamente spams são um problema terrível nos dia atuais… não pode ser solucionado com leis absurdas e desenvolver um algoritmo para bloqueio é um trabalho monstruoso. Então logo pensamos em soluções de terceiros como o Akismet (muito usado em blogs e formulários de contato em sites) ou captcha que também não é fácil de implementar a menos que utilize soluções como o Recaptcha .

Já falamos sobre editores WYSIWYG aqui no blog, e que até então a melhor solução que eu havia encontrado era o NicEdit, ainda é muito bom e continuamos usando em nossos projetos.

O problema que ele também tem suas gambiarras no fonte e não é nada fácil de customizar.

Passando pelo mesmo perrengue sobre WYSIWYG’s o pessoal da 37Signals anunciou hoje o WysiHat no blog da empresa.

É um projeto focado em ser um editor WYSIWYG com código limpo, sem gambiarras e fácil de alterar tanto layout quanto código.

O editor é baseado no Prototype e pode ser integrado com Rails de forma muito simples. O projeto ainda encontra-se em desenvolvimento mas já é funcional e você pode usa-lo em seus projetos, basta fazer um clone do repositório no Github ou baixar o zip (ou tar) caso você ainda não utilize GIT.

Você também pode contribuir para o desenvolvimento usando o GitHub.

Abaixo coloquei um trecho de código de como utiliza-lo na sua forma mais simples:

1
2
3
4
5
6

  Event.observe(window, 'load', function() {
    var editor = WysiHat.Editor.attach('content');
    var toolbar = new WysiHat.Toolbar(editor);
    toolbar.addButtonSet(WysiHat.Toolbar.ButtonSets.Basic);
  });

Mais exemplos podem ser encontrados no projeto do GitHub.

É apenas um helper para utilizar arquivos swf em seus projetos Rails através da lib SWFObject, que é quase que o padrão para embutir swf em seus documentos html.

Essa API de ajax do Google funciona como um repositório para os principais frameworks de JS, inclusive o Prototype e Scriptaculous (boa notícia para nós do Rails). Agora ao invés de cada projeto ter seu framework de js na pasta do servidor do respectivo projeto você poderá usar os frameworks que estão no server do google.

Se você precisa apenas que seus usuários possam colocar palavra em negrito, itálico, alinhar as coisas, criar listas e links este editor é ideal. Então a dica deste post é o NicEdit que para nós tem sido excelente.