Histórico do mês de Setembro, 2007

Palestra AlternativaWeb em Fortaleza

Segunda-feira a noite começará o AlternativaWeb 2007. O tema do evento será Web 2.0. Farei uma palestra juntamente com Tiago Dória, Bruno Ávila e Michel Lent.

Se alguém filmar as palestras, por favor, me falem depois pra poder publicar aqui o link do video.

Pessoal de Fortaleza, como está o tempo aí?

16 Comentários

---

Implementação HTML

Estava implementando partes do site novo da Visie e resolvi fazer um videozinho rápido da implementação da parte de treinamentos. Fiz sem narração desta vez. Fiz outro vídeo mostrando a implementação CSS. Ainda não consegui colocar no ar, mas logo mais publico por aqui. E já peço desculpas pelo tamanho da letra!

O vídeo está hospedado no CodeShow Videos. Quem não viu ainda, vale a pena dar uma olhada. Imagine uma espécie de YouTube só que destinado a desenvolvedores e com vídeos sobre desenvolvimento web. Isso é o CodeShow Videos.

21 Comentários

---

Ferramenta definitiva para a criação de websites?

Recebi de um leitor, um email que ele havia recebido de uma escola de tecnologia. O newsletter da escola, dizia assim:

Com o Dreamweaver 8 você poderá criar layouts, interfaces e sites completos, utilizando as mais conhecidas linguagens para a internet, tais como: XHTML, Javascript e DHTML, sem precisar digitar uma linha de código sequer. Isso mesmo, sem código, bastando entender como funciona a interface e as ferramentas de apoio do software, você criará tudo de forma visual.

Não perca mais tempo com códigos e programas confusos, aprenda a usar uma ferramenta que possibilita a visualização simultânea do que você está fazendo!

Desenvolvedor web que não sabe código, é desenvolvedor?
Repito: o Dreamweaver não é ruim, contanto que você digite código e não use aquela solução nojenta de preview. O seu usuário vai enxergar o site pelo browser. Logo, visualize pelo browser o resultado do seu código.

O Dreamweaver se torna um vilão a partir da hora que o desenvolvedor perde o contato com o código. Aí o desenvolvedor deixa de ser um profissional e se torna uma pessoa qualquer, que conhece um programinha qualquer.

Falarei sobre código na palestra do AlternativaWeb 2007, lá em Fortaleza.  Compareça!

40 Comentários

---

Site em Ajax? Site em Flash? Pergunta ruim.

Recebi há poucos dias um email que me deixou intrigado. Um amigo descrevia um site que vai construir em breve e me perguntava: você acha que devo fazê-lo em Ajax? Essa é uma pergunta ruim. A boa pergunta seria: onde, nesse site, eu deveria usar Ajax?

Enquanto os cabeças-pequenas ficam discutindo se devem fazer ou não site em Flash, o Flickr faz um site HTML, com um excelente slideshow em Flash. Deixe-me perguntar: o YouTube é um “site em Flash”? O Google Video? E o Charges.com.br? Não? Uma vez que o uso de Flash era inevitável, porque não fizeram logo o site todo em Flash? Porque, amiguinhos, Flash é bom para umas coisas, HTML é bom para outras. Eis uma lição que precisamos aprender: não ao radicalismo, nem oito, nem oitenta.

HTML é a ferramenta ideal se você quer que as pessoas consigam usar o botão voltar, adicionar bookmarks, mandar o endereço para os amigos, selecionar e copiar texto, imprimir a página, encontrar seu conteúdo no Google e etc. Claro, dá para fazer quase tudo isso funcionar com Flash ou Ajax, mas com HTML você faz isso sem trabalho nenhum. Está pronto. Basta escrever bom HTML que o resto acontece sozinho. Além disso, HTML tem um custo de desenvolvimento muito reduzido em relação ao Flash. Custo de desenvolvimento, amigos, se mede em horas de trabalho. Gerar formulários, buscas, listagens e relatórios é muito mais fácil em HTML do que em Flash. Se você usa um desses frameworks modernosos então, nem se fala.

Por outro lado, Flash é bom para algumas outras coisas. Por exemplo, se você vai publicar vídeo numa página web, Flash é hoje a opção mais leve, simples e compatível. Ajax, por sua vez, é excelente para evitar refreshs e modifica o modelo de interação com a página. Então não precisamos escolher entre um “site em Flash” e um “site em Ajax” em detrimento de um “site comum, em HTML”.

Para ajudar meu amigo, vou publicar aqui algumas coisas que levo em consideração ao escolher onde usar Javascript e Ajax em um site. Entenda que isso não é uma verdade absoluta, há provavelmente muito mais coisas que você pode levar em consideração, em que eu talvez nunca tenha pensado. Hoje, eu penso no seguinte:

• Acessibilidade: o bom Javascript não quebra a acessibilidade do bom HTML (posso falar mais sobre isso outro dia.) Mas isso pode dar algum trabalho. É preciso levar em conta a importância da acessibilidade para aquela aplicação específica. Sim, acessibilidade pode não ser importante para determinadas aplicações. Por exemplo, o Google Maps é inacessível a deficientes visuais e a qualquer um que não consiga usar um mouse. Quem aí vai dizer que eles fizeram uma escolha errada? Mas, para a maioria das aplicações, acessibilidade é importante, e é preciso pensar nisso antes de planejar nosso Javascript.
• Modelo de interação: você pode torcer o nariz, mas as pessoas estão acostumadas com o modelo de interação com páginas: clica - espera um pouquinho - carrega uma nova página. Elas sabem usar os recursos do navegador feitos para esse modelo, como a barra de endereços, os bookmarks, e o botão voltar. Ah, o que seria de nós sem o botão voltar? Então, eu uso Javascript sem medo onde é claro para as pessoas que elas estão interagindo com a mesma página, no modelo “aplicação”. Mas evito usá-lo onde possa dar a impressão de que estão navegando para outra página. Caso contrário, elas vão tentar usar o botão voltar e o resto todo. Você leu certo, “evito” não quer dizer que eu nunca faça, só tento ser muito parcimonioso. O nosso Tutorial de Ajax (e também a continuação) foi feito em Ajax por motivos didáticos. Navegando nele você vai sentir falta do botão voltar e de poder usar bookmarks.
• Custo x benefício: convenhamos, HTML comum funciona bem para a maioria das coisas, e realmente muito bem para algumas. É a ferramenta ideal, por exemplo, para publicar um site de conteúdo, como esse aqui. Um portal de notícias, um blog, um manual de produto, etc. Usando Ajax você pode fazer com que, ao navegar em um site assim, seja recarregada apenas a parte principal, com o conteúdo. Menus, cabeçalho e rodapé permanecem. Mas será que vale a pena? Trabalhando com padrões web, com seu CSS, javascript e imagens no cache, você vai economizar quanto em banda com esse Ajax? Aqui no Tableless economizaríamos cerca de 15 Kb por página. Por outro lado, teríamos que incluir um bocado de Javascript colocar esse Ajax para funcionar, e manter funcionando coisas como o botão voltar. Sendo que cada visitante vê em média 2 páginas (1,95 para ser mais exato) isso dificilmente representaria alguma economia em banda. E daria um bocado de trabalho.

Logo, meu conselho é: não faça sites “em Ajax”, nem sites “em Flash”. Faça sites com os padrões web, e use Ajax ou Flash onde isso for realmente ajudar seus usuários.

31 Comentários

---

CSS Reset

Sempre que começo a escrever meu CSS, eu inicio colocando um * (asterísco) e zero algumas propriedades. Esse técnica se chama CSS Reset.

Alguns elementos do HTML já tem um valor de margin, padding, borda e outros tipos de formatação definidos como padrão. O que acontece é que esses valores pré-definidos são necessários para que quando o site seja visto sem CSS algum, o usuário conseguirá ter um mínimo de legibilidade na visita.
Quando você vai implementar o CSS, esses valores atrapalham um bocado. Por isso, usamos essa técnica para zerar todas esses valores pré-definidos e inserir os valores que realmente usaremos para reproduzir o layout.

O asterísco é um seletor de CSS. Muito útil por sinal. A função dele é simples: selecionar todos os elementos.
div#geral #texto * {
color:red;
}
Neste caso, o asterísco irá “selecionar” todos os elementos que estão dentro do objeto #texto que está dentro do div #geral. Não importa quais elementos eles sejam, o * captura todos.
Infelizmente, não funciona no IE6.

Eu reseto meu CSS desta maneira:
* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}
Não se preocupe, usar o asterísco sozinho no seletor funciona em todos os browsers.

Se você tiver a necessidade de zerar mais propriedades, fique à vontade. O Eric Meyer já é mais violento e faz um reset geral em seu CSS, note que ele não usou asterísco.
Não acho necessário tanta coisa. Mas isso vai da maneira de trabalho de cada um. O código que mostrei aqui é simples resolve meus problemas e é isso que importa. Você vai adaptá-lo com sua maneira de desenvolvimento.

25 Comentários

---

Fiat Uno e Peugeot 206

Não preciso dizer que os dois carros são totalmente diferentes. Mas, qual dos dois você teria? Me diga… Se você pudesse escolher, você ficaria com qual dos dois?
Acredito que 206 será a resposta mais dita para essa pergunta.

Queria então fazer outra pergunta: Porque você escolheria o 206? O Uno também não vai te levar para lá e para cá como o 206? O que te faz querer um 206 e não um Uno?
Para mim, a culpa é dos detalhes.

Em algumas versões do 206, ao abrir a porta, olhando para baixo, você verá uma soleira de alumínio trabalhado, escrito PEUGEOT, muito bem acabada. Como se dissesse: Prepare-se, você não está entrando em um carro qualquer.
No Uno…

Quando você já está dentro do 206, o painel tem uma série de pequenos compartimentos onde você consegue guardar miudezas como moedas, chaves e etc. Sem contar o material e o desenho do painel.

O detalhe em metal na ponta do câmbio dá um charme diferente para o 206. No Uno não há uma pontinha de metal… mas uma espécie de “sanfona” de borracha envolve o braço do câmbio. Muitas vezes essa “sanfona” rasga na base de plástico do câmbio.

A distância de um detalhe separa sua preferência pelo 206 e seu desprezo pelo Uno. Apenas um detalhe.
E em seus projetos? Já ouviu falar de um ditado que diz assim: O Diabo está nos destalhes?

O mesmo pensamento se aplica sobre PCs comuns e os fabricados pela Apple. A riqueza de detalhes da Apple faz a pessoa se sentir importante.
Outro exemplo: você entra em dois restaurantes: em um deles há 150 mesas. No outro há 15 mesas. Em qual dos dois restaurantes você se sentirá melhor atendido?

Entregar projetos ricos em detalhes faz valer a pena, acredite. Ter aquelae detalhe, mesmo sendo algo que se não existisse, não prejudicaria o funcionamento do todo, faz uma grande diferença. Não importa se o detalhe é visível (layout, texto, etc) ou invisível (código, banco, etc), ele sempre fará a diferença entre você e qualquer outra pessoa.

Pense bem: Os dois carros podem te levar para os mesmos lugares. Os dois restaurantes servem frango à milanesa. Mas em quais das opções você vai se sentir como se tudo fora feito especialmente para você?

38 Comentários

---