Imagens

O que você acha de poder adicionar uma imagem do Tim Bernes-Lee o inventor do HTML no centro da sua página?

Ops, isto soa como um desafio...

Talvez, mas é muito fácil de fazer. Tudo o que você precisa é da nossa já conhecida tag:

Exemplo 1:

<img src="tim.jpg" alt="Tim Berners-Lee" />

Será renderizado no navegador assim:

O que você tem a fazer é dizer ao navegador que quer inserir uma imagem (img) e depois informar onde a imagem esta localizada (src, abreviatura para "source" - local de armazenagem ).

Notar que a tag imagem é do tipo comando isolado, isto é, uma só tag de abertuta e fechamento. Semelhante a tag <br /> que não precisa de um texto inserido nela.

"tim.jpg" é o nome do arquivo da imagem que você quer inserir na página. ".jpg" é a extensão do tipo de imagem. Tal como a extensão ".htm" para arquivos de documentos HTML, ".jpg" informa ao navegador que o arquivo é uma imagem. São três os tipos de imagens que você pode inserir na sua página:

• GIF (Graphics Interchange Format)
• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)

Em geral imagens GIF são melhores para gráficos e desenhos e imagens JPEG são melhores para fotografia. Existem duas razões para isto: primeiro, imagens GIF são constituidas por 256 cores, e imagens JPEG por milhões de cores, segundo, imagens GIF são melhores otimizadas para imagens simples ao passo que imagens JPEG são melhores otimizadas para imagens complexas. Quanto melhor a compressão tanto menor o tamanho do arquivo e tanto mais rápido a página é carregada no navegador. Como você deve saber por experiência própria, páginas desnecessariamente "pesadas" para carregar são frustantes para o usuário.

Tradicionalmente os formatos GIF e JPEG tem sido os mais empregados, mas ultimamente o formato PNG tem se tornado cada vez mais popular (notadamente em detrimento do formato GIF). O formato PNG é em vários aspectos melhor que os formatos JPEG e GIF: milhões de cores e efetiva compressão.

Onde consigo minhas imagens?

Para criar suas próprias imagens você precisa de um programa de edição de imagens. Um programa de edição de imagens é a ferramenta essencial para criação de websites com grande impacto visual.

Lamentavelmente, nenhum editor de imagem vem instalado com o Windows ou qualquer outro sistema operacional. Assim, você deve considerar a aquisição do Paint Shop Pro, do PhotoShop ou do Macromedia Fireworks, que são os três melhores editores de imagens atualmente existentes no mercado.

Contudo, como já dissemos, não há necessidade de comprar um programa caro para acompanhar este tutorial. Por enquanto, você poderá fazer o download de um exelente editor de imagens chamado Irfan view que é freeware, isto é, não custa nada.

Ou você pode fazer download de imagens existentes na web. Mas, por favor, se optar por fazer o download de imagens da Internet, cuidado para não violar direitos autorais de terceiros. A seguir mostro como fazer o download de uma imagem existente na Internet:

1. Clique com o botão direito do mouse na imagem da Internet.
2. No menu que aparece escolha a opção "Salvar imagem como...".
3. Na janela que se abre, escolha o lugar no seu computador para salvar e clique "Salvar".

Faça isto com a imagem abaixo e salve no seu computador no mesmo local onde está localizado seus documentos HTML. (Notar que deverá ser salvo o arquivo com formato PNG: logo.png):

Agora você pode inserir a imagem nos seus documentos. Tente fazer isto em um documento que você criou neste tutorial.

Isto é tudo o que eu preciso saber sobre imagens?

Existem mais algumas coisinhas que você precisa saber.

Primeiro, você pode inserir imagens que estão localizadas em outros diretórios ou até mesmo em outros websites:

Exemplo 2:

<img src="images/logo.png">

Exemplo 3:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCd__UDgXQNQULVFoRC-lA3ZDL9CsDjA_XYGKLvNPqnF_CREZXuIqN01Aklpg4X0Dof3Js9LuC7fV06BbtG0qAnYcS9pU18DSx4KXXPOFSJ9rzXdb12sVZFzlv1gi0YE9QN6mq0JM3pHDR/s1600/logo.png">

Segundo, imagens podem ser links:

Exemplo 4:

<a href="http://www.rdtutoriais.blogspot.com">
<img src="logo.png"></a>

Será renderizado no navegador assim: (clique na imagem):

Existem outros atributos que eu deva conhecer?

Você sempre terá que usar o atributo src, que diz ao navegador onde a imagem está localizada. Além dele existem alguns outros atributos que podem ser bastante úteis quando você insere imagens em uma página.

O atributo alt é usado para fornecer uma descrição textual alternativa da imagem caso por alguma razão a imagem não seja renderizada para o usuário. Isto é particularmente importante para usuários com restrições visuais ou quando a imagem é carregada muito lentamente. Em conseqüência, sempre use o atributo alt:

Exemplo 5:

<img src="logo.gif" alt="logotipo da RD Tutoriais">

Alguns navegadores mostram uma caixa pop-up com o conteúdo do atributo alt quando o usuário passa o mouse sobre a imagem. Tenha em mente que a finalidade principal do atributo alt é a de fornecer uma alternativa textual para imagem. O atributo alt não deve ser usado para criar mensagens pop-up uma vez que os leitores de tela passarão uma mensagem que não descreve a imagem para os usuários com restrições visuais.

O atributo title pode ser usado para fornecer uma curta descrição da imagem:

Exemplo 6:

<img src="logo.png" title="Aprenda HTML no blog RD Tutoriais">

Será renderizado no navegador assim:

Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecerá uma caixa pop-up com o texto "Aprenda HTML no blog RD Tutoriais" .

Dois outros atributos importantes são width e height:

Exemplo 7:

<img src="logo.png" width="250" height="150">

Será renderizado no navegador assim:

Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura da imagem. O valor adotado para medidas é o pixel. Pixel é a unidade de medida usada para medir a resolução da tela. (As resoluções de tela mais comuns são de 800x600 e 1024x768 pixels). Ao contrário de centímetros, pixel é uma inidade de medida relativa que depende da resolução da tela. Usuários com grande resolução de tela terão 25 pixels em 1 centímetro de tela enquanto aqueles com baixa resolução de tela terão os mesmos 25 pixels em 1,5 cm de tela.

Se não forem definidos os valores para width eheight, a imagem será inserida com seu tamanho real. Com width e height você pode alterar o tamanho da imagem:

Exemplo 8:

<img src="logo.gif" width="100" height="50">

Será renderizado no navegador assim:

Contudo, o tempo de descarga da imagem será sempre aquele requerido como se ela tivesse suas dimensões reais, mesmo que você diminua seu tamanho com uso destes atributos. Assim, você não deve diminuir o tamanho das imagens com o uso dos atributos width e height. Se você precisa diminuir a imagem diminua suas dimensões reais em um editor de imagem para tornar suas páginas mais leves e mais rápidas.

Dito isto, acrescentamos que é sempre uma boa idéia definir os atributos width e height para imagens, pois assim fazendo o navegador reservará o espaço para descarga da imagem previamente. Isto acaba por permitir ao navegador, saber com antecedência (antes de descarregar as imagens) como será o layout da página.

Por enquanto isto é tudo sobre o Tim Berners-Lee e sobre imagens.

Read More

Links

Nesta lição você aprenderá como construir links entre páginas.

O que eu preciso para construir um link?

Para construir um link você usa o que tem usado até agora para codificar HTML: uma tag. Uma simples e pequenina tag com um elemento e um atributo é suficiente para você construir links para onde quiser.

Exemplo 1:

<a href="http://www.rdtutoriais.blogspot.com/">Aqui um link para RD Tutoriais;/a>

Será renderizado no navegador assim:

Aqui um link para RD Tutoriais

O elemento a refere-se a "anchor" - âncora . O atribuito href é abreviação para "hypertext reference" - referência a hypertexto - e especifica o destino do link - que normalmente é um endereço na Internet ou um arquivo.

No exemplo acima o atributo href tem o valor "http://www.rdtutoriais.blogspot.com", que é o endereço completo do site RD tutoriais e é chamado de URL (Uniform Resource Locator). Notar que "http://" deve sempre ser incluido nas URLs. A frase "Aqui um link para HTML.net" é o texto mostrado no navegador como link. Lembre-se de fechar a tag com um </a>.

Como são os links entre minhas próprias páginas?

Se você quer construir links entre páginas de um mesmo website você não precisa escrever o endereço completo de cada página (URL). Por exemplo, se você tem duas páginas (vamos chamá-las de pagina1.htm e pagina2.htm) e salvou as duas em um mesmo diretório você constrói um link de uma para a outra usando somente o nome do arquivo no link. Nestas condições, um link da página1.htm para a pagina2.htm é como mostrado abaixo:

Exemplo 2:

<a href="page2.htm">Aqui um link para a pagina 2</a>

Se a pagina2 for colocada em um subdiretório (chamado de "subdiretorio"), o link é como mostrado abaixo:

Aqui um link para a pagina 2

Exemplo 3:

<a href="subdiretorio/pagina2.htm">Aqui um link para a pagina 2</a>

Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 é como mostrado a seguir:

Exemplo 4:

<a href="../pagina1.htm">Aqui um link para a pagina 1</a>

"../" aponta para o diretório a um nível acima do arquivo onde foi feito o link. Seguindo o mesmo princípio você pode apontar para dois (ou mais) níveis acima, escrevendo "../../".

Você entendeu? Como alternativa você pode usar sempre o endereço completo do arquivo (URL).
Como são os links dentro de uma mesma página?

Você pode criar links internos, dentro da própria página - por exemplo, uma tabela de conteúdos ou índice com links para cada um dos capítulos em uma página. Tudo o que você precisa é usar o atributo id e o símbolo "#".

Use o atributo id para marcar o elemento que é o destino do link. Por exemplo:

<h1 id="heading1">Cabeçalho 1</h1>

Você agora pode criar um link que leve àquele elemento usando o símbolo "#" no atributo do link. O símbolo "#" informa ao navegador para ficar na mesma página que está. O símbolo "#" deve ser seguido pelo valor atribuido a id para onde o link vai. Por exemplo:

<a href="#heading1">Link para o cabeçalho 1</a>

Tudo fica claro com um exemplo:
Exemplo 5:

<html>

<head>
</head>

<body>

<p><a href="#heading1">Link para cabeçalho 1</a></p>
<p><a href="#heading2">Link para cabeçalho 2</a></p>

<h1 id="heading1">Cabeçalho 1</h1>
<p>Texto texto texto texto</p>

<h1 id="heading2">Cabeçalho 2</h1>
<p>Texto texto texto texto</p>

</body>

</html>

Será renderizado no navegador assim:

Link para cabeçalho 1

Link para cabeçalho 2

Cabeçalho 1

Texto texto texto texto

Cabeçalho 2

Texto texto texto texto

(Nota: O nome de um atributo id deve começar com uma letra)

Posso criar link para mais alguma coisa?

Você pode criar link para um endereço de e-mail. Isto é feito de modo semelhante aos links para documentos.

Exemplo 6:

<a href="rdtutoriais@hotmail.com">Enviar e-mail para RD Tutoriais</a>

Será renderizado no navegador assim:

Enviar e-mail para RD Tutoriais

A única diferença é que no lugar do endereço do documento você escreve mailto: seguido pelo endereço de e-mail. Quando o link é clicado o programa de e-mail padrão do usuário é aberto com o endereço do link já digitado na linha para destinatário. Mas, atenção, isto só irá funcionar se o usuário tiver um programa de e-mail instalado na sua máquina. Faça uma experiência com este tipo de link clicando no exemplo acima.

Existem outros atributos que eu deva conhecer?

Par criar links você sempre usa o atributo href. Adicionalmente você pode usar um title (título) para seu link:

Exemplo 7:

<a href="http://www.rdtutoriais.blogspot.com" title="Visite RD Tutoriais e aprenda HTML">RD Tutoriais</a>

Será renderizado no navegador assim:

RD Tutoriais

O atributo title é usado para fornecer uma breve descrição do link. Se você - sem clicar no link - colocar o cursor do mouse sobre o link, vai aparecer o texto "Visite o site RD Tutoriais.blogspot.com e aprenda HTML".

Read More

Atributos

Você pode adicionar atributos às tags.

O que é atributo?

Como você deve estar lembrado, uma tag é um comando para o navegador (por exemplo, <br />
é um comando para mudar de linha). Em algumas tags você pode ser mais específico, acresentando na tag, informações adicionais de comando. Isto é feito através dos atributos.

Exemplo 1:

<h2 style="background-color:#ff0000;">Eu adoro HTML</h2>

Atributos são escritos dentro da tag, seguidos por um sinal de igual e depois entre aspas são declaradas as informações do atributo. As informações quando mais de uma, devem ser separadas por ponto e vírgula, tudo conforme mostrado no exemplo acima. Adiante voltaremos a este assunto.
Como é isto?

Existem vários atributos. O primeiro que você aprenderá é o atributo style. Com o atributo style você pode adicionar estilização e layout ao seu website. Por exemplo, uma cor de fundo:

Exemplo 2:

<html>

<head>
</head>

<body style="background-color:#ff0000;">
</body>

</html>

O código acima renderiza uma página com cor de fundo vermelha - vá em frente! experimente você mesmo, construa uma página vermelha. A seguir explicaremos como funcionam as cores.

Notar que algumas tags e atributos usam nomes do idioma inglês dos E.U.A. É muito importante que você use os nomes exatamente como mostrados neste tutorial - se você mudar uma letra que seja, o navegador não irá entender seu código. É importante também que você não se esqueça de fechar as aspas nas informações do atributo.
Como a página ficou vermelha?

No exemplo acima nós usamos o código "#ff0000" para fazer a página na cor vermelha. Eate é o código para a cor vermelha no sistema chamado de números hexadecimal (HEX). Cada cor é representada por um número hexadecimal. A seguir alguns exemplos:

Branco: #ffffff
Preto: #000000 (zeros)
Vermelho: #ff0000
Azul: #0000ff
Verde: #00ff00
Amarelo: #ffff00

Um código hexadecimal para cores é formado por um sinal # seguido de seis dígitos e/ou letras. Existe mais de 1000 códigos HEX e não é fácil decorar o código para todas as cores. Para facilitar as coisas nós desenvolvemos uma carta com as 216 cores mais usadas na web.

Para algumas cores, você pode usar o nome das cores em inglês (white, black, red, blue, green e yellow - branco, preto, vermelho, azul, verde, amarelo).

Exemplo 3:

<body style="background-color: red;">

Chega de cores. Voltemos aos atributos.
Quais tags podem usar atributos?

Atributos podem ser aplicados à maioria das tags.

Você normalmente usará atributos com mais freqüência em algumas tags, tais como a tag body e raramente usará em outras, como por exemplo, a tag br que é um comando para pular de linha e não precisa de nenhuma informação adicional.

Assim como existem muitas tags, também existem muitos atributos. Alguns atributos são empregados em tags específicas enquanto outros servem para várias tags. E vice-versa: algumas tags podem conter somente um tipo de atributo, enquanto outras podem conter vários tipos.

Isto pode parecer um pouco confuso, mas à medida que você for praticando vai constatar que tudo é fácil e lógico, bem como vai verificar as inúmeras possibilidades que os atributos oferecem.

Este tutorial apresentou a você, os atributos.
Então, quais são as partes que constituem uma tag?

A constituição básica de uma tag é denominada elemento (por exemplo p em <p>). Assim, uma tag é constituida de um elemento (por exemplo <p>), ou por um elemento e um ou mais atributos (por exemplo <p style="background-color:#ff0000;">). Simples!

Read More

Mais tags HTML

E aí? Você construiu algumas páginas como sugerimos na lição anterior? Não? Sim? Bem, a seguir um exemplo:

<html>

<head>
<title>Meu website</title>
</head>

<body>
<h1>Um cabeçalho</h1>

