Arquivo

Textos com Etiquetas ‘HTML’

Como usar um logo no seu blog e manter a relevância do H1

7 de junho de 2011

As tags de cabeçalho H1, H2, H3, H4, H5 e H6 são utilizadas para marcar pontos de destaque no texto da página. Essas tags, quando utilizadas corretamente, estruturam o texto de uma forma hierárquica, de maneira que haja sub-níveis no contexto da página.

As tags de cabeçalho possuem um grau de importância no raqueamento nos mecanismos de busca, onde a tag H1 possui o maior peso, H2 um peso menor e assim por diante até a tag H6.

Em geral, utilizamos a tag H1 para destacarmos o título de blogs e/ou sites. Por exemplo, nesse blog:

<div id="header">
  <div id="caption">
    <h1 id="title"><a href="http://prodis.net.br/" title="Prodis a.k.a. Fernando Hamasaki de Amorim">Prodis a.k.a. Fernando Hamasaki de Amorim</a></h1>
  </div>
  ...

Mas e se eu quiser utilizar uma imagem no nome do meu blog ao invés de um texto HTML? Vou perder a relevância do H1 nos mecanismos de busca?

Uma alternativa, que na verdade eu “chupinhei” do código-fonte do blog do Héric Tilly, é utilizar tanto a tag H1 como a imagem de logo.

<div id="header">
  <div id="caption">
    <h1>Prodis a.k.a. Fernando Hamasaki de Amorim</h1>
    <a href="http://prodis.net.br/" title="Prodis a.k.a. Fernando Hamasaki de Amorim"><img src="http://prodis.net.br/images/logo.png" alt="Prodis a.k.a. Fernando Hamasaki de Amorim"></a></h1>
  </div>
  ...

Para o texto dentro das tags H1 não ser exibido, escondemos via CSS:

#caption h1 {
  display: none;
}

Agora você tem uma imagem para o nome do seu blog e continua com a relevância do H1 para os mecanismos de busca.

Geral , , , ,

Somos um Só: um caso de uso do WordPress como hotsite

22 de dezembro de 2010

O projeto Somos um Só é uma série de documentários, programetes e um hotsite, com o objetivo de contribuir na formação do espírito crítico, possibilitando o entendimento com liberdade, das relações dos homens com o meio ambiente.

Esse projeto foi realizado através de uma parceira entre SESC SP, Fundação Padre Anchieta, SESC TV, TV Cultura, Portal SESC SP e Cultura Novas Mídias, com produção executiva da Digital Produções.

Clique na imagem para ampliá-la

Clique na imagem para ampliá-la

São oito documentários que trazem uma história vivida por todos nós, a partir do mundo cotidiano, investigando as relações dos homens com o meio ambiente.

A obra de ficção resume a visão desse trabalho sobre o futuro do planeta na perspectiva do sócio ambiente.

E o hotsite amplia a cobertura e o acesso ao conteúdo, com muitos vídeos, fotos e textos. É aí que eu entro, juntamente com o WordPress.

A escolha do WordPress

A decisão de utilizar o WordPress como Sistema de Gerenciamento de Conteúdo (do inglês Content Management Systems - CMS) se baseou nos pontos a seguir:

  • Disponibilizar o hotsite para acesso público em um tempo muito curto;
  • Facilidade de publicação de conteúdo;
  • Alto grau de customização de layout da plataforma;
  • Custo reduzido de implantação em comparação a um sistema customizado novo.

A maneira de se publicar conteúdo em um blog é relativamente simples, o que ajuda os jornalistas responsáveis pelo conteúdo do Somos um Só.

Hospedagem e configuração

Como serviço de hospedagem utilizamos o plano mais simples de Linux da Locaweb, instalando o WordPress pelo próprio instalador de aplicativos fornecido pela hospedagem de sites.

Depois de configurado, atualizei o WordPress para a versão mais recente.

Customização de layout

O maior desafio foi a customização do layout. O ponto de partida foi utilizar como base um tema do WordPress já existente, que se assemelhasse à estrutura de conteúdo que o hotsite deveria ter.

O tema escolhido foi o Arthemia de Michael Hutagalung, que possui uma área de destaques de posts, com criação automática de miniaturas de imagens.

A partir daí o tema foi totalmente modificado, se adequando ao layout proposto pela equipe de design da Digital Produções. Claro que tive modificar não só HTML e CSS, mas também bastante código PHP e outras coisas em JavaScript.

Por exemplo, o site é dividido em oito temas que compõem seu menu principal. Esses temas na verdade são categorias e possuem uma exibição especial com fotos na listagem de seus posts.

Mas isso não foi complicado, até porquê a plataforma do WordPress disponibiliza uma série de funções para obter e manipuladar dados de categorias, páginas, posts, etc.

Plugins do WordPress

A utilização de vários plugins do WordPress foi fundamental. Para os destaques rotativos que aparecem na home, usei o Smooth Slider, que dentre os vários plugins sliders que pesquisei, era um dos mais simples e chegava mais perto do que precisávamos.

Mesmo assim precisei modificar seu próprio código fonte, pois eu precisava colocar uma imagem de logo transparente no canto inferior direito das imagens de destaques rotativos.

Abaixo está a relação de plugins do WordPress utilizados no hotsite Somos um Só:

Entrega rápida

Depois que o WordPress foi instalado e configurado, os responsáveis pela publicação de conteúdo já iniciaram a inclusão de textos, fotos e vídeos.  Em paralelo a isso fui implementando o layout e outras customizações, atualizando diariamente no servidor as novas funcionalidades.

