Helder Santana - Blog

O WHATWG(Web Hypertext Application Technology Working Group) é uma comunidade de desenvolvedores de empresas como Apple, Mozilla e Opera, que após um workshop do W3C, resolveram se juntar para planejar o HTML 5 e bater de frente ao XHTML 2.

O HTML 5 busca ser uma linguagem mais específica, fazendo a mistura do HTML 4 junto ao XHTML e efetuando o acréscimo de novas TAGS.

Ando observando para que lado eu devo ir (lado negro da força ), pois o XHTML 2 também está em planejamento. Confesso que estou mais entusiasmado pelo HTML 5, por isso vou descreve-lo melhor por aqui.

Alguns diferenciais que já considero interessantes no HTML 5:

• As TAGS <div> são mais classificadas no processo de produção do layout, a proposta é que se tenha um nome referente a cada bloco de elementos. Exemplo: <header></header> para um topo de página, <nav></nav> para um menu principal ou barra de navegação, <section></section> para o contéudo de cada seção, <footer></footer> para um rodapé…etc.
• Links sequenciais. Exemplo: <link type=”first”></link> para um link primário(talvez foco) de uma página, <link type=”next”></link> bastante útil para um botão avançar,<link type=”back”></link> ideal para um botão voltar.
• TAG denominada figure, específica para a aplicação de imagens com legenda. Exemplo: <figure><img src=”imagem.png”><legend>Minha Imagem</legend></figure> .
• Possibilita a criação de templates, ou seja, evitaríamos muitos includes(não todos) que usamos sobre server-side e passaríamos a usar sobre client-side.
• Possui um elemento datagrid, que é uma tabela de dados melhorada.
• Tag de conversação. Exemplo: <dialog><p>Qual seu none?</p><p>Helder e o seu?</p><p>Untitled!!!</p></dialog> .
• Tag para barra de progresso, apenas para o elemento e não para o seu funcionamento. Exemplo: <progress><span>100</span>% Carregado</progress> .

Esses são só alguns, recomendo uma breve leitura na documentação, visando o quanto a web pode evoluir(na facilidade) com essa nova linguagem.

Assim como o formato de imagem APNG, o HTML 5 é um projeto para o futuro, ou seja, não temos como imaginar uma página HTML 5 Valid sendo que “a criança ainda está engatiando”.

Caso você for aquele típico NERD desesperado, recomendo testes pelo Opera 9.2, pois já possui uma leve compatibilidade com a linguagem.

A guerra das linguagens de marcação começou e temos o privilégio de ser os expectadores. Vai uma pipoca?

Update:

A Microsoft não está por fora do HTML 5, existem membros da mesma na equipe.
http://ajaxian.com/archives/taking-a-peak-at-html-5

Estava realizando uma consulta de passagens aéreas para participar do BlogCamp Curitiba e notei uma coisa chata por parte das companias aéreas.

Empresas como a Gol, Tam e OceanAir, não pensam nos padrões da web, descartam o tableless (se é que ouviram falar), a mobilidade e principalmente a acessibilidade.

Nos 3 casos citados, o código está extramamente sujo, sem a preocupação do trabalho em camadas, da otimização, do consumo de banda. Minha maior crítica fica para a Tam, que sofreu uma reformulação de layout após o último acidente, mas pioro a situação do código ao invés de evoluir.

Existem muitas semelhanças com a página Gol e da OceanAir, que me faz pensar de ser um trabalho feito pela mesma equipe, ou copiado. Trabalho classificado como excelente no back-end, mas péssimo no front-end.

Ponto para a Varig!

Comprada pela Gol por cerca de US$ 320milhões, a Varig se saiu bem com o novo site, pois além de lindo e com o código semântico, está compatível com todos os browsers e separado por camadas. Talvez eu daria um 10 se tivesse um estudo melhor na acessibilidade mobilidade.

Vamos ver se a Gol acompanha a filha.

Imagem retirada do Plane Nation.

Após a promessa , finalmente consigo tempo para terminar a identidade visual do blog.

Optei por uma comunicação simples, sem muito efeito visual, algo ideal para este tipo de mídia.

Agora vem uma etapa trabalhosa, que é a otimização do código base do skin.

Conto com a opnião de vocês sobre essa nova fase do EuCrio Blog.

Estou testando o post pelo Windows Live Writer versão final, um cliente da Microsoft de postagem em blogs.

Imaginava algo bem medíocre, mas logo que inicio o programa, digito meu endereço e login, tenho acesso a uma edição com a formatação do skin e uma integração total com o WP.

Também estou gostando de suas ferramentas, como por exemplo a inserção de mapas (jabá do Virtual Earth) e a vinculação direta de links para posts anteriores.

Outro fato legal está na semântica do código, que diferencia muito de editores WYSIWYG.

Parabéns Microsoft!!! (acho que nunca eu disse isso por aqui).

Acabo de descobrir que em cliente local, eu levo menos tempo para postar.

Alguém sabe outra alternativa de edição? Pode ser para qualquer plataforma.

Update: Não está funcionando no WP 2.3.1 , que pena!

O Aptana, uma IDE do Eclipse destinada para aplicações web, deixou de ser beta e lançou sua versão 1.0.

Possui grande repercussão entre desenvolvedores de aplicação Javascript(e frameworks), PHP, Ruby On Rails e também a RIA Adobe Flex.

Apesar de seu foco se situar em back-end, ele tem uma avançada edição de CSS, onde visualizamos a compatibilidade dos browsers sobre cada atributo digitado.

Também é aberto a novas tecnogias, dentre elas a produção de aplicações para Iphone, o que não é novidade ao citarmos membros da equipe como participantes do Blog Ajaxian.

Seu grande potencial, está na edição simultânea de arquivos no FTP e a compatibilidade com múltiplas plataformas (Windows, Linux, Mac).

O Aptana dava orgulho de se dizer que era free, com update, funcional em boas máquinas (lembre-se, eclipse é em java) e mais produtivo que muitos pagos por ae.

Esperava algo do tipo 1.0 freeware stable, errei feio, pois ele sofreu uma divisão de versões:

• Professional Edition, $99, pois todo profissional tem dinheiro mesmo né.
• Community Edition, open source para teste, o povão só serve de cobaia.

A partir de agora, para você ter seu Aptana estável, além de precisar de um excelente computador, terá que dispor $99.

Poderiam pelo menos correr atrás de investimentos, pois o eclipse vive disso.

Agora que não largo mão do meu Notepad++.

Não fui convidado, apenas estou fazendo esse meme por vontade própia.

Levei em conta 3 blogs ao qual costumo parar o que estou fazendo para ler. Desses apenas 1 eu tenho contato direto.

Rafael Marin: São poucos de sua idade que tem esse potencial de escrita e conhecimento, particularmente, não conheço outro. Conversamos bastante, onde sempre eu aprendo e ensino.

Aguinelo Pedroso: Porque existem dois tipos de programadores, os específicos e os sem limites.

Alessandra Mazzariolli: Excelentes textos sobre usabilidade, arquitetura de informação, além de dicas para relacionamento ideal com o cliente.

Finalmente consegui escolher o skin base, agora eu posso iniciar o desenvolvimento de uma identidade visual para o blog.

Alguns blogs usam ele, por ser simples, bonito e semântico em grande parte do código.

Vamos ao trabalho Helder!!!

O desenvolvedor web, sempre busca expandir seus limites, propondo novas idéias de espaço, design, tamanho e posição. O que devemos pensar bem antes de sair inovando, é a capacidade de leitura dos navegadores. Para isso existem estudos sobre desenvolvimento Cross-browser.

O Internet Explorer 6(e seus antecessores) por exemplo, além de não ser totalmente compatível com o CSS 2, é incapaz de fazer a renderização da área transparente de uma imagem PNG, deixando o vazio em tonalidade cinza. Sempre que desejamos esse recurso, corremos atrás de hacks de css ou javascripts. A maneira mais utilizada atualmente, é um script chamado PNGFIX, que utiliza filtros do DirectX junto a uma imagem GIF branca de 1×1 pixels, criando um “protótipo” agradável.

É dito “protótipo”, pelo fato de não funcionar em ocasiões de queda de desempenho no servidor, ou então, pelo o usuário não possuir o javascript ativo, sem descartar diversos fatores que influem na incompatibilidade.

Uma boa solução, além de mais precisa, é a utilização do GIF apenas no IE 6, como mostra o exemplo abaixo do Twitter.

Vemos que no primeiro, o logotipo está sendo usado em formato PNG, por estar com uma definição de contorno melhor, comparado ao segundo que está inferior, e definido como GIF. Teste também, salve o logotipo no IE 6 e depois salve nos outros browsers.

Mas como eu faria essa substituição sem javascript?

Não sei no caso doTwitter, mas eu faria essa verificação de browser por alguma linguagem de programação server-side (php, ruby on rails, asp, java e etc), seguindo o seguinte algoritmo:

Variavel browser

browser = Pegue o nome do browser e a versão

Se browser = Internet Explorer 6
escreva gif

Caso for outro browser
escreva png

Alguma dúvida ou sugestão, deixe um comentário.

Diante a 122 propriedades presentes no CSS 2.0, meu resultado nesse quiz foi:

45

Pois é, não é só o Pedro Rogério que está ficando velho não. =)

Já aplicou o web standards no seu processo de criação?

Bom, é basicamente uma metodologia padronizada de desenvolvimento, ao qual se compõe por termos e regras definidos pelo World Wide Web Consortium (W3C), orgão que busca manter uma web funcional e sem fronteiras.

Com o standards, adquirimos a grande possibilidade de elaborar projetos mais efetivos em termos de acessibilidade. Um projeto sem conceito de standards, é o mesmo que um projeto feito para uma única massa populacional e logicamente, restrito a outras porções. Para que o standards seja válido, é necessário a aplicação das regras pelo usuário, e a adoção de seus receptores, que no caso da web, são os navegadores.

Atualmente, estou desenvolvendo, enviando e monitorando mailings. Sempre procuro atingir grande parte da lista, mas nem sempre eles ficam 100% diagramados conforme o proposto pelo cliente, justamente pelo fato dos receptores (nesse caso os leitores de e-mail) não se adequarem totalmente ao HTML.

Um grande exemplo está no Gmail, que altera totalmente as classes de CSS e aplica uma diagramação combinável a sua identidade visual. Pode até parecer fantástico, mas nem sempre isso é legal, pois em alguns casos, a renderização acaba truncando ou aumentando desnecessariamente o tamanho do texto.

Minha solução de curto prazo, foi adotar a criação baseada em imagens, que em grande parte dos receptores, são bloqueadas por segurança e só aparecem com a ativação do usuário, mas que com essa autorização, é exibida normalmente. O grande problema, está nas mensagens ficarem 2x mais pesadas do que em um html, também está possibilidade da perda de atenção do usuário, devido ao tempo que leva carregamento em conexões precárias.

Com esses problemas, resolvi ir ao google e buscar “mail standards”, e em primeiro resultado, tive uma proposta solução.

O IMC , segundo a descrição inicial do site, é um orgão responsável em te ajudar a entender um pouco sobre o desenvolvimento “correto” e ensinar tecnologias beneficientes.

Estou lendo um pouco os textos de lá, mas logo vejo que vai demorar muito para os receptores serem totalmente adequados a esses padrões (se é que existem).

Enquanto não acho a solução ideal, fico na renderização de PNG 8bits.