Lista de blogs em português sobre desenvolvimento web e TI

Com essa lista de blogs da pra aprender muita coisa, em português. E pra facilitar o trabalho ainda, deixei disponível uma lista opml com todos os feeds para importar no seu leitor de rss (se alguém ainda não tem, sugiro o feedreader).

Lista opml com todos os feeds para importar no seu leitor de rss

Apesar de não termos um blogroll, esse seria o nosso. Segue lista em ordem alfabética, façam bom proveito:

A informação – Atualizado com boa freqüência, o blog fala sobre o mercado de TI em geral, mostrando as principais notícias do momento da área.

veja mais tidbitsAkita On Rails Fabio Akita, uma das principais referências de Ruby On Rails no Brasil, ensina RoR, divulga eventos e mostra as principais novidades do framework.

AleMazzariolli – A webwriter, que também é editora do webinsider, e revisora dos cursos online da Visie fala sobre suas experiências profissionais: comunicação, usabilidade, acessibilidade, etc.

Arquitetura de Informação – O famoso blog é atualizado Silvia Melo e Fabricio Teixeira (arquitetos de informação da AgênciaClick) mostra boas referências, ótimos textos e os trabalhos realizados por eles.

BrPoint – O Blog fala sobre SEO e Blogs, incentivando a galera a fazer blogs pra ganhar dinheiro, ou mesmo por diversão.

Bruno Dulcetti – Com boa freqüência de posts também, o carioca que trabalha como Web Design / Web Development fala sobre web standards, css, xhtml e tecnologia em geral.

Bruno Torres – O carioca, especialista em SEO, trabalha no UOL, apesar de não postar muito, seu Blog conta com 5290 assinantes em seu FeedBurner.

Carreirasolo – Um blog diferente, conta como é viver de freela, e da as dicas pra galera a conseguir isso. Também posta sempre sobre profissionais freelancers (para aqueles que querem contratar), divulga jobs e vagas para freelancers e ainda tem um podcast falando das dificuldades em freelas.

Ciro Feitosa – Desenvolvedor web, trabalha tanto em desenvolvimento de sistemas quanto em programador de interface, e no seu blog, fala sobre suas experiências.

Chris B. – Com uma experiência grande já na área de desenvolvimento web, Chris é responsável por uma equipe de programadores de interface e conta no seu blog um pouco de suas experiências.

Clauber Stipkovic – Programador de interface da AgênciaClick e membro do projeto Mozilla. Clauber, também conhecido como Jesus (semelhança física), comenta seus projetos em seu blog.

Cleiver – O programador fala bastante sobre php, o framework CakePHP, linux e seu notebook da HP que só lhe dá problemas.

Cor Cinza – Apesar do nome parecer um blog de design, o conteúdo principal do blog é PHP, o blog tem boas introduções e tutoriais pra quem está começando na linguagem.

CSS no lanche – Blog específico, fala do básico ao avançado sobre CSS, explica boas práticas, e é sempre atualizado.

veja mais tidbitsDanillo Nunes – Recentemente ele decidiu traduzir o Opera Web Standards Curriculum, um curso da Opera que ajuda a preparar desenvolvedores. Os artigos são excelentes, bem técnicos.

Desenvolvimento para Web – Sem um tema específico, o blog da dicas de SEO, PHP, CSS e fala sobre novos CMS e tudo mais que engloba o desenvolvimento web.

DGMike – DGmike é desenvolvedor web que trabalha para a Visie. Seu blog fala sobre php, python, html, css, javascript, etc.

Digital Paper (Podcast) – Em formato de Podcast, o blog com poucas atualizações, tem pots interessantes sobre usabilidade, wordpress, Google Gears, etc…

veja mais tidbitsEduardo Ottaviani – Mais um programador de interface da AgênciaClick, fala sobre CSS, Javascript e boas práticas no desenvolvimento.

El Micox – O blog bastante visitado (eu acho) tem como objetivo postar funções prontas JavaScript, Ajax, PHP, DOM, Webstandards, dicas e outras coisas.

FechaTag – Outro blog de alguém da Visie, Elcio Ferreira fala sobre XML, XHTML, CSS, Tableless, Python, Linux além de divulgar eventos da área.

HTMHelen – Helen Fernanda tem um perfil interessante, apesar trabalhar em outra área e estudar comunicação, ela escreve sobre html, css e novidades na internet. O blog está sempre atualizado e além desse blog, ela tem mais QUATRO, e ainda faz freelas com web. Helen parece ser uma daquelas pessoas que faz seu dia parecer ter 35 horas.

Igor Escobar – Como ele mesmo diz, o objetivo do blog é documentar todo o processo de mudança na área de técnolgia focada no desenvolvimento web e apresentar as soluções e problemas cotidianos.

Ivo Gomes – Ivo, consultor de usablidade a 4 anos, fala um pouco da área, de acessibilidade e arquitetura da informação.

jQuery Brasil – Sem posts recentes mas com um conteúdo muito bom, jQuery Brasil fala sobre plugins, efeitos e como usar o mais conhecido framework em javascript.

Julio Gref – O desenvolvedor web fala sobre Frameworks, Mootols, jQuery, Javascript, e como diz um de seus posts: “coisas que todo desenvolvedor deveria saber”.

Leonardo Caineli – Com mais de 7 anos de experiência na área, já trabalho como Programador de Interface e Web Design, assim consegue falar sobre Design, Padrões Web e Tecnologia.

Lucas Ferreira – Além de muitas referências (Links for del.icio.us) o blog tem posts sobre jQuery / Lightbox / PHP.

Luiz Tiago – Formado em Sistemas e trabalhando na área de desenvolvimento web desde 2001, seu blog tem um enfoque em webstandards e novidades na área.

Lutando por WaSP – WaSP é sigla para Web Standards Project (é.. tem um trocadilho no meio, wasp significa vespa). Aldemir fala sobre padrões, acessibilidade, Arquitetura da informação, CSS, Rails, Javascript.. e por aí vai.

Marcos Gomes – Ajudou a fundar e é diretor de tecnologia da boo-box. Trabalha com internet a mais de 10 anos, sendo que só tem 22. Tem muita experiência pra contar no blog.

Maujor – O famoso “dinossauro das CSS”, responsável pelo site “CSS para Web Design”, tem um blog também falando principalmente sobre jQuery, já que lançou um livro em português recentemente.

Mestre SEO – Blog específico em SEO com diversos autores que dão as dicas do que fazer e do que não fazer para obter melhores resultados nos buscadores.

O Desenvolvedor – Com muito javascript, jQuery e prototype o blog é ótimo pra quem deseja largar o flash pra fazer efeitos que poderiam ser feitos com javascript. Além disso o blog fala de padrões web, semântica.

pBlog – No blog do Rodrigo Ghedin e Érico Oliveira o tema é WordPress. Plugins, atualizações, temas, tudo é abordado no blog, ideal pra quem não sabe programar, mas deseja ter um blog bem personalizado.

Pinceladas da Web – O blog de Pedro Rogério chama atenção pelo alto nível dos posts, com boa freqüência de atualização e desde 2006, os assuntos mais falados de seu blog são Acessibilidade, Browsers, CSS, JavaScript, jQuery e XHTML segunda sua tag cloud.

Pixeladas Aleatórias – Análises sobre a web e muitas referências (links for del.icio.us) é o que mais tem no blog, que também fala de HTML / CSS. Sua descrição no seu blog é “Simone Villas Boas é desenvolvedora de front-end, geek em tempo integral”.

Profissão Web – Thiago Melo, um dos colunistas do webinsider, tem seu blog, que com um ano e meio de vida tinha mais de 700 posts, impressiona! Thiago é desenvolvedor e designer de interfaces e já atua na área a mais de 6 anos.