O site foi montado em menos de 10 dias, sendo que a maioria desses dias eu trabalhei por volta de duas a três horas durante a noite.

O que você achou?

E você, já pensou em utilizar uma plataforma de blog como hotsite?

Já teve algum experiência semelhante ou conhece algum outro caso?

Qual a sua opinião a respeito?

Geral , , , , , , , , , ,

Um objeto JavaScript para confirmar se o usuário quer sair da página

29 de novembro de 2010

Existe algumas situações que é interessante confirmar se usuário realmente quer deixar a página atual. O usuário pode sair acidentalmente sem salvar o que está editando ou quando o fluxo de edição de conteúdo da página é complexo que pode induzir o usuário a não salvar no final.

Por exemplo, no WordPress que uso nesse blog aparece uma confirmação se eu tento sair da página de edição de post sem ter salvo antes:

Clique na imagem para ampliá-la

Clique na imagem para ampliá-la

O segredo é configurar o evento onbeforeunload do objeto window com uma função que retorna o texto da confirmação:

<html>
<head>
  <script>
    window.onbeforeunload = function() {
      return "Minha mensagem de confirmação.";
    }
  </script>
</head>
<body>

</body>
</html>

Abordagem procedural

O ideal é podermos configurar se a mensagem de confirmação irá aparecer ou não, conforme as ações do usuário na página. Vamos criar uma variável que servirá como condição se a mensagem de confirmação será exibida.

<html>
<head>
  <script>
    var needToConfirm = false;

    window.onbeforeunload = function() {
      if (needToConfirm) {
        return "Minha mensagem de confirmação.";
      }
    }
  </script>
</head>
<body>
  <form onsubmit="needToConfirm = false;">
    <p><input type="text" onchange="needToConfirm = true;" /></p>
    <p><input type="submit" /></p>
  </form>
</body>
</html>

O código acima exemplifica a ativação e a desativação da exibição da mensagem de confirmação na saída da página em um formulário. Toda a vez que o valor do campo texto for alterado (linha 15), a variável needToConfirm é configurada para true. Já na submissão do formulário (linha 14) a confirmação é desativa.

Usando orientação a objetos

Agora vamos extrair essa funcionalidade para uma objeto JavaScript, salvando o código em um arquivo .js.

function ExitPageConfirmer(message) {
  this.message = message;
  this.needToConfirm = false;

  var myself = this;

  window.onbeforeunload = function() {
     if (myself.needToConfirm) {
       return myself.message;
     }
   }
}

O objeto ExitPageConfirmer recebe como parâmetro no seu construtor a mensagem de confirmação. Por padrão, a necessidade de exibir a confirmação é configurada para false. Veja um exemplo de sua utilização:

var exitPage = new ExitPageConfirmer("Minha mensagem de confirmação.");

E quando quiser ativar a exibição da mensagem de confirmação:

exitPage.needToConfirm = true;

Vamos utilizar nosso confirmador de saída de página no formulário HTML do exemplo anterior:

<html>
<head>
  <script src="scripts/Prodis.ExitPageConfirmer.js"></script>
  <script>
    var exitPage = new ExitPageConfirmer("Minha mensagem de confirmação.");
  </script>
</head>
<body>
  <form onsubmit="exitPage.needToConfirm = false;">
    <p><input type="text" onchange="exitPage.needToConfirm = true;" /></p>
    <p><input type="submit" /></p>
  </form>
</body>
</html>

Na linha 3 fizemos a referência para o arquivo .js que contém o código do confirmador e criamos uma instância de ExitPageConfirmer na linha 5. Nas linhas 9 e 10 configuramos a necessidade de exibir ou não a mensagem de confirmação utilizando usando a variável exitPage.

Detalhe sobre a implementação

Há um detalhe interessante sobre a implementação do objeto ExitPageConfirmer. Vamos ver o código novamente para ficar mais fácil de visualizar.

function ExitPageConfirmer(message) {
  this.message = message;
  this.needToConfirm = false;

  var myself = this;

  window.onbeforeunload = function() {
     if (myself.needToConfirm) {
       return myself.message;
     }
   }
}

Na linha 3 é criada a variável myself que recebe o valor de this. O this nesse escopo se refere à instância do objeto. Por exemplo, quando criamos a variável exitPage no código do formulário, o this dentro do objeto se refere a essa variável.

Dentro da função que é passada para o evento onbeforeunload do objeto window existe um if verificando o valor de needToConfirm do próprio objeto ExitPageConfirmer. Isso serve de condição para exibir a mensagem confirmação.

Mas por que não usamos this.needToConfirm ao invés de myself.needToConfirm na linha 8?

Acontece que a partir do momento que estamos configurando algo dentro do objeto window, o this se refere ao objeto window e não mais ao objeto ExitPageConfirmer. Sendo assim, criamos a variável myself que recebe uma referência da instância atual do objeto ExitPageConfirmer.

Como a variável myself fica disponível também no escopo da função que é atribuída ao evento onbeforeunload do objeto window, podemos utilizá-la sem problemas.

O escopo da variável myself se limita ao construtor de ExitPageConfirmer, então a mesma não pode ser acessada de fora do objeto.

Conclusão

O objeto ExitPageConfirmer pode ser utilizado em qualquer página, evitando assim a duplicidade de código. Além disso, o uso de programação orientada a objetos em JavaScript, ao invés de abordagem procedural, torna o código mais elegante e fácil de manter.

O código completo você encontra aqui no meu Github.

Referência:
Asking Users To Confirm If They Wish To Leave The Page

JavaScript , , , , ,