Blog Web Standards

Repositório de Snippets ^Beta

Códigos prontos para facilitar o desenvolvimento de elementos modulares em HTML, CSS, jQuery e Wordpress

HTML

Documento Base

Tradicional (XHTML 1.1 Strict)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="Nome do autor" />
  <title></title>
  <link href="css/estilo.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
</body>
</html>

Voltar ao índice

Tradicional HTML5

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8" />
  <meta name="description" content="" />
  <meta name="author" content="Nome do autor" />
  <title></title>
  <link href="css/estilo.css" rel="stylesheet" type="text/css" media="screen" />
  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<!-- abre limites -->
<div id="limites">

<!-- abre topo -->
  <header id="topo">
    
  </header>
<!-- fecha topo -->

<!-- abre conteúdo -->
  <div id="conteudo">
    
  </div>
<!-- fecha conteúdo -->

<!-- abre rodapé -->
  <footer id="rodape">
    
  </footer>
<!-- fecha rodapé -->
  
</div>
<!-- fecha limites -->
</body>
</html>

Voltar ao índice

Estruturas

Básica (sem colunas)

Voltar ao índice

Duas colunas

Voltar ao índice

Formulário

Base


	
		
			Nome 
			E-mail 
			Mensagem

Voltar ao índice

Listagem de meses

Voltar ao índice

Tabela

Voltar ao índice

Menu


  Página Inicial
  
    Página 2
    
    	Subpágina 1
    	Subpágina 2
    	Subpágina 3
    
  
  Página 3

Voltar ao índice

FAQ


	Pergunta 1
	Pergunta 2
	Pergunta 3
	Pergunta 4



  Pergunta 1
  
    Resposta para a pergunta 1
  
  Pergunta 2
  
    Resposta para a pergunta 2
  
  Pergunta 3
  
    Resposta para a pergunta 3
  
  Pergunta 4
  
    Resposta para a pergunta 4

Voltar ao índice

PNG24 para IE6

Baixar o arquivo .js

Voltar ao índice

Galeria

Cabeçalho da página

<head>
...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="scripts/funcionalidades.js"></script>
<script type="text/javascript" src="scripts/galeriaScroll-2.1.2-min.js"></script>
...
</head>

Código da galeria

<div id="galeria_demonstracao" class="galeria">
  <div class="mascara">
    <div>
      <figure>
        <img src="imagens/class-header-semantics.jpg" alt="Exemplo de thumb" />
        <figcaption>
          <h5>HTML5 Semantics</h5>
        </figcaption>
      </figure>
    </div>
  </div>
</div>

Voltar ao índice

Flásh válido

Voltar ao índice

Youtube (HTML5)

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/" frameborder="0"></iframe>

Voltar ao índice

Download dos clips para o Coda

CSS

Documento base

/*
  Cliente: 
  Projeto: 
*/

/*
  --------------
  PALETA DE CORES
  --------------

  #000000 - Textos

*/


/*
  --------------
  ORDEM DOS ATRIBUTOS
  --------------

  { position: ; top: ; left: ; clear: ; float: ; display: ; width: ; height: ; margin: ; padding: ; border: ; background: ; font: ; color: ; text: ; }

*/


/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/

/* ------- GERAL ------- */
* { margin: 0; padding: 0; z-index: 1; } /* reseta todas as margens, paddings e define o nivel das camadas do site */


/* ------- ELEMENTOS ------- */
a img, form fieldset { border: 0; }
form ol { list-style: none; }


/* ------- CLASSES ------- */
.direita { float: right; }
.esquerda { float: left; }
p.direita, p.esquerda { float: none; }
p.direita { text-align: right; }
p.esquerda { text-align: left; }
.centro { text-align: center; }

/* contendo float */
.contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contemfloat { display: inline-block; }
/* Hides from IE-mac \*/
* .contemfloat { height: 1%; }
.contemfloat { display: block; }
/* End hide from IE-mac */

Voltar ao índice

Menu dropdown

ul#menu { list-style: none; }
ul#menu li { float: left; }
ul#menu li ul { position: absolute; display: none; list-style: none; }
  ul#menu li:hover ul { display: block; }
ul#menu li ul li { float: none; }

Voltar ao índice

Rodapé fixo

html, body { height: 100%; }

/* contendo float */
.contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contemfloat { display: inline-block; }
/* Hides from IE-mac \*/
* .contemfloat { height: 1%; }
.contemfloat { display: block; }
/* End hide from IE-mac */

#limites { position: relative; min-height: 100%; margin: 0 auto; }
* html #limites { height: 100%; }

#conteudo { padding-bottom: 50px; border-bottom: 1px solid red; }

#rodape { position: absolute; bottom: 0; left: 0; height: 50px; }

Voltar ao índice

Hover, focus e active no IE6

