Blog

Como de costume, o Opera sai na frente e lança (ainda em versão Alpha) uma ferramenta para inspeção e edição em tempo real de JavaScript e CSS, a exemplo da extensão Firebug para Firefox.

Denominado como Opera Dragonfly, a grande novidade é que este recurso virá nativamente com as próximas versões do navegador, e promete facilidade para os desenvolvedores de sites. Será possível utilizá-lo tanto no Desktop como em sua versão móvel.

Particularmente acho esta notícia muito bem-vinda, pois trata-se de um ótimo navegador que, infelizmente, não possui muitos usuários, em grande parte pela falta de suporte (leia-se extensões) se comparado ao Firefox.

Tomara que com isto tenhamos mais desenvolvedores utilizando Opera e, conseqüentemente, usuários “comuns” também.

Foi lançada uma campanha (séria) a favor da atualização, por parte dos usuários, do Internet Explorer 6. Nós, desenvolvedores, estamos encarregados de incentivar nossos visitantes a parar de utilizar o Internet Explorer 6 e trocar para outros navegadores ou, até mesmo, para o Internet Explorer 7, o que já representa um grande avanço.

Por incrível que pareça, grande parte das visitas ao project.47 (cerca de 40%) ainda é formada por usuários que utilizam o IE6; isso que estamos falando de um site voltado a desenvolvedores, Web Designers, etc., imagine os dados para um site convencional!

Desta maneira, devemos aderir à campanha SaveTheDevelopers voltada à essa causa, apresentando diversas vantagens apresentadas pela atualização de seu browser.

Aproveitando a oportunidade, peço encarecidamente aos visitantes que, caso ainda utilizem Internet Explorer 6, por favor, atualizem seu navegador para a versão 7 ou instalem um melhor. Nós desenvolvedores agradecemos

Technorati Tags: browser

Durante muito tempo os browsers lutaram para passar no Acid 2, teste desenvolvido para avaliar o compreendimento do CSS por parte dos browsers.

Com o lançamento da terceira versão do teste, muitos browsers conseguiram boas pontuações, como o Safari, tendo a nota mais alta de todos os browsers já lançados, com 75% de aprovação. O navegador com a melhor performance foi o Opera, atingindo a pontuação total, ou seja, 100% dos itens testados.

Porém, um fato muito interessante é a pontuação obtida pelas diferentes versões do Internet Explorer: a versão 5.5 obteve melhor avaliação, com 14 pontos, contra 12 pontos da versão 6 e 7 do navegador. Podemos ser muito taxativos ao dizer que o Internet Explorer 5.5 é melhor, pois sabemos que não é, mas com certeza é no mínimo curioso o fato de possuir um score maior que as versões seguintes.

Para ver a lista completa de pontuação de browsers já lançados e aqueles em versão beta, basta visitar este site.

Technorati Tags: browsers

Foi liberada, para dowload, a versão Beta do Internet Explorer 8.

Temos acompanhado há algum tempo as evoluções que a nova versão do IE nos trará, como melhorias significativas na renderização, sendo melhor adaptado aos Web Standards. Porém, uma discussão que tomou grandes proporções foi a questão do Version Targeting do IE, na qual o desenvolvedor especifica qual versão do browser deverá renderizar o site. Isso mesmo, a nova versão do navegador virá com um motor de renderização atualizado, mas também terá as versões anteriores do mesmo. Desta maneira, se eu desejar que meu site seja visualizado de acordo com o IE7, devo especificar através de uma meta tag no head do site para que isto aconteça. O problema ficará com aqueles que possuem versões divergentes.

Bom, após esta discussão, foi levantada a questão de que o browser viria, por padrão, com a renderização do IE8 desativada, opção que deveria ser revertida manualmente. Porém voltaram atrás nessa decisão, felizmente.

Para finalizar essa conversa e tirar suas próprias conclusões sobre as melhorias nas funcionalidades e renderização do browser, basta visitar este link no site do navegador

Peço desculpas pela ausência de posts nas duas últimas semanas, pois consegui tirar uma folga no trabalho e, claro, durante esse tempo aproveitei pra fazer uma boa lista de links e postar hoje para vocês. Aí vai:

• CSS Redundancy Checker - Esta ferramenta, muito útil por sinal, faz uma varredura em seu CSS e exibe as redundâncias em seu código, podendo eliminar muito código desnecessário.
• Improve website load time by 500% with 3 lines of code - Tutorial que mostra de maneira bem simples, como escrever um código PHP de 3 linhas que faz seu site ficar até 5 vezes mais rápido. É uma técnica muito interessante que envolve compressão dos arquivos necessários para abertura correta do site, através do uso do PHP.
• Pure CSS Text Gradients - Este tutorial explica como fazer efeito de gradiente em seus textos, utilizando apenas CSS e uma pequena imagem PNG para isto.
• Em based layouts - Vertical rhythm calculator - Excelente artigo que explica o que é a unidade EM utilizada para estilização de fontes, além de disponibilizar uma calculadora para saber qual medida (EM) corresponde ao valor em pixels (PX) desejado.
• HTML 5 differences from HTML 4 - Como o título diz, esta página explica as diferenças existentes entre as versões 4 e 5 do HTML, na própria página da W3C.
• The Acid3 Test - Página do Acid3, teste destinado a medir o nível de compreendimento do CSS3 por parte dos browsers. Vale ressaltar que os browsers atuais ainda estão chegando nos 100% do Acid2… Resta esperar para ver quanto tempo demorará até que atinjam essa marca no Acid3.
• Tags de linguagens de marcação - Esta página lista as linguagens de marcação (versões de HTML e XHTML) e as tags que cada uma possui (incluindo uma breve descrição sobre cada uma), servindo como comparativo entre elas.
• Tripoli - a CSS standard for HTML rendering - Trata-se de mais um CSS que “reseta” as propriedades default dos browsers deixando, teoricamente, todos de maneira padronizada, antes de começar a desenvolver seu site.
• SEO Design and Development Best Practices - Artigo que lista boas práticas para desenvolvimento de sites, além de dicas para melhorar o desempenho com relação aos sistemas de busca. Uma referência prática e eficiente.
• Web Site Marketing SEO Tools, SEO Score - Ótima ferramenta que exibe o desempenho de seu site nos sistemas de busca. Além disso, há a opção de fornecer algumas palavras-chave para que sejam avaliadas e exibir o posicionamento de seu site em cada uma delas.

Espero que aproveitem os links e sigam sugerindo mais referências para colocar nas próximas edições da Sexta-feira dos Web Standards!

Technorati Tags: CSS, HTML, SEO, Web Standards

Nesta edição da Sexta-feira dos Web Standards fiz uma relação de links sobre layouts e hacks em CSS, ferramenta para SEO, Internet Explorer 8 e a importância da Arquitetura da Informação no desenvolvimento de sites.

• How to create CSS layouts without using FLOAT - Ao tentar reproduzir um layout em colunas, na grande maioria das vezes temos de usar os floats que, em determinados casos, podem causar problemas futuramente (por exemplo, ao ter que utilizar a propriedade clear em certa parte do site, acabará “quebrando” o layout, devido o uso de float nas colunas). Este artigo mostra como fazer um layout em colunas sem o uso dos floats.
• Xinu - Check PageRank , Backlinks, Indexed Pages, Rankings and more - Esta é uma ferramenta muito útil para aqueles que pretendem acompanhar o desempenho de seu site nos sistemas de busca e, conseqüentemente, se aperfeiçoar nesta área. Muito prático e fácil de usar.
• CSS Hacks - Sabemos que este assunto dos “CSS Hacks” ainda gera muita polêmica mas, dependendo da necessidade, acabamos tendo que utilizar tais artifícios. Este site fala sobre os hacks e lista vários, além de explicar maiores detalhes sobre cada um deles.
• Compability and IE8 - Com o avanço do desenvolvimento do Internet Explorer 8 muita expectativa está sendo gerada, pois espera-se um lançamento de qualidade muito superior às suas versões anteriores. Este artigo descreve o que os desenvolvedores estão fazendo para facilitar a vida dos usuários e desenvolvedores, melhorando a renderização dos sites que estão de acordo com os Padrões, sem deixar de visualizar corretamente aqueles direcionados às versões 6 e 7 do navegador.
• Beyond DOCTYPE: Web Standards, Forward Compability and IE8 - Este excelente artigo trata sobre o futuro aguarda os desenvolvedores de sites; as diferenças de compatibilidade dos browsers e a dificuldade gerada cada vez que uma nova versão é lançada pois aumenta, gradativamente, as preocupações que devemos ter em fazer um site acessível a browsers e suas versões distintas.
• A importância da AI no aumento da performance de um site - Ótimo artigo tratando a importância da Arquitetura da Informação no desenvolvimento de sites e os benefícios que sua prática pode trazer aos usuários.