<p>texto, texto texto, texto</p>
<h2>Subtítulo</h2>
<p>texto, texto texto, texto</p>
</body>


</html>

E agora?

Agora vamos aprender mais sete tags.

Você já sabe que pode obter negrito com a tag <b>
, agora saiba que pode obter itálico - letras inclinadas - com a tag <i>. Já percebeu não é?, "i" vem de "italic".

Exemplo 1:

<i>Este texto deve ser itálico.</i>

Será renderizado no navegador assim:

Este texto deve ser itálico.

De modo similar você pode fazer seu texto com letra menores usando a tag :

Exemplo 2:

<small>Este texto deve ser com letras em tamanho small.</small>

Será renderizado no navegador assim:

Este texto deve ser com letras em tamanho small.

Posso usar várias tags simultaneamente?

Sim você pode usar quantas tags queira desde de que as aninhe convenientemente. Veja como fazer isto no exemplo abaixo:

Exemplo 3:

Para escrever um texto em negrito e itálico faça como mostrado a seguir:

<b><i>Texto em negrito e itálico.</i></b>

E não assim:

Texto em negrito e itálico.

Observe que no primeiro exemplo a primeira tag de abertura <b> corresponde a última tag de fechamento </b>, e o aninhamento está certo. Isto evita confusão para quem escreve o código e para o navegador que lê o código.
Mais tags!

Como foi dito na Lição 4 existem tags que são abertas e fechadas em única tag. Estas tags são comandos isolados, ou seja, não contém nenhum texto dentro delas para poder funcionar. Um exemplo é a tag <br /> que serve para criar uma quebra de linha:

Exemplo 4:

Um texto<br /> e mais texto em nova linha

Será renderizado no navegador assim:

Um texto
e mais texto em nova linha

Notar que a tag é escrita como se fosse uma mistura de tag de abertura e de fechamento com uma barra "/" no final: <br />. A princípio podemos escrever também

(sem conteúdo), mas para que complicar?

Outra tag de comando é <hr /> que serve para definir uma linha horizontal ("hr" vem "horizontal rule" - régua horizontal ):

Exemplo 5:

<hr />

Será renderizado no navegador assim:

---

Exemplo 6:

<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>

</ul>

Será renderizado no navegador assim:

• Um item de lista


• Outro item de lista

Exemplo 7:

<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>

</ol>

Será renderizado no navegador assim:

<ol>

1. Primeiro item da lista


2. Segundo item da lista

Uau! Isto é tudo?

Sim, por enquanto isto é tudo. Aconselhamos, novamente, a fazer seus próprios experimentos, construindo algumas páginas usando as sete tags ensinadas nesta lição:

<i>Itálico</i>
<small>Texto tamanho small</small>

<br /> Pula linha
<hr /> Linha Horizontal
<blockquote>Indentação</blockquote>
<ul>Lista</ul>
<ol>Lista ordenada</ol>

<li>Item de lista</li>

Read More

O que você já aprendeu?

Comece sempre com o template básico que construímos na lição anterior:

<html>

<head>
<title></title>
</head>

<body>
</body>

</html>

Coloque sempre o título do seu documento na seção head: <title> Título da sua página </title>. Ver na figura abaixo como o título aparece no topo superior esquerdo do navegador:



O título é muito importante porque é usado pelos mecanismos de busca (tais como o Google) para indexar seu website como mostrado a seguir para o site CSS para Web Design:



Na seção body você escreve o conteúdo da sua página. Você conhece algumas das mais importantes tags:

<p>É usado para parágraos.</p>
<b>Torna o texto negrito.</b>

<h1>Cabeçalho</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>

Lembre-se, o único caminho para aprender HTML é por ensaio e erro. Mas, não se preocupe, você não destruirá seu computador e nem a Internet. Então, faça seus experimentos e testes - esta é a melhor maneira de ganhar experiência.
O que significa isto?

Ninguém se tornará um bom criador de websites aprendendo os exemplos contidos neste tutorial. O que você aprenderá neste tutorial é simplesmente o básico para criação - para se tornar um bom desenvolvedor você deverá descobrir caminhos por si mesmo em maneiras criativas.

Então mãos à obra. Comece suas experiências com tudo que você aprendeu até agora.
O que fazer agora?

Tente criar algumas páginas. Por exemplo, construa uma página com um título, um cabeçalho, algum texto, um subtítulo e mais algum texto. Não há nada contra fazer uma consulta no tutorial para construir as páginas, ou seja, a "cola" é permitida. Porém, mais a frente, tente criar sem consultar - "cola" não permitida.

Read More

Menu CSS com rollover de imagem

Neste tutorial mostrarei como construir um menu com rollover de imagem usando CSS puro.

O menu a construir é este abaixo mostrado. Passe o mouse sobre os links para ver o efeito.

Como você já deve ter observado o menu tem as seguintes características:

1. é constituído por seis links;
2. os links têm uma imagem de fundo e bordas;
3. no estado mouseover - quando passa-se o mouse sobre o link - há uma troca de imagem de fundo (rollover);
4. A largura deste menu é igual a 180px.
As imagens de fundo

Abaixo as imagens de fundo que utilizei para obter o efeito rollover.

Aqui uma dica: ao construir suas imagens de fundo para usar em elementos por CSS, tenha em mente que o usuário poderá ter configurado seu browser para exibir tamanhos de letras grandes ou mesmo outras definições que podem vir a afetar as dimensões de projeto do elemento HTML com imagem de fundo.

Assim, dimensione suas imagens de fundo maiores que a caixa do bloco do elemento HTML para fornecer um espaço extra de imagem e evitar que a imagem se repita em um fundo maior que o de projeto!

Usaremos imagens com 280 x 55 bem exageradas de propósito, como mostradas a seguir:

fundo_1.gif - imagem no estado do link em repouso

fundo_2.gif - imagem no estado do link com o mouse em cima

Se você quiser treinar com estas imagens salve-as para seu HD. Clique botão esquerdo sobre a imagem e "Salvar Imagem Como..."

O elemento HTML (tag) para construção de menus:

Teoricamente qualquer elemento HTML (tag) capaz de descrever texto (p, h1, h2, ..., ul, ol, etc...) poderá ser estilizado para construção de menus. No entanto, dentre todos eles, o elemento que maior flexibilidade, recursos, e facilidades propiciam a estilização é sem dúvida o elemento ul que define as listas não ordenadas nos documentos HTML.

Vantagens do uso do elemento ul

O uso do elemento ul na criação dos menus com CSS tem as principais vantagens listadas abaixo:

* no código HTML do menu você tem quatro elementos aninhados para aplicar estilos (quais sejam: div - ul - li e a ) - isto aumenta a flexibilidade para estilizar;
* os critérios de acessibilidade ao seu documento são mais consistentes - na visualização do documento sem a aplicação da folha de estilo o menu será exibido de uma forma bastante conveniente;
* com uso de uma só propriedade CSS (a propriedade display) você altera o layout de menu (em disposição vertical) para barra de navegação (em disposição horizontal);
* são facilmente expansíveis - acréscimo de itens no futuro, isto é novos links.

O código HTML típico para um menu

A seguir mostro o código HTML típico para a criação de um menu com 06 (seis) links (adiante você verá que este código é válido para qualquer número de links, podendo ser adaptado a qualquer necessidade atual e previsão de expansão futura - tamanho do menu). Este código servirá de base para desenvolvermos todo o estudo proposto neste tutorial.

<ul>
<li>Home Page</li>
<li>Portfolio</li>
<li>Equipe tecnica</li>
<li>Parceiros</li>
<li>Album de fotos</li>
<li>Fale conosco</li>
</ul>

O código HTML acima é renderizado no browser e apresentado da tela conforme mostrado abaixo:

• Home Page


• Portfolio


• Equipe tecnica


• Parceiros


• Album de fotos


• Fale conosco

Largura, portabilidade e especificidade do menu

Para assegurar ao projetista, total controle sobre o posicionamento da lista que contém o menu bem como garantirmos que as regras CSS para os elementos HTML que compõem o menu (lista ul eli e link a ) não afetem as listas e links porventura existentes em outros locais do documento, vamos enclausurar o nosso menu em uma dive declarar as regras CSS para esta div. Chamemos esta div de: #menu

E a primeira regra CSS para nosso menu:

#menu {
position: absolute;
left: ## px; /*posição à direita*/
top: ## px; /*posição abaixo*/
width: 180px;
}

Nota: Esta regra CSS dá ao menu a portabilidade, isto significa que definindo os valores left e top, você coloca o menu exatamente onde quiser no documento e com a precisão de pixel!

Aqui você define também uma largura para a div. No caso, adotei igual a largura do menu que esta contido na div.

Posicionamento do menu

Observe no esquema mostrado abaixo a chave para posicionar o menu no documento:

As coordenadas para position:absolute tem origem no canto superior esquerdo.

TOP: distância para baixo;

LEFT: distância para a direita.

Caso você queira inserir o menu dentro uma célula de tabela ou posicioná-lo relative ou float, basta você alterar as propriedades na regra acima.

Os marcadores de listas

Como você observou no item O código HTML típico para um menu, o browser renderizou nossa lista com um "marcador de lista" (uma bolinha preta na frente de cada item da lista) e um recuo para o texto.

Precisamos criar uma regra CSS para eliminar o marcador de lista e o recuo do texto.

A propriedade CSS que controla o marcador das listas é: list-style-type

Não lembra? Se você não está seguro com as propriedades CSS das listas refresque sua memória lendo este tutorial.

Para remover o recuo do texto há um detalhe. Alguns browsers usam a propriedade margin e outros a propriedade padding para o recuo das listas!

(Ainda vai chegar o dia em que os fabricantes seguirão as web standards e todos usaremos e projetaremos seguindo uma só e universal norma e seremos mais felizes. E, os malditos bugs morrerão todos!)

Conclusão para nosso menu:

as regras CSS para ul são list-style-type:none; margin:0px; padding:0px;

#menu ul {
list-style-type: none; /*remove o marcador*/
margin: 0; /*remove o recuo IE e Opera*/
padding: 0; /*remove o recuo Mozilla e NN*/
font: bold 16px arial, helvetica, sans-serif;
}

Nota : Nesta regra CSS também definimos as características das letras que escolhemos para o menu.

Com mais esta regra CSS nossa lista será renderizada no browser conforme mostrado abaixo:

• Home Page
• Portfolio
• Equipe tecnica
• Parceiros
• Album de fotos
• Fale conosco

Estilizando o elemento <li>

O elemento li define cada uma das linhas que contém os links.

A regra CSS adicionada a este elemento controla a distância entre os links pela definição da propriedade margin.

