Webpoint

Desculpe a demora para voltar a escrever, estava atolado de projeto e como prometi, estava desenvolvendo um script para o jQuery em conjunto com a biblioteca SWFUpload. Bem, para quem não sabe sobre o que estou falando, há posts que contam como tudo começou:

• Jquery, Mootools e múltiplos uploads - parte 01
• Jquery, Mootools e múltiplos uploads - parte 02

Descobri o SWFUpload que é uma biblioteca bastante completa e que faz todo o background do processo. Então você tem vários parâmetros e callbacks que podem ser usados da maneira que preferir. Como já sou acostumado com o jQuery, resolvi usá-lo para fazer a parte do callback, ou seja, toda a interface que o usuário experimenta.

Devido as limitações do Javascript, da própria maneira de como é feito o upload de arquivos, temos que reconhecer que este sistema de uploads é uma revolução. Exagero? Como vocês faziam sistemas de uploads de arquivos antes? De cinco em cinco? usando iframe? Enviando os arquivos via FTP? E quando se trata de um sistema que será usado para um cliente?

Apesar de exisitir alguns plugins para o jQuery que tem esse objetivo, confesso que a maioria deles não tem a versatilidade e o poder oferecido pelo fancy upload, desenvolvido para o mootools. Os plugins que mais se aproximam para o jQuery são o Multiple File Upload, que é bom, mas não é versátil e o que ele faz é inserir campos de arquivo escondido e deixar para o usuário somente o registro do arquivo que foi escolhido. No lado do PHP estes campos serão tratados como arrays, bom, mas nada versátil e possui todas as limitações já existentes, uma delas é que você não sabe o tamanho do arquivo até ele ser jogado temporariamente no servidor. O outro é o jqUploader, que é desenvolvido em Flash, sendo assim, o jQuery faz a inserção on the fly do swf, mas a interface e o processamento é todo em flash. O SWFUpload triunfa por que ele usa o flash, mas você não sabe que está sendo usado. Pelo fato do Action Script possuírem classes que manipula arquivos de uma maneira bem mais versátil que o Javascript, além da classe external interface, que deixa o flash interagir com o html externo, esta biblioteca usa essas ferramentas para devolver ao desenvolvedor as respostas para serem usadas adequadamente.

Ao script

O SWFUpload oferece diversos callbacks para serem usados, ele pode ser manipulado por javascript. Usei o jQuery em conjunto com o plugin interface para oferecer uma experiência rica para o usuário fazer o upload de arquivos, como no Flickr.

Havia prometido um plugin, mas com um script ele poderá ser explicado e assim personalizado da maneira que acharem melhor.

Exemplo da interação do SWFUpload com o jQuery

A tarefa do SWFUpload

O trabalho do SWFUpload, como falado anteriormente é processar todos os dados utilizando o action script e devolver estes dados em tempo real para o ser manipulado via javascript.

Portanto, os scripts que precisam ser inseridos no cabeçalho são:

• SWFUpload.js - o script em si, retirado do site, aqui ele está compactado, mas no site tem ele completo e a versão mais atual
• SWFUpload.swf - O arquivo flash que faz o processamento, aconselho colocar no mesmo local do script acima, mas isto pode ser customizado.
• init.js - O script que cria o objeto da classe, com as configurações e a referência aos callbacks necessários
• callback.js - É onde eu entro utilizando o jQuery para facilitar a sua vida :-).

O arquivo que precisa de explicação pela parte do SWFUpload é o init.js que instancia o objeto e o inicializa. Ele permite várias configurações. Todas elas estão na sua documentação. Vou tentar descrever o que usei para fazer este script:

var swfu;
 
var init_uploader = function()
 
{
 
swfu = new SWFUpload({upload_script : '../upload.php',
 
target : "container_arquivo",
 
flash_path : 'swfupload/SWFUpload.swf',
 
allowed_filesize : 30720, // 30 MB
 
allowed_filetypes : "*.*",
 
allowed_filetypes_description : "todos arquivos...",
 
browse_link_innerhtml : "Procurar",
 
upload_link_innerhtml : "Enviar arquivos",
 
upload_file_start_callback : "inicioUpload",
 
browse_link_class : "btn_procurar",
 
upload_link_class : "btn_upload",
 
upload_file_cancel_callback : 'cancelado',
 
upload_file_queued_callback : "entrouFila",
 
upload_progress_callback : "progresso",
 
upload_file_complete_callback : 'terminoArquivo',
 
upload_queue_complete_callback : "fimDownload",
 
upload_error_callback : 'uploadError'	});
 
swfu.loadUI();
 
};
 
//please use better handler attachment than this:
 
window.onload = init_uploader;

