Apostila Curso Fireworks para Web

http://www.castordownloads.com/download-curso-fireworks-para-web-2013-65895.html

Crie Galerias de Imagens utilizando HTML5 e JS sem precisar mexer em códigos!

Se você estava procurando uma solução inteligente e fácil para criar galerias de fotos e imagens compatível com todos os navegadores modernos e ainda com Tablets e Smartphones não precisa mais. Conheça o Juicebox, um software multiplataforma para criação de slideshows incríveis e repletos de efeitos.

Juicebox é uma solução completa para a criação de slides em HTML5 e JavaScript que pode ser instalado em qualquer computador que possua o Adobe Air. Não importa se você usa Linux, Windows ou Mac, o software irá rodar sem problemas.

O melhor de tudo é que você não precisa entender nada de HTML5, CSS ou JS, o Juicebox faz todo o trabalho pesado para você. Basta escolher as imagens, exportar e utilizar onde quiser. Você ainda pode escolher entre três versões do programa, a gratuita e duas pagas.

A versão grátis não possui todos os recursos disponíveis, mesmo assim consegue entregar uma galeria completa e com efeitos de primeira, o mais importante é que o seu slider irá rodar em navegadores e dispositivos móveis, como o iPhone, iPad e celulares Android.

Mesmo que não utilize o Juicebox para criar galerias você poderá estudar o código gerado por ele para entender mais sobre as tecnologias utilizadas. Baixe, experimente e aprenda!

Planejamento defende ou embasa a criação?

Bom, existem os dois momentos da agência, onde podemos dividir em “ideal e diário”. O ideal, é quando o planejamento embasa a criação, ou seja, o planejamento analisa o brief, faz as suas pesquisas em diversas fontes como ferramentas de pesquisa (Marplan, ComScore, Ibope, Hitwise), analisa dados do cliente, vai para a rua conversar com as pessoas; depois esse material serve de embasamento estratégico onde o planejamento vai traçar o pensamento que vai ajudar a marca a conquistar seu objetivo.

Após esse momento, o planejamento, passa o caminho estratégico para a criação fazer, como dizemos na agência, “pirar”. A criação precisa de um embasamento para não sair criando qualquer coisa, ela precisa de um caminho para que a criação seja mais efetiva, que conquiste o objetivo de marketing do cliente.

Esse processo acima é o que chamamos de ideal, pois é dessa forma que a “roda gira” e que seria o trabalho do planejamento aliado à criação, aliás, quando os times se unem e se entrosam, os resultados são sensacionais! O Brasil é uma das maiores potênciais mundiais na propaganda. E não é por acaso, somos, naturalmente, pessoas criativas e isso reflete na comunicação. Planejamento também precisa exercer a criatividade e a criação seu lado estratégico com foco no negócio do cliente.

Mas infelizmente, o que temos visto ultimamente não é o ideal e sim o diário, ou seja, a criação cria e o planejamento defende o que foi criado. É o usual, é diário, é por falta de tempo, é por ter muito job na agência, é por que a conta não é estratégica, por que a mesma equipe atende 4 contas ao mesmo tempo e uma sempre é o “patinho feio”, enfim, justificativas são várias, mas todas caminham para o mesmo ponto. Estão erradas!

Quando o planejamento defende a criação, e não a embasa, parece quase que uma desculpa sobre algo que foi feito. O cliente, as vezes, nem pediu o que foi feito. Ok, a criação lê o brief, entende, mas as visões frente ao planejamento são, obviamente, diferentes. Aliás, essas visões se complementam no trabalho final. O cliente as vezes precisa apenas de uma ação no Facebook e a agência lhe apresenta um hotsite com uma promoção por que entende que aquilo é bom para ele, porém, se o planejamento tivesse visto antes, poderia ver que o problema do cliente é o relacionamento dos consumidores com a marca e que sim, o Facebook, seria a melhor opção.

Planejamento e criação devem sempre trabalhar juntos. Lado a lado, trocando experiências, visões e conceitos. Devem fazer parte de toda a construção do planejamento essas conversas, aliás, o planejamento tem que conversar com todas as áreas, do cliente, ao consumidor final, passando por áreas da agência, mas as coisas devem ter uma metodologia, um cronograma. Sair (criação) fazendo para depois (planejamento) tentar defender o que foi feito, nem sempre, dá certo.

