Os “10 mandamentos da Web” que a internet brasileira deve seguir, segundo a W3C Brasil:

1. Uma web para todos;
2. Uma web em todas as coisas;
3. Uma web organizada em padrões;
4. Uma web acessível;
5. Uma web de múltiplos autores e leitores;
6. Uma web a serviço da democracia;
7. Uma web para o desenvolvimento social e econômico;
8. Uma web que preserva sua memória;
9. Uma web de todos.

Deseja saber detalhes sobre cada item? Clique aqui.

Obs.: É possível existir uma web brasileira separada ou diferenciada da mundial? Algo pra se pensar…

Sei que faz um tempão que não publico nada no ueb3, muitos vem me cobrando atualizações, porém a vida é corrida demais! Pretendo mantê-lo mais atualizado daqui pra frente…

Abaixo segue uma apresentação feita pela inter.net que vale muito a pena conferir! Está cheia de dicas e sugestões que ajudarão muito os seus projetos web.

Confira logo abaixo a apresentação, ou, caso queira, veja direto no site prezi.com clicando aqui.

Não sejam tímidos, comentem

Vi este post no blog Goncin, e vale a pena dar uma lida pra se alegrar um pouco hehe

Espero que gostem!

<?php

  /*********************************************/

  if (Tempo::getEstado() == Tempo::CHUVOSO)
    $cavalinho->recolher();

  /*********************************************/

  try {
    $this->vencer($eles);
  }
  catch(Exception $e) {
    $this->juntarSeA($eles);
  }

  /*********************************************/

  if (! in_array ($cachorro, $this->meusAnimais))
    $this->cacarCom($gato);

  /*********************************************/

  if ($casa->getOwner() == 'ferreiro')
    $espeto = new Espeto('pau');

  /*********************************************/

  foreach($macacos as $macaco) {
    $galho = new Galho();
    $galho->receber($macaco);
  }

  /*********************************************/

  if ($seguro->idade >= 80) die();

  /*********************************************/

  if ($filho->getParent() == 'peixe')
    $filho->setType('peixinho');

  /*********************************************/

  if (in_array('piranha', $rio->getPeixes()))
    $jacare->setEstiloNadar(NADO_COSTAS);

  /*********************************************/

  if ($olhos->getOwner() != $this) {
    $refresco = $pimenta;
    $refresco->colocarEm($olhos);
  }

  /*********************************************/

  if($homem->isPrevenido())
    $homem->setValor($homem->getValor() * 2);

  /*********************************************/

  if ($pessoa->horaAcordou < strtotime('7:00'))
    DEUS::ajudar($pessoa); // Deus é SINGLETON!

  /*********************************************/

  if ($pessoa->temBoca())
    goto Roma;
  // Milhares de linhas de código depois...
  :Roma
    echo ('Parabéns, você chegou a Roma');

  /*********************************************/

  $numGraos = 0;
  do {
    $numGraos++;
    $galinha->getPapo()->setNumGraos($numGraos);
  } while (! $galinha->getPapo()->isPapoCheio());

  /*********************************************/

  if ($macaco->getIdade() >= 60 && $macaco->getMao()->getOndeEsta() == 'cumbuca')
    throw new Exception('Tire a mão daí!!!');

  /*********************************************/

  $agua->setConsistencia('mole');
  $pedra->setConsistencia('dura');
  while(! $pedra->estaFurada())
    $agua->bater($pedra);

  /*********************************************/

  if($vaca->getLocation() == 'brejo')
    die();

  /*********************************************/

  $dono = $coisa->getOwner();
  if($dono == 'César' || $dono == 'Deus')
    $coisa->entregarPara($dono);

  /*********************************************/

  $x = count($canoa->getPaus());
  echo "Esta canoa foi feita com $x paus.";

  /*********************************************/

  if(date('H:i:s') > '19:00:00')
    foreach($gatos as $gato)
      $gato->setColor('#330000');

  /*********************************************/

  function curiosidade() {
    return shell_exec('kill $(pgrep gato)');
  }

  /*********************************************/

  $outro->setFocinho($um->getCara());

  /*********************************************/

  if(empty($mente))
    Diabo::setOficina($mente);

  /*********************************************/

  while (isVida())
    $esperanca = true;
  $esperanca = NULL;

  /*********************************************/

  if(! in_array('padrinho', $parentada))
    die('pagão');

  /*********************************************/

  define('MAE_COUNT', 1);

  /*********************************************/

  $boi->setDestination($vaca->getDestination());

  /*********************************************/

  if(! empty($saco))
    $saco->ficarEmPe();
  else
    throw new Exception("Encha o $saco.");

  /*********************************************/

  if ($desgraca < 3)
    $desgraca = 'bobagem';

  /*********************************************/

  if(count($remedios) == 0)
    $remediado = true;

  /*********************************************/

  if($terra->getOwner() == 'cego' && count($pessoa->getOlhos()) == 1)
    $terra->coroarComoRei($pessoa);

  /*********************************************/

  array_reverse($pessoas);

  /*********************************************/

  $passaroNaMao->setValue(($passaroVoando->getValue() * 2) + 1);

  /*********************************************/

  switch($cavalo->getModoAquisicao()) {
    case COMPRADO:
    case NASCIDO_NA_FAZENDA:
    case ACHADO:
    case ROUBADO:
    //case DADO:
      $cavalo->verificarDentes();
      break;
  }

  /*********************************************/

  echo 'Com quem andas?';
  $amigo = fgets(STDIN);
  echo "Tu és $nome_pessoa";

  /*********************************************/

