26/06/2015

Dica para colocar na primeira página quando o site está em desenvolvimento < REDIRECIONANDO >




Hoje estou passando uma dica de um código, muito simples e que aposto que muitos conhecem.


Simples , fácil e ajuda seu cliente a divulgar por exemplo a sua Fanpage. Eu por exemplo faço a página de site em construção e após alguns segundos redireciono o visitante do site para a Fanpage do meu cliente.


A função deste código é a seguinte: depois de alguns segundos definidos,  redirecionar para alguma url.


Então você prepara uma página com a logo ou algo que deseja e insere o código.

Código:

<meta http-equiv="refresh" content="segundos;url">


Daí é só substituir a palavra segundos pelo número de segundos desejado que queira que a página seja exibida antes de redirecionar. E subistituir a palavra url pela url completa do destino do redirecionamento.


Coloque este código na sua página principal utilizando a ferramenta de inserção de  CÓDIGO HTML.
Serve tanto para versão 4 quanto par WA RC



Não é lá uma grande novidade.. Mas útil, simples e uma dica nova para quem ainda não sabe.

Abraços todos.






23/06/2015

Dica de efeito animado em imagens e botões no WebAcappella.



TEMA: Botões
ARTIGO: Novo
VERSÃO: PRESTASHOP  1.5.x |  WEBACAPPELLA  4




Hoje vou passar um macete que fica muito legal em sites de eventos noturnos, balada, cantores, djs.

Um site desta categoria eu preferencialmente prefiro fazer um site em tons escuros.

Sempre é bom colocarmos no lugar de quem está visitando um site.  Por exemplo: se visito um site sobre uma boate e o site é todo branco meu subconsciente não assimila aquele site com o que ele propõe. .....Mas se eu entro num site escuro, com refletores, um musica de fundo. As chances de querer ir aquele local são muito maiores.

O macete de hoje é muito simples, causa uma aparência bacana, com movimentos e não pesa o site.

O interessante que pode ser usado tanto como uma imagem fixa quanto em botões.

Se trata de utilizar gifs animados com o fundo transparente.

1) Em nosso primeiro exemplo, supomos um site de uma boate que fica aberta 24 horas. Primeiramente não vou dizer "Aberto 24 horas" pois soa como farmácia ou casa de conveniência. Vou usar o termo "24 horas no ar". E para causar uma chamada em que chama a atenção do visitante do site. Vou fazer algo tipo um neon.

Utilizando um programa da sua escolha crie todas as figuras que farão parte da sua animação:

Criei as seguintes imagens e as exportei como png com fundo transparente. Nem precisa dizer que são 3 imagens cada qual com seu nome... rs. .


Depois é acessar o site: http://gifmaker.me/ . (Adorei essa ferramenta on line) e fazer o upload das Imagens.


O que eu achei muito interessante nesta ferramenta é que você possui inúmeras opções de configurar como seu gif animado vai proceder. Velocidade entre os frames, velocidade da animação, Quantos loops terá o gif ou se vai ter infinitos loops e até mesmo inserir uma url de uma música a tocar e até em quantos segundos ela deve começar a tocar. Sem dizer que ele mantém seu gif transparente.


Após ter feitos todo os ajustes basta clicar em CREAT GIF ANIMATION  que logo abaixo será listado uma série de opções sendo uma a do download do seu gif.

No do exemplo ficou assim:





 Tudo bem que não ficou igual um neon, pois não fiz a edição muito bacana. Só mesmo para dar um exemplo.

Agora basta inserir a imagem de gif no site que e ver o efeito mantendo o fundo do gif transparente. Faça você um de exemplo e veja como pode ser útil.



2) Em nosso segundo exemplo, o que eu acho ainda mais interessante, é utilizar este recurso com botões no Webacappella.

Vamos criar então um botão em que redireciona o visitante do site para um canal do Youtube. Este botão ficará piscando e quando passar o mouse por cima ele vai parar em uma cor desejada. 