Acho que não precisa de muitas explicações, por que as funções já falam por si. Eu especifiquei as funções que serão usadas no callback.js para manipular as respostas, como por exemplo, quando seleciona um arquivo, quando inicia um download e a barra de progresso, todas elas aceitam alguns parâmetros, entre eles o objeto file, que tem várias propriedades, como o id que é uma identificação única do arquivo e graças a ele temos total controle do que está sendo feito com o arquivo. O arquivo upload.php é o script de servidor que faz a manipulação e copia para o local desejado, ele pode ser acessado via $_FILE['Filedata']. A diferença desse para os plugins do jQuery que faz a manipulação dos uploads, é que não será manipulado por um array de arquivos, mas sim será chamado o upload.php para cada arquivo, ou seja, será enviado um por um da fila e seu controle será feito em tempo real, assim como a resposta para o usuário.

Este script é mais geral, você pode especificar os tipos de arquivos desejados. O bom nisto é que a caixa de diálogo exibida pelo flash você acessa o sistema de arquivos do cliente, mas só exibe os arquivos do formato especificado.

É hora do callback!

O arquivo callback.js possui toda a manipulação necessária e a inserção on the fly da lista de arquivos, nome, tamanho, botão de remover, barra de progresso etc. Tudo é feito via jQuery e com os efeitos do plugin interface.

Dê uma analisada no html, pois alguns elementos são essenciais para o funcionamento, pois através dele o jQuery faz inserções de conteúdo on the fly.

O arquivo css encontra-se abaixo e pode ser personalizado:

/* Upload de arquivos */
 
body {font-family: Arial, Helvetica, sans-serif;
 
font-size: 12px;
 
}
 
#wrapper {
 
width: 600px;
 
margin: 20px auto;
 
border: 1px solid gray;
 
background-color: #FFFBEF;
 
}
 
#wrapper h2 {
 
text-align: center;
 
background-color: #3E458F;
 
width: 100%;
 
color: white;
 
padding: 12px 0;
 
}
 
#contentContainer {
 
width: 300px;
 
height: auto;
 
margin: 10px auto;
 
background-color: #FDFFEF;
 
border: 1px solid #9F8181;
 
padding: 20px;
 
}
 
#container_arquivo {
 
padding: 10px 6px;
 
margin: 8px auto;
 
}
 
#lista li {
 
width: 90%;
 
height: 75px;
 
margin: 12px 0;
 
padding: 6px;
 
background-color: #DBDFC3;
 
list-style-type: none;
 
}
 
#lista li a {
 
display: block;
 
}
 
.msg_fim_upload {
 
text-align: center;
 
color: red;
 
font-weight: bold;
 
padding: 5px;
 
background-color: #FFE7DF;
 
}
 
.btn_procurar, .btn_upload {
 
padding: 4px;
 
background-color: #E0E3EF;
 
border: 1px solid #74798F;
 
margin: 10px;
 
text-decoration: none;
 
}
 
.btn_procurar:hover, .btn_upload:hover {
 
background-color: #DFDFDF;
 
}
 
.arquivo {
 
font-weight: bold;
 
color: #6F3039;
 
}
 
.campo_peq {
 
border: 1px solid gray;
 
font-size: 10px;
 
background-color: #E5EFE0;
 
margin: 6px 5px 0 5px;
 
}
 
.barra {
 
background-color: green;
 
color: white;
 
width: 1px;
 
margin: 4px 0;
 
border: 1px solid gray;
 
text-align: center;
 
display: block;
 
}
 
/* fim do upload de arquivos */

Alguns dessas estilizações são para a demonstração online e outros são para o funcionamento adequado do script.

O script foi testado no Firefox 1.2.xx, no IE6 e IE7. Nestes dois últimos, há uma pequena falha na animação, mas devido ao interface. Se não gostou do resultado do efeito, ele pode ser alterado pelo callback nas linhas que tem os métodos Grow(crescer) e Shrink(encolher).

Espero que tenham gostado e que façam bom proveito deste script e qualquer dúvida, estou a disposição.

Bem, a abreviação do CSS já diz tudo sobre sua arquitetura. Ela funciona em cascata. Novidade para uns, obsoleto para outros, mas que quando aplicado da maneira correta, pode te ajudar em muito na leitura do CSS. Bem, o usuário final não vai ver o resultado, mas para desenvolvedores web que se prezem, não importa apenas o resultado final. Como ele foi atigindo também é relevante. Como já disse anteriormente, mesmo sendo uma linguagem de design, o CSS tem várias metodologias e truques por trás da manga.

