Rogério Lino » html

Quickpost: Instant documentation search

Rogério Alencar Lino Filho — Wed, 07 Dec 2011 14:47:27 +0000

dochub concentra de maneira fácil e rápida as documentações de CSS, HTML, Javascript e DOM. No qual tem o seu conteúdo retirado da Mozilla Developer Network.

Excelente ferramente para tirar aquela dúvida ou refrescar a memória.

Flash: SWFAddress + ReWrite = SEO

Rogério Alencar Lino Filho — Thu, 01 Apr 2010 14:44:53 +0000

SWFAddress é uma pequena mas poderosa biblioteca que provê deep linking para Flash e Ajax. É uma ferramenta de desenvolvimento, permitindo a criação de URLs unicas e virtuais que podem apontar para uma seção do site ou aplicação. SWFAddress habilita algumas de importantes capacidades que faltam hoje em dia nas tecnologias RIA, incluindo:

Adicionar ao Favoritos de um navegador ou site social

Enviar links via email ou mensageiros instantâneos

Procurar por um conteúdo específico através dos sites de buscas

Utilizar o histórico do navegador e o botão de recarregar

O Flash está para o SEO assim como o Coringa está para o Batman. Mas nem tudo está perdido quando se trata de otimizar a indexação do site em SWF nos mecanismos de busca. Com SWFAddress você pode interagir com a página via javascript alterando a URL e o próprio conteúdo do filme, possibilidade do o uso dos botões voltar e avançar do browser, adicionar ao Favoritos e alterar a animação do seu filme de acordo com a URL que está sendo requisitada.

Caso sua página seja acessada através da URL http://siteemflash.com/#contato, você poderá pular na timeline indo direto para o frame do contato. Para evitar o reload da página toda interação é feita através de âncoras html (#). E as alterações da URL utilizando âncoras são desprezadas pelos buscadores, uma vez que a âncora só serve para movimentar o foco na mesma página, logo o seu conteúdo permanece inalterado.

É aí que entra o módulo ReWrite do Apache, com o mod_rewrite podemos escrever condições para tratar as requisições, redirecionando-as ou não. Então voltando ao exemplo anterior, teríamos uma condição que quando for requisitada a página http://siteemflash.com/contato (ou qualquer outra URL) redireciona para a página inicial (index) adicionando a âncora para contato (#contato) e imprime na página o conteúdo referente à mesma. Esse conteúdo impresso não será visível, apenas para indexação. O sitemap ou a estrutura básica do site, também deve estar contido no bloco de código html invisível, juntamente com todas outras informações relevantes.

Resumindo, você acaba tendo um trabalho dobrado ao desenvolver o site, mas evita transtornos de indexação. É muito útil para quem não abre mão do site feito com o uso da ferramenta da Adobe.

No próprio site da Asual tem um exemplo de uso do SWFAddress para SEO (o exemplo pode ser baixado pelo site). Abaixo segue alguns sites que fizeram uso da biblioteca, no qual o primeiro eu participei do desenvolvimento:

Javascript: Colorpicker

Rogério Alencar Lino Filho — Mon, 19 Nov 2007 19:43:09 +0000

Para quem não conhece, colorpicker é um seletor de cores. Ou seja uma “janela” com n cores predefinidas.

Esse exemplo simula o colorpicker da Macromedia, disponível no Flash, Dreamweaver, Fireworks e etc. Como o picker da Macromedia, ele possui um display para pre-visualizar a cor e o seu valor hexadecimal ao passar o mouse sobre ela (onmouseover).

Possui métodos getColor para resgatar o valor escolhido, onchange para efetuar uma ação ao escolher uma determinada cor, entre outros.

É totalmente estilizado por CSS, logo poderá deixá-lo como quiser. Personalizando-o.

Para utilizá-lo basta indexar-lo a sua página com a tag

var picker = new ColorPicker(100, 38); // x , y
picker.setVisible(true);

Para visualizar-lo funcionando clique aqui.

Flash: SWF com Fundo transparente

Rogério Alencar Lino Filho — Sun, 04 Feb 2007 20:02:14 +0000

Mesmo sendo fácil ainda há gente que não conhece. Através de um parâmetro () dentro da tag object podemos especificar se o arquivo terá o fundo transparente.

Para muitos que aindam usam a tag embed para funcionar em todos os browsers tem que colocar o atributo wmode nela também:

Então o código validado do SWF com fundo transparente ficaria assim:

Uma coisa que acontece também que pode gerar bastante dor de cabeça é quando algum elemento do HTML que deveria ficar por cima do SWF e acaba acontecendo o contrário. E mesmo alterando o z-index não resolve. Sendo a solução apenas deixar o SWF com o fundo transparente.

Flash: Tag Object

Rogério Alencar Lino Filho — Fri, 02 Feb 2007 00:08:19 +0000

Depois do swf gerado é hora de colocá-lo no HTML. No próprio Flash ao apertar o F12 ele publica o filme e já cria um HTML. Tudo muito bom, se não fosse pelo código gerado, muito sujo e não é validado pela W3C.

O código gerado é igual a este:

