Tutoriais de HTML e CSS

Patrick Griffiths, especialista em HTML e CSS desde 1999, é autor dos ótimos tutoriais de HTML e CSS que mantém no site HTML Dog. O trabalho de Griffiths com o site também resultou no livro HTML Dog: The Best Practice Guide to XHTML and CSS, publicado pela New Riders (nov/2006, ISBN: 0321311396).

Ao longo de 2008, o jovem Elomar França fez um igualmente ótimo e útil trabalho traduzindo para o português os tutoriais de HTML e CSS do HTML Dog, trabalho que publicou em artigos de seu blog Codando. Eu já havia citado o trabalho de Elomar em março deste ano.

Patrick e Elomar merecem sinceros agradecimentos por suas contribuições à comunidade de desenvolvedores web. Segue abaixo a relação dos tutoriais, com referências para as traduções de Elomar no blog Codando e os originais em inglês de Patrick no site HTML Dog.

HTML

CSS

Tutoriais de HTML e CSS

Elomar França, de Natal, RN, está fazendo em seu blog um trabalho super legal e útil de tradução dos tutoriais do portal HTML Dog para o português.

Em ritmo de um post por capítulo, na segunda quinzena de fevereiro ele traduziu o Tutorial Iniciante de HTML. E no início de março já veio todo o Tutorial Iniciante de CSS.

O portal HTML Dog ainda oferece mais quatro tutoriais, nos níveis Intermediário e Avançado para HTML e CSS, que Elomar promete traduzir. Parabéns pela iniciativa e pelo trabalho excelentes, Elomar!

Arquitetura de software, NetBeans, AJAX, padrões web

Eis uma coletânea de artigos interessantes relacionados a Arquitetura de Software, NetBeans, AJAX e padrões web, que visitei nos últimos dias e recomendo.

Arquitetura de software

Immutable Design Pattern, por Faisal Feroz, Paquistão, 2007-12-21. Comenta o Immutable, um dos muitos padrões de desenho/projeto, uma disciplina essencial da arquitetura de software.

Mais um bom tutorial no IBM developerWorks: Write REST services — Create REST services with Java technology and the Atom Publishing Protocol, por J. Jeffrey Hanson, CTO, Max International, 2007-10-30, atualizado em 2007-12-20. Como já citei em outros artigos, é necessário registrar-se gratuitamente no portal IBM developerWorks para acesso ao tutorial. A propósito, a IBM foi considerada a melhor empresa mundial em Pesquisa & Desenvolvimento, pela R&D Magazine.

Arquitetura Orientada a Serviços (SOA) tem sido tema constante nos blogs de alguns colegas “feras” em arquitetura de software, como destaco a seguir. Você sabe o que é SOA?, 2007-12-18; e outros artigos de Ricardo Ferreira sobre SOA e BPM. Papéis no Ciclo de Desenvolvimento SOA, 2007-12-01; duas apresentações em PDF que já citei; e outros artigos de Marco Aurélio Mendes sobre Arquitetura/SOA e BPM. Para se aprofundar no tema, recomendo os cursos de Ambientes Integrados (SOA, BPM, ESB, EAI) na Archware, Belo Horizonte, MG.

NetBeans IDE 6.0

Matthew Schmidt anunciou NetBeans 6: Matisse Updates, 2007-12-14, uma nova apresentação com demonstração e áudio (Flash), por Roman Strobl do Time NetBeans, demonstrando o novo construtor de interfaces gráficas de usuário (GUI) Swing Matisse do NetBeans IDE 6 e seu suporte a JSR-295 (bean binding).

Roman Strobl também divulgou em seu blog First version of NetBeans Scala plug-in available, 2007-12-21. Caoyuan Deng, o criador do ErlyBird, IDE para Erlang baseado no NetBeans, fala sobre sua nova iniciativa, Primeiro suporte experimental a Scala em NetBeans, 2007-12-21.

NetBeans 6.0 Cheat Sheet, por Jason, 2007-12-11. Resumo de atalhos de teclado do NetBeans IDE 6 para desenvolvimento Ruby on Rails, em PC Linux/Windows e Mac OS X, disponível para download em formatos PDF e ODT (OpenDocument).

