Workshop de HTML

[helldanger1]

Como fazer uma transparência com GIF sem halos



Como fazer uma imagem com formato GIF que tenha transparência e suavizado, porém sem que pareçam halos.

Por Miguel Angel Alvarez - Tradução de JML




Os halos são efeitos pouco desejáveis que tem o fundo transparente, geralmente em formato GIF. O que ocorre com os halos que aparece uma linha de cor ao redor da silhueta da imagem. Esta linha pode ser escura ou clara. Se for escura e a colocarmos sobre um fundo escuro, não se verá o halo e tudo irá bem. Mas se for escura e a colocarmos sobre um fundo claro teremos o mencionado efeito de halo.

Em formato GIF, sempre que a silhueta da imagem tiver a borda suavizada, vamos sofrer o efeito de halo. Agora também, se o halo tiver uma tonalidade similar ao fundo onde estamos colocando a imagem, não o veremos e o resultado será bom. Por isso, às vezes as imagens GIF vêm preparadas para colocar sobre fundos claros ou escuros. Se a colocamos sobre um fundo com uma tonalidade que não lhe corresponde sairá silhueta rodeando a imagem, ou seja, aparecerá o famoso halo.

Por exemplo, aqui temos uma imagem que tem um halo.

O halo é essa pequena borda escura que há ao redor da silhueta do círculo e do caracol. Este halo aparece porque esta imagem GIF transparente está preparada para colocar sobre um fundo escuro. De fato, aqui temos a prova do bem que se veria a imagem sem o halo se a colocamos sobre um fundo preto.

Referência: Publicamos outro artigo com detalhes sobre os formatos gráficos GIF e PNG e os halos: Transparência em formatos gráficos para web GIF e PNG.

 

[helldanger1]

O suavizado provoca os halos

Enquanto a imagem tiver um suavizado existirá um halo. Se o suavizado da imagem estiver preparado para um fundo claro e a imagem se coloca sobre um fundo claro, não se verá o halo. Porém, se a imagem tem um suavizado tirando a claro e se coloca sobre um fundo escuro, o halo aparecerá. Ou seja, sempre temos que colocar a imagem sobre um fundo parelho ao que tivermos preparado.

Se não tivermos suavizado não sairá o halo, porém o efeito será sensivelmente pior, em muitos dos casos. Na imagem seguinte fizemos o mesmo desenho, porém sem suavizado.

Acho que para qualquer pessoa estará claro que o resultado tem pior qualidade. O halo desapareceu, mas se nota o pixelado ao redor da imagem.

Fazer um suavizado da cor desejado para evitar o halo

Agora vamos mostrar a maneira de conseguir um suavizado sem que apareça o halo. Vamos trabalhar com Photoshop, embora cada qual fará um processo similar em seu programa de design gráfico preferido.

Começamos com uma imagem com o tela de cor que desejarmos como fundo. Ou seja, colocamos o fundo da mesma cor da do fundo da web.

Logo, fazemos o desenho que quisermos

A seguir fazemos um "Salvar para Web", no menu Arquivo de Photoshop, para salvar a imagem passando por um quadro de diálogo que nos vai permitir realizar uma série de ações para selecionar a transparência.

 

[helldanger1]

Na janela de Salvar para web temos que fazer trÊs passos. (Sempre ter em conta que queremos salvar a imagem em formato GIF, que se indica nas opções que há à direita. Pois se estamos salvando com outro formato como JPG, não poderemos selecionar transparência porque não tem. Além disso, temos que ter marcado o checkbox para permitir transparência.)
Primeiro selecionamos a ferramenta conta-gotas.
A seguir clicamos na cor que quisermos que seja transparente, que será o fundo da imagem.
Por último apertamos o botão para atribuir as cores selecionadas ao transparente. Com isso, conseguimos que a cor selecionada se mostre como transparente.
Este processo pode ser repetido se quisermos que várias cores da imagem se mostrem como transparente.

O resultado é a seguinte:

Observaremos que a imagem, sobre fundo branco, aparece com um halo azul, porém quando colocamos a imagem sobre um fundo que tenha a tonalidade azul, o halo desaparecerá de nossa vista.

 

[helldanger1]

Contador de visitas com a procedência dos usuários



Apresentamos ClustrMaps, um contador para saber a procedência dos visitantes de sua web.

Por Miguel Angel Alvarez - Tradução de JML




