Estou inaugurando uma série de posts que farei semanalmente, para ser mais exato, todas as sextas, apresentando links relevantes sobre Web Standards, que podem auxiliar o pessoal da área.

Para iniciar, aí vão os primeiros artigos indicados:

• CSS Cheat Sheet - Lista de propriedades, valores e particularidades que podem ajudar, tanto os iniciantes quanto experientes no assunto. É o tipo de recurso que pode estar sempre à mão para auxiliar em problemas relativamente simples.
• On having layout - the concept of hasLayout in IE/Win - Essa é uma questão ainda não muito difundida e creio que, caso todos tivessem conhecimento, muitas inconsistências na renderização do Internet Explorer poderiam ser resolvidas ou, pelo menos, esclarecidas. Esse site explica o que podemos fazer para atribuir “layout” para determinado elemento em nosso código, fazendo-o renderizar da maneira desejada.
• Putting CSS Footers in Their Place - Este artigo nos ensina uma técnica para fazer rodapés fixos, isto é, rodapés que necessitam ficar na porção inferior do site, independente da altura do conteúdo. Antigamente isso era feito de maneira muito simples com tabelas, mas agora, com CSS, algumas dificuldades apareceram.
• CSS/DOM - Styling an input type=”file” - Como o nome diz, este artigo mostra uma maneira de estilizar inputs do tipo “file”, utilizando JavaScript.
• A List Apart: Findings from the Web Design Survey - Artigo divulgando análise sobre os resultados das pesquisas acerca dos profissionais da área de Web Design, abrangendo idades, faixas salariais, gêneros, localidades, etc. Muito interessante para aqueles que desejam ficar por dentro de estatísticas e saber mais sobre a profissão.
• CSSType - Para aqueles que necessitam saber quais fontes são seguras para utilizar na Web, foi criada esta ferramenta que mostra como o texto será gerado, além de possibilitar customizações via CSS em tempo real.
• Designing For Every Browser - Artigo que indica várias maneiras de solucionar problemas direcionados a navegadores específicos (Firefox, IE, Opera, Safari), auxiliando na resolução de várias inconsistências na renderização dos mesmos.
• How to correctly insert a Flash into XHTML - Passo-a-passo que explica a maneira correta de inserir um elemento em Flash em documentos XHTML Strict.
• Creating CSS Liquid Tabs for Menus - Este artigo mostra como produzir abas flexíveis para menus (esticam juntamente com o texto), utilizando técnica parecida com a utilizada para fazer botões com cantos arredondados.
• YAML Builder - Ferramenta que facilita a criação de layouts em CSS de modo prático e rápido. Após finalizar as modificações, é só pegar o código XHTML e CSS gerados (incluindo CSS exclusivo para correções no IE6).

Espero que tenham gostado dessa primeira lista! Semana que vem tem mais

Technorati Tags: Web Standards

A evolução na área dos Web Standards é inegável; mais e mais desenvolvedores vêm aderindo às definições da W3C, sabendo na prática os benefícios de seguir os padrões.

Mas um grande problema que enfrentamos acontece, principalmente, no momento de tentarmos convencer um cliente de que contratar alguém experiente em Padrões Web é necessário e benéfico para seu negócio. Claro, não há nenhuma fórmula mágica para conquistar os clientes, mas há certos cuidados que podem ser tomados.

Um detalhe que não devemos nos esquecer é que o cliente não quer saber detalhes técnicos sobre o assunto, pois você pode acabar fazendo o efeito contrário, deixando-o “assustado” com tantos termos diferentes. Não tente explicar que ao utilizar CSS, o site será desenvolvido “separando o conteúdo de sua forma de apresentação”, por exemplo, pois o que realmente lhe interessa, basicamente, é tempo e dinheiro. Portanto, a maneira certa de demonstrar os benefícios de contratar alguém com estes conhecimentos, seria demonstrar os resultados práticos para o negócio, ou seja, o que isso tudo pode trazer de bom para o cliente, justificando todo o investimento.Entrando em detalhes na questão do tempo e dinheiro, pode-se explicar o fato de que o site feito seguindo os Web Standards garante grande economia na transferência de dados com o servidor de hospedagem e, conseqüentemente, exigindo menores custos para manutenção do site. O custo é menor com relação ao desenvolvimento, pois exige menos tempo do profissional e, conseqüentemente, a manutenção é facilitada, pois dependendo do tipo de atualização, bastam apenas alguns minutos para alterar determinado item do layout que se deseja modificar.

Além da maior agilidade do site, também podemos falar na questão do usuário. Graças à menor “exigência” na conexão, o site torna-se mais amigável para os visitantes, pois seu acesso torna-se mais rápido, facilitando sua navegação. Podem-se fazer ajustes para que deficientes consigam acessá-lo e usufruir de seus serviços, deixando de excluir possíveis clientes, diferenciando-se dos concorrentes.

