Como criar um site institucional com o WordPress

Frequentemente me perguntam se é possível fazer “um site mesmo” e não apenas um blog usando o WordPress ou outro CMS.

Tenho notado que as pessoas consideram que “site mesmo” é um site estático feito em HTML com a estrutura padrão de cabeçalho com logo da empresa e um menu lateral com as páginas “Quem somos”, “Serviços”, “Missão”, “Contato” e outras.

É importante afirmar e reafirmar que os sites estáticos (que são documentos HTML ou Flash) devem ser a última opção visto que vivemos em plena era da web dinâmica e portanto usar um CMS (Content Management System – sistema gerenciador de conteúdo). Estou preparando outro post e uma video aula sobre isso.

Há uma infinidade de CMS especializados em vários tipos de sites: blogs, sites, portais, lojas, foruns, albuns de fotos, ensino à distância, genealogia e redes sociais somente para citar alguns.

O WordPress, apesar de ter nascido como um gerenciador de blogs, se desenvolveu velozmente até se tornar um excelente CMS genérico há alguns anos.

Uma instalação crua do WordPress terá a aparência de um blog, mas com pouquíssimo trabalho podemos modificá-lo para ser um site institucional.

A propósito, a título de demonstração, costumo mostrar o site do Twitcast que tem um dos mais complexos designs desenvolvidos em WordPress. O Twitcast é um podcast sobre Twitter e cibercultura. No site, além dos podcasts, você encontra uma sessão de destaques, outra com ferramentas para o Twitter e notícias e uma terceira com vídeos.

Na video aula abaixo me concentro nos ajustes necessários para tirar a aparência de blog do WordPress e aproveito para mostrar um pouco da interface da versão 2.7

Como criar uma conta e publicar vídeos no Videolog

A melhor forma de compratilhar vídeos na Internet é usando um serviço como o Youtube ou o Videolog.

Indicamos sempre o uso do Videolog pois além de ser um serviço brasileiro com uma audiência bem mais específica ele permite vídeos com até 25 minutos (o limite do Youtube são 10m) e apresenta excelente qualidade de imagem.

Para enviar os vídeos para lá você terá que se cadastrar no sistema (é gratuito). Use esse link:

Você terá que informar:

  • Nome de usuário: Um apelido sem espaços. Sugiro seu nome ou da sua empresa, mas se um homônima já se cadastrou você talvez tenha que acrescentar o seu estado (SP, RJ) por exemplo pois não pode haver dois ou mais usuários com o mesmo nome
  • Email: O ideal são os emails gratuitos que podem te acompanhar para sempre como os do Gmail ou Yahoo
  • Senha: invente uma senha
  • Confirmar senha: digite novamente a senha acima
  • Nome Completo: Seu nome e sobrenome
  • Telefone: creio que não é obrigatório
  • Nascimento: idem
  • Sexo:
  • País:
  • Cidade:
  • Marque que aceita o acordo de utilização
  • Desmarque o “Aceito receber informações do videolog etc.” caso não queira receber novidades sobre o Videolog
  • Logo abaixo da última opção acima tem um código que deve ser digitado em um campinho à direita do código. Isso é para garantir que você não é um programa tentando criar centenas de contas automaticamente
  • Clique em cadastrar.

Feito isso você pode se “logar” no sistema informando seu nome de usuário e senha.

Se você não estiver na tela que te permite “enviar vídeo” clique nessa opção na barrinha que fica debaixo do logo do Videolog e tem as opções “home, vídeos, usuários, canais, grupos e enviar vídeo

A tela que aparece tem as seguintes opções:

  • Qualidade: pode deixar em normal
  • Título
  • Palavras Relacionadas: são palavras chave como futebol ou o lugar onde o filme foi feito
  • idioma do vídeo: português do Brasil
  • Canal: Qual é o tema do seu vídeo?
  • Quem pode assistir: use apenas amigos s quiser compartilhar seu vídeo apenas com amigos 
  • Permitir downloads: Define quem poderá baixar o vídeo original
  • Clique em continuar

A tela sequinte terá um único campo com um botão Arquivo que abrirá uma janela para você escolher o vídeo que quer mandar e do lado desse botão tem outro botão “enviar”.

Você pode enviar arquivos de até 400MB e 25 minutos de duração.

Depois de enviar os vídeos o Videolog pode demorar até 24h para disponibilizá-lo. 

Se seus vídeos estiverem marcados para serem vistos apenas pelos seus amigos você terá que passar a instruções para fazer o cadastro no Videolog para as pessoas para quem você quiser mostrar os vídeos.

Depois que estiverem cadastradas no Videolog as pessoas podem se tornar suas amigas entrando em seu perfil (cujo endereço deve ser http://videolog.uol.com.br/seunome) e clicar em “adicionar como amigo” que fica no menu no lado direito da página, pouco abaixo de uma imagem que pode ser a sua foto ou o desenho de uma pessoa com uma claque na frente do rosto.

Faça um teste nos adicionando como amigos no Videolog. O link para o nosso perfil é esse: http://videolog.uol.com.br/i4b

Lendo pode parecer um processo complicado, mas depois que vc se acostuma é fácil e com isso você poderá mostrar seus vídeos mesmo para quem não acessa a Internet com banda larga.

Como criar um site profissional em HTML?

Introdução

Esse texto serve de apoio para uma video aula em duas partes que fiz sobre como fazer um site em html. Os vídeos estão no final do artigo.

Somente um bom designer especializado em webdesign pode fazer um site profissional e provavelmente ele não o fará em HTML uma vez que este tipo de site pertence aos tempos da Web 1.0 tornando-se ultrapassado a partir da segunda metade da década de 90.

Esse artigo é apenas uma introdução aos conceitos básicos de criação de sites e foi escrito principalmente por razões históricas e porque, apesar de vivermos na era da web dinâmica, muitos ainda encontram razões para fazer sites estáticos.

Estrutura do site

Seja o site dinâmico ou estático ele quase sempre terá um cabeçalho, um menu lateral e uma área central com o conteúdo. Alguns usam menus sob o cabeçalho ou até conjugam os dois menus. Nesse exemplo optei por uma estrutura mais conservadora.

No lado esquerdo do nosso exemplo temos o menu, na parte superior o cabeçalho e na área maior da direita teremos o conteúdo.

A idéia principal é mostrar como estruturar o site com divisões <div> e como criar um menu único para o site inteiro que não precisaria ser recriado a cada nova página que criássemos.

No vídeo não dá para ler o código do iframe. Aqui está ele:

<iframe src=”./menu.html”; widht =”85″ height=”150″></iframe>

Referências

O aplicativo que usei para editar as páginas foi o Kompozer por ser um produto de código aberto disponível gratuitamente para a maioria das plataformas.

Para informações sobre html, CSS e outros padrões Web consulte o Wide World Web Consortium: w3.org.

Sites comentados: http://goodlistening.com.br e http://supervideobrasil.com.br

Mantenho uma lista de webdesigners no Delicious.

Observações

Com a finalidade de simplificar a video aula e ir direto ao ponto eu não criei as páginas usando CSS que seria o mínimo necessário em um site realmente profissional feito em HTML (apesar de insistir que 99% dos sites profissionais modernos devem ser feitos usando um CMS como o WordPress)

A video aula

Parte 1:

Parte 2: