02/07/2015

WebAcappella & Internet Explorer | Configuração WebAcappella 4 para internet Explorer


TEMA: Internet Explorer 
ARTIGO: Revisado
VERSÃO:  WA  4 

Opa turma do bem..

Se você está tendo problemas com a apresentação do seu site com o Internet Explorer existem algumas maneiras para contornar situações.

Primeiramente o Internet Explorer é um browser chatinho, então para que um site feito no WebAcappella se dar bem com ele , o mesmo tem que estar atualizado e  com todos os Plugins do tipo Flash Player, Macromedia Shockware e etc instalados.

Bom, você possui maneiras um pouquinho mais avançadas do que configurar o WebAcappella editando o arquivo de stylus CSS , e até mesmo em algumas situações fazendo alguns ajustes no HTACCES.  Portanto falarei deles em outras postagens com o passar do tempo.

O que sugiro agora é ajustar primeiro a configuração no WebAcappella.

Para isso acesse a opção SITE>>PROPRIEDADE DO SITE, e clique na CATRACA.





Marque a caixa de verificação em "Ativar a gestão de captura de tela"
Marque a caixa de verificação em "Gestão automática"
NÃO marque a caixa de verificação "Forçar a renderização do IE7 no IE9"
Marque a caixa de verificação em "Codificação de caracteres em UTF-8"

Agora clique em OK , publique seu site e visite-o no Internet Explorer. Pode ser que em alguns casos apareça barra de rolagens em iframes, pode-se corrigir isto ajustando o tamanho dos mesmos.

Bom; agora se ainda apresenta problemas, o próximo passo é usar técnicas no CSS e ou no HTACCES.


Espero ter sido útil.

Abraço a todos.










Post 1 | Como escolher um ADM - Sistema de gerenciamento de conteúdo para sites WebAcappella.





Olá turma do bem! 

Este post é apenas o início de uma série de posts onde eu vou expor quesitos na hora de escolher um sistema de gerenciamento de conteúdo. 

Não serão sequenciais, por isto se você pensa em adquirir um é muito importante acompanhe minhas postagens. 

As dicas são baseadas em várias experiências próprias vivenciadas entre desenvolvedor > cliente > internauta.   

Não estarei fazendo comparações entre os disponíveis no mercado, até mesmo porque respeito eticamente o trabalho de cada um.

O que vou mostrar aos interessados são detalhes importantes que devem ser avaliados para que não gere transtornos posteriores. 


Não serve só para sistemas completos, como também na hora de escolher pela internet módulos avulsos, os quais encontramos disponíveis para baixar e implantar no site.


Eu particularmente sou a favor de adquirir todos, pois vale a pena o investimento. Nenhum site é igual ao outro. E cada sistema tem características que podem acender melhor em um tipo de site do que em outro. Além de implementar com códigos e phps disponíveis gratuitamente na internet. Tudo vai contar com sua criatividade em relacionar as ferramentas que tem em mãos.

É muito importante coletar informações em profissionais que já utilizam e saber suas opiniões. Pontos positivos e negativos.




QUESITO 1 : PREÇO

Jamais leve em consideração o preço como um fator de peso na sua decisão. O barato pode sair caro.




QUESITO 2 : ARQUIVOS FONTE

Dê preferência aos que te fornecesse os arquivos fontes. Sistemas onde você depende do provedor de terceiros estarem ativos pra que utilize o sistema não é uma boa. 

Imagine uma situação em que você tem dezenas de clientes e há um problema no provedor do fornecedor do sistema.  Seu telefone não vai parar de tocar e você estará de mãos atadas para solucionar o problema. 

Outro detalhe sobre os arquivos fontes é que não sejam criptografados. Mas veja bem: Use sempre a ética profissional e o bom senso e nunca comercialize algo que não seja seu. 

O fato dos fontes não serem criptografados é apenas uma segurança sua. Pois se seu fornecedor encerrar as atividades sem aviso prévio: "sumir", você terá como  se desdobrar. Você mesmo faz, ou contrata alguém que faça alterações, arranjos, melhorias ou consertos na programação. 




QUESITO 3: INTERNET EXPLORER

Muitas pessoas ignoram o Internet Explorer pois não ser um navegador tão rápido. Só que; esquecem que é o browser mais homologado para instituições financeiras e governamentais. 

Para quem não sabe recentemente o Chrome declarou não ter mais suporte a Java. Sendo necessário ser ativada  NPAPI para que seja compatíveis com autoridades certificadoras. 

Então até que seja desenvolvido uma nova plataforma opcional ao java o Internet Explorer vai começar a ser mais usado.

Imagine a seguinte situação: Você está em um site o qual tem que ser necessário algumas aplicações em que somente consegue fazer pelo Internet Explorer, ai por algum motivo você precisa visitar outro site. Você estando no Internet Explorer as chances de você apenas abrir uma nova aba para isto (no lugar de abir outro browser) são grandes.  Daí este site não está preparado para o Internet Explorer, pense: Qual a primeira impressão que você terá deste site?

Pois então antes de adquirir qualquer sistema administrativo, visite o Demo do mesmo pelo Internet Explorer. Pois se na demonstração do próprio fornecedor não estiver bacana; com certeza você terá vários obstáculos no desenvolvimento do seu site.




QUESITO 4: REQUISITOS

Antes de adquirir o sistema veja todos os requisitos para que ele possa funcionar. Hospedagem, phpadmin, se o provedor é Linux ou Windows. Não compre enquanto não tiver certeza que sua hospedagem aceita o funcionamento adequado do sistema.



QUESITO 5 : TUTORIAIS

Pesquise se existem tutoriais referente o sistema no Youtube, assista-os. Veja com o fornecedor se é disponibilizado, tanto em vídeo como escrito. Procure por tutorias não só como o de instalação quanto também o de utilização pelo webmaster e também se tem tutorial para utilização do administrador (quem vai manipular  as informações). 

É muito importante o Tutorial para o administrador, aquele que vai sempre está utilizando a área administrativa alimentando com fotos, notícias, textos e etc. 

Este detalhe é até bom para você, pois diminui suportes com orientações ao seu cliente. 

Se você é um desenvolvedor Webacappella, ou seja, se é uma fonte de renda sua. O seu cliente vem em 1º lugar. Organize-se e atenda seu cliente na melhor forma possível. Não dê a 1ª resposta a que ele não quer ouvir do tipo: - Isto não tem como fazer. Tente solucionar com todas as formas possíveis. Ele que paga você. 

Então, se o fornecedor não oferece um tutorial que sirva para você repassar para o seu cliente; faça-o você mesmo.


Lembre que este é apenas o 1º Post de uma série referente este assunto. Em breve virão mais. Acompanhe.

Deixo meu abraço a todos.












01/07/2015

Seu site tem FAVICON?





TEMA: Favicon
ARTIGO: Revisado e Melhorado

VERSÃO: WA4  | WARC

O  que é?


Resumidamente Favicon , palavra derivada de favorito e ícone são pequenas imagens no formato *.ico que ficam guardadas no seu site para serem visualizados pelos browsers, Cada qual possui sua característica própria para a visualização dos mesmos. Variando da versão do Browser.

Na ausência de um Favicon os navegadores (browsers) exibem um ícone padrão como por exemplo uma folha em branco. 

Para os que desconhecem ou não estão assimilando o que é um Favicon é uma imagem conforme se mostra na figura abaixo do lado do nome do site. Neste exemplo aquela figura do B dentro de um quadradinho Laranja é o Favicon do Blogger.







Para que serve?


Os Favicons geralmente representam uma determinada ação, uma sinalização e ou transmitir uma mensagem. Você não precisa por exemplo saber um determinado idioma para saber quando não é permitido fumar em um local sinalizado. 

Favicon é parte integrante de branding. Ele serve para representar um website e sua entidade dentro de um browser. Um site sem Favicon perde um pouco de sua credibilidade comparado aos outros que utilizam. Causa uma impressão que o desenvolvedor não é um profissional.




Quais os formatos? 


Geralmente PNG e ICO. Eu prefiro PNG devido as medidas e o tamanho em KB do arquivo ser irrisório, a qualidade do PNG é melhor.

JPG, por exemplo, não é adequado devido a pixelização das imagens e a falta de um canal de transparência. O GIF tem uma qualidade inferior e ainda não encontrei quem é o cidadão que acha uma boa ideia utilizar APNG (uma espécie de PNG animado).

Uma opção promissora é o SVG. Como o SVG é um arquivo vetor não teriamos que nos preocupar com os diversos tamanhos. Mas até agora só Opera e o Google Chrome suportam. 


TAMANHOS:


Os clássicos tinham 16 x 16 px, Mas hoje grande parte dos browser utilizam uma versão de 32 px. Portanto em vista dos dispositivos móveis hoje já geram uma complicação nas variedade de tamanhos:

– 16px: Barra de endereço, abas e favoritos da maior parte dos navegadores.
– 24px: Barra de ferramentas do Internet Explorer 9
– 32px: Nova aba no IE, site fixo na barra de tarefas do Windos 7 e sidebar do Safari
– 57px:iPhone sem tela retina e iPod Touch
– 72px: iPad sem tela retina
– 96px: GoogleTV
– 114px: iPhone com tela retina
– 128px: Chrome Web Store
– 144px: iPad Retina, Windows 8 Tiles
– 256x160px: Opera Speed Dial




E no WebAcappella com inserir um Favicon em um site?


Muito simples:

Comece primeiro utilizando um programa de sua preferência uma imagem que simbolize o seu site (Eu particularmente ainda prefiro criar imagens no tamanho 16 x 16px): 

Então eu criei uma imagem utilizando as medidas de 50 x  50px e exportei em formato png. Portanto na hora de exportar eu defini as medidas para 16 x 16px. Desta forma meu favicon não perde qualidade.

Geralmente quando se exporta um imagem, é informado uma prévia do tamanho do arquivo. Sugiro este tamanho não exceder 20 kb.



Como exemplo criei uma imagem para o  favicon do site www.webacappellashow.com.br



NO WA 4


Com a imagem criada, no WebAcappella vai em SITE>>PROPRIEDADES DO WEBSITE e clique no ícone da catraca na parte superior.



Observe uma região nominada como Favicon:

Agora é simples, clica no botão logo abaixo, localize onde salvou sua imagem criada no pc e clique em OK. Atualize e depois publique.



NO WA RC


Com a imagem criada, n tela principal do seu projeto, clique em Website settings






Na tela que se abrir clique na imagem conforme mostrado na figura abaixo na seção Favicon






Agora é simples, clica no botão logo abaixo, localize onde salvou sua imagem criada no pc e clique em OK. Atualize e depois plubique.






Prontinho, seu site já tem um Favicon.




















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...