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 30/11/07

Sexta-feira dos Web Standards #6

Estamos no final de Novembro e na sexta edição da Sexta-feira dos [tag]Web Standards[/tag]! Procurei fazer uma lista de links abrangente e, portanto, espero que aproveitem :)

  • 50+ CSS Best Practices and Coding Guidelines – Site com listagem de 50 boas práticas para melhorar seu [tag]CSS[/tag] e modo de escrevę-lo. Possui maior utilidade como guia do que tutorial propriamente dito.
  • Ensuring your HTML emails look great and get delivered – Como o nome diz, este artigo nos dá dicas para formatação de e-mails e maneiras para termos certeza de que os usuários os receberão de maneira correta. A parte mais interessante é a listagem de propriedades CSS suportada pela maioria dos clientes de e-mail.
  • Bring on the tables – Este, com certeza, é o melhor artigo que encontrei sobre utilização de tabelas. Explica detalhadamente desde a maneira mais simples até a mais complexa que, em termos de usabilidade, é a mais correta a ser utilizada.
  • CSS-only, tableless forms – Este site mostra exemplos de formulários desenvolvidos apenas com CSS e HTML puro, sem utilização de tabelas.
  • Top Ten Search Engine Optimization Myths – Artigo que lista os 10 maiores mitos sobre SEO e explicaçőes do porque de serem apenas mitos. Vale a pena conferir!
  • A List Apart: Articles: Suckerfish Dropdowns – Tutorial feito pela A List Apart mostrando como se faz um menu dropdown com utilização de CSS e JavaScript.
Topo 30/11/07

Atualizaçőes no Portfolio

Finalmente consegui atualizar meu [tag]portfolio[/tag] e inserir alguns trabalhos que desenvolvi na Mídia Digital.

Optei por divulgar o trabalho feito no site do Hospital Pequeno Príncipe, a reformulação do site da construtora Tecnisa, o blog da própria Mídia Digital, o novo site da agęncia curitibana Heads, o site da rede de hotéis Bourbon e a versão HTML do site Natal HSBC 2007 (Natal no Palácio Encantado).

Em todos eles participei do desenvolvimento HTML/CSS e, em cada um, inseri os créditos respectivos da equipe participante.

Topo 23/11/07

Sexta-feira dos Web Standards #5

Mais uma semana se passa e chega a quinta versão do Sexta-feira dos [tag]Web Standards[/tag]. Separei uma lista de links interessantes sobre CSS Hacks, Web Standards em geral e técnicas [tag]CSS[/tag].
Espero que aproveitem e deixem suas sugestőes para a próxima edição!

  • The 7 CSS Hacks that we should use – Artigo que mostra exemplos de hacks e práticas que podemos utilizar para “driblar” certas incompatibilidades existentes entre os [tag]browsers[/tag]. Claro, todos nós sabemos que devemos tentar evitar ao máximo esse tipo de solução, mas quando não há outra saída, é uma boa pedida.
  • Top 30 popular websites are NOT using tables as main layout structure – Artigo que comenta a listagem dos 30 sites mais populares que, curiosamente ou não, todos não utilizam tabelas para construção do layout.
  • Layout CSS sem tabelas – Página especialmente dedicada ŕ introdução do assunto para aqueles que ainda desejam aprender a desenvolver o layout de seus sites sem tabelas. Extremamente indicado para os iniciantes e para quem ainda deseja ter embasamento teórico.
  • Writing a CSS cross-browser – Artigo que vem em contrapartida ŕ primeira sugestão da lista pois explica como fazer um site aplicável a vários browsers distintos, tentando ao máximo não utilizar CSS Hacks.
  • Pullquotes em CSS – Este tutorial nos motra como fazer os famosos “pullquotes” utilizando um código simples, enriquecendo seu text, além de facilitar a leitura.
  • Construindo sites com CSS e XHTML – Site voltado ao lançamento do livro dando maiores detalhes sobre seu conteúdo. Como ainda não temos um livro nacional no nível dos estrangeiros sobre este assunto, estou ansioso para ver se a espera valeu a pena.
  • Acessibilidade web: 7 mitos e um equívoco – Artigo extremamente relevante que fala mais sobre [tag]acessibilidade[/tag] e idéias, muitas vezes erradas, que temos sobre o assunto.
Topo 16/11/07

Sexta-feira dos Web Standards #4

Enfim chega mais uma sexta-feira e, é claro, temos a quarta edição da Sexta-feira dos Web Standards!

Vejamos a lista de links que separei para vocęs nesta semana:

  • PHP + CSS Dynamic Text ReplacementText Replacement é o tipo de técnica utilizada para substituir texto em fonte padrão em outro tipo de formato. Neste caso, o PHP é utilizado para gerar títulos com fontes “não-padrão”, sem a necessidade do usuário possuir tal fonte, já que uma imagem é criada dinamicamente, baseada no texto do código HTML. Tem suas limitaçőes, claro, mas é uma boa opção para aquele projeto que depende muito de uma tipografia alternativa.
  • HTML Playground – Este site mostra uma listagem de tags HTML, descrição sobre cada uma e possibilidade de estilização por CSS, a fim de auxiliar na compreensão destas. Muito interessante para sabermos também qual tag é mais adequada para cada situação e suas limitaçőes.
  • How to create a unobstrusive print this page with JavaScript – Quando precisamos fazer um link para impressão de determinada página, geralmente optamos pelo javascript:window.print(), mas este pode acabar dificultando a vida do usuário, caso não tenha o JavaScript habilitado. Por isso, este artigo vem nos auxiliar com um script pronto para esta situação pois insere, dinamicamente, o link para impressão e, caso o usuário esteja com JavaScript desabilitado, o link não aparece em sua tela.
  • CSS Builder – Ferramenta interessante que auxilia no desenvolvimento de CSS, utilizando forma intuitiva para isso. Bom para os iniciantes que ainda precisam de ajuda para memorizar certas propriedades e as possibilidades de estilização que cada uma oferece.
  • CSS Sandbox – Este site possui uma caixa de texto, acima, que mostra em tempo real o resultado da estilização selecionada na lista abaixo. Boa ferramenta para testes de divergęncias em renderização entre browsers.
  • The Perfect Fluid Width Layout – Artigo mostrando o desenvolvimento do layout líquido “perfeito”, possuindo largura mínima de 780px, esticando até 1260px. Interessante para aqueles que desejam criar um site que seja adaptável ŕ maioria dos usuários, abrangendo o máximo de espaço disponível na tela.
  • Usabilidade de sites tem impacto no resultado das empresas – Artigo publicado na Folha Online que apresenta uma breve introdução sobre Usabilidade e seus conceitos, explicando a importância dos testes e o retorno que dão aos projetos direcionados ŕ Web.
  • Advanced CSS Menu – Muita gente ainda procura tutoriais de menus com CSS e esse link apresenta uma forma, muito interessante, de se fazer um menu horizontal com utilização de imagens para dar mais impacto visual. O interessante não é utilizar exatamente o que foi demonstrado, mas aproveitar a técnica para outros exemplos e necessidades.
Topo 09/11/07

Sexta-feira dos Web Standards #3

Está chegando a terceira edição da “Sexta-feira dos [tag]Web Standards[/tag]”.

