Tutorial - Slider lateral para banners ou publicidade no blog
Algumas pessoas tem me pedido para fazer um tutorial de como inserir um slider lateral para blogger que fique passando as imagens de promoções ou mesmo uma publicidade. Separei aqui um código bem simples e que deve suprir essa necessidade de quase todos os blogueiros. O slider que vou mostrar como montar é semelhante ao do lado, ele fica passando em ordem as imagens com um efeito de pagina de livro sendo virada. Caso queiram ver ele em funcionamento podem dar uma olhada no blog da minha namorada http://www.vicio-de-leitura.com/ que lá esta ele instalado.
Para começar devemos adicionar um widget na lateral do blog onde você deseja que apareça o slider, o widget deve ser do tipo HTML.
Após inserir vamos copiar o código abaixo e colar no corpo do widget que adicionamos.
<style>
#slide_lista ul, li{
display: block;
}
#publicidade{
margin: auto;
padding: 10px;
width: 250px;
height: 300px;
overflow: hidden;
border: 1px solid #fff;
border-radius: 5px;
background: rgba( 255 , 255 , 255 , .5 );
position: relative;
}
#box-1, #box-2, #box-3, #box-4{
width: 250px;
height: 250px;
}
#pub_pager{
text-align:center;
}
#pub_pager a{
padding: 5px;
margin: 3px;
background: grey;
font-size: 8px;
color: white;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://yourjavascript.com/151407432/jquery-cycle-all.js"></script>
<script type="text/javascript">
$( document ).ready( function(){
$( "#publicidade ul" ).cycle({
fx: "shuffle",
//exemplo: shuffle, zoom, curtainX, turnDown. scrollHorz
pager: "#pub_pager"
});
} );
</script>
<div id="publicidade">
<ul id='slide_lista'>
<li id="box-1"> aqui dentro voce vai colocar o codigo da sua imagem </li>
<li id="box-2"> aqui dentro voce vai colocar o codigo da sua imagem </li>
<li id="box-3"> aqui dentro voce vai colocar o codigo da sua imagem </li>
</ul>
<div id="pub_pager"></div>
</div>
Notem que destaquei onde vocês devem colar o código da sua imagem ou link para que apareça no slider. Caso seja necessário mais de 3 sliders, deve-se adicionar linhas iguais as que estão no código e seguir a sequencia numérica que ele apresenta.
"<li id="box-4.>".Espero que ajude! qualquer dúvida podem deixar nos comentarios. ;)
Alterando porta do WAMP para 81
Hoje precisei rodar o WAMP no computador da empresa porém ele já estava com o ISS instalado e ocupando a porta 80. Então a saída foi alterar a porta do WAMP para 81 ou qualquer outra porta que esteja vaga. Preparei um tutorialzinho para quem precisar fazer esta modificação também.Abra o arquivo httpd.conf do Apache. Geralmente se encontra em:
C:\wamp\bin\apache\apache2.2.8\conf\httpd.conf
Procure o trecho "Listen 80" e altere para "Listen 81".
Salve e feche o arquivo.
Abra o arquivo wampmanager.tpl. Geralmente se encontra em:
Procure o trecho "Listen 80" e altere para "Listen 81".
Salve e feche o arquivo.
Abra o arquivo wampmanager.tpl. Geralmente se encontra em:
C:\wamp\wampmanager.tpl
Procure por "http://localhost/" e altere para "http://localhost:81/" (São três no total).
Procure por "${w_testPort80}" e altera para "${w_testPort81}".
Salve e feche o arquivo.
Procure por "http://localhost/" e altere para "http://localhost:81/" (São três no total).
Procure por "${w_testPort80}" e altera para "${w_testPort81}".
Salve e feche o arquivo.
Abra o arquivo testPort.php. Geralmente se encontra em:
C:\wamp\scripts\testPort.php
Procure por "80" e altera para "81" (São três no total).
Salve e feche o arquivo.
Procure por "80" e altera para "81" (São três no total).
Salve e feche o arquivo.
Abra o arquivo english.lang. Geralmente se encontra em:
C:\wamp\lang\english.lang
Procure por “$w_testPort80 = ‘Test Port 80";” e altera para “$w_testPort81 = "Test Port 81";.
Salve e feche o arquivo.
Procure por “$w_testPort80 = ‘Test Port 80";” e altera para “$w_testPort81 = "Test Port 81";.
Salve e feche o arquivo.
Abra o arquivo testPortForInstall.php.
Geralmente em:
C:\wamp\scripts\testPortForInstall.php
Procure por “80” e altera para “81”.
Salve e feche o arquivo.
Reinicie o seu WampServer e teste.
Reinicie o seu WampServer e teste.
Google cria óculos de realidade virtual com papelão
Em
meio a uma conferência recheada de novidades, com direito ao novo Android, o
Google chamou a atenção ao apresentar um protótipo um tanto curioso: trata-se
do Cardboard, aplicativo que se transforma um simples smartphone com Android em
um óculos de realidade virtual.
O
"dispositivo" utiliza qualquer smartphone Android 4.2 ou superior
como tela e deve ser montado pelo próprio usuário, seguindo as instruções
disponíveis no site do projeto e fazendo download do molde. Entre as
possibilidades estão utilizar até uma caixa de pizza.
Os
componentes necessários são: papelão, lentes biconvexas de 40 mm, imãs, velcro
e elásticos de borracha. Opcionalmente também é possível usar uma tag NFC para
que o smartphone detecte de forma automática o que foi inserido no cardboard.
Como
é um projeto em desenvolvimento, existem apenas demonstrações que, quando
instaladas no smartphone, criam vários cenários de realidade virtual. Em um
deles é possível "sobrevoar" a cidade de San Francisco utilizando os
movimentos da cabeça para controlar o voo. Outro app permite ver fotos
panorâmicas em 360 graus, enquanto um terceiro simula vídeos do Youtube como se
estivessem projetados em uma tela de cinema.
O
Cardboard não é um produto, mas algo destinado a desenvolvedores que acreditem
ser possível utilizar telas de smartphones para criar uma experiência de
realidade virtual. Anunciado como projeto experimental, ele não terá suporte
oficial na mesma qualidade dos outros serviços.
Confira o Video do teste do produto:
Eu particularmente achi o projeto muito legal e já tinha pensado em tentar fazer algum tipo de óculos de realidade virtual porém o mais importante que é a tela, ainda é de difícil acesso. Porém com essa iniciativa talvez fique mais acessível esse tipo de tecnologia para todos. Mas eaí pessoal, o que vocês acham?
Enviar formulário php sem refresh com JQuery
E aí pessoal! Estou bastante sumido, vários meses sem postar no blog, porém estou com várias novas ideias para o blog e em breve vocês vão acompanhar essas mudanças! (para melhor haha). Mas vamos ao que interessa! Andei procurando formas de enviar um formulário comum em HTML para o php sem sair da pagina e a forma mais fácil que encontrei foi usando a nossa querida biblioteca JQuery que vem facilitando a vida de todos os web designers! Bom então vamos ao tutorialsinho haha.Vamos adicionar este código abaixo da tag <head>. Ela irá chamar a JQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#nosso_form').submit(function(){ var dados = jQuery( this ).serialize(); jQuery.ajax({ type: "POST", url: "processa.php", data: dados, success: function( data ) { alert( data ); //Aqui irá dar um alerta conforme o retorno do php } }); return false; }); }); </script>
Notem que destaquei dois trechos do código. Onde está "nosso_form" vamos substituir pelo ID da nossa form. Onde está "processa.php" vamos colocar o arquivo php que receberá as informações do form.
E o nosso formulário ficara assim:
<form method="post" action="" id="nosso_form">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="" /></label>
<label>Email: <input type="text" name="email" value="" /></label>
<label>Telefone: <input type="text" name="telefone" value="" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
Espero que seja util para todos! qualquer dúvida podem perguntar que eu tentaria ajudar!
Novo layout blog Vicio de Leitura
Pessoal, dei uma passadinha aqui pra mostrar o novo layout que desenvolvi para o blog da minha namorada e aproveito pra convidar vocês a dar uma passadinha no blog dela. Lá ela posta novidades, resenhas e tudo sobre o mundo dos livros. Logo estrearei uma coluna junto com ela lá no blog, então deem uma passadinha lá que prometo, não iram se arrepender e aproveite para apreciar o novo layout. Abraços.
[Resenha] Filme Os estagiarios - Google
E ai pessoal, tudo certo? Hoje trago aqui um lançamento de um filme chamado "Os Estagiarios" que retrata bem como é a vida de trabalhador na empresa mais famosa do mundo! O Google!
Não sei se tem como chamar de "trabalhador" pois parece mais uma temporada de férias do que uma empresa! haha.
Bem, o filme conta a história de dois vendedores que já tem lá seus 40 anos e se veem forçados a achar uma alternativa de emprego pois sua firma foi fechada. Um deles então tem a ideia de se cadastrar em um estagio da google! O filme conta como os estagiários devem progredir nas tarefas para conseguir o emprego tão desejado e para isso são separados em equipes. Há várias cenas no filme que fogem um pouco do tema, algumas cenas um tanto pornográficas em boates e etc, porém nada de outro mundo, algo que você ja deve estar acostumado a assistir em novelas da rede globo não é verdade? hahahaha! Resumindo o filme é muito legal, bastante geek e com certeza se você não curte técnologia e esse mundo todo por trás dos videogames e superheróis, então não vai entender metade das piadinhas internas mostradas no filme, mas vale a pena assistir.
Titulo Original: The Intership
Ano de produção: 2013
Diretor: Shaw Levy
Genero: Comédia
Classificação: 12 Anos
Billy (Vince Vaughn) e Nick (Owen Wilson) são grandes amigos e trabalham
juntos como vendedores de relógios. Eles são pegos de surpresa quando
seu chefe (John Goodman) fecha a empresa, por acreditar que o negócio
esteja ultrapassado. Com problemas financeiros, eles conseguem a
inscrição em uma seleção de estágio no Google. Mesmo sem terem a
garantia que serão contratados, eles partem para a sede da empresa e lá
precisam lidar com a diferença de idade entre eles e os demais
competidores.
Não sei se tem como chamar de "trabalhador" pois parece mais uma temporada de férias do que uma empresa! haha.
Bem, o filme conta a história de dois vendedores que já tem lá seus 40 anos e se veem forçados a achar uma alternativa de emprego pois sua firma foi fechada. Um deles então tem a ideia de se cadastrar em um estagio da google! O filme conta como os estagiários devem progredir nas tarefas para conseguir o emprego tão desejado e para isso são separados em equipes. Há várias cenas no filme que fogem um pouco do tema, algumas cenas um tanto pornográficas em boates e etc, porém nada de outro mundo, algo que você ja deve estar acostumado a assistir em novelas da rede globo não é verdade? hahahaha! Resumindo o filme é muito legal, bastante geek e com certeza se você não curte técnologia e esse mundo todo por trás dos videogames e superheróis, então não vai entender metade das piadinhas internas mostradas no filme, mas vale a pena assistir.
Titulo Original: The Intership
Ano de produção: 2013
Diretor: Shaw Levy
Genero: Comédia
Classificação: 12 Anos
Billy (Vince Vaughn) e Nick (Owen Wilson) são grandes amigos e trabalham
juntos como vendedores de relógios. Eles são pegos de surpresa quando
seu chefe (John Goodman) fecha a empresa, por acreditar que o negócio
esteja ultrapassado. Com problemas financeiros, eles conseguem a
inscrição em uma seleção de estágio no Google. Mesmo sem terem a
garantia que serão contratados, eles partem para a sede da empresa e lá
precisam lidar com a diferença de idade entre eles e os demais
competidores.
Trailer do Filme
Assinar:
Postagens
(
Atom
)
