Javascript

Categoria | 17 posts usam esta categoria.

Descrição: Se você ainda não usa um framework javascript aqui não é o lugar recomendado para você...quem sabe um dia eu faço tutoriais de javascript "básico"

Linha Framework – Desenvolva Front-end Com Mais Qualidade!

Criado por Mateus Souza em 27 de abril de 2010 às 11:02

Bom dia, boa tarde, boa noite…depois de muito tempo sem atividade no blog venho trazer uma novidade para vocês. Alguns já devem saber o que é, não vou ficar de papo furado então vamos direto a novidade:

Linha Framework

Trata-se de um framework (meio obvio não?) para desenvolvimento front-end – HTML, CSS e Javascript. Se você já usou algum grid CSS, como o 960.gs ou Blueprint por exemplo, irá se familiarizar facilmente com este framework, mas o Linha Framework é mais completo.

É mais completo pois não fica somente no grid CSS, temos o grid template (PSD), marcação HTML e CSS em português, sem falar do plugins para jQuery em português támbem. Acredite, desenvolver com um framework poupa e muito o seu tempo. Passando um pouco para a prática, você poderá desenvolver as três camadas (HTML, CSS e JS) de uma só vez, de forma fácil e rápida.

leia mais »

Postado em CSS, Dicas, HTML, Javascript, Linha Framework, Noticias, jQuery.

Quais são os melhores frameworks para PHP, Ruby, JS e CSS?

Criado por Mateus Souza em 22 de setembro de 2009 às 9:01

Creio que você já deve ter feito esta pergunta pelo menos uma vez quando pensou em usar algum framework para desenvolver. Foi pensando nisso que alguém (não consegui localizar o autor, somente a hospedagem) fez um site comparando os melhores frameworks atuais.

http://www.bestwebframeworks.com/
bestwebframework2 Quais são os melhores frameworks para PHP, Ruby, JS e CSS?

É o site precisávamos…uma vez selecionado a linguagem, será exibida uma tabela com pelo menos alguns pontos básicos:

Licença;
Requisitos;
Recursos;
Compatibilidade.

Quem tiver dúvidas creio que ao visitar este site terá mais certeza de qual framework precisa. Para não ficar só na dica eu vou falar os melhores na minha opinião:

leia mais »

Postado em CSS, Dicas, Javascript, PHP, jQuery.

Limitar Caracteres com Jquery

Criado por Mateus Souza em 26 de janeiro de 2009 às 18:37

Um tutorial simples, estiloso e de grande utilidade…sem rodeios vamos ao que interressa:

Demonstação / Download dos Arquivos

1º passo – Chama a jQuery

Você que sempre acompanha o meu blog já deve estar se roendo porcausa dessa etapa né…mais calma lá, lembrem-se que tem sempre gente nova na area que ainda num sabe disso:

<script src="jquery-1.3.1.min.js" type="text/javascript"></script>

Como o jQuery está com a sua nova versão(1.3) vamos utilizá-la nesse exemplo.

2º Passo - Escrevendo o script

leia mais »

Postado em Javascript, Tutoriais, jQuery.

Dica Rápida – Desabilitar Botão Direito do Mouse com Jquery

Criado por Mateus Souza em 22 de janeiro de 2009 às 13:27

Como posso desabilitar / bloquear / cancelar o menu de contexto quando eu clico com o botão direito sobre a tela? Há uma série de scripts em javascript que fazem esse serviço, mas vamos faze-lo utilizando jQuery que é muito mais fácil! Vamos lá, é bem simples:

Passo 1 – Chamar a biblioteca jQuery para o documento:

<script src="js/jquery.min.js" type="text/javascript"></script>

Passo 2 – insira o código abaixo logo após o anterior:

<script type="text/javascript">
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
</script>

é so isso.salve a pagina e teste…

Resumindo…quando o usuario clica com o botão direito deveria aparecer o menu de contexto (contextmenu), mas o script executa a função return false, fazendo com que não apareça o menu…
Funcionalidade:
Este script funciona em todos os navegadores, excerto Opera

Até a próxima.

Postado em Dicas, Javascript, Tutoriais, jQuery.

Desenvolvimento Web – 23 Cheat Sheets de Grande Ajuda

Criado por Mateus Souza em 19 de janeiro de 2009 às 16:30