Queremos falar sobre ClustrMaps, um serviço inovador de contador, que tem a particularidade que serve para conhecer a procedência dos visitantes de sua web. É um serviço gratuito que você pode incorporar em qualquer site, sem praticamente conhecimentos HTML nem nenhum conhecimento de programação.

O sistema oferece uma página web que pode ser acessada através da URL: ClustrMaps - Hit counter map widget and tracker shows locations of all visitors to any site - free

Estão em fase Beta, o que quer dizer que ainda estão desenvolvendo ou melhorando o sistema, porém já podemos incorporá-lo em nossa página web. Para conseguir um contador temos que nos registrar em tal página. Não nos pedem nenhuma informação pessoal, salvo a URL onde vamos incorporar o sistema e nosso e-mail. Enviarão a senha para acessar aos serviços ao nosso correio eletrônico. Uma vez recebida, podemos acessar à página através do endereço de nosso site e a senha.

E uma vez dentro nos darão um código fonte que podemos copiar e colar na página. Têm várias versões do código, que podemos escolher a que melhor se ajuste a nossas necessidades. Têm uma versão inclusive para utilizar se nossa página está hospedada em um servidor como MySpace.

Nós colocamos o primeiro dos códigos que provêem. O interessante é que este código seja colocado em todas as páginas de nosso web site, no lugar onde quisermos que apareça o contador, para que contabilize as entradas de usuários de qualquer página, não só no portal.

Logo, podemos marcar algum comportamento do sistema, como que conte as visitas de todo o ano ou então de um só dia.

Veremos que não só nos diz o país que vêem os visitantes, como também a localização específica de sua cidade. Tem um sistema de pontos que, quanto maior o tamanho do ponto, indica que o número de usuários que vêem desse lugar é maior.

 

[helldanger1]

Animação HTML simples com marquee



Utilizamos a etiqueta marquee para realizar uma animação simples em uma página web. Como animar uma imagem ou fazer texto em movendo só com HTML.

Por Miguel Angel Alvarez - Tradução de JML




Este artigo serve para as pessoas que trabalham somente com HTML ao fazer páginas web e que querem incorporar um tipo simples de animação em seus sites. Uma solução fácil para fazer uma animação com HTML é fazer uso de Marquee. Há pouco tempo recebemos um e-mail de Carlos López Schmidt no qual nos sugeria um truque para animar imagens em páginas web utilizando marquee. Como não tínhamos nenhuma explicação sobre a etiqueta HTML <MARQUEE>, nos dedicamos a escrever este texto que dá algumas especificações e conselhos mais detalhados sobre a etiqueta. De qualquer forma, há que agradecer a Carlos a inspiração para escrever estas linhas.

<MARQUEE> é uma destas etiquetas não padronizadas de HTML, que suportam os navegadores mais comuns, porém que não estão compreendidas dentro das especificações de HTML. Serve para animar elementos dentro da página. Teoricamente. permite que o conteúdo que colocamos dentro da etiqueta, seja texto, fotografias, ou as duas coisas, se desloque horizontalmente pela página.

A etiqueta marquee pode nos servir para fazer animações em páginas simples, sem nenhum conhecimento de linguagens de programação nem de outras complicações semelhantes. Para os que só conhecem HTML é uma ferramenta perfeita se desejam fazer com que um elemento da página se mova.

Porém atenção, embora esteja comentando este truque para mover texto pela página ou imagens, temos que utilizar o marquee com muita prudência, visto que tem desvantagens:
Marquee não está compreendido nos padrões HTML.
Utilizar Marquee pode ter problemas de acessibilidade, ou seja, pode ser difícil de ler para determinadas pessoas com deficiências.
O fato de animar elementos de uma página favorece o dinamismo e ajuda a chamar atenção sobre determinadas mensagens ou imagens, porém, se utilizar marquee em muitos lugares pode provocar confusão e cansar o usuário.
Para utilizar marquee, simplesmente colocamos dentro da etiqueta os conteúdos que queremos que se movam, já sejam texto, imagens ou qualquer outro tipo de conteúdo. Algo como isto:

<marquee>texto que se move</marquee>

Porém, também poderíamos colocar algo como isto:

<marquee>
<table align="center" width="100"border="1">
<tr>
<td>Esta tabela se desloca, com todo o conteúdo da tabela</td>
</tr>
</table>
</marquee>

 

[helldanger1]

Marquee suporta uma série de atributos para modificar seu comportamento ou seu aspecto. São os seguintes:

WIDTH
Largura do marquee. Se não marcamos altura, se colocará na seguinte linha, como em um parágrafo distinto. Se marcamos uma largura, a marquee tentará se mostrar na mesma linha onde a tivermos colocado. Se não houver espaço para ela se realizará a conseguinte quebra de linha para mostrá-la um pouco mais abaixo.