Project 47 – Falando sobre web standards e wordpres, Carlos Eduardo que é desenvolvedor web criou a “sexta feira dos webstandards” que era uma série de links e referências bem interessantes, apesar de não ter dado continuidade, existem 15 posts desses que estão em meio ao seus históricos.

Revolução Etc – O mais famoso blog da lista, tem quase 7 mil assinantes dos seus feeds. Atualmente ele está escrevendo “dicas de como montar um blog” mas aos seus quase 400 posts tem muitos posts técnicos porém bem detalhados, mostrando o porque é de tanto sucesso.

Ruf Space – Falando sobre webstandards e o cotidiano web. Apesar do blog estar praticamente parado, existem posts interessantes em seu histórico na sessão DOM lab.

veja mais tidbitsSEO Cast – O slogan do blog é “muito mais que meta tag”. Além dos posts dando as dicas de SEO também estão disponíveis podcasts sobre o assunto.

Simples Idéias – O blog de Nando Vieira é bem técnico, para aqueles que querem ver código mesmo. O blog está bem focado em Ruby On Rails, mas tem outros posts de outros assuntos.

t de <tag> – Segundo sua descrição, Marcello de Souza é técnico em informática, programador e professor. Entusiasta de novas tecnologias e do uso de software livre. Sendo tudo isso tem muita coisa pra ele escrever como Python, Padrões web, CSS e bastante Ruby On Rails.

Tá dificil… – Usabilidade é o tema do blog que mostra a grande dificuldade que usuários tem para fazer coisas simples como comprar cartucho para Epson ou obter resultados anteiores da mega-sena.

Tableless – Diego Eis ensina CSS / XHTML / jQuery / SEO. Além dos posts escritos, o blog tem diversos vídeos que são tutoriais curtos e bem detalhados mostrando desde implementando html até manipular atributos com jQuery.

Techbits – O tema é TI, Alexandre Fugita escreve as notícias do mercado, como o lançamento do Android, Chrome, Campus Party, twitter, a privadade do facebook, etc.

TecnoBlog – O blog voltado para a Tecnologia, tem uma boa freqüência de posts que dão notícias da internet como “Brasil é o 6º colocado no ranking de ataques de malwares” ou “Yogen Max – carregue a bateria do seu notebook com o movimento dos pés”.

Tecnocracia – Manoel Netto se diz apaixonado por tecnologia, trabalha com web desde 1998. Ele fala sobre internet em geral, o blog é bastante acessado, 1700 pessoas assinam seus feeds.

veja mais tidbitsTidBits – Nosso blog. Eu, Danilo Augusto, programador da AgênciaClick, e Belinha, arquiteta de infromação da Tesla, em meio as brigas de casal, falamos sobre desenvolvimento web e eninamos através de exemplos práticos.

Tulio Faria – Túlio é professor técnico em informática e freela fazendo sites. Programador de diversas linguagens. Apesar disso, seu blog é voltado mais para PHP.

UnderGoogle – Tudo sobre o google. Search Wiki, Friend Connect, Orkut, Gmail, Zeitgeits, Maps, Adwords, etc etc.. o assunto no blog é somento Google e segundo eles, 11 mil pessoas assinam seu rss.

Vagas na Web – E para aqueles que já aprenderam o bastante e talvez seja a hora de ser melhor remunerado, esse blog do yogodoshi posta diversas vagas de empregos todos os dias. Até meu emprego atual, eu fiquei sabendo da vaga por lá.

ViuIsso? – Michel Lent Schwartzman é CCO da 10’Minutos S.A., designer gráfico, mestre em Telecomunicações Interativas pela New York University, articulista do Webinsider e do Yahoo! Tecnologia, juri do Prêmio iBest desde 1999 e professor da Escola Superior de Propaganda e Marketing. No seu blog ele dá as notícias do que está acontecendo na web.