Site para cliente

Desenvolvimento do site da corretora de imóveis Helaine Miranda da Imobiliária Abyara, usando plataforma  Wordpress.

Novidades do Adobe Fireworks CS6

Para você web designer que ainda não testou a versão 6 do Fireworks, hoje iremos analisar a fundo esse incrível software, com sua versão mais popular e recente da Creative Adobe, o Fireworks está com ferramentas novas que irão ajudar você a criar rapidamente excelentes designs para sites e aplicativos para dispositivos móveis.

Dispositivos móveis é a palavra de foco que podemos utilizar para definir a suite CS6, desta vez a Adobe investiu forme no desenvolvimento mobile, ajustando seus softwares com extensões e plataformas compatíveis para esse tipo de projeto.

Muitos designers ao desenvolver seus projetos sofrem com programas medíocres e por isso perdem tempo com algo que deveria ser simplificado. Quem já trabalha com o Adobe Fireworks a tempos, não sofre com esse tipo de problema, podendo focar seus esforços apenas nas ideias.

Quais são as novidades do Adobe Fireworks Cs6?

Slide Show - É Só Copiar e Colar !

Pessoal, um modelinho grátis de slide show para colocar nos seus sites! Clique no slide e abrirá o site para gerar o código. Tem vários tamanhos e opções.

Mais uma barbadinha do blog da Ana! ;D

www.clickgratis.com.br

Criar um Slide Show Usando Fireworks

Abra o Fireworks CS5, peça um novo documento 1024x768, depois vá em Commands>Create Slide Show. Você verá esta tela:

Em seguida clique nesta opção e abrirá a seguinte janela:

Preencha as solicitações de pastas, e aproveite! ;D

Galerias de Imagens jQuery

JQuery Galerias De Imagens E Sliders - Best Of

Galerias de imagens jQuery e sliders são muito comuns em sites de portfólio e também são úteis para qualquer outro tipo de site para exibição de imagens e fotos. Além disso, fornecer uma boa experiência do usuário e fazer a visualização de imagens mais agradáveis ​​e intuitiva em seu site.Com o advento de frameworks JavaScript poderosas como jQuery, Prototype, Mootools, etc, a qualidade das galerias de imagens baseados em JavaScript e slideshows melhoraram dramaticamente.

Hoje nós preparamos para você uma boa lista de melhores os controles deslizantes de imagem e galerias de plugins jQuery que pode fornecer com os recursos que você precisa para começar uma galeria ou um slider no seu site.

TN3 Galeria

Demonstração | Download de
TN3 Gallery é um completo galeria de imagens baseado em HTML customizável com jQuery slideshow , transição, a esfola, CSS e opções múltiplas de álbuns. Compatível com todos os computadores desktop moderno e navegadores móveis. Versões gratuitas e premium disponíveis.

Galeria Lightbox Sem PHP

! DICA PARA VISUALIZAÇÃO DAS IMAGENS DESTE POST: CLIQUE NAS IMAGENS PARA VER MAIOR !

Você provavelmente já viu o efeito Lightbox no trabalho durante as suas viagens na web, embora você pode não ter sabido que era chamado Lightbox. Essencialmente, o visitante clica em uma miniatura da galeria de imagens, e uma versão maior aparece no topo da página, escurendo fora o conteúdo da página por trás dele. Este efeito amplamente utilizado faz uso de jQuery e foi originalmente de autoria de Leandro Vieira Pinho. O efeito Lightbox real será desencadeada por hyperlinks que estabelecemos em nossa página. Eles são muito úteis, e neste tutorial, você vai aprender a construir um em Dreamweaver !  

Passo 1

Primeiro, certifique-se e baixar os arquivos do projeto para este tutorial aqui Descompacte o arquivo e armazene os arquivos do projeto em um local que você vai se lembrar, como o seu desktop. Dentro da pasta lightbox você vai encontrar 4 pastas: css, imagens do site, images e scripts. Elas contêm todos os componentes que você precisa.

Passo 2

Agora, vá em frente e lance no Dreamweaver escolha site>novo site.

Passo 3

Em seguida, abra a página LightBox Gallery.html no seu Dreamweaver.

Esta exibirá o código que contém os links para os arquivos JavaScript externo e CSS que nossa página terá, também, algumas funcionalidades adicionais. Certifique-se de salvar o arquivo para a pasta que você definiu como um site acima. 

Passo 4

Agora estamos prontos para ver a estrutura da página, ou seja, a estrutura que vai segurar nossas miniaturas. Vá em frente e cole mais linhas iguais a estas para aumentar a sua galeria.

Passo 5

Depois é só ir na pasta de images e trocar as miniaturas (src) e as fotos grandes (links).

Passo 6

Com as nossas miniaturas e fotos grande  no lugar, agora é hora de acrescentar as imagens da pasta imagens do site e ver o Lightbox acontecendo. Onde diz LAYOUT DO SITE, vc vai inserir o cabeçalho e abaixo onde está vazio, vc vai inserir o rodapé.

Deve ficar assim:

Passo 7

Logo em seguida vamos em Modify>Page Properties> Background Color e escolheremos a cor preta para combinar com os outros elementos da página.

O resultado no navegador deve ser este:

Quero dedicar este post ao meu aluno André.

André, este post é pra você!

Criando uma Galeria de Imagens usando Dreamweaver e Fireworks (simultaneamente)

Você sabia que é possível criar galerias de fotos para Web simplesmente com alguns cliques? Não!? Pois esse tutorial irá ensinar como fazer isso usando o Dreamweaver MX, software de edição de páginas desenvolvido pela Adobe. Importante: é preciso ter o Fireworks instalado para que este comando funcione corretamente.

1. Crie um novo documento e no menu selecionar Arquivo -> Salvar. Renomeie o arquivo como index.htm.

2. Agora no menu Comandos escolher a opção 'Criar álbum de fotografias na Web'.

3. A seguinte janela será aberta:

Será apresentada a função de cada opção acima. Para facilitar o aprendizado elas serão identificadas por letras ao lado:

A - Nesta opção é definido como será o título do álbum e este título ficará no topo da página que será criada. Ex: Fotos da Família.

B - Informações de sub-cabeçalho: uma pequena descrição do "tema" das fotos. Ex: Viagem ao Rio de Janeiro.

C - Neste campo podem ser inseridas mais informações sobre as fotos. Ex: Apenas as melhores fotos foram selecionadas.

D - No campo 'Pasta das imagens de origem' pode-se clicar no botão 'Procurar' e definir a pasta na qual as fotos estão armazenadas.

E - Local onde ficarão todos os arquivos usados. É recomendável que seja em alguma sub-pasta da pasta que contém o arquivo "index.htm" criado anteriormente.

F - Quando a galeria for criada, as fotos serão exibidas em um tamanho pequeno (miniaturas) em uma tabela e ao serem clicadas ficarão no tamanho original. Neste campo é definido qual o tamanho dessas miniaturas e vale lembrar que as medidas são sempre em pixels. Na caixa ao lado seleciona-se o nome do arquivo a ser exibido ou não abaixo de cada miniatura; em alguns casos os arquivos têm nomes como 210802.jpg, então é recomendável não selecionar essa opção.

G - É definido o número de colunas da tabela de miniaturas: cinco é um tamanho apropriado.

H - Agora é determinado qual o formato de arquivo as miniaturas terão. Para ganhar velocidade é recomendado escolher a opção GIF - mas se o objetivo é qualidade, inclusive nas miniaturas, escolha JPEG.

I - Como as fotos serão copiadas para uma nova pasta, deverá ser definido qual o formato usado no arquivo em seu tamanho natural: o ideal é escolher a opção JPEG - Melhor qualidade.

J - Essa opção é algo extremamente útil: ela criará opções para navegar entre as fotos em todas as páginas, portanto é recomendado deixá-la selecionada.


Finalmente clicar em OK: o Fireworks e o trabalho serão iniciados. Esse processo pode demorar alguns minutos de acordo com a velocidade do computador usado.

Depois de finalizado o Dreamweaver será maximizado novamente e avisará que o álbum foi criado com sucesso. Agora o arquivo deverá ser salvo e visualizado no navegador preferido. O resultado será esse:


(essa imagem usada como exemplo foi tirada do arquivo de ajuda do Dreamweaver)

É nítido que o computador fará quase todo o trabalho. Pronto!