Bom final de semana a todos e semana que vem tem mais links!

Technorati Tags: Web Standards, CSS, browsers

Mais um ano chega e, claro, para começar com o pé direito, iniciamos com a décima edição da Sexta-feira dos Web Standards!

Essa lista envolve mais conceitos do que aqueles tutoriais que costumo passar, mas, claro, são muito úteis a todos!

• Standards Overview - Ótimo texto que explica bem o que são os Web Standards (ou Padrões Web), seus conceitos e alguns pontos importantes que devemos saber antes de desenvolvermos nosso site como Doctype, diferenças existentes entre os browsers, Acessibilidade, código semântico, etc.
• IE7-JS - Trata-se de uma biblioteca JavaScript (já conhecida por muitos) que, ao ser inserida em seu site, faz com que o Internet Explorer 5 e 6 reconheçam seu site da mesma maneira que o IE7, corrigindo vários erros relacionados a renderização do HTML e CSS. Já existe o script IE8, mas ainda em fase beta.
• Levels of CSS knowledge - Como o título diz, este artigo mostra os diversos níveis de conhecimento em CSS e suas particularidades. Interessante para saber em qual nível você se enquadra.
• CSS, Acessibility and Standards Links - Lista muito interessante com diversos links relevantes sobre tutoriais, noções básicas de CSS, Acessibilidade, guias, layouts e templates, livros, técnicas entre outros, direcionados para quem desenvolve sites.
• Become a Better Web Standards Developer - Este artigo mostra várias dicas para quem quer se aperfeiçoar no desenvolvimento de sites em Web Standards, além de fornecer uma ótima lista de links relevantes ao final do texto.
• maxdesign - Ótima referência para aqueles que querem aprender mais sobre estilização de listas, uso de floats e seletores CSS. Muito bem explicado e exibe vários exemplos práticos.

Espero que tenham gostado dessa lista. Semana que vem, com certeza, tem mais!

Technorati Tags: Web Standards, browsers, JavaScript, HTML, CSS

Para quem ainda não conhece, o Acid2 é um teste feito pelo Web Standards Project a fim de ajudar desenvolvedores e os próprios usuários, a saberem o quanto seu browser está adequado aos Padrões.

Os poucos browsers que passaram no teste foram o Opera, Firefox 3 (ainda bem Beta) e, pelo que podemos ver, o Internet Explorer 8, ainda em desenvolvimento, também passou no teste.

Isso representa um grande avanço e uma notícia muito importante para nós, desenvolvedores de sites, pois estamos acostumados a enfrentar problemas com o Internet Explorer a cada site produzimos. Felizmente essa novidade mostra que temos um futuro promissor com os browsers disputando cada vez mais sua fatia no mercado e, claro, isso tudo facilitará o nosso trabalho.

Parabéns à Microsoft!

Technorati Tags: Web Standards, browsers

Desta vez, a edição da “Sexta-feira dos Web Standards” chegou um dia atrasada; peço desculpas a todos, mas a espera valerá a pena, pois a seleção de links dessa semana tem quantidade e qualidade! Então vamos a ela:

• Iconize Textlinks with CSS - Este site oferece um CSS e pacote de imagens para aqueles que desejam inserir ícones em seus links automaticamente, através do CSS. Uma aplicação muito interessante e fácil de ser utilizada.
• 2007: More Web Design Trends & Cliches - Artigo que cita as tendências do Web Design atual e, claro, alguns clichês que acabam por surgir, devido ao novo estilo de Design proveniente, principalmente, da era “Web 2.0″.
• 10 Usability Nightmares You Should Be Aware Of - Neste artigo são citados 10 tipos de erros em termos de Usabilidade que não podem ser cometidos, para não comprometer a facilidade com seu site é acessado. Para muitos, alguns desses itens não são novidades, mas vale a pena frisar, pois este é um tema de suma importância para qualquer projeto, independente de seu tamanho.
• CSS Rounded Box Generator - Este é um gerador de caixas com cantos arredondados, utilizando CSS. Para muitos esse tipo de recurso pode trazer muitos problemas, devido a seu grau de complexidade, então esse tipo de gerador pode ajudar não só com o código pronto, mas para sabermos como fazê-lo.
• The most coolest web tools - Trata-se de uma lista enorme de utilidades, geradores, etc., direcionados para quem desenvolve sites. Pode ter muita coisa inútil, mas com certeza há ferramentas que auxiliam a deixar nosso trabalho mais prático.
• Activating the Right Layout Mode Using the Doctype Declaration - Este site explica detalhadamente os tipos diferentes de layout (ex: Standards mode, no qual renderiza o CSS de modo correto, seguindo os Padrões, e Quirks mode, no qual o browser se comporta como uma versão antiga, oferecendo certas limitações ao desenvolvedor), de acordo com o doctype escolhido e em quais browsers são suportados.
• Styleshout.com - Galeria de layouts prontos (de boa qualidade) e gratuitos, feitos via CSS. Esse tipo de site pode ser útil para aqueles que desejam aprender como fazer um determinado tipo de layout e, baixando um tema pronto, podem ver exatamente como pode ser construído.
• A Preview of HTML 5 - Este artigo dá uma luz sobre a próxima versão do HTML 5, mostrando alguns pontos interessantes que estão por vir, que prometem facilitar a vida do desenvolvedor e adicionar mais semântica ao código.
• X/HTML 5 Versus XHTML 2 - Aproveitando o “gancho” do link anterior, este site fala um pouco mais sobre as diferenças existentes entre as próximas versões do HTML e XHTML, respectivamente. Vale a pena darmos uma olhada e comparar os pontos fortes e fracos de cada um. Com certeza esse assunto ainda vai dar o que falar!
• Maximum and Minimum Height and Width in Internet Explorer - Um dos grandes problemas que nós, desenvolvedores de sites temos, é a incompatibilidade do Internet Explorer 6 com determinadas propriedades CSS e, algumas delas são a max-width, max-height, min-width e min-height. Claro, há maneiras de se dar um jeito nisso e esse link nos dá soluções.
• Embedding YouTube Videos as Valid XHTML 1.0 - Artigo que mostra como inserir vídeos Youtube em seu site de maneira correta, ou seja, deixando seu código XHTML 1.0 válido.

Bom, por enquanto é só. Tenho certeza que esse pequeno atraso fez valer a pena, pela qualidade dos links apresentados!

Technorati Tags: Web Standards, CSS, Web Design, Usabilidade, HTML, XHTML

Mantendo a tradição, chega mais uma sexta-feira e, com ela, a sétima edição da Sexta-feira dos Web Standards!

Separei alguns links interessantes, principalmente sobre CSS com tutoriais, bons exemplos de Design e boas maneiras no desenvolvimento de formulários.

• Wufoo - HTML Form Template & CSS Design Gallery - Site direcionado àqueles que desejam aprender mais sobre desenvolvimento de formulários, tanto na forma do código HTML como na produção visual do mesmo.
• Best of CSS Design 2007 - Como o nome diz, trata-se de uma listagem dos melhores Designs feitos com CSS durante este ano de 2007. Bela seleção que mostra todo o potencial que temos em nossas mãos, contradizendo aqueles que afirmam o fato de que “todo site feito em CSS tem cara de blog”.
• Transparent PNGs in Internet Explorer 6 - Trata-se de mais um artigo explicando o funcionamento e soluções para a aplicação de PNGs transparentes no Internet Explorer 6.
• 9 CSS Ethics Every Designer Should Have - Este artigo lista 9 boas práticas que podem agilizar e facilitar seu desenvolvimento em CSS.
• Creating Sexy Stylesheets - Como o link anterior, este artigo dá várias dicas para melhorar a forma como escrever seu CSS e, realmente, coisas simples como estas podem ajudar muito no desenvolvimento de grandes projetos.
• The All-Expandable Box - Tutorial que mostra, de maneira simples, como fazer uma caixa expansível (sombreada), até mesmo quando o usuário aumenta o tamanho da fonte.
• CSS drop shadow - A exemplo do link anterior, este tutorial ensina como fazer caixas expansíveis com sombra, utilizando CSS.

Technorati Tags: CSS, HTML