CSS no Lanche » JavaScript

Vimeo Lightbox Gallery

Pedro Rogério — Mon, 14 Nov 2011 12:43:49 +0000

Em um post anterior, mostrei aqui como era possível criar um lightbox com vídeos do Youtube. Dessa vez, vou mostrar aqui um exemplo com vídeos do Vimeo.

O HTML é muito simples, simplesmente criei uma div com um link dentro, esse mesmo link deve conter o link para o vídeo do Vimeo, como você pode ver abaixo:


	Play

Os thumbnails de cada vídeo são obtidos através da API do Vimeo. O resto fico por conta do JavaScript.

$.fn.center = function (relation) {
	var center_in = (relation) ? $(relation) : $(window);

	this.css("position","absolute");
	this.css("top", ( center_in.height() - this.height() ) / 2+center_in.scrollTop() + "px");
	this.css("left", ( center_in.width() - this.width() ) / 2+center_in.scrollLeft() + "px");
	this.css("z-index", "200");
	return this;
};

function vimeoid(url) {
	var vid = url.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/);
	vid = vid[1];
	return vid;
};

(function(){
	$("a[rel='lightbox']").each(function(){
		var that = this,
		url = $(this).attr('href'),
		id = vimeoid(url),
		thumb = $('');

		$.getJSON('http://www.vimeo.com/api/v2/video/' + id + '.json?callback=?', {format: "json"}, function(data) {
			thumb.attr({
				"src" : data[0].thumbnail_large,
				"alt" : data[0].title,
				"title" : data[0].title
			});
			$(that).append(thumb);
			$(that).append(''+data[0].title+'')
		});
	});

	var $overlay = $('');
	var $lightbox = $('[ fechar ]');
	$("a[rel='lightbox']").click(function(e){
		e.preventDefault();
		var href = $(this).attr('href'),
		id = vimeoid(href);
		$overlay.appendTo('body');
		$lightbox.find('#lightbox-inner').html('');
		$lightbox.appendTo('body').center();
	});

	$('#lightbox a').live('click', function(e){
		e.preventDefault();
		$('#overlay').remove();
		$('#lightbox').remove();
	});
}());

Vimeo Lightbox Gallery

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Ajax RSS Widget

Pedro Rogério — Thu, 27 Oct 2011 13:08:18 +0000

Já demonstrei em meu outro blog anteriormente como é possível fazer a leitura de feeds de outros site com a Google JSAPI, tudo bem, dessa vez acabei implementando um Widget, que você pode utilizar em qualquer site.

O HTML é extremamente simples como você pode ver abaixo:

E depois, com a utilização de jQuery, eu monto meu widget:

var Feed = {
	widget: function(url, callback) {
		$.ajax({
			url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
			dataType: 'json',
			success: function(data) {
				Feed.callback(data.responseData.feed);
			}
		});
	},
	callback: function(feed) {
		var entries = feed.entries;
		for (var i = 0; i < entries.length; i+=1) {
			$('#updates').append('' + entries[i].title + '<\/a><\/li>');
		}
		$('#updates').append('
Veja mais<\/a><\/li>');
	}
};

Feed.widget('http://feeds2.feedburner.com/pinceladasdaweb'); //RSS do site aqui

Ajax RSS Widget

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Animated Login Form

Pedro Rogério — Mon, 03 Oct 2011 13:16:38 +0000

Quer implementar um formulário de login animado no seu site? Deixo aqui um exemplo que vi no site Forrst. Não preciso nem dizer para testar em browsers modernos né?

Animated Login Form

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

jQuery Tabs

Pedro Rogério — Mon, 26 Sep 2011 11:20:52 +0000

Quer desenvolver um sistema de tabs (abas) mas não quer fazer isso com JavaScript puro? Então utilize jQuery. Existem hoje várias formas de se criar tabs com jQuery, deixo aqui uma das soluções.

Antes de tudo, vamos ao nosso HTML:

Como podem ver, não existe muito segredo no HTML, pois a coisa começa mesmo a ficar interessante no JavaScript:

$(function () {
    $('.box').each(function() {
        var content = $(this).find('.content'),
            tab     = $('> ul li', this);
        $('div', content).eq(0).show();
        tab.click(function () {
            tab.removeClass('active');
            $(this).addClass('active');
            $('div', content).hide().eq($(this).index()).show();
        });
    });
});

jQuery Tabs

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Youtube Lightbox Gallery

Pedro Rogério — Fri, 29 Jul 2011 06:53:28 +0000

Nesse novo experimento resolvi criar uma galeria com os vídeos de um usuário qualquer do youtube com o efeito de polaroid criado só com CSS3, que ao você clicar no thumbnail ele abre seu respectivo vídeo em um lightbox. Mas atenção, devido a utilização de propriedades avançadas do CSS essa galeria só vai funcionar corretamente em browsers modernos (WebKit e Firefox).

Como é o funcionamento dessa galeria: Eu leio o feed RSS do usuário no Youtube, transformo o mesmo em um JSON através do plugin jGFeed, após percorro esse JSON através das informações que eu quero, como a URL do vídeo e sua respectiva descrição.

Os thumbnails de cada vídeo são mostrados diretamente do Youtube, e utilizo o plugin jYoutube para fazer isso.

O restante das funções são aquelas que você acaba utilizando no seu dia-a-dia.

Caso você queira testar com seu usuário do Youtube ou qualquer outro, baixe aqui o fonte, abra o arquivo lib.js e procure pela seguinte função:

gallery('googlechrome', 20);

Aqui googlechrome é o nome de usuário e 20 é o número de vídeos que serão mostrados. Altere a seu gosto. Sugestões para melhoras no código são sempre bem vindas.

Youtube Lightbox Gallery

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Slideshow com Legendas desenvolvido em jQuery

Pedro Rogério — Mon, 31 Jan 2011 11:18:18 +0000

Se lembram que eu já ensei por aqui a desenvolver facilmente um slideshow com jQuery, ótimo para ser usado em portifólios. Dessa vez vou ensinar mais uma vez a desenvolver um slideshow com a utilização de jQuery e com a diferença de que dessa vez teremos legendas no rodapé das imagens, ideal para ser utilizado em blogs onde podem ser mostrados os últimos posts como destaque.

Primeiramente, vamos ver como fica o nosso HTML:


        
        	
            Panasonic Evolt
        
        
        	
            Arwey Functional Notebooks
        
        
        	
            Slime Nickelodeon
        
        
        	
            Cat

Como podem ver, eu tenho uma div pai, e cada destaque fica dentro de uma div com a classe “slide”. Dentro dessa div com a classe slide então coloca-se a imagem de destaque e a legenda. Após, devemos efetuar algumas configurações no CSS para que no final tudo funcione perfeitamente:

#slideshow {
    height:376px;
	width:490px;
	margin:0 auto;
	overflow:hidden;
}

#slideshow .slide {position:relative}

#slideshow .slide p {
	background:url(img/overlay.png) repeat;
	color:#fff;
	font:1.8em Georgia, "Times New Roman", Times, serif;
	padding:10px;
	position:absolute;
	bottom:0;
	margin:0;
	width:470px;
}

Pra bom entendedor meia palavra basta, o CSS é bem simples e fácil de entender. Agora o resto fica a cargo do JavaScript:

$(document).ready(function(){
	var speed = 5000;
	var run = setInterval('slideSwitch()', speed);

	$('#slideshow').hover(function(){
		clearInterval(run);
	},function(){
		run = setInterval('slideSwitch()', speed);
	});
});

function slideSwitch() {
  	$('#slideshow .slide:last').after($('#slideshow .slide:first'));
}

Criei uma variável chamada speed onde eu adicionei o valor de 5000 (valor deve ser declarado em milisegundos, equivalente a 5 segundos), que é o tempo que cada slide é mostrado. Após uma outra variável chamada run onde ele chama a função slideSwitch() que é executada a cada 5 segundos. A função slideSwitch() não faz nada mais do que pegar o primeiro item e inserir porteriormente ao último.

O código que fica entre as linhas 5 e 10 são responsáveis por ao usuário colocar o mouse encima do slide ele pausar e ao retirar voltar a ser executado. Vejam o exemplo. Para fazer o download dos arquivos de exemplo, basta clicar aqui.

Slideshow com Legendas desenvolvido em jQuery

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Centralizar imagem na vertical com JavaScript

Pedro Rogério — Mon, 08 Mar 2010 12:29:34 +0000

No post anterior mostrei como é possível centralizar uma imagem na horizontal e vertical com CSS, independente do tamanho da imagem. A solução utilizava algumas propriedades CSS e uma tag vazia no HTML. Para os semanticistas de plantão isso é um crime.

O que podemos fazer então, criar aquela tag via JavaScript, ou então utilizar uma solução com a utilização de jQuery e o resultado final obtido será o mesmo. Primeiro, vamos a marcação HTML, observe que remove a tag span do código utilizada no exemplo anterior e adicionei uma classe a imagem só para identificação no JavaScript:

Agora vamos ao JavaScript, também muito simples e o código está comentado facilitando a compreensão:

$(window).load(function(){
	//Pega a altura do seu pai e armazena em uma variável
	var parent_height = $('.centralized').parent().height();

	//Pega a altura da imagem e armazena em uma variável
	var image_height = $('.centralized').height();

	//Calcula a altura do pai menos a altura da imagem e divide por 2
	//É onde obtemos a distancia que a imagem deve ficar do topo e a armazenamos em uma variável
	var top_margin = (parent_height - image_height)/2;

	//Aqui é onde aplicamos a margem do topo a imagem
	$('.centralized').css( 'margin-top' , top_margin);
});

Observem agora o exemplo.

Centralizar imagem na vertical com JavaScript

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Recomendações de livros

Pedro Rogério — Mon, 29 Jun 2009 11:06:04 +0000

Nesse post vou tentar mostrar alguns ótimos livros que recomendo para aqueles que querem ingressar no mundo do desenvolvimento web, pois, quem trabalha nesse ramo sabe que deve devorar informação, seja ela de sites, blogs ou livros. Alguns deles já são bem conhecidos pelas pessoas, outros não, mas fica aqui a dica:

Construíndo sites com CSS e (x)HTML

Esse foi o primeiro livro totalmente nacional, lançado pelo Maujor sobre CSS, para quem quer aprender CSS esse deve ser ser livro de cabeceira. Este livro aborda a técnica de construção de sites baseada nas Web Standards do W3C, cujo princípio básico é separar a marcação (X)HTML da apresentação visual. De forma didática, são apresentadas as razões da criação das Web Standards e suas vantagens, a sintaxe (X)HTML e CSS, as propriedades CSS e a criação de layouts fixos e elásticos multicolunares. Os assuntos tratados são ilustrados com códigos, exemplos e figuras que mostram a renderização no navegador. No site de apoio, o leitor encontrará os códigos para download e informações complementares sobre o livro.

Criando sites com HTML

Construir sites em conformidade com os Padrões Web do W3C, mais do que uma opção de desenvolvimento, é uma exigência do mercado. Resgatar a finalidade original da linguagem de marcação HTML, tal como idealizada pelo seu inventor, Tim Berners-Lee é a palavra-chave que norteia o moderno conceito de escrever HTML. Este livro descreve de forma detalhada cada um dos elementos do HTML, dando ênfase a sua finalidade. Um capítulo é dedicado exclusivamente às folhas de estilo em cascata (CSS), que forma uma dupla inseparável com HTML.

Esse foi o 2º livro escrito por Maujor.

Criando Páginas Web com CSS

Com lições passo a passo ricamente ilustradas, o livro reúne técnicas de CSS úteis e modernas para você começar a criar (ou aprimorar) imediatamente seu site Web, tornando seu layout profissional compatível com qualquer tipo de navegador. Este livro o ajudará a tornar um especialista em CSS num piscar de olhos, oferecendo as mais avançadas dicas, truques e técnicas que desmistificarão o universo de bugs e segredos sobre os quais você talvez já tenha ouvido falar.

