Como deixei claro no meu último post, recentemente resolvi vender alguns sites com administração via WP - o que me exigiu esforço para achar alguma informação sobre como criar temas e plugins para WordPress. Meu inglês é péssimo e ler um artigo nesse idioma pode ser uma tarefa cansativa e demorada (e às vezes impossível) para mim. A documentação no site do Wordress é clara e bastante completa, mas tudo está em inglês… por isso resolvi escrever este post dando algumas dicas e mostrando o método que usei depois de decifrar alguns artigos de documentação e destrinchar alguns plugins que baixei da rede.

Desde que comecei a blogar e a ter contato com o WP (menos de um ano) tenho me interessado cada vez mais por esse programa que não é apenas um gerenciador de blogs, mas um gerenciador de conteúdos bastante completo. Também não é para menos, como diz esse texto do Rafael, o WP é um produto da inteligência coletiva e fica difícil criar sozinho algo para competir com isso.

Outro dia escrevi aqui sobre um script para traduzir HTML para WikiFormat e vice-versa. Bem, fiz esse script mas depois de pronto achei que era perda de tempo… ninguém ia usar aquilo. O fato é que cheguei à conclusão que esse sistema só ia funcionar bem num editor tipo wysiwyg, que alternasse entre a renderização HTML e o código wiki em vez do HTML.

Poder arrastar e soltar elementos HTML na página é quase sempre um grande ganho em interatividade e design, além de, em muitos casos, permitir a troca das incômodas janelas popup por divs flutuantes, que podem ser movidos pelo usuário.

Vou mostrar aqui uma forma bastante simples e funcional de fazer isso em Javascript, com três funções apenas, mas antes de mostrar o código, vou explicar a idéia da coisa e desmistificar logo o "complicadíssimo drag and drop", antes que você se decepcione com o tamanho do código…

Acessar o CSS com javascript é algo que fazemos com frequência e que não envolve grandes mistérios, mas há certas coisas que raramente precisamos fazer e acabamos esquecendo até que aquilo é possível. Desculpem, estou escrevendo na 3ª pessoa mas na verdade estou falando apenas por mim… Nesse texto vou responder às minhas próprias dúvidas, tentando exorcisar o comodismo, mas também por acreditar que outros podem ganhar com as respostas que encontrei.

O CSS declarado inline, dentro da própria TAG, está facilmente acessível ao javascript, tanto para ler quanto para modificar. Podemos também ler e modificar com facilidade o valor da propriedade className das TAGs, alternando entre grupos de regras css pelos nomes das classes correspondentes. Mas, até pouco tempo atrás, havia para mim dois pontos incógnitos, duas perguntas que me perseguiam: "como modificar regras dentro de uma classe?" e "como obter as regras que incidem em determinado elemento por herança?". Bem, sou um autodidata e é essa curiosidade que me faz andar para frente, portanto, pesquisei e, como sempre, descobri que é simples. Aliás, essa é uma lição que posso dar aos iniciantes que são autodidatas como eu: difícil é aquilo que ainda não aprendemos a fazer, o resto é fácil. Não se deixe intimidar.

Os termos wiki (pronunciado "wiquie" ou "uikie" no Alfabeto fonético internacional) e WikiWiki são utilizados para identificar um tipo específico de colecção de documentos em hipertexto ou o software colaborativo usado para criá-lo. [veja mais… ]

O texo acima foi retirado da wikipedia e diz, em outras palavras, que o termo "wiki" é utilizado para definir websites colaborativos como a própria wikipedia (wikipedia, livremente interpretado, significa "enciclopédia colaborativa") ou os aplicativos usados para gerar esses sites.

Diversas vezes respondi dúvidas sobre como integrar essas duas linguagens nos fóruns da rede e é um tema que me interessa bastante, pois hoje gosto mesmo é de programar em JS, mas não dá prá fugir de certas funcionalidades no servidor, como consultar bancos de dados, gravar e ler arquivos, etc.

Antes de tudo, lembro que já escrevi um post sobre como mesclar PHP com HTML que você deveria ler antes de começar.

Estava pensando nisso outro dia. Eu não sei mesmo programar sem ERs, talvez por ter iniciado com o Perl (a primeira linguagem a popularizar as ERs), mas certamente pela praticidade que elas representam na hora de manipular strings.

Na época em que o Perl começou a ficar famoso era comum ouvir comentários por parte de programadores de outras linguagens sobre aquelas "linhas enigmáticas e indecifráveis do Perl", querendo se referir às tais ERs. Hoje as Expressões Regulares estão em todos os lugares. Se você está lendo este artigo, deve ser um desenvolvedor web, portanto usa ou já usou o famoso Dreamweaver. Pois bem, na janela de busca e substituição existe a opção "use regular expression" (minha versão é em inglês…), já reparou? e é uma mão-na-roda, pode crer. Nas linguagens então… praticamente todas tem suporte para ERs. Repare no exemplo abaixo:

Este é um tema com o qual todos que aprendem PHP tem que conviver desde o início dos estudos. O HTML é a linguagem oficial, o tipo de saída padrão do PHP (text/html), mas há certos detalhes que não devem ser esquecidos. Vou me esforçar para lembrar do que me atrapalhava há alguns anos (ou ainda atrapalha…) e tentar explicar.

As funções print() e echo()

Servem basicamente para a mesma coisa, com algumas diferenças…

Durante anos tive uma estamparia, tipo empresa de um homem só, onde eu fazia tudo. No início, comprava cores variadas em potes pequenos - para ter uma paleta mais rica. Mas o fato é que isso ficava bem caro e a solução foi começar a comprar apenas 5 cores e misturá-las para chegar a outras tonalidades. Essas cores, segundo um livro que consultei na época, deveriam ser: ciano, magenta, amarelo, além do branco e do preto.

Era uma diversão misturar e tentar atingir a cor que eu queria. Consultava uma tabela de cores, via a porcentagem de cada uma das primárias e transportava isso para meus potes de tinta - quase sempre era preciso acrescentar uma pitada de branco ou preto. Esse método me dava uma nova tinta, uma cor "chapada", por isso a necessidade do branco de vez em quando… mas o sistema usado nas gráficas para imprimir separa as três cores primárias e acrescenta uma camada corretiva de preto, imprimindo uma sobre a outra separadamente (o branco é o papel no fundo). É o sistema CMYK (Cian, Magenta, Yellow e blacK). A teoria é que a soma C+M+Y, os três a 100%, seria igual a preto - mas na prática isso não se mostra verdadeiro, por isso a camada K foi adicionada.

Não, o Javascript não faz isso… você precisa de um script de servidor (tipo ASP, PHP, etc.) para receber e tratar esses dados.

Isso é verdade, mas uma verdade relativa… a princípio, o Javascript não pode mesmo fazer isso, mas pode ler a URL completa do documento atual.

Tá mas e daí?
Para quem fez essa pergunta, vou primeiro explicar que, como quem quer aprender Javascript já deveria saber, existem dois métodos básicos para enviar dados ao servidor:

• POST
  Usando POST, os dados vão embutidos nos headers (cabeçalhos) HTTP que são trocados entre o servidor e o navegador web (escondido do usuário).
• GET
  Por GET os dados são enviados como parte da URL, após o sinal ‘?’.

Se podemos ler a URL então temos acesso aos dados enviados por GET, bastando tratá-los para poder ler e usar. Vamos dar um exemplo prático, começando pelo envio dos dados.

Acabei de construir uma funçãozinha muito útil em Javascript para inverter uma determinada cor, que pode ser enviada em rgb ou hexadecimal. Resolvi compartilhar com vocês.

Minha situação era a seguinte: eu precisava marcar, sobressaltar partes de um texto, mas não sabia qual seria a cor desse texto. Bem, para isso existe o valor ‘highlight’, mas ele não é aconselhado pela W3C… e nem sempre o resultado é ir para a cor oposta a do texto, embora resolva os problemas de baixo contraste. Mas o W3C falou, tá falado. Usei, a princípio, cores fixas (fundo azul marinho e fonte branca). Não ficava mal, mas seria mais elegante usar a cor oposta… e fiquei com isso na cabeça: como inverter uma cor?

Tem tempo que não escrevo nada por aqui… Bem, fim de ano é sempre uma confusão, né? Mas para coroar um ano produtivo estou aqui, escrevendo em pleno 31 de dezembro!

Desde que comecei a blogar (já descobri que trata-se de um vício), tinha vontade de mostrar links para os últimos posts do blog no meu site. Procurei no forum do blogsome e pela rede, mas não achei nada interessante (sei que deve haver algo). Enfim, resolvi fazer meu próprio script, mas como acessar os dados num banco de dados que não me dá acesso? Quando achei a solução me senti até um pouco burro. Claro, os feeds RSS. Lá está o conteúdo que eu queria e bem acessível (sem comentários). Vamos por partes, como faria Jack.

Este é um tema tão falado ultimamente, que é difícil achar alguém que não conhece (de nome) a tal da acessibilidade. Outro dia vi na TV um anúncio (não lembro de que entidade) ensinando ao público o que é acessibilidade. Mas ainda é fácil perceber que a preocupação em fornecer acesso à pessoas com algum tipo de deficiência (que não são poucas) ainda não é algo levado muito a sério. Às vezes executar uma ação simples torna-se impossível graças a um pequeno detalhe que poderia ter sido projetado levando em conta as nescessidades dessas pessoas - muitas vezes sem custo adicional.

Até pouco tempo atrás, eu mesmo nunca tinha pensado a respeito, mas agora parei para fazer isso e percebi o quanto é importante - além de ser respeitoso e educado com aqueles que tem alguma dificuldade e que tem (ao menos teoricamente) o direito de acesso a tudo que é público. Mas como traduzir esses conceitos de acessibilidade para um website?

As “hotkeys” - ou atalhos de teclado - são um recurso muito legal e pouco utilizado em páginas da web. Aliás, pouca gente usa os atalhos em qualquer programa. Na maior parte das vezes o usuário não passa do Ctrl + X/C/V (recortar, copiar e colar). Mas eles são verdadeiros “atalhos”, cortando, muitas vezes, grande parte do caminho que teríamos que percorrer para chegar ao comando desejado.
Além de, dentro dos preceitos da web 2.0, ser um recurso de usabilidade bastante desejável. O Google (símbolo máximo da tal de web 2.0), por exemplo, oferece alguns atalhos para comandos na interface do Gmail.

Passei uns dias criando um novo site fazendo as mudanças que você está vendo aqui no blog - queria que o blog fosse uma parte do meu site, vestido a caráter. Deu trabalho, mas ficou bem legal.
O blog não está no meu domínio mas é parte do meu site, compartilha da mesma identidade visual e achei que isso funciona bem.

Nunca quis ter um site pessoal, mas acabava sempre fazendo "algo" e colocando no ar. Nunca eram muito visitados (graças a Deus) e, invariavelmente, eu os odiava na semana seguinte. Dessa vez acho que vai ser diferente, pois não estou pensando em um site apenas profissional, mas em um espaço para divulgar minhas idéias e tudo mais que me der na telha.

Vou mostrar neste artigo uma função para reorganizar as linhas de uma tabela a partir dos valores de suas colunas. Tive dúvidas sobre um título que dissesse isso em uma linha, mas achei que a idéia do data-grid ilustraria bem. A idéia é olhar a tabela por suas colunas e, a partir de um click no elemento <th> correspondente, classificar e reorganizar as linhas pelos valores na coluna escolhida.

Esse script foi criado a partir de um exemplo que consegui na internet há anos, não sei, mas se não me engano foi num site da Microsoft. Não havia informações autorais, mas a verdade é que quando digo "criado a partir de" significa que mudei bem a coisa.
O legal da função é que usa propriedades e métodos nativos do elemento <table> e de seus sub elementos, que quase não se vê e não são muito utilizados - coisa antiga, da época em que "Dom" era só para quem tinha algum talento especial e "Ajax" não passava de material de limpeza (rsrsrs).

Há uns seis meses descobri o ‘BadgerFish’, uma convenção para traduzir arquivos XML para objetos Javascript em forma de strings JSON (para compreender o BadgerFish, aprenda primeiro o JSON: 1, 2, 3, 4). Trata-se de um conjunto de regras extremamente simples, descrito em uma página de pouco texto e é isso aí, não achei quase nada mais. Depois achei essa aqui, que é apenas uma referência à outra, mas que tinha alguns comentários.
Na época criei uma comunidade no Orkut (), que nunca teve discussões (?!). Achei então que ainda não haveria discussões em português por enquanto em lugar nenhum e deixei pra lá, mas como o tema é mais atual que nunca, voltei a ele.
Hoje fiz uma busca no Google e até que agora há bastante coisa em inglês e japonês (…), mas numa busca por resultados em português, apenas dois resultados sem relevância. Uma outra busca no del.icio.us me devolveu apenas 7 páginas, Bloglines: nada, mas no Technorati a coisa já muda de figura… mas tudo em gringo. As novidades sempre surgem na blogsfera, já notou?

Hoje, mexendo em um trabalho que fiz há algum tempo, redescobri essa função que considero muito útil. Com ela é possível abrir determinados elementos para edição. Deixar o usuário editar o conteúdo de um DIV ou TD por exemplo (ou qualquer um que tenha a propriedade innerHTML). Eu criei a função para um sistema em que o usuário editava dados em um XML: montava a página a partir do XML e deixava o usuário editar os textos, então remontava o XML a partir do innerHTML da página.

A idéia surgiu  com uma função que encontrei nos meus garimpos, para determinar a posição exata de um elemento na página, a absPos(). Essa é uma função que está toda dentro de um for que não tem bloco de comandos, numa sintaxe legal, pouco comum. Não sei quem é o autor (displicência minha… desculpe-me por isso o autor dessa função tão legal), veja:

Análise do problema e algoritmo de solução

Todo aplicativo se destina a automatizar um processo que poderia ser executado manualmente, ou a resolver algum problema que se poderia resolver com raciocínio lógico - mesmo que isso fosse levar muito tempo. Acreditamos que isso é verdadeiro em qualquer âmbito.
Entendemos por ‘processo’ ou ‘problema’ qualquer situação que se apresente para o programador ‘automatizar’. Programar é resolver o problema proposto etapa por etapa e codificar cada passo, até a solução. Ou seja, um programa é uma referência a um problema previamente resolvido. O que chamamos de algoritmo é simplesmente a sequência lógica de ações que levam ao resultado esperado (a solução do problema). Naturalmente, é necessária uma análise detalhada do problema, sem a qual não há a menor possibilidade de se desenvolver um algoritmo funcional.

Um dos recursos mais importantes para que o visitante possa encontrar as informações que deseja é o famoso link "mapa do site". O mapa do seu site pode ser organizado de várias formas e, naturalmente, é mais legal quando podemos fazer isso com calma, facilitando ao máximo o trabalho de achar o conteúdo procurado. Aliás, o dito "mapa do site" é uma importante ferramenta de acessibilidade e deveria estar sempre presente. É ele que garante o" aprendizado do layout do site" pelo usuário menos experiente ou em layouts incomuns, com sistemas de navegação fora do padrão, etc. Mas em situações em que há muitas páginas para catalogar ou onde páginas são criadas/excluídas dinamicamente, podemos usar um script para ler a estrutura do site e mostrar as páginas automaticamente.

Vou mostrar aqui um script em PHP que faz esse trabalho de catalogação e exibição automaticamente.

Sempre tive a idéia de que trabalhar com datas no Javascript era algo chato, que exigia muitas linhas de código para se conseguir algo simples. Bem, isso hoje certamente não é mais verdade, com a quantidade de scripts e frameworks e todo tipo de interfaces para facilitar a vida do programador, mas resolvi fazer um script que me permitisse manipular strings de data tão facilmente como no PHP. Naturalmente, nem todas as opções de date() estão disponíveis aqui, mas acredito que facilitou muito o trabalho de colher e formatar informações separadas para formar um frase simples como ‘Segunda, 3 de maio de 2006′.

Criei então alguns novos métodos adicionados ao objeto Date.prototype. O principal deles é o Date.toFormattedString(), que devolve a string enviada, com alguns caracteres especiais convertidos para valores de data e hora (veja a tabela de substituição), como na função date() do PHP.
O resultado pode ser em inglês ou português, mas pode-se também definir outros idiomas dinamicamente. Além do Date.toFormattedString(), há algumas outras funcionalidades. Segue o script e algumas explicações.

Quando uma página tem seu conteúdo carregado de forma assíncrona (via ajax), ocorre um conhecido problema ao tentar salvá-la nos favoritos. A não ser que o usuário adicione a página logo que ela carregar - quando nenhuma ação foi executada, nenhum clique foi dado - quando ele clicar no link salvo em favoritos, o conteúdo apresentado será sempre o inicial e não aquele que ele estava vendo no momento em que salvou a página.

A raiz desse problema é a mesma que impede o usuário de usar os botões do histórico em conteúdos carregados com ajax: a única página que existe para o navegador é a inicial, os conteúdos carregados com ajax não são vistos como novas páginas. Como resolver isso? Me ocorreu a idéia de enviar um comando em forma de string (como no script ajaxHistory) usando o hash. Na verdade, o hash foi usado (no lugar da query string) por que eu queria poder também usar o refresh… isso funcionou, mas só no IE. Quando a solução para o refresh for cross-browser (estamos trabalhando para isso…), vou divulgá-la aqui. Mas para usar os favoritos funcionou beleza.

O novo conceito criado há pouco tempo tem dividido opiniões e gerado muita polêmica. Nunca houve uma ‘Web 1.0’, então que estória é essa? Bem, vamos tentar explicar…

O assunto é delicado, pois uma parcela considerável dos profissionais da área considera que o termo não passa de uma ‘buzzword’ (um termo belo, mas vazio de significado real), que é apenas uma onda criada para explorar a necessidade de constante atualização exigida aos profissionais da área, etc., e que os criadores dessa ‘palavra mágica’ (que sacudiu toda a área de TI) ganham muito dinheiro divulgando e ensinando algo que eles próprios inventaram - uma espécie de golpe de marketing. Bem, este é um ponto de vista embasado e tem suas razões de ser, mas somente após conhecer as tecnologias, idéias e conceitos por trás da legenda ‘Web 2.0’ é que poderemos julgar. Portanto, mãos à obra.

Pesquisei e quebrei a cabeça para achar essa solução… tanto que questionei entre dar apenas o ‘mapa’ ou o script pronto. Mas sou um cara open-source por natureza, por isso vou fazer as duas coisas.

Bem, todos já sabemos que comandos em javascript não ativam os botões de histórico do navegador, mesmo que mudem 100% do conteúdo exibido. Isso não é legal, pois sabemos que o usuário busca usar os recursos que conhece e o botão ‘Voltar’ é uma instituição, existe desde que o mundo é mundo. Eu me sentia meio que ‘na obrigação’ de possibilitar isso ao usuário.

A evolução das tecnologias e linguagens usadas na rede em combinação com a conexão de banda larga e custo estreito, já utilizada em grande escala, e a violência das grandes cidades, que torna proibitivo sair às ruas, tem direcionado muita gente a praticamente ‘viver’ na web. Pela rede pode-se fazer quase tudo… Conhecer pessoas e lugares, obras de arte, fazer compras, ir ao banco, divulgar suas idéias. Até namorar via web… é um pouco demais, não?

As comunidades da rede são uma febre, juntamente com os blogs. Pode-se encontrar todo tipo de informação, de qualquer assunto, inclusive dados pessoais dos internautas.
(…) continuar lendo…