Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

Topo 26/10/07

Sexta-feira dos Web Standards #1

Estou inaugurando uma série de posts que farei semanalmente, para ser mais exato, todas as sextas, apresentando links relevantes sobre [tag]Web Standards[/tag], 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 :)

Topo 25/10/07

Como fazer seus clientes se importarem com os Web Standards?

A evolução na área dos [tag]Web Standards[/tag] é 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.

Topo 09/10/07

Apresentação sobre Arquitetura da Informação

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 [tag]Slideshare[/tag]. 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.

Topo 04/10/07

Extensőes Firefox para Web Designers

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

Existem extensőes ([tag]plugins[/tag]) 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:

  • [tag]Web Developer[/tag] – 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 [tag]Web Designers[/tag], 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 :)

Links Randômicos
Meta
Apoio
Créditos
Creative Commons