posted under , , by dicasweb

Às vezes é apenas divertido para brincar com as linguagens de programação que sabemos e ver o que podemos criar. Veja no link abaixo.

Demo:
http://nettuts.s3.amazonaws.com/378_jqueryKeyboard/demo/index.html
Download:
http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/

Gráficos dinâmicos em FLASH

posted under , , by dicasweb
Drag-able Chart + JavaScript









Neste exemplo, simular as receitas lucrativo cenário de uma organização utilizando Coluna 2D Chart. Você pode modificar visualmente a receita e o lucro números sobre o gráfico e, em seguida, apresentar os dados para locais funções JavaScript presentes na mesma página.

Demos
http://www.fusioncharts.com/Demos/DragColumn/Default.html
Download
http://www.fusioncharts.com/Downloads/Demos/DragColumn.zip


PowerCharts + JavaScript Integration





Os FusionCharts pode integrar seamlessly com JavaScript para criar aplicações Web dinâmicas. Neste exemplo, ligar o gráfico de Dispersão Selecione PowerCharts suite para funções JavaScript. As funções JavaScript são responsáveis pela leitura dos dados escolhido na tabela.
Demo
http://www.fusioncharts.com/Demos/ScatterReturn/Default.html
Download
http://www.fusioncharts.com/Downloads/Demos/ScatterReturn.zip
FusionCharts + JavaScript (AJAX) Integration








FusionCharts v3 oferece enormes potencialidades integração com JavaScript. É perfeitamente ligado com JavaScript / AJAX para permitir que você atualize tabelas no lado do cliente, sem ter que atualizar a pagina.

Demos
http://www.fusioncharts.com/Demos/JS/Index.html
Download
http://www.fusioncharts.com/Downloads/Demos/FusionChartsJS.zip

Airline Dashboard




Este painel serve para a empresas aérea. Aqui, temos a combinação do FusionCharts e FusionMaps em uma maneira eficaz de show business e de dados estatísticos para uma empresa aérea - FusionAir. Em FusionMaps, temos usado o marcador Connector característica de mostrar várias rotas de voo para a companhia aérea.

Demos
http://www.fusioncharts.com/Demos/FusionAir/
Dowload
http://www.fusioncharts.com/Downloads/Demos/FusionAirDashboard.zip

Sales Dashboard








FusionCharts pode ser efetivamente usado para criar altamente intuitiva e dashboards interativos no financeiro. Usando uma variedade de gráficos e mapas disponíveis em FusionCharts Suite, você pode dar um rosto alegre para todos os seus dados escarear tabelas. Neste exemplo, temos usado para criar uma FusionCharts Vendas Dashboard.

Demo
http://www.fusioncharts.com/Demos/FusionAir/
Download
http://www.fusioncharts.com/Downloads/Demos/FusionAirDashboard.zip


FusionCharts Blueprint Application








Esta aplicação utiliza intensamente o FusionCharts gráficos para uma empresa comercial, que as importações e exportações de alimentos especialidade em todo o mundo. Temos efectivamente combinada FusionCharts, JavaScript (AJAX) e os comerciantes de dados para tornar sem costura uma experiência de navegação.

Demos
http://www.fusioncharts.com/Demos/Blueprint/
Download
http://www.fusioncharts.com/Download.asp




EXEMPLO DE FORMULÁRIO EM CSS FÁCIL

posted under by dicasweb

Neste artigo publicado em woork.blogspot.com (tradução) você encontrará os códigos html e css para criar um formulário sem uso de qualquer tabela. Tem muita gente não gosta de usar tabelas em seus sites. O fato é que criar formulários em tabelas html é bem mais rápido e prático. Mas a forma rápida de fazer as coisas na maioria não é a melhor forma. Para quem não gosta de perder tempo e prefere o CSS estas dicas são perfeitas.

SCRIPT PARA MOSTRAR FOTOS COM TRANSIÇÃO

posted under by dicasweb

Existem muitos tipos de sites onde as fotos são importantes para o sucesso do mesmo. O site de um hotel precisa ser repleto de bonitas fotos. Mas como apresentar estas fotos de forma elegante para os visitantes? Este script que você encontrará no site http://lifedraft.de/projekte/dhonishow/ faz isto muito bem. Ele é perfeito para colocar uma apresentação de fotos na capa de um site de hotel, restaurante ou qualquer que se venda através de uma bela foto. Basta visitar o site para ver na mesma página uma demonstração, o botão para download e alguns códigos prontos para fazer o script funcionar.

GALERIA DE IMAGENS COM MOOTOOLS

posted under by dicasweb

O moo.rd é uma biblioteca javascript que trabalha junto com o conhecido MooTools. Com ela você poderá criar uma galeria de fotos com belos efeitos de transição iguais a esta ou esta aqui. No primeiro exemplo temos uma imagem principal aparecendo com algumas miniaturas na base da foto. Ao passa o mouse sobre qualquer miniatura a foto é ampliada em um belo efeito de transição. No outro exemplo vemos apenas as miniaturas. Ao clicar uma janela se abre deixando o restante do site escurecido. É possível adicionar textos sobre a foto com algum comentário. Links de avançar para as demais fotos facilitam a navegação. Você encontra as dicas de como usar aqui. Para download clique aqui.

SELETOR DE DATAS EM AJAX

posted under by dicasweb

Selecionar intervalos entre datas é uma tarefa chata na hora de preencher formulários de consulta. Para facilitar a vida do seu usuário não deixe conhecer esta solução. O projeto é baseado no jquery e permite otimizar através de seleção rápida e intuitiva de intervalos de datas. Veja um exemplo aqui.

EXIBIR VÍDEO EM CAIXA FLUTUANTE VIDEOBOX

posted under by dicasweb

O Videobox é um javascript de apenas 6kb que trabalhará junto com o conhecido mootools
e swfobject (outros scripts) para exibir seus vídeos em uma caixa flutuante no seu site. Basta carregar estes 3 scripts na sua página juntamente com o arquivo .css que acompanha o pacote.

Este tipo de solução possui algumas vantagens:

1) Você não precisa abrir um nova janela do navegador do visitante para exibir vídeos.

2) A tela é aberta com uma bonita animação que deixa o seu site em segundo plano com o visual escurecido dando maior destaque para o vídeo.

3) Adicionar este efeito nos vídeos é muito simples bastando utilizar um rel=”vidbox” no link do vídeo.

Você encontrará todas as orientações de como utilizar este script no endereço abaixo. Para ver exemplos funcionando clique sobre as figuras: http://videobox-lb.sourceforge.net/

SCRIPT PARA CRIAR UMA GALERIA DE FOTOS

posted under by dicasweb

Aqui temos uma ótima solução para criar galeria de fotos utilizando o jQuery: jqGalScroll 2.0 Existem diversos tipos de site que precisam de uma boa galeria de fotos: sites de hoteis, moteis, imobiliarias, construtoras de imóveis, sites que vendem produtos onde o visual é decisivo para a compra como roupas, joias, obras de arte, quadros, esculturas, etc.

CAIXA DE ESTRELAS PARA CLASSIFICAR CONTEÚDO

posted under by dicasweb

Aqui temos mais uma solução para quem precisa criar um caixa de estrelas para permitir que os visitantes de um site possam classificar um conteúdo (texto, fotos, vídeos). Ele utiliza imagens PNG e o script Prototype. Para adicionar alguns efeitos especiais pode ser necessário o script Scriptaculous. Tudo pode ser personalizado. Veja exemplos funcionado e faça o download.

CRIANDO CAMPO COM SCRIPT AUTO COMPLEMENTAR

posted under by dicasweb
Utilizando este script você poderá criar um campo de formulário onde será mostrada uma auto sugestões a medida que as palavras são digitadas. A solução é muito parecida com o serviço do Google chamado Google Suggest. Neste serviço em fase de testes o Google exibe sugestões de palavras a medida que você vai digitando cada letra de texto no campo de busca. No caso do Google você pode visualizar a quantidade de resultados de busca que a palavra sugerida possui.

Você pode baixar o script e saber mais sobre como utilizar aqui.

FRAMEWORK DA ADOBE PARA PROGRAMARAR EM AJAX

posted under by dicasweb

A Adobe desenvolveu um framework gratuito chamado SPRY para facilitar a vida de quem programa em javascript / ajax. Com ele se torna simples e rápido desenvolver diversos tipos de aplicativos web. Para sentir o poder da aplicação veja alguns exemplos dele funcionando:

Isto são apenas alguns exemplos de soluções desenvolvidas com o uso do SPRY. Para mais informações e visite e para download clique

CRIAR FORMULÁRIOS QUE TODOS ENTENDEM

posted under by dicasweb

O preenchimento de formulários na Internet pode ser uma tarefa complica para usuários iniciantes. Uma ajuda ou orientação no formulário pode elevar a qualidade dos formulários preenchidos pelos usuários do seu site. Uma foram de fazer isto é adicionando dicas do lado de cada campo de formulário. Estas dicas podem detalhar que tipo de informação e como a informação deve ser preenchida.

Exemplo: Se você pede para o visitante criar uma senha é importante orientar quais são as regras que você determina para criação desta senha. Você pode informar que a senha deve contar números e letras e ter no mínimo 6 caracteres.

Para ver um exemplo funcionando visite este endereço e clique na interrogação vermelha. Para copiar os códigos html, javascript e css que fazem parte deste exemplo clique. Para mais informações visite.

AJAX PARA UPLOAD DE ARQUIVOS

posted under by dicasweb

Aqui temos uma solução poderosa e elegante para fazer upload de arquivos dentro dos seus aplicativos web. A grande vantagem deste script é permitir o upload de diversos arquivos ao mesmo tempo com barra de progresso em cada um. Ele é compatível com todos os navegadores atuais.

Veja alguns recursos:

  • Selecione vários arquivos e envia ao mesmo tempo.
  • Filtro de tipos de arquivo
  • O filtro é aplicado antes mesmo do arquivo ser copiado para o servidor
  • Pode ser ativado limitações para o upload
  • Parte da solução utiliza Flash 8A melhor forma de entender é ver a solução funcionando. Para isto visite este endereço. Clique no botão “Browser Files” e selecione 2 ou mais arquivos que estiverem no seu computador. Você verá o nome dos arquivos e o tamanho dos mesmos exibidos no campo abaixo. Se você clicar no circulo vermelho que aparece do lado de cada arquivo poderá apagar o mesmo da lista. Se clicar em “Start Upload” inicia o processo de envio dos arquivos. Uma barra de progresso vai indicando a evolução do upload.

    O autor do FancyUpload fornece o javascript, html, css, flash (swf) e php necessários para download. Se possuir dificuldade com o inglês veja a versão traduzida.

top