PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Publicidade:

Encontre no blog...

08/12/16

Identificar se o dispositivo do usuário do seu site é móvel (smartphone ou tablet).

Identificar se o dispositivo do usuário do seu site é móvel (smartphone ou tablet). - Visual Dicas

Identificando dispositivo do usuário

Hoje é dia é importante ter um site que se adapte em dispositivos móveis com telas menores. Sendo assim, você deverá desenvolver um website responsivo (leia: W3.CSS o framework que você precisa conhecer!) ou criar uma versão mobile apenas para rodar nestes dispositivos. 

Identificar se o dispositivo do usuário do seu site é móvel (smartphone ou tablet). - Visual Dicas

Nem sempre layouts responsivos são adequados para o que se deseja desenvolver na web. Muitas vezes precisamos ter um site com um layout mais elaborado para uso no desktop e um mais simples para dispositivos móveis, o que as vezes não conseguimos com um modelo responsivo.

Um exemplo clássico é o site www.blogolista.com que quando encontra um dispositivo móvel é redirecionado para o link www.blogolista.com/mobile.

Nesta postagem, indicaremos 2 artigos do Portal Visual Dicas para você identificar se o seu website está sendo acessado em um computador (desktop / notebook) ou em um dispositivo móvel (smartphone / tablet). A partir destas definições você poderá criar ações específicas para cada tipo de dispositivo.

Através do tamanho da tela - JavaScript

Acesse o link: Identificar se é dispositivo móvel através do tamanho da tela

Neste artigo do Portal Visual Dicas, você encontrará 2 formas para identificar o dispositivo utilizado pelo usuário, e assim, redirecioná-lo para um endereço de uma página feita para a versão mobile.

Os códigos apresentados fazem a identificação através do tamanho da tela ou pelo tamanho da janela do dispositivo que o usuário estiver usando.

Você poderá escolher um dos códigos em JavaScript e adicioná-lo na sua página index. Assim, se o usuário estiver utilizando um dispositivo como um smartphone ou tablet, o site será redirecionado para uma página específica para mobile.

Identificar se o dispositivo do usuário do seu site é móvel (smartphone ou tablet). - Visual Dicas

Através da identificação do aparelho móvel - PHP

Acesse o link: Identificar se o dispositivo é móvel - php

Neste caso, a identificação será realizada pelo tipo do aparelho utilizado, tanto para diferenciar ações que devem ser feitas para o PC ou para dispositivos móveis, como também, para diferenciar ações para cada tipo sistema operacional móvel, como: iPhone, iPad, Adroid, webOS, Blackbarry, iPod, Symbiam ou Windows Phone.

Identificar se o dispositivo do usuário do seu site é móvel (smartphone ou tablet). - Visual Dicas

Este método utiliza a variável PHP $_SERVER['HTTP_USER_AGENT'] que lê informações do dispositivo do usuário, como sistema operacional, navegador, etc.

Identificar se o dispositivo do usuário do seu site é móvel (smartphone ou tablet). - Visual Dicas

Leia o artigo para saber como utilizar este método de identificação : Identificar se o dispositivo é móvel - php

byALF

28/11/16

Painel simplificado - novidades do painel do blogger - atualização novembro 2016

Painel simplificado - novidades do painel do blogger - atualização novembro 2016 - Visual Dicas

Painel do Blogger - atualização (Painel Simplificado)

A plataforma Blogger atualizou o seu painel de controle de usuário, apresentando algumas novidades operacionais. Mesmo não sendo significativas, estas novidades trazem esperança para nós usuários, pois mostra que o Blogger, uma das maiores plataformas de hospedagem gratuita de blogs, não vai morrer tão cedo. Acredito que outras novidades virão em breve. Vamos aguardar…

Painel simplificado - novidades do painel do blogger - atualização novembro 2016 - Visual Dicas

O que mudou?

Ao acessar sua conta do Blogger, você será transferido diretamente para o menu Postagens. Se for a primeira vez, você virá um aviso sobre as mudanças.

Painel simplificado - novidades do painel do blogger - atualização novembro 2016 - Visual Dicas

Assim, o que mudou foi apenas a forma para você visualizar os seus blogs (caso tenha mais de um blog na sua conta), que agora deve ser acessado através do menu lateral, ou seja, tudo no mesmo lugar.

Painel simplificado - novidades do painel do blogger - atualização novembro 2016 - Visual Dicas

Para criar um outro blog, acesse o menu e clique em [Novo blog…].