Tim Boudreau citou em seu blog NetBeans Editor Demo video, 2007-12-21, um vídeo em YouTube que alguém gravou de sua apresentação em Florianópolis, SC, sobre os recursos do editor do NetBeans IDE 6.0.

Ajax e padrões web

Criando uma lista na sessão com DWR – Parte 3, por Handerson Brito Frota – WEB2.0, 2007-12-21, mostra que tipos de métodos criar no FacadeAjaxSession explicado na Parte 2, 2007-12-16. A Parte 1 desta série de artigos havia apresentado conceitos iniciais sobre uso de Sessão com o popular framework AJAX DWR. Veja mais sobre bibliotecas e frameworks Ajax e JavaScript em meu artigo Ajax em Java – coletânea de referências.

Carol McDonald divulgou os Slides e exemplos da sua apresentação de Dojo 1.0, 2007-12-21, disponíveis para baixar em Sun Tech Days Code. Dojo Toolkit é uma biblioteca Ajax muito popular.

Prototype e Scriptaculous compactados, por Jota, 2007-12-21, divulga que John-David Dalton gerou versões bastante compactadas das duas populares bibliotecas JavaScript/Ajax, disponível para baixar em prototype-core, Google Groups. Segundo Jota, o trabalho de Dalton reduziu o tamanho ocupado pela biblioteca Prototype 1.6.0 de 122 para 20,4KB, e Script.aculo.us 1.8.0 de 124 para 19,7KB.

Outra dicas interessantes de Jota são Gifs, animações para o efeito loading em Ajax, 2007-12-20, e Dicas por Yahoo como criar aplicações Ajax com alto desempenho, 2007-12-22: Slides (Flash, em SlideShare), Vídeo e PPT (em YUI Blog) da apresentação “High Performance Ajax Applications”, por Julien Lecomte, autor do YUI Compressor e do YUI Browser History Manager.

Andres Almiray, engenheiro de software da Oracle, anunciou o Lançamento da biblioteca Json-lib 2.2 (2007-12-20) e destaca Json-lib examples (2007-12-21), uma nova página do projeto listando diversos exemplos rápidos (snippets) de situações de uso da biblioteca. Json-lib é uma biblioteca Java para transformar beans, mapas e XML para JSON e de volta para beans e DynaBeans. Json-lib é baseada no trabalho de Douglas Crockford em JSON in Java. JSON (JavaScript Object Notation) é um formato leve para intercâmbio de dados. Embora baseado em JavaScript (ECMA-262 3ª Ed.), JSON é independente de linguagem.

Henrique C. Pereira, designer de interfaces, comentou em seu site pessoal Revolução Etc: IE8 passa no teste do Acid2, 2007-12-20. O feito foi divulgado em Internet Explorer 8 and Acid2: A Milestone, por Dean Hachamovitch, Gerente Geral do Internet Explorer, Microsoft, 2007-12-19, em IEBlog. Ainda é sobre um build interno de desenvolvimento do IE8 e há controvérsia sobre o resultado. Mas a notícia parece tentar reaquecer a guerra de browsers, exatamente quando a Fundação Mozilla acaba de liberar o Beta 2 do novo Firefox 3, em 18 de dezembro. O Firefox 3 passa no teste Acid2 desde o Beta 1 (2007-11-20). Nos últimos dois anos, o bem-sucedido Firefox vem sendo cada vez mais usado, atualmente dominando 1/4 a 1/3 de um segmento que já teve perto de 95% de domínio do IE (~ 2004).

Acid2 é um teste criado pelo Web Standards Project para avaliar o suporte dos navegadores Internet a padrões web. A página testa quão próximo do ideal um navegador Internet exibe de uma carinha “smiley” criada com diversos recursos de layout/posicionamento de acordo com padrões de HTML, CSS, PNG e Data URLs. Veja também Acid2 na Wikipedia.

Cezar Taurion, Gerente de Novas Tecnologias da IBM Brasil, faz reflexões e previsões sobre Web 2.0 em 2008, 2007-12-19, em seu blog.

Fecho o tema de padrões web com a divulgação do Lançamento do Livro do Maujor, por Maurício Samy Silva (Maujor), “O dinossauro das CSS”, 2007-11-18. O livro é: Construindo Sites com CSS e (X)HTML — Sites controlados por folhas de estilo em cascata.

Artigos e tópicos interessantes para desenvolvedores

