Archive for the Web2.0 Category

Crie formulários para sites e blogs – serviço gratuito

Posted in AJAX, Blogosfera, Dicas, editor de imagens gratuito, Efeitos Digitais, ferramentas online, Geradores, HTML, JavaScript, Programação, serviços online, Tecnologia, Utilitários, Web2.0, Webdesign, Widgets with tags , , , , , , , , , , , , , , , on 18, julho 2008 by deianaweb

Para os que não possuem muito conhecimento em programação de formulários ou para os que desejam ganhar tempo em seus projetos web, encontramos 2 serviços bem úteis, que fornecem ferramentas profissionais capazes de criar formulários para serem utilizados em sites e blogs gratuitamente.

FormFacil (site em Português BR): para usar o serviço é necessário cadastro, para isso, entre no site e clique em Cadastre-se, aparecerá um popup para inserção dos seus dados. Ao logar-se, você poderá criar quantos formulários desejar, configurando-os de acordo com as instruções, criando campos específicos, de acordo com sua necessidade, podendo deixar seu formulário público ou não, depois, basta copiar o código gerado para seu site/blog, para que seus visitantes possam entrar em contato com você. Também é possível ver relatórios, exportar os dados recebidos para seu computador, podendo abrí-los no Excel, em formato CSV. O interessante é que o mesmo desenvolvedor do site FormFacil também criou um outro site chamado ImagemFacil, que oferece um serviço para edição de imagens e, quem fizer seu cadastro em um dos serviços, poderá utilizar o mesmo login e senha para os dois sites, sem a necessidade de cadastrar-se duas vezes. O ImagemFacil oferece diversos recursos para edição de imagens online, inclusive bordas decorativas para fotos digitais, emblemas de times de futebol e vários efeitos de filtros.

Kontactr (site em Inglês): Com ele é possível ter em seu site/blog um formulário de contato estilo Web2.0, muito simples e fácil de usar.  Para utilizar o serviço é necessário cadastro: clique aqui. Após o cadastro você receberá um email para ativar sua conta. Ao logar-se, você será direcionado à uma página onde poderá copiar e colar os códigos disponíveis. Existem códigos em HTML e AJAX , que tanto podem ficar fixos em uma página, ou em forma dos novos popups feitos em AJAX. Os formulários possuem a ferramenta anti-spam conhecida com CAPTCHA(não sabe o que é CAPTCHA, clique aqui). A versão de códigos HTML disponibilizados para botões, são ótimos para blogs no WordPress, que não aceitam JavaScript), já para os que aceitam, os botões com código AJAX dão muito mais modernidade e funcionalidade ao seu site ou blog. Veja nosso formulário de contato logo no início do menu direito, localizado abaixo da busca do nosso blog. Muito bom!

Anúncios

Sistema de votação e comentários para sites e blogs

Posted in Dicas, ferramentas online, Interatividade, JavaScript, Programação, Web2.0, Webdesign, Widgets with tags , , , , , , , , , , , on 17, junho 2008 by blogcacalinks

Na era da comunicação virtual, onde sites e blogs são verdadeiros canais de informação, nada mais importante que saber a opinião de seus leitores, criando interatividade e obtendo o retorno através dessas opiniões. Pensando nisso, o site JS-Kit, em inglês, oferece 2 ótimos widgets em JavaScript, com códigos pequenos, que podem ser customizados e inseridos no código HTML do seu site ou blog, mesmo para aqueles que possuam conhecimento médio de programação.

O primeiro widget chamado de Ratings, permite incluir um sistema de votação em sites e blogs, com o qual você poderá ter em cada página ou mesmo em posts, aquelas 5 estrelinhas para que o visitante possa clicar e votar, dando notas de 1 a 5. Para usuários do Blogger ou do servidor WordPress, eles oferecem códigos específicos que podem ser encontrados facilmente no link chamado FAQ e, em Customization você poderá fazer a personalização de cor ou tipos. O site disponibiliza 2 versões, conforme as imagens abaixo:

Veja um exemplo do sistema de votação funcionando em cada post do nosso outro blog (DragontrixGames) clicando aqui