Visie – No blog da empresa de treinamento em desenvolvimento web, consta a agenda de palestras do Élcio Ferreira, vídeos tutoriais e outras coisas ligadas a empresa.

Web, Design e CSS – Cleo, uma Web designer que também trabalha com CSS, XHTML, SEO e usabilidade, fala um pouco de tudo no seu blog, com o conteúdo é bem variado, pode interessar a diferentes áreas.

Webinsider – O blog, patrocinado pelo UOL, conta com diversos colunistas, está ativo desde 2000 e fala sobre o mercado web no Brasil.

WebPoint – Alexandre Magno é membro da equipe do jQuery, no seu blog ele fala muito do framework, escreve diversos tutoriais, fala de plugins, enfim… dá todas as dicas pra quem quer trabalhar com a ferramenta.

Yogodoshi – Cayo Medeiros, além do Vagas na Web, tem esse blog que fala sobre SEO, jQuery, Javascript, cita boas referências e tem o post “O Melhor da Semana” (que está da edição 32) com links das notícias que chamaram atenção, todas separadas por categorias, como Tuturiais, Vagas de Emprego, Dicas, Notícias, Artigos, etc..

Se alguém quiser incluir um blog, deixe comentado aqui o endereço do blog que eu atualizo o post, desde que o blog se encaixe na lista, é claro.

[]s

Quiz sobre XHTML – Baseado no W3C Schools

Teste seus conhecimentos com mais um quiz, este sobre XHTML. Todas as perguntas e respostas estão em português. Para quem não conhece bem a linguagem, pelo menos da pra aprender as regras básicas do XHTML.

Deixem comentários dizendo quantos pontos fizeram.

E pra quem ainda não fez, também tem o Quiz de Javascript , o Quiz de CSS e o Quiz de jQuery

Semana que vem tem o Quiz de Jquery

[]s

CSS Sprites – Aumente o desempenho do seu site

CSS Sprites é uma técnica muito usada em grandes portais que serve para melhorar o desempenho do site diminuindo o número de requisições HTTP. É uma técnica bem simples que serve para unir várias imagens em um só arquivo e posicionar o conteúdo através de CSS.

Ficou tudo muito abstrato né?

Imagine o seguinte menu (onde cada time tem um link próprio):

Exemplo de CSS Sprite

Agora pergunto:

Quantas imagens são necessárias pra fazer essa coleção de escudos de times?

Apenas uma imagem.

Fixando a altura e a largura de cada botão, podemos posicionar o background de cada link com o css position.

É mais trabalhoso, mas tem vantagens:

Carregando uma imagem grande ao invés de várias imagens pequenas, economizamos banda (nesse exemplo eram 31kb agora são 11), porque pra cada imagem tem cabeçalho, paleta de cores usadas na figura, enfim, uma série de dados que se repetiam em todos os times. E quando tempos uma figura só no lugar de 32, esses dados são preenchidos uma vez somente, e assim economizamos banda.

Além disso, o que melhora e muito a velocidade, é fazer uma só conexão HTTP. veja mais tidbits Em arquivos muito pequenos, costuma demorar mais pra estabelecer uma conexão com o servidor do que o próprio download em sí. Então, 31 conexões a menos com o servidor, dão uma boa diferença no tempo total do load da página.

É simples pra fazer, tem duas formas.

Imagine o HTML desse exemplo:

<ul class="escudos">
	<li><a href="/atleticomineiro">Atlético Mineiro</a></li>
	<li><a href="/atleticoparanaense">Atlético Paranaense</a></li>
	<li><a href="/barcelona">Barcelona</a></li>
	...
</u>

A primeira forma, que eu acho mais simples, funciona como um “mapeamento” da imagem:

/* 
	Adicionando a única imagem de 
	backgrounde e definindo largura na UL
 */
ul.escudos{	
	background:url('times.png'); 
	width: 280px;
}


/* 
	Posicionando os LI's com float
	como fazemos normalmente 
*/
ul.escudos li{ float:left; }


/* 
	Definindo uma largura e altura fixa para 
	os links e adicionando text-indent negativo 
	para fazer o imagem-replacement
*/
ul.escudos li a{ 
	width:35px; 
	height:35px; 
	display:block; 
	text-indent:-9999px; 
}

A segunda forma é uma coleção de css position

/* Definindo a largura somente */
ul.escudos{	width: 280px;}

* 
	Posicionando os LI's com float
	como fazemos normalmente 
*/
ul.escudos li{ float:left; }

/* 
	Definindo uma largura e altura fixa para 
	os links e adicionando text-indent negativo 
	para fazer o imagem-replacement
*/
ul.escudos li a{ 
	width:35px; 
	height:35px; 
	display:block; 
	text-indent:-9999px; 
}

/* 
	Adicionando o background com todos
	os escudos em todos os li's
*/
ul.escudos li{ background:url('times.png'); }

/* 
	Adicionando um background para cada li
	(seria necessario colocar uma classe / id 
	para cada elemento). Veja os exemplos:
*/
ul.escudos li.atleticomineiro { background-position: 0 0; }
ul.escudos li.atleticoparanaense { background-position: 35px 0; }
ul.escudos li.barcelona { background-position: 70px 0; }

A mesma técnica pode ser aplicada em menus, principalmente com mouse over:

<ul class="menu">
	<li class="videos"><a href="videos.php">Vídeos</a></li>
	...
</u>

A imagem é uma só para o estado normal e o estado com over.

E no CSS:

#menu li.videos a { 
	background: url('/images/video.gif'); 
	display: block;
	width: 71px;
	height: 19px;
	text-indent: -9999px;
}
#menu li.videos a:hover { background-position: bottom; }

Repare que o height do link é metade do tamanho da imagem, assim, quando passa o mouse por cima do botão, o background é movido pra baixo dando a sensação de duas imagens diferentes.

As melhores ferramentas para validar seu código

O seu browser estar apresentando seu site corretamente não significa que seu código esta correto e também não significa que vai funcionar em mais 40 browsers que são usados atualmente. Programar a interface de um site é bem diferente do que programar numa linguagem server side onde, se você esquecer um “;” ou não fechar um if, seu código nem roda. Programando no lado do cliente, diversos erros de html são “consertados” pela maioria dos browsers. Ou seja, você esquece de fechar uma tag, ou coloca um <h1> dentro de um <a> no seu browser e aparece tudo ok, mas é errado.

Ok, mesmo que o site seja testado no Firefox, ie6, ie7, Safari, Chrome e Opera, quem garante que os navegadores Netscape 6.0, Ant Galio 3.1, Blaze 6.0 ou o Playstation 3 5.0 vão interpretar corretamente também?

E é por isso que devemos validar o código. Existem diversas ferramentas para validação de código.

A mais importante delas, creio que é o HTML validator, uma extensão de firefox. Além de válidar seu (x)html, ele diz o que está errado e como consertar o que é ótimo pra quem está começando a programar interface.
html validator

Para validar CSS, a melhor opção é o CSS validator da W3C. Infelizmente não existe (ou não conheço) nenhuma opção desktop. Mas mesmo assim, vale a pena utilizar.
CSS validator

copyJá o link-checker é um validador de links que analisa seu site e procura por links quebrados, muito útil. A análise é BEM completa, e demora muito tempo, afinal ele checa tudo. Analisando a home do TidBits ele demorou 286 segundos e checou mais de 200 arquivos.
link checker

Outras ferramentas como o firebug, ajudam bastante na codificação, principalmente pra detectar erros de JavaScript. E finalmente, para garantir a acessibilidade do seu site, existe diversas opções, duas em português: o Da Silva e o ASES desenvolvido pelo governo eletrônico.