Arquivo da tag: ajax

KDE 3.5 e DCOP

ATENÇÃO: Este conteúdo foi publicado há 12 anos. Eu talvez nem concorde mais com ele. Se é um post sobre tecnologia, talvez não faça mais sentido. Mantenho neste blog o que escrevo desde os 14 anos por motivos históricos. Leia levando isso em conta.

Ontem eu baixei e compilei o QT 4.1 e o KDE 3.5 aqui no laptop. Com todo mundo falando do Konqueror e seu maravilhoso suporte aos padrões web, isso era uma coisa que já tava na minha lista há algum tempo. Ontem foi a primeira vez que usei por padrão o KDE na minha máquina desde mais ou menos um ano, quando comecei a usar Fluxbox.

O KDE está muito legal. Muitas melhorias, menos bugs e um design bem mais “chique”. Os desenvolvedores estão fazendo um trabalho muito bom e não consigo deixar de pensar como será o KDE 4.

Aí eu acabei (espero) meus dois freelas que estavam em desenvolvimento e resolvi fazer uma aplicação Ajax para qualquer pessoa poder controlar meu amaroK. Óbvio que eu não quero que as pessoas controlem meu amaroK, mas depois de ter lido um pouco sobre dcop eu precisava fazer algo assim.

E, hoje de manhã, em menos de uma hora, a aplicação ficou pronta. Ela com certeza não é segura (só pra vocês terem noção do drama, eu permiti sudo ao usuário do Apache, hehehe) e ainda nem tá bonita nem boa o suficiente, mas foi só pra brincar um pouco.

Aplicação Ajax para controlar o amaroK

Vou estudar um pouco mais sobre isso e depois quando eu tiver um código bem bonito, eu publico aqui. :D


Ontem resolvi um problema do USACO Training Gateway (não sei por que só um… Deu vontade na hora e depois eu cansei… hehehe) e já publiquei aqui: namenum.c. O nome é Name that Number e ele é sobre permutações. Se quer ler o enunciado, entre lá no USACO Training Gateway. :) Ah, o motivo de eu só ter resolvido ele agora (porque ele é de uma das primeiras seções lá) é que eles só colocaram esse problema agora. Quando eu tinha passado pela seção dele antes, ele ainda não existia.

Vejam só que boa notícia: GoogleTalk se integra à rede Jabber! Finalmente, né? Não sei porque o GoogleTalk já não começou assim…

No mais, nada mais. Devo publicar mais um artigo da série Algoritmos em breve (talvez hoje mesmo), já tive umas idéias… ;)

Sobre as mudanças

ATENÇÃO: Este conteúdo foi publicado há 12 anos. Eu talvez nem concorde mais com ele. Se é um post sobre tecnologia, talvez não faça mais sentido. Mantenho neste blog o que escrevo desde os 14 anos por motivos históricos. Leia levando isso em conta.

Estou em Florianópolis e passarei aqui mais uma semana, o que é excelente. Agora estou na casa da minha tia, que, além de ficar do lado da praia, tem ADSL (e uma placa de rede sobrando no computador para o laptop aproveitar a internet… :))

Eu planejava postar um artigo por dia da Série Algoritmos, mas o artigo que estou escrevendo agora é a parte de algoritmos que eu considero a mais complicada (muito mais complicada que os algoritmos em si que vamos estudar depois): análise de algoritmos. E estou fazendo um esforço para deixar a parte matemática bem leve e introduzir essa matéria de maneira bem simples, por isso a demora.

Aí eu resolvi escrever um artigo inteiro só pra comentar sobre as mudanças no blog.

Leitores do meu feed, me desculpem pelas várias atualizações de ontem. Além de mudar a estrutura da página (tirando, por exemplo, os comentários da página inicial), eu estou reorganizando os artigos a partir de agora, separando-os em categorias (cada um com só uma categoria) e usando o plugin Simple Tags para a tagsonomia.

Se vocês observarem, incluí links para a validação de WAI e da Section 508 na minha sidebar. Meu site tá bem acessível com esse novo design e estrutura. :) Além disso, enviei-o para algumas galerias e por isso as visitas estão mais em alta do que já estavam antes nessa semana.

Hmmm… Para os que ainda não perceberam, troquei as antigas páginas Biografia e Portifólio por apenas uma seção, denominada Currículo. Essa mudança foi para que eu não precisasse de grandes atualizações em textos (o que é uma coisa muito chata de fazer!) e ter minhas informações profissionais separadas em um só lugar. Embora eu não tenha quase experiência alguma (quer dizer, experiência até eu tenho, mas não tenho cursos), espero que o currículo também me ajude com os negócios.

Adicionei um link para meus feeds no Bloglines também e dei uma arrumada na seção de problemas lógicos.

Espero que estejam gostando das mudanças… Agora estou me preparando para mudanças mais radicais, como transformar o site inteiro em Ajax (o que não é difícil no WordPress, mas vou esperar no mínimo esperar a série de algoritmos pra não ficar atrasado com ela)

Novo design!

ATENÇÃO: Este conteúdo foi publicado há 12 anos. Eu talvez nem concorde mais com ele. Se é um post sobre tecnologia, talvez não faça mais sentido. Mantenho neste blog o que escrevo desde os 14 anos por motivos históricos. Leia levando isso em conta.

Novo template feito em tempo recorde… Três dias foram necessários para eu finalizar o novo design do meu site, agora mais leve e acessível (e mais bonito).

Com a folha de estilos CSS mais organizada, menos ícones, mais simplicidade, texto mais legível (com detalhes pouco aproveitados em muitos sites como line-height e text-indent) e um logo que o Cosme fez pra mim por caridade; espero que curtam o novo design e, se quiserem, sugiram mudanças!

Agora eu também fiz um arquivo de JavaScript já preparado para futuras aplicações Ajax e pretendo ir adicionando detalhes legais aos poucos.

Comentem dando as suas opiniões!

LiveSearch no WordPress

ATENÇÃO: Este conteúdo foi publicado há 12 anos. Eu talvez nem concorde mais com ele. Se é um post sobre tecnologia, talvez não faça mais sentido. Mantenho neste blog o que escrevo desde os 14 anos por motivos históricos. Leia levando isso em conta.

O Cosme me apresentou hoje um projeto chamado LiveSearch. É uma aplicação Ajax bem simples (eu mesmo conseguiria fazer), mas uma idéia que eu ainda não havia tido.

Resolvi então implementar o negócio no meu blog e estou escrevendo esse artigo pra explicar como instalamos o LiveSearch de forma que ele funcione com o WordPress e dentro dos padrões de XHTML Strict (ele pede originalmente que utilizamos name num form e exige que o nome de um campo seja “q” ao invés do “s” do WordPress).

Então, mãos a obra!

1. livesearch.php

Para começar, você deve criar um arquivo e chamá-lo livesearch.php. O seu conteúdo deve ser:

<?php if (have_posts()) : ?>
<ul class="LSRes">
<?php while (have_posts()) : the_post(); ?>
	<li class="LSRow">
		<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
	</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>

Para facilitar para quem quer aprender PHP, vou explicar linha por linha:

  1. Se houver posts, faça:
  2. Lista HTML
  3. Enquanto houver posts: Execute a função the_post().
  4. Item da Lista HTML
  5. Linca para o permalink do post com o texto do link = seu título.
  6. Fim do “Item da Lista HTML”
  7. Fim do “Enquanto houver posts”
  8. Fim da “Lista HTML”
  9. Fim do “Se houver posts”

Observação: As cores são só para reforçar a hierarquia.

O que este arquivo faz, portanto, é criar uma lista com o título dos posts. Essas funções são todas do WordPress (have_posts, the_title, the_permalink, etc.). Se você quisesse colocar outras coisas na lista que vai aparecer no resultado, pode colocar aí nesse arquivo.

No fim, salve esse arquivo em /wp-content/themes/SEU_TEMA/livesearch.php.

2. Redirecionar para livesearch.php se for uma pesquisa “live”

Coloque no início do arquivo /wp-content/themes/SEU_TEMA/search.php o seguinte conteúdo:

<?php if ($_GET["live"]) {
		include("livesearch.php");
		die();
	} ?>
  1. Se a query string live “existir”, faça:
  2. Inclua o arqiuvo livesearch.php nessa página.
  3. Morra!!! :D Isso significa para ele parar de executar qualquer coisa que esteja debaixo disso.
  4. Fim do “Se”

Isso serve para que possamos fazer as buscas de duas maneiras. Uma é a busca normal, que é acessada por /?s=queries e outra é a live que será acessada por /?live=1&s=queries (ou seja, a mesma coisa mas dando valor à variável “live”).

3. JavaScripts

Baixe o arquivo livesearch.js e coloque-o na pasta /wp-content/themes/SEU_TEMA/.

Agora faremos uma série de mudanças pra manter o negócio nos padrões web… Substitua as seguintes linhas pelo texto que aparece depois do seu número:

  • 122: if (liveSearchLast != document.getElementBy(‘livesearch’).value) {
  • 126: if ( document.getElementById(‘livesearch’).value == “”) {
  • 136: liveSearchReq.open(“GET”, liveSearchRoot + “/?live=1&s=” + document.getElementById(‘livesearch’).value + liveSearchParams2);
  • 137: livesearchLast = document.getElementById(“livesearch”).value;

Isso serve para ele não depender do nome do formulário e da query, mas somente do ID do campo do formulário e para ele abrir no xmlHttpRequest /?live=1&s=QUERY ao invés do padrão /livesearch.php?q=QUERY.

4. Eventos JavaScript nos documentos

No seu arquivo /wp-content/themes/SEU_TEMA/header.php, adicione o evento onload à tag BODY:

<body onload="liveSearchInit()">

No mesmo arquivo, dentro da tag HEAD linke para o script:

<script type="text/javascript" src="/wp-content/themes/SEUTEMA/livesearch.js"></script>

Agora, no arquivo /wp-content/themes/SEU_TEMA/searchform.php, adicione um evento onsubmit ao FORM

<form onsubmit="return liveSearchSubmit()" ...

E, no mesmo arquivo, adicione um evento onKeyPress ao INPUT e também um id:

<input id="livesearch" onKeyPress="liveSearchStart();"

E ao final desse arquivo, coloque:

<div id="LSResult" style="display: none;">
<div id="LSShadow">
</div>
</div>

Se você fez tudo certo e eu não errei aqui no tutorial, o seu script deve sair funcionando! Agora personalize usando estilos pra fazer um negócio bonito! (algo que eu não fiz porque tô pra trocar totalmente o design do meu site)


A Lógica do Negócio

O arquivo search.php recebe todas as buscas. O que eu fiz criando o livesearch.php foi formatar o resultado da busca de forma diferente para ele aparecer ali debaixo do formulário de busca.

O script é bem simples. Um Ajax que simplesmente faz um xmlHttpRequest a cada keypress do cara no campo. Aliás, acho que dá pra fazer um script bem menor pra só fazer isso.

Deixei o meu site meio feio com isso aí (uma lista de bullets normais e tal…), mas é porque eu tô pra trocar o design em breve e aí vou arrumar isso tudo! (inclusive, devo colocar mais Ajax!)

Qualquer dúvida, comente ou me mande um e-mail.

Álbum de Fotos

ATENÇÃO: Este conteúdo foi publicado há 12 anos. Eu talvez nem concorde mais com ele. Se é um post sobre tecnologia, talvez não faça mais sentido. Mantenho neste blog o que escrevo desde os 14 anos por motivos históricos. Leia levando isso em conta.

Link para projeto em desenvolvimento…

Meu Flickr tá estourando (depois de 200 fotos, começam a sumir fotos segundo seu FAQ) e por isso resolvi criar um álbum de fotos pessoal. Estou desenvolvendo em PHP, usando um banco de dados MySql e estou criando bastante recursos Ajax para exercitar um pouco e para o negócio ficar bem dinâmico (se estiver ficando muito exagerado, me avisem!). Este projeto que ainda não tem nome, mas que estou pensando em algo como PhotoX (gostou do nome? comente! não gostou? comente também!), deve ter todos os recursos do Flickr (tipo, All Sizes, Notes e Rotate) e o que surgir de idéias legais. Será um software livre, cada um instala em seu servidor (ex.: é um “WordPress“, não um “Blogger“) e por isso ele não tem limites de sets, tags, fotos, tamanhos ou qualquer coisa do tipo. Irá requerer PHP 4.3, está sendo desenvolvido usando classes (estou tentando exercitar programação orientada a objetos), usa a biblioteca GD (para trabalhar com as imagens) e é totalmente Web 2.0 (tableless, padrões HTML 4.01 Strict, Ajax, tagsonomia, simplicidade). Já estou o criando multi-linguagem, ele funciona com alguma coisa parecida com templates e deve sair em no máximo um mês.

Estou convidando programadores sem nada pra fazer pra me dar uma ajuda (claro que gratuita). O Gustavo é uma das pessoas que me deu uma ajuda fazendo um pedaço da classe Foto e da classe Comentario e aqui estendo o convite para qualquer pessoa que lê o meu blog e queira ajudar. O sistema é simples: eu te dou um login e senha no meu FTP e você desenvolve o que você conseguir (postando sempre que você muda uma letra o novo resultado, para que depois outra pessoa pegue e possa continuar).

Atualizado

O Renato deu uma idéia legal aí num comentário que é hospedar o troço em alguns desses sites de projetos de software livre e usar CVS pro desenvolvimento. Acho que realmente faz sentido, eu não tinha pensado nisso… Hehehe… Vou criar algo a respeito e depois eu publico aqui!

Se você for uma dessas pessoas dispostas, gostaria de pedir que você note alguns detalhes na construção dos meus arquivos:

  • Tabulação é feita com “tabs”.
  • As classes não imprimem nada na janela.
  • Mesmo os arquivos não imprimem nada também, eles imprimem para a variável $buf.
  • Não vale mexer nos arquivos config.php, index.php, ajax.php, scripts.js.php e style.css (por favor, deixe toda a parte de client-side, Ajax e configurações globais para mim :D ).
  • Todas as coisas que você passar para a variável $buf não podem conter texto. (Se você quer escrever qualquer coisa além do que foi retornado do banco de dados, deve criar uma variável $LANG[‘NOMEDAVAR’] no arquivo lang/pt_BR.php e lang/en_US.php
  • Se você não souber programar mas estiver afim de traduzir o projeto para alguma língua, me dê seu nome que quando tiver pronto eu vou querer muito sua ajuda.
  • Se você não quiser traduzir e nem souber programar, colabore com idéias de coisas que você acha legal o projeto ter (o que falta no Flickr que seria legal os programadores colocarem, ou sei lá…)

Espero que todos tenham entendido o espírito. Me mandem e-mail com sugestões e quem puder ajudar, ajude. Quem quiser dar um nome ao projeto, pode me sugerir também! Tenho certeza que um software livre desenvolvido pela comunidade para um fim que ainda não existe algo parecido (alguém conhece algum software livre de álbum de fotos que faça tudo que o Flickr faz?) fará bastante sucesso e será bem aceito ao menos pelos programadores (grande parte deles usa o Flickr mas tem um servidor legal que suporta PHP e GD).


Agora vamos voltar ao blog.

Fiquei um tempo sem postar justamente por causa desse projeto, que estou me esforçando para fazer o mais rápido possível. Também estou lendo “Java – Como Programar”. Tô gostando bastante da didática e gostando também da linguagem Java. No mais, não estou fazendo muita coisa. Estou indo trabalhar todos os dias a tarde, viajei final de semana para Florianópolis e agora que meu primo foi embora, minha casa está bem vazia (o que é ótimo! :) )

O Poder do Ajax

ATENÇÃO: Este conteúdo foi publicado há 12 anos. Eu talvez nem concorde mais com ele. Se é um post sobre tecnologia, talvez não faça mais sentido. Mantenho neste blog o que escrevo desde os 14 anos por motivos históricos. Leia levando isso em conta.

Ontem, pela primeira vez, desenvolvi um sistema em Ajax. Já vinha estudando há pouco mais de uma semana e hoje temos votação do Grêmio Estudantil no Colégio, e achei interessante fazer usando Ajax, e aproveitar algumas coisas como:

  • Todos usam Mozilla Firefox.
  • O servidor fica do lado dos computadores… É rede, não internet!

… para abusar de Ajax, já que eu podia fazer uma coisa que buscasse bastante no servidor e que só funcionasse no Gecko. O resultado ficou bem legal. Embora eu não tenha conseguido fazer um trechinho do script sem um IFRAME que atuliza sem parar, todo o esquema foi feito com JavaScript e aprendi umas coisas bem legais. Além disso, o formuláro ficou muito bonito, posicionado e desenvolvido em CSS. Os botões de radio estão com a propriedade display:none e os labels estão com opacity:0.5; Quando eu clico neles (onclick), eles deixam todos os outros com opacity:0.5 e se dão opacity:1. Quando o visitante clica no submit do formulário, o XmlHttp IMEDIATAMENTE pega os dados do servidor e joga na tela. Ficou uma coisa muito massa. E ainda aproveitei pra usar PNGs transparentes!

Não vou colocar o código aqui agora, ainda queria ajustar algumas coisas porque ontem fiz na pressa, mas confiram um screenshot! (o SS mais legal seria o do “Voto Confirmado”, quando um div com fundo PNG alpha aparece em cima de tudo, mas eu fiz um sistema de segurança para só quem tá dentro do Lab. de Informática poder votar – testando IPs – e agora estou em casa).

Screenshot da Votação do Grêmio

Ajax é muito power. Desenvolvendo com ele dá pra fazer umas coisas que antes eu nem imaginava… Agora tô estudando bastante JavaScript, porque com a parte de servidor/PHP não há problemas, mas nunca estudei muito o lado client-side (estudei tableless, mas não DOM/JavaScript!). Já li dois artigos do Elcio, do Tableless.com.br: Um sobre DHTML Crossbrowser e outro que é o conhecido Ajax para quem só ouviu falar. Agora estou acabando o segundo artigo dele sobre Ajax, Ajax: Encarando o Mundo Real. O bom é que a sintaxe das coisas no JavaScript são bem parecidas com as do PHP…


Tenho lido umas coisas desse cara e tô achando muito bom. Sugiro que quem goste de software livre ou quem quer aprender mais sobre ele, leia os artigos também. :)