DIRECTION
Para onde queremos que se desloque o conteúdo do marquee. Os possíveis valores são "LEFT" e "RIGHT".

BEHAVIOR
É o comportamento do marquee, dentre os possíveis: SCROLL (o comportamento por padrão) indica que tem que fazer o deslocamento sempre em um mesmo endereço e ALTERNATE, que indica que o deslocamento se faz a um lado e ao outro de maneira alternada.

SCROLLDELAY
É o tempo em milésimos de segundos que tem que passar entre cada mudança da posição do que está se deslocando. Ou seja, quanto maior for o valor, mais milésimos de segundo demorará o marquee em se mover. O valor padrão é 85, porém, se por exemplo, colocarmos um valor 500 o marquee mudará de estado (deslocará o conteúdo) a cada meio segundo.

SCROLLAMOUNT
É a quantidade de pixel que tem que se deslocar o conteúdo do marquee cada vez que se move. Quanto maior scrollamount, mais se deslocará o marquee em cada movimento e portanto a animação será mais rápida. O valor padrão é 6. Podemos provar colocando um valor maior e veremos que o movimento será mais "a golpes".

LOOP
O número de ciclos que irá se mover o texto ou o que for que tiver dentro do marquee. Este atributo só funciona em Internet Explorer. Por padrão é INFINITE, que quer dizer que se deslocará todo o tempo sem parar. Porém, por exemplo se colocarmos um valor como 3, quer dizer que o marquee só realizará três ciclos ou movimentos e logo parará.

BGCOLOR
A cor de fundo do marquee. Aceita o nome de uma cor HTML ou de um valor RGB de tal cor.

HSPACE e VSPACE
Estes dois atributos servem para definir o número de pixel que deve aparecer entre o marquee e outros conteúdos da página, em horizontal e vertical.

Alguns exemplos de marquee:

<marquee width=200 direction=right>
Marquee à direita e com largura
</marquee>

<marquee behaviour=alternate scrolldelay=500 bgcolor="#ff8833">texto que se move</marquee>

 

[helldanger1]

Declaração DOCTYPE em documentos HTML



Estudo da declaração do tipo de documento HTML, que se especifica na declaração DOCTYPE ao princípio do código.

Por Jose A. Molina




Neste artigo nos centraremos na declaração DOCTYPE dos documentos HTML.

O W3C (World Wide Web Consortium: World Wide Web Consortium - Web Standards), encarregado da criação dos Standard webs, define que os arquivos HTML, XML, XHTML devem ter uma declaração de tipo DOCTYPE que deve fazer referência a uma das três definições do tipo de documento que existem.

Esta declaração deve ser a primeira linha de nosso documento e é necessária para dizer ao navegador que versão de HTML é a que se usa na página. Se não se faz, o navegador processará a página em modo Quirks (modo de compatibilidade) podendo não interpretar corretamente o código da página.

A DTD (definição do tipo de documento) é a estrutura regulamentar, ou seja, os elementos e atributos que estão disponíveis para cada tipo de documento. Para HTML 4.01 (as versões anteriores não são recomendáveis devido a que não são totalmente compatíveis com as Folhas de Estilo), existem 3 tipos de DTD:
HTML 4.01 transitório

O HTML 4 transitório inclui todos os elementos e qualidades de HTML 4 Strict, porém agrega qualidades "presentational", elementos desaprovados ou elementos obsoletos. Chama-se Transitional porque está pensado como transição para HTML 4 estrito.

O modo de defini-la é:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">

HTML 4.01 Frameset:

Esta é uma variante de HTML 4 transitório para os documentos que utilizam Frames (molduras).

O modo de defini-la é:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Frameset//EN\" \"http://www.w3.org/TR/html4/frameset.dtd\">

HTML ESTRITO

Se declararmos este DTD, o navegador passará a agir em cumprimento dos padrões (Standards compilam-se). Isto implicará que só possam se usar as etiquetas de HTML 4.01. Este é o modo recomendado pelo W3C, já que é compatível com o CSS e pode ser interpretado corretamente por todos os navegadores, tornando muito mais fácil o passo de nossos documentos ao XHTML que muito possivelmente tenda a substituir ao HTML nos próximos anos.

O modo de defini-la é:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">

 

[helldanger1]

Etiquetas para ressaltar texto em HTML



Algumas etiquetas que podem servir para ressaltar texto em HTML, como sublinhado, riscado, cabeçalhos e formatos de texto de parágrafos, como pedaços de código, etc.

Por Miguel Angel Alvarez - Tradução de JML






HTML tem diversas ferramentas para ressaltar texto que vamos ver neste artigo, que oferece alguns detalhes práticos, embora também teóricos, da linguagem de etiquetas para a criação de páginas web. Para ver outros artigos práticos consultar o Workshop de HTML.

Como devemos saber, HTML é uma linguagem que serve para criar páginas web. É especialmente indicada para escrever os conteúdos das páginas, embora também tenha uma boa gama de etiquetas para formatar texto e apresentá-lo de uma maneira atrativa ou simplesmente clara. Já publicamos um completo manual de HTML, com explicações detalhadas sobre a criação de páginas web, porém agora vamos ver um compêndio de etiquetas que servem especialmente para formatar e destacar texto, pois algumas delas não chegamos a vê-las no manual, por se tratar de etiquetas pouco utilizadas.
Nota: Antes de continuar é importante assinalar que a formatação de texto agora se faz com CSS, que permite trabalhar de uma maneira muito mais detalhada, cômoda e completa com o estilo das páginas web.

 

[helldanger1]

Pois vejamos as etiquetas para destacar texto:

<B> o <STRONG>
As mais conhecidas e utilizadas são os negritos, que simplesmente colocam o texto com uma largura maior, como mais ressaltado.

Este é o efeito de um negrito

<I> o <EM>
As etiquetas itálicas ou cursivas, que servem para fazer que o texto se incline a um lado.

Este texto está em itálico ou cursivo

<U>
Esta etiqueta serve para que se sublinhe o texto, aparecendo uma linha por debaixo do mesmo. Embora em HTML 4 esta etiqueta tenha sido marcada como obsoleta ou não incluída nas especificações, todos os navegadores continuam entendendo-a.

Este texto está sublinhado

<STRIKE>
Esta etiqueta não é muito conhecida e nem muito utilizada. Serve para que o texto apareça riscado, ou seja, com uma linha por cima do texto. Esta etiqueta é muito útil quando atualizamos uma informação que aparece em uma página e a substituímos por outra. Ao invés de eliminar a anterior informação podemos riscá-la, para que os leitores possam comprovar que a página se encontra sempre atualizada e em revisão. Ocorre o mesmo que à etiqueta <u>, que na especificação de HTML 4 não está incluída. Entretanto, todos os navegadores a entendem perfeitamente.

Este texto está riscado

Cabeçalhos <H1> … <H6>
As etiquetas de cabeçalhos, ou headings em inglês, servem para destacar um texto, porém não podemos utilizá-las em qualquer caso, porque um cabeçalho sempre indica um titular ou a abertura de uma nova seção com um título. Temos que utilizá-las então para estruturar nossos documentos em seções e subseções e titular cada uma delas com um nível adequado. <H1> deveria ter um no cabeçalho principal do documento, porém logo poderíamos ter vários <H2> e dentro destes alguns <H3>, se é que os necessitamos. E assim sucessivamente.

 

[helldanger1]

Este é um cabeçalho h3

Formatos de parágrafo para destacar textos

Existem algumas etiquetas para destacar parágrafos inteiros e dar-lhes um formato específico. Alguns exemplos são:

<CODE> ou <KBD>
Serve para escrever um código fonte de uma linguagem de programação. Simplesmente coloca uma fonte de um tipo como courier, no qual todas as letras têm a mesma largura.

var InstrumentoMusical = new Class({
initialize: function(tipo){
this.tipo = tipo;
}
});

<TT>
Texto de Teletipo. Que cria um estilo como o das antigas máquinas de teletipo, que transmitiam informação com caracteres.

Este texto é tipo teletipo.
Pode-se observar o tipo de letra que se utiliza.
Em geral com courier.

<CITE>
Serve para colocar texto de citação, texto dito por outra pessoa. Esta etiqueta geralmente coloca o texto em cursiva, porém outros navegadores poderiam interpretá-la de outras maneiras.

Só séi que não sei nada!

<BLOCKQUOTE>
Esta etiqueta é bastante útil, porque cria uma margem tanto à esquerda como à direita, o que produz um efeito como se fosse um fragmento extraído de outro lugar ou que sirva para comentar a informação anterior.

Este é um parágrafo que se mostra com margens em ambos lados. Para que se vejam as margens tenho que escrever bastante texto. É uma boa utilidade para destacar um pedaço do texto.