Vinicius Webmaster

Tutorial – Usando cookies com jQuery

viniciuswebmaster — Fri, 04 Dec 2009 18:55:32 +0000

Yohooo galera, depois de séculos em branco por aqui [faculdade, provas, TCC, professores fdp, etc] , volto com um super tutorial de como manipular cookies com jQuery.

Para quem nem sabe o que é cookie, wikipédia ajuda! Neste caso, cookie não é biscoito! rs

Com o intuito de facilitar a nossa vida, um excelente plugin foi criado, o jQuery Cookie plugin. Acesse aqui a página do plugin ou a página do autor. Você pode baixa-lo, simplesmente clicando aqui.

O funcionamento dele é bem simples. Temos quatro ações bem definidas:

Pegando o valor do cookie:

$.cookie('exemplo_cookie');

Setando um valor para o cookie:

$.cookie('exemplo_cookie', 'valor_para_o_cookie');

Setando um valor com periodo para expiração do cookie:

$.cookie('exemplo_cookie', 'valor_para_o_cookie', { expires: 7 }); //o cookie irá expirar em 7 dias

Deletando o cookie:

$.cookie('exemplo_cookie', null);

Bem galera, por hora é isso! Como agora estou de férias, estou trabalhando no meu novo blog, que ainda está muito bagunçado, mas em breve estará de pé e com ótimas novidades!

Dúvidas, não deixem de perguntar nos comentários! ^^

Gostou? Divulgue no seu Twitter!

O desabafo de um WebDesigner

viniciuswebmaster — Fri, 02 Oct 2009 13:07:26 +0000

Bem galera, depois de muuuuito tempo sem postar, volto eu aqui com mais um videozinho, desta vez sobre a eterna discursão: ” O webdesigner deve programar, e o programador deve dar uma de designer?”

Na minha opinião, pra trabalhar como freelancer, deve-se entender de ambos, pra ter um resultado funcional e apresentável.

E principalmente, deve-se respeitar ambas as profissões, pq desenhar no puto do Photoshop é dificil pra carai!

Segue o Video:

Uma citação interessante que o Gustavo Campos fez no Grupo PHPMG:

Existem designers medíocres mas existem bons designers
Existe programadores medíocres mas existem bons programadores

Existem designers que programam bem
Existem programadores que desenham bem

Os quatro são maioria minoria em seus conjuntos. Bons designers são raros, bons programadores raríssimos, designers que programam bem são lenda e programadores que desenham bem eu só ouço falar.

Foi quase poético! rs

Se amanhã eu acordar inspirado, teremos nossa segunda parte de Carrousel com AJAX! Até! ^^

Carrosel com AJAX – Você pode! #1

viniciuswebmaster — Fri, 11 Sep 2009 19:43:03 +0000

Boa tarde galera, voltemos a falar um pouco do bom e velho jCarousel, agora com novidades!

Vamos fazer um carrosel que pega as URLs das imagens que deseja-se colocar no carrosel de um documento de texto (dynamic_ajax.txt) e gerar nosso carrosel dinâmicamente. Ao trabalho:

Inserimos as bibliotecas JavaScript (jQuery e jCarousel, conforme este post);
Inserimos os seguintes códigos na tag da nossa página (O código está comentado para facilitar o entendimento ^^):

Pronto! Basta a sua página e o arquivo de texto ‘dynamic_ajax.txt’ estarem na mesma pasta que funciona!

Dúvida? Então baixe o exemplo e teste ai no seu pc!

Após baixar, deve prosseguir da seguinte maneira:

O arquivo esta com extensão .doc. Mude-a para .zip, apenas apagando o “.doc”, ou abra com o seu software de descompressão predileto (winrar ou outros);
Coloque ambos arquivos em um mesmo diretório, de forma a poder controlar quais imagens aparecerão no carrosel através do arquivo de texto;
Pronto! Abra o arquivo ‘dynamic_ajax.html’ e veja o carrosel funcionando! Mude as URLs do bloco de notas, atualize seu navegador, e Voalá! Funciona esse trem! rs

Apenas lembrando que as imagens devem ter preferencialmente 45X45 pixels (se não tiver, o jCarrousel diminui, mas pode causar distorções!), e não pode ser um arquivo do seu computador, deve ser uma URL, ou seja, um link da internet, completo, desta forma:

http://farm3.static.flickr.com/2449/3909735243_cc35f8c488_s.jpg

No próximo post, abordarei sobre como fazer esse carrousel com php, pegando todos as imagens de um determinado diretório! Até lá!

Dúvidas e sugestões, a la vonté! Até mais! ^^

Animação da Pixar – Parcialmente Nublado

viniciuswebmaster — Sat, 05 Sep 2009 19:08:26 +0000

Galera, sem scripts dessa vez, afinal, é final de semana, feriado, bom pra descansar e descontrair.

Segue curta, muito bem feito e bem humorado, nos passa a lição de um bom amigo é um bom amigo! ^^

Uma história baseada em cegonhas e os bebês, com personagens importantes, como uma nuvem (Gus) e um cegonha (Peck). A realização de Peter Sohn, prevista para 29 de Julho de 2009.

Até a próxima! ^^

JCarousel + LigthBox – Contribuição

viniciuswebmaster — Wed, 02 Sep 2009 18:12:24 +0000

Boa tarde galera, postando mais uma vez, um script enviado por um leitor do blog, Professor Martins Mazza, que une o Jcarrousel e o LigthBox. Ele utilizou o Jcarousel, já explicado aqui e aqui, e o LigthBox, encontrado aqui.

Upei no Rapidshare, caso alguem encontre algum problema em baixar ou no código, me comunique.

MegaUpload

Até a próxima! ^^

Imagem ocupando todo o BackGround – Perfect

viniciuswebmaster — Tue, 01 Sep 2009 19:47:48 +0000

Opa! Após um grande tempo de pesquisa e estudos, voltei! E pra ficar! Hoje postarei uma matéria de CSS, que achei muito legal e resolvi traduzir (eu e o Google rs) e em breve postarei: “JCarousel e AJAX: Você pode!”. Aguardem…

Por hora, digo que navegando por esses mares de “zero”s e “um”s, achei um blog muito interessante, o CSSTricks (em inglês). Neste blog, o genial Chris Coyier, conhecido como Tio Chico Addans, postou sobre como fazer para que a imagem de BackGround ocupasse toda a tela, sem gerar scrollsbar e sem deixar a imagem “feia”, pixelizada (mais uma palavra que eu inventei), que seria aquele aspecto cheio de quadrados e desfocado.

Para tal façanha, o Gênio escreveu dois posts, um “ensaio“, que apresenta algumas falhas mas também é uma boa leitura, e o “Perfect“, que não precisa nem descrever. Neste post, lhes apresentarei uma técnica do “ensaio”, por ser muito simples e de alta qualidade (pode ser útil) e os dois da versão final. Mão na massa!

Método #1

Sem JavaScript. Só no CSS mesmo! Primeiramente, o código HTML:

Só isso mesmo! A imagem “bg.jpg” refere-se a imagem que se deseja utilizar. É importantíssimo que ela tenha uma altura maior que a altura máxima do monitor do visitante do seu site. Também é importantíssimo que ela tenha largura com tamanho bom, para evitar o efeito de pixelização, já citado posteriormente. Chega de bla-bla e vamos ao CSS:

#img.source-image {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

Pronto! Aqui um exemplo do próprio CSSTricks.

Um projeto muito interessante do Chris com esse conceito é o What’s The Weather? Vale a pena conferir.

Método #2

O método 2 é do post “Perfect full page BackGround Image”, e é uma técnica vista neste site. Pretende realizar as seguintes façanhas:

Preencher a página inteira com a imagem, sem espaços em branco;
Redimensionar a imagem conforme o necessário;
Manter as proporções da imagem;
A imagem está centralizada na página;
Não causa scrollbars;
Ser Cross-browser (compatívelcom todos os Browsers, exceto em alguns casos o IE6 (novidade!));
Não ser uma fantasia com Flash.

Primeiramente, criamos uma div com id #bg (para a imagem de fundo), e outra div com id# cont (para o conteudo), desta forma:


   
    
     
      
     
    
  

 

 
    Escreva seu conteudo aqui

Então, criamos os estilos:

img.bg {
	/* Regras de preenchimento do fundo */
	min-height: 100%;
	min-width: 1024px;

	/* Seleção de escala apropriada */
	width: 100%;
	height: auto;

	/* Posicionamento da Imagem */
	position: fixed;
	top: 0;
	left: 0;
}

@media screen and (max-width: 1024px){
	img.bg {
		left: 50%;
		margin-left: -512px; }
}

div#content {
	/* Super-Importante */
	/* Nosso conteudo DEVE aparecer sobre a Imagem */
	position: relative; 

	/* Algumas gracinhas pra ficar bonito, mas nao altera a funcionalidade */
	width: 500px;
	margin: 0 auto;
	background: #fff;
	padding: 20px;
	font-family: helvetica, arial, sans-serif;
	font-size: 10pt;
	line-height: 16pt;
	-moz-box-shadow: #000 4px 4px 10px;
	-webkit-box-shadow: #000 4px 4px 10px;
}

body {
	margin: 0;
	padding: 20px 0 0 0;
}

Veja um exemplo dessa prática. Muito interessante! Este segundo método foi criado pelo Doug Neiner, como versão alternativa, mas na minha opinião é melhor por não necessitar de JavaScript pra “acertar” problemas (apesar de apresentar alguns bugs no IE6 e IE7).

Por enquanto é só, mas em breve mais soluções ai pra galera!

Dúvidas, agradecimentos, soluções, reclamações, todos, exceto o último, serão bem vindos! ^^

Master Pages em PHP – função ob_start()

viniciuswebmaster — Tue, 11 Aug 2009 19:06:06 +0000

Boas galera, ando um pouco sumido mas agora voltei com força total…

Aulas começando, de volta ao trabalho… Novo ânimo.

Bem, neste post vou falar sobre uma adaptação em php para simular o efeito de Master Pages do ASP .NET 2.0. (oh, até o Gate$ ficou supreso… rs)

Como a maioria dos sites usa um mesmo padrão de design em suas páginas, mudando apenas o conteúdo, temos diversas adaptações em php. A mais utilizada é a divisão do site em áreas e a utilização do include() de cada arquivo em sua respectiva área (cabeçalho, conteudo, rodapé e assim por diante).

Uma outra forma de fazer, um pouco mais simples é através das funções de OB (Output Buffer ) ou simplesmente Buffer de saída. Para ativá-lo usamos a função ob_start(). Segue explicação adiante:

A função ob_start ativa o buffer de saída, não envia saida de script, aguarda até a você encerre o buffer.

Para encerrar o buffer temos 3 possibilidades, porém nesse tutorial utilizarei apenas o ob_end_clean(). Segue explicação:

A função ob_end_clean() limpa o buffer e o encerra, mas não envia nada à saida.

Utilizaremos este modo de limpeza pois antes de limpar o buffer, utilizaremos a função ob_get_contents() para recuperar o conteudo que armazenamos no buffer. Segue explicação:

A função ob_get_contents() retorna o conteúdo do buffer. De vital importância para armazenarmos o conteúdo do buffer em uma variável.

Bem, agora que estamos “por dentro” da teoria, vamos a prática. Neste exemplo, abordaremos um template simples, mas nada impede que tudo seja feito nas normas. Desejamos atinjir o seguinte layout:

Primeiramente, definiremos nossa “Master Page”, com todos os elementos de design que irão estar presentes em todas as páginas. Nela existirá um campo para o conteúdo especifico. Vamos ao código:

/master.php




   <?php echo $pagetitle; ?>


   
      
        
        Template do Cabeçalho
      
      
        Link 1
        Link 2
        Link 3
        Link 4
      
    
    

    
      
        Barra de navegação Lateral
          

          

          Link 1

          Link 2

          Link 3

        
        
          
        
      
   
   

   
     
       Template do Rodapé

Agora, nas páginas específicas, seguimos 3 passos:

preenchemos o buffer com o conteudo especifico, armazenamos em uma variável ($pagemaincontent) e limpamos o buffer;
Atribuimos valor às variáveis que iremos utilizar (neste caso, apenas o título da página, mas poderiamos colocar diversas variáveis);
Fazemos um include da Master Page: include(“master.php”);.

Vamos ao código:

/index.php


 Texto específico desta página
 Lorem ipsum dolor sit amet, consectetuer adipiscing
 elit, sed nonummy nibh euismod tincidunt ut laoreet
 dolore magna aliat volutpat. Ut wisi enim ad minim
 veniam, quis nostrud exercita ullamcorper
 suscipit lobortis nisl ut aliquip ex consequat.
 


 Duis autem vel eum iriure dolor in hendrerit in
 vulputate velit molestie consequat, vel illum
 dolore eu feugiat nulla facilisis ats eros et
 accumsan et iusto odio dignissim qui blandit
 prasent up zzril delenit augue duis dolore te
 feugait nulla facilisi. Lorem euismod tincidunt
 erat volutpat.

Pronto! Procedemos da mesma forma para outras páginas, além do index. Bonito, rápido, simples e prático!

Por hora é isso… Para mais detalhes sobre cada função, links para o Manual de PHP em Português BR:

Dúvidas? Sugestões? Você faz diferente? Acha melhor? Comente e debateremos com prazer! ^^

Campanha: Atualize seu navegador!

viniciuswebmaster — Sat, 01 Aug 2009 05:25:00 +0000

Boas galera, ainda estou garrado tentando resolver o problema do José (desculpe a demora), estou acompanhando o curso de PHP e lendo sobre Frameworks de php (Zend e Cake). Breve teremos muitas novidades por aqui.

Por hora, venho cumprindo uma função de bem para a sociedade, divulgando a Campanha Atualize seu navegador!

É muito importante ter seu navegador atualizado para poder desfrutar de todos os recursos que a web vem nos proporcionando a cada dia!

Como um exemplo simples vou citar a pagina de exemplo do próprio JCarousel, item já citado neste blog, aqui.

Vejam este exemplo. No Firefox 3, a div que contém as imagens fica com a borda arredondada, graças a propriedade
-moz-border-radius: 10px; atribuida a esta div . Já no Internet explorer 8, nada acontece, a div aparece com bordas quadradas, como se nenhuma configuração existisse.

Bem, essa é uma das muitas desvantagens de se utilizar um navegador ruim. Abaixo segue os links para atualizar seu navegador ou baixar um novo:

Por hora é isso, comentários e sugestões serão sempre bem vindos. ^^

Curso de PHP

viniciuswebmaster — Fri, 24 Jul 2009 14:30:27 +0000

Boas galera, ando meio sumido, mas estou procurando uma solução pro problema do nosso amigo José.

Paralelamente, estou acompanhando um curso de php, ministrado online pelo Mayron Cachina.

O curso começou a poucos dias, portanto quem tiver interesse em aprender php, pode ter certeza que é um bom investimento de tempo.

A idéia do curso surgiu no Fórum Webly, e após um tempo de maturação, vem a público com uma organização excelente!

O curso esta sendo dado em forma de posts em um blog, o Curso de PHP.

É isso ai, breve com mais códigos e tutoriais! ^^

JCarousel – Configurações avançadas

viniciuswebmaster — Wed, 15 Jul 2009 05:38:29 +0000

Bem, conforme prometido, aqui estão as configurações avançadas do plugin JCarousel. Ele é extremamente bem feito, e por isso é muito fácil configurar. Vou demonstrar aqui apenas algumas das funcionalidades, mas, com um pouco de experiência em JavaScript e JQuery pode-se fazer milhões de coisas com esse script.

Pra quem não viu as configurações básicas do JCarousel, aqui estão!

Bem, Let’s Go!

Skin

Bem modificar o Skin é muito fácil. E criar um também! No próprio pack do JCarousel existem dois skin’s, o Tango, que vem como default, e o IE7 da Microsoft, como opção. Lembrando que o skin deve conter o arquivo .css e as imagens as quais ele referencia, tanto como setas, como possíveis bordas e/ou sombras. Vou ensinar primeiramente como trocar do skin Tango para o IE7. Vamos ao passo a passo:

Mude a linha que faz referência ao skin, conforme abaixo:

para:

Depois, na lista de imagens do seu carosel, troque também da seguinte forma:

para:

Pronto, só isso! Queria mais? rs

Quantidade de Imagens que aparecem por vez

A quantidade de imagens que aparecem por vez, por default é 3. Mas, vamos ver como fazer pra alterar pra 2 imagens por vez. Vamos aos passos:

Insira a seguinte configuração na tag head da sua página:

Agora, no arquivo “skin.css”, dentro da pasta do skin selecionado, faça as seguintes adaptações:

.jcarousel-skin-tango .jcarousel-container-horizontal {
    /* Definir tamanho do div que contém as imagens
     * Aqui o width deve ser = (visible * tamanho_da_img) + 8
     * Neste exemplo: width = (2 imagens x 75px) + 8 = 158px */
     width: 158px;
     padding: 20px 40px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
     /* Define a área visivel
      * Aqui o width deve ser igual em .jcarousel-container-horizontal */
      width:  158px;
      height: 75px;
}

Pronto, matei dois coelhos com uma cajadada só! Agora já sabemos controlar o número de imagens que aparecem por vez no carrosel, e ainda vimos como controlar quantas imagens vão passar por vez, setando a configuração scroll no item 1.
Agora que começamos a falar do arquivo “skin.css”, achamos os segredos da beleza forma do carrosel! Vamos explorá-la! ^^

Mudando as propriedades da div (do box) que contém o carrosel

Bem, agora vem a personalização de verdade! No arquivo “skin.css”, a primeira coisa que é feita é a definição da div que contém o carrosel, que da toda a diferença no seu trabalho.

Nos skins que temos, que ja vem com o pack do JCarousel, esta div é definida assim:

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px; /* torna as bordas arredondadas (nao funciona no IE)*/
    background: #CFC; /* Cor de fundo */
    border: 1px solid #3C0; /* propriedades da borda (espessura, tipo e cor)*/
}

Ai, você pode fazer o que quiser com a div, colocar uma imagem legal de fundo, ao inves de uma cor sólida, pode ainda definir o background como transparent para mostrar o background que a própria página ja possui, pode fazer o que quiser mesmo!
Quem tiver idéias, sugestões, comenta ai que eu tento fazer por aqui! ^^

Bem essas configurações são avançadamente básicas, porque só mexemos com css e parâmetros do código, e como é um código open source, vamos fuçar a vontade!

Quem obtver resultados interessantes, conhecer projetos com o mesmo fim, ficarei muito feliz em publicar aqui no meu blog!

No mais, espero que aproveitem, e até o próximo post! ^^