Separamos os links na vertical definindo um margem inferior, conforme mostrado abaixo:

#menu li { margin-bottom:1px; }

Estilizando o elemento <a>

Dentro de li estão inseridos os elementos inline a;:

E aqui mais uma dica: Para fazer com que toda a área da caixa do link seja "clicável" devemos declarar display:block; Se omitirmos esta declaração, somente será "clicável" as letras que definem o link!

É aqui que definimos também todo o "visual" da área "clicável". Assim cores, bordas, imagens de fundo, espaçamentos (padding) e efeitos visuais em geral são aqui definidos.

A regra CSS para nosso menu é a abaixo mostrada:

#menu a {
display: block;
padding: 1px 0 1px 25px;
border: 1px solid #000000;
width: 180px;
background-color: #339966;
color: #FFFFFF;
text-decoration: none;
background-image: url(caminho/fundo_1.gif);
voice-family: "\"}\""; /*Box Model Hack*/
voice-family:inherit;
width:153px;
}
body>#menu a {width:153px;}

Notas:

1-) Cálculos do Box Model Hack

Hack= Largura - (padding-left + padding-right +
border-left + border-right)

Hack= 180 px - (25 px + 0px +
1 px + 1px) = 180 px - 27 px = 153
px

2-) Observe que um padding esquerdo de 25px foi definido com a finalidade de se colocar o texto descritivo do link, a direita da figura da bolinha esquerda que tem no desenho do fundo!

Estilizando o elemento <a>

para o estado mouse sobre

Finalmente a regra CSS para fazer o efeito rollover no link!

Aqui "trocamos" o fundo (cor e imagem) e tambem a cor do texto descritivo do link para contrastar com o novo fundo.

Não há efeito de troca na borda! Se você quiser quiser trocar a borda no rollover, declare a nova borda nesta regra. Se não quiser, pode omitir a declaração nesta regra que a borda será herdada.

Estilizando a:visited e a:active

Deixamos a título de exercício a estilização dos estados "link visitado" e "link ativo".

Mas atenção: não esqueça que a ordem das declarações dos estados dos links determinam o efeito cascata. Esqueceu isto?

Palavras finais

Este tutorial assim como os demais constantes do meu site visam a através de um exemplo prático mostrar as técnicas gerais de uso das CSS.

Estude! analise! faça mudanças nos códigos! pesquise! experimente! Não se limite a copiar e colar e você rapidinho vai descobrir as maravilhas das CSS e tornar-se um expert. Boa Sorte!

#menu a:hover {
border: 1px solid #000000;
background-color:#FFFF99;
background-image: url(caminho/fundo_2.gif);
color:#000000;
}

Read More

Profissão Web designer

Agora os ativistas que lutam em prol das prostitutas e dos motoboys têm mais uma classe para apoiar: a dos webdesigners. Certo, eu sei que não é para tanto, haja visto que a profissão de webdesigner se encontra num patamar acima das duas supracitadas. Mas se a legalidade já existe, o mesmo não pode ser dito quanto a legitimidade. Trocando em miúdos, a sociedade é muito descrente com os profissionais da web. Seja por ignorância ou preconceito, sempre dão aquela esfarrapada desculpa de que “meu sobrinho faz melhor”. Agora não me vem à mente nenhuma profissão admirada pela coletividade, cuja qual eu possa fazer uma analogia com o webdesign. Seria bom pra mostrar o quão árduo é este ofício. Talvez um misto de artista plástico com engenheiro, ou ainda decorador com arquiteto…

É difícil elaborar uma definição embasada em outras profissões. Sendo mais específico, o que um webdesigner faz é criar e implementar layouts, a parte visual dos websites. Parece fácil? Sim, é fácil. Fazer um site é extremamente fácil atualmente. As ferramentas WYSIWYG (editores visuais) permitem que qualquer “sobrinho” faça um site em poucos minutos. Mas aí entra uma questão primordial neste tipo de mídia: a qualidade. Ou você vai querer que sua empresa seja apresentada ao mundo pelas vias virtuais através de uma página tosca, com fundo vermelho e letras amarelas garrafais em Times New Roman? Fazer bons sites é complicado. Requer estudo, dedicação, horas a fio debruçado na frente do teclado. O desenvolvimento web é evolutivo, e isso exige que o profissional se atualize constantemente. Caso contrário, ficará defasado, e em pouco tempo perderá a clientela. Vê como é um negócio sério esse de webdesign? Eu não ligo para os “sobrinhos”. Que continuem fazendo suas pichações virtuais, sem problema algum. O que não admito é que profissionais sejam equiparados a estes vermes. Pior que isso só quando os sobrinhos ultrapassam o limite da empresa do tio e começam a oferecer seus serviços a terceiros.

o preço no chão. Quando o profissional vai conversar com um potencial cliente, este argumenta em face do preço digno daquele: “ah, mas o fulano faz por bem menos que isso…”. O preço é relacionado à qualidade do trabalho. Sempre, em todo lugar, quem é mão de vaca acaba se dando mal. É o tal do barato que sai caro. Infelizmente são poucas as pessoas que pensam assim.