Segue abaixo a lista de links interessantes que encontrei durante esta semana:

  • Web Design 101: Floats – Como ainda vejo muita gente com dificuldades relacionadas aos floats, resolvi selecionar este link pois mostra, detalhadamente, as possibilidades e limitaçőes desta propriedade.
  • Understanding z-index – Esta página explica a propriedade z-index, também indicada para os iniciantes, possibilitando usufruir dos benefícios dela.
  • One Star Gallery – Uma das mais novas galerias de sites feitos em [tag]CSS[/tag], provando as capacidades que esta técnica nos possibilita alcançar.
  • O que são Web Standards – Artigo traduzido por Maujor explicando os Web Standards, suas origens e fundamentos.
  • Comparision of Strict and Transitional XHTML – Lista comparativa de propriedades habilitadas (ou não) dependendo do tipo de XHTL escolhido (Strict ou Transitional).
  • Layout Gala – Exemplos de variaçőes em layout baseadas no mesmo código-fonte mudando, apenas, o CSS. Todos os exemplos estão disponíveis para download.
  • Emulate Ajax Image Loading with CSS – Técnica muito interessante que simula o carregamento de uma imagem através de loading similar ao utilizado em Ajax, porém, somente com CSS. Vale a pena dar uma olhada.
  • Entendendo a Arquitetura da Informação – Artigo que explica os fundamentos da Arquitetura da Informação, tema cada vez mais discutido em nossa profissão
  • CSS – Contents and compability – Tabela listando diversos seletores, pseudo-classes, declaraçőes, etc., e suas compatibilidades com [tag]browsers[/tag] diversos.
  • CSS tests and experiments – Listagem de vários testes e experimentos, aproveitando diversas características e propriedades do CSS.

Como sempre, caso tenham novas sugestőes para essa lista, é só deixar nos comentários!

Topo 06/11/07

BlogCamp Curitiba – Novas datas

BlogCamp Curitiba 2007BlogCamp Curitiba 2007
Para quem não sabe, BlogCamp é um evento destinado a blogueiros (obviamente), no qual não há palestras ou palestrantes definidos; tudo acontece naturalmente, garantindo maior interação entre os participantes.

O evento tem sua primeira edição em 2007 e acontecerá em várias cidades do Brasil, entre elas, Curitiba, que terá suas datas alteradas. No dia 30/11 (Sexta-feira) será realizado o “Welcome Blogdrink“, para que os participantes possam se conhecer e no dia 01/12 (Sábado) acontecerá o evento propriamente dito.

Maiores detalhes no site oficial do evento.

Topo 02/11/07

Sexta-feira dos Web Standards #2

Chegou mais uma sexta-feira e, portanto, estou postando a segunda edição da lista semanal de links e espero que lhes ajude a solucionar problemas e, claro, adquirir novos conhecimentos!

  • Evaluation of [tag]WYSIWYG[/tag] editors – Artigo muito interessante que mostra detalhes de testes realizados com vários editores visuais que, em sua maioria, são utilizados para cadastro de conteúdo dinâmico (por exemplo, sistemas gerenciadores de conteúdo – CMS).
  • [tag]XHTML[/tag] Character Entity Reference – Lista de referęncia dos valores UTF para vários caracteres especiais, auxiliando no desenvolvimento de seu site, caso hajam problemas para exibição dos mesmos.
  • CSS Layout- 100% height – Exemplo de layout feito com [tag]CSS[/tag], ocupando toda a altura da janela. Basta abrir o código fonte e verificar a maneira pela qual o site foi produzido.
  • FancyForm – Ferramenta que possibilita a troca das velhas checkboxes de formulários para imagens de acordo com sua escolha, através de JavaScript e CSS. Dependendo da necessidade proveniente do layout, esta funcionalidade pode fazer toda a diferença!
  • Fade Out Bottom – Exemplo de layout que utiliza “fade out” no rodapé do site, criando um efeito visual muito interessante.
  • IE/Win Inherited Margins on Form Elements – Este artigo mostra detalhadamente o bug do [tag]Internet Explorer[/tag], mais especificamente em elementos de formulários (como inputs, selects, etc.), que acabam herdando as margens do elemento pai, causando vários problemas relacionados a layout. Ao final, mostra como este problema pode ser corrigido.
  • 10 colour contrast checking tools to improve the acessibility of your design – Artigo que comenta 10 ferramentas destinadas ŕ análise de contraste de cores em seu site, a fim de melhorar a acessibilidade do mesmo.

Espero que esta lista tenha sido útil para vocęs e, certamente, semana que vem teremos a terceira versão!

Links Randômicos
Meta
Apoio
Créditos
Creative Commons