kadunew.com/blog

Dicas e artigos sobre Web Design e Web Standards

Css TypeSet Gerador de CSS

Css TypeSet é um conversor de texto para CSS.
È uma ótima ferramenta online, que converte automaticamente em CSS as formatações escolhidas por você, em palavras ou bloco de texto.
Entre as formatações que você pode fazer estão: cor do texto, cor de fundo, espaçamento entre os caracteres e estilos.
Depois de fazer a formatação, é só copiar o CSS é colar na sua folha de estilo.
Link: http://csstypeset.com

Posicionamento relativo, absoluto, static e fixed em CSS

Posicionamento relativo:

Ao declararmos position:relative sozinha não causa nenhum efeito no posicionamento. Se usarmos ela em conjunto com as propriedades top, right, bottom e left, movimenta o bloco de sua posição inicial para uma posição conforme declarado nas propriedades citadas.
O bloco sai de sua posição original e o espaço que ela ocupava é preservado.
Veja o exemplo:
CSS

div#dois {
	background: #009900;
	position: relative;
	left: 60px;
	top: 35px;
	}

Continuar lendo…

Estrutura mínima de um documento (X)HTML

Um documento (X)HTML para seguir em conformidade com os padrões Web, tem uma marcação mínima que deve ser seguida. Essa estrutura é dividida em três partes. Sempre que for começar um novo documento deve ter essa marcação.

As três partes da estrutura são:

  • Definição do tipo de documento (DOCTYPE ou DTD)
  • Seção head
  • Seção body

Continuar lendo…

Destacando linhas de tabelas ao passar o mouse

O efeito de destacar linhas de uma tabela consiste em alterar a formatação da linha que recebe o foco. Destacando ela das demais. Dessa forma o visitante do site consegue se localizar mais fácil na tabela, sem ter que passar o dedo na tela para ler as informações de uma linha da tabela.
Nesse primeiro exemplo vamos criar um script que destaque a linha que recebe o foco do mouse.
Para criar esse efeito vamos utilizar o método hover (sobre, fora). Esse método executa duas funções, a primeira quando o mouse passa sobre o seletor e a outra quando o mouse sai de cima do seletor.
Continuar lendo…

Elementos HTML em desuso

Segundo as recomendações da W3C esses elementos estão em desuso, ou como a WC3 gosta de chamar “Deprecated”. Por isso devemos evitar seu uso.
O principio das Web Standards preconiza a separação da apresentação e marcação. Esses elementos são de apresentação por isso estão desatualizadas, em desuso, obsoletas…
Veja a tabela abaixo os elementos em desuso e sua descrição.
Continuar lendo…

Elementos inline e nível de bloco

Para um bom entendimento da renderização dos elementos HTML é necessário o entendimento de elementos níveis de bloco, inline e os invisíveis. Conhecendo bem esses conceitos, evitamos o uso inadequado de elementos HTML e marcação adicional.

Elementos níveis de bloco

Elementos nível de bloco ocupam toda largura disponível na página e criam uma linha invisível antes e depois de si próprio. Elementos nível de bloco sempre começam em nova linha. Um elemento que venha antes ou depois de um elemento nível de bloco é renderizado acima ou abaixo do elemento nível de bloco, nunca ao lado.
Elementos nível de bloco podem conter elementos inline e outros elementos nível de bloco.
Exemplos de tags nível de bloco:

address, blockquote, center, dir, div, dl, dt, dd, frameset, fieldset, form,
h1, h2, h3, h4, h5, h6, hr, menu, noframes, noscript, ol, ul, li, p, pre, table,
tbody, thead, tfoot, tr, td, th

Continuar lendo…

Saiba como os buscadores enxergam seu site

Pesquisando na net sobre otimização de sites, encontrei um site muito útil. Ele mostra seu site, sem CSS (folhas de estilo em cascata)… O resultado mostra tags importantes como H1, H2 etc.
Uma boa dica para ver se sua marcação está adequada.
Basta digitar o endereço do seu site.
Link: http://www.rmt.com.br/raiox/

Ajude a eliminar browsers antigos do mercado!

Em particular esse título se refere ao Internet Explorer 6 que ainda tem uma grande participação no mercado dos navegadores. O grande problema desse navegador é a falta de segurança e a má renderização das páginas.
Desenvolvedores estão cansados de bugs e utilização de hackes para esse navegador.
Por isso temos várias campanhas na Internet para remover definitivamente esse software do mercado.
Recebi uma nova campanha, que tem como objetivo eliminar esses navegadores mais antigos, campanha com iniciativa do imasters. Como achei essa campanha muito interessante resolvi divulgar aqui no blog.
Veja o e-mail completo:
Continuar lendo

Efeito sanfona com jQuery e Accordion

O efeito sanfona é muito utilizado para estruturar conteúdos em vários tópicos. O usuário visualiza apenas o tópico que foi clicado.
Na realização desse efeito vamos utilizar a biblioteca jQuery e um plugin chamado de accordion.

Como instalar o plugin Accordion

Primeiro devemos baixar o plugin no link http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
Continuar lendo…

Speed Dial para Firefox

Para quem usa o navegador Opera deve saber que uma das últimas inovações foi a Speed Dial. Agora ela está presente também no FIrefox. Com ela você pode escolher vários sites e reuni-los em uma página do seu firefox. Para acessar, basta dar um clique na miniatura. Simples não ?!
Além do mais a Speed Dial vem com várias opções para você personalizar a extensão de acordo com seu gosto.

  • Escolher o tamanho das miniaturas
  • Criar grupos
  • Definir a Speed Dial como sua página inicial
  • Exportar / Importar suas configurações

Speed Dial

Speed Dial


Faça o Download da extensão Speed Dial

Página 7 de 8« Anterior...2345678