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

Publicidade:

Encontre no blog...

20/02/2017

Como sair de um grupo no WhatsApp - Android

WHATSAPP_BLOG

Saindo do grupo no WhatsApp - Android

Nesta postagem vamos dar um dica rápida para você sair de um grupo no WhatsApp. O processo é bem simples, mas exige um pouco de atenção para quem não conhece bem o aplicativo. Siga os passos abaixo:

1) Abra o aplicativo WhatsApp e localize o grupo que deseja sair. Toque sobre o nome dele por alguns segundos. Clique no ícone (3 pontos) que aparece no canto direito da tela.

image

2) No menu, toque em [Sair do grupo].

image

3) Confirme tocando em [Sair].

image

byALF

13/02/2017

Simulador gratuito para HTML, CSS e JavaScript – visualização em tempo real

Simulador gratuito para HTML, CSS e JavaScript – visualização em tempo real - Visual Dicas

Escrito originalmente em 15/09/2014 | Atualizado em 13/02/2017

Testar códigos HTML, CSS e JavaScript online

Neste artigo vamos apresentar o Squids Editor. Um simulador online e gratuito que possibilita a verificação de códigos HTML, CSS e JavaScript com visualização em tempo real. Após os testes e correções dos códigos de programação, você poderá copiá-los definitivamente para os documentos do seu site

O Squids Editor faz parte de um projeto novo do Squids que irá desenvolver tutoriais gratuitos para programadores iniciantes. O Projeto prevê tutoriais das linguagens HTML, PHP, JAVA, CSS, JavaScript, etc.

A vantagem de se utilizar o Squids Editor é que você poderá corrigir facilmente trechos de códigos e scripts, testando-os em vários navegadores antes de colocar no seu site. O Squids Editor foi desenvolvido a partir do editor w3schools.com e está configurado totalmente em português.

Usando o Squids Editor

Acesse o site: http://squids.com.br/editor

image

No campo Código Fonte (lado esquerdo da tela) digite o código que você deseja simular.

No exemplo a seguir usamos o código HTML:

<!DOCTYPE html>
<html>
<body>

<h1>Meu Primeiro Cabeçalho.</h1>

<h2>Meu Segundo Cabeçalho.</h2>

<p>Meu primeiro parágrafo</p>

</body>
</html>

Depois de digitado o código clique em [Enviar Código] para visualizar o resultado.

image

Veja o Resultado no lado direito da tela. A visualização acontece em tempo real, como como se você colocasse o código em um site.

image

Para visualizar o resultado na tela horizontal abaixo ao código fonte, clique no botão ‘horizontal” conforme mostramos abaixo:

image

Para voltar à tela vertical, clique no botão “vertical”.

image

Bem simples. Agora você poderá ir ajustando o código digitado em Código Fonte até encontrar o resultado esperado.

Exemplo de simulação código CSS

A seguir, mostraremos um exemplo da simulação de um código CSS:

<!DOCTYPE html>

<html>  

<head>
    <title>CSSDesk</title>

    <style type="text/css">
          div.caixateste{

color: yellow;
/* estrutura da caixa */
background-color: orange;
margin: 50 50 auto;
width: 200px;
padding: 100px;
text-align: center;
/* canto arredondado - não funciona no IE */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* sombra da caixa - não funciona no IE */
-webkit-box-shadow: rgba(0,1,1,1.2) 0px 2px 5px;
-moz-box-shadow: rgba(0,1,1,2.2) 0px 1px 5px;
box-shadow: rgba(0,1,1,2.2) 0px 1px 3px;
}
    </style>
  </head>

<body>
    <div class="caixateste"><b>CAIXA DE TESTE</b></div>
</body>
</html>

Veja como ficou o código no simulador.

image

Exemplo de simulação JavaScript

Veja agora um exemplo de simulação usando JavaScript:

<!DOCTYPE html>
<html>

<body>

<h1>Mudando estilos HTML</h1>

<p id="demo">
JavaScript pode trocar o estilo de um elemento HTML.
</p>

<script>
function minha_função()
{
x=document.getElementById("demo") // Encontrar o elemento
x.style.color="#ff0000";          // Mudar o estilo
}
</script>

<button type="button" onclick="minha_função()">Click Aqui!</button>


