DGmike

Você se lembra quando inserir um video em uma página web era complicado? Você prescisava usar a tag embed e colocar um arquivo .wma que muitas vezes prescisava de um plugin da microsoft para conseguir rodar. Consequentemente, o player do tio Bill carregava no Internet Explorer e deixava o usuário furioso com o consumo de memória que ele consumia.

Apesar dos pesares, era relativamente fácil inserir um video com o html4 que tinhamos na época:

1

<embed autoplay="false" src="VIDEO.wma" width="50" height="50></embed>

Videos online, assim foi que o youtube conseguiu a maior audiência do mercado web do mundo

Ainda bem que o tempo passa e, com ele, a tecnologia só melhora. Inventaram o flash e com ele o player personalizado. Pouco tempo depois nascia um dos mais visitados sites do mundo: Youtube. Mas, infelizmente se tornaria mais complicado inserir um video no seu site. Agora era necessário usar o embed de flash, que não decorei até hoje.

1
2
3
4
5
6

<object width="640" height="385">
  <param name="movie" value="http://www.youtube.com/v/ID_VIDEO"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/ID_VIDEO" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed>
</object>

O pior veio quando, em alguns casos, o browser bloqueava o embed e precisou-se usar algum hack em javascript para conseguir “embebedar” o flash player com suas trocentas variáveis.

Com a chegada do html5 tudo ficou mais fácil. Eu já havia explicado por aqui como se faz para inserir um video em formato .ogg em sua página. Isso foi um pouco antes do html5 estourar nas paradas de sucesso. Algum tempo depois o Youtube aderiu a essa novidade.

Mas infelizmente nem tudo são flores na vida de Joseph Climber, e agora nos deparamos com uma pergunta básica: usar video com html5 ou embed de flash player. O caso é que, dependendo da máquina/browser do usuário, o html5 (que tem muito mais vantagens) simplesmente não funciona. O youtube está convertendo, pouco a pouco os videos em formato .flv para o formato .ogg aos poucos, então quando saber que está na hora de atualizar os videos do seu blog?

Para resolver o problema, o youtube decidiu tomar as redias e “inventou” uma nova forma de colocar os videos dele no seu site/blog: através de iframes. Veja como a sintaxe fica mais interessante.

1
2
3
4

<iframe class="youtube-player" type="text/html" frameborder="0"
    src="http://www.youtube.com/embed/VIDEO_ID"
    width="640" height="385"
></iframe>

Apenas trocando o ID do video. E voilà, seu video está em seu site sem você precisar se preocupar com atualizações de versão, compactibilidade, etc, etc.

Vamos falar um pouco de listas em xHTML. No mundo do html existem três tipos de listas: ordenadas, desordenadas e definição. Devemos usar cada uma com base em seus fundamentos. É assim que implantamos a semântica no html, não se preocupe se a lista aparece estrana no seu layout, o CSS é seu amigo e vai reestruturar a lista como você desejar. Também não se preocupe com os itens que aparecem antes de cada item, eles também podem ser trocados via CSS.

Os tipos diferentes de listas que podemos ter em HTML

Para realizarmos estas listas usamos as tags OL, UL, LI, DL, DT e DL.

Desmistificando…

As listas desordenadas são utilizadas quando ela não deve ser utilizada na sequência em que  foi passada, sendo assim podemos efetuar as ações de uma determinada lista em qualquer ordem que ela continuará fazendo sentido. Para esta lista, usamos a tag UL, que em inglês, é o resumo de “Unordened List“. Sendo assim, para cada item da lista usamos a tag LI, que seria o resumo de “List Item” em inglês.

Um código de exemplo, mantendo o que estou falando é:

<ul>
<li>Catar as roupas</li>
<li>Varrer o chão</li>
<li>Cozinhar o almoço</li>
</ul>

O mesmo ocorre com as listas ordenadas, a diferença é que elas devem ser executadas ou lidas nessa determinada ordem, senão o sentido da lista pode mudar completamente, ficando inintendível. Um belo exemplo de lista ordenada é quando nos deparamos com o índice de um livro: que tem uma ordem a ser seguida.

Para este tipo de lista usa-se a tag OL que é uma abreviação para “Ordened List” em inglês. E para cada item, assim como em listas desordenadas, usa-se “List Item“, ou seja, LI.

<ol>
<lt>Tire as penas da galinha</li>
<li>Coloque-a na panela fervendo</li>
<li>Adicione água até cobrir ela por inteiro</li>
<li>Cozinhe por 30 minutos</li>
</ol>

Estas duas são as listas mais comuns no nosso dia-a-dia, mas ainda temos as listas de definição. As listas de definição são separadas para escrever itens com seus respectivos detalhes. A lista de definição mais comum que encontramos hoje é o dicionário, mas podemos nos aproveitar dessa lista de diversas formas. É muito interessante quando quisermos descrever uma série de itens, como os cômodos de uma casa ou vários itens de uma loja virtual.

Para uma lista de definição, usamos a tag DL, ou seja, “Definition List” e para cada item a tag DT que em inglês, é uma abreviação para “Definition Term“. Para os detalhes desse termo, a tag DD é quem se encarrega dessa tarefa, ela significa “Definition Description“.

<dl>
<dt>Lista</dt>
<dd>relação ordenada de nomes ou de quaisquer objectos que tenham de ser inventariados</dd>
<dt>Música</dt>
<dd>arte e ciência de combinar harmoniosamente os sons</dd>
</dl>

Algumas notas: Podemos ter mais de uma descrição para um mesmo termos, assim como dois ou mais termos podem ter a mesma descrição. Você pode fazer os agrupamentos como desejar, logo pode colocar dois ou mais DDs em sequência, assim como dois ou mais DTs em sequência. Outra forma de uso, menos comum, é o log de um chat, onde o termo é o nick do usuário e sua descrição são as mensagens enviadas por ele.

<dl>
<dt>Centro</dt>
<dt>Meio</dt>
<dd>ponto que se encontra a igual distância de todos os pontos da circunferência ou da superfície da esfera;</dd>
<dd>ponto que divide ao meio as rectas que, por sua vez, dividem a figura geométrica em duas partes iguais;</dd>
<dd>o meio de qualquer espaço;</dd>
</dl>

Uma das dúvidas mais comuns para quem está começando ajax é criar uma função que chame os estados e cidades nacionais. Sempre tenho que explicar uma serie de coisas como objeto httpRequest ou mesmo um mínimo de jQuery.

Pensando nos programadores do Brasil, desenvolvi este script de selects de estado e cidades do Brasil

Pensando nisso, resolvi escrever uma biblioteca que resolva este problema, além de estar disponível em uma única URL (JavaScript, hospedado pelo Google Code”>hospedado no google) no qual qualquer um pode utilizar. Assim, o usuário guarda em cache apenas um arquivo, e se o usuário passar em um site que chama a biblioteca, no próximo site que ele entrar e usar a biblioteca de novo, carregará o arquivo em cache e não precisará fazer o download de novo.

Outra vantagem é que o arquivo possui os estados e cidades no próprio core, assim não é necessário de interação com o servidor, o que deixa a resposta ao usuário mais rápida, deixando-o satisfeito. Ah, e sem falar que ele é crossbrowser e funciona com (ou sem) todas as bibliotecas conhecidas (como jQuery, prototype, dojo ou mootools) por trabalhar com apenas as funções que já existem no javascript.

Decidi hospedá-lo no servidor do google porque assim é mais improvável que hajam problemas de servidor em qualquer servidor que eu hospede. Para instalá-lo em seu site, coloque a seguinte instrução entre suas tags head.

1

<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-v0.2.js"></script>

Coloque este código (ou algo parecido) no seu html, para poder referenciar para a biblioteca.

1
2

Estado: <select id="estado" name="estado"></select>
Cidade: <select id="cidade" name="cidade"></select>

A forma mais simples de ativar a biblioteca é esta, usando o objeto dgCidadesEstados passando os objetos que serão serão usados como select de estados e cidades respectivamente. Veja um exemplo.

1
2
3

window.onload = function() {
  new dgCidadesEstados(document.getElementById('estado'), document.getElementById('cidade'), true);
}

O projeto é opensource, então se sua cidade não está na biblioteca, por favor me informe que eu mesmo colocarei no projeto.

[update]

No total, são 5.560 cidades cadastradas na biblioteca, a diferença é que não está colocado cada um em uma linha (como em instruções SQL) e sim cada estado em uma linha, o que diminui consideravelmente o tamanho do arquivo, se o seu Banco de Dados tiver mais que isso, por favor envie um comentário que procurarei atualizar o banco o mais breve possível.

[update 21/06/2009]

Vi que o pessoal está com dificuldades no retorno dos dados do servidor para o JavaScript, acontece que na versão encontrada no google code existiam exemplos e documentação necessário. Então decidi “puxar” essa informação para cá, afim de ajudar quem cai aqui de pará-quedas.

Recuperando os dados

Para fazer o sistema recuperar uma informação dada anteriormente, basta passar os parâmetros estadoValue e cidadeValue dentro do construtor.

1
2
3
4
5
6

new dgCidadesEstados({
  cidade: document.getElementById('cidade2'),
  estado: document.getElementById('estado2'),
  estadoVal: 'SP',
  cidadeVal: 'São Paulo'
});

Ou então passando como atributo value em sua tag select (ou input como descrito mais abaixo).

1
2

<select id="estado1" value="TO"></select>
<select id="cidade1" value="Araguaína"></select>

1
2
3
4

new dgCidadesEstados({
  cidade: document.getElementById('cidade1'),
  estado: document.getElementById('estado1')
});

Obstrusividade?! Não!

Não é preciso que você escreva uma tag select, você pode executar usando um input que será substituido pelo select necessário. Para ativar esta opção, basta passar o parâmetro change.

1
2

<input type="text" name="estado3" id="estado3" value="MG" />
<input type="text" name="cidade3" id="cidade3" value="Viçosa" />

1
2
3
4
5

new dgCidadesEstados({
  cidade: document.getElementById('cidade3'),
  estado: document.getElementById('estado3'),
  change: true
});

Charset?!

Você não precisa se preocupar em codificação de caracteres, o cidades-estados-js é disponibilizado nas versões Latin (ANSII) e UTF-8. Para isso, basta alterar a forma como você chama a biblioteca.

1
2

<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-1.0-utf8.js"></script>
<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-1.0.js"></script>

Dê preferencia a usar o charset utf-8, mas se seu sistema não aceitar essa codificação ou você usa DreamWeaver? e nem sabe o que é isso, provavelmente você vai precisar da versão em ASCII. ;D

Nota: Vale a pena ler o artigo sobre intercacionalização de caracteres da w3c que explica mais sobre codificação, inclusive o utf-8.

Estava vendo no deconcept um artigo muito interessante sobre a técnica de colocar flash em sites e o google conseguir ler o conteúdo, indexando-o. [update] Sei, o google agora indexa o conteúdo em flash, mas tenho bons motivos para não confiar nele ainda…

O interessante é o seguinte:

1. Os sitesearchs como o google e o Yahoo! indexarão normalmente pois o conteúdo é HTML normal.
2. Quem não tiver javascript verá o site em sua versão HTML, sem problemas.

Mas… cuidado! A pratica de SEO (Search Engine Optimization), se usado de forma incorreta, pode gerar dores de cabeça, como o banimento do Google. E não importa se você é famoso, o google não perdoa.

Enfim… vamos ao que interessa, eis o código:

<div id="flashcontent">
This is replaced by the Flash content if the user has the correct version of the
Flash plugin installed. Place your HTML content in here and Google will index
it just as it would normal HTML content (because it is HTML content!) Use HTML,
embed images, anything you would normally place on an HTML page is fine.
</div>

E, logo em seguida, o javascript.

var fo = new FlashObject("flashmovie.swf", "flashmovie", "300", "300", "8", "#FF6600");
fo.write("flashcontent");

Um tempo atrás comecei a fazer um tutorial sobre criar tabelas com o auxilio de uma classe em php que gera uma tabela semantica (o que é dificil) e de forma simples. Antes de continuarmos a classe propriamente dita, irei explicar um pouco sobre expressões regulares.

As expressões regulares auxiliam muito na hora de fazer uma busca sobre qualquer coisa em um bloco de texto, como por exemplo os links de um bloco html ou os emails contidos em uma conversa ou mesmo o ip contido em uma frase. Tudo o que é necessário é saber o padrão necessário do que você procura.

Vamos pegar um exemplo bem básico, um bloco de texto e vamos pegar alguns dados contidos nele.

IP é um acrónimo para a expressão inglesa “Internet Protocol” (ou Protocolo de Internet), que é um protocolo usado entre duas ou mais máquinas em rede para encaminhamento dos dados.

Os dados numa rede IP são enviados em blocos referidos como pacotes ou datagramas (os termos são basicamente sinónimos no IP, sendo usados para os dados em diferentes locais nas camadas IP). Em particular, no IP nenhuma definição é necessária antes do host tentar enviar pacotes para um host com o qual não comunicou previamente.

Estes são exemplos de IPs: 189.78.131.168 , 189.78.131.168 , 10.27.12.11 , 192.168.0.1 , 127.0.0.1

