Criatividade Visual » javascript

Recurso: Aprenda a utilizar o Lightbox!

Slitake — Thu, 03 Sep 2009 11:29:10 +0000

Tenho a certeza que já viram muito sites em que ao clicarem nas imagens sobrepõem uma página com a imagem ampliada. E tenho a certeza que também já se perguntaram como se faz, e na verdade é uma coisa bastante simples. Praticamente todos os sites que têm estes efeitos, recorrem ao lightbox, um pequeno script em javascript que cria um efeito que linka desde o thumbnail até à imagem já ampliada.

Para usar o lightbox é necessário fazer download do mesmo neste site: (Download Lightbox) .

No Thumbnail (imagem pequena) que tem o link para a imagem em tamanho real acrescentar o atributo rel=”lightbox” no link. Ficando o link completo já com a imagem com a seguinte sintaxe:

Para que isto funcione é necessário acrescentar no header da página a referencia ao ficheiro onde está o o script do lightbox e suas dependências e também do css usado pelo lightbox,para o fazer é necessário acrescentar duas linhas no header que são:

E de uma forma simples temos um efeito que agora está na moda em todos os sites.

Recursos: Slideshow em Javascript (Slideshow JS)

Flávio Proença — Sat, 16 May 2009 23:02:03 +0000

Slideshow JS é uma biblioteca gratuita, criada em JavaScript que ajuda a criar uma imagem slideshow com facilidade.

É totalmente configurável e não requer nenhum script. Embora o download pacote venha com vários estilos, o estilo da apresentação de diapositivos pode ser totalmente personalizada.

A biblioteca é construída com jQuery. Oferece diversas opções como:

- Número de segundos de cada imagem será exibida
- Se as imagens serão exibidas automaticamente ou manualmente
- Imagem contador & controles de activação
- Se as imagens serão exibidas aleatoriamente ou em uma ordem
- E muito mais ..

P.S – Não deixe que as imagens na blury demo enganá-lo. Com imagens de qualidade, o script oferece uma bela apresentação.

Website: Slideshow JS
Demo: Slideshow JS
Download: Slideshow JS
Requisitos: jQuery
Licença: Gratuita

Recursos: Simples Tooltip em CSS + Javascript (jQuery)

Flávio Proença — Fri, 20 Mar 2009 04:39:32 +0000

Simple CSS Javascript tooltip – uma maneira simples e fácil de criar uma tooltip com Javascript (jQuery) usando a tag âncora TÍTULO REL e atributos para identificar uma dica do seu conteúdo.
Em baixo, fica o link para poderem ver o script a funcionar. Este não é um script que seja muito necessários em sites, mas cada vez se usam mais, por isso decidi partilhar aqui este pequeno script para vocês.

Website: Simple CSS Javascript tooltip
Demo: Simple CSS Javascript tooltip
Download: Simple CSS Javascript tooltip

Recursos: Formatar texto com javascript

Flávio Proença — Thu, 12 Mar 2009 23:40:19 +0000

Em vez de criar imagens ou usar o flash basta para mostrar o seu texto na gráfica do site da fonte que você quer, você pode usar typeface.js e escrever de forma clara HTML e CSS, como se os visitantes tinham o tipo de letra instalado localmente.

Typeface.js usa navegadores com capacidade de desenho vectorial, para desenhar texto em documentos HTML. O projecto Typeface.js tem duas componentes: o módulo Perl para converter tipos de letra, e a biblioteca em javascript para desenhar no navegador. O módulo Perl extractos de informações de fontes TrueType escreve os dados em formato JSON. A biblioteca javascript, em seguida, percorre o documento HTML e torna o texto utilizando

Este código é e será sempre gratuito e de código aberto. Isso inclui tanto a typeface.js biblioteca javascript, bem como o módulo Perl com funcionalidade para converter fontes TrueType para tipográfico queridos.

Website: typeface
Demo: typeface
Download: typeface
Requisitos: Firefox 1.5+, Safari 2+, Internet Explorer 6+

Recursos: TinyTable – Tabela Javascript de fácil utilização e com paginação

Flávio Proença — Mon, 09 Mar 2009 12:14:24 +0000