Use a Cabeça HTML com CSS e XHTML

Use a Cabeça! HTML com CSS e XHTML 2a Edição permite que você evite a vergonha de pensar que as cores compatíveis com a Web ainda contam, e a tolice de perder uma tag em suas páginas. O melhor de tudo é que você aprenderá HTML, XHTML e CSS de uma maneira que não o fará dormir. Se você já leu algum livro da série Use a Cabeça!, sabe o que esperar: um formato visualmente rico, projetado para se adaptar à forma como seu cérebro funciona. Usando as últimas descobertas da neurobiologia, ciência cognitiva e teoria do aprendizado, este livro colocará o HTML e as CSS em seu cérebro para sempre. Aprenda os verdadeiros segredos da criação de páginas Web e porque tudo o que seu chefe disse a você sobre as tabelas HTML provavelmente estava errado (e o que fazer para dar tudo certo). E, o mais importante, concorde com seu colega de trabalho e impressione os amigos quando ele mencionar casualmente como o HTML dele agora está perfeito e a CSS é uma folha de estilos externa.

Profissional Padrões de Projeto com CSS e HTML

Usar padrões de projetos para estilizar (X)HTML e CSS poupará seu tempo e esforço. Profissional Padrões de Projetos com CSS e HTML contém mais de 350 padrões de projetos prontos para uso que podem ser combinados para criar um número ilimitado de soluções para projetos. Você pode se beneficiar instantaneamente de seu poder reutilizável e de sua eficiência simplesmente colocando-os em seu código e ajustando alguns valores!

Cada padrão funciona em todos os principais navegadores da web, incluindo o Internet Explorer 7, o Internet Explorer 6. Este livro será inteiramente útil e prático – ele elimina a necessidade de hacks, truques, testes sem fim, e ajustes constantes nos navegadores para fazer algo funcionar.

Ele é mais do que simplesmente um livro de receitas. Cobre sistematicamente cada característica utilizável de CSS e combina essas características com HTML para criar padrões reutilizáveis. Cada padrão possui um nome intuitivo para facilitar ao procurar, para lembrar e para fazer referência a ele. A acessibilidade e as melhores práticas foram cuidadosamente projetadas em cada padrão de projeto, em cada exemplo e em cada código fonte.

JavaScript – O Guia Definitivo

Esse livro fornece uma descrição completa do núcleo da linguagem JavaScript, do padrão DOM e legado implementados nos navegadores Web. O livro inclui exemplos sofisticados que mostram como tratar tarefas comuns, como a validação de dados em formulários, o trabalho com cookies e a criação de animações portáveis usando DHTML. O livro também contém seções de referência detalhadas que abrangem o núcleo da API JavaScript, a API “legada” do lado cliente e a API padrão DOM do W3C, documentando cada objeto, método, propriedade, construtor, constante, e função de JavaScript, assim como o tratamento de eventos nessas APIs. Esta é uma leitura particularmente útil para os desenvolvedores que trabalham com navegadores Web compatíveis com os últimos padrões, como o Internet Explorer 6, o Netscape 6 e o Mozilla. Desenvolvedores HTML podem aprender a usar JavaScript para construir páginas Web dinâmicas. Programadores experientes podem encontrar rapidamente as informações necessárias para começar a escrever programas sofisticados em JavaScript. Este livro é uma referência indispensável para todos os programadores de JavaScript, independentemente do nível de experiência.

jQuery: A Bíblia do Programador JavaScript

jQuery é uma poderosa biblioteca JavaScript criada para simplificar a criação de efeitos visuais e de interatividade em websites. Desenvolvedores especialistas em JavaScript, ao conhecerem as maravilhas de que a biblioteca é capaz, com certeza vão se perguntar: ?Por que não pensei nisso antes??. Iniciantes, com noções rudimentares de JavaScript, experimentarão uma curva de aprendizado inimaginável para aqueles experientes com a linguagem.

