Arquivo da categoria: HTML

Submeter o Formulário Quando o Usuário Pressionar ENTER

Muitas vezes nos deparamos na construção de um formulário em um website. Normalmente, ao preenchermos este formulário e pressionarmos a tecla ENTER, o mesmo é enviado. Mas em alguns casos, onde se modifica ou não se insere um botão de SUBMIT, o efeito da tecla ENTER é removido, não deixando com que o usuário a utilize a tecla.

Em busca de uma solução simples, encontrei o código abaixo que faz com que ao pressionar a tecla enter em um determinado campo, um INPUT por exemplo, o formulário seja submetido. Vejamos como fazer.

Primeiramente, copie este código para dentro da área do seu <HEAD>:

<SCRIPT TYPE=”text/javascript”>
<!–
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;

if (keycode == 13)
{
myfield.form.submit();
return false;
}
else
return true;
}
//–>
</SCRIPT>

Em seguida, adicione em cada campo que desejar o conteúdo em negrito do exemplo abaixo:

<FORM ACTION=”/login”>
Nome:     <INPUT NAME=”nome”><BR>
Senha: <INPUT NAME=”senha” TYPE=”PASSWORD”
onKeyPress=”return submitenter(this,event)”><BR>
<INPUT TYPE=”SUBMIT” VALUE=”Logar”>
</FORM>

Agora o seu campo possui a habilidade de ao se pressionar a tecla ENTER, ele submete o formulário.

Fonte: http://www.htmlcodetutorial.com/forms/index_famsupp_157.html

Flash: Como obter uma melhor indexação

Flash + HTML

A alguns dias eu estava lendo em um dos blogs do Google sobre o uso de Flash em páginas e resolvi passar aqui um pouco sobre o assunto.

Como a grande maioria sabe, o Flash é totalmente um recurso visual, e o Googlebot não possui olhos. O Googlebot pode ler os arquivos Flash e extrair texto e links contidos nele, mas a estrutura e o contexto é perdido. Além disso, o conteúdo textual é, em algumas vezes, armazenado de forma gráfica no Flash, e como o Googlebot não possui um algoritmo para o reconhecimento destes gráficos, estas importantes palavras-chave são perdidas. Tudo isso significa que mesmo que o seu conteúdo em Flash esteja na base de dados do Google, ele pode perder um pouco de texto, conteúdo, ou links. O agravante fica no seguinte ponto: o Googlebot pode entender alguma coisa dos arquivos Flash, mas muitos outros crawlers não podem.

Então, o que um web desginer deve fazer?

A única coisa que se deve fazer é prover ao Googlebot e a todos os crawlers, o mesmo conteúdo que é disponibilizado aos usuários. Se você não o fizer, o seu site ficará suspeitos através dos algortimos de busca dos buscadores.

Algumas sugestões foram feitas pelos engenheiros da gigante Google, para quem desenvolve em Flash:

  • Tente usar Flash onde é realmente necessário. Muitos sites como o Youtube, utilizam a tecnologia Flash para a exibição de vídeos, mas o restante do website é baseado em HTML para a perfeita estruturação.
  • sIFR: Muitos sites utilizam o Flash para forçar os browsers a apresentar textos em uma fonte que o usuário não possua. Técnicas como sIFR deixam browsers que não possuem suporte ao Flash, lerem o conteúdo normalmente ao invés de forçar a aparição do objeto.
  • Criar versões sem Flash: Um modo comum de contornar o problema de indexação de sites em Flash é a criação de uma página inicial para a seleção do tipo do site(com ou sem flash).

Site BonecaDePano.com.br

E aí pessoal, tudo beleza? Hoje eu venho aqui para divulgar um projeto que a empresa que minha namorada trabalha, a b2ml, terminou na semana passada.

É um projeto muito bacana e bem completo pelo que pude notar. Segue aí um descritivo:

Boneca de Pano – www.bonecadepano.com.br

Um site que disponibiliza produtos da melhor qualidade, sem falar do
bom gosto. Cada um mais lindo que o outro. Almofadas, travesseiros,
bichos, bonecas e acessórios, todos laváveis, antialérgicos e
certificados pelo Inmetro.Visite-nos e não perca a oportunidade de
conferir.

Presentei quem você ama!!!

Estilizando um HR com CSS

Olá galera!

Alguém aí já usou ou usa a tag HR ? Para quem não conhece, a tag HR produz uma linha horizontal que pode fazer a divisão de conteúdos.

Eu particularmente gosto de usar esta tag para colocar “linhas” entre os conteúdos dos meus sites. Muita gente não adere ao HR, preferindo colocar bordas nas DIV’s. Mas é questão de gosto.

Neste post vou ensinar vocês a estilizarem a tag HR através de CSS.

A tag HR é definida do seguinte modo:


Pesquisando na internet, achei todas as propriedades que a tag HR aceita, segue abaixo a lista:

  • O Mozilla, IE e Opera aceitam as propriedades “width” e “height” para a tag
  • A propriedade “border” pode ser usada no Mozilla e no IE, mas não funciona corretamente no Opera.
  • O Mozilla e o Opera usam a propriedade “background-color” para a cor do HR, já o IE utiliza a propriedade “color”
  • Todos os três browsers citados acima aceitam a propriedade “background-image” para a tag HR

Exemplos:

1 Linha vermelha:

Código CSS:

hr {
      color: #f00;
      background-color: #f00;
      height: 5px;
    }

Visualização:


Um retângulo de bordas vermelhas e altura de 10px:

Código CSS:

hr {
      border: 1px solid #f00;
      color: #fff;
      background-color: #fff;
      height: 10px;
    }

Visualização:


2 linhas, uma acima da outra. O Opera mostra como um retangulo. Ambas são vermelhas, a primeira é pontilhada e a segunda é sólid.

Código CSS:

hr {
      border-top: 1px dashed #f00;
      border-bottom: 1px solid #f00;
      color: #fff;
      background-color: #fff;
      height: 4px;
    }

Visualização:


Espero que tenham gostado da dica.

Abraços

Criar novamente ou remendar um código?

Alguém aí já teve a experiência de trabalhar com um código mal feito?

É eu tive. Alias estou passando por esta experiência agora. Estou trabalhando em um site aqui na empresa, onde um designer, ou melhor, suposto designer, criou um código horrível para o seu template, e para quem sobrou mexer??? Alguém adivinha?

A minha sorte é que o website ainda não foi ao ar e são poucas as páginas que o compõe. Meu trabalho está sendo de remendar e recriar. Estou re-aproveitando tudo o que for possível, o que não for eu apago e faço denovo.

Ahhh, detalhe, o site é em tableless, com um conjunto de divs e mais divs espalhadas e um css totalmente desorganizado. (que sorte eu tenho :P )

Pois é, mas a minha pergunta a vocês é a seguinte:
O que vocês acham mais fácil, criar novamente todo o código do site ou remendar tentando consertar?

Dl, dt, dd: Você sabe utilizar corretamente as listas de definição?

Estou reestruturando um código de um website aqui da empresa e para uma determinada tarefa eu achei melhor usar uma estrutura de listas de definição. Logo pensei: “putz, será que todo mundo sabe como e por que utilizar uma lista de definição?“. Então resolvi postar aqui no blog este artigo.

Bom, para iniciar o post, como o próprio nome diz, elas listas servem para construirem definições de termos. Na sua estrutura são usadas 3 tags: dl (definition list), dt (definition term) e dd (definition description), da seguinte forma:

dl
dt /dt
dd /dd
/dl

A tag dl é o container. Dentro da tag dt, você deve colocar o termo a ser definido. Já dentro da tag dd você deve colocar a descrição do termo.

Espero ter ajudado em mais este conceito. Até mais

3D Jewelry Designer РMais altera̵̤es

Usei o dia de hoje para dar continuidade no site www.3djewelrydesigner.com. Criei as páginas internas do website, além de instalar o sistema de postagem de artigos.

Resolvi também alguns problemas de programação, fazendo algumas separações de conteúdo para chamada através de includes do PHP.

Ainda tive tempo de adicionar o website na minha lista do Google Webmaster Tools e no Google Analytics. É hora de analizar as keywords e os resultados gerados.

Assim que fizer mais mudanças eu comunico aqui.