TinyTable é uma tabela JavaScript para fazer paginação de resultados e é de fácil utilização e este script tem apenas 2.5KB. Existem muitas características incluem coluna grande de destaque, opção de paginação, suporte para ligações, data / link, destacando suplente fila, alternando cabeçalho classe, tipo de dados de reconhecimento automático e selectivo de coluna. Além disso, o estilo da tabela é completamente personalizável, através do CSS.

TinyTable foi testado no Firefox 2 / 3, IE 6/7/8, Opera, Safari e Chrome. Este script está disponível gratuitamente a qualquer projecto, pessoal ou comercial, sob a licença Creative Commons e é oferecido tal como está, não livra o apoio prestado.

Website: TinyTable
Demo: TinyTable
Download: TinyTable
Licença: Creative Commons License

Recursos: Calendário Vista-like Ajax (Mootools)

Flávio Proença — Tue, 03 Mar 2009 13:32:19 +0000

O Vista-like Ajax Calendar (vlaCalendar) versão 2 é uma versão web, do profundo Windows Vista taskbar calendário, utilizando o quadro mootools javascript, AJAX, XHTML, CSS e PHP.

Este Vista-like Ajax Calendar script está licenciado sob a Creative Commons Attribution-NonCommercial 3,0 License. Você pode usar esses arquivos como quiser, mas não sem os devidos créditos redistribuir e não utilize este procedimento para fins comerciais.

Website: Vista-like Ajax Calendar
Demo: Vista-like Ajax Calendar
Download: Vista-like Ajax Calendar
Requisitos: Mootools Framework
Licença: Creative Commons 3.0 License

Recursos: JavaScript Slideshow – Grátis e Dinâmico

Flávio Proença — Tue, 03 Mar 2009 13:19:30 +0000

Este JavaScript slideshow é totalmente dinâmico criado em JavaScript e tem apenas 654KB. Você pode encontrar os novos recursos que incluem suporte para descrição, link de apoio (não mencionando restrições), retrato imagem apoio, graciosa e degradação activa da miniatura de estado.

A função init leva 5 parâmetros (id do slideshow conteúdo, o id da imagem, o id da imagem anterior, o id da próxima imagem, o id da imagem link).

Este script foi testado no Firefox, Internet Explorer, Opera, Safari e Chrome. Este script está disponível para qualquer projetos pessoais ou comerciais sob a licença Creative Commons e é oferecido tal como está, não livra o apoio prestado.

Imagem do Slideshow:

Website: JavaScript Slideshow
Demo: JavaScript Slideshow
Download: JavaScript Slideshow
Requisitos: Javascript Activo
Licença: Creative Commons License

Recursos: Notepad++ (editor de códigos)

Flávio Proença — Tue, 03 Mar 2009 01:36:31 +0000

Notepad++ é um editor de código livre (e um substituto do Notepad), que suporta várias linguagens de programação, rodando sobre o ambiente MS Windows.
Este projecto é baseado em um componente para editor de texto, o Scintilla (um componente muito poderoso), escrito em C++ com pura api win32 e STL (o que garante alta velocidade de execução e pequeno tamanho de programa), está sob a licença da GPL.

É bastante leve, reconhece a sintaxe de aproximadamente 40 linguagens de programação (C, C++, HTML, XML, ASP, JAVA, SQL, Perl, Python, CSS entre outras com sistema syntax highlight, excelente para programadores).

Outras características:

- WYSIWYG (What you see is what you get)
- Permite ter mais do que um ficheiro aberto
- Suporte para tabs
- suporte para plugins
- Zoom in/Zoom out
- Bookmark
- Suporte para expressões regulares
- Suporte para drag n’drop de ficheiros
- … entre outros.

Aqui ficam algumas imagens do notepad++:

HTML (and embedded php, java script) Syntax highlighting and folding

XML Syntax highlighting and folding

C, C++ Syntax highlighting and folding

Para ver mais imagens clica aqui.

Website: Notepad++
Download: Notepad++
Download: Notepad++ Portable
Licença: GPL
Sistemas Operativos: Windows 9x/2k/XP/Vista