HTML5 Powered with Semantics

Blog Web Standards

Repositório de Snippets Beta

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

Download dos clips para o Coda

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

Voltar ao índice

Listagem de meses


            

Voltar ao índice

Tabela

Voltar ao índice


            

Voltar ao índice

FAQ
  1. Pergunta 1
  2. Pergunta 2
  3. Pergunta 3
  4. 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





  
  

  

Conteúdo alternativo

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

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

Nome Legal da Silva

  • Mídia Digital no setor HTML.
  • Rua Reinaldino S. de Quadros, 367. Curitiba - PR - Brasil
  • E-mail:

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
Nome do Imóvel

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

$(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

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

<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