Arquivos Categoria

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

YouTorrent bom uso de Ajax

Artigo publicado em January 8, 2008 as 11:08 pm

YouTorrentMuita gente pode ser contra sites de torrents, mas aqui no PT Ajax isso não interessa, o que interessa sim é analisar sites que usem de alguma maneira técnicas de Ajax, frameworks e tudo o que tenha haver com Ajax.

YouTorrent usa varias técnicas de Ajax, e a framework escolhida pelos os programadores do site foi o mootools. Claro que também desenvolveram o seu próprio código em Javascript e usam Json para transferirem informação, tornando o site bastante rápido.

Para mim o site esta muito bem conseguido, esta rápido, esta dinâmico e esta com um interface limpo e bem desenhado, apesar de achar que quando começarem a ter sucesso muitos anúncios irão aparecer, so espero que consigam juntar os anúncios com o interface de uma maneira inteligente sem afectar a experiência dos visitantes.

Mas afinal o que é que o site faz?

Pois bem YouTorrent não é um site normal de torrents, basicamente é um motor de pesquisa de torrents. Basta pores a keyword que desejas procurar (ate da sugestões um dos troques mais famosos em Ajax) e de seguida procura a tua keyword em 12 sites de torrents.

De momento YouTorrent suporta:

  • Mininova
  • The Pirate Bay
  • SumoTorrent
  • myBittorrent
  • NewTorrents
  • SuprNova
  • Monova
  • Vuze
  • BitTorrent
  • LegitTorrents
  • SeedPeer
  • BTjunkie

EditArea um editor de codigo online.

Artigo publicado em January 2, 2008 as 7:53 pm

EditArea é um editor de código online. Não façam confusão com WYSIWYG, pois é completamente o oposto.
Criado por Christophe Dolivet e desenvolvido em Javascript algumas das características são:

  • Fácil integração, apenas um script para incluir e uma função para chamar
  • Suporta formato de código (para parecer bonito)
  • Sintaxe com cores, suporta PHP, CSS, Javascript, Python, HTML, XML, VB, C, PP, Pascal, Basic só falta .NET
  • Linhas numeradas
  • Suporta diferentes línguas entre as quais o Português
  • Permite múltiplos editores numa pagina so
  • Ecran inteiro
  • Funciona tanto com prototype e mootools

Uma das falhas é não suportar múltiplas linguagens num so editor por exemplo PHP+HTML.

EditArea

3D galeria de imagens em Javascript.

Artigo publicado em December 11, 2007 as 4:02 pm

3D Galeria de Imagens3D Galeria de Imagens3D Galeria de Imagens

Uma galeria de imagens em 3D criado em Javascript. Sem nenhuma framework.
O código esta disponível para quem quiser usar.

Sinceramente acho que o efeito esta bem conseguido como também a rapidez da aplicação. Não esta lento e não noto nenhuma falha.

Não se esqueçam também de clicarem na imagem pois a imagem aumenta, e se voltarem a clicar a imagem diminui.

Bem conseguido.

Visitem http://www.dhteumeuleu.com o site do autor onde podem ver o código e as imagens a funcionar.

Cache File

Artigo publicado em November 22, 2007 as 7:30 pm

CacheFile.netCacheFile.net é uma boa ideia mas será que resulta? Para quem usa libraries como o Prototype, Dojo, jQuery e muitos mais, este novo serviço pode ser bastante útil.
Mas vamos por passos, para que serve e como funciona este novo serviço.

O problema.

Como funciona normalmente.

Neste exemplo o mesmo user visita quatro websites onde todos usam por exemplo o prototype, e cada website encontra-se alojado em servidores diferentes. O que acontece é que o browser faz o download do ficheiro prototype quatro vezes para cada site.CacheFile tenta resolver esse problema.

A solução.

A solução.
Se todos os programadores nos seus websites / aplicações em vez de terem o protoype alojado nos seus servidores, e optarem por usarem a versão alojada em cachefile.net os users so terão que fazer o download uma única vez, pois o browser faz cache do ficheiro.
Uma solução excelente mas claro têm os seus problemas:

  • Só resulta se todos os programadores usarem o serviço.
  • Têm que se ganhar confiança no serviço, se o servidor for abaixo vai afectar muitos websites.
  • Se o criador por alguma razão decidir alterar ou prejudicar os ficheiros.

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.