Não consigo pensar em outro ponto de partida. Tenho que entender oque é, para só então resolver a questão da melhor forma possível.

Tento prever desdobramentos

Não, não estou treinando para adivinhar o futuro.
Não implemento estes desdobramentos logo de início. GET REAL.

Faço aos poucos, mas nem por isso deixo de planejar futuras expansões.
Pois é importante deixar a estrutura robusta e pronta para receber atualizações de novas features.

Coloco tudo no papel

Dessa forma, eu vejo o que pensei, e sou capaz de mudar antes de sair fazendo.

Estudo as tecnologias que serão empregadas

Se dentre as linguagens, técnicas, ou sei lá o que que eu tiver que usar para desenvolver este projeto, tiver alguma que eu não conheço, ou não sou “tão bom”, eu prefiro estudar ela aparte. Separado do projeto.
Não vou aprender tão bem, usando diretamente no projeto final, qnto eu aprenderia ao estudar separadamente.

“Se eu tivesse nove horas para cortar uma árvore, passaria seis horas afiando o meu machado”

- If I had nine hours to cut down a tree, I would spend six hours sharpening my axe –
Abraham Lincoln citado em “Communication in management‎”. Minha Fonte.

Uns três anos atrás, peguei o meu primeiro “grande projeto”. Pedi 45 dias para entregá-lo. Fiquei 30 dias estudando(sem escrever uma única linha de código), e então nos últimos 15 desenvolvi tudo. Sem pressa, sem problemas, sem dúvidas, e sem grandes dificuldades.
Resultado: está no ar até hoje, e funciona tudo muito bem, obrigado.

Entrego valor

Por menor que esse valor possa me parecer. Mais vale pouco, do que um plano gigantesco de ação, com coisas que nem eram requisitos inicialmente.
É um pouco do “não nos perdermos” no planejamento. Sim, planejar é importante, mas também é preciso fazer.

Seguindo os passos acima, chega a hora de fazer, e consequentemente, começar a entregar.
Deixar para mostrar apenas na versão final, fatalmente trará problemas que teriam sido evitados com entregas parciais.

Versão Alfa

Sim, por que não ?
Lembram-se do “entrego valor” ? O cliente quer ver. Ele quer acompanhar o desenvolvimento.

Tenho menos dor de cabeça, por conseguir ajustar as coisas no meio do caminho, do que esperar ficar tudo pronto para só então mudar complemente tudo.

Menos cobranças também. Quanto mais tempo ficarmos sem apresentar “nada”, mais ligações, emails, visitas e reuniões desnecessárias(mais enxeção de saco), o cliente fará.

Versão Beta

É o resumido. Poucas funcionalidades, mas as funcionalidades essenciais.

Se for um CMS, o básico é cadastrar páginas. Entrego isso, e envio para testes e homologação.
Se for uma Loja Virtual, o cliente não quer saber como cadastrar propriedades variáveis, mas sim colocar um produto com o preço(neste instante). E essa parte precisa funcionar bem.

Minha conclusão

Muitos pecam por não fazerem o simples, por não entregar um básico que esteja 100%.
De que adianta multicategorias, ou nuvem de tags se o cadastro inicial tem bugs ?

Você não precisa começar com MAIS que seu concorrente. Porém julgo ser um ótimo diferencial se necessário for MELHOR. Mais simples, mais rápido, que realmente funcione..

Eu sempre faço tudo oque está acima ?
Lógico que não. Alguns projetos são menores, às vezes é apenas um recorte de layout que já estou bem acostumado a fazer. Porém tenho certeza de que alguns dos passos eu cumpro.

E enquanto escrevia este texto, me dei conta de que os mesmos passos podem ser aplicados a praticamente tudo.
Desde o desenho do layout, passando pelo recorte html+css, modelagem do banco de dados, e construção do backend.

É isso. E você ? como vc desenvolve ?(seja lá oque for)

No decorrer do livro, toda a especificação do html5 vai sendo destrinchada. Eu não sabia da incorporação da linguagem MathML, achei bem bacana, e vem a calhar com um projeto que quero desenvolver.

Canvas, SVG, microdata.. enfim.. é abordado muito mais do que apenas html5. E isso faz o livro ser “bem completo”. De forma que a listagem de eventos e propriedades, também te possibilite reusar o livro para consulta futuramente.

É um bom livro. Iniciantes que nunca tiveram contato com html podem lê-lo. Quem nunca teve contato com html5 também, pois o pensamento vai sendo construido com base em conhecimentos prévios do leitor sobre tableless.

No capítulo 7, finalmente começamos a ler sobre CSS.

Eu gostei.