Painel simplificado - novidades do painel do blogger - atualização novembro 2016 - Visual Dicas

Outra mudança foi a criação de um novo botão no editor de postagens para inserir caracteres especiais. Você pode inserir vários tipos de caracteres, que poderão servir também como ícones bem legais para as suas postagens…

Painel simplificado - novidades do painel do blogger - atualização novembro 2016 - Visual Dicas

Clique nos botões, primeiro à esquerda para escolher a categoria dos caracteres…

Painel simplificado - novidades do painel do blogger - atualização novembro 2016 - Visual Dicas

Depois, clique no no botão à direita para escolher a subcategoria dos caracteres…

Painel simplificado - novidades do painel do blogger - atualização novembro 2016 - Visual Dicas

Portanto, como já dissemos, não houve grandes alterações estruturais no Blogger, mas é assim que a equipe do Blogger funciona. Primeiro é realizado alterações na organização dos blogs e postagens, e depois a criação de novos recursos e novas funções, mesmo que em passos lentos.

Vamos aguardar um novo Blogger para 2017…

byALF

20/11/16

Como configurar a sua caixa de fãs (like box) do Facebook na nova versão (page plugin)

Como configurar a sua like box do Facebook na nova versão - Visual Dicas

Like Box – Facebook

Escrito originalmente em 12/07/2015 e atualizado 20/11/2016.

Este artigo foi escrito quando o Facebook fez um upgrade do plugin do “like box” em 2015. Depois disso, houve algumas alterações na configuração do Like Box que atualizamos neste tutorial.  Leia o nosso artigo e veja como configurar a sua caixa de fãs do Facebook já contanto com últimas atualizações de 2016.


Introdução - upgrade do plugin Like Box pelo Facebook (escrito em 2015)

Se você possui uma caixa de fãs (like box) da “fan page” do seu blog ou da sua empresa, com certeza deve ter percebido que houve uma alteração visual no plugin.

Como configurar a sua like box do Facebook na nova versão - Visual Dicas

Na verdade o Facebook eliminou o like box em junho de 2015, substituindo-o por um novo plugin que permite mostrar a capa da sua página de fãs e priorizar os “faces” dos amigos do usuário que estiver conectado na rede social.

Se você acessar a página Facebook Like Box irá verificar a mensagem: “The Like Box is deprecated. Please use the new Page Plugin, ou seja, utilize o novo Page Plugin no lugar do obsoleto Like Box.

Como configurar a sua like box do Facebook na nova versão - Visual Dicas

Obs.: Também foram desativados os plugins Activity Feed, Recommendations Feed, Facepile, Registration Plugin e  shared Activity Plugin

O Facebook faz esta alteração de forma automática, mas se você precisar fazer ajustes nas dimensões ou no formato do plugin veja o nosso tutorial a seguir.


 

Configurando o novo Page Plugin (atualizado)

Acesse a página https://developers.facebook.com/docs/plugins/page-plugin

Como configurar a sua like box do Facebook na nova versão - Visual Dicas

Verifique se a página do Facebook está no seu idioma. Se não, observe no rodapé da mesma que aparecem  links. Selecione o link do seu idioma. No nosso exemplo vamos utilizar o idioma Português (Brasil).

image

Role a tela e preencha as informações do formulário verificado abaixo como irá ficar o seu plugin.

image

Veja o exemplo abaixo onde utilizamos a nossa página de fãs do Facebook:

UR da Página do Facebook:  Coloque o endereço da sua página do Facebook. No nosso exemplo vamos utilizar o endereço da página do Visual Dicas: https://www.facebook.com/visualdicas

Guias: Aqui você pode colocar: Digite timeline para mostrar os posts recentes da sua linha de tempo, mensagens ou eventos. No nosso exemplo vamos utilizar timeline.

Largura e Altura: Vamos utilizar no nosso exemplo 530px para a largura e auto para a altura para ajustar automaticamente.

Usar cabeçalho pequeno: se marcar ele mostrará um cabeçalho menor e sem o botão Compartilhar.

Ocultar foto da capa: Se você marcar ele não mostrará a capa da página de fãs.

Adaptar à largura do contêiner do plugin: marque para ajustar à largura do plugin.

Mostrar rostos dos amigos: marque para mostrar amigos que curtiram sua página. O novo plugin só permite uma linha com as faces.

image

Se o plugin ficou como desejado, clique no botão [Obter código].

image