</body>
</html>

E como fica a simulação com o Squids Editor.

image

Faça os testes para conhecer melhor o Squids Editor. Envie seus comentários dizendo o que você achou deste simulador…

byALF 

Leia também:

Simulador CSS e HTML – Ótimo para iniciantes…

05/02/2017

Como hospedar arquivos de música gratuitamente

Como hospedar arquivos de música gratuitamente - Visual Dicas

Escrito originalmente em 16/04/2016 e atualizado em 05/02/1017

Arquivos de áudio

Para você ouvir ou compartilhar músicas na internet é necessário a utilização de arquivos de som, ou seja, um tipo de arquivo que possibilita o armazenamento digital de áudio. Abaixo mostraremos os formatos de arquivos mais utilizados atualmente:

MP3 - Formato mais conhecido pelos usuários. É importante por reduzir o tamanho natural de uma música em até 90%.

WMA - Formato semelhante ao MP3, foi criado pela Microsoft e se consagrou como a extensão especial para o Windows Media Player. Atualmente todos os players reproduzem este formato normalmente.

OGG - Embora menos conhecido pelos usuários, esta extensão está sendo largamente utilizada em streaming, que é a transmissão direta da internet para o computador ou smartphone em tempo real. O formato OGG não precisa ser previamente carregado para reproduzir a música.

WAV- Formato adotado e utilizado apenas pelo  Windows. Não pode reproduzir sons em players de áudio ou aparelhos de som por exemplo.

AAC - Criado pela Apple para concorrer com o WMA ou o MP3.Pode ser reproduzido em iPods e similares, além de players para computadores ou smartphones.

AC3 - Formato com qualidade Dolby Digital, com diversas saídas de áudio que cria a sensação de imersão que percebemos ao reproduzirmos sons em home theaters.

Para podermos reproduzir músicas em blogs ou sites, precisamos primeiro hospedar os arquivos de áudio na internet. A seguir, mostraremos como hospedar estes arquivos no Google Sites (espaço gratuito até 100 MB) e como utilizá-los no seu blog.

Utilizando o Google sites como servidor de arquivos

Como já mostramos no artigo “Usando o Google Sites como servidor de arquivos para blogs e sites” podemos também armazenar arquivos de áudio de forma semelhante:

Acesse o site: Google Sites

Se você não estiver logado no Google, entre com o seu E-mail e Senha e clique em [Fazer login].

Como hospedar arquivos de música gratuitamente - Visual Dicas

Clique no botão [Criar]. No nosso exemplo vamos criar um site apenas para atuar como um servidor de arquivos.

Como hospedar arquivos de música gratuitamente - Visual Dicas

Defina o modelo (para o nosso servidor, escolhemos Modelo em branco). Atribua um nome para o seu site (escolhemos servidorvisualdicas), o nome deverá ser inédito. Se desejar defina um tema para o site em Selecionar tema e digite o código de segurança.

Depois de definidos todos parâmetros clique no botão [Criar].

Obs.: Se desejar utilizar o Google Sites para criar um site bem bacana, leia Como fazer um site de maneira rápida, fácil e gratuita.

Como hospedar arquivos de música gratuitamente - Visual Dicas

Aguarde alguns instantes e você terá acesso ao seu novo site.

Como hospedar arquivos de música gratuitamente - Visual Dicas

No menu superior, clique no botão para criar uma nova página (ou digite apenas a tecla de atalho “C”).

Como hospedar arquivos de música gratuitamente - Visual Dicas

De um nome para a página e clique no botão [Criar]. No nosso exemplo chamamos a página de “Arquivos Músicas”.

Como hospedar arquivos de música gratuitamente - Visual Dicas

Clique em [Salvar] para criar a página

Como hospedar arquivos de música gratuitamente - Visual Dicas

Pronto, agora você poderá adicionar seus arquivos. Clique em [Adicionar arquivos].

Como hospedar arquivos de música gratuitamente - Visual DicasComo hospedar arquivos de música gratuitamente - Visual Dicas

Selecione o arquivo de áudio desejado no seu computador. No nosso exemplo escolhemos os arquivos: SinfoniaNo9Beethoven.mp3 e SinfoniaNo9Beethoven.ogg

Como hospedar arquivos de música gratuitamente - Visual Dicas

Obs.: Você poderá enviar qualquer tipo de arquivo para o seu site servidor, totalizando no máximo 100 MB (plano gratuito).

Como hospedar arquivos de música gratuitamente - Visual Dicas

Aguarde alguns instantes e pronto. Seu arquivo já está hospedado.

Como hospedar arquivos de música gratuitamente - Visual Dicas

Para fazer o download do arquivo clique na seta para baixo.

Para deletar o arquivo, clique em [ X ].

Como hospedar arquivos de música gratuitamente - Visual Dicas

Você pode criar um sistema de downloads de músicas no seu blog. Leia o artigo Como criar um sistema de download no seu Blogger

Obtendo o link direto dos arquivos de áudio

Para reproduzir músicas em sites ou blogs através de players (controles) ou automaticamente quando a página é carregada (autoplay),  é necessário ter acesso ao link direto do arquivo hospedado.

Para se obter o link direto no site servidor que criamos, basta clicar com o botão direito do mouse sobre a seta de dowonload do arquivo de áudio desejado swf e selecionar [Copiar link].

Como hospedar arquivos de música gratuitamente - Visual Dicas

Para tornar o link copiado em link direto, retire o atributo “?attredirects=0&d=1

https://sites.google.com/site/nomedosite/nomedapagina/audio.mp3?attredirects=0&d=1

No nosso exemplo o link copiado ficou:

https://sites.google.com/site/servidorvisualdicas/arquivos-musicas/SinfoniaNo9Beethoven.mp3?attredirects=0&d=1

Retiramos o atributo “?attredirects=0&d=1” e o link direto ficará:

https://sites.google.com/site/servidorvisualdicas/arquivos-musicas/SinfoniaNo9Beethoven.mp3

Vamos fazer o mesmo para o outro arquivo com formato ogg, ficando:

https://sites.google.com/site/servidorvisualdicas/arquivos-musicas/SinfoniaNo9Beethoven.ogg

Colocando o player no site ou blog

No nosso tutorial vamos utilizar o display nativo da linguagem de programação HTML5. Se desejar, você poderá utilizar outros controladores de áudio usando plugins externos disponíveis na internet.

Para inserir o player HTML5, basta você copiar o código abaixo e colar no blog. Depois altere o que estiver em vermelho, colocando os links dos arquivos ogg e mp3 hospedados no Google Sites.

accepted_48

<audio controls>
  <source src="SEU_ARQUIVO.ogg" type="audio/ogg" />
  <source src="SEU_ARQUIVO.mp3" type="audio/mpeg" /> 
Seu browser não suporta este áudio
</audio>

Veja como ficou o código do nosso exemplo:

<audio controls>
  <source src="https://sites.google.com/site/servidorvisualdicas/arquivos-musicas/SinfoniaNo9Beethoven.ogg" type="audio/ogg" />
  <source src="https://sites.google.com/site/servidorvisualdicas/arquivos-musicas/SinfoniaNo9Beethoven.mp3" type="audio/mpeg" /> 
Seu browser não suporta este áudio
</audio>

Obs.: Você também poderá alterar a frase “Seu browser não suporta este áudio”, que deverá aparecer somente em navegadores não compatíveis com os formatos utilizados. (Para saber mais, leia o post Como inserir músicas (áudio) no seu blog…)

Veja abaixo o nosso exemplo em ação:

 

 

Se você tiver dúvidas como colar o código HTML no seu blog (nas postagens, usando o editor html, ou nos gadgets no sidebar do blog), leia os artigos:

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

Autoplay - Reprodução automática

Se você deseja que a reprodução do áudio se inicie automaticamente, basta acrescentar o atributo “autoplay” no código HTML. Copie o código abaixo e cole no seu blog.

accepted_48

<audio controls autoplay>
  <source src="SEU_ARQUIVO.ogg" type="audio/ogg" />
  <source src="SEU_ARQUIVO.mp3" type="audio/mpeg" /> 
Seu browser não suporta este áudio
</audio>

Altere o que estiver em vermelho, colocando os links dos arquivos ogg e mp3 hospedados no Google Sites. A reprodução do áudio se iniciará automaticamente assim que você abrir a página…

