Consegi 2010 - Offininas interessantes para webdesign

Consegi 2010  

18/08/2010
09:00/13:00

1 - Inkscape -  é um software livre para editoração eletrônica
  (Portugal: edição electrónica) de imagens e documentos vetoriais,
 com base numa versão mais avançada do antigo  sodipodi no qual
  teve origem. Trata-se assim de um fork considerado de sucesso.
 Multimídia e Meios Convergentes
 Oficina: Desenho Vetorial com Inkscape
 * Romulo Geraldino

----------------------------------------------------------
18/08/2010
16:00/18:00

2 - GIMP - (GNU Image Manipulation Program) é um programa de código aberto voltado principalmente
 para criação e edição de imagens raster, e em menor escala também para desenho vetorial.
 Ecossistema do Software Livre: Comunidades e Colaboração
 Oficina: Fazendo arte com o Gimp

----------------------------------------------------------
19/08/2010
09:00/12:00

3 - Liferay - Multimídia e Meios Convergentes
 Oficina: Liferay
 * Wesley Rocha
 * Ricardo Funke Ormieres
----------------------------------------------------------
19/08/2010
14:00/18:00

 4 - Blender - Programa para modelagem, animação, texturização, composição, renderização, edição de imagens, vídeo e criação de aplicações interativas em 3D.
 Multimídia e Meios Convergentes
 Oficina: Arte 3D com Blender
 * Ricardo Alexandre Batista Graça (ricolândia)

----------------------------------------------------------
20/08/2010
14:00/16

5 - ***HTML 5***

 – Mudanças na estrutura e semântica
 Oficina: HTML5 de acordo com o W3C O código terá mais informação
  útil para buscadores e leitores de tela.
 * Fabrício Soares
* Yasodara Maria Damo Córdova

Mais aqui: Oficinas http://papers.consegi.gov.br/pub/oficinas.php

Ferramenta Online para Edição de Imagem

Aviary disponibiliza uma ferramenta online para a criação acessível aos artistas de todos os gêneros, desde o design gráfico para edição de áudio.
Empresa privada sediada atualmente em Long Island, NY, com os membros da equipe em todo o mundo.
É proprietária do site Worth1000.com , uma comunidade de 500 mil talentosos artistas digitais que participam e surpreendem com suas criações em competições diárias.

Site: Aviary

Tutorial para criação de LayOut no Photoshop

Tutorial mostra como criar um layout limpo corporativo no Photoshop. O layout original foi criado por kuntiz do ThemeForest e foi montado por Ciursă Ionuţ baseia da Roménia. Ele tem usado o Photoshop há mais de quatro anos e gosta de compartilhar seus conhecimentos com os outros. Recentemente ele lançou um novo blog, PSDBURN, onde ele escreve tutoriais de Photoshop.

Veja todo o conteúdo, muito legal...

Aproveite PHP e MSQL com Hospedagem Grátis enquanto há vagas!

Pessoal esse aqui foi um ótimo achado, se você já passaou horas na web em busca de sites gratúitos que ofereção serviços  gratuitos de php e msql se suporta-se php 5 você acabe de encontrar!!!!

O site é muito maneiro e você vai descobrir porque agora é só fazer o cadastro e aproveitar para testar todos os seus códigos e projetos.
Muito loco mesmo é que quantidade se serviços que o webhost oferece:

1. 250 MB de armazenamento
2. 100 G de transferência
3. Usar seu próprio domínio
   
4. Se você não tem um domínio pode usar o da webhost grátis
   
5. Facilidades de transferência de arquivos via web, ftp e CPAINEL
6. Não tem poluição com publicidade e banners (sem propagandas)
   
7. Suporte PHP
8. Suporte Mysql
9. Emails com Suporte POP3 e SMTP acesso

Para usar e abusar destes serviços é só clicar no banner, eles oferecem migração para uma conta paga com mais espaço e também programas de afiliados paypal.

Para visualizar acesse o banner abaixo:

Se você sabe de algum outro serviço similar grátis ou tem dúvidas, pode comentar!!! Obrigado e espero que tenha gostado da dica!

Tutorial: Imagens Miniaturas e Resumo das Postagens do Blogger na Slidebar

Boa tarde, vocês devem ter visto aqui no dicadedica o slide bar com widgets de miniatura das postagens do blog e agora vou encinar como é fácil colocar este resumo das postagens na barra lateral com imagens que atualiza automáticamente junto com o rss (Feeds) do blogger.

1. Primeira coisa é acessar o a página:
   Recent Post with Thumbnails Widget
