Criando um box expansível com CSS e JS
Postado por Rodrigo Medeiros | Algo sobre CSS, Javascript, Tutoriais
Hoje vou mostrar um nesse tutorial, um pequeno truque que muitas vezes quebra um galhão.
Se trata de um box, que exibe apenas uma parte do conteúdo, e quando é clicado, expande mostrando o conteúdo todo. Veja oque vamos fazer Lá vamos nós.
Todo o segredo está no seguinte código
<div class="box_fechado" onClick="javascript: this.className = ( this.className == 'box_aberto' ) ?
'box_fechado' : 'box_aberto';"> </div>
Esse javascript, faz com que a classe aplicada na div mude, de “box_fechado” para “box_aberto”, ou seja, o resto é CSS.
Criaremos duas classes, para os dois estados do box.
div.box_fechado,div.box_aberto{cursor:pointer;}
div.box_fechado{height:18px;overflow:hidden;}
div.box_aberto{overflow:none;}
O overflow:hidden, e o height faz com que o box fique travado em um tamanho definido, e ao clicar, o overflow fica “none” mostrando todo o conteúdo, ja que o height também some.
Isso é só o raciocínio inicial, aproveitando a lógica, pode-se também trabalhar com cores, backgrounds, e outras formatações, é só usar a imaginação.
Até a próxima
Tags: CSS, Javascript, Tutoriais
Opera Mini para Dispositivos Móveis
Postado por Rodrigo Medeiros | Algo sobre Acessibilidade, CSS, Mobile, Utilitários
Hoje procurando um browser decente para meu smarthphone, achei o Opera Mini, uma versão do Opera para Palms e Smarthphones. Inicialmente muito bom, aqueles que já utilizaram falam muito bem, mas notei um pequeno fator que pode ser bastante desagradável.
Ele simplesmente não reconhece folhas de estilo para dispositivos móveis (handheld). Essa é uma questão que para o usuário normal, não chega a ser um problema, já que ele renderiza os sites muito bem, a questão é, hoje em dia, muitos desenvolvedores preparam seus sites para serem acessados de dispositivos móveis, e tomam alguns cuidados para facilitar a navegação (ocultando alguns conteúdos irrelevantes, omitindo imagens, entre outros detalhes), detalhes esses que também interferem no fator custo ($$$), já que 1Mb de dados em acesso GPRS pode custar até R$9,00.
Update Finalmente atualizei esse post. Na verdade, o fato do Opera não reconhecer o css para mobile é opcional. Existe a opção para renderizar padrão, ou renderizar para mobiles.
Por enquanto, continuo utilizando-o, mas caso alguém saiba alguma maneira de configurar isso, esteja a vontade.
Tags: Acessibilidade, CSS, Mobile, Utilitários
Utilizando Grid Calculator em montagem de sites
Postado por Rodrigo Medeiros | Algo sobre Utilitários
Hoje dando uma olhada no Pinceladas da Web, vi um post onde o Pedro Rogério lista algumas ferramentas para trabalhar com Grids na hora da montagem dos sites.
Entre algumas ferramentas interessantes, e outras nem tanto, me chamou atenção o Grid Calculator, onde você pode configurar o tamanho do elemento, a distancia entre eles (Margin) , a quantidade entre outros detalhes, muito útil para formatar menus inline, galeria de fotos, e colunas de sites.
Tem também o Layout Grid, onde você utiliza uma imagem com um Grid, como bg do body para visualizar as dimensões dos elementos. Uma ferramenta que vc consegueviver sem, mas de qualquer maneira, segue o link.
Tags: Utilitários
Encolhendo a URLhttp://rodrigowebdesign.com/blog/wp-admin/edit.php?paged=3
Postado por Rodrigo Medeiros | Algo sobre Acessibilidade, Utilitários
Já ouviu falar do site TinyURL.com? Através dele, é possível criar um endereço curto para um website seja o seu, ou um endereço imenso que você queira enviar para alguém. O único problema é que, ultimamente, o site tem estado freqüentemente fora do ar, algo péssimo para quem depende da ferramenta para seu próprio website.
Nesse caso, o site Shorty pode ser a solução. Na verdade, trata-se de um software para ser instalado no servidor. ou seja: o endereço ‘encurtado’ permanece sempre o mesmo.
Fonte: G1
Tags: Acessibilidade, Utilitários
Não tente burlar o Google Adsense
Postado por Rodrigo Medeiros | Algo sobre Google, Nada a ver, Vale uma risada
Atualmente, em meio a tantas ferramentas que o Google vem criando para melhorar a vida de nós usuários, um dos mais úteis e conhecidos é o Google Adsense, (Anúncios do Google no seu site). Vc coloca alguns anúncios de terceiros no seu site, e a cada clique, sua conta vai ganhando alguns centavos, facil né?
Acontece que, movido por uma incontrolável vontade de agilizar o processo de engorda dos lucros, o dono do site não resiste, e clica nos anúncios do seu proprio site. Resultado? O Google identifica que tem algo errado, e que aquela quantidade de cliques não se justifica, e que por acaso todos os cliques se originam de um mesmo endereço IP.
Alguns dias depois, então vc recebe um lindo email informando que sua conta do Adsense foi suspensa.
Na tentativa de reativar o serviço, você tenta se cadastrar novamente, e sem esperar, recebe outro belo email.
Ou seja, não tente Burlar o Google Adsense, ou você será considerado um RISCO ao anúnciantes, Nada dramático o Google.
PS: Por motivos éticos, não vou divulgar o nome do indivíduo que teve a conta suspensa, mas não fui eu, hehe.
Tags: Google, Vale uma risada