No portal IBM developerWorks, está sendo publicado um tutorial em três partes sobre desenvolvimento para web com o Eclipse Europa, usando Java, PHP e Ruby; por Michael Galpin, Desenvolvedor do eBay.

A terceira parte, sobre Ruby, deve sair breve saiu dia 18. Para acessar o conteúdo do tutorial, é necessário registrar-se gratuitamente no portal IBM developerWorks.


Outro artigo muito interessante, para quem está considerando suas opções de infra-estrutura para aplicações Java EE na web. JBoss, Geronimo, or Tomcat? — Três servidores de aplicação Java open source comparados, por Jonathan Campbell, JavaWorld.com, 2007-12-11. Só faltou cobrir também GlassFish.


O recente artigo An easy way to make your code more testable, no blog Programblings, me levou a outro artigo excelente.

We don’t write tests. There just isn’t time for luxuries, por James Golick, um desenvolvedor de softwre em Montreal, 2007-08-28. Golick, com argumentos objetivos passo a passo, contesta a afirmação que muito se houve de desenvolvedores ou times de software: “Não escrevemos testes ou fazemos cobertura de testes porque não temos tempo.” ou “Escrever testes toma tempo demais.”

Todo desenvolvedor precisa testar seu código, de alguma forma. A diferença é que alguns escrevem testes automatizados, enquanto outros usam humanos (normalmente, o próprio desenvolvedor) para verificar o comportamento correto. Então, o argumento “testar-nos-atrasa” reside na premissa que verificação manual é mais rápida que escrever testes automatizados.

Assim começa o raciocínio que se desenvolve ao longo do inteligente artigo. Leia e veja se você também concorda que a prática de testes automatizados pode ser bem produtiva.

Se práticas de desenvolvimento de software interessam a você, então sugiro ler também os artigos Pair Programming vs. Code Reviews, por Jeff Atwood, 2007-11-18; e Pair Programming vs. Code Reviews – It’s a no Brainer, por Mark Levison (Ottawa, Canadá), 2007-12-14. Eles confrontam programação em pares e revisão de código.


Conforme anúncio no Javalobby, acabou de ser lançada em dezembro a nova certificação Sun Certified Programmer for the Java Platform, Standard Edition 6 (CX-310-065) da Sun.

SCJP é a certificação de programação na linguagem Java, a mais fundamental no caminho de Certificações Sun para a Tecnologia Java. É também uma certificação bem reconhecida no mercado de trabalho. A nova versão do SCJP atualiza o programa da para cobrir Java SE 6.0.

Para saber mais:


Entrando na programação de páginas web, vale a pena ler The Problem With innerHTML, por Julien Lecomte, 2007-12-12.

E do HTML para o CSS. A escala graduada de 1 a 6 para Rate Your CSS Skill Level: Final Version & Poll montada pelo portal CSS-Tricks oferece critérios para você avaliar em que nível está sua habilidade com CSS. Minha auto-avaliação foi de 4. Para atingir 6, você tem que estar em estado graça ou ser membro da especificação no W3C. 😀


Da programação para os utilitários nerd. Hoje descobri algo interessante para quem às vezes lida com a linha de comando no Windows. Windows PowerShell. Esta janela de console melhorada virá no Windows Server 2008, mas qualquer usuário de Windows original (com a devida validação WGA) pode baixar gratuitamente da Microsoft.

Download Windows PowerShell 1.0PowerShell 1.0 para Windows XP Português do Brasil (KB926140).

Documentação: Windows PowerShell Documentation Pack (para baixar, em inglês e outros idiomas).

Já para quem conhece e sente falta dos comandos do Linux ao usar a linha de comando do Windows, recomendo meu velho conhecido GnuWin32, projeto em SourceForge que porta pacotes de utilitários GNU/Posix para Windows nativo (usando MinGW). O projeto disponibiliza centenas de pacotes binários, em arquivos ZIP para baixar.

Recomendo obter a ferramenta GetGnuWin32, que traz um script que baixa/atualiza todos os pacotes mais recentes do GnuWin32, e outro que descompacta todos os pacotes em uma pasta gnuwin32. Depois é só copiar/mover essa pasta para onde achar mais adequado (por exemplo, C:\ ou C:\Arquivos de programas\) e adicionar gnuwin32\bin ao PATH. Feito isso, grep, find, sed, tar, diff e mais quase mil outros comandos estarão disponíveis na linha de comando do Windows (inclusive na PowerShell).


Por falar em Linux, uma última nota. O IDG Now! noticiou que as Urnas usarão Linux em eleições de 2008.

O TSE autorizou a substituição dos sistemas operacionais VirtuOS e Windows CE para o sistema aberto Linux, adaptado pelo próprio órgão, em todas as 430 mil urnas eletrônicas usadas nas eleições de 2008, que escolherão prefeitos. Segundo o Tribunal, o objetivo é conferir mais transparência e confiabilidade à urna e ao processo eleitoral.

Design limpo e direto na nova home-page Globo.com

Estreou hoje a nova home-page da Globo.com.

Nova home-page da Globo.com

Partindo do design e da arquitetura da informação pautados pela objetividade e pela simplicidade que já vinham sendo trabalhados no portal de notícias G1, a nova página inicial da Globo foi ainda além.

O novo design é extremamente limpo e direto. Uma organização em apenas três categorias principais, que também determinam as três cores e as três colunas principais de conteúdo: Notícias, em vermelho, Esportes, verde, e Entretenimento, laranja. Demais elementos gerais seguem a cor azul.

Pouquíssimos adereços. Fundo branco. Imagens, só em fotos e banners. E o HTML é totalmente “tableless”, sem uso de tabelas para layout. E CSS amplamente usado com maestria.

O estilo é tão objetivo que muita gente pode entrar e ter a primeira impressão: “nossa, parece que está faltando alguma coisa!” Mas é porque sobra conteúdo.

Destaque também para as listagens das matérias mais lidas e dos termos mais buscados, dando maior retorno interativo ao interesse dos usuários.

Veja também o vídeo Conheça a nova home da Globo.com! (1,5 min), onde a equipe de criação web da Globo.com apresenta a nova página e explica sua concepção.

A busca da objetividade da Globo.com me faz lembrar do vídeo Acessibilidade Web: Custo ou Benefício?, um excelente documentário (12 min) sobre acessibilidade na web, produzido por Acesso Digital (em Google Video, 2007-05-24).

No documentário, uma página da Globo era um dos primeiros contra-exemplos tomados quanto à acessibilidade. Ao buscar a objetividade, o novo design é também um grande avanço rumo à melhoria da acessibilidade. Para melhorar mais, poderia ter logo no início um link do tipo “Ir direto para conteúdo”, levando a uma âncora para o miolo do conteúdo; isso auxilia muito a navegação por deficientes visuais e motores.

Para fazer uma pequena medição da leveza em termos de tráfego de rede, utilizei o Net view do FireBug. Vi que a nova home da Globo.com necessita, para carregar tudo, de 48 requisições (arquivos) e 205KB. A título de comparação, a página inicial da Folha Online gasta 78 requisições para ser composta e totaliza 393KB. Já a do Estadão consumiu vultosos 123 requisições e 868KB.

Parabéns à Globo.com pela ousadia na busca da evolução!

Para saber mais:

Coletânea de referências AJAX atualizada

A partir do artigo recente ABCs of RIA da InfoWorld, encontrei uma série de outros bons artigos sobre Ajax, RIA e Web 2.0 nos portais InfoWorld e Network World, da Rede IDG.

Destas referências, descobri mais frameworks e produtos software livre interessantes voltados para arquitetura e componentes Ajax em aplicações web, em especial:

  • TIBCO General Interface
  • ClearNova’s ThinkCAP JX

Atualizei, então, estas novas referências no artigo Ajax em Java – coletânea de referências, 09/06/2007.

Confira!

Novo impulso ao JavaScript

Há poucos anos atrás, JavaScript era um das linguagens de programação mais criticadas e detestadas. Os mais radicais inclusive questionariam chamá-la de linguagem de programação. Programadores e desenvolvedores “de verdade” gostavam de linguagens “de verdade”, como C, Java, Pascal, C#, Fortran… tudo menos JavaScript, que nem tipagem forte tinha e ainda se dizia uma linguagem orientada a objetos.

Nos navegadores web, principal ambiente operacional do JavaScript, existiam entre Firefox/Mozilla e Internet Explorer muitas diferenças nas suas implementações da linguagem e, principalmente, no modelo de objetos de documento (DOM) utilizado para se manipular a estrutura da página web com JavaScript.

O Mozilla (de Netscape a Firefox) foi quem lançou e evoluiu várias versões da linguagem JavaScript, mas a correspondente JScript implementada pelo Internet Explorer tinha uma série de diferenças e de adições proprietárias da Microsoft. Lidar com essas diversidades realmente enlouquecia qualquer programador.

Fazer uma aplicação DHTML (HTML com JavaScript) multi-browser era uma tarefa difícil, às vezes inviável. Em 2003 e 2004, eu mesmo tive que estudar um bocado para fazer Validação de formulários HTML, Tratamento de CPF e CNPJ e Eventos multi-plataforma em JavaScript.

Essa realidade foi bastante amenizada à medida que se consolidou padronização da linguagem JavaScript pela ECMA (ECMASCript) e do Document Object Model (DOM) pelo W3C. O Firefox sempre foi bem aderente a estes padrões, e as novas versões do Internet Explorer têm gradativamente aprimorado esta compatibilidade.

E eis que a era Web 2.0 e o desenvolvimento AJAX deram novo impulso ao JavaScript. Como o próprio HTML e o ambiente HTTP não têm evoluído com a rapidez exigida pelo aumento de demanda por recursos nos serviços através da web, quem deu uma luz no fim do túnel para uma explosão de interatividade na web foi o bom e velho JavaScript. A linguagem é o próprio componente “J” em AJAX: Asynchronous Javascript And XML.

Por bem ou por mal, os desenvolvedores de aplicações e serviços interativos para web têm sido obrigados a dar mais atenção ao JavaScript e, com isso, a linguagem tem perdido seu mito de endemoniada para se tornar um ambiente de programação viável, com riqueza de recursos e grande flexibilidade. Ou, na excelente definição do artigo JavaScript – Nem Java, nem Script – Uma Interessante Linguagem Orientada a Objetos (sem classes), por Leonel Togniolli:

[JavaScript] é uma linguagem dinâmica, fracamente tipada, com orientação a objetos baseada em prototipos.

Se quiser entender melhor o que significa essa definição, leia o artigo citado, que é bem interessante.

Na esteira da Web 2.0, explodiu o desenvolvimento de componentes Ajax e, por conseqüência, despontaram os magos do JavaScript, e recursos e ferramentas cada vez mais interessantes e poderosos estão surgindo, baseados em JavaScript.

Vários IDEs de desenvolvimento para web oferecem suporte a edição e validação de sintaxe Javascript. Além disso, um excelente ambiente para monitorar, inspecionar e depurar JavaScript em ação — assim como CSS, HTML, DOM, tempo de carga de páginas e Ajax — é o Firebug, uma poderosa extensão para o navegador Firefox. Recomendo a leitura do artigo Puxão de orelha faz bem, JavaScript também. Apresento o Firebug!, por Giovane Roslindo Kuhn.

Também existem bibliotecas que, a partir dos pobres componentes padrão atualmente existentes de estrutura de página e formulários do HTML, criam componentes de interface mais sofisticados, há muito já disponíveis em ambientes de programação gráfica desktop, como árvores, tabelas etc.

Existe o popular Dojo Toolkit, um framework DHTML/AJAX de código aberto escrito em JavaScript. Outro exemplo é a biblioteca JavaScript Qooxdoo. Sua lista de componentes é bem rica, como se pode ver no showcase. Conheci esta biblioteca por outro artigo também de Leonel Togniolli: Clientes Ricos Ajax na Web com Qooxdoo.

document.write("Hello world, again, JavaScript!") 🙂

Para saber mais:

Janela modal na web – atualizado

A partir de um comentário do Rafael Bernanrd Araujo sobre meu artigo Janela modal na web, revisei o texto melhorando e atualizando as informações apresentadas.

Descobri que recentemente (12 de janeiro) a Subimage Interactive atualizou o script SubModal. Agora na versão 1.4, vi resolvido um efeito colateral bobo mas incômodo no Firefox, de surgir barra de rolagem lateral quando a página tinha rolagem vertical. Vi tamém que há o recurso de abrir uma página como janela a partir de um simples link (A HREF), bastando definir para ele a classe de estilo class="submodal". O SubModal também suporta o uso de função de callback, mas não explorei este recurso.