body { behavior: url(css/csshover2.htc); } /* inclui efeito :hover, :active e :focus para Internet Explorer 6 */

Baixar o arquivo .htc

Voltar ao índice

Comentário

Comentário simples

/* ------- TEXTO ------- */

Voltar ao índice

Comentário maior

/*
  --------------
  NOME DA PÁGINA
  --------------
*/

Voltar ao índice

Background

background: url(../imagens/imagem.jpg) no-repeat;

Voltar ao índice

Image replacement

text-indent: -9999em; overflow: hidden;

Voltar ao índice

Text shadow

text-shadow: 1px 1px 1px #fff;

Voltar ao índice

Download dos clips para o Coda

Microformats

hCard

Profile

<head profile="http://microformats.org/profile/hcard">

HTML


  
  Nome Legal da Silva
  
  	Mídia Digital no setor HTML.
    Rua Reinaldino S. de Quadros, 367. Curitiba - PR - Brasil
    E-mail: nome@empresa.com.br

Voltar ao índice

hCalendar

Profile

<head profile="http://microformats.org/profile/hcalendar">

HTML


  
    Forum W3C Brasil
    
    	12 de Março, 2010
    	Curitiba, PR
    
    Evento da W3C Brasil em Curitiba.

Voltar ao índice

hReview

Profile

<head profile="http://microformats.org/profile/hreview">

HTML


   L’Amourita Pizza
   Análise de Marroney da Silva em 30 de Fevereiro.
   Delicious, tasty pizza on Eastlake!
   L'Amourita serves up traditional wood-fired   
   Neapolitan-style pizza, brought to your table promptly and without fuss. 
   An ideal neighborhood pizza joint.
   Nota: 4.5

Voltar ao índice

hProduct

HTML


  Nome do Imóvel
  Casa
  
  Lorem ipsum tékley tékley
  R$ 99999,99
  Conheça o imóvel

Voltar ao índice

Download dos clips para o Coda

jQuery

Documento Base

$(document).ready(function(){

  /*
    ----
      AJUSTES ESPECIFICOS
    ----
  */
  
  
  
});

Voltar ao índice

Placeholder

$('form input').focus(function() {
  if (this.value == this.defaultValue){
  this.value = '';
  }
    if(this.value != this.defaultValue){
    this.select();
  }
});
$('form input').blur(function() {
  if ($.trim(this.value) == ''){
    this.value = (this.defaultValue ? this.defaultValue : '');
  }
});

Voltar ao índice

Links externos

$(document).ready(function() {
  $('a[rel=external]').attr('target', '_blank');
});

Voltar ao índice

Galeria

Executando o plugin e configurando suas opções

Para executar o plugin no elemento desejado, é só criar uma nova instância:

var galeria_principal = new $.galeriaScroll($('#elemento'));

As definições que já vem configuradas no plugin são:

'galeriaAnterior'  : 'anterior',        // classe para o link anterior
'galeriaProximo'   : 'proximo',         // classe para o link proximo
'itemGaleria'      : 'figure',          // elemento que contem cada item da galeria
'estruturaGaleria' : '.mascara > div',  // elemento que sera animado (com margin)
'velocidade'       : 250,               // velocidade da animacao em ms
'paginacao'        : false,             // true / false para exibir ou esconder a paginacao
'ampliacao'        : false              // true / false para exibir ou esconder a popup da imagem ampliada

Caso queira alterar algum padrão, é só criar a nova instância do plugin para o elemento desejado, alterando o valor da opção:

var galeria_principal = new $.galeriaScroll($('#elemento'), {
  paginacao: true,
  ampliacao: true
});

Controlando a galeria com links externos

Para executar o scroll da galeria por um link externo, basta executar o metodo no clique do mesmo:

$(document).ready(function(){

  // cria a instância da galeria
  var galeria_principal = new $.galeriaScroll($('#elemento'));
  
  // executando o método em um link qualquer, para fazer o scroll
  $('a').click(function(){
    
    galeria_principal.scrollGaleria('anterior'); // O link DEVE ter a mesma classe usada na navegacao da galeria (por padrao usa-se 'anterior' e 'proximo')
    
    return false;
    
  });
  
  // a paginacao pode ser controlada tambem
  $('a').click(function(){
    
    galeria_principal.scrollPaginacao('2'); // No caso da paginacao, define-se para qual pagina o link apontara
    return false;
    
  });

});

Mais detalhes na página do galeriaScroll | Baixar o galeriaScroll v3.0

Voltar ao índice

FAQ

$('dl#faq dd').hide(); // esconde todas as respostas
$('dl#faq dd:first').show(); // mostra somente a primeira
$('dl#faq a').click(function(){
	$(this).parents('dt').next().slideToggle(); // exibe a resposta correspondente
	
	return false;
});

Contador de caracteres em textarea

