Helder Santana - Blog

O Firefox 3 está bem perto de ser lançado. Temos um browser mais rápido, seguro, inovador e com uma interface seguindo padrões de design do seu sistema operacional. Ele está quase passando pelo Acid 3 (eu sei do Opera) e também está mais compatível (do que já era) com CSS, e JavaScript.

Temos uma comunidade imensa de usúarios do excelente, por isso, venho aqui pedir ajuda de vocês (esmola de ônibus? “nunca roubei, nunca matei” hehe), colaborando com sua participacão no Download Day, para colocarmos o Firefox 3 no Guinness Book. Lembrando que temos que ter o compromisso de realizar o download nas 24 hrs de seu lançamento, ao qual ainda não foi previsto, mas será muito em breve.

Não é fácil se tornar o software mais baixado em 24hrs, exige muito de servidor(por parte da Mozilla) e uma certa disponibilidade de quem se comprometeu com o download. Mas vamos lá, pois a vitória será do Firefox 3 e também nossa.

Para confirmar sua participação, basta só preencher seu nome e email no site abaixo:

http://www.spreadfirefox.com/pt-BR/worldrecord

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.

Para aqueles que são fanáticos por um Networking, ou somente pela web (popular NERD Anti-social), recomendo um evento bem bacana que ocorre por diversas capitais do Brasil.

Não é de hoje que o Encontro de Web Design vira post, justamente por existir desde 2000, o que proporciona a conclusão de que os Dinossauros depende de nós, e que nós também dependemos deles.

Foi lá em 2004 2005, que tive o primeiro interesse pelos Padrões Web, Usabilidade, Semântica, Mobilidade, etc…

Atualmente nem me direciono tanto pelo conteúdo proposto, mas sim pelo papo dos participantes, pela situação, pela compania de pessoas com o mesmo ideal:

“Desenvolver para internet”

É essa hora que deixamos de lado a metodologia de cada um e valorizamos a discussão dos temas.

Independente de ser “Flasher”, Tabelado ou até mesmo “Front-Pageador”, todos estão em busca do mesmo ideal:

O acréscimo de conceito

Vai me dizer que é ruim?

É bem provável que eu não escreva por aqui no evento, mas o Twitter dará conta do recado.

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.

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++.

O W3C, entidade responsável pelos padrões da web, acaba de inaugurar um escritório em São Paulo.

Em parceria com a NIC.BR(responsável pelo registro de domínios nacionais), estarão em busca da semântica e do aumento de concorrência entre sites brasileiros.

Vamos festejar!!!

Fora Isso

Teremos acesso a tradução de todas as documentações e vamos ganhar um fórum de discussão.

Para que tudo isso?

Se antes já tinhamos fontes nacionais confiáveis, agora então, teremos uma base.

Só desejamos a realização de eventos.

Brasil sil sil!

Quanto ao título do post, deixo a comemoraração da copa para 2014.

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.