Você poderia simplesmente fazer o seguinte:

Aplicar display:block à imagem
Definir as margens esquerda e do topo para a imagem, deixando-a centralizada dentro do box.

Mas o grande problema é que você pode ter imagens no formato retrato e paisagem. Imagine uma galeria de fotos com fotos de diferentes tamanhos, você teria que definir um CSS para cada imagem para que elas ficassem centralizadas.

A solução

Centralizar imagens na horizontal não é difícil, se a imagem está com seu comportamento padrão de display:inline, então um simples text-align:center já resolveria o problema e funcionaria bem em todos os browsers.

Agora para centralizar imagens na vertical, em browsers modernos, uma simples solução é atribuir display: table-cell; e vertical-align: middle ao elemento container. Só que como nessa vida nem tudo são flores, em browsers como o IE7 e inferiores essa técnica não funciona.

Para o IE7, a solução é criar uma espécie de linha, tendo como altura a altura do container e utilizar novamente vertical-align: middle. A propriedade line-height infelizmente não pode ser usada para conseguir esse efeito, uma vez que ela não funciona corretamente no IE7/Win na presença de imagens. Utilizar também uma fonte com algum tamanho grande (sem especificar line-height) é problemático, porque o tamanho da caixa gerada é ligeiramente maior que o tamanho da fonte.

Felizmente o IE7 tem suporte parcial a propriedade display: inline-block. Se um elemento vazio que possua a propriedade inline-block (por exemplo um < span >) é adicionado dentro do elemento container e é atribuído ao mesmo height:100% e vertical-align: middle, então ela permite justamente conseguir o que queremos.

A solução utiliza das propriedades display: table-cell e uma tag < span > extra com display: inline-block. Funciona em todos os browsers, inclusive no Internet Explorer.

Código CSS

No exemplo foi utilizado um elemento container com a classe box e o código para o IE será descrito aqui através de comentarios condicionais:

<style type="text/css">
.box {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.box * {
    vertical-align: middle;
}
</style>

<!--[if lt IE 8]>
<style type="text/css">
.box span {
    display: inline-block;
    height: 100%;
}
</style>
<![endif]-->

A marcação HTML é muito simples e é descrita logo abaixo:

<div class="box">
<span></span>
<img src="" alt="" title="" />
</div>

Vejam o exemplo em funciomanento no post original do iMasters.

Essa técnica foi originalmente desenvolvida pelo desenvolvedor Bruno, veja mais informações no post original.

Basta seguir o tutorial que ensina passo a passo como utilizar este plugin jQuery.

Para acessar, clique aqui: jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Para ver um demo, clique aqui: Demo

Mas será que todos já estão por dentro das novidades? Será que todos conhecem as mudanças que acontecerão?

Para todos os HTMLers, o que posso dizer é que teremos que “reaprender” a escrever nossos códigos…

Por isso quero trazer à vocês um material muito interessante sobre este assunto, preparado pelo pessoal da Visie, empresa que foi escolhida pela W3C para divulgar as novidades do HTML no Brasil.

Para acessar este excelente guia, basta clicar no link: http://tableless.com.br/html5/

Abraços e até a próxima

Quem nunca precisou apresentar muito conteúdo em pouco espaço? Pois é, este tutorial apresenta uma solução muito bacana para nos ajudar nestas situações. Não é necessário nenhum conhecimento aprofundado em programação para entendê-los, pois são em jQuery e basta seguir os tutoriais para que tudo se resolva.

O artigo original você encontra neste link. Espero que ajude

1. Slick Tabbed Content Area – utiliza CSS & jQuery

Ver demonstração

Ver tutorial

2. Tabs simples com jQuery

Ver demonstração

Ver tutorial

3. Tabs simples com jQuery

Ver demonstração

Ver tutorial

4. Tabs simples com jQuery & CSS

Ver demonstração

Ver tutorial

5. jQuery Tabs apresentando menu de navegação

Ver demonstração

Ver tutorial

6. Iniciando com jQuery Tabs

Ver demonstração

Ver tutorial

7. Como criar um efeito de slide com abas em jQuery

Ver demonstração

Ver tutorial

8. JavaScript: jQuery Tabs

Ver demonstração

Ver tutorial

9. Criar um efeito de Flip para conteúdos com jQuery

Ver demonstração

Ver tutorial

10. Tabs muito simples com jQuery

Ver demonstração

Ver tutorial

11. Criando facilmente jQuery Tabs

Ver demonstração

Ver tutorial

12. Animação para apresentação de conteúdos com jQuery

Ver demonstração

Ver tutorial

13. Tabs jQuery com efeito Fade

Ver demonstração

Ver tutorial

14. Efeitos de transição na apresentação de conteúdos com jQuery

Ver demonstração

Ver tutorial

15. jQuery Tabs para apresentação em barra lateral

Ver demonstração

Ver tutorial

Quem nunca precisou formatar sua máquina e perder todos os softwares instalados, e depois perder tempo reinstalando todos novamente? Principalmente nós, profissionais da web, que necessitamos de diversos navegadores, editores e afins.

Pois é, seus problemas acabaram Existe um site, chamado Ninite, onde você consegue selecionar os softwares que atendem a sua necessidade, e em seguida fazer download de todos eles de uma só vez! Para visualizar este recurso, o link está aqui ou na imagem abaixo. Espero que gostem da dica

Para aqueles que quiserem fazer um teste, o link é: http://styleneat.com/

Lembrando que seu código não sofre alterações, mantendo a mesma idéia aplicada por você quando o escreveu.

São 750 ícones em excelente qualidade para você usar e abusar em seus projetos!!!
Estes ícones foram disponibilizados pelo blog Smashing Magazine, onde você encontra ícones voltados para sistemas web, interface com usuários, bandeiras nacionais, teclas,  serviços online e mídias sociais. Tudo isto é grátis! Para fazer o download basta acessar o link abaixo ou clicar na imagem de exemplo:

Download: http://www.smashingmagazine.com/2010/04/15/the-ultimate-free-web-designer-s-icon-set-750-icons-incl-psd-sources/