Slide show em Flash na sua página

Nem todo blogueiro deseja ter um painel de imagem rotativa no topo do blog, outros sim. Antes de inserir este tipo de conteúdo no seu blog, deve ser pensado na quantidade de informações que se encontra em seu blog. Em outras palavras no desempenho. Veja a dica para inserir um leve painel de imagens em flash em sua página e também um tutorial [em inglês] com JQuery na sua página.

Acesse o site SlideShow Maker pelo Frobee. Clique em Add Photo e aguarde carregar.

Na próxima tela, você pode configurar o tipo de transição de imagens (Transition), os segundos que a imagem ficará visível e ainda escolher se na transição, além dos tipos de transação de imagens, pode inserir o efeito Fade In entre as imagens (este efeito vai revelando a imagem a próxima imagem e apagando a atual suavemente).

Tipo de transação em barra vertical

Também é possível inserir texto nas imagens ou legendas clicando em 'Edit Caption' com a imagem selecionada. O resultado final é uma apresentação de imagem proficional. Você poderá

Exemplo de configuração básica

Há um botão chamado 'Settings' (Configurações) onde você pode configurar o tamanho da tela com as imagens, a cor da fonte da legenda e do plano de fundo do painel, ou seja, se você tem uma página com cor estática (tudo azul, vermelho, laranja ou qualquer outra) ele aceita sem erros, e o melhor, ele aceita cores em HTML, por exemplo #FFFFFF, ótimo para quem desenvolve sites. Caso queira salvar o projeto, clique no botão 'Save' na parte esquerda da tela.

Imagem com legenda

Tudo o que o site faz para identificar o serviço gratuito é inserir no fim de tudo, um ícone do site que abre em uma nova janela.

Por fim, ele apresenta uma tela para você salvar seu projeto. Como podemos ver ele pede para você fazer Dowload de um arquivo em formato ZIP, que é onde tudo se encontra: O flash com as imagens. Neste arquivo estão o flash, uma página HTML para exemplo e um arquivo para você ler, em inglês. Basta você hospedar o arquivo e inserir em seu site ou blog.

Página final do site

Caso você seja um blogueiro ou programador mais experiente, pode visitar o tutorial Inner Fade [com uso do JQuery] para transição de imagens e texto com links na sua página.

Continue lendo

Boas imagens na página faz bem?

Uma pergunta que eu mesmo me fiz hoje foi esta "Sei muito de um programa de imagem e meu blog é bonitão pois tem muitas imagens, será que é bom mesmo?" Bem, esta pergunta é interessante por vários motivos e cabe em todos os sentidos, tanto na parte de estática, do uso das cores, da forma como agrada os leitores e etc.

O primeiro passo é entender um pouco que nem todos gostam de ler um blog onde o post parece um carnaval, no começo vai bem quando é apenas umas linhas, depois da 5 linha a visão começa a ter problemas, é como entrar num blog com fundo preto e apenas 3 cores de letras, e depois você decide fazer uma busca Google [pois tem fundo branco] sua visão fica estranha. Alias, falando em cores, vocês sabiam que é melhor usar cores escuras nas páginas para internet quando o usuário está usando um monitor de tubo? Bem, isso é meio que passado pois atualmente a grande maioria do pessoal usa os monitores LCD e por si só eles ja economizam mais de 30% da energia gasta nos outros monitores, então essa de cor nos novos monitores nem é tão visível, mas funciona sempre.

Continue lendo

Contagem regresiva em flash

Você deve se lembrar de um artigo que escrevemos sobre contagem regresiva aqui no Arruma Blog anteriormente. Hexiste vários códigos, de várias linguagens diferentes para você usar.
Hoje, falarei sobre uma com um visual mais bonito e simples e personalisável para você usar em seu blog ou site.

Para quem entende bem de Flash, poderá fazer desta dica uma porta a mais para desenvolvimento e se você não compreende muito o Arruma Blog lhe da tudo explicado.

Você pode querer personalizar o modelo ja pronto, então você pode ir ao site e fazer o Dawload do aplicativo no formato .fla e .swf clicando aqui, depois editar usando algum software para edição de flash e inseri-lo em seu servidor para que ele fique assim:

Faltam:

Para o Natal de 2011

Para personaliza-lo de forma comum (ele ficará da mesma forma que você vê neste post), se pode alterar o seguinte:

• mo = mês
• da = dia
• yr = ano
• ho = hora
• mi = minuto

Vale lembrar que uma vez inserido na sua página, ele emite um som de relógio por alguns segundos e depois para.

O código a ser inserido em sua página é este:

<br /> <img src="http://draft.blogger.com/img/video_object.png" style="background-color: #b2b2b2; height: 60px; width: 250px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_1" data-original-id="BLOGGER_object_1" /><br />

Ai pronto, você atualizar sempre que desejar o seu contador mudando os números.

Nota do autor:

Gostaria de pedir a todos os leitores [e leitoras] ou não, que comentam no Arruma Blog, que escrevam ao menos um e-mail caso queiram ser respondidos pelas suas dúvidas reixadas nos posts. Venho recebendo comentários e não consigo respondê-los. Se desejarem podem usar o formulário que se encontra em 'Pergunte' no topo da página.

Inspiração

Continue lendo

Criar tirinhas de qualidade para o seu blog

Atualmente os sites e blogs de tirinhas estão cada vez mais populares. Os motivos são bem visíveis:

1. A livre expresão da idéia;
2. Em poucas palavras você define um tema que poderia ter vários parágrafos;
3. Por conter conteúdo gráfico e textual ele chama mais atenção;
4. Normalmente se pode interagir com o usuário de forma diferenciada;

O legal é que há muitos novos usuários querendo seguir o ramo e pelo que o Arruma Blog conseguil ver na internet, muitos ainda buscando qualidade. Pensando em novos usuários no seguimento de 'tirinhas' preparamos este post. No site Strip Generator, você pode criar suas tirinhas avulsas gratuitamente e disponibilizálas em seu blog, página e até Orkut (porque não??). Veja uma demostração.

No site (ainda em inglês) você pode encontrar vários personagens, objetos e até coisas estranhas como ET's e pássaros para implementar na sua tirinha. Você pode escolher o tipo de balão de fala, incrementar mais de 3 tiras para a imagem e pode até criar seus personagens a partir dos que já existem, dando assim forma a eles como pode-se notar na tira acima.
O site está sempre buscando o melhor, então se você voltar nele em alguns meses é bem provável que os recursos disponíveis estejam mais avançados do que descritos aqui, e se você deseja realmente seguir carreira, o site ainda lhe dá a opção de gerenciar suas tirinhas se cadastrando.

Para criar você entra no site e clica em Create Your Strip e espere o aplicativo carregar. Boas idéias.

Continue lendo

Phoenix - Editor de Imagens

O que era um editor on-line, virou um aplicativo de edição de imagens para celular, tablet (Windows 8) mas ainda mantem a plataforma web. Talvez a evolução de editor on-line para outras plataformas seja para agradar ainda mais pessoas e o mais legal para os dispositivos móveis o aplicativo é gratuito.[Grande parte da continuação do post não faz sentido]

De nome forte e bem apresentável, o editor de imagem on-line e gratuito que falaremos hoje é diferente e tem seus pontos fortes. A unica coisa que não é positiva [nem forte] é que o programa é em inglês, então se você quer ter um bom resultado, deve ao menos ler a página do site traduzida. No site Aviary, onde encontrei o programa há tutoriais de como se fazer um belo desenho, desde seus primeiros passos até a finalização, além de videos de demostrações. Ele ainda está em sua versão Beta, como mais três outros 'aplicativos' do site e um em versão Alpha [o de vetorização]. ATENÇÃO: O site foi reformulado e hoje só existe informações centralizadas em um único aplicativo de imagem, não há mais tutoriais.

Visite o site

Ha também a opção de editar uma imagem de demostração [neste caso o programa demora um pouco a ser carregado].

Como atualmente não há mais tutoriais e o programa na versão web requer cadastro, você pode se cadastrar para usar o SDK (aplicações para desenvolvedores) e também para usar os recursos do site. Caso queira, poderá visitar a Google Play e fazer o dawload do App, mas lembre-se que ele está disponível para iOS também, faça buscas diretamente no celular. No site você pode fazer um breve 'teste drive' rsrs.

Continue lendo

Como criar botão em flash

Atenção, os botões não são em flash, apenas são parecidos.

Ninguém ainda me perguntou isso, pois acredito que a resposta é muito fácil, é só ter o programa de criação e manipulação de Flash. Pode até parecer beste, mas o que alguns não sabem é que a internet é fabulosa e você não necessariamente tem que possuir este programa para ter um botão em flash no seu blog ou site. O site a seguir é tão bem feito que os botões criados a partir de imagens parecem efeitos em flash. Você pode cria-los na vertical ou horizontal.

Há um site chamado Button Generator (em inglês) que disponibiliza varios botões e menus em JavaScript* para você personaliza-los e inseri-los em sua pág. Tudo o que você saber é a URL de destino, criando assim a navegação do mesmo. Atualmente o site dá opção de registro gratuíto e os membros podem fazer a personalização dos mais legais menus e botões.

Qual é o site?

http://www.buttongenerator.com/index.php

Como utilizar?

Simples. Você está na primeira página, visualizando os modelos na prática como funcionam com links fictícios, repare que a página pode demorar um pouco se sua conexão for banda extreita (conexão discada) e os links interagem com você o tempo todo. Escolha um dos modelos, se você quiser mais, no final da página você encontra ainda uma continuação.

Logo abaixo do exemplo de menu, ha o nome dele e depois a frase "Click here to edit menu" que nada mais é do que "Clique aqui para editar o menu", então escolha o seu menu e clique nesta frase. Você será direcionado a parte de edição do menu, nesta parte você tem um prévia de como ele ficará e mais abaixo a frase "Text Labels and Links " em uma tabela, que é o local reservado para a edição. Na coluna Text Labels você reescreve os nomes dos botões por exemplo:

Button 1

-Sub-Button 1

-Sub-Button 2

Button 2

-Sub-Button 1

-Sub-Button 2

ficaria assim:

Home

-pág. principal

-contato

Outros

-Fotos

-Links (etc)

Na parte de Links, você insere link do botão (normalmente sub-buttons) e mais a frente o campo Target, significa o tipo que a página irá abrir seu link, ele poder ser por exemplo Blank (abrir em outra página), mas há outros, e se você não souber qual ou o que colocar, não coloque nada, o site entenderá que ele pode abrir na mesma página(o que é mais indicado).

Há também a opção avançada de personalização clicando no topo da pág em Choose a mode > advanced form, então você poderá mudar a cor do seu botão e em alguns casos a fonte da letra também.

Depois de determinar cada passo, é hora de gerar o seu novo menu de navegação e botão, clicando em 'Click here to generate your menu', visualize seu novo butão na prática e se estiver tudo OK, selecione o código do seu menu e cole-o na sua página.

*Postagem alterada em 16 de Outubro de 2009. O leitor helder comentou que os menus são em JS e não em flash como pensavamos e fizemos a correção.

Continue lendo