Como esse é o meu primeiro post do ano…vamos postar algo eficiente que ajude a todos
Pra quem não sabe…teve algumas pessoas que resolveram criar PDFs ou Imagens contendo uma ajuda, um help pra quem esqueceu os codigos de CSS por exemplo.
Esses arquivos receberam o nome de Cheat Sheets (num sei o que significa e nem quero saber )

Tem de tudo…HTML/XHTML, CSS, JavaScript (incluindo MooTools e jQuery), e mais alguns.Espero que ajude a todos:

HTML/XHTML

1. HTML Help Sheet

leia mais »

Postado em CSS, Dicas, HTML, Javascript, Mootools, SEO, Webdesigner, Wordpress, jQuery.

jQZoom – Otimo Plugin Para jQuery

Criado por Mateus Souza em 16 de dezembro de 2008 às 13:44

Se você ta precisando dar um zoom nas imagens, seus problemas acabaram, rsrs

Com essa belezinha aqui você fará isso e muito mais…confira no site do desenvolvedor.

Instalação

Baixe-o e insira o codigo no HTML.Obs.se você alterar a localização e os nomes faça de acordo com as suas alterações:

leia mais »

Postado em Javascript, jQuery.

Accordion Horizontal – Tutorial jQuery

Criado por Mateus Souza em 24 de novembro de 2008 às 20:34

Bom eu não sei se escreve assim mesmo (Accordion) em português mais, vai assim mesmo….
Vamos criar um efeito sanfona, que revela uma legenda para cada miniatura quando colocado o mouse sobre uma delas:

Demonstração / Download dos Arquivos

Passo 1 – Chamar o jQuery

Pela milézima vez vamos fazer esse passo novamente, lembrando que é um processo “padrão” para qualquer efeito com jQuery:

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>

Passo 2 – HTML

leia mais »

Postado em Javascript, Tutoriais, jQuery.

Criando um Slideshow usando Mootools – Tutorial Mootools

Criado por Mateus Souza em 22 de outubro de 2008 às 8:55

Bom pessoal faz um tempinho que não posto um tutorial aqui , então bora manda bala que esse tutorial esta demais, muito bom mesmo:

O slideshow utiliza o o script criado pelo site creativeponey e, este script só funciona em Mootools 1.11.

Demonstração / Download dos Arquivos

HTML
Vamos colocar logo tudo de uma vez para agilizar o processo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Slideshow Mooltools - By Mateus Souza</title>

	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

	<script type="text/javascript" src="js/mootools.js"></script>
	<script type="text/javascript" src="js/compatmootools.js"></script>
	<script type="text/javascript" src="js/slider.js"></script>

<script type="text/javascript" >
window.addEvent('load', function () {
	slidingtabs = new SlidingTabs('feature_buttons', 'slider_wrap');
	$('previous').addEvent('click', slidingtabs.previous.bind(slidingtabs));
	$('next').addEvent('click', slidingtabs.next.bind(slidingtabs));
});
</script>

</head>
<body>

<div id="feature_wrap">
	<div id="feature_title">SLideshow Mootools by Mateus Souza</div>
	<a title="Previous" id="previous">anterior</a><a title="Next" id="next">proximo</a>
	<div id="slider_wrap">
		<div id="slider">

			<div>
				<a href="http://www.mateussouza.com/"  class="feature"><img src='kid1.jpg' alt='kid1' /></a>
            </div>
			<div>
				<a href="http://www.mateussouza.com/"  class="feature"><img src='kid2.jpg' alt='kid2' /></a>
            </div>
			<div>
				<a href="http://www.mateussouza.com/"  class="feature"><img src='kid3.jpg' alt='Dkid3' /></a>
            </div>
			<div>
				<a href="http://www.mateussouza.com/" class="feature"><img src="kid4.jpg" alt="kid4" title="kid4" /></a>
            </div>
			<div>
				<a href="http://www.mateussouza.com/" class="feature"><img src="kid5.jpg" alt="kid5" title="kid5" /></a>
            </div>

		</div>
			</div>
	<ul id="feature_buttons">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

	</div>
</body>
</html>

Acabou .É muito simples, não tem segredo, agora só falta você estilizar e deixar com a sua cara ou com a cara do cliente…

Atualização - (10/01/2010)

O Schuindt e o Rodrigo comentaram sobre fazer com que o slide fique automático. Para isto eu fiz algumas alterações no script (somente na página index.html) para que automático. Segue o código:

window.addEvent('load', function () {
	slidingtabs = new SlidingTabs('feature_buttons', 'slider_wrap');

	var intervalo = 4000; //TEMPO PARA CADA TRANSIÇÂO AUTOMÁTICA
	var tempo;
	var auto = function(){
		tempo = slidingtabs.next.bind(slidingtabs).periodical(intervalo);
	}
	auto(); //Iniciando

	$('previous').addEvent('click', function(){
		slidingtabs.previous.bind(slidingtabs)
		$clear(tempo); //Paralizando a transição automática
		auto(); //Iniciando novamente a transição automática
	});
	$('next').addEvent('click', function(){
		slidingtabs.next.bind(slidingtabs);
		$clear(tempo);
		auto();
	});

	$$('#feature_buttons li').addEvent('click', function(){
		$clear(tempo);
		auto();
	});

	//SEM SLIDE AUTOMÁTICO
	/*slidingtabs = new SlidingTabs('feature_buttons', 'slider_wrap');
	$('previous').addEvent('click', slidingtabs.previous.bind(slidingtabs));
	$('next').addEvent('click', slidingtabs.next.bind(slidingtabs));*/
});

Para definir o tempo entre cada transação automática é so alterar a variável intervalo…lembrando que é em milisegundos ou seja, 4000 milisegundos é o mesmo que 4 segundos.

var intervalo = 4000; //TEMPO

Até a proxima

Postado em Javascript, Mootools.

Image Fade – Tutorial Jquery

Criado por Mateus Souza em 23 de setembro de 2008 às 20:14

Vamos recriar o efeito usado no site Dragon Interactive, vai ficar igualzinho, até em inglês:),não vou entrar em detalhes só vou mostrar como funciona e o código, pois acho que você já deve estar cansado de alguns processos utilizados em tutoriais anteriores e já deve saber como fazer.Mas se você é novo aqui no site e tal, veja meus tutoriais mais antigos é bem fácil, basta clicar aqui.

Demostração:
Aqui

HTML:

<ul id="navigation">
    <li class="highlight"><a href="#" class="home"><span>Home</span></a></li>
    <li class="highlight"><a href="#" class="services"><span>Services</span></a></li>
    <li class="highlight"><a href="#" class="portfolio"><span>Portfolio</span></a></li>
    <li class="highlight"><a href="#" class="about"><span>About</span></a></li>
    <li class="highlight"><a href="#" class="contact"><span>Contact</span></a></li>
</ul>

CSS

#navigation {
  list-style: none;
}

#navigation li {
  float: left;
}

#navigation a * {
  display: none;
}

#navigation a,
#navigation a .hover {
  height: 70px;
	position: relative;
	display: block;
	background: url(images/dragon-sprite.jpg) 0 0 no-repeat;
}

/* individual navigation items */
#navigation a.home {
  background-position: 0 0;
  width: 102px;
}

#navigation .highlight a.home:hover,
#navigation a.home .hover {
  background-position: 0 -280px;
  width: 102px;
}

#navigation a.services {
  background-position: -102px -140px;
  width: 115px;
}

#navigation .highlight a.services:hover,
#navigation a.services .hover {
  background-position: -102px -280px;
}

#navigation a.portfolio {
  background-position: -217px 0;
  width: 120px;
}

#navigation .highlight a.portfolio:hover,
#navigation a.portfolio .hover {
  background-position: -218px -280px;
}

#navigation a.about {
  background-position: -337px 0;
  width: 100px;
}

#navigation .highlight a.about:hover,
#navigation a.about .hover {
  background-position: -339px -280px;
}

#navigation a.contact {
  background-position: -437px 0;
  width: 115px;
}

#navigation .highlight a.contact:hover,
#navigation a.contact .hover {
  background-position: -440px -280px;
}

jQuery

 $(function () {
        if ($.browser.msie && $.browser.version < 7) return;

        $('#navigation li')
            .removeClass('highlight')
            .find('a')
            .append('<span class="hover" />').each(function () {
                    var $span = $('> span.hover', this).css('opacity', 0);
                    $(this).hover(function () {
                        // on hover
                        $span.stop().fadeTo(500, 1);
                    }, function () {
                        // off hover
                        $span.stop().fadeTo(500, 0);
                    });
                });

    });

Se você quiser ver o vídeo do cara que recrio esse efeito – pois não foi eu – veja logo abaixo: