Resolvendo o problema do FLOAT e BACKGROUND no CSS

Algumas vezes, para conseguir chegar ao ponto que você queria, é necessário alguns “trambiques”.

Veja como consertar erros de backgrounds quando se usa elementos flutuantes dentro de um elemento com um background.

Um exemplo do problema:

Conteúdo do box 1
Conteúdo do box 2

#boxes {
	min-width: 400px;
	width: 400px;
	text-align: left;
	padding: 10px;
	margin: 0px;
	background-color: #FFC;
}

#box1 {
	float: right;
	width: 273px;
	height: 170px;
	padding: 5px;
	border: 1px solid #099;
}

#box2 {
	float: left;
	width: 73px;
	height: 170px;
	padding: 5px;
	border: 1px solid #6CC;
}

RESULTADO:

errado

Ruim, não?!

Veja que eu criei uma div pai chamada boxes e nela foi adicionada uma propriedade background. E suas filhas box1 e box2 estão flutuando. E a div pai está deslocada com relação as suas filhas box1 e box2.

Agora vamos adicionar um código no CSS para corrigir este problema:

#boxes {
	min-width: 400px;
	width: 400px;
	text-align: left;
	padding: 10px;
	margin: 0px;
	background-color: #FFC;
}

#box1 {
	float: right;
	width: 273px;
	height: 170px;
	padding: 5px;
	border: 1px solid #099;
}

#box2 {
	float: left;
	width: 73px;
	height: 170px;
	padding: 5px;
	border: 1px solid #6CC;
}

/* INICIO limpa as floats */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }

* html .clearfix { height: 1%; }

/* FIM limpa as floats */

E alterar no HTML:

Conteúdo do box 1
Conteúdo do box 2

RESULTADO:

certo

Agora sim!

Use e abuse!

O que é SEO ?

O SEO fornece serviço de melhorias para proprietários de sites assim como, elevar o site em mecanismos de busca, dar conselhos sobre a arquitetura do site, como encontrar diretórios relevantes e analisar seu desempenho para todos esses casos.

SEO abrevia Search Engine Optimization ou no português: “Otimizador de mecanismo de busca”.

O SEO fornece serviço de melhorias para proprietários de sites assim como, elevar o site em mecanismos de busca, dar conselhos sobre a arquitetura do site, como encontrar diretórios relevantes e analisar seu desempenho para todos esses casos.

Algumas dicas que o Google dá para quem quer consultar um SEO:

  • Tenha cuidado com firmas de SEO e consultores ou agências que enviam e-mails inesperados.
  • Ninguém pode garantir o posicionamento em primeiro lugar no Google.
  • Tome cuidado se uma empresa tiver muitos segredos ou se não explicar claramente o que pretende.
  • Você nunca deve ser obrigado a criar um link para um SEO.
  • Alguns SEOs podem tentar vender a capacidade de digitar palavras-chave diretamente na barra de endereços do navegador.
  • Escolha com cuidado.
  • Tente entender para onde o dinheiro está indo.
  • Converse com vários SEOs e pergunte aos outros se eles recomendariam aquela firma que pareceu a mais indicada para você.
  • Certifique-se de que você esteja legalmente protegido.

Se você achar que foi enganado por um SEO, é recomendável informar o fato.

A FTC (Comissão federal de comércio) trata das reclamações relacionadas a práticas comerciais enganosas ou ilegais. Para registrar uma reclamação, visite: http://www.ftc.gov/ (em inglês) e clique em “Arquivar uma reclamação on-line”, ligue para 1-877-FTC-HELP ou escreva para:

Federal Trade Commission
CRC-240
Washington, D.C. 20580

Se a sua reclamação for contra uma empresa em outro país, registre-a em http://www.econsumer.gov/ (em inglês).

Espero que tenha gostado e logo mais vou ensinar passo-a-passo como otimizar um site.

Até mais!

12 dicas para otimizar seu código PHP

É fundamental que sistemas como e-commerce, e-book, e-learn, sistemas administrativos e sites da 2ª geração (Web 2.0) sejam rápidos para navegar, pois ninguém espera, ao entrar em um sistema desses, um design futuristico e nem nada chamativo demais.

A 3ª geração exige:

“Façam sites rápidos, limpos e válidado pelo W3C”

É fundamental que sistemas como e-commerce, e-book, e-learn, sistemas administrativos e sites da 2ª geração (Web 2.0) sejam rápidos para navegar, pois ninguém espera, ao entrar em um sistema desses, um design futuristico e nem nada chamativo demais.

12 dicas para otimizar seu código PHP:

1. Se um método pode ser static, declare-o como static! O desempenho aumenta 4 vezes;

2. Evite utilizar metódos mágicos como __get, __set e __autoload, se possível;

3. require_once() é dispensável e demanda bastante memória;

4. Use caminhos completos (full path) nos includes e requires, pois é gasto menos tempo resolvendo os caminhos do sistema operacional;

5. Se você quer descobrir o tempo em que o script começou a ser executado, é preferível utilizar $_SERVER[´REQUEST_TIME´] do que time();

6. Veja se pode utilizar strncasecmp, strpbrk e stripos ao invés de regex;

7. str_replace é mais rápido que preg_replace, mas strtr é 4 vezes mais rápido que str_replace;

8. Se uma função, como de substituição de strings, aceitar tanto arrays como caracteres simples como argumentos, e se a sua lista de argumentos não é muito longa, considere fazer algumas declarações redundantes de substituição, passando um caractere por vez, ao invés de uma linha de código que aceita arrays como argumentos de busca e substituição;

9. Supressão de erro com @ é muito lento;

10. $row[´id´] é 7 vezes mais rápido que $row[id];

11. Mensagens de erro demandam mais processamento;

12. Não utilize funções dentro de loops, como por exemplo: for ($x=0; $x < count($array); $x). A função count() é chamada todas as vezes que o loop é executado.

Fonte: http://www.moskalyuk.com/blog/php-optimization-tips/1272

USE E ABUSE!

Até mais.

Tutorial de Acessibilidade (aula 1 – Links)

Acessibilidade na web

Vou explicar as melhores práticas sobre a acessibilidade de um site, tratando-se especialmente, neste tópico, de link.

 

 

 

 

 

O texto do link deve ser significativo e claro

Os usuários que usam leitores de tela navegam pelo site usando a tecla Tab do teclado. Para cada tab, é pronunciado o texto do link. Portanto, não se deve utilizar links com texto “Clique aqui”.

 

Exemplo:

 

Modo incorreto:

Clique aqui para visitar o site do Lucas Martins.

 

<a href=”http://www.lucasmartins.com.br/”>Clique aqui</a>

 

Modo correto:

Visite o site do Lucas Martins.

 

<a href=”http://www.lucasmartins.com.br/”>Lucas Martins</a>

 

 

O texto do link deve ser diferenciado

Se há mais de um link na página com o mesmo texto, todos esses links devem apontar para o mesmo endereço. Caso isso não seja possível, diferenciar esses utilizando o atributo title.

 

Se há mais de um link na página apontando para o mesmo endereço, mas os textos dos links são diferentes, utilize o atributo title para indicar que estes links estão apontando para o mesmo endereço.

 

Exemplo:

 

Vocês sabiam que estão navegando no blog do melhor desenvolvedor AJAX do Brasil? ( 😀 Que grande mentira! ). É, ele se chama Lucas Martins e está repartindo seu conhecimento com pessoas do mundo todo. Visite o site do Lucas Martins.

 

<a href=”http://www.lucasmartins.com.br/” title=”Site do Lucas Martins”>melhor desenvolvedor AJAX do Brasil</a>

 

<a href=”http://www.lucasmartins.com.br/” title=”Síte do Lucas Martins”>Lucas Martins</a>

 

<a href=”http://www.lucasmartins.com.br/” title=”Síte do Lucas Martins”>site do Lucas Martins</a>

 

Os links devem seguir uma ordem lógica

Para a navegação do site via teclado, pode-se organizar a seqüência dos links e determinar teclas de atalho para links importantes.

 

As seqüências dos links são organizadas com o atributo tabindex.

 

Exemplo:

 

Home

Notícias

Contato

 

<a href=”http://www.lucasmartins.com.br/” tabindex=”1”>Home</a>

<a href=”http://www.lucasmartins.com.br/blog” tabindex=”3”>Notícias</a>

<a href=”http://www.lucasmartins.com.br/contato.html” tabindex=”2”>Contato</a>

 

As teclas de atalho são referenciadas com o atributo accesskey.

 

Exemplo:

 

Home

Notícias

Contato

 

<a href=”http://www.lucasmartins.com.br/” accesskey=”h”>Home</a>

<a href=”http://www.lucasmartins.com.br/blog” accesskey=”n”>Notícias</a>

<a href=”http://www.lucasmartins.com.br/contato.html” accesskey=”c”>Contato</a>

 

 

 

Referência da WCAG 1.0