Mateus Souza - Webdesigner » Javascript

Linha Framework – Desenvolva Front-end Com Mais Qualidade!

Mateus Souza — Tue, 27 Apr 2010 14:02:48 +0000

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.

Não vou ficar tratando dos detalhes pois você pode encontrar os mesmos visitando o site do Linha Framework. Recomendo que baixem inicialmente a versão para desenvolvimento, pois contém demonstrações dos grids, plugins, enfim…é mais completo e melhor para iniciantes.

Fugindo um pouco do foco

Resolvi desenvolver este framework quando estava diante de um projeto mais complexo, ai já me empolguei e hoje está como você pode ver ai (no Github é mais atualizado ). Não espero rebecer os “meus parabéns” (além do mais que eu não criei este framework pensando nisso…) , pois creio que há muito a ser melhorado, e pra isso conto com a ajuda da comunidade brasileira. Se quiser críticar, seja bem vindo, mais faça um crítica conclusiva e objetiva.

Como já disse, é pra comunidade brasileira (quem sabe a gente não conquista o mundo, ashhausdha), pois a comunidade brasileira “ta fraca”…

É isso, se desejar teste o framework e crie a sua própia opinião, pra mim é uma mão na roda bem grande, mais pra você, já é outra conversa. As novidades talvez serão postadas aqui, ou quem sabe eu crio um blog só pra ele. De qualquer forma eu vou trazer alguns tutoriais e screencasts para ajudar quem deseja usar.

Quero deixar bem claro que é um framework open souce e eu não gostaria de desenvolver sozinho, se você tem amplos conhecimentos em front-end e quêr ajudar no desenvolvimento, ou fazendo tutoriais, melhorar a documentação, ou seja lá o que for, saiba que seu esforço é de grande importância.

Visite http://www.linhaframework.com, baixe e use a vontade. Aproveite e divulgue também em sua rede social.

Antes de terminar este post, quero dizer também que estou reformulando meu site já usando o linha framework…ta ficando bunitu

Até a próxima.

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

Mateus Souza — Tue, 22 Sep 2009 12:01:45 +0000

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/

É 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:

PHP

O framework que mais me agrada é o Codeigniter. Lembro de quando eu nem sabia PHP e fui me meter com ele sem nem saber pra que servia, rsrs. Mesmo não sabendo nada eu fui capaz de fazer algumas coisas e recomendo. Com um pouco mais de detalhes, a documentação do Codeigniter é bem completa, simples e fácil e tem até em português (http://www.codeigniter.com.br/manual/index.html), sua instalação é a mais rápida que já vi e o desenvolvimento é: PHP, não é necessário aprender uma nova “linguagem” como no Zend Framework enfim, na minha opinião não tem melhor.

Site Oficial Codeigniter
Codeigniter Brasil
Documentação Codeigniter em Português

Ruby

Não sou nenhum programador Ruby mais sei que o melhor e mais conhecido framework é o Ruby on Rails. Este frameworks é usado em grandes sites como Twitter, GitHub , Basecamp, BlogsBlogs entre outros. Nem vou falar mais nada apenas visitem o site http://www.rubyonrails.pro.br/, se empolgue e tire as suas próprias conclusões.

Site Oficial Ruby on Rails (inglês)
Documentação Ruby

Javascript – JS

Se você é um leitor do meu blog já deve saber que jQuery é o frameworks que uso para programar javascript. Mesmo depois de tanto tempo usando jQuery ainda me surpreendo com a facilidade de se programar com essa biblioteca. Para você que ainda não conhece o jQuery recomendo que leia o post Introdução ao jQuery e veja também os tutorias em sua categoria.

Site Oficial jQuery
Documentação jQuery

CSS

E por último para CSS recomendo o Grid 960. O GRID 960 é uma ferramenta simples que ajuda na padronização de layouts para web. Possui arquivos (grids) para os mais famosos programas usados para criação de layouts (Photoshop, Illustrator, Fireworks, Indesign, etc…). Seu desenvolvimento é bem fácil também e ajuda bastante no desenvolvimento do layout em CSS.

Site Oficial Grid 960
Download do Grid 960

Em breve se possível estarei trazendo mais novidades sobre cada um destes frameworks e tutoriais para aprendizado. Até a próxima.

Limitar Caracteres com Jquery

Mateus Souza — Mon, 26 Jan 2009 21:37:48 +0000

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:

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

2º Passo - Escrevendo o script

Resumindo: criamos uma função com duas variáveis que exibe sim(if) ou não(else). Ou seja, se o usuário ultrapassar o número de caracteres estipulados (neste exemplo são 20 caracteres) o javascript retorna if dizendo que altrapassou o número máximo de caracteres. Se não o javascript retona else exibindo quantos caracteres o usuário ainda pode escrever….

3º passo – CSS e HTML
Não vamos dar ênfase a essa parte…pois são somente estilos aplicados a página:

CSS

HTML
Note que foram criados duas IDs (mensagem e info) que foram usadas no javascript juntamente com o número máximo de caracteres:


	        
	        	Escreva a sua mensagem
	        
			
				

		

		Não ultrapasse 20 caracteres

é isso…espero que tenham gostado.Se quiserem façam o download com o psd e tudo mais. Até a próxima.

Demonstação / Download dos Arquivos

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

Mateus Souza — Thu, 22 Jan 2009 16:27:36 +0000

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:

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

é 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.

Desenvolvimento Web – 23 Cheat Sheets de Grande Ajuda

Mateus Souza — Mon, 19 Jan 2009 19:30:26 +0000

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

2. HTML Cheat Sheet

3. HTML Character Entities Cheat Sheet

4. XHTML Cheat Sheet v. 1.03 – PDF

CSS

5. CSS Cheat Sheet (V2)

6. CSS Cheat Sheet

7. CSS Shorthand Cheat Sheet

8. CSS Level 1 Quick Reference – PDF

9. CSS Level 2 Quick Reference – PDF

10. CSS2.1 Quick Reference Card – PDF

11. CSS2 Reference Guide – PDF

JavaScript

12. JavaScript Cheat Sheet

13. Addison-Wesley’s JavaScript Reference Card – PDF

14. JavaScript and Browser Objects Quick Reference

15. The most common DOM methods at a glance – PDF

16. JavaScript Quick Reference Card/Cheatsheet

17. mootools 1.2 cheat sheet

18. jQuery Cheatsheet

19. jQuery 1.2 Cheat Sheet

20. jQuery Visual Map – PNG

Variados

21. RGB Hex Colour Chart

22. The Web Developer’s SEO Cheat Sheet

23. The WordPress Help Sheet

Alias vamos ao creditos:
Six Revision – Excelente site, apesar de ser em inglês…recomendo a todos

Até a próxima.

jQZoom – Otimo Plugin Para jQuery

Mateus Souza — Tue, 16 Dec 2008 16:44:11 +0000

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:

E jqzoom.css – a parte do CSS.

Como usar

É bem simples, a unica coisa a se fazer é definir a classe para a imagem. ex:

Devemos criar tambem um script que fará tudo isso funcionar:

$(document).ready(function(){
	$('.MINHACLASSE).jqzoom();
});

Script com alguns efeitos, por exemplo:

$(document).ready(function(){
	var options = {
	    zoomWidth: 300,
	    zoomHeight: 250,
            xOffset: 10,
            yOffset: 0,
            position: "right" //e Mais Opções....
	};
	$('.MINHACLASSE').jqzoom(options);
});

é isso…para maiores informações visite o site do desenvolvedor…

até a próxima.

Accordion Horizontal – Tutorial jQuery

Mateus Souza — Mon, 24 Nov 2008 23:34:08 +0000

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:

Passo 2 – HTML

Eu dei a primeira tag âncora um id, para que pudéssemos definir uma largura inicial e exibi-la ampliada quando a página é carregada.



  
    
      
      
        Tutoriais

      Aprenda, conheça mais, confira meus tutoriais. 
    
  
  
    
    
       
         Portfolio

       Veja alguns trabalhos feitos por mim ...
    
  
  
    
    
      
        Contato

      Gostou? então entre em contato comigo...

Passo 3 – CSS

A principal coisa a se notar é a altura fixa a ser estabelecidas sobre a tag âncora.
Usamos “overflow: hidden” para evitar que o conteudo da tag de caia para baixo da miniatura:

 ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
	float: left;
	padding: 10px;
	display: block;
	margin-right: 10px;
	background: transparent url(images/bac.jpg) repeat-x;;
}

ul li a{
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
}

#a1{
  width: 210px;
}

ul li img{
  position: absolute;
  border: 3px solid #800622;
}

ul li p{
  margin: 0;
  padding: 0;
  width: 120px;
  display: block;
  margin-left: 85px;
}
body {
	background-color: #222;
	color:#FFF;
}
#cont{
	height:120px;
	width: 450px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.texto {
	font-size: 13px;
}

Passo 4 – jQuery

E aqui está o jQuery script que faz tudo acontecer. A primeira coisa que faz é definir algumas variáveis:

lastBlock: representa o bloco que já está expandido;
maxWidth: é a largura que queremos que o nosso bloco aparece quando expandido;
minWidth: é a largura dos blocos que não estão expandidos.em nosso exemplo será 75px…

Agora definimos o evento de hover:

Bom, é só isso. Até a próxima.

Criando um Slideshow usando Mootools – Tutorial Mootools

Mateus Souza — Wed, 22 Oct 2008 11:55:47 +0000

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:




	

	Slideshow Mooltools - By Mateus Souza

	

	
	
	







	SLideshow Mootools by Mateus Souza
	anteriorproximo
	
		

			
				
            
			
				
            
			
				
            
			
				
            
			
				
            

		
			
	
		1
		2
		3
		4
		5

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

Image Fade – Tutorial Jquery

Mateus Souza — Tue, 23 Sep 2008 23:14:23 +0000

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:


    Home
    Services
    Portfolio
    About
    Contact

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('').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:

Ver video (Versão em flash)

IE6 – Se você usa o IE6 é recomendável ver este video (Versão em flash)

Qualquer dúvida posta um comentário.

Princípios Básicos do Mootools – Parte 2

Mateus Souza — Sat, 13 Sep 2008 12:54:28 +0000

Olá pessoal, vamos continuar nossa aula sobre os Princípios Básicos do Mootools, em nosso artigo anterior falei sobre:

Como adicionar uma estrutura de Mootools em uma página;
Como obter um elemento DOM;
Falei sobre setStyle() e Style();
E dei alguns exemplos na prática.

Se você ainda não viu a parte 1 deste artigo, veja aqui.Vamos a parte 2:

Nesta parte do artigo vamos identificar um elemento (ID) e vamos personaliza-lo (fundo, exibir uma mensagem de alerta …) usando o Mootools:

1.Implementação Inoportuna:

Vamos começar escrevendo um código em HTML, e logo depois direi porque é inoportuna:

“myList”>
“li_1″>
“#” onClick=“javascript:getId(’1′)”>Get this ID

“li_2″>
“#” onClick=“javascript:getId(2)”>Get this ID

“li_3″>
“#” onClick=“javascript:getId(3)”>Get this ID

Este é uma lista simples com alguns elemento da lista id “li_1“, “li_2“, “li_3“.Cada elemento da lista contem um link solicitando o evento onClick do javascript e uma função getid().Com isto será exibido uma simples caixa de alerta com o ID do elemento que você clicou.O que aparecerá será mais ou menos isto:

O código javascript é este(está em inglês mais decidi deixa-lo, pois acho que não vai atrapalhar nossa lição):

… é muito facil de se entender, se você tem noções básicas de javascript.Vamos chamar este cógido inoportuno, mas porque você me pergunta?Porque, dentro do código do HTML, contem uma solicitação da função getId() do javascript:

“#” onClick=“javascript:getId(’1′)”>Get this ID

Esta forma “inoportuna” não é errada, mais nos usaremos de forma que separe o HTML do Javascript, melhorando assim a vida de todos,hehehe

2. A forma discreta para implementá-lo usando Mootools.

Ok, agora estamos prontos para ver como podemos aplicar o mesmo script usando o Mootools discretamente. Em primeiro lugar,vamos analizar o código do HTML:

“myList”>
“li_1″>“#”>Get this ID

“li_2″>“#”>Get this ID

“li_3″>“#”>Get this ID

Mais o que mudou?Simples removemos o evento onClick do HTML:

“li_1″>“#” onClick=”javascript:getId(’1′)” >Get this ID

Até aqui tudo certo, agora vamos voltar a um trecho da parte 1 do artigo, você se lembra como adicionar uma estrutura de Mootools no HTML?Não?Vou colocar a imagem aqui novamente, talvez você se lembre:

Bom, como você já deve saber é basicamente isto que temos de colocar logo depois da tag do HTML:

Agora copie e cole este código logo abaixo do que esta acima:

Como você pode ver, eu usei o método getElements () para obter todas as tags

“myList”

.pass(el.id).

Download do código fonte:

DOWNLOAD