Atenção: Este atributo não é suportado pelo Internet Explorer.

Para saber mais leia: Como inserir músicas (áudio) no seu blog…

byALF

04/02/2017

Como inserir músicas (áudio) no seu blog…

 audio_icon

Inserir áudio no blog

Escrito em 24/06/2012 e atualizado em 04/02/2017

Existem várias maneiras de colocarmos músicas mp3 ou qualquer outro arquivo de áudio no blog. Sons podem ser tocados automaticamente quando se abre uma página do blog ou através de “displays” elaborados com botões de controle para “play”, ajuste de volume, pausa, etc…

 

 

Neste artigo vamos mostrar como inserir players de áudio diretamente no blog de forma fácil, simples e sem precisar de nenhum tipo de plugin externo.

Suas músicas poderão ser inseridas  diretamente no post através do editor HTML quando estiver escrevendo um artigo (leia: Como inserir códigos HTML nas postagens do Blogger e Como inserir códigos HTML nas postagens do Wordpress), ou no sidebar do blog (leia: Como instalar um Widget no seu Blog -(Blogger)  e Como inserir Widgets no Wordpress sem a instalação de plugins).

Arquivos mp3 e ogg

Neste tutorial, vamos utilizar músicas nos formatos mp3 e ogg.

Se seus arquivos de músicas estiverem em outros formatos, utilize  um programa conversor.  Leia o artigo Como converter arquivos de áudio que apresenta o excelente programa Free Audio Converter.  Faça a conversão dos arquivos de áudio que você irá publicar sempre em mp3 e outra cópia em ogg.

No nosso exemplo, vamos utilizar a 9a. Sinfonia de Beethoven através dos arquivos mp3 e ogg.

Hospedando arquivos de áudio (mp3 ou ogg)

Para utilizarmos o display mostrado aqui, será necessário hospedar suas músicas em servidores na internet.

Se você possui um site hospedado, poderá enviar seus arquivos de áudio para o servidor via FTP (O que significa FTP e para que serve? – recomendo que utilize o software FileZilla).

Se você não possui um servidor ou não sabe com utilizar transferência via FTP, poderá deixar hospedado seus arquivos gratuitamente no Google Sites (leia: Como hospedar arquivos de música gratuitamente), ou em qualquer outro aplicativo para armazenagem de arquivos em nuvem.

No nosso exemplo, hospedamos os arquivos no servidor do Visual Dicas

http://visualdicas.com.br/musicas/SinfoniaNo9Beethoven.mp3

http://visualdicas.com.br/musicas/SinfoniaNo9Beethoven.ogg

Usando HTML5

O HTML5 trouxe muitas facilidades para os desenvolvedores de sites e blogs. Uma delas é permitir a inserção de áudio diretamente no nosso blog sem a necessidade de plugins externos, que muitas vezes causam problemas de compatibilidade com o browser ou com o sistema operacional utilizado.

A tag HTML5 utilizada para inserir áudio funciona praticamente em todos os navegadores. Entretanto, existe um problema de compatibilidade com o formato do arquivo de áudio utilizado. Veja abaixo uma tabela que mostra a compatibilidade dos formatos de áudio com diferentes navegadores. 

ARQUIVO

IE

FIREFOX

OPERA

CHROME

SAFARI

Ogg Vorbis

não

sim

sim

sim

não

MP3

sim

sim

sim

sim

sim

Wav

não

sim

sim

não

sim

Para contornar isto, devemos sempre utilizar os dois formatos de áudio, ogg e mp3, para permitir que o display funcione em quase todos os navegadores disponíveis.

Código do display HTML5

Para você utilizar o display HTML5, basta copiar o código abaixo e colar no blog. Depois altere o que estiver em vermelho, colocando os links dos arquivos ogg e mp3.

Obs.: Você também poderá alterar a frase “Seu browser não suporta este áudio”, que deverá aparecer somente em navegadores não compatíveis com os formatos utilizados.

accepted_48

<audio controls>
  <source src="SEU_ARQUIVO.ogg" type="audio/ogg" />
  <source src="SEU_ARQUIVO.mp3" type="audio/mpeg" /> 
Seu browser não suporta este áudio
</audio>

Veja como ficou o código do nosso exemplo:

<audio controls>
  <source src="http://visualdicas.com.br/musicas/SinfoniaNo9Beethoven.ogg" type="audio/ogg" />
  <source src="http://visualdicas.com.br/musicas/SinfoniaNo9Beethoven.mp3" type="audio/mpeg" /> 
Seu browser não suporta este áudio
</audio>

E abaixo o exemplo em ação:

 

Autoplay - Rodar o áudio automaticamente

Se você desejar que o áudio inicie automaticamente quando a página é carregada, basta acrescentar o atributo “autoplay”, ficando o código da seguinte forma:

accepted_48

<audio controls autoplay>
  <source src="SEU_ARQUIVO.ogg" type="audio/ogg" />
  <source src="SEU_ARQUIVO.mp3" type="audio/mpeg" /> 
Seu browser não suporta este áudio
</audio>

Agora é só substituir os textos em vermelho pelos arquivos mp3 e ogg hospedados na web. Assim, toda vez que o seu leitor rodar a página onde está inserido o código HTML, automaticamente tocará a música inserida.

byALF

29/01/2017

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - Visual Dicas

Publicações no Twiter

Na internet, quando encontramos um link, uma foto ou até mesmo um texto interessante, para compartilhá-los  é preciso copiar, fazer o login no Twitter, colar e enviar para a rede social.

Para reduzirmos este trabalho, vamos mostrar uma extensão gratuita do Mozilla Firefox que permite ao usuário enviar qualquer coisa para o Twitter através do menu de contexto do navegador.

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - Visual Dicas

Trata-se do aplicativo “Tweet Contex”, que com ele, você poderá tweetar um link, uma imagem, um texto selecionado, um link favorito e até a página toda da web, usando apenas o menu de contexto do Firefox. Veja a seguir como instalar e utilizar a extensão “Tweet Context”:

Instalando o complemento Tweet Context

Acesse o link: tweet context

Clique no botão [+ Adicionar ao Firefox].

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - Visual Dicas

Clique em [Instalar].

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - Visual Dicas

Depois de instalado, aparecerá uma mensagem no canto esquerdo do Firefox. Clique em  [Reiniciar agora], para fechar e abrir o navegador imediatamente;

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - Visual Dicas

Quando o Firefox abrir novamente, o “Tweet Context” já estará instalado. Para usá-lo, basta clicar com o botão direito do mouse sobre o componente que se deseja compartilhar no Twitter…

Utilizando o Tweet Context

1) Compartilhando um link de uma imagem no Twitter

Clique com o botão direito do mouse sobre a imagem que você deseja compartilhar. No menu de contexto que se abre, selecione [Tweet This Image].

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - Visual Dicas

Clique em [Tweetar] para compartilhar o link da imagem.

Obs.: Se desejar, faça os ajustes no texto mas sem excluir o link da imagem.

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - Visual Dicas

2) Compartilhando um link de redirecionamento

Da mesma forma, clique com o botão direito do mouse sobre o link que você deseja compartilhar. Selecione [Tweet This Link].

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - Visual Dicas

3) Compartilhando um texto

Selecione parte do texto que se deseja compartilhar. Clique com o botão direito do mouse sobre a seleção e selecione [Tweet Select Text].

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - Visual Dicas

Depois é necessário que você faça ajustes no texto para poder compartilhar apenas o limite obrigatório de 140 caracteres do Twitter.

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - Visual Dicas

4) Compartilhando a página da web.

Clique com o botão direito do mouse fora do conteúdo do site e selecione [Tweet This Page].

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - Visual Dicas

Clique em [Twetar] para compartilhar o link da página web.

image

5) Compartilhando uma aba do navegador

Clique com o botão direito sobre a guia do navegador e selecione [Tweet This Tab].

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - Visual Dicas

Clique em [Tweetar] para compartilhar a página web da guia do navegador.

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - Visual Dicas

6) Compartilhando um link favorito

Clique com o botão direito do mouse sobre um link favorito. Selecione [Tweet this Bookmark].

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - Visual Dicas

Clique em em [Tweetar] para compartilhar seu link favorito.

Como publicar qualquer coisa no Twitter usando o menu de contexto do Firefox - 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