Arquivos Categoria

Prototype cheat sheet

Artigo publicado em January 29, 2008 as 10:45 am

Cheat sheet dão sempre jeito.

Cheat sheet tipicamente é uma documento em PDF que ocupa uma pagina onde tens todos os comandos de uma framework.

O dono de scripteka acabou de lançar uma nova cheat sheet para o Prototype e depois de analisar acho que esta bastante bom, apenas tem um defeito se tentarmos imprimir numa pagina so as letras ficam demasiado pequenas e quase que é preciso uma lupa para ver.

Mesmo assim para quem gosta de cheat sheets recomendo o seu download.

Site oficial: Prototype Cheat Sheet

10 Ajax, CSS, HTML, PHP, Javascript galerias de imagens

Artigo publicado em January 27, 2008 as 9:55 pm

minishowcase

Uma potente galeria em PHP/Javascript, no website oficial dizem ser uma solução de tamanho pequeno, mas eu acho que quase 200kb não é assim tão pequeno.

Pontos fortes:

  • Para quem procura uma galeria e apenas isso, minishowcase da conta do recado
  • Rapidez, claro que também depende do servidor, mas mesmo assim esta galeria de imagens é rapida.
  • Fácil de instalar.

Pontos fracos:

  • É uma galeria (e apenas isso), sendo assim é dificil integrar com o resto do website
  • Opções, são varias mas básico.

Site oficial: Minishowcase
Exemplo oficial: Minishowcase Demo
Instruções oficial: Minishowcase Instruções

iphonestyle

AJAX Slideflow Control - estilo iPhone?

Para quem procura uma galeria do estilo do iPhone, esta é a solução mais parecida de momento.

Pontos fortes:

  • O efeito visual é sem duvida bastante atractivo
  • Fácil integração com outras paginas que já tenhas no teu website

Pontos fracos:

  • Ter que preparar as imagens todas em photoshop
  • A sério o factor de ter que criar 3 imagens (esquerdo/centro/direito) em photoshop torna-se bastante cansativo
  • Ter que criar o ficheiro xml

Site oficial: Mediaeventservices
Exemplo oficial: Mediaeventservices Demo
Instruções oficial: Mediaeventservices Instruções

zenphoto

ZenPhoto é talvez uma das plataformas mais completas para quem quer ter uma galeria de imagens na web.

Pontos fortes:

  • Index, Albums e imagens
  • Cria automaticamente thumbnails
  • Podes adicionar imagens através de FTP ou através do browser
  • Os visitantes podem comentar cada foto ou imagem
  • Ajax edita enquanto navegas pela a galeria
  • Themes, podes criar a tua template ou podes fazer download de algumas ja existentes
  • Varias maneiras de procurar, através de datas, tags, titulo e descrição

Pontos fracos:

  • Quando o visitante esta a ver as tuas imagens em tamanho inteiro cada vez que muda de imagem o pedido não é atraves de Ajax

Site oficial: Zenphoto

Exemplo oficial: Zenphoto Demo

Instruções oficial: Zenphoto Instruções

smoothgallery

SmoothGallery é uma galeria que usa bastante tecnicas de Ajax, as vezes ate parece ser criado em Flash.

Pontos fortes:

  • O display
  • A suavidade entre mudanças de imagens
  • Fácil de integrar com o teu website, não é apenas um standalone

Pontos fracos:

  • Quando o visitante clica para ver a imagem em tamanho normal, não existe a opção para voltar para a galeria

Site oficial: SmoothGallery

Exemplo oficial: SmoothGallery Demo

Instruções oficial: SmoothGallery Instruções

pyxygallery

Pyxy-gallery é mais uma galeria em PHP e Javascript que usa lightbox.js para mostrar as imagens da galeria.

Pontos fortes:

  • Apesar de uma ajax para mostrar as imagens numa só pagina é possível fazer o bookmark a imagens individuais.
  • Super leve

Pontos fracos:

  • Beta, falta limar ainda alguns pormenores.
  • Visualmente não é a galeria mais atractiva.

Site oficial: Pyxy Gallery

Exemplo oficial: Pyxy Gallery Demo

Instruções oficial: Pyxy Gallery Instruções

couloir

