Aprendendo webdesign em caixa de Sucrilhos #Parte 1
Postado em Dezembro 19th, 2008| Algo sobre Ossos do Ofício, Sites, Vale uma risada, Web Standards
Bom, dedico esse post clientes que costumam contratar os webdesigner “20 Conto”. Aqueles que compram uma revista “Aprenda a Construir Sites” por R$19,90 pela manhã, e de tarde já saem por ai com seu cd de templates debaixo do braço se achando O UÉBIDIZAINER.
Fui contratado para dar manutenção a um site by 20 Conto. E cada documento html que eu abria, aumentava meu desespero. Itens como CSS, Includes, Pastas ou qualquer outro ítem que sugira o mínimo de organização estavam longe de existir. Segue abaixo uma mostra do código que me fez chegar a beira de um ataque de nervos.
<p class=”MsoNormal” style=”margin-top: 0cm; margin-right: 0cm; margin-bottom: 6pt; text-indent: -17.85pt;”><span style=”font-size: 12pt;” lang=”DE”>·<span style=”font:7.0pt “>
</span></span><strong><span style=”font-size:12.0pt;font-family:” lang=”DE”>Artigos:</span></strong></p>
Por isso, se você está procurando algum curso de WebDesigner, aqui fica os meus mais sinceros Parabéns. Você acaba de ficar anos a frente do 20 Conto.Só cuidado pra não bater a cabeça e fazer algo parecido com isso.
E aos clientes, para tentar entender o que toda essa conversa significa, esse bloco de coisas eu escrevi ai em cima, foi substituido por:
<h2>Artigos:</h2>
.
Até mais galera, e bons estudos. 
Usuários, Resoluções e Navegadores - A Saga
Postado em Dezembro 10th, 2008| Algo sobre Acessibilidade, Bugs do IE, Firefox, Ossos do Ofício, Web Standards
Bom dia caros amigos. Gostaria de opnião de vocês referente a um assunto que gera muita discussão. Usuários e a Resolução.
Hoje encontramos computadores até de R$800 nas mais diversas lojas. Extra, Carrefour e outras do tipo. Apesar de básicos, esses computadores possuem uma configuração que suporta resoluções um pouco mais altas (1024x 768 e 1280 x1024).
Muitos dizem que temos que dar opção para os usuários de 800×600 visualizarem os sites. Realmente concordo com esse pensamento, mas e o pessoal do outro extremo? É complicado limitar os projetos web por conta de uma minoria que ainda usa essa configuração (nos meus projetos, são apenas 3%).
Existem também usuários que gostam de se atualizar, que possuem resoluções bem mais altas (a partir de 1440), com links de no mínimo 600kb, que a nível nordeste é bem alto. Se certa forma, estamos atingindo esses usuários, já que tudo é limitado ele não tem diferencial nenhum, com o detalhe que ele pagou caro para isso.
Boa parte dos problemas com resoluções, podem ser resolvidos com a análise do público alvo do projeto. Fazer o site da BMW em 800×600 por exemplo. Quem tem interesse em uma BMW, em geral deve ter um computador razoável certo? Apesar de não ser uma regra, esse é o raciocínio que a maioria dos desenvolvedores usa.
É necessário forçar os usuários a fazer um update de alguns detalhes mínimos, como resoluções, e navagadores. A maioria dos usuários do IE 6, nem sabe que ele pode ser atualizado. Então mãos à obra.
Como não podemos forçar um usuário a adquirir uma máquina nova, e aposentar o k6II com Windows 98 e 800×600 dele, podemos tentar induzir os usuários do IE6 a pelo menos atualizar para o IE7 (pedir para colocar o Firefox seria o ideal, mas ai já pedir demais).
Vamos lá galera. Agora é com vocês.
Formulário Semântico com CSS
Postado em Agosto 31st, 2008| Algo sobre CSS, Dicas, Tutoriais, Web Standards
Um dos passos mais difíceis para quem trabalha com CSS, (geralmente quem está migrando de Table para Tableless), é a parte de formulários.
Vou listar abaixo algumas dicas de como criar um formulário simples, formatando apenas com CSS. Mãos à obra.
Não é necessário o uso de tabelas para diagramar um formulário. Para aqueles que tem vários tamanhos de campos, crie várias classes com tamanos de acordo com a necessidade. Veja o exemplo.
Esse exemplo é bem simples e da para ser usado como base para formulários mais complexos.
Os resultados do Google e o seu site
Postado em Fevereiro 14th, 2008| Algo sobre Acessibilidade, Geral, Google, Sites, Tutoriais, Web Standards
De alguns tempos pra cá (uns 6 ou 7 anos pelo menos), estudiosos desmistificaram o termo semântica, e com isso surgiu o entendimento dos resultados das buscas em sites como o nosso velho Google. A partir daí, a guerra pela primeira página no resultado das pesquisas, deixou de ser algo tão abstrato.
Com esse entendimento, todos nós desenvolvedores, podemos nos preocupar com a semântica, de modo é preparar o site para os buscadores, e apesar de não ser fácil, saber o que influencia no resultado final.
No livro Usabilidade na Web (Jakob Nielsen e Hoa Loranger), os autores mostram o comportamento dos usuários a frente de um retorno de busca. 51% dos usuários clicam apenas no primeiro resultado, e apenas 7% avançam para a página 2, ou seja, além da guerra pela página 1 do Google, mais da metade dos usuários, ficam só com o primeiro resultado, (Isso sim é guerra).
Existem também a disputa pela área “acima da sobra”, que seriam os 5 primeiros resultados visíveis sem a necessidade de rolar a página.
Na tabela a seguir, veja a quantidade de clique mediante um resultado de busca.
É interessante a relação entre os últimos 2 resultados da primeira página, pois o 10° é mais acessado que o 9°, por conta do destaque no fim da página.
Então agora senhores, vamos correr em busca do priemeiro resultado, porque a primeira página já não é tão relevante.
Dicas de CSS #2
Postado em Fevereiro 8th, 2008| Algo sobre CSS, Geral, Tutoriais, Web Standards
Dando continuidade a nossa busca incansável de novidades no mundo do CSS, estou postando mais algumas dicas que encontrei no site www.htmlstaff.org. Vale a pena ficar atualizado. Segue a lista.
1. div1 é diferente de menu
Evite dar nomes como div1, div2, div3 aos seus elementos. Eles não explicam nada e na hora da manutenção vão tornar seu trabalho mais lento. Da mesma maneira, barra_azul não faz muito sentido: e se você mudar a cor do site? Prefira nomes explicativos, como menu ou barra_links.
2. Maiúsculas e minúsculas
Nomes de elementos fazem diferença entre letras maiúsculas e minúsculas: BarraLinks é diferente de barralinks. Preste atenção na hora de usar seu elemento no HTML.
3. id x class
Para elementos que aparecem apenas uma vez no layout (menu, rodapé, cabeçalho, etc) prefira a declaração id, precedida por um sinal de # (como #menu). Para elementos que vão aparecer várias vezes, utilize a declaração class, precedida por um ponto (como .noticia).
4. Compartilhe declarações entre vários elementos comuns
Se vários elementos terão características em comum, declare-os todos de uma vez, separados por vírgula:
h1, h2, h3, h4 {
font-family: Arial, Helvetica, Sans-Serif;
}
5. Lembre-se da hierarquia e organize-se
Por ser uma folha de estilo em cascata, a última declaração é a que prevalece. Preste atenção para não declarar um elemento duas vezes: na hora da manutenção, você pode fazer a alteração na primeira e se perguntar porque ela não funciona, quando na verdade uma segunda declaração está perdida no meio do seu código (por isso organização é fundamental!).
6. Comente os códigos avançados
Quando você utilizar o CSS para efeitos mais avançados, como um menu em abas, comente seu código para não esquecer o que cada parte dele faz:
#menu ul li a
/* aba normal */
{background: #444; color: #FFF; border: 1px #FFF solid;}
#menu ul li a:hover
/* aba selecionada*/
{background: #FFF; color: #F00; border: #F00 1px solid;}
7. Anote suas cores
#09F ou #F09, qual é o rosa e qual é o azul? Mesmo se você conseguir fazer cálculos RGB de cabeça pra saber a tonalidade da cor sem uma tabela de cores hexadecimal, econonize tempo anotando a cor correspondente de cada código no seu arquivo:
/* ************************************ */ /* */ /* Cores usadas no layout */ /* */ /* cinza fundos: #F5F5F5; */ /* cinza bordas: #B6B6B6; */ /* azul link: #336699; */ /* azul lnk ativo: #003366; */ /* */ /* ************************************ */
8. Declare as unidades
Quando trabalhar com valores diferentes de zero, declare as unidades (px, pt, etc). Cada navegador assume uma unidade padrão quando ela não é especificada, gerando resultados diferentes em cada navegador.
9. Tenha certeza que o efeito desejado funciona em todos os navegadores
Barras de rolagem coloridas, divs semi-transparentes… Tudo isso é muito bonitinho, mas não funciona em todos os navegadores. Projete seu site de uma maneira atraente sem esses recursos, e, de novo, certifique-se de que seu CSS tem o mesmo efeito no maior número de navegadores possível.
10. Não confie na sua memória
Com o tempo, é natural que decoremos os principais elementos e seus atributos. Mesmo assim, tenha sempre um guia de consulta rápida ao seu alcance, para tirar dúvidas sobre o funcionamento deles. Um ótimo livro que eu uso e recomendo é o “CSS - Cascading Style Sheets - Guia de consulta rápida”, de Luis Gustavo Amaral.
11. Inspire-se
Sites como o CSS Zen Garden e o Maujor são ótimos para ter uma idéia das novas tendências. Visitar esses e outros endereços regularmente é recomendável.
Veja outras dicas de CSS
