Karuta’s ASP & M$ SQLserver

Dicas, códigos e outras coisinhas de meus estudos para não esquecer…

Archive for the ‘html’ Category

Google Chrome INPUT autocomplete

Posted by karuta em outubro 27, 2010

Se você já teve problemas com o auto-completar do navegador Google Chrome, você poderá desabilitar essa função pelo seu código-fonte  não precisando pedir para o usuário desabilitar diretamente no navegador.

Basta inserir no seu código HTML:

<input type=”text” name=”off” autocomplete=”off”>

ou no seu código jquery:

$(“:input”).attr(“autocomplete”,”off”);

 

Anúncios

Posted in html | Leave a Comment »

HTML5 and The Future of the Web

Posted by karuta em julho 10, 2010

http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/

Posted in html | Leave a Comment »

Centralizar CSS

Posted by karuta em maio 10, 2010

http://css.flepstudio.org/en/css-tutorials/centered-vertical-horizontal-align.html

Posted in html | Leave a Comment »

Internet Explorer 8 render IE7

Posted by karuta em outubro 5, 2009

Microsoft lançou oficialmente o Internet Explorer 8 e, embora ainda não tenha incorporado praticamente nenhuma das novas propriedades doCSS3, ele já interpreta todo o CSS 2.1 e passou noteste do ACID2, o que já é alguma coisa.

Algumas pessoas já reclamam que estão tendo problemas de renderização com o CSS no IE8. O Browser está mais próximo dos padrões e portanto, você provavelmente tem em mãos um código fora dos webstandards ou com muitos CSS Hacks.

Se você tem pressa, existe uma maneira de fazer oInternet Explorer 8 emular a página com o render exato do IE7. E isso pode ser feito apenas colocando uma META TAG no código HTML. Veja como:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Obviamente você não deve se acostumar a esta solução. Corra atrás de desenvolver dentro dos padrões e comece testando seus sites em browsers com melhor renderização, como o ChromeSafari ou Firefox.;

Fonte: http://www.richardbarros.com.br/ (obrigado! me salvou…)

Posted in html | Leave a Comment »

Uso correto do atributo ALT em imagens

Posted by karuta em agosto 27, 2009

Ao assistir uma palestra sobre SEO e SEM da Martha Gabriel presenciei um dos participantes do evento perguntar sobre o “problema do atributo alt no Firefox”. Essa sempre foi uma afirmação dos meus alunos no curso de Web Standards na BR Multimídia. Sendo assim resolvi escrever esse artigo para esclarecer aos iniciantes de Web Standards, Acessibilidade e SEO o que realmente acontece e o uso correto do atributo ALT para imagens no HTML.

Muitas pessoas usam o atributo alt em imagens esperando o hint que aparece quando o cursor do mouse é posicionado sobre a imagem, mas no Firefox isso não acontece. Alguns que não conhecem as reais funcionalidades desse atributo falam que é um erro do Firefox, Opera, Safari etc.

Comportamento do atributo ALT no IE e browsers modernosO hint que aparece quando o cursor do mouse está sobre uma imagem não é papel do ALT e sim do atributo TITLE. Nos browsers que seguem mais a risca as especificações de Web Standards o hint só poderá ser visto com o uso do atributo TITLE.

Você deve estar pensando agora que isso é um erro do IE. Alguns podem ter esse ponto de vista, mas você vai perceber que quando insere um atributo TITLE em uma imagem o IE ele substitui o ALT no hint. Já que isso acontece podemos entender que o IE simplesmente usa o ALT em mais uma funcionalidade caso o usuário não esteja usando o atributo TITLE, mesmo assim seria melhor que ele seguisse a especificação para não gerar confusões.

Usando corretamente o atributo ALTVamos esclarecer então para que serve o atributo ALT. Como a própria abreviação sugere o atributo ALT se refere a um texto alternativo e deve ser usado nos seguintes contextos:

Texto alternativo para imagens. Quando um usuário desabilita o carregamento de imagens em seu browser ou dispositivo o texto do alt é exibido no lugar da imagem. No caso de algum erro acontecer no carregamento da imagem o texto alternativo também será exibido. Caso a imagem possua algum link a sua funcionalidade também poderá ser referenciada no alt, aumentando assim a usabilidade caso a imagem não seja carregada.
Texto alternativo para acessibilidade. Leitores de tela e leitores de código usados por portadores de necessidades especiais irão ler o atributo alt para descrever a imagem.
Só para salientar o atributo ALT e de uso obrigatório para imagens.

Atributo ALT e SEOO atributo ALT também pode ser usado para otimização de conteúdo on-page, mas com muito bom senso.

Uma das primeiras regras ao se otimizar o uso de palavras chave é se lembrar que o conteúdo em primeiro lugar deve ser criado para os usuários e não para sistema de busca. Em se tratando de acessibilidade e o uso do atributo ALT para imagens essa regra também deve ser seguida. Apesar do texto do ALT não ser lido normalmente na página, ele vai ser usado por leitores de tela e de código. Sendo assim não se deve inserir somente palavras chave no texto do ALT e sim escrever uma descrição condizente com o conteúdo da imagem em equilíbrio com a inserção de palavras chave.

Erros quanto ao uso e não uso do atributo ALTExistem erros muito comuns quanto a aplicação do Atributo ALT, vou numerar alguns deles abaixo:

O não uso do Atributo ALT que é obrigatório para imagens de conteúdo.
Atributo ALT vazio somente para passar em validações de código. Todo atributo ALT deve ter uma pequena descrição da imagem.
Atributo ALT vazio gerado por editores de código. Diversos editores de código e editores visuais inserem automaticamente o atributo ALT vazio. Por isso afirmo que o código deve ser verificado antes de sua publicação, pois nenhum editor HTML é perfeito.
Atributo ALT igual para todas as imagens de conteúdo de uma página.
Atributo ALT somente para gerar hint do mouse. Como explicado acima o hint é uma funcionalidade do atributo Title. Caso tenha necessidade do hint use o atributo TITLE em conjunto com o ALT mas usando textos diferentes, pois os leitores de tela e código não entendem o TITLE. E lembrando mais uma vez o ALT é obrigatório.

Texto escrito por: Lauro Santos (http://www.laurosantos.com.br/blog/atributo-alt-ie-firefox/)

Posted in html | Leave a Comment »

Linhas FINAS nas tabelas

Posted by karuta em julho 23, 2009

Basta adicionar na sua tabela o comando CSS: style=”border-collapse:collapse;”

exemplo:
table border=”1″ style=”border-collapse:collapse;” cellpadding=”2″

Posted in html | Leave a Comment »