Retirado da Wikipedia

Percebam que existe um padrão na numeração dos IPs: Quatro sequências de até três números separados por pontos. Nas expressões regulares, podemos fazer buscas por digitos usando a expressão \d que significa digito, então para produrarmos um digito usamos \d. Também podemos definir uma quantidades de vezes que esse caracter pode aparecer, no caso, pode aparecer de uma a três vezes. Logo, nossa busca fica assim: \d{1,3}

O ponto também é uma expressão regular, que indica qualquer coisa. Sim! Qualquer coisa, ele procura por uma letra, número, espaço, pontuação, <CR> (Carriage Return, ou tecla enter), então para “desconvertermos” essa expressão regular, usamos uma barra invertida antes. Logo nossa busca por IP é: \d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} ou simplesmente (\d{1,3}\.){3}\d{1,3} que indica uma busca de três sequencias de \d{1,3}\. e uma de \d{1,3}

Como vocês podem constatar na imagem, a expressão regular funcionou perfeitamente. Eu uso essa extensão do Firefox (Regular Expressions Tester) para de auxiliar no dia-a-dia, já que uso expressões regulares muitas vezes por dia.

Outra coisa interessante em expressões regulares é que podemos definir uma lista de palavras ou expressões que queremos que apareça em nossa sequência. Fazemos isso através de parênteses e “pipes” (ou barrinha em pé). Eis um exemplo prático, queremos procurar a palavra menino e menina. Basta fazermos a seguinte sentença menin(o|a)

[Nota] A busca anterior também poderia ser dada por menin[oa] uma diferença básica entre parânteses e colchetes é que em parênteses podemos fazer uma busca por outras expressões ou palavras, já que nos colchetes apenas por caracteres específicos. Logo, cas(a|inha|arão) irá procurar pelas três palavras, o que não é possivel fazer com os colchetes.

Vamos pensar em entradas de usuário, ou seja, frases ou listas simples (lembre-se que o nosso objetivo é a classe de criação de tabelas, logo as entradas são pequenas). Então, queremos procurar uma determinada expressão no inicio da entrada do usuário. Algo como dois pontos e uma palavra e depois dois pontos.

Explico: Digamos que queremos que o usuário entre com os seguintes dados, sequencialmente:

• Nome
• Sobrenome
• :centro: Idade
• :tel: Telefone
• :tel: Celular
• CPF
• Filiação (Pai)
• Filiação (Mãe)

Perceba que o usuário quer colocar um atributo na entrada que alinhe ou ajuste as celulas para uma determinada classe. Podemos resolver este problema usando a mágica do circunflexo (^). Quando colocado no inicio da expressão regular, ele indica o inicio da entrada. Então, nossa expressão regular irá iniciar com ^:

Assim como os digitos (\d) também existe o \w que indica um caractere alfa numérico, ou seja letras de A a Z (maiusculas e minusculas) e números de zero a nove. E também podemos definir que deve existir um ou mais desta expressão regular na oração. (Lembram do {n,m} onde n e m são os numeros limites de caracteres?) Com o mais, podemos definir que deve existir um ou mais elementos da expressão regular anterior. Assim, nossa expressão regular fica assim: ^:\w+: Com isto, pegamos o que queremos, se não existir, ele não pegará nada.

Bom, a nossa expressão regular está quase no fim. Como você é esperto, vou deixar a expressao regular final e deixarei que você pense como ela foi criada com base no que foi dito anteriormente:

^(:((\.|#)\w+|(r|c)\d+))+:

Com esta expressão regular, podemos esperar que o usuário entre com as seguintes condições e mais suas subcondições possiveis:

• :.classe:
• :#id:
• :c12:
• :r1:
• :.classe:#id:
• :.classe:r12:
• :#id:c21:
• :.qualquerClasse:#qualquerId:c21:r18

Tendo isto em mente, podemos tratar a entrada do usuário, permitindo saber que classe e/ou id ele vai querer colocar na determinada célula, e qual o numero de colspan e rowspan ele vai querer. Onde colspan é junção de colunas e rowspan é junção de linhas, como você pode ver aqui, aqui e aqui.

Digo e repito, estude expressões regulares, vale a pena! Como você pode ver para fazermos um monte de validações em nossa entrada usamos apenas 26 caracteres. Faremos o tratamento dos mesmos na próxima edição, mas adianto que usaremos as funções preg_match e preg_replace.