Neste caso vou trabalhar com um gif animado e uma imagem. Lembrando que todas as imagens utilizadas tanto para a criação do gif quanto a imagem separada devem possuir as mesmas medidas: altura x largura.

Então criei e exportei como png transparente as seguintes imagens: 




As duas primeiras (amarela e verde) será usada para o guif animado, e a terceira com vermelho será usada como a imagem fixa ao passar o mouse.

Como já dito anteriormente criarei meu gif animado.

Agora no Webacappella insiro um botão definindo a largura e altura conforme a do gif.

O tipo do botão será uniforme
O canto será sem arredondamento


Na opção Botão > Aparência do botão e na aba normal . Removo todas as cores tanto do fundo quanto borda e etc e insiro a imagem do arquivo gif.



Na opção Botão > Aparência do botão e na aba mouseover. Removo também todas as cores tanto do fundo quanto borda e etc e insiro a imagem do logo original em png do Youtube. A terceira imagem citada acima
.

Na opção Botão > Aparência do botão e na aba ativo. Desmarcamos a opção Mostrar estado "ativo"

Ainda na ferramenta Botão , na opção de Texto eu deixo o texto em branco.




Insira agora a url para o redirecionamento e pronto. Tá pronto um botão diferente, animado e que não pesa o seu site.

Faça você mesmo e veja pelo WebAcappella como ficou muito bacana


Infelizmente até a data atual o WA RC não permite inserirmos uma imagem no botão, pelo menos eu não encontrei. Se alguém souber passa a dica. Então esse artigo serve só pro WA4

21/06/2015

Playlist de Músicas em seu site Webacappella com Flash




TEMA: Player
ARTIGO: Revisado e Melhorado
VERSÃO: WA RC  |  WA 4


Hoje vamos ensinar a colocar um Player de Música no seu site  Webacappella.
Neste player aparece a lista de músicas hospedadas e o visitante do site poderá selecionar a qual ele quer ouvir.


  • Voce vai precisar de uma hospedagem para as músicas. (Poder ser a própria utilizada para o site.)
  • Um serviço de FTP para envio das músicas

1) Baixe os arquivos do player clicando aqui em um local no seu computador
2) Descompacte os arquivos
3) Edite o arquivo index.html para que se faça o ajuste do tamanho (aconselho utilizar o Notepad++ para editar este arquivo. Caso você ainda não tenha clique aqui para baixar:)
4) Pelo Notepad++ vá até a linha22 para editarmos os valores dos tamanho. Localiza "flashmp3player.swf"






5) Ajustes a altura em pixels do seu player ajustando  campos assinalados com vermelho: ("flashmp3player.swf", "player", "largurapx", "alturapx", "9"). Salve o arquivo

substitua a palavra alturapx pelo tamanho em pixel
substitua a palavra largurapx pelo tamanho em pixel

Observe a figura acima para ter um exemplo


6) Pelo seu gerenciador de FTP que utiliza crie uma pasta dentro de public_html onde serão hospedados os arquivos do Player

7) Copie todo o conteúdo da pasta descompactada no item "2" para a pasta criada na sua hospedagem.




8) Para adicionar as músicas. Você faz upload das mesma por um gerenciador FTP para dentro da pasta mp3. O player automaticamente toca as músicas em ordem alfabética. Então é importante orientar a quem vai utilizar que numere as músicas de forma a ordem de preferência em que vão ser tocadas. 

Ex: 


Uma ideia é criar e configurar uma conta FTP somente autorizando utilizar a pasta mp3.


9) Para adicionar o player no Webaccapela edite o arquivo "Codigo iframe.txt" que está dentro da pasta descompactada no item "2". 

Altere o caminho onde encontra o index.html do player.




Ajuste também a largura e a altura como feito no arquivo index.html, não é necessário seguir as mesmas medidas no index.html. No caso da altura sugiro aumentar 15 px sobre o valor dito no arquivo index.html



Veja a imagem acima como referência.



CUSTOMIZANDO O PLAYER
Edite o arquivo default.xml

ALTERAÇÕES DE CORES

scroll_bar_color : cor da barra de rolagem
scroll_bar_bg_color : cor de fundo da barra de rolagem
arrows_color:  Scrollbar setas da cor
border_color:  cor das bordas
buttons_color1:  primeiro gradiente de cor para os botões de fundo
buttons_color2:  segundo gradiente de cor para os botões de fundo
buttons_normal: Cor dos Botões
buttons_over: Cor dos botões em mouseover
background_color: cor de fundo geral
volume_active: cor volume Ativo
volume_inactive:  cor volume Inativo
text_normal: cor do título da música
text_over:  cor título da música em mouseover
text_select:  cor do título da música selecionada
playlist_item_normal: cor do item da Playlist
playlist_item_over:  cor item da playlist em mouseover
playlist_item_select:  cor item de lista Selecionado
playlist_position: cor do botao Play



ATIVAR PARA O PLAYER COMEÇAR A TOCAR AUTOMATICAMENTE
LINHA 24: Altere o valor " (on= ligado , off= desligado)

SALAR A POSIÇÃO DE ONDE A MÚSICA ESTIVER TOCANDO E A ALTURA DO VOLUME
LINHA 25: Altere o valor (on= ligado , off= desligado)

ALTERAR O VOLUME DA MÚSICA
LINHA 26: Altere o valor

PARA APARECER NUMERAÇÃO ANTES DO NOME DA FAIXA
LINHA 27: Altere o valor  (on= ligado , off= desligado)

MOSTRAR O TEMPO DECORRIDO DA MUSICA QUE ESTÁ TOCANDO
LINHA 28: Altere o valor  (on= ligado , off= desligado)


IMPLEMENTANDO NO WA 4


.Copie o código que você alterou no arquivo "Codigo iframe.txt" e cole no último campo da opção  Inserir >> Código HTML. 

Ajustes as dimensões com as mesmas fornecidas no arquivo "Codigo iframe.txt"

Para visualizar on line clique aqui


IMPLEMENTANDO NO WA 5 (responsive)


.Copie o código que você alterou no arquivo "Codigo iframe.txt" e cole no  campo  HTML. 


Para visualizar on line clique aqui


** o player continua onde a pessoa parou ate que se esvazie os cokies





06/06/2015

Otimize as imagens do seu site Webacappella.



TEMA: SEO
ARTIGO: Revisado e Melhorado
VERSÃO: WA 4 |  WA 


Uma das exigências ou dica do Google é que as imagens do seu site sejam otimizadas para um melhor navegação. 


Então um dos detalhes que devem ser obedecidos no seu site é manter a imagem no WebAcappella nas mesmas medidas em que forem criadas. Sem redimensioná-las pelo programa. 

A dica então é você já pegar as medidas que ela vai ocupar no site utilizando a ferramenta "Zona de Cor" (Webacappella 4)



Então você saberá as medidas de Largura e Altura em que a imagem será criada. Daí utilizando um software de sua preferência você cria e exporta a imagem nestas medidas.


Já para o Wa Rc isso já não é possível, então sugiro você usar um programa de imagens tipo o Corel Draw definir a página com o tamanho do monitor (em pixels) e inserir a imagem desejada dentro da pagina. Assim você ajusta o tamanho da imagem no olhômetro e esporta já no tamanho escolhido. Eu costumo definir o tamanho do monitor considerando um monitor de 17", que é o mais comum.


Após a imagem exportada você pode utilizar um recurso on line para que a mesma imagem seja otimizada sem perder qualidade. Para isto acesse o site: https://tinypng.com/



Este site aceita imagens JPG e PNG. (as mais utilizadas). 

Clique então em Drop your .png or .jpg files here! e faça o upload da imagem desejada.


Após o site executar o processo ele informará o porcentual de otimização realizado, o tamanho da imagem antes e depois do processo. 

Clique em Download pra baixar a imagem otimizada para seu computador.




Com a imagem otimizada agora inclua em seu projeto.










Related Posts Plugin for WordPress, Blogger...