Você vai entender melhor do que estou falando, irá diferenciar este post de uma weblosofia que não tem prática. Vamos supor que você quer estilizar um campo de formulário e assim você atribuiu uma classe para ele com o nome de campo. Como já mostrei no post hover em campos com o jQuery, você pode colocar outra classe que irá representar o estado hover do elemento, pois como já discuti antes, o IE6 suporta o hover apenas em links.

Assim, ele poderia ser estilizado da seguinte maneira:

.campo {
font-size: 18px;
color: gray;background-color: #DDDDDD;
border: 1px solid #A19A9A;
 
}
 
.campo_focus {
 
font-size: 18px;
color: gray;
border: 1px solid #E64D4D;
background-color: #DBCDCD;
 
}

No campo focus ele muda a cor de fundo e a borda, mas permanece com a fonte 18px. A fonte está especificada por que é diferente das demais, caso contrário ela seria especificada no body, no html ou com o símbolo asterisco que representa todos elementos. Olha o efeito em cascata evidente, pois a classe campo e campo_focus herdaria o tamanho da fonte de qualquer elemento ancestral a ele. Sim, pode considerar o documento como um pai cheio de filhos e que tem mais filhos, ou como uma árvore, pois uma família pode ser representada também por uma árvore. Não importa como você pensa, desde que você tenha isto em mente. Sendo assim, podemos reescrever este css desta maneira:

.campo, .campo_focus {
font-size: 18px;
color: gray;
background-color: #DDDDDD;
border: 1px solid #A19A9A;
}
 
.campo_focus {
border: 1px solid #E64D4D;
background-color: #DBCDCD;
}

Desta vez eu especifiquei o campo e no campo_focus suas propriedades em comum e as que irão ficar somente na classe campo estão declaradas. A segunda vai ter as propriedades diferentes e vai prevalecer no campo_focus as declarações que você colocou por último, obedecendo a herança. Assim, se você mudar o tamanho da fonte, basta apenas mudar em um local. Se não ficou evidente a diferença, vou ilustrar um exemplo mais complexo.

Imagina que você está colocando em um menu um fundo diferente para cada item e que este menu esteja como uma lista não ordenada. Pois bem, haverá várias declarações nos elementos li, mas neste li você terá que colocar um id para diferenciar dos demais para assim no css para cada id tem um background. Então você deve aplicar a frase anterior literalmente: "cada id tem um background", ou seja, a única coisa que diferencia-os é o background, portanto, todos as outras propiedades comuns devem ser declaradas no li e somente o background deve ser declarado em cada id. Isto evita redundância e melhora a hierarquia do seu CSS.

Problema

Você quer incluir campos de formulários e nomes nas linhas sem usar tabela HTML, com isso assegurando um puro layout CSS usando somente as marcações de formulário

Solução

Primeiro use rótulos em conjunção com campos de formulários na marcação (veja Figura 5-10):

 
<form action="login.php" method="post">
<label for="uname">Username</label>
<input name="uname" id="uname" type="text" />
<label for="pname">Password</label>
<input name="uname" id="uname" type="text" />
 
<label for="pname">Remember you?</label>
<input name="recall" id="recall" type="checkbox"
class="checkbox"  />
<input name="Submit" value="Submit" type="submit"
class="buttonSubmit" />
</form>
 

Figura 5-10. O formulário sem estilo aplicado:

Então escolha as propriedades display e label para block, flutue os elementos do rótulo para a esquerda, e justifique o texto à direita (veja Figura 5-11):

input {display: block;width: 175px;
 
float: left;
 
margin-bottom: 10px;
 
}
 
label {
 
display: block;
 
text-align: right;
 
float: left;
 
width: 75px;
 
padding-right: 20px;
 
}
 
.checkbox {
 
width: 1em;
 
}
 
br {
 
clear: left;
 
}
 
.buttonSubmit {
 
width: 75px;
 
margin-left: 95px;
 
}

Figura 5-11. O design do formulário organizado com estilo

Discussão

Os elementos input e label foram escolhidos para display:block, que os exibe como elementos block-level. Isto torna possível escolher a largura para o texto no rótulo. Ao invés de permanecer no topo do elemento de entrada, os rótulos são deslocados (ou flutuados) para a esquerda. E pelo fato de todos os rótulos terem a mesma largura, a aparência é uniforme através do formulário.

A tab br cria uma quebra de linha entre os elementos label e form escolhidos, e limpa o deslocamento do elemento anterior. Isto previne outros elementos (aqueles que aparecem depois do campo de entrada combinado com o nome) de deslocar também.

Veja também

As especificações HTML 4.1 para o elemento label em http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL; As especificações CSS 2.1 para a propriedade float em http://www.w3.org/TR/CSS21/visuren.html#propdef-float; As especificações CSS 2.1 para a propriedade clear em http://www.w3.org/TR/CSS21/visuren.html#propdef-clear.

Fonte: CSS Cookbook

Estava vasculhando os acessos mais remotos do mapa mundi deste digníssimo HD e eis que encontrei um projeto que não saiu da primeira fase. Quando comecei a me aventurar no CSS, haviam poucos sites brasileiros que pudessem abordar o assunto. Dizendo em palavras cruas: era falta de material de pesquisa! Então encontrei um grande refúgio nos livros do O'Reilly. Pensei então em traduzi-lo e aprender com ele, pois traduzindo eu iria estar aprofundando nos textos, além de executar todos os exercícios, pois para mim não basta o cara mostrar e falar que é aquilo, pois Browsers são browsers, você nunca pode esperar nada deles. Já passei tanta vergonha com o bendito IE6, quantos sites estavam funcionando perfeitamente, mas para mostrar ao cliente já era outra história?

O fato é que o livro me ensinou 90% do que eu sei de CSS hoje, pois ele é prático e esta linguagem de programação para design, se é que posso dizer assim, vive em torno da prática. Neste livro ele mostra um problema real e discute de maneira bastante sucinta sobre o assunto. Mostra código, fala dos browsers, apresenta soluções e mostra o que há por trás disto. E no fim onde existe a documentação oficial sobre o assunto e os melhores sites para quem quiser aprofundar.

Hoje há muitas pessoas competentes para abordar CSS no Brasil, sem deixar de citar o Maujor que um dos repercursores e eu presenciei tudo isto acontecendo.

Tinha um projeto de fazer um site só de receitas CSS e o tempo passou, hoje estou escrevendo neste Blog que expandiu o assunto além do CSS, que apesar de gostar muito, eu também me apaixonei pela parte de programação. Não me perguntem o que sou, quero ser um programador designer sim, não, não faço os layouts no photoshop, eu executo idéias. É uma loucura, mas não consigo me agarrar somente ao CSS, e venho achando muitos aliados para continuar assim como o jQuery, que aproxima cada vez mais nas duas. Há e o PHP com uma pitada de Cake também :-D.

Resolvi então deixar este material disponível ao longo do tempo até terminar o livro. É muita coisa. Ele poderá ser útil não só para quem está iniciando, mas ele vai aos pontos que interessa. Espero que gostem e um grande abraços a todos. Abordei um assunto para início de conversa que já me indignou muito, já se perguntaram que se existe o hover para usar em todos os elementos, por que ele só é aceito em links no IE6?

Problema

Você quer criar um simples efeito rollover sem usar Javascript para trocar imagens.

Solução

Use as pseudo-classes :hover e :active para criar o rollover:

a:link {color: #777;text-decoration: none;}a:visited {
 
color: #333;
 
text-decoration: none;
 
}
 
a:link:hover, a:visited:hover {
 
color: #777;
 
background-color: #ccc;
 
}
 
a:link:active, a:visited:active {
 
color: #ccc;
 
background-color: #ccc;
 
}

A pseudo classe :hover se parece com o evento comum do JavaScript onmouseover . Ao invés de executar uma função no JavaScript, quando o usuário passa o mouse sobre um link com :hover, uma diferente escolha de estilo é aplicada para o link.

Com o seletor tendo a mesma especificidade, seletores escritos fora de ordem podem parar um dos estilos de aparecerem. Eviste este problema comum listando os seletores na ordem: link, visited, hove, active . O dispositivo de memória comumente usado para lembrar a ordem é "Love/Hate"(amor/ódio).

Ainda que :hover e :active poderem ser aplicados para qualquer elemento, eles são mais usados em links. Note que o suporte do browser para :hover e :active no Netscape Navigator 4 é inexistente. Também, o Opera 4 não suporta :hover.

Nesta solução, as duas pseudo classes certificam que o efeito rollover ocorra somente em links ancorados. Sem :hover e :active, browsers modernos poderiam legalmente aplicar os efeitos rollover em qualquer elemento ancorado, como mostrado neste código e na Figura 3-4:

E depois?

O problema é que o hover para poder simular o Javascript de maneira correta, teria que oferecer suporte a todos elementos, até mesmo uma div, mas na verdade no IE 6 fica devendo. O único suporte é para o elemento a, que simboliza o link. Assim ainda será necessário usar script para este fim, como já mostrei e você pode ver com seus próprios olhos em todo o site.

Veja também

As especificações CSS 2.1 para :active e :hover em http://www.w3.org/TR/CSS21/selector.html#x36; uma explicação sobre links e especificidade em em http://www.meyerweb.com/eric/css/link-specificity.html.

Fonte: CSS Cookbook