O problema em sí não está na tag object e sim na embed que não é reconhecida pela W3C. Beleza, então eu tiro a tag embed e está tudo certo? Errado.

Primeiramente vamos conhecer mais sobre a tag Object.

A tag object serve para anexar à página algum dos três tipos de dados (objects, images and applets), mas para alguns existe uma tag mais adequada, como por exemplo uma imagem.

The OBJECT element allows authors to specify all three types of data, but authors may not have to specify all three at once. For example, some objects may not require data (e.g., a self-contained applet that performs a small animation). Others may not require run-time initialization. Still others may not require additional implementation information, i.e., the user agent itself may already know how to render that type of data (e.g., GIF images).

link: http://www.w3.org/TR/html4/struct/objects.html#edef-OBJECT

Então respondendo a pergunta acima a tag object sem a embed não irá funcionar, a não ser que o atributo type (que no código acima você percebe que ele está na embed) esteja definido adequadamente. E também seja colocado o atributo data (que funciona igual ao href).

Resulmindo o código acima ficaria assim:

Pois então com o exemplo acima, além de validar sua página o código fica mais limpo e enxuto.

Mais sobre:

http://www.maujor.com/tutorial/adeus-embed.php

Editores HTML – Qual usar?

Rogério Alencar Lino Filho — Wed, 05 Jul 2006 23:11:28 +0000

Uma coisa muito discutida por quem trabalha com Web é qual editor usar. Mas antes de ficar testando editor por editor a procura de um que mais lhe agrade é bom procurar saber mesmo o que você espera que um bom editor tenha.

O primeiro editor de HTML que usei foi o Dreamweaver na época em sua versão 4, de lá pra cá muita coisa mudou nele e hoje em dia com certeza é um dos editores mais completos, senão o mais completo. Porém não é freeware.
Mas depois que passei a escrever todo o HTML “na mão”, comecei a ver que muitas de suas ferramentas eram dispensáveis e que ele era muito pesado só para eu ficar digitando, além de ter os códigos gerados automaticamente muito “sujo”. Procurei então por um editor mais leve. Usei durante um tempo o próprio bloco de notas do windows, mas quando o código começa a ficar muito grande aquele monte de letra da mesma cor passava a ser desagradável.

Quando encontrei o EditPlus realmente era o que eu queria, simples, leve e só com as ferramentas que eu espera que um editor tivesse – como por exemplo paleta de cor e FTP – além de pintar todo o código facilitando a legibilidade. Foi amor a primeira vista e até hoje utilizo ele tanto para construir um documento XHTML quanto para CSS. Mas esse também é shareware.

Esses dias quis procurar por novidades na internet, ver se talvez pudesse ter um editor que me agradace mais, sem fugir da mesma simplicidade do EditPlus, e melhor, um editor freeware.

Encontrei dois editores que me agradaram muito:

Primeiro o PSPad com interface muito parecida com a do EditPlus só que mais robusto. Possui uma paleta de cor mais abrangente com mais opções na hora de escolher a cor, outra coisa que me agradou muito também foi o indentador automático – apesar do custume de utilizar a tecla tab para alinhar – e vem também com uma opção autocompletar, teclando CTRL+J abre uma caixa com as opções para você escolher, ideal para pessoas como eu que do nada esquecem os nomes de alguns atributos -, isso além de fechar automáticamente as chaves, parênteses e aspas (ainda vou ter que me acostumar com isso).

O segundo foi o Araneae 5 excelente editor para aqueles que não abrem mão do velho bloco de notas. Tão leve quanto, mas com funcionalidade de colorir o código, paleta de cor e tem no canto direito uma aba com algumas tag e atributos, bastando só clicar para adicionar ao documento. Tem uma interface parecida com os programas da Macromedia, versão MX.

mais sobre:

Revolucao.etc.br – Web Standards e as Ferramentas de desenvolvimento

[ editado ]

O EditPlus também tem a opção de fechar as tags automaticamente, só que vem desabilitada.

[ /editado ]

XHTML – O que é?

Rogério Alencar Lino Filho — Mon, 03 Jul 2006 19:17:28 +0000

XHTML (Extensible Hypertext Markup Language) é uma linguagem de marcação baseada em XML escrita para substituir o HTML.

No XML podemos criar nossas próprias tags, e o XHTML já vem com as tags pré-definidas baseadas nas tags já conhecidas do HTML. Utilizando as regras do XML.

Já que o XHTML usa as tags do HTML para que utilizá-lo?

Imagine que para cada página da internet que você fosse ver um código diferente. E que cada pessoa fosse definir o seu padrão. Seria muito difícil verificar se aquele código estaria dentre os padrões. É aí que entra o XHTML.

Para construir uma página em XHTML você deverá seguir os padrões da W3C, padronizando os códigos e tornando mais fácil sua validação e a legibilidade.

Por exemplo: todas as tags e seus atributos devem ser escritos em letra minúscula, todo valor dos atributos devem estar entre “” (alt=”Olá”), e as tags simples devem ser fechadas com “/>” ().

Alguns exemplos:

Tags e atributos:

errado:

certo:

Aninhamento das tags:

errado:
parágrafo negrito

certo:
parágrafo negrito

O XHTML é dividido em três tipos (DOCTYPE):

Strict: o mais rigoroso, exige que seja seguido por completamente os padrões.
Transitional: transição da forma antiga de marcação para uma nova forma. Utilizado por quem ainda está preso à alguma forma antiga em seu site. Sendo um pouco menos rigoroso que o Strict.
Frameset: usado quando se utiliza frames no site.

Principais diferenças entre XHTML e HTML

Além das tags escritas em letra minúscula, o fechamento obrigatório das tags, e as aspas. Também a sintaxe dos atributos devem ser escritas por completo (
para
). E a “troca” do atributo name para o atributo id.

Logo veremos mais a fundo o que são DOCTYPE e como funcionam e a declaração de um XHTML.

mais sobre:
Maujor.com – Tutorial XHTML
W3.org – O que é XHTML?
W3schools – XHTML validation
W3Schools – Diferença entre XHTML e HTML
Revolução.ect.br – O que é XHTML?
Revolução.etc.br – Doctype
Linha de Código – Tutorial XHTML
Linha de Código – Escrevendo um XHTML válido

Tags – O que são?

Rogério Alencar Lino Filho — Fri, 30 Jun 2006 17:43:44 +0000

São as estruturas que formam o HTML, podem conter atributos ou não. Uma tag é constituída por um sinal de “<” no começo seguido de seu nome mais o sinal de “>”. Os atributos da tag são especificados dentro dela.

exemplo:

resultado:

note que todos os valores dos atributos estão entre “”, mesmo não sendo necessárias para o HTML, mas é bom acostumar para que quando começar a trabalhar com o XHTML (veremos) – para que seja validado pela W3C. O mesmo serve para a “/”, que é insirida no final das tags simples, como é o caso da tag hr. Abaixo as principais tags e seus atributos:html - a tag princiapal da página aonde ficará todas as outras tags.head – dentro da tag head ficam o titulo (title), os scripts (javascript) e o estilo (CSS), além de outras tags como meta e link.title – define o título da página.

body – o corpo da página, o que vai aparecer para o visitante.

hn – varia de h1 até h6, vem com predefinições para o texto, utilizada para títulos.

p – para iniciar um parágrafo.

blockquote – serve para definir uma citação do texto.

hr - horizontal rule, inseri uma linha horizontal. Pode ser controlada pelos seguintes atributos:

width: tamanho da linha, medida em pixel ou porcentagem;
size: largura da linha, medida em pixel;
align: define como será alinhada a linha (left, center, right);
noshade: retira a sombra da linha;

font – para formatar a fonte da página.

size: tamanho da fonte, vai de 1 até 7;
color: cor da fonte em hexadecimal;
face: o tipo da fonte, pode-se escolher mais de uma fonte separando por vírgula no qual o browser vai procurar qual o visitante tem da esquerda para a direita – usa-se como default “Sans-Serif”;
ex: Texto</font>

a – defini um link na página.

href: destino do link, pra onde o usuário vai.
title: a descrição que irá aparecer ao repousar o mouse em cima.

img – adiciona uma imagem à página. Tag simples, então termina com “/”.

src: destino da imagem.
alt: descrição da imagem (ao posicionar o mouse em cima). Opcional, mas para ser validado tem que pelo menos conter. ex: alt=”".
width: largura.
height: altura.
ex:

i – adiciona itálico ao texto;

b – adiciona negrito ao texto (bold);

center – centraliza o conteúdo contido nele na página.

Algumas dessas tags – como por exemplo i, b e center e os atributos da tag font – quase não são usadas e seus atributos também, sendo substituídos por classes ou ids definidas no CSS (Cascade Style Sheet). Mas é bom vermos para termos uma boa base sobre como funcionam as tags.

Toda tag pode receber uma id e/ou class para ser identificada e formatada no CSS.

Dica: tente testar as tags alterando os atributos e ver os resultados para melhor fixar e compreender.

mais sobre:

http://pt.wikipedia.org/wiki/Tag

HTML – O que é?

Rogério Alencar Lino Filho — Fri, 30 Jun 2006 17:42:26 +0000

HTML (Hyper Text Markup Language) é uma linguagem interpretada por browsers (navegadores) para exibir textos e gráficos pela Web; Formado, estruturado, por Tag’s.
Para desenvolver uma página HTML não é necessário mais do que um simples Bloco de Notas, desde que salve como a extensão .html.

Exemplo de página HTML:

Minha Home Pag

Seja bem vindo!

no exemplo acima temos uma simples página com o seguinte conteúdo sendo exibido no corpo da página (body) : “Seja bem vindo!”, formatado pela Tag
que define o parágrafo. E no título (title) na barra do browser: “Minha Home Page”.

Repare que as todas as Tag’s do exemplo são fechadas com a repetição de seu nome acrescentando uma “/” na frente, o que mostra para o browser quando a Tag é fechada. O que veremos mais a fundo nos próximos tópicos sobre Tag’s.

mais sobre:
http://www.w3.org/MarkUp/
http://www.w3.org/MarkUp/Guide/
http://www.criarweb.com/artigos/7.php?manual=11