2. Onde tem o espaço para digitar o endereço, coloque o endereço do rss do seu
   blog o do dicadedica é : ( http://feeds.feedburner.com/blogspot/dicadedica) você pode tentar substituir o que está em vermelho pelo endereço do seu blog
   (http://endereço do seu blog/feeds/posts/default)
   
   
   
3. Agora abaixo você faz as modificações que deseijar na tela abaixo:
   (Tradução das configurações)
   Mostrar o canal? (sim / não / título) Exibir informações sobre o editor da alimentação (sim = mostrar o título e descrição; title = exibir título só, não = não mostra nada)
   sim título não
   
   Número de itens a serem exibidos. Digite o número de itens a serem exibidos (digite 0 para mostrar todos os dados disponíveis)
   
   Mostrar / Esconder item descrições? Quanto? (0 = sem descrições, 1 = mostrar uma descrição completa texto; n> 1 = display primeiros n caracteres de descrição; n =- 1 não link item título, basta exibir conteúdo item)
   Imagem
   Altura (px)
   Largura (px)
   Border Estilo
   Border Largura (px)
   Cor de borda
   
   Alvo links na nova janela? (n = "não, abrir links na mesma página", y = "sim, abrir links em uma nova janela", "xxxx" = abrir links em uma moldura chamada 'xxxx', 'pop' = utilizar uma função JavaScript popupfeed ( ) para abrir numa nova janela)
   Codificação de caracteres UTF-8
   (Importante se não marcar aparece um monte de interrogação ou quadrinhos)
   Necessário para muitos não-ocidentais língua páginas da web e também pode ajudar se você vir caracteres estranhos substituição cita na sua produção (ver páginas de ajuda para mais informações).
4. Depois de pre-visualizar é hora de inserir no blog, tem duas opções para isso:
   Olhe o lado superior direito da tela para localizar os botões!
   
   
   
   • Primeiro você deve clicar em [Generate Javascript] para gerar o código.
   • Depois de gerado clique em [Preview Feed] para visualizar as modificações
   • Agora clique em [ADD TO Blogger] para adicionar o widget automaticamente.
   • Ou você pode optar por copiar o script que aparece no quadro e adicionar como elemento de página manualmente (Para quem conhece um pouco mais de html)
     
5. Pronto agora é só visualizar deverá ficar assim:
   
   É claro que o script irá aderir ao css do seu blog ficando da cor do seu template e você tambem poderá trocar o título do widget no seu painel de controle, dúvidas é só comentar.
   
   Ass: Moises Dicadedica
   

Icone diante autor do comentário

Coloque icones ao lado do titulo do comentarista, siga os passos abaixo e você verá o resultado.

OBS: Antes de começarmos, sugiro que faça um back  do seu template.

Entre no HTML do seu blog e marque a caixinha EXPANDIR MODELOS DE WIDGETS.

Procure por:

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>


E substitua por esse:


<b:if cond='data:comment.authorUrl'>
<!-- comentário do autor -->
<img class='comenta-avatar' src='URL DA IMAGEM'/><b:if cond='data:comment.author == &quot;MI_NICK&quot;'>
<b:else/>
<!-- comentários dos visitantes -->
<img class='comenta-avatar' src='URL DA IMAGEM' />
</b:if>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<!-- comentários anônimos -->
<img class='comenta-avatar' src='URL DA IMAGEM'/>
<data:comment.author/>
</b:if>

Troque URL DA IMAGEM pelo o url da sua imagem seguindo o titulo de cada aba.

Sugestões de imagens:

Anônimo: http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp1pMWkLI/AAAAAAAAGmo/ggSsVIrdtms/s320/otros.png


Visitantes:
http://img92.imageshack.us/img92/1896/useruy7.png

Autor do blog: Aconselho que ponha o endereço do icone do site/blog.

Que tal inserir um formulário de contatos no seu Blog?

E ai pessoal, vou explicar a maneira mais simples de inserir um formulário de contatos totalmente editável, para que você possa inserir no seu blog sem complicação e sem precisar fazer cadastro em lugar algum!

Primeiramente você deve acessar o www.formulariopro.pog.com.br para adicionar alguns dados do seu blog.

Logo em seguida, você deverá clicar no botão "Criar Formulário >>", que irá gerar um código html onde você deverá copiar e colar dentro de uma nova postagem no seu blog, indicando o caminho da postagem para a pagina inicial do seu blog.

Exemplo:

Rodapé no blogger - 3 colunas

 

Colunas que nos sustentam!

Para colocar um rodapé ou footer no seu blog, basta seguir o tutorial abaixo e está pronto.

Atenção: Antes de comerçarmos, sugiro que salve uma cópia de seu template.

1º - Configurar o CSS:

1º - Faça login no Blogger, entre em "Layout" -> "Editar HTML".

2º - Procure (Ctrl + f) por:

/* Footer
----------------------------------------------- */
#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

3º - Substitua esse código por o código do link -  /rodapé.txt :


2º - Configurar HTML:

2º - Procure (Ctrl + f) por:

    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'>
    </div>

2º - Substitua esse código por :

<div id='rodape-wrapper'>
<div class='rodape1' style='float: left;'>
<b:section id='rodape1' preferred='yes'/>
</div>
<div class='rodape2' style='float: right;'>
<b:section id='rodape2' preferred='yes'/>
</div>
<div class='rodape3' style='float: right;'>
<b:section id='rodape3' preferred='yes'/>
</div>
<div style='clear:both;'/>
<div class='rodape4'>
<b:section id='rodape4' preferred='yes'/>
</div>
</div> <!-- end rodape-wrapper -->

3º - Visualize para ver se tudo ocorreu corretamente... Salve!

Papel de paredes Para Organizar a Area de Trabalho

Depois de terminar o desingner do blog, e verificar que a maioria dos usuários também gostaram dele eu resolvi tranformar este designer em um papel de paredes, acho que por ele ser em tons de azul ele é perfeito para area de trabalho e pensei, será que a galera usaria isso como papél de paredes, porque já existem milhões e de outros protetores de telas maravilhosos e o que eu poderia fazer para deixalo mais atraente?

Primeiro pensei em colocar um calendário, mais vi que isso é cafona e desnecessário então resolvir fazer o papel de paredes para ajudar a organizar os arquivos soltos da area de trabalho e separei-os da seguinte forma:

1 - Meu Computador:

Islide para colocar os ícones referente ao sitema do computador como Lixeira, Locais de Rede e Meu computador.

2 - Meus Projetos:

Local para organizar os ícones de arquivos e pastas referentes a Projetos anteriores e que precisam ser eventualmente acessados.

3 - Em Uso:

Quadro para exibir os ícones dos últimos arquivos usados bem como outros icones que necessitam ser rapidamente visualizados.

4 - Programa:

Para colocar os programas que você costuma a utilizar com maior frequencia como por exemplo os programas do office 2007 ou o photoshop na imagem eu coloquei outros exemplos.

É isso mesmo, você tem a opção de baixar apenas o fundo sem as islides de organização.

Para baixar o papel de paredes dicadedica com as divisórias que ajudam a organizar o desktop clique na imagem abaixo:

Para baixar o papel de paredes dicadedica sem divisórias que ajudam a organizar o desktop clique na imagem abaixo:

Quando as imagens abrir é só clicar com o auxiliar do mouse e procurar por "Definir como plano de fundo" ou salvar na pasta WINDOWS e procurar por ela em propriedades de vídeo em papel de paredes.


Estes papeis de paredes acima são para widowns, MC ou Linux de resoluções em 124x768 mais tambem são compatíveis para outras resoluções desdeque não esteja em modo widnscreem, caso isto aconteça use o modo centralizado ou lado a lado para que não haja distorção na imagem.

Obrigado, qualquer dúvida é só comentar vlw, espero que tenham gostado.

Photoshop Styles, Patterns, Gradientes e Brushes Grátis

Tenho que falar que este site é realmente um grande achado, procurando sobre texturas e efeitos web 2.0 para incrementar alguns trabalhos de designer encontrei um site que tinha simplesmente o que eu estava procurando o nome do site é Photoshop Brushes e fiz uma listinha das coisas mais legais encontradas lá, Confira!






Lista de Brushes:


Lista de Patterns:



Lista de Sharpes:



Lista de Gradientes:



Os arquivos estão hospedados no próprio Photoshop Brushes e para fazer DOWNLOAD você deve clicar em uma desta imagens acima e posteriormente em Download que está na parte inferior esquerdo do site. Veja tambem tutoriais para e outros itens para baixar, os arquivos estão em .zip ou .rar e você vai precisar ter instalado o programa winrar para abrir.

Baixar o Winrar.exe

Web 2.0 - Descubra a Paleta de Cores dos Sites

Eu Gosto de Suas Cores, Como faço para saber qual o código das cores utilizadas em um site? - O nome já diz tudo, (I Like Your Colors) é um site para descobrir a paleta de cores de qualquer site ou blog que você vê na web essa dica é simples porém genial, nós webdesigner (ou eu pelomenos) quando vemos uma harmonia de cores em um site queremos logo ver a paleta de cores para enxergar os códigos das cores por traz da beleza que esta harmonia nos trás e para mim essa ferramenta tem sido muito utilizada, de acordo com a teoria das cores, sendo bem utilizadas elas tem o poder de atração, tranqüilidade, causar fome, passar confiança entre outros efeitos e para chegarmos a este nível, estudar outras paletas de cores é fundamental. Devemos criar nossas próprias tabela de cores de acordo com os objetivos que desejamos alcançar com o nosso projeto, seja para colocar em um blog ou site é sempre bom termos em mente o publico alvo. Dica simples porém genial confira e faça sua própria combinação baseando-se na sua experiência na utilização do site web 2.0

I Like Your Colors

e Quase ia me esquecendo, para usar o site você deve acessar e colar o endereço do site a ser pesquisado no campo [Get colors] no final da página.


Link Direto
Bons Designers pra você,
até a próxima DicaDeDica!