Em SKD do JavaScript você encontrará de tipos conjuntos de códigos:

O primeiro você deverá copiar e colar na página principal do seu site (index) imediatamente após a tag <body>. Já o segundo código você deverá colocá-lo no lugar onde aparecerá o plugin.

DICA: Se você utilizar o plugin apenas em um local do seu blog ou site, você poderá colocar os 2 códigos juntos no lugar onde aparecerá o plugin. Por exemplo, no Blogger você poderá colocar os 2 códigos juntos no gadget onde aparecerá o plugin.

image

Obs.: Se preferir, poderá usar o código IFrame. Entretanto não recomendamos, pois este elemento HTML está em desuso na visão do W3C e HTML5, além de que você precisará alterar o código com o idioma…

image

Inserindo o código no site (SKD do JavaScript)

Pronto, agora você acesse o seu blog e entre no gadget, widget, módulo ou qualquer elemento que está instalado o seu like box. No nosso exemplo, utilizaremos o gadget do Blogger:

a) Colocando o plugin Like Box no Blogger

Em  Layout adicione um novo Gadget

image

Clique em HTML/JavaScript

image

Agora copie e cole os dois códigos SDK JavaScript no gadget.

image

Veja como ficou o nosso plugin:

 

 

b) Se você está ainda com o código antigo (antes de julho de 2015)

Acesse o seu blog e entre no gadget, widget, módulo ou qualquer elemento que está instalado o seu like box. No nosso exemplo, utilizaremos o gadget do Blogger:

Substitua o código que já estava no blog.

Como configurar a sua like box do Facebook na nova versão - Visual Dicas

Copie os códigos do plugin do Like Box do Facebook. Cole-os  no gadget. Clique no botão [Salvar].

Como configurar a sua like box do Facebook na nova versão - Visual Dicas

Se você tem dúvidas como instalar um código no Blogger ou no Wordpress, leia os artigos abaixo:

Como instalar um Widget no seu Blog -(Blogger)

Como inserir Widgets no Wordpress sem a instalação de plugins

Como inserir códigos HTML nas postagens do Blogger

Como inserir códigos HTML nas postagens do Wordpress

Bem, se você gostou aproveite para curtir a nossa página…

byALF

18/11/16

Como publicar fotos ou gifs animados no twitter pela Web

Como publicar fotos ou gifs animados no twitter pela Web - Visual Dicas

Fotos e Gifs no Twitter

Já faz algum tempo que o Twitter permite a publicação de fotos/imagens (arquivos .jpg, .gif, .png) e gifs animados (.gif). Neste artigo mostraremos como inserir fotos e gifs no Twitter via Web.

image

Requisitos para a publicação de fotos ou gifs

Quais são os requisitos de tamanho e tipo de arquivo?
  • As fotos podem ter até 5 MB;
  • GIFs animados podem ter até 5 MB em dispositivos mobile, e até 15 MB na Web.
  • São aceitos arquivos GIF, JPEG e PNG.
  • NÃO são aceitos arquivos BMP ou TIFF.
  • A foto será dimensionada automaticamente para exibição no Tweet expandido e na sua galeria de usuário.

Publicar foto em um tweet

Acesse o site: https://twitter.com/ e faça o login.

Como publicar fotos ou gifs animados no twitter pela Web - Visual Dicas

Clique no botão [Tweetar] ou no link [O que está acontecendo?].

Como publicar fotos ou gifs animados no twitter pela Web - Visual Dicas

Clique no ícone com uma câmera para adicionar uma imagem, gif animado ou um vídeo.

Como publicar fotos ou gifs animados no twitter pela Web - Visual Dicas

Dica: leia sobre como incluir um vídeo em seu Tweet  -> aqui.

Primeiro vamos adicionar uma foto. Selecione a foto desejada do seu computador.

Como publicar fotos ou gifs animados no twitter pela Web - Visual Dicas

Pronto, a foto já foi incluída. Para excluir, clique no [X] que aparece no canto direito superior da imagem.

Como publicar fotos ou gifs animados no twitter pela Web - Visual DicasComo publicar fotos ou gifs animados no twitter pela Web - Visual Dicas

Você pode selecionar até 4 fotos para tweetar de uma só vez. Se desejar, pode escrever um texto de até 140 caracteres no campo [O que está acontecendo?]. Depois clique no botão [Tweetar].

Como publicar fotos ou gifs animados no twitter pela Web - Visual Dicas

Veja como ficou o nosso tweet publicado…

https://twitter.com/visualdicas/status/799693566251569152

Como publicar fotos ou gifs animados no twitter pela Web - Visual Dicas

Publicar um gif em um tweet

Vamos agora incluir um gif animado. Proceda da mesma forma que você fez para inserir uma foto.

Como publicar fotos ou gifs animados no twitter pela Web - Visual Dicas

Pronto, para publicar clique no [Tweetar]. Se desejar, pode escrever um texto de até 140 caracteres no campo [O que está acontecendo?].

Atenção: Diferente de fotos, você pode selecionar apenas um gif animado para cada tweet por vez.

Como publicar fotos ou gifs animados no twitter pela Web - Visual DicasComo publicar fotos ou gifs animados no twitter pela Web - Visual Dicas

Veja o nosso gif publicado…

https://twitter.com/visualdicas/status/799697555403608064

image

Usando o banco de gifs do Twitter

O Twitter possui um banco de dados com vários gifs animados disponíveis para você inserir em seus tweets.

Faça como os procedimento anteriores e clique agora no ícone gif.

Como publicar fotos ou gifs animados no twitter pela Web - Visual Dicas

Observe que aparece várias categorias de arquivos gif. Vamos selecionar aplauso

Como publicar fotos ou gifs animados no twitter pela Web - Visual Dicas

Selecione o gif desejado…

Como publicar fotos ou gifs animados no twitter pela Web - Visual Dicas

Agora como nos exemplos anteriores, escreva o seu texto de até 140 caracteres no campo [O que está acontecendo?]. Depois, no botão [tweetar] para publicar o tweet.

Como publicar fotos ou gifs animados no twitter pela Web - Visual Dicas

Para inserir fotos e gifs no seu celular, Android ou IOS, acesse o link: suporte twitter.

byALF

12/11/16

Como criar um gif animado do seu clipe favorito na Vevo

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

Gif animado no site da Vevo

A Vevo, site de vídeos musicais e entretenimento, lançou recentemente uma nova ferramenta para criar gif animados dos seus vídeos. Este recurso, que ainda está em fase beta, permite que você crie o seu gif animado e compartilhe nas redes sociais: Twiter e Facebook.

No entanto, ainda não é possível, neste momento, salvar o formato GIF para o seu computador, tablet ou smartphone.  Na verdade, esta função da Vevo apenas grava trechos dos clipes no formato mp4, permitindo que o usuário compartilhe estes trechos no Twiter ou no Facebook. Os desenvolvedores do site afirmam que a função ainda está em fase Beta e deverá ser aprimorada.

Mas, mesmo com as limitações citadas, está ferramenta é muito legal e vale a pena ser conhecida. Veja a seguir como acessar e criar o seu próprio gif.

Criando o seu gif

Acesse o site: http://www.vevo.com/

Escolha o vídeo que se deseja criar o gif animado. Pesquise no site. No nosso exemplo vamos procurar um vídeo do Eric Clapton.

Obs.: Não é preciso estar cadastrado no site para criar e compartilhar o seu gif.

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

Escolha o vídeo desejado.

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

Assim que selecionar o vídeo desejado, um ícone GIF vai aparecer junto com os controles Curtir, Adicionar e Compartilhar.

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

Ao clicar em [GIF], o site vai redirecionar a uma página para você selecionar o trecho do vídeo para a criação do GIF. Aguarde alguns instantes.

Obs.: Nem todos os vídeos permitem a criação de gifs.

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

Role a barra com o círculo até o ponto onde se deseja iniciar a criação do gif animado.

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

Se desejar, adicione um texto no campo indicado.

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

Se desejar, na barra redefinir, altere o tamanho do gif cortando parte do início e/ou parte do fim da animação .

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

Pronto, agora é só clicar no botão [Criar] para gerar o seu gif animado.

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

Aguarde alguns instantes…

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

Agora é só clicar nos botões das redes sociais para compartilhar no Twitter e Facebook.

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

Obs.: É necessário permitir popups no navegador para abrir as janelas do Twitter e do Facebook para o compartilhamento  dos gifs.

No Twitter

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

Veja como ficou na nossa página do Twitter: https://twitter.com/visualdicas

https://twitter.com/visualdicas/status/797534178451587072

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

No Facebook

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

Veja como ficou na nossa página do Facebook:

 https://www.facebook.com/visualdicas/posts/10153969288634147

Como criar um gif animado do seu clipe favorito na Vevo - Visual Dicas

byALF

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More