Pensando um Brasil …


Abrir e fechar div com jquery

Há um tempo atrás publiquei um post, mostrando como Abrir e fechar Div`S com botao de menos e de mais, usando javascript simples.

Agora fiz um exemplo (simples também), usando jquery.

A principal vantagem de fazer este tipo de programacao JS é a facilidade de variacao e combicao efeitos.

Legal ne? Ai é só usar a criatividade.

Você pode copiar o código, ou baixar o arquivo que disponibilizei em PDF.

Veja como abrir e fechar div com botão de menos e de mais usando jquey.

Abs



Análise de usabilidade: VOE GOL E TAM LINHAS AÉREAS
23 maio, 2010, 4:52 pm
Filed under: Cotidiano, Tecnologia

Ola leitores. Depois de 1 ano resolvi publicar um estudo de usabilidade (feito em 2008) sobre o site da TAM e Gol.

Este estudo foi realizado durante o curso de pós graduação em Comunicação digital, educação e mídias interativas, do Centro Universitário de Belo Horizonte.

Clique aqui para baixar o arquivo pdf.

Abs



Google chrome css hack
20 maio, 2010, 6:15 pm
Filed under: Tecnologia | Tags:

Oi gente! Muito tempo sem escrever, mais aí vai uma dica quente sobre hack para google chrome.

Funciona do jeito que está abaixo, neste exemplo o estilo será aplicado no link dentro do DIV links…. (apenas no chrome).

Não sei até quando esse hack irá funcionar, mais por enquanto funciona, aproveitem!

Só aplicar esse hack no seu css…

/* I LOVE simple chrome css hack */

@media screen and (-webkit-min-device-pixel-ratio:0){

div.links a {
margin-top:0px !important;
border:1px solid red;
}
}

Forte abraço, salve aos desenvolvedores web



Como Estilizar o scrollbar (scroll) no internet explorer e no firefox (finalmente!)

Oi gente, pesquisando na internet encontrei a solução para um velho problema, a estilização do scroll, ou scrollbar do internet explorer, firefox, safari e afins.

Não me refiro  a scrollbar padrão do navegador, mais sim, aquelas que colocamos em divs (rolagens internas).

Bem,

/*--------------------------------------------------------------------------
 *  Smooth Scroller Script, version 1.0.1
 *  (c) 2007 Dezinerfolio Inc. <midart@gmail.com>
 *
 *  For details, please check the website : http://dezinerfolio.com/
 *
/*--------------------------------------------------------------------------*/

Exemplo aplicado em www.atmabh.com.br/site (Fino código)

e tb em: www.saolonguinhobrasil.com/institucional

* Testado nos navegadores: IEca 6 e 7, FF3.

Agora estou usando um destes aqui: http://www.net-kit.com/jquery-custom-scrollbar-plugins/ para estilziar o scrollbar usando jquery

Espero ter ajudado, Forte abraço a todos.

/*--------------------------------------------------------------------------
 *  Smooth Scroller Script, version 1.0.1
 *  (c) 2007 Dezinerfolio Inc. <midart@gmail.com>
 *
 *  For details, please check the website : http://dezinerfolio.com/
 *
/*--------------------------------------------------------------------------*/


Abrir e fechar div com sinal de menos e de mais

Olá pessoas!

Quem aí é produtor XHTML e nunca se deparou com a pergunta:

Como abrir e fechar divs usando o sinal de menos e de mais?

Bem, vou ensinar aqui uma solução bem simples, você precisa de duas imagens (uma do”  –  ” e uma do ” + “) e do código abaixo….

entao temos:

menos.gif  >>> menos1

mais.gif  >>> mais1

Salve as imagens no mesmo local em que você irá gerar seu HTML, abra um editor de html (PsPad Editor, EditPlus, DreamWeaver, Bloco de notas) e crie um arquivo com o seguinte código:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE> New Document </TITLE>  <META NAME="Generator" CONTENT="EditPlus">  <META NAME="Author" CONTENT="">  <META NAME="Keywords" CONTENT="">  <META NAME="Description" CONTENT="">

  <script language="javascript" type="text/javascript">

function Mostra(idDiv,idImg){     div = document.getElementById(idDiv);     img = document.getElementById(idImg);

     if(div.style.display == 'none')     {        div.style.display = 'block';        img.src='menos.gif';     }     else     {        div.style.display = 'none';        img.src='mais.gif';

     }}
</script>

 </HEAD>

 <BODY>

 <a style='cursor: pointer;' class='abre_fecha' onclick="Mostra('conteudo0','img0');"><img id='img0' src='mais.gif' /> Pavilhões</a>

                <br />
                 <div id='conteudo0' style='display: none;'>

                                <br />

                                                <p>Os setores voltados para a exposição de produtos durante a 22ª Superminas foram chamados de "Pavilhão Azul" e "Pavilhão Vermelho". Muitas oportunidades foram oferecidas nos dois ambientes de negócios e relacionamento. </P>
No "Pavilhão Azul", estiveram presentes as principais empresas fornecedoras do segmento alimentício do País. O espaço abrigou ainda a Ilha da Cachaça, um ambiente totalmente voltado para este segmento que vem conquistando espaço entre os consumidores e consequentemente nas gôndolas em todo o País. Já no "Pavilhão Vermelho", os expositores eram empresas voltadas para a prestação de serviços, como segurança, gráfica e fornecedores de equipamentos para supermercados e o varejo em geral. Participaram ainda, prefeituras de várias partes do Estado e órgãos do setor público em geral. <BR> </p>

</div>
 </BODY></HTML>

Simples né? Salve e veja o resultado.

Quer fazer a mesma coisa com Jquery? Veja aqui!

 

Neste exemplo, não me preocupei com avisos e questões de validação. Aproveito para dizer também, que nem sempre sites validados são um sinal de sites bem construídos.

AAAh, pra quem não me conhece eu sou o João Marcos, Produtor XHTML e arquiteto da informação em Belo Horizonte / MG.

Abraços!



Política e outras cositas más!
13 julho, 2007, 1:25 pm
Filed under: Cotidiano, Esportes, Política, Responsabilidade Social, Tecnologia

Começamos aqui um blog para os amigos virtuais que gostam da nossas críticas sobre diversos assuntos e lançamentos do mundo contemporâneo.

A todos, um forte abraço!

João Marcos