Couloir é uma solução em Javascript, HTML e CSS que tenta ( e bem ) recriar uma galeria em Flash.

Pontos fortes:

  • Excelente suavidade entre as mudanças de imagem para imagem

Pontos fracos:

  • Não existe suporte
  • O código é oferecido com esta
  • Não oferece a oportunidade de criar álbuns etc.. é apenas mesmo um visualizador de imagens

Site oficial: Couloir

lightbox2

Lightbox2 é talvez uma das lightbox conhecidas e usadas. Baseado nas seguintes frameworks, prototype e scriptaculous.

Pontos fortes:

  • Suavidade de animação entre imagens é talvez uma das melhores
  • Fácil de instalar
  • Fácil integração com o teu website

Pontos fracos:

  • Não é uma galeria completa como outras aqui apresentadas

Site oficial: Lightbox 2

Exemplo oficial: Lightbox 2 Demo

Instruções oficial: Lightbox 2 Instruções

triptracker

TripTracker na minha opinião é excelente para quem tem umas quantas imagens no site e quer uma maneira agradável para os visitantes navegarem entre imagens.

Pontos fortes:

  • Fácil de usar
  • Fácil de instalar
  • Fácil de integrar com o teu website design
  • Excelente navegação entre imagens
  • Opção para enviar a imagem por email
  • Opção para criar um bookmark a imagem

Pontos fracos:

  • Não é de borla
  • Licença normal: $25
  • Licença premium: $500

Site oficial: TripTracker

Exemplo oficial: TripTracker Demo

Instruções oficial: TripTracker Instruções

suckerfish

O que distingue Suckerfish HoverLightbox de outras soluções é o factor de poder criar uma barra de navegação de galerias em que o visitante basta passar com o rato por cima para aparecer uma caixa género “dropdown” com thumbnails das imagens.

Pontos fortes:

  • Diferente de outras soluções

Pontos fracos:

  • Talvez os visitantes mais “básicos” não percebam a primeira como ver as imagens

Site oficial: Suckerfish

Exemplo oficial: Suckerfish Demo

thickbox

ThickBox oferece mais do que apenas uma maneira de ver imagens. Pode tambem mostrar paginas, divs, texto etc..

Site oficial: Thickbox

Exemplo oficial: Thickbox Demo

Instruções oficial: Thickbox Instruções

Mozilla Weave

Artigo publicado em December 24, 2007 as 12:01 pm

Mozilla Weave?

Parece que antes de resolverem o meu grave problema com o consumo de memoria do meu portátil(só a brincar, mas é chato), Mozilla lançou a primeira versão (0.1) do Weave.
Weave é a aposta da Mozilla para começar a tentar juntar o desktop com a web.
Então o que é que eles querem dizer com isto? A melhor maneira de explicar é usando alguns exemplos de como o Weave pensa em funcionar no futuro.

Exemplo um:
Pessoa X ficou sem disco rígido, perdeu toda a informação, fotografias, email, musica etc.. e pior que isso não tem backup nenhum. E agora?
Pois bem com o uso de Weave assim que a pessoa X comprar outro disco rígido, basta instalar Firefox fazer o login e volta a ter tudo de volta.

Exemplo dois:
Pessoa X tem tudo configurado no seu computador, passwords, sites favoritos, rss feeds etc. Como não tem portátil e vai visitar a sua avó no fim de semana, no computador da avó não tem nenhuma dessa informação disponível. Mas com Weave passa a ter. Instala no computador da avó o Firefox faz o login na sua conta e pronto volta a ter toda a sua informação disponível.

Basicamente a mim da me a ideia de que Weave de momento não passa de juntar varios serviços que já existem e centralizar num só.
Claro que poderá ser muito mais do que isso no futuro, especialmente porque a Mozilla vai abrir o serviço de borla para programadores poderem criarem as suas próprias aplicações. Isto também porque a ideia do Weave não é criar as aplicações mas sim apenas a estrutura e a framework.
Um pouco como os plugins e themes para o firefox.

Esta versão do Weave contem:

  • O inicio e o básico da framework.
  • Autenticação nos servidores (labs.mozilla.com).
  • Encriptação para a informação do usuário.

A versão 0.2 que esta prevista para princípios de 2008 já trás umas coisas mais interessantes como API (e nos gostamos de APIS).

Download e informação:
https://labs.mozilla.com/forum/index.php/topic,393.0.html
http://labs.mozilla.com/2007/12/introducing-weave/

Exemplos do weave em uso:
https://labs.mozilla.com/forum/index.php/topic,392.0.html

Ideia:
http://cbeard.typepad.com/mozilla/2007/12/the-space-betwe.html

8 Ajax, Javascript frameworks

Artigo publicado em December 8, 2007 as 11:09 pm

Com o aparecimento do termo Ajax também começou a aparecer várias frameworks ou livrarias (tudo depende como queiram chamar). Desde a mais simples em que apenas ajuda a facilitar o XHMLHttpRequest até as mais complicadas em que possibilitam muito mais do que apenas o XHMLHttpRequest.

Neste artigo vou tentar apresentar algumas das frameworks mais conhecidas e usadas. Atenção todas estas frameworks tem pelo o menos uma coisa em comum todas facilitam o XHMLHttpRequest. Frameworks como o scriptaculous não aparecem na lista devido a ser componentes ou add-ons para certas frameworks. Usando apenas o scriptaculous não é possível fazer pedidos em XHMLHttpRequest onde o verdadeiro Ajax reside.

PrototypePrototype
Prototype é uma das livrarias/framework mais conhecidas e mais usadas para quem quer usar Ajax. Em termos pessoais prototype é a minha opção.
Um dos problemas com o prototype é a corrente documentação, onde muitos usuários acham complicado e difícil de intender.

URL: http://www.prototypejs.org/
Documentação: http://www.prototypejs.org/api
Sites que usam Prototype:
http://www.digg.com/
http://www.alexa.com/

GoogleGoogle Webtoolkit

Google oferece GWT (Google Web Toolkit) uma aplicação em JAVA que simplifica a criação de aplicações que queiram usar Ajax. Basicamente permite a qualquer programador criar Ajax usando JAVA deixando assim de seguida o GWT traduzir o código para Javascript e HTML.

URL: http://code.google.com/webtoolkit/
Documentação: http://code.google.com/webtoolkit/overview.html
Sites que usam GWT:
http://blueprint.lombardi.com/index.html
http://www.dotemplate.com/


BajaxBajax

Para quem procura uma solução simples e bastante leve em termos de tamanho (6kb) Bajax pode ser a solução ideal. Puramente para começar a usar Ajax para fazer updates do conteúdo sem o refresh das paginas de uma maneira fácil e simples.

URL: http://bajax.berlios.de
Documentação: http://developer.berlios.de/docman/index.php?group_id=5319
Sites que usam Bajax: Não conheço



MochikitMochikit

Mochikit oferece uma framework bastante fiável e garante 100% suporte em termos de documentos para ajudar qualquer programador a perceber a usar a framework. Mochikit no meu ponto de vista é uma das frameworks que mais concorrência faz ao prototype.

URL: http://www.mochikit.com
Documentação: http://www.mochikit.com/doc/html/MochiKit/index.html
Sites que usam Mochikit:



MooToolsMooTools

MooTools oferece uma framework para programadores já com alguma experiência em Javascript. Ultimamente esta framework tem vindo a crescer e com uma documentação bastante simples de usar e de perceber Mootools pode ser outra das grandes frameworks.

URL: http://mootools.net
Documentação: http://docs.mootools.net/
Sites que usam MooTools:
http://www.cnet.com/
http://joomla.org/


Sack Simple AJAX Code-KitSack Simple AJAX Code-Kit

Sack como a definição diz e uma simples framework super leve e rápida e sem os efeitos e assobios de outras frameworks, apenas Ajax nada mais. Sack tem a mesma ideia que Bajax.
Simples e eficaz se queres apenas Ajax Sack e uma boa solução.

URL: http://twilightuniverse.com/projects/sack
Documentação: Incluído no download
Sites que usam Sack : Não conheço

YUI Yahoo User InterfaceYahoo User Interface
A resposta da Yahoo no mundo das frameworks. Uma das grandes vantagens de usar YUI framework é a possibilidade de não ser preciso fazer o download da framework e poder apenas criar um link na nossa aplicação directamente aos servidores da Yahoo. Isto possibilita as vantagens já discutidas pelo o serviço CacheFile.

URL: http://developer.yahoo.com/yui/
Documentação: http://developer.yahoo.com/yui/docs/
Sites que usam YUI:
http://www.linkedin.com/
http://slashdot.org


Adobe SpryAdobe Spry
Claro que a Adobe não podia fugir da festa. Mas como a Adobe é a Adobe esta framework esta mais inclinada para designers. Devido a esse factor pouco posso dizer sobre esta framework devido a nem ter perdido um segunda a usar. Para os fanáticos do Dreamweaver, Spry possibilita uma integração bastante fácil.
Air pelos os vistos vai ser a nova aposta da Adobe. Mas isso fica para outro artigo.
URL: http://labs.adobe.com/technologies/spry/
Documentação: http://labs.adobe.com/technologies/spry/articles/best_practices/index.html
Sites que usam Spry:
http://reader.macrostandard.com/
http://www.grafikkaos.co.uk/

jQueryjQuery
Obrigado ao Herberto, por ter me apontado para mais uma framework bastante conhecida que me passou ao lado. jQuery oferece quase tanto ou mais que o prototype e em termos de tamanho oferece muito menos (14kb) o que é bastante impressionante.
Mais impressionante ainda é o factor de o jQuery ser usado pelo o google code no seu novo design no dia 6 de Novembro.
URL: http://jquery.com/
Documentação: http://docs.jquery.com/Main_Page
Sites que usam jQuery:
http://code.google.com/


Com o sucesso do Ajax, cada dia que passa as frameworks passam a ter cada vez mais importância. Qual é a tua framework preferida? Conheces mais alguma que não esteja na lista? Deixa os teus comentários e se queres ver mais artigos deste género vota.

DojoToolkit Explorer

Artigo publicado em December 4, 2007 as 3:44 pm

Dojo ExplorerCriado por Shane O Sullivan Dojo Explorer tenta fazer o uso da documentação mais fácil e acessivel para todos os usuários que queiram começar a usar o DojoToolkit framework.
Mesmo em beta o Dojo Explorer já disponibiliza alguma informação e algumas dos pontos altos são:

  • Navegação em arvore.
  • View tab. Mostra o exemplo / widget em acção.
  • HTML tab. Mostra o código em HTML para criar e iniciar o exemplo / widget.
  • JS tab. Mostra o código em JavaScript para criar e iniciar o exemplo / widget.

Acredito que DojoToolkit possa ter bastante utilidade mas ainda tem um longo caminho a percorrer, em IE o sistema ainda não funciona correctamente e a informação ainda esta bastante incompleta e so com a ajuda da comunidade o sistema pode andar para a frente.
Para mais informações visita o blog oficial.

Scripteka - Extensões, livrarias para Prototype

Artigo publicado em December 3, 2007 as 1:23 pm

Scripteka Scripteka é um novo site recheado de extensões e livrarias para uso com prototype. Para quem usa Prototype este site esta bastante interessante e recomendo vivamente.
De momento Scripteka oferece 79 extensões mas acredito que com o tempo cresça muito mais.
O site oferece mais do que apenas uma lista das extensões como por exemplo podes votar nas tuas extensões preferidas como submeteres as tuas próprias extensões e receber o apoio da comunidade.

De resto o site esta bem construido e fácil de usar. Claro que podem encontrar o pequeno bug, mas isso é por o site ser recente.

Pagina 1 de 212»

Wisemapping Magento Ecommerce TaskFreak
MooFilm Flexigrid ProtoFlow

Drag e Drop com Scriptaculous

Drag e Drop com ScriptaculousEste tutorial consiste em explicar como usar o prototype e o script.aculo.us para criar o efeito drag e drop. Analisamos todas as opções, mostramos como criar com exemplos práticos e visuais.

Uff.. Como usar Prototype para pedidos em Ajax.

Como usar Prototype Neste tutorial explicamos como podes começar a dar os teus primeiros passos na famosa framework prototype, um simples tutorial onde é explicado como podes fazer os teus primeiros pedidos em Ajax.