Agora, o mais irritante disso tudo é a cara que as pessoas fazem quando você diz que trabalha com Internet. Incrédulas, antes mesmo de perguntar como é o serviço, já se referem à vida boa, de quem trabalha em casa e faz seu próprio horário. De fato estas são grandes vantagens, mas que não vêm de graça; são frutos de muita dedicação. Quer também? Vai estudar. Por que ninguém fala para o advogado, quando este se apresenta como tal: “ah, que folga, hein? Uma audiência aqui, outra ali, trabalha pouco e arranca até as cuecas dos pobres diabos que vão ao seu escritório”? Tem muitos webdesigners que estudam mais que muitos advogados picaretas. E ganham muito menos, com certeza. Qual a diferença? Não quero entrar no mérito, mas Direito é uma coisa um tanto ordenada, assim como o webdesign. Tem seus entraves, as tais discussões doutrinárias, onde alguns escritores já em estado de putrefação, de tão velhos que estão, discutem a correta interpretação de um artigo ambíguo, fruto da incompetência do legislador que o criou. Ora, isto também existe no mundo dos artistas da web. Não de forma tão hipócrita e mesquinha; existe em fóruns, com discussões mais abertas e democráticas. Há a objetividade (programação, do lado do webdesign, legislação, do lado advocatício), e a subjetividade (a vontade dos clientes, em ambos os casos).

Estes são apenas dois exemplos de como há várias semelhanças entre o webdesign e demais profissões tradicionais. Já passou da hora de acabar com este estigma de que webdesigner é profissão de vagabundo que não quer arranjar um “trabalho e verdade”. Ora, quem disse que isso é uma brincadeira? Eu nunca me peguei com carrinhos ou bonecos articulados enquanto me dedicava à produção de um layout…

Sociedade retrógrada, isso sim é o que temos. Mas tudo bem, que continuem compactuando com seus malditos “sobrinhos”. Às vezes, o trabalho de reformulação de um site sai mais caro que a produção de um novo. Aí já viu, né?

Read More

A Importância das Técnicas de SEO para seu Site ou Blog

O posicionamento de seu site na resposta a uma consulta a um mecanismo de busca como o Google, Yahoo!, Bing etc. é fundamental para que o esforço de marketing de seu negócio seja bem sucedido.

É nesse contexto que as técnicas de SEO, Search Engine Optimization em inglês, são aplicadas como uma das melhores estratégias para garantir que seus clientes, parceiros, leitores - o seu público alvo - encontre o que você quer mostrar no seu site da maneira mais fácil e mais rapidamente possível.

O que o SEO ou Otimização para Mecanismos de Busca, visa, então, é maximizar a visibilidade de seu site para os Mecanismos de Busca, também chamados de Motores de Busca ou Search Engine, em inglês, para que seu Site ou blog apareça em primeiro lugar nas respostas dos Mecanismos de Busca ou pelo menos, na primeira página da resposta. Para que o objetivo seja atingido alguns pontos principais no seu site deverão ser analisados em profundidade:

• A Estrutura da codificação em HTML;
• O Tempo de Resposta do Servidor;
• O Tempo de Abertura das Páginas do Site;
• A Facilidade de Navegação nas Páginas, sua Usabilidade;
• A Otimização Interna das Páginas;
• E, principalmente, o que chamamos de Link Building.

Link Building

De um modo geral, são os links saem de seu site para sites relevantes e os links de outros sites, de alguma maneira relevantes para o assunto pesquisado, que apontam para páginas de seu site.

O Link Building consiste no método de obtenção de links para melhoria do ranking do site e consequente aumento de visitantes. O Link building é muito importante pois baseia-se no principio fundamental da internet em que os links permitem a conexão entre páginas de Internet, por isso quantos mais links estiverem a apontar para o seu site, mais hipoteses terá de ser visitado. Além de que os motores de busca como o Google ou Yahoo usam a contagem de links de sites relevantes como votos para aumento do ranking de uma página. É por isso talvez o método mais importante em SEO. Para angariar links sem serem comprados a forma mais adequada é através da colocação de contéudo único e rico em informação.

Read More

Criação

• 1. Modelo de briefing

• 2. A importância das técnicas de seo para seu site ou blog

Read More

Modelo de briefing

Para montar um briefing entenda o cliente e preencha estes itens.

Um assunto com certeza polêmico é a produção de briefings em agências web e produtoras online.

Normalmente, o departamento de criação reclama que ou o briefing não traz informação nenhuma, ou traz muitos dados irrelevantes.

A verdade é que, na grande maioria dos casos, os briefings pecam por não expressar a real expectativa do cliente. É justamente esta falha que faz o projeto ir e voltar várias vezes, o que implica em refações e aumento dos custos operacionais.

Briefing inicial para planejar a ação

Acredito que existem dois pontos importantes a serem abordados nessa questão. O primeiro deles é o briefing inicial para o planejamento da ação. Quando o atendimento faz a coisa certa e o cliente não tenta bancar o gênio da comunicação, o ideal é fazer perguntas mais genéricas e que darão espaço para a criação trabalhar mais à vontade.

Briefing de planejamento da ação

• O que queremos dizer?
• Para quem (público-alvo)?
• O que esperamos que a pessoa faça depois de ser impactada por essa informação?
• Histórico de comunicação, identidade visual a ser seguida, restrições e outras informações importantes.
• Verba disponível

Isso costuma ser o suficiente para que o planejamento encontre soluções interessantes e viáveis para as ações que irá propor, sem ficar obrigado a fazer um hotsite ou uma guerrilha em redes sociais só porque o cliente ouviu falar que isso é “a onda do momento”.