@errata (erros que eu percebi)
-> tem algum erro aqui antes da 33, mas esqueci de anotar lol
página 33 – _aracteres (faltando uma letra)
página 52 – tabela incompleta (o header com o nome dos browsers)
página 59 – “Foi ai que o grupo de decidiu”
página 120 – Texto duplicado: “Não havia…”
página 137 – “pelo sistema de lê a tela”(provavelmente era pra ser um ‘que’)
página 138 – “e entender como o essas” (acho q tem um ‘o’ sobrando)
página 143 – “As pseudo-classes manipula um” – faltou o plural
página 144 – “das pseudo-classes é vem” – o ‘é’ tá perdido ali
página 144 – “especificação do W3C4″ – o ’4′ tá perdido ali
página 145 – “não formatam os estaods” – correto: estados
página 145 – “alternadas) precisarímos” – precisaríamos, porém creio que “precisávamos” cairia melhor.
página 159 – “dessas cores6.” – tá sobrando esse 6
página 159 – “problemas sufientes” – correto: suficientes
página 160 – “leia no Wikipedia7″ – sobrando o ’7′
página 160 – “o pessoal do WAsP8″ – sobrando o ’8′
página 189 – “caso o tamanho ou a resolução da tela mudam” – mudem(sugestão)
página 196 – “criou um script9 em” – sobrando o ’9′
página 200 – “O page box irá ter o tgamanho” – sobrando o ‘g’
página 212 – “Utilizar CSS” – sugiro: Ao utilizar…
página 216 – “para um caminha” – correto: caminho
página 218 – “homogênea, flexível, portável.” – sugiro ..flexível e portável.

-> Use algum CSS reset;
-> Ordem alfabética (?) [eu prefiro ordenar por 'tipo'];
-> Use regras resumidas(agrupamento): margin-top: 10px; margin-bottom: 5px;.. seria melhor: margin: 10px 0 5px;
-> Comente para organizar;
-> Identar elementos encaixados (?) [particularmente não sou muito fãn disso] [fonte]
-> Dividir de forma lógica, algo como: estrutura, classes utilitárias, módulos…
-> Um único padrão de nomenclatura [camelCase, dash-case, underscore, ou...] (seja consistente);
-> Escolha bons nomes; (meu post anterior fala um pouco sobre isso)
-> Uma Regra = Uma linha … Múltiplas regras = Múltiplas linhas; [fonte]
-> Indice [um comentário no início mostrando os grupos de seletores que vc usou];
-> Mais de uma folha de estilos [se o site for "grande" isso vale a pena] [fonte]

E outras tantas parecidas, derivadas, e com nomes diferentes dessas acima.
Quero falar sobre o mau cheiro. Sobre quando é que o seu código deve lhe parecer “estranho”, “incorreto” apesar de funcionar.
Afinal é necessário identificar que algo está errado para poder corrigir

Quando você notar duplicação de código:

Por exemplo, você possui uma área parecida com isto:

#box_telefone {
   background: #fff; border-radius: 10px;
   float: left;
   width: 100px; height: 50px;
}
#box_email {
   background: #fff; border-radius: 10px;
   float: left;
   width: 200px; height: 75px;
   margin: 20px;
   color: #ddd;
}

Ambos são “caixas” no layout, e possui estilos(formatações básicas) semelhantes. Eu sugiro fazer algo assim:

.box { background: #fff; border-radius: 10px; }
.fleft { float: left; }
#box_telefone {
   width: 100px; height: 50px;
}
#box_email {
   width: 200px; height: 75px;
   margin: 20px;
   color: #ddd;
}

Note que também retirei o float dos seletores, e fiz uma “classe utilitária” para ele.
Dessa forma posso sei lá, usar o #box_telefone na esquerda na home, e na direita na página de contato.

Existem técnicas e “boas horas” para separar, vá com cuidado.

Quando tiver muitos seletores com vírgulas

Algo assim:

#box_telefone,
#box_email { /* .. */ }

Isso “tende” a crescer. Tende a sair do controle. Então se você precisar de mais uma caixa com estilos parecidos, vai lá e adiciona outro seletor com vírgula ai.
Nesse caso, aplique a dica de cima. Vale mais a pena criar classes “modulares”, do que ir listando IDs para um mesmo conjunto de regras.

Quando a cascata CSS não estiver sendo utilizada

Um outra forma de evitar duplicação de código css, é aproveitar bem a cascata css. Coisas como: definir o font-family para o seletor body, que então os demais elementos herdarão dele.
Mas não definir tag por tag, pois quando você precisar sobrescrever, ficará brigando por especificidade.

Use a cascata, porém tente ser genérico. Bem pouco específico, ou nada(se não, não é cascata).

Quando um efeito/posicionamento estiver lhe dando muito trabalho

Se você entender corretamente o boxmodel, e souber utilizar todas as propriedades css, conhecendo tudo o que elas fazem(de acordo com as especificações), então aquele posicionamento que está te dando mais trabalho, te fazendo usar 10-15 regras, pode estar errado.

É bem sutil isso. Mas existem várias formas de se fazer uma mesma coisa.
Se você começar a fazer uma que não está dando certo, e for ficando cada vez mais complexo, então repense e tente fazer de outra forma.

Às vezes basta mudar um pouco o outro elemento que estava antes na marcação, ou posicionar de uma outra maneira este problemático, e tudo se resolve.
Posso dizer que quanto mais complicado ficar a sua estratégia para resolver, mais chances você tem de encontrar incompatibilidade entre os browsers.

A minha regra aqui é:

Deve primeiro fazer sentido para você mesmo.

Digo isso, pois muitos desenvolvedores saem jogando propriedades, “até dar certo”. Na base do chute. Não é assim que se desenvolve “bem”.

Consigo me lembrar destas por hora. Conhece mais alguma forma ?
Me conte nos comentários.

Pensando nessa linha, implementei um botão ali no header do meu blog: “black theme”.
Estou em fase de testes. Não travei com cookie ainda.

Adicionei as seguintes linhas no meu css, para “mudar” a cor do meu tema.

/* black style */
#switch { cursor: pointer; border: 1px solid #ccc;
display: inline-block; padding: 5px 20px; }
body.black { background: #090909; }

.black .post time,
.black #main { background: transparent; }

.black #sidebar a,
.black, .black #switch,
.black h1 a, .black h2 a { color: #fff; }

.black .post time,
.black h1, .black h2, .black h3, .black h4, .black h5, .black h6,
.black a { color: #00aaff; }

/* highlight */
.black .dp-highlighter ol li span { color: #333; }

.black .dp-highlighter .tools,
.black .dp-highlighter, .black .dp-highlighter ol,
.black .dp-highlighter ol li, .black .dp-highlighter .columns div,
.black .dp-highlighter ol li.alt { background: transparent; }

.black .dp-highlighter .tools,
.black .dp-highlighter ol li, .black .dp-highlighter .columns div { border-color: #00aaff; }

Como podem ver, o javascript apenas adiciona uma class ao body e pronto. O css cuida do restante.

Tendo ficado bom, eu termino a implementação e travo com cookie a sua opção de ver meu blog in black.
Me digam oque acharam. =)

Acabei deixando passar em branco, a funcionalidade dos comentários Reply, aparecerem logo abaixo do comentário pai deles. Em cadeia mesmo.
Ficando assim:

O que é bem ruim para organização, e confunde bastante a discussão. Eu não queria ter que instalar plugins de comentário apenas para isso.
Estudei um pouquinho o tema TwentyTeen, com a dica do @ThiagoCruz, e então:

É isso. Os códigos que adicionei estão abaixo:

function.php

if ( ! function_exists( 'parent_comment' ) ) :
/**
 * Template for comments and pingbacks.
 *
 * To override this walker in a child theme without modifying the comments template
 * simply create your own twentyten_comment(), and that function will be used instead.
 *
 * Used as a callback by wp_list_comments() for displaying the comments.
 *
 * @since Twenty Ten 1.0
 */
function parent_comment( $comment, $args, $depth ) {
	$GLOBALS['comment'] = $comment;
	switch ( $comment->comment_type ) :
		case '' :
	?>
		<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>"> <?php echo get_avatar( $comment, 32 ); ?>

			<cite><?php comment_text() ?></cite>

			<?php comment_type(_x('Comentário', 'noun'), __('Trackback'), __('Pingback')); ?>
			<?php _e('por'); ?>
			<?php comment_author_link() ?>
			—

			<time datetime="<?php echo $comment->comment_date; ?>">
				<?php comment_date() ?>
				@ <a href="#comment-<?php comment_ID() ?>">
				<?php comment_time() ?>
				</a>
			</time>
			<?php edit_comment_link(__("Editar"), ' | '); ?>

			<?php if ( $comment->comment_approved == '0' ) : ?>
				<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em>
			<?php endif; ?>

			<?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
		</li>

	<?php
			break;
		case 'pingback'  :
		case 'trackback' :
	?>
	<li class="post pingback">
		<p><?php _e( 'Pingback:' ); ?> <?php comment_author_link(); ?><?php edit_comment_link( __( '(Edit)' ), ' ' ); ?></p>
	<?php
			break;
	endswitch;
}
endif;
?>

comments.php

<?php if ( have_comments() ) : ?>
	<ol id="commentlist">
		<?php wp_list_comments( array( 'callback' => 'parent_comment' ) ); ?>
	</ol>
<?php else : // If there are no comments yet ?>
	<p><?php _e('Nenhum comentário ainda.'); ?></p>
<?php endif; ?>

style.css

#commentlist .children { margin-left: 25px; }

Ahh, e sem se esquecer do novo input hidden, para o comentário reply saber quem é o pai dele:

comments.php ou comment_form() [caso vc não tenha personalizado o form]

<input type="hidden" name="comment_parent" id="comment_parent" value="<?php if( isset( $_GET['replytocom'] ) ) echo $_GET['replytocom']; ?>" />

=)

Eu quero ler você.

Não vou começar dissertando sobre algum assunto baseado nas minhas experiências e estudos..
Vou construir o conteúdo com ajuda de todos os que comentarem neste tópico. Depois de colher e entender como alguns profissionais da área pensam, vou fazer um apanhado e concluir o assunto.

Me conte, como você nomeia seus IDs e CLASSes no HTML/CSS ?
-> Prefere tentar representar oque aquele elemento faz na tela ?
tipo.. #header, #footer, #coluna_porque_escolher.. ? (inglês ou em português hein?!)
-> Prefere as vezes usar nomes genéricos como:
#menu .first, #menu .last, #products .last, .. ?
-> Separa palavras compostas com underline ? hífen ? camelCase ?
#menu_interno, #menu-interno, #menuInterno ?

E principalmente, por que?

Conto com você. Não importa o seu nível de conhecimento ou experiência. Toda ajuda é bem-vinda.

Não uso nenhum dos “consagrados reset.css”, porque considero gordura ao meu estilo de desenvolver. Apenas zerar margin e padding, e me deixar livre para definir as regras das minhas tags é o suficiente, e tenho trabalhado bem assim.

Tudo bem simples, a idéia é não encher a folha de coisas desnecessárias.

* { margin: 0; padding: 0; list-style: none; border: none; }

html, body { height: 100%; }
body,
input, select, textarea { font-size: 12px; font-family: Tahoma, sans-serif; color: #333; }

body { min-width: 300px; }

h1, h2, h3, h4, h5, h6 { }

a { text-decoration: none; color: #4b4d4d; }
a:hover { text-decoration: underline; }
p { margin-bottom: 15px; }

.content { width: 960px; margin: 0 auto; }
.fleft { float: left; }
.fright { float: right; }
.clear { clear: both; }

@media only screen and (max-width: 800px){
	.content { width: auto; }
	img { max-width: 100% !important; height: auto !important; }
}

Uso meu blog como repositório também, então tá aqui. =)

http://wbruno.com.br/2012/03/01/elemento-body-nos-nossos-sites-como-melhor-aproveita-lo/

E nele eu cito, que o “trabalho” do server-side, seria gerar essas classes no body, ou então nós mesmos fazer isso “na mão”, página por página.

Sou preguiçoso então…

Por exemplo, se a URL for:

site.com.br/ ou site.com.br/index.html
a classe do elemento body, deve ser:

<body class="home">

E para cada nível, a class deve refletir:
site.com.br/frutas.html

<body class="frutas">

Mas se começar a “complicar”, e mais níveis surgirem..

site.com.br/frutas/banana.html

<body class="frutas banana">

Ou:
site.com.br/frutas/banana/nanica.html

<body class="frutas banana nanica">

Para ser eficiente, a class do nosso body, deve refletir essa “realidade”.
Criei um conjunto de funções em php, que fazem isso. Analisam a URL requisitada (REQUEST_URI), e devolvem essa estrutura:

<?php

/**
 * @return boolean, true caso a URI seja a home do site
 */
function is_home(){
	return stripos( $_SERVER['REQUEST_URI'], 'index.html' )
		|| !stripos( $_SERVER['REQUEST_URI'], '.html' );
}
/**
 * @return string, class=""(html) de acordo com o URI atual
 */
function get_body_class(){
	if( is_home() ) return 'class="home"';

	$pieces = explode( '/', $_SERVER['REQUEST_URI'] );
	$class = Array();
	foreach( $pieces AS $part ){
		$class[] = str_replace( '.html', '', $part );
	}

	return 'class="'.implode( ' ', $class ).'"';
}
/**
 * @see get_body_class()
 */
function body_class(){ echo get_body_class(); }

Agora que terminei de escrever, percebi que você pode usar também para um bread crumb, ne?!
Me diz o que você acha.
É isso =)

sudo /usr/sbin/apachectl restart

<body>
<!-- todo o conteudo do site aqui dentro -->
</body>

Todos nós conhecemos. Mas será que estamos utilizando de verdade ele ?

O body é o elemento no nosso documento responsável por ser o container de tudo que é conteúdo do site.
Diferente do <head>, oque está dentro do <body> é oque fica/ou ficará disponível para visualização do visitante.

As informações que queremos transmitir. Títulos, Textos, Imagens..
Até aqui, todos nós já usamos o body para isso, mas.. e o que mais podemos fazer com ele ?

Pode parecer absurdo falar isso, mas convém lembrar: o body é uma tag html! E como tal, aceita atributos:
http://www.w3schools.com/tags/tag_body.asp

Os mais interessantes, são o id e a class. Vocês já tinham colocado um desses no body de algum site ?

<body id="home">

Usar o body com um ID

É uma proposta interessante, e nos ajuda a economizar alguns elementos de estruturação de layout de vez em quando.
Por exemplo, aqueles layouts onde a home do site difere por poucas coisas das páginas internas, como: topo mais alto, rodapé inexistente..

Esse tipo de situação, podemos facilmente resolver usando o atributo ID no body.
Sendo a home, estilizamos o topo diferente doque ele seria nas internas:

body#home #header { height: 200px; }
#header { height: 100px; }

A marcação html fica intacta, evitamos, coisas como: #header_home..
E isso nos levará a escrever um css mais bonito também. Afinal, fizemos um condicional no css!

Usar o body com uma ou mais CLASSes

Hum.. na verdade eu comecei explicando o ID, porém hoje em dia, eu prefiro

<body class="home">

do que com ID.

Pelo simples motivo de poder usar mais de uma. Com classes, temos todos os benefícios que citei do ID:

body.home #header { height: 200px; }
#header { height: 100px; }

E é possível colocar mais de uma, veja:

<body class="cursos html">

A motivação disso, é imaginemos um menu dropdown.

   <li>Cursos
      <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
      </ul>
    </li>

Assim cada página interna, teria uma combinação de class para o body diferente:
class=”cursos html”, class=”cursos css”, class=”cursos javascript”..
A vantagem disso, é que a class=”cursos”, é comum a todos eles, e no css podemos fazer facilmente um destaque naquele item de menu, se estivermos dentro de um dos filhos!

Mais uma vez, levamos o poder do css à outro nível!

Tendo a class html, css.. e sabendo que cada página interna terá somente um título H1, podemos por exemplo, fazer o H1 ser azul na página de HTML, ser vermelho na página de css, e ser de qq outra cor por padrão, nas páginas em que não definirmos nada.

.html h1 { color: #00f; }
.css h1 { color: #f00; }
h1 { color: #000; }

A grande sacada disso é não precisarmos adicionar nada mais no html, além das respectivas classes no body.

O body é pai de todo mundo

Conhecendo o efeito cascata do css, e sabendo que tudo o que o visitante verá está dentro do body do documento, é melhor usar a herança do css para definir os padrões do site, como:

body { font-size: 12px; font-family: Tahoma, sans-serif; color: #333; }

E porque o body ? pq afinal, todos os elementos posteriores herdarão dele, e isso tudo com uma especificidade bem baixa. Então não precisamos brigar para sobrescrever estilos.

Deve ter ficado implícito, mas quero ressaltar com uma ressalva: todos os elementos, menos os de formulário.
Por algum motivo que desconheço, input, select e textarea, não herdam ‘naturalmente’ definições de fonte declaradas no body.

body, input, select, textarea {
    font-size: 12px; font-family: Tahoma, sans-serif; color: #333;
}

Com isso, cobrimos todas as tags, e não estragamos as definições padrões como, <small> terá uma fonte menor que o body, <h1> continua com uma fonte maior.. por esse motivo que não uso o seletor global * para esse trabalho.
Ele aplica a todos os elementos, mas de forma “forçada”, elemento a elemento. E não por herança como ocorre qndo trabalhamos com o body.

A idéia é brigarmos menos com nós mesmos. E só sobrescrever poucas propriedades.
Isso é ótimo por uma outra questão: não corremos o risco de “esquecer” de alguma tag, visto que com uma declaração simples, e aproveitando a herança do css, nós atingimos ela.
Por este motivo não gosto daqueles css resets gigantescos e milagrosos, entretanto isso é assunto para um próximo post.

O body aceita css!

Sabe aquele fundo do topo com degradê, e aquela linha do header que vai de uma ponta a outra do browser? (100% width), então..
aplica como background do body!
Simples assim. Descartamos a necessidade de um #wrap_header, e jogamos em uma só imagem como background do body, pois ele mesmo já tem de graça para gente, 100% de largura da viewport.

Esse é apenas um exemplo, para tentar “abrir” a mente. As possibilidades são muitas.
Às vezes precisamos rever coisas “óbvias” ou “básicas”, pois podem fazer coisas impressionantes.

Que tal ?

Usar: .eq(3) é o mesmo que :nth-child(3), oq queremos é o 3n

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('.lista li:nth-child(3n)').css('background','#f0f');
});
</script>
<style type="text/css">
.lista { width: 180px; }
.lista li {
	background: #f00;
	margin: 5px;
	width: 50px;
	height: 50px;
	float: left;
}
.clear { clear: both; }
</style>
</head>
<body>
	<h2 class="clear">Primeira lista</h2>
	<ul class="lista">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<h2 class="clear">Segunda lista</h2>
	<ul class="lista">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<h2 class="clear">Terceira lista</h2>
	<ul class="lista">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>

A minha proposta aqui, é controlar toda a lógica do show/hide com css.
Em vez de fazermos malabarismos com coisas como:

        document.getElementById("Carro").className = "invisivel";
        document.getElementById("Moto").className = "invisivel";
        document.getElementById("Pesados").className = "invisivel";
        document.getElementById("Agrícolas").className = "invisivel";
        document.getElementById("selecione").className = "invisivel";
        document.getElementById(div).className = "visivel";

E ai, qndo tiver q mostrar mais de um elemento a cada option do select, recorrer a colocar mais linhas/parâmetros no js.
O javascript que proponho é o seguinte:

function id( obj ){ return document.getElementById( obj ); }
window.onload = function(){
	id('escolha').onchange = function(){
		id('pai').className = this.value;
	}
}

E conforme queiramos mais elementos a serem mostrados, ou mais regras, não temos que alterar absolutamente nada no js.
Apenas no html, e no css.
Veja que toda a lógica de mostrar/esconder, está no css:

p, #lista li { display: none; }

.carros #palio,
.carros #punto,
.carros #gol,
.carros #volks { display: block; }

.animais #gato,
.animais #cao,
.animais #vet { display: block; }
/* deixei separado apenas para facilitar o entendimento */
.linguagens #ajax,
.linguagens #js,
.linguagens #css,
.linguagens #programador { display: block; }

A primeira regra css, esconde tudo.
As demais, vão dando block, conforme uma classe pai. Exatamente a que estamos alterando via js.

É isso. O que vc acha dessa abordagem ?

<html>
<head>
	<title>Show/Hide com css</title>
<script type="text/javascript">
function id( obj ){ return document.getElementById( obj ); }
window.onload = function(){
	id('escolha').onchange = function(){
		id('pai').className = this.value;
	}
}
</script>
<style type="text/css">
p, #lista li { display: none; }

.carros #palio,
.carros #punto,
.carros #gol,
.carros #volks { display: block; }

.animais #gato,
.animais #cao,
.animais #vet { display: block; }

.linguagens #ajax,
.linguagens #js,
.linguagens #css,
.linguagens #programador { display: block; }

</style>
</head>
<body>
	<select name="escolha" id="escolha">
		<option value="">Esconder todos</option>
		<option value="carros">Carros</option>
		<option value="animais">Animais</option>
		<option value="linguagens">Linguagens</option>
	</select>

	<div id="pai">
		<ul id="lista">
			<li id="palio">Palio</li>
			<li id="punto">Punto</li>
			<li id="gol">Gol</li>

			<li id="gato">Gato</li>
			<li id="cao">Cão</li>

			<li id="ajax">AJAX</li>
			<li id="js">JS</li>
			<li id="css">CSS</li>
		</ul><!-- /lista -->

		<p id="volks">Volks</p>

		<p id="vet">Veterinária</p>

		<p id="programador">Programador</p>
	</div>
</body>
</html>

Demonstração

Mac-mini:lw_html5 william$ for file in *.php; do file --mime $file; done
404.php: text/x-php; charset=us-ascii
archive.php: text/x-php; charset=utf-8
comments.php: text/x-php; charset=us-ascii
footer.php: text/plain; charset=us-ascii
functions.php: text/x-php; charset=us-ascii
header.php: text/html; charset=us-ascii
index.php: text/x-php; charset=utf-8
page.php: text/x-php; charset=utf-8
search.php: text/x-php; charset=utf-8
searchform.php: text/plain; charset=us-ascii
sidebar.php: text/plain; charset=us-ascii
single.php: text/x-php; charset=utf-8

É isso.
=)

http://blog.locaweb.com.br/geral/novo-tema-do-blog-locaweb-e-um-presente-para-voce/

Eu fiz um FrameWork WP com base nesse tema, que tem Responsive Web Design, HTML5 semântico e limpo..

No post do blog da Locaweb, deixei um link para download desse tema base.
Eu estou atuamente usando ele aqui no meu blog, com uma pequena customização de cores.

Use você também, comente sobre as tuas impressões, sugestões..

http://wbruno.com.br/2011/05/27/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2

			$.ajax({
				url: href,
				success: function( response ){
					//forçando o parser
					var response = $( '<div>'+response+'</div>' );

					var data = response.find('#content').html();

					//apenas atrasando a troca, para mostrarmos o loading
					window.setTimeout( function(){
						content.fadeOut('slow', function(){
							content.html( data ).fadeIn();

							var title = response.find('title').text();
							window.history.pushState( href, title, href );
							document.title = title;
						});
					}, 500 );
				}
			});

Notem a linha:

window.history.pushState( href, response.find('title'), href );

É essa nova função que veio junto com o HTML5, que faz toda a mágica.
Browsers antigos não implementam esse método.

Agora podemos parar de forçar a barra usando o document.location.hash, como nessa implementação aqui:
http://wbruno.com.br/2011/11/25/carregando-conteudo-ajax-trocando-url-jquery/

Demonstração

É isso. Dúvidas ? pergunte, comente!

Precisei disso recentemente, e como não trabalho muito com flash, e nunca programei nada de verdade em ActionScript, pedi socorro ao mestre do flash: Thiago Cruz.

No blog dele, ele já postou ótimos exemplos, de utilizar a class externalinterface, então deixo por aqui também, o exemplo do código fonte que ele fez para mim.

O javascript fica assim:

function onFlashReady() {
    sendToAS("another test message");
}

function callJS(value) {
    onFlashReady();
    return "Hi Flash.";
}

function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName];
    } else {
        return document[movieName];
    }
}

function sendToAS(value) {
    thisMovie("externalclass").callAS(value);
}

e o action script:

import flash.external.*;

play();

System.security.allowDomain("*");

ExternalInterface.addCallback("callAS", this, func);
ExternalInterface.call("callJS", 1);

function func(n:Number) {
    gotoAndStop(n);
}

Download ExternalClass.zip

Vlw pela ajuda Thiago!!

function ultimos_posts_display() {
	// print some HTML for the widget to display here
	echo '<div class="sidebar-box ultimos-posts"><strong>Últimos posts</strong>
	<ul>';

	$recent_posts = wp_get_recent_posts();
	foreach( $recent_posts as $recent ){
		echo '<li><span>'.preg_replace( '/([0-9]{4})-([0-9]{2})-([0-9]{2})([\s0-9:]+)?/', '$3-$2-$1', $recent['post_date'] ).'</span>
		<a href="' . get_permalink($recent["ID"]) . '" title="Look '.$recent["post_title"].'" >' .   $recent["post_title"].'</a></li> ';
	}

	echo '</ul></div>';
}

wp_register_sidebar_widget(
	'ultimos_posts_1',        // your unique widget id
	'Ultimos posts',          // widget name
	'ultimos_posts_display',  // callback function
	array(                  // options
		'description' => 'Widget dos ultimos posts com data'
	)
);

Album de fotos, baseado em um escode/mostra, com a propriedade display.
Fiz em javascript puro, em poucos minutos. Foi mais dificil achar as imagens, e mais trabalhoso redimensionar elas, do que fazer o código js.. hehe

Enfim, online:

Demonstração

script usado:

<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function hide_all(){
	var els = id('content').getElementsByTagName('ul');

	for( var i=0; i<els.length; i++ )
	{
		els[i].style.display = 'none';
	}
}
/* http://www.javascriptkit.com/jsref/event.shtml */
function disablelink( e ){
	var evt = window.event || e
	if (evt.preventDefault) //supports preventDefault?
		evt.preventDefault()
	else //IE browser
		return false
}
function palco( src ){
	id('palco').innerHTML = '<img src="'+src+'" alt="" />';
}
window.onload = function(){
	hide_all();
	var as = id('lista').getElementsByTagName('a');
	for( var i=0; i<as.length; i++ )
	{
		as[i].onclick = function( e ){
			hide_all();
			var id_el = this.href.split('#')

			id( id_el[1] ).style.display = 'block';
			return disablelink( e );
		}
	}
	var as = id('content').getElementsByTagName('a');
	for( var i=0; i<as.length; i++ )
	{
		as[i].onclick = function( e ){
			palco( this.href )
			return disablelink( e );
		}
	}
}
</script>

Nem sempre ‘temos tempo’ de parar, analisar e otimizar oque estamos fazendo.
Porém, devemos fazer isso.

Fiz vários tipos de carouseis, porém por serem diferentes um dos outros, e alguns possuirem algumas peculiaridades, configurações extras, estilizações fora dos padrões, acabei fazendo os meus próprios códigos, e não usando nenhum plugin pronto.

Nesse post, vou deixar o start de um plugin de jQuery, que rapidamente fiz aqui.
Muitas melhorias precisam ser feitas, como:
-> possibilitar scroll vertical
-> não limitar a marcação a ser usada
-> permitir uso do easing..

e por ai vai.. nisso, eu acabaria recriando o cycle(ou chegando perto do efeito Hz dele). Não é essa a intenção.
Até agora é para ser simples mesmo, e muito mais simples de usar também.

Como todos os meus efeitos, esse não foge do meu padrão: resolvi as partes mais complicadas no css.
O js é simples. O instanciamento ainda mais.

É isso, sem mais, segue o código, e logo abaixo a demonstração.
A grande ‘sacada’, é deixar o plugin se virar com a animação, (setas prev e next), e termos uma chamada simples e limpa assim:

/* fim plugin carousel */
jQuery(document).ready(function(){
	jQuery('#slide').carousel();
	jQuery('#slide2').carousel();
});

Demonstração

=) Vejam como fiz:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
/* carousel */
jQuery.fn.carousel = function( settings ){
	var $this = jQuery( this );
	var defaults = {
		prev: '.nav-left',
		next: '.nav-right',
		pos: 0,
		speed: 1000
	}
	settings = jQuery.extend(defaults, settings); 

	var lis = $this.find('li');
	var width_li = lis.eq(0).width()+ parseInt( lis.eq(0).css('marginLeft') )+parseInt( lis.eq(0).css('marginRight') );
	var ul = $this.find('ul');

	var prev = $this.find( settings.prev );
	var next = $this.find( settings.next );

	ul.css({width: (width_li*lis.length)+'px'});

	/* .nav-left */
	prev.click(function(){
		if( settings.pos>0 ){
			settings.pos--;
			_move( ul, settings.pos, width_li, settings.speed );
		}
	});
	/* .nav-right */
	next.click(function(){
		if( lis.length-1>settings.pos ){
			settings.pos++;
			_move( ul, settings.pos, width_li, settings.speed );
		}
	});

	/* funcoes privadas */
	_move = function( ul, pos, width_li, speed ){
		var new_left =  -1*pos*width_li;
		ul.animate({left:new_left+'px'},settings.speed);
	}

	return $this;
};
/* fim plugin carousel */
jQuery(document).ready(function(){
	jQuery('#slide').carousel();
	jQuery('#slide2').carousel();
});
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
#slide { width: 460px; height: 300px; }
	#slide li { width: 460px; height: 300px; }
#slide2 { width: 140px; height: 105px; padding: 10px 25px; background: #000; }
	#slide2 li { width: 140px; height: 105px; }
hr { margin: 50px; }

/* css do plugin */
.carousel { position: relative; }
.overflow { overflow: hidden; height: 100%; position: relative; }
.carousel ul { position: absolute; top: 0; left: 0; }
.carousel li { float: left; }
.nav { position: absolute; top: 50%; z-index: 3;
	background: url('images/nav.png') no-repeat;
	width: 36px; height: 36px; margin-top: -18px;
	cursor: pointer;
}
.nav-left { left: 10px; }
.nav-right { right: 10px; background-position: right top; }
	.nav-left:hover { background-position: left -36px; }
	.nav-right:hover { background-position: right -36px; }
/* css do plugin */
</style>
</head>
<body>

	<div id="slide" class="carousel">
		<div class="nav nav-left"></div>
		<div class="overflow">
			<ul>
				<li><img src="images/1.jpg" alt="" /></li>
				<li><img src="images/2.jpg" alt="" /></li>
				<li><img src="images/3.jpg" alt="" /></li>
				<li><img src="images/4.jpg" alt="" /></li>
				<li><img src="images/5.jpg" alt="" /></li>
			</ul>
		</div>
		<div class="nav nav-right"></div>
	</div><!-- /slide -->

	<hr />

	<div id="slide2" class="carousel">
		<div class="nav nav-left"></div>
		<div class="overflow">
			<ul>
				<li><img src="images/mini1.jpg" alt="" /></li>
				<li><img src="images/mini2.jpg" alt="" /></li>
				<li><img src="images/mini3.jpg" alt="" /></li>
				<li><img src="images/mini4.jpg" alt="" /></li>
			</ul>
		</div>
		<div class="nav nav-right"></div>
	</div><!-- /slide -->
</body>
</html>