Também podemos falar pelo lado da divulgação, pois como nós sabemos um site desenvolvido de maneira correta, possui melhor indexação nos resultados de busca. Isso com certeza será um dos pontos determinantes para a decisão do cliente, pois representa maior visibilidade da empresa perante os concorrentes, aumentando a chance de visitas, além de facilitar o acesso ao site por quem está buscando determinada informação.

Desta forma, se deixarmos claro o lado da economia de tempo e dinheiro que este tipo de desenvolvimento pode gerar, as chances de conquistar novos clientes irá aumentar muito; basta saber deixar o “fanatismo” de lado no momento de explanar os benefícios, para acabar não perdendo seu cliente.

Technorati Tags: Web Standards

Conforme post anterior no qual relatei minhas opiniões sobre o 12º Encontro de Web Design, em Curitiba, comentei a apresentação de Melqui Jr. sobre o tema Arquitetura da Informação. Este é um assunto que vem sendo comentado cada vez mais, devido sua importância no desenvolvimento de projetos direcionados à Web.

Para aqueles que não compareceram ao evento, foi disponibilizada a apresentação via Slideshare. Recomendo a todos que tem curiosidade e não conhecem muito sobre a história, método de trabalho e resultados na prática, após utilização da Arquitetura da Informação em seus projetos.

Technorati Tags: Slideshare

Quem utiliza Firefox sabe que um de seus maiores benefícios está no fato de possuir milhares de extensões disponíveis para download.

Existem extensões (plugins) para todos os tipos, destinadas à diversos públicos e, como diz o título deste post, estarei relacionando algumas que podem auxiliar nosso processo de desenvolvimento dos sites:

• Web Developer - Quem trabalha com desenvolvimento Web não pode deixá-la de lado pois oferece inúmeras ferramentas como funções para desabilitar JavaScript, Cookies, imagens, edição de CSS e HTML em tempo real, régua para medições, ajuste de tamanho da janela para testes de resolução, entre inúmeras outras funções.
• ColorZilla - Oferece funcionalidade semelhante à color picker do Photoshop, possibilitando a coleta de cores no site, além de seletor de cores seguras para Web e opção de Zoom.
• del.icio.us Bookmarks - Apesar de não representar funções direcionadas especificamente a Web Designers, esta extensão facilita na integração com o sistema, simplificando a inclusão de novos sites em seus bookmarks, podendo ser mais eficiente na coleta de novas informações para seus sites.
• Dust-Me Selectors - Ferramenta que mostra quais seletores CSS não estão sendo utilizados no site aberto no momento.
• Firebug - O que seria de nós sem esta extensão? Para quem necessita constantemente verificar os sites desenvolvidos buscando por bugs, esta ferramenta mostra exatamente qual estilo determinado elemento está herdando e oferece possibilidade de edição de HTML e CSS em tempo real. Além disso, possui verificador de erros em JavaScript, além de mostrar o tempo necessário para carregar cada elemento do site. Imprescidível.
• FireFTP - Extensão que insere um cliente FTP direto no browser. Possui as funções básicas de um programa da área.
• View Source Chart - Possibilita que o código do site seja visto de maneira mais organizada, em forma de caixas coloridas, facilitando a diferenciação de determinadas regiões do código.
• SEO for Firefox - Voltada àqueles que desejam melhorar o rendimento de seus sites nos sistemas de busca. Basicamente, esta extensão mostra o desempenho de determinado site nos diversos buscadores, a fim de facilitar sua pesquisa e acompanhamento desses dados.
• Screengrab! - Captura imagens do site de forma fácil e rápida. Você não precisará mais utilizar o velho print screen para salvar imagens do site desejado.
• Operator - Para aqueles que utilizam Microformats em seus sites, esta extensão é indispensável. Ao visitar um site que utilize este formato, são exibidas opções para guardar os contatos (via hCard, por exemplo), datas relevantes (hCalendar), locais, tags, etc. Claro, também voltada ao usuário comum para que possa usufruir os benefícios dos Microformats.
• IE Tab - Caso você precise testar seu site no Internet Explorer, não precisa mais abrí-lo pois esta extensão o fará diretamente dentro do Firefox.
• HTML Validator - Mais uma extensão que com certeza deve ser utilizada pois exibe, automaticamente, erros em seu código HTML e mostra exatamente onde se encontram e a razão para estarem ocorrendo.
• LinkChecker - Checa rapidamente a validade dos links de determinado site.
• Font Finder - Exibe os estilos herdados pelo texto selecionado.
• OperaView - Abre o site no Opera através do menu contextual do Firefox, facilitando a vida daqueles que necessitam testar seu site neste navegador.
• ScribeFire - Oferece opções para postagem direta em blogs, bloco de notas, além de função “drag and drop” para copiar texto formatado de determinado site para seu blog.

Caso você conheça mais extensões relevantes para o pessoal da área, deixe seu comentário

Technorati Tags: Firefox, plugins, Web Developer, Web Designers