Mas, depois que a proposta estratégica é aprovada, ou quando ela já foi definida pelo cliente ou pela agência offline, é necessário que o atendimento faça um refinamento do briefing, mais focado, para alinhar as expectativas com o cliente antes do desenvolvimento do projeto.

Muitas vezes o cliente cria uma série de expectativas que podem não ser atendidas, causando uma frustração enorme. Além disso, o detalhamento ajuda também os responsáveis pela aprovação do trabalho a avaliar o esforço, o que facilita a aprovação do projeto, reduz a ansiedade do cliente e evita problemas com o departamento de tecnologia.

Briefing de produção para projetos web

Vou mostrar um modelo de briefing de produção para projetos web que normalmente utilizo – o caso é real, mas os nomes foram omitidos. Considere que, neste exemplo, o documento foi apurado pelo departamento de comunicação contratante e não pelo fornecedor contratado, que as perguntas do briefing inicial (para o planejamento) já foram respondidas e que a TI será responsável pelo desenvolvimento.

1. O que queremos contratar

Breve descritivo do que deve ser contratado e das entregas esperadas. Exemplo: Redesenho de arquitetura e leiaute dos subsites A, B, C e D. Os quatro sites deverão seguir o mesmo modelo de arquitetura e ser planejados para desenvolvimento em Lumis 4.21 versão Java.

1.1 Entregas esperadas

Exemplo:

• Protótipo navegável do site completo (wireframe) em Axure
• Leiaute das telas-tipo em PSD, camadas, para os 4 sites
• Produção de conteúdo em flash (animação para home)
• Documento de governança de conteúdo

2. Objetivo de comunicação

O que queremos alcançar com a ação? Exemplo: A área técnica da instituição X tem a necessidade de criar subsites para as quatro ações internacionais que são promovidas em conjunto com entidades parceiras no exterior. A premissa dessa demanda é seguir o modelo atualmente utilizado para o site Y, com algumas melhorias que serão listadas a seguir.

• Os subsites devem permitir atualização de conteúdo de forma simples.
• O leiaute proposto deve ser permanente e não precisar ser substituído ano a ano. O projeto deve prever uma forma de atualizar não apenas o conteúdo, como a edição do encontro, para que não tenhamos mais a necessidade de todo ano fazer a troca do leiaute do site apenas porque no header consta o ano da edição e a cor das peças publicitárias mudou). Sugere-se ainda a utilização de um layout padronizado para os quatro sites, o que permite o melhor posicionamento da marca e identificação da instituição X como patrocinadora da ação.
• O site deve facilitar a disseminação do conteúdo em redes sociais.
• Sugestões de novas áreas (além daquelas que estão sendo solicitadas explicitamente e das que já constam no site Y) são bem-vindas.
• O site deverá ser facilmente replicado para outros eventos semelhantes que eventualmente venham a existir no futuro.
• Melhorar a atual organização de documentos existentes no site Y.

3. Mensagem chave

Defina aqui a mensagem essencial da comunicação.

4. Histórico e contextualização

Exemplo: A instituição X acompanha as negociações internacionais entre blocos econômicos e a política de comércio exterior adotada pelo governo, ao mesmo tempo em que apresenta propostas e sugestões, sempre defendendo os interesses da indústria brasileira.

Além disso, mantém parcerias com entidades congêneres no exterior, para trocar informações e discutir formas de cooperação econômica. Nesta frente de atuação, encontram-se alguns eventos que a instituição X promove anualmente, como os encontros A, B, C e D, que terão seus respectivos subsites.

5. Público-alvo primário e secundário

Exemplo: Empresários, governo, parceiros internacionais.

6. Funcionalidades desejadas

Árvore de funcionalidades e recursos esperados.

Exemplo:

• Apresentação
• Edição atual
  - Inscrições
  - Programação
  - Currículo dos palestrantes (em pdf)
  - Documentos
  - Vídeos
  - Fotos
  - Encontros de negócios
  - Visitas técnicas
  - Cidade-sede
  - Hospedagem
  - Edições anteriores
  - Classificação de conteúdos por edição
  - Currículo dos palestrantes (em pdf)
  - Documentos
  - Busca
  - Vídeos
  - Fotos
• Atividades paralelas
• Notícias
• Clipping
• Fórum
• Enquete
• RSS
• Espalhe o conteúdo, envie para um amigo, indique
• Links
• Contato

7. Conteúdos a serem desenvolvidos

Deverá ser produzido conteúdo para apresentação, edição atual e cidade sede. Os demais conteúdos serão fornecidos.

8. Referências para benchmarking

http://www.siteexemplo.com

9. Interação com demais sites

Os sites deverão ser identificados como subsites da instituição X, devendo ter ligação com este por meio de links e conteúdos correlatos.

10. Tecnologia

Preparar a arquitetura de forma a ser aplicável no CMS Lumis 4.21 versão Java. O desenvolvimento e a implementação serão objeto de outra contratação.

11. Orientações específicas do cliente

Cliente não quer que seja usada a marca J e não quer que os sites sejam azuis. Além disso, ele quer algo moderno e com elementos vetoriais, sem uso de fotos. Deverá ser utilizada a logomarca dos encontros A, B, C e D.

12. Prazos e entregas esperadas

Prazos:
Data da coleta do briefing:

Apenas uma última informação importante: nunca, em nenhuma hipótese, envie esse modelo como um formulário para o cliente preencher. Relacionamento é o principal papel do atendimento e a confiança do cliente você só conquista no dia-a-dia.

Read More