Archive for 'ajax'
Curso Interativo Adobe Dreamweaver CS3
September 26th, 2007. Published under adobe, ajax, css, curso, dreamweaver, spry. 15 Comments.
A TI Shop acabou de lançar meu novo curso, Adobe Dreamweaver CS3. O curso está divido três grandes capítulos e 40 tópicos, abordando cada uma das novas novas funcionalidades e recursos do Dreaweaver CS3.
Veja as principais diferenças na interface e funcionamento da nova versão do DW; aprenda a trabalhar com CSS e a sua grande integração com essa nova versão; e desenvolva novas interfaces mais ricas e dinâmicas utilizando o Spry Framework para AJAX.
Mais detalhes sobre o Curso Adobe Dreamweaver CS3, em CD-ROM.
Spry framework e Dreamweaver CS3
March 19th, 2007. Published under ajax, dreamweaver, spry, xml. 2 Comments.
A nova versão do Dreamweaver, a CS3, terá suporte ao Ajax. E tal suporte será feito com foco no Spry framework.
Spry é um framework client-side em forma de bibliotecas JavaScript; o que significa dizer que não só o Dreamweaver poderá utilizá-lo, mas qualquer outro editor HTML.
A única requisição para se trabalhar com o Spry é a utilização da XML. E vários exemplos do que pode ser feito com esse framework pode ser conferida no Spry Demos.
Particularmente, não gostei muito da forma de utilização do Spry, não achei tão simples como prometiam. Mas, o pior de tudo é a utilização de atributos proprietários nas tags HTML. Resultando em JavaScript obstrutivo e inacessível e na invalidação da página.
Cheguei a pensar no seguinte, se o Dreamweaver valida a marcação utilizada nas páginas, informando o erro encontrado e tal. Será que ele alertará quanto a marcação proprietária do Spry?
É esperar para ver, por enquanto, o Spry ainda se encontra na versão BETA, e tomara que eles mudam a forma como ele é utilizado.
E você, o que acha do Spry?
Como solicitar do usuário uma confirmação ao sair de uma página
February 7th, 2007. Published under ajax, event, javascript, onbeforeunload. 8 Comments.
Tenho visto um recurso interessante em alguns sites e principalmente em aplicativos web a la 2.0. Trata-se de uma solicitação ao usuário quando ele tenta fechar a página ou dirigir-se a outra URL. Quando o usuário executa alguma dessas ações, será necessário uma confirmação para fechar ou sair da página em questão.
Tal recurso é feito utilizando-se do evento onbeforeunload da seguinte maneira:
window.onbeforeunload = function() {
return "Aqui você especifica uma mensagem a ser anexada junto a mensagem padrão do navegador.";
}
Quando o usário tentar fechar a página, apertar a tecla F5 ou navegar para uma outra URL, ele deverá confirmar a sua real vontade de sair da página. Observe um exemplo:
Bom, utilizando a imaginação é possível fazer um bom uso desse recurso, ainda mais com o advento do Ajax e das aplicações on-line.
Infelizmente o evento onbeforeunload não funciona no Opera (ou funciona e eu não sei?), somente no Internet Explorer e a partir da versão 0.9 do Firefox.
Microsoft se prepara para 2007 com redesign drástico em sua Home Page
December 20th, 2006. Published under IE, acessibilidade, ajax, javascript, microsoft, opinião, web standards. 3 Comments.
A Microsoft Corporation lançou sua nova home page e sinceramente, me surpreendi com o redesign. Primeiro, por se tratar de uma empresa que mantém o browser do ícone azul. Segundo por ela não aderir como deveria os padrões da web (será?).
Com o lançamento do Internet Explorer 7, e a preparação para o Windows Vista e o Office 2007 para o próximo ano, a empresa de Bill Gates estrutura sua nova home page com base nos padrões da web e na utilização do Ajax. Acredite: eles usaram javascript não-obstrutivo.
A dois anos atrás, um grande nome ligado aos padrões da web, refez a home page da companhia com técnicas de CSS para Layout. Confira. Mas agora em 2006, caminhando para 2007 a sugestão parece ter surgido efeito (como demorou hein).
A nova interface como demonstrada abaixo:
Utiliza o Ajax para carregar o conteúdo dinâmicamente através dos links dispostos no menu flutuante à direita. Caso o usuário esteja com o JavaScript desabilitado ou não tenha suporte a esse recurso, ele navegará perfeitamente pelo site, uma vez que os desenvolvedores utilizaram o JavaScript como deve ser: não-obstrutivo.
Uma vez clicado nos links do menu, o conteúdo é exibido em um painel que oferece três opções de visualização de conteúdo (Detail, Thumbnail, Text). Observe a imagem abaixo:
O painel exibido ao clicar nos links do menu flutuante à direita, também oferece uma navegação em um menu flutuante à esquerda, que também utilizada o Ajax para carregar o conteúdo e exibi-lo nesse mesmo painel.
A navegação secundária, localizada na parte inferior da página, altera seu conteúdo dinâmicamente através do evento onmouseover. Os desenvolvedores também privilegiaram a navegação através do teclado, testei aqui e funcionou perfeitamente.
Meu primeiro contato com esta nova Home Page da Microsoft foi super positiva. Fiquei feliz de ver essa empresa se preocupar com a acessibilidade e com os padrões da web. E você, o que achou deste redesign?
Ajax com uma linha de código.
December 18th, 2006. Published under DOM, add-on, ajax, freeDOM.js, javascript. 6 Comments.
Utilizando a freeDOM.js é possível trabalhar com o Ajax com apenas 1 (uma) linha de código. Tornando a tarefa de desenvolver interfaces mais ricas e com uma melhor interatividade com o usuário super simples.
Uma vez que você já inseriu a freeDOM.js na sua página, basta inserir o módulo de Ajax - freeDOM-ajax.js - ambos podem ser baixados na página da freeDOM.js. Você estará adapto a trabalhar com o Ajax com apenas uma linha de código.
Primeiramente, você precisará instanciar a classe de Ajax do módulo freeDOM-ajax.js da seguinte maneira:
var ajax = new ajax();
Feito isso, seu próximo passo é criar uma simples linha de código assim:
ajax.addRequest('/pg_serve_side.php',fnSeguinte,$('formID'));
Só isso :). Mas vou explicar em detalhes.
ajax.AddRequest = chama o método - addRequest - responsável em adicionar uma nova requisição Ajax à fila.
pg_serve_side.php = Nesse primeiro parâmetro do método addRequest, você informa a URL da página responsável pela comunicação com o servidor.
fnSequinte = O segundo parâmetro do método refere-se a uma função de retorno, que você poderá utilizar para tratar os dados retornados pelo Ajax - responseText.
Para finalizar temos o terceiro parâmetro, onde informamos o formulário que contém os dados quem devem ser “coletados” e enviados juntos a requisição. Isto é uma mão na roda em tanto.
Imagine que você tenha um formulário com “trocentos” campos e para enviar os seus dados, você teria que manualmente fazer algo assim:
...
dataPost += '&nome=' + $('nome').value;
dataPost += '&email=' + $('desc').value;
...
Informando o formulário no terceiro parâmetro da freeDOM-ajax.js, ele tratará de “coletar” os dados de todos os campos do formulário informado e facilitando a sua vida.
Esse módulo - freeDOM-ajax.js - ainda está em desenvolvimento, mas já apresenta significativa vantagem para o desenvolvedor. Gostaria de saber o seu comentário a respeito desses recursos e o que ela possa vir a ter 
Você conhece a freeDOM?
December 11th, 2006. Published under DOM, ajax, freeDOM.js, javascript, mtzlib. 3 Comments.
Se você conheceu a mtzlib, estará familiarizado com a freeDOM. Uma vez que ela (mtzlib) mudou o seu nome para freeDOM.
freeDOM.js
O que é?
É um projeto iniciado para desenvolver uma biblioteca de funções JavaScript simples e poderosa, para ajudar o desenvolvimento e aumentar a produtividade de websites e aplicativos web.
Porque freeDOM?
freeDOM é um joguinho de palavras que representa exatamente nossa coleção de funções: free(gratuito) + DOM(Document Object Model). Ao mesmo tempo expressa nossa intenção de dar liberdade ao desenvolvedor, utilizando as funções e parâmetros do jeito que melhor lhe convém.
Funcionalidades
O desenvolvimento da freeDOM ainda está em fase inicial, porém já dá suporte as principais funcionalidades do DOM e inclui um add-on que transforma aplicações ajax em uma tarefa extremamente simples.
Como colaborar?
Atualmente o projeto é atualmente mantido apenas por Andre Metzen (andre[at]metzen.com.br) e Leandro Vieira (leandro[at]w3invent.com.br). Se você tem interesse em colaborar de qualquer forma, é só nos enviar um e-mail.
Download
Acessa a página do freeDOM.js
Ajax e os acentos
December 7th, 2006. Published under ajax, javascript, php. 7 Comments.
Neste post, irei reproduzir um outro post que eu havia escrito em Janeiro deste ano, o qual falava sobre Ajax e os acentos.
Você já “queimou a cuca” ao trabalhar com Ajax e perceber que os acentos não estão sendo exibidos corretamente? Então, passei por isso ao desenvolver uma busca instantânea com esse método. E a solução? Vou explicar-lhe neste post.
Sempre que tenho alguma dúvida durante o meu trabalho, recorro aos amigos, aos fóruns e principalmente ao Google; e foi nesse último que encontrei a solução para o meu problema, no tutorial: Ajax para quem só ouviu falar, escrito pelo Élcio.
Lembrando que trabalho com PHP e se você trabalha com outra linguagem dinâmica, faça as modificações necessárias.
No arquivo PHP, precisamos utilizar a função urlencode(). Então, teremos algo assim:
$txt = "Tenha um bom coração.";
$txt = urlencode($txt);
O texto retornado será algo assim:
Tenha+um+bom+cora%E7%E3o.
Bom, agora no javascript fazemos assim:
var resultado = ajax.responseText; // Texto retornado pela requisição do ajax.
resultado = resultado.replace(/\+/g,” “); // Substitue o “+” por um espaço.
resultado = unescape(resultado); // Desfaz o que a função urlencode(); fez.
Bom, este é o processo para termos os acentos funcionando perfeitamente em nossas aplicações em Ajax.
Característica comum nos aplicativos web 2.0 me preocupa.
December 4th, 2006. Published under DOM, ajax, javascript, php, web 2.0, web standards. 2 Comments.
Tenho percebido uma característica comum nos aplicativos web 2.0 que me preocupa em muito, se trata da utilização do javascript obstrutivo. Sim, muitos sites a la web 2.0 utilizam o javascript dessa maneira, que pena.
O que me intrigou a observar essa questão, foi a agilidade em que os aplicativos são desenvolvidos, muitos deles não gastam mais de uma semana. E com isso, a acessibilidade em alguns aspectos é desconsiderada.
Ora, em meados a propagação cada dia mais e mais dos padrões da web, por que os desenvolvedores estão utilizando o javascript de forma obstrutiva? Seria a pressa em lançar seus serviços on-line? Seria uma desconsideração para com aqueles que navegam com o javascript desabilitado? Ou seria uma forma para posteriormente (e se acontecer) incrementar uma versão com o HTML puro?
Todos os dias eu penso em um forma de ser produtivo e ágil no desenvolvimento para web, trabalhando com Ajax, javascript não-obstrutivo, DOM e o PHP (linguagem dinâmica com o qual eu trabalho). No meu curso Web Sites com Ajax eu explico e exemplifico a metodologia que utilizo, mas confesso, estou ávido a procura de algo novo.
Qual a sua metodologia de desenvolvimento para se trabalhar com javascript não-obstrutivo?
[update]
Uma boa matéria do parceiro Metzen sobre javascript não-obstrutivo
- Tudo sobre Javascript não-obstrutivo - Parte 01
- Tudo sobre Javascript não-obstrutivo - Parte 02 (Alcançando os objetos)
- Tudo sobre Javascript não-obstrutivo - Parte 03 (Criando e destruindo conteúdo)
- Tudo sobre Javascript não-obstrutivo - Parte 04 (Chamadas de função)
[/update]
Desenvolvimento web em camadas - camada de comportamento
November 23rd, 2006. Published under DOM, ajax, css, html, javascript, mtzlib. 2 Comments.
O desenvolvimento básico de um aplicativo web consiste em HTML para a marcação do conteúdo, das CSS para estilizá-lo e do JavaScript juntamente com o DOM para modificarmos/concedermos comportamentos aos elementos de uma página web.
Você certamente já trabalha com as duas primeiras camadas citadas anteriormente. Mais por que ainda não trabalha com a terceira?
Acredito pelo fato deste assunto ser pouco discutido aqui no brasil. Encontramos um ou outro falando sobre o assunto em blogs.
Em agosto deste ano, lançei um curso em parceria com o iMasters Shop chamado Web Sites Com Ajax e nele falo de forma prática sobre a camada de comportamentos. Uma vez que o projeto final do curso é desenvolvido nessa lógica, ou seja, separar as camadas de desenvolvimento e trabalhar com JavaScript não-obstrutivo.
Vou abordar esse assunto por aqui, visto que o conteúdo relacionado a isto é vago (ainda). Mas com certeza tratarei de assuntos diferentes dos apresentados no curso, por respeito aqueles que adquiriram o curso (quem sabe o próximo possa ser você :))
Aqui no meu blog farei uma abordagem do assunto utilizando a Mtzlib e assim vocês verão como o nosso dia-a-dia pode ser mais produtivo, divertido e prazeroso ao se trabalhar com JavaScript e DOM através dessa biblioteca de JavaScript. Até lá.
Photoshop. Estaria ele com seus dias contados?
November 14th, 2006. Published under ajax, rapidinhas. 4 Comments.
Acabei de conhecer um site chamado Pixer.us, ele nada mais é do que um editor de fotos on-line em Ajax. E sem dúvida alguma, ele quebra um galhão quando se faz necessário a edição rápida e simples de fotos. Entre os recursos do editor estão inclusos:
- Save;
- Undo;
- Resize;
- Crop;
- Rotate;
- Flip;
- E muito mais.
E quanto ao Photoshop, ele não está com seus dias contados, isto por levar algum tempo ainda.
Mas, estamos caminhando para que isso aconteça, ou melhor, caminhando para o dia em que não teremos mais certos softwares instalados em nossas máquinas.
Vou anotando aqui os aplicativos web para tratamento de imagens ou editoração vetorial que eu for conhecendo.