O segundo widget é o Comments que permite incluir um sistema de comentários para sites, já que os blogs já possuem essa ferramenta normalmente. Com ele será possível obter a opinião dos leitores do seu site em artigos ou páginas específicas, além de ser um ótimo canal para pedido de informações.

Para ter acesso aos serviços não é preciso registrar-se no site JS-Kit. Os dois widgets são customizáveis e fáceis de instalar, sendo apenas necessário copiar o código e colar no local indicado. Para ver os códigos de cada ferramenta, entre nas páginas indicadas e clique no link que diz: “Grab it for your site”, conforme mostra a figura abaixo:

Obs: Os códigos dos widgets são pequenos porque são feitos a partir de uma Função JavaScript (.js) externa, ou seja, ela é “chamada” através de um endereço onde a função foi hospedada e não tem como ser alterada ou copiada por terceiros. Com isso o site JS-Kit preserva os direitos autorais. De certa forma a inclusão do código pequeno torna-se fácil para os que não estão familiarizados com programação e, por outro lado, é bom ficar sempre de olho para ver se o JS-Kit não mudou o endereço da função JavaScript que faz com que seu widget funcione ou deixou de oferecer o serviço, o que na minha opinião é pouco provável. Mas com certeza é uma ferramenta que irá ajudar muito a otimizar seu site ou blog.

Como o site é em inglês, disponibilizamos os links das páginas já traduzidas para facilitar:

Ratings – versão traduzida
Comments – versão traduzida

Tutorial: Layout Estilizado com texto 3D usando Photoshop e Ilustrator

Posted in Efeitos Digitais, Ilustrator, Photoshop, Tutoriais, Web2.0, Webdesign with tags , , , , , on 25, maio 2008 by deianaweb


O site PSDTUTS publicou um tutorial (em inglês), que cria um layout estilizado com texto em 3D, extremamente moderno e bonito, que pode ajudar muito aos webdesigners em seus projetos de criação. O tutorial requer um bom conhecimento de Photoshop e Ilustrator, pois combina os 2 softwares para resultar no efeito acima. Mesmo que você não saiba inglês, o tutorial traz o passo-a-passo com as ilustrações de cada etapa.

Para facilitar estamos disponibilizando 2 links, abaixo, um com a versão original do tutorial e, outro, com a versão traduzida para o português:

Design Soft Stylized 3D Type:

Livro gratuito em PDF: “Jornalismo 2.0 – “Como sobreviver e prosperar”

Posted in Blogosfera, Comunicação, Cultura, Dicas, Livros, PDF, Web2.0 with tags , , , , , , , , , , , , , , , on 21, maio 2008 by deianaweb

Quer saber mais sobre Jornalismo Digital? Temos uma ótima dica, que é o livro “Jornalismo 2.0 – Como sobreviver e prosperar” – Um guia de cultura digital na era da informação”, de autoria de Mark Briggs. Este livro é um projeto do Instituto de Jornalismo Interativo (J-Lab) dos Estados Unidos, cuja distribuição é gratuita na versão PDF. Embora o livro seja destinado a um público leigo no assunto, oferece várias dicas legais para quem tem um blog ou para quem pretende iniciar um.

Esta versão para download está traduzida para o português e trata diversos assuntos relacionados ao jornalismo digital de uma maneira simples e agradável.

Sumário do livro:

  • Introdução – Um mar tranqüilo não faz um bom marinheiro
  • Capítulo 1 – FTP, MB, RSS, oh!!!!
  • Capítulo 2 – Web 2.0
  • Capítulo 3 – Ferramentas e Brinquedos
  • Capítulo 4 – Novos métodos de Reportagem
  • Capítulo 5 – Como fazer um Blog
  • Capítulo 6 – Como fazer reportagens para a Web
  • Capítulo 7 – Áudio digital e Podcasting
  • Capítulo 8 – Tirando e Administrando Fotos Digitais
  • Capítulo 9 – Produzindo Vídeos para Notícias de Atualidade e Variedades
  • Capítulo 10 – Edição Básica de Vídeo
  • Capítulo 11 – Escrevendo Roteiros, fazendo Gravações em Off
  • Epílogo – Colocando tudo junto
  • Apêndice – Roteiro do filme sobre uma família sobrevivente
    do furacão Katrina

Título: Jornalismo 2.0 – Como sobreviver e prosperar – Um guia de cultura digital na era da informação
Autor: Mark Briggs
Tema: Comunicação na Internet
Nº de páginas: 134
Formato: PDF
Idioma: traduzido para Português
Tamanho: 3,15 Mb
Download:
clique aqui e depois localize o termo “Download File”


Fonte: Blog Manias de Geek

Dedico essa dica, na contribuição com o Movimento Blog Voluntário.

Serviço online que extrai cores hexadecimais de fotos

Posted in CSS, Fireworks, Geradores, Photoshop, Utilitários, Web2.0, Webdesign with tags , , , , on 12, maio 2008 by deianaweb

Descobrimos uma ferramenta muito útil, online e gratuita, que poderá ajudá-lo na criação de projetos web. A ferramenta Palette Generator permite que você extraia cores, em hexadecimal, de fotos a partir do seu computador, do Flickr, do Photobucket, ou de uma URL. Após escolher a foto desejada, faça o upload e clique em “Create”. Em poucos segundos será gerada sua paleta de cores extraída da foto, com o respectivo código hexadecimal e o nome da cor abaixo. Além disso, existem outras duas possibilidades: 1) fazer o download do “swatch” que é compatível com o Photoshop e outros aplicativos. 2) Copiar o código CSS das cores para utilizar em seus projetos de webdesign.

Confira um exemplo da paleta gerada a partir de uma foto:

Para utilizar o serviço não é necessário cadastro, porém, se você desejar ter mais comodidade e ter armazenado seus últimos acessos ao site, sem a necessidade de refazer o upload de fotos e participar do fórum, crie sua conta clicando aqui.

4 pacotes de brushes gratuitos para Photoshop – estilo Floral (+ Tutorial de Instalação)

Posted in Brushes, Dicas, Photoshop, Tutoriais, Web2.0, Webdesign with tags , , , , , , , , , , , on 11, maio 2008 by deianaweb

Encontramos 4 ótimos pacotes de brushes gratuitos para Photoshop no estilo Floral, de autoria do artista Coolwing. Para baixar os pacotes, entre nos links indicados abaixo que, o redirecionará para a página do autor dentro da comunidade DeviantART e clique em download (conforme a figura abaixo):

Baixe agora os pacotes individualmente:

Não sabe como instalar os pacotes de brushes dentro do seu programa Photoshop? Então vamos te ensinar. Siga os passos do tutorial abaixo:

Tutorial para instalação básica de brushes (pincéis) para Photoshop:

Criado por: Andréia (Blog Caça-Links)
Data de criação: 11/05/2008 

IMPORTANTE: Deixe seu Photoshop fechado enquanto instala os arquivos de brushes. Só no passo 04 desse tutorial é que você deverá abrir o programa.

1) Faça o download do arquivo para uma pasta onde seja fácil localizá-lo depois (exemplo: pasta Meus Documentos, pasta Arquivos Recebidos, Desktop ou Área de Trabalho).

2) O arquivo virá zipado, ou seja, compactado. Assim é necessário descompactá-lo antes em um programa tipo Winzip, Filzip, etc. Para isso, localize o arquivo baixado, clique em cima com o botão direito do mouse e localize o nome do seu programa descompactador. Clique no nome do programa (ex: Filzip), e logo aparecerão algumas opções, escolha a opção “Extrair para C:/…”. Após isso, no mesmo local onde o arquivo zipado foi salvo, você verá que irá aparecer uma pastinha amarela com o nome do arquivo. Clique nessa pastinha e lá você encontrará o arquivo necessário para a instalação do brush dentro do Photoshop. Localize o arquivo pelo ícone abaixo:

ATENÇÃO: Como o autor desses brushes é Chinês, o nome do arquivo.ABR depois de descompactado está com um nome desconfigurado. Assim, para ficar mais fácil, renomeie o arquivo clicando com o botão direito do mouse sobre ele e coloque o nome que quiser, no meu caso, escolhi os nomes Floral 1, Floral 2, Floral 3, para facilitar a localização dentro do Photoshop depois.

3) Clique em cima do arquivo identificado com o ícone acima (arquivo com extensão .ABR), copie (Ctrl+C). Em seu PC, clique com o botão direito do mouse em cima de Iniciar, escolha Explorar na lista, localize as pastas na seguinte ordem: Arquivo de Programas que fica dentro do Disco local (C:), Adobe, Photoshop CS (no meu caso uso a versão CS), Predefinições, e por fim, localize a pasta Pincéis. Nessa última pasta, cole(Ctrl+V) o arquivo copiado. Feche a pasta.

Endereço para instalação do brush:
C:\Arquivos de programas\Adobe\Photoshop CS\Predefinições\Pincéis

4) Abra o Photoshop, clique em novo documento ou então abra o documento no qual deseja aplicar o brushe.

5) Localize e clique na Ferramenta Pincél ou clique no atalho (B) (veja a figura abaixo):

6) A seguir vá até o menu superior do Photoshop e clique na seta 1 para abrir o seletor de Predefinições do Pincél. Clique na seta 2 para abrir a lista de brushes. Por fim, localize o brushe salvo dentro da pasta Pincéis e clique nele, conforme a figura abaixo:

7) Será perguntado se você deseja substituir os pincéis atuais por pincéis de floral1.abr (ou o nome do arquivo escolhido)? Clique em sim.

8 ) A seguir aparecerá uma lista com as miniaturas dos brushes carregados. Aí é só escolher o brushe de sua preferência, ajustar o diâmetro do pincel e utilizá-lo em seu trabalho.

Veja um exemplo da utilização dos brushes baixados:


Esse pequeno tutorial faz parte da nossa contribuição para o Movimento Blog Voluntário.

Site que oferece biblioteca JavaScript com dezenas de códigos gratuitos

Posted in AJAX, JavaScript, Web2.0, Webdesign with tags , , , , , , , , , , , , , , , , , , , , , , , , , , , , , on 11, maio 2008 by deianaweb

O site JavaScript Kit, em inglês, oferece uma ótima biblioteca de scripts gratuitos para uso em sites pessoais ou comerciais, porém, você não poderá redistribuir os scripts, colocando-os em outro arquivo script ou CD-ROM, por exemplo. Para ter acesso aos scripts, entre no site, escolha uma das categorias e logo verá a descrição do efeito desejado, com um exemplo prático e as instruções para instalação do código em seu site.

Entre as categorias de scripts temos:

Ajax scripts, Combo Boxes, Content Management scripts, Email and validation, Form and form Validation, Images and music effects, Image slideshows & galleries, JavaScript Games, JavaScript Search Engines, JavaScript clocks / calendars / and timers, Links, Math related, Menu and redirection, Messages, Mouse Cursor effects, Password protecting, Random Stuff, Scrollers, Special effects with background and document, Status Bar effects, Text effects, User System (browser type, screen size, modified date, IP etc), Using cookies to store information about users, Windows / remotes / frames, e outros.

    ATENÇÃO: Mesmo o site estando no idioma Inglês, é fácil entender a instalação dos scripts já que os mesmos também vêem acompanhados de um exemplo prático, porém, para facilitar, disponibilizaremos uma versão já traduzida para que ajude aos visitantes que tiverem dificuldade em entender os textos:

    Se você é autor de um script JavaScript e deseja enviá-lo para publicação no site JavaScript Kit, basta entrar no link Submit Your JavaScript, respeitando as seguintes regras:

    • O script deve ser completamente livre para uso (sem cordas em anexo).
    • Por favor não envie “o seu primeiro script.” O site JavaScript Kit emprega uma estrita norma de incluir apenas scripts que são extremamente úteis e cross browser compatível (ou downgradeable).
    • Você deve ser o autor original do script.