jQuery propicia a criação de scripts de uma forma tão simples e intuitiva que consegue com meia dúzia de linhas os mesmos efeitos de um script de 30 a 40 linhas desenvolvido com JavaScript tradicional. Simplicidade foi a diretriz que norteou John Resig na criação da biblioteca. Este livro, na primeira parte, apresenta a biblioteca e um estudo da sintaxe e emprego dos seletores e comandos jQuery, desenvolvendo scripts de exemplo para cada um deles, que podem ser examinados ao vivo em arquivos disponíveis para download no site do livro. Na segunda parte, são desenvolvidos vários scripts de emprego real, todos comentados e disponíveis para download.

AJAX: Guia Prático para Windows

O livro mostra a trajetória de uma aplicação web por meio dessa nova tecnologia. Ele apresenta os conceitos básicos, estrutura de programação JavaScript, comandos, principais funções e formas de interação com o browser.

XML, API DOM e manipulação de páginas web são assuntos tratados em detalhes, assim como o CSS (Cascading Stylesheet) ou folhas de estilo, pois permite a interação direta com o usuário, alterando elementos da página de forma dinâmica. Possui vários exemplos de utilização do AJAX, desde os mais simples até os mais complexos, que utilizam JavaScript orientado a objetos e técnicas modernas de programação.

Não Me faça Pensar – Usabilidade na Web

Uma Abordagem de Bom Senso à Usabilidade na Web. Cinco anos e mais de 100 mil exemplares após ter sido publicado pela primeira vez, é difícil imaginar alguém trabalhando em projeto Web que não tenha lido o “clássico instantâneo” de Steve Krug sobre usabilidade na Web, contudo, as pessoas ainda o estão descobrindo todos os dias. Nesta segunda edição, Steve acrescenta três novos capítulos no mesmo estilo do original: divertido e interessante, mas, ainda assim, cheio de informações e conselhos práticos, tanto para novatos quanto para veteranos. Não fique surpreso se ele mudar completamente a forma pela qual você pensa em projeto para Web.

Recomendações de livros

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

O que é DHTML?

Pedro Rogério — Wed, 13 May 2009 11:09:06 +0000

A maioria dos desenvolvedores web, na verdade, não sabem, ou têm apenas uma vaga idéia do que significa o termo, portanto, vou tentar explicar da forma mais simples possível o que é DHTML. Quando a versão 4 dos browsers Netscape e Internet Explorer foi lançada ocorreu uma pequena revolução na Internet. Enquanto o suporte a CSS nesses browsers era precário estava nascendo uma nova união de tecnologias que iria revolucionar a forma de desenvolver páginas web. Foi então que no final dos anos 90 e início do ano 2000 nascia o DHTML (Dynamic HTML).

DHTML é a união das tecnologias HTML, Javascript e CSS aliado ao Document Object Model (DOM), para permitir que uma página Web seja modificada dinamicamente na própria máquina cliente, sem necessidade de novos acessos ao servidor web. Quando você efetua mudanças de estilo em elementos HTML e a mudança é registrada imediatamente sem o recarregamento da página, você está vendo um exemplo de DHTML. Você também pode fazer o usuário integarir com a página escondendo e mostrando elementos, mover elementos na página, mudar cores.

Antes do surgimento do DHTML só podiamos utilizar páginas em HTML estático. Quando você carregava uma página, ela não podia ser alterada até você passar para a próxima página. Com o DHTML você poderia dar mais interatividade a página, lhe dando a possibilidade até de criar novos elementos na página para serem manipulados depois.

Atualmente existem 3 grandes empresas trabalhando por trás do DHTML: o W3C, a Netscape e a Microsoft, mas no passado, ele passou por um mal bocado. Na época do surgimento do DHTML, a Netscape e a Microsoft eram grandes rivais e não tinham nenhum interesse em trabalharem juntas em uma especificação do DHTML, e por isso era comum você ter um script que funcionava tão bem em um browser e nem sequer funcionava no outro. Quem naquela época não acessou um site e deu de cara com uma splash page com links apontando para páginas desenvolvidas para Netscape e Internet Explorer?

Mas nessa briga quem saiu ganhando foi a Netscape, pois por possuir um browser com melhor suporte ao DHTML, uma melhor documentação ele foi adotado como browser padrão para o DHTML. Rapidamente no entanto, a grande dificuldade de programação nesta nova geração de scripts, juntamente com o suporte precário dos navegadores, definiu a uma cruzada de pessoas que o DHTML estava morto. Com o tempo o W3C tomou frente no desenvolvimento e foram criadas as especificações e hoje você já pode utilizar o DHTML confortavelmente.

Aplicando dinamismo a página

Você pode estar meio confuso até aqui, mas efetuar manipulações dos elementos na página não é difícil. Vamos a simples exemplo para que possa entender melhor o que é DHTML. Observem a marcação HTML:

Suponhamos que ele possua os seguintes estilos:

div#principal (color:#000000; border-left:1px solid red;)

O usuário ao acessar a página, esses estilos são computados pelo browser, e caso você queira efetuar alguma alteração nos estilos do elemento utilizando DHTML esses novos estilos serão adicionados ao seu HTML através da tag style diretamente no código HTML. Um exemplo de código para efetuar a alteração da cor seria o seguinte:

document.getElementById('principal').style.color = '#ff0000';

Para efetuar a alteração do elemento HTML, temos que acessar o elemento através do Document Object Model. Diversos browsers suportam diferentes modelos do DOM e nesse exemplo foi utilizada o DOM nível 1. Em seguida é acessada a sua propriedade style e o novo estilo é aplicado. A execução desse código no browser resultaria no seguinte em seu código HTML:

Essa é um efeito bem simples que você pode conseguir através de DHTML. Mas não pare por aqui, na Internet hoje existem vários sites com tutoriais sobre DHTML com exemplos prontos que podem auxiliá-lo no desenvolvimento:

QuirksMode – Site que contém tutoriais de como você pode escrever scripts que funcionem corretamente em todos os browsers.
HTML & DHTML Reference no MSDN
Exemplos de DHTML
DHTML Demos

Livro recomendado

O livro JavaScript & DHTML Guia Prático oferece soluções práticas para problemas específicos da criação de scripts com que os desenvolvedores Web comumente se deparam. Cada receita se concentra em um trecho de código que você pode inserir diretamente em seu aplicativo.

O que é DHTML?

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Os benefícios de utilizar JavaScript não Obstrutivo

Pedro Rogério — Tue, 31 Mar 2009 13:24:34 +0000

Se você utiliza JavaScript não obstrutivo em seus projetos você está proporcionando uma maior acessibilidade a seus projetos, ou seja, se os scripts fores desabilitados eles não irão interferir no funcionamento da página.

Utilizar JavaScript não obstrutivo proporciona uma maior interoperabilidade, acessibilidade, facilidade de manutenção e ganho de tempo no desenvolvimento de seus códigos.

Foi pensando nisso que Phil Hawksworth desenvolveu uma página muito simples para mostrar que ao utilizar técnicas de Progressive enhancement você está garantindo assim total acesso a qualquer dispositivo.

Abaixo vocês podem ver um exemplo de como o site funciona corretamente em qualquer dispositivo. Essa é uma screenshot que tirei no Openwave Simulator:

Os benefícios de utilizar JavaScript não Obstrutivo

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

CSS no Lanche » JavaScript

Vimeo Lightbox Gallery

Ajax RSS Widget

Animated Login Form

jQuery Tabs

Tab 1

Tab 2

Youtube Lightbox Gallery

Slideshow com Legendas desenvolvido em jQuery

Centralizar imagem na vertical com JavaScript

Recomendações de livros

Construíndo sites com CSS e (x)HTML

Criando sites com HTML

Criando Páginas Web com CSS

Use a Cabeça HTML com CSS e XHTML

Profissional Padrões de Projeto com CSS e HTML

JavaScript – O Guia Definitivo

jQuery: A Bíblia do Programador JavaScript

AJAX: Guia Prático para Windows

Não Me faça Pensar – Usabilidade na Web

O que é DHTML?

Aplicando dinamismo a página

Livro recomendado

Os benefícios de utilizar JavaScript não Obstrutivo