$('form fieldset textarea').keyup( function () {
  var limite = 300; // limite de caracteres
  var descricao = $('form fieldset textarea').val();
  if (descricao.length > limite) {
    $('form fieldset textarea').val(descricao.substr(0,limite));
    return false;
  } else {
    if (descricao.length == 0) {
      $('form fieldset p.contador strong').html('0');
    } else {
      // retorna quantos caracteres foram escritos
      $('form fieldset p.contador strong').html(descricao.length);
    }
  }
});

Voltar ao índice

Tooltip

var link = $("a[rel=external]"); // links com tooltip
var msg = $("a[rel=external]").attr('title'); // mensagem do tooltip

link.mouseover(function(){
  $(this).css('position', 'relative').append(''+ msg +'');
  $(this).attr('title', '');
  $("span.mensagem").fadeIn();
}).mouseout(function(){
  $("span.mensagem").fadeOut().remove();
  $(this).css('position', 'static');
  $(this).attr('title', msg)
});

Voltar ao índice

Popup Lightbox

function abrePopup(janela){
  $('.popup:first').before(''); // cria a pelicula preta
  var alturaLayer = $('div.'+ janela).height() + 250; // pode ser alterado de acordo com o projeto
  if (altura < alturaLayer){
    $('.pelicula').css({'width' : largura, 'height' : alturaLayer, 'background' : 'black', 'opacity' : '.8', 'filter' : 'alpha(opacity = 80)'});
  } else {
    $('.pelicula').css({'width' : largura, 'height' : altura, 'background' : 'black', 'opacity' : '.8', 'filter' : 'alpha(opacity = 80)'});
  }
  $('div.popup.'+ janela).show(); // exibe a popup especificada no parametro da funcao
  
  // fechar popup
  $('.popup a.fechar, .pelicula').click(function(){
    $('.popup').hide();
    $('.pelicula').remove();
    
    return false;
  });
  
};

Voltar ao índice

Download dos clips para o Coda

Wordpress

Imagem do post

functions.php

function the_thumb($size = "medium", $add = "") {
	global $wpdb, $post;
	$thumb = $wpdb->get_row("SELECT ID, post_title FROM {$wpdb->posts} WHERE post_parent = {$post->ID} AND post_mime_type LIKE 'image%' ORDER BY menu_order");
	if(!empty($thumb)) {
	$image = image_downsize($thumb->ID, $size);
	print "<p class=\"centro\"><img src=\"{$image[0]}\" alt=\"{$thumb->post_title}\" {$add} /></p>";
	}
}

index.php (ou qualquer template)

<?php the_thumb('', 'width="305" height="210"');?> // trocar por medidas desejadas

Voltar ao índice

Links social media

<ul class="social">
  <li class="delicious"><a href="http://del.icio.us/post?url=<?php echo urlencode(get_permalink()) ?>&title=<?php echo urlencode(get_the_title()); ?>" title="Delicious">Delicious</a></li>
  <li class="stumbleupon"><a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php _e(urlencode(the_title('','',false))); ?>" title="Stumbleupon">Stumbleupon</a></li>
  <li class="technorati"><a href="http://technorati.com/cosmos/search.html?url=<?php echo urlencode(get_the_title($id)); ?>" title="Technorati">Technorati</a></li>
  <li class="twitter"><a href="http://twitter.com/home?status=<?php echo urlencode("RT @usuario: "); ?><?php the_title(); ?> - <?php the_permalink(); ?>" title="Twitter">Twitter</a></li>
</ul>

Voltar ao índice

Custom query

<?php query_posts("cat=-66&posts_per_page=2"); ?> // excluindo categoria 66 e definindo apenas 2 posts na pagina
// loop convencional
<?php wp_reset_query(); ?>

Voltar ao índice

Últimos tweets

<ul class="twitter">
<?php
  $twit = stripslashes($twit);
      $twit = preg_replace('/(http:\/\/[a-z0-9\-_\.\/\?&=%]+)/i', '<a href="$1" rel="external">$1</a>', $twit);
      echo $twit;
   $twits = NULL;
  if (!empty($_SESSION['twits'])) {
    $twits = $_SESSION['twits'];
  } else {
    $username = 'blogwebstandard';
    $feed = "http://search.twitter.com/search.json?q=from:{$username}&rpp=5";
    $result = @json_decode(@file_get_contents($feed));
    if ($result) {
      foreach ($result->results as $twit) {
        $twits[] = preg_replace('/(http:\/\/[a-z0-9\-_\.\/\?&=%]+)/i', '<a href="$1" rel="external">$1</a>', $twit->text);
      }
      $_SESSION['twits'] = $twits;
    }
  }
  if (!empty($twits)) {
    foreach ($twits as $twit) {
      echo "<li><p>" . $twit . "</p></li>";
    }
  }
?>
</ul>

Voltar ao índice