WordPress Lisboa – Meetup Janeiro

O próximo encontro do WordPress Lisboa será no dia 12 Janeiro. O local escolhido, a Cerveteca junto ao Principe Real. O tema escolhido…como se lê na descrição do evento, não há tema predefinido:

Um Meetup no verdadeiro sentido da palavra, sem agenda pré-definida, sem formalismos, sem “oradores e ouvintes”…onde todos poderão falar do que quiserem e com quem quiserem.
Certamente que todos os participantes terão algo a dizer ou a questionar sobre WordPress. O objectivo é a partilha mútua de conhecimentos, a promoção pública e descontraída entre a comunidade WordPress.

 

De facto, quando em 2009 e em 2010 participei no Mix em Las Vegas, então um gigantesco evento da Microsoft, ocorreram dezenas de pequenos meetups sem propósito ou organização prévia. Bastava comunicar a sua intenção de se “encontrar com malta no bar X às Y horas” e lá se encontravam 10 a 15 developers ou designers com um copo na mão para debater o que cada um estava a fazer em termos de desenvolvimento Web com ou sem tecnologias Microsoft. Espero que este meetup da nossa/vossa comunidade WordPress decorra dessa forma.

Ahh….ouvi dizer que vão aparecer por lá alguns dos maiores cromos “do Mundo” e de Lisboa em WordPress 🙂 Apareçam !

HTML5 e as novas tags de estrutura [Parte 1]

HTML5 new structural tagsNa construção de um documento HTML, as tags utilizadas para atribuir significância ao conteúdo – os headings (h1-h6) – são os “responsáveis” pelo outline do conteúdo. A tag div, um elemento genérico sem qualquer peso semântico, foi o recurso encontrado pelos developers, designers e webmasters para agrupar o conteúdo espacialmente.
Imagine a seguinte estrutura, em que o documento estará dividido entre um cabeçalho, a área central à esquerda (a maior) onde teremos o conteúdo principal, a área adjacente contará com tópicos relacionados com o tema da página, e por fim teremos um rodapé.

site_exemplo

Até então, iriamos criar elementos div com id name ou class name alusivos ao conteúdo que estará presente no seu interior. No entanto essas “semânticas” servem somente como pontos de âncora para que os developers, designers e webmaster possam atribuir comportamento visuais e de interacção, através de CSS e JavaScript, pois as verdadeiras secções terão de ser feitas através de uma correcta utilização dos headings.

Em 2005, o Google analizou mais de um milhão de páginas e, três anos mais tarde, o Opera analizou cerca de quatro milhões. Ambos procuraram a mesma coisa, quais os nomes mais utilizados para atribuir significado a essas divs.

Em Outubro de 2014, o HTML5 passou a ser uma recomendação do W3C, ou seja, passou a ser o standard. Nesse documento constam quatro novas tags estruturais que foram retiradas dessa análise feita anteriormente. As novas tags estruturais são article, section, nav, aside. Iremos abordar os diferentes elementos em artigos distintos.

Comecemos pela definição do elemento nav segundo a recomendação de 28 Outubro de 2014 presente no site do W3C:

“Uma nav representa uma secção da página que liga a outras páginas ou partes dentro da mesma: uma secção com links de navegação(…)”

Este é, talvez, o novo elemento cuja interpretação é mais simples. Vejamos como é que o tradicional elemento ul, utilizado como menu de navegação será alterado:

HTML 4.1

<ul id="nav">
   <li><a>link1</a></li>
   <li><a>link2</a></li>
</ul>

HTML 5

<nav>
   <ul>
      <li><a>link1</a></li>
      <li><a>link2</a></li>
   </ul>
</nav>

Note que se eliminou o atributo id=”nav” do elemento ul.

html5_outliner

Ao visualizarmos o documento acima, através de um
HTML5 Outliner como a extensão “Headings Map” para o Google Chrome, é possível ver a secção que o elemento nav faz.

Repare que o Outliner marcou os elementos nav como um erro, e tal se deve ao facto de não ter atribuído qualquer heading à nav.

No próximo artigo continuaremos a analisar os novos elementos estruturais de HTML5 e no final será então possível compararmos as estruturas criadas na produção da página acima.

HTML5 e a simplificação das Tags

HTML5_TagsO caminho delineado para a evolução do HTML vai ao encontro da simplificação. Já num artigo anterior falei sobre a simplificação na declaração do DOCTYPE. A meta informação que se deveria de incluir para definir o tipo de conteúdo também foi simplificado, ficando somente o código de caracteres que deverá ser utilizado pelo servidor. Apesar desta simplificação, continua a ser aconselhado a inserção do charset por razões de segurança.

HTML4.01

<meta http-equiv="content-type" content="text/html" charset="utf-8">

HTML5

<meta charset="utf-8">

O atributo type foi outro elemento retirado nas especificações do HTML5:

HTML4.01

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"> 

HTML5

<link rel="stylesheet" href="style.css">
<script src="script.js"> 

Inclusivé a utilização de aspas (“) passou a ser opcional, desde que o valor do atributo não contenha espaços:

HTML5

<link rel=stylesheet href=style.css>
<script src=script.js> 

Claro que esta última utilização, somente por razões de retro-compatibilidade não é aconselhável (mas será algo que se espera encontrar de futuro).

Várias tags deixaram de exigir o seu correto “fecho” – <p>, <li>, <tr>, <td>, <body>, <html>, … – mas, e uma vez mais por razões de retro-compatibilidade, o W3C aconselha a que continue a fechar a tag.

No próximo artigo abordarei as novas tags que visam uma web semântica. Até lá.

HTML5 e o Viewport

Viewport (src Google Images)

Viewport (fonte Google Images)

No início do mês de Maio, o Google tornou oficial que a utilização do seu motor de pesquisa através de dispositivos móveis já suplanta a utilização via desktop. Ou seja, cada vez mais se navega na Web através de dispositivos móveis – smartphones, tablets, etc. Então certamente que já lhe aconteceu aceder a uma página através do seu dispositivo, e o browser ao concluir o carregamento da mesma, umas vezes encolhe todo o conteúdo para caber dentro do ecrã, noutras vezes deixa o conteúdo no seu tamanho original excedendo o espaço disponível no ecrã (viewport).

Esse comportamento é controlado através de uma meta-tag de HTML5, onde poderemos definir quanto é que o viewport poderá encolher ou aumentar o conteúdo da página.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />

Através do atributo content poder-se-á então declarar:

  • width:  a dimensão da página;
  • initial-scale: o nivel inicial de zoom da página quando carregar no browser;
  • minimum-scale: o nível mais baixo de zoom que a página permite;
  • maximum-scale: o nível mais alto de zoom que a página permite.

No código-exemplo acima, está-se a declarar que o conteúdo deverá utilizar somente a área disponível do viewport, sem permitir qualquer tipo de zoom (in ou out) do conteúdo. Esta definição utiliza-se quando se pretende ter um conteúdo responsivo (mais sobre este tema num futuro artigo).

Poderão ler mais sobre as especificações da meta-tag viewport no site do W3C.

HTML5 e o Doctype

html5 superpowers

HTML on ‘roids (imagem retirada do Google)

O HTML5 traz-nos algumas simplificações e muitas novidades – algumas delas darão boas dores de cabeça na criação de conteúdos ricos e criativos. Vamos por partes…

Todos os documentos HTML deverão começar com uma declaração da versão do HTML – o Doctype – que a página contêm. Antes da última revisão dos standards da linguagem HTML, existiam várias definição de tipo de documento – DTD (document type definition):

  • HTML 4.01
    • Strict (“strict.dtd”)
    • Transitional (“loose.dtd”)
    • Frameset (“frameset.dtd”)
  • XHTML 1.0
    • Strict (“xhtml1-strict.dtd”)
    • Transitional (“xhtml1-loose.dtd”)
    • Frameset (“xhtml1-frameset.dtd”)
  • XHTML 1.1
    • DTD (“xhtml11.dtd”)

Além de existirem múltiplos DTD, a forma de escrever o doctype também não era muito simplificado:

HTML4.01 / XHTML1.0 / XHTML1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Felizmente, com as especificações do HTML5 a passarem à fase de “recomendação”, já podemos começar a utilizar a nova forma de declarar o doctype:

HTML5

<!DOCTYPE html>

De momento passou mesmo a ser desaconselhado a utilização dos doctypes obsoletos por serem demasiado longos.

Espero que tenham gostado deste primeiro artigo de uma série sobre as novas funcionalidades do HTML5.

Novo Ano Lectivo

O novo ano lectivo já iniciou para os três cursos com quem terei o prazer de trabalhar e debater.

Uma vez mais, este semestre, estarei dedicado a algoritmos e a comunicação multimedia, para turmas de “Multimedia” e “Fotografia”

No segundo semestre, será “Desenvolvimento Frontend para a Web” para a turma de “Multimedia” e para a Pós-Graduação em “Web Design”.

Como sempre, as expectativas são altas…espero ter alunos sedentos de aprender. Por isso, let the “games begin”!!!

Renascer esta coisa chamada blog

Olá Mundo, à muito tempo que não nos “viamos”. Passou imenso tempo em que nem eu próprio visitava o meu próprio blog, aliás, considerei até em lhe por termo à existência.

O mercado português para computação criativa não está na melhor forma, e até para projectos simples de Flash e ActionScript3. O futuro não se apresenta muito risonho.

Usei o ano que passou para ver como é que o mercado iria reagir, e para onde se iria virar, a resposta foi HTML e JavaScript. Isso, leram correctamente, estou a falar do bom “velhinho” HTML e não do “novo puto do bairro” HTML5. Actualmente todas as agências criativas querem algum tipo de trabalho em HTML5, quando na realidade estão mesmo é a falar de algum tipo de animação e/ou interacção em JavaScript.

Felizmente para mim, sempre fui um agnostico tecnológico. Trabalhei com tecnologias como o Adobe Flash quase desde o seu surgimento, desde os bons tempos da Macromedia; usei HTML, CSS e JavaScript quando era obrigatório e até usei o Microsoft Silverlight que foi bom o suficiente para a Microsoft aprender e delinear o caminho a tomar com o Windows 8 etc etc.

Quando a Apple tomou a decisão de não incluir o plugin Flash no iphone e ipad, houve uma grande comoção – e agora?
Então a Adobe tomou a decisão de direccionar o Flash para o Game Development. Acho que foi uma boa decisão!! O Flash está a ficar mais forte e robusto.
Mas e agora neste microsistema chamado Internet? Pessoal, o velhinho HTML com um grande facelift está ai para ficar, mesmo que todo o Mundo saiba que os standards para o HTML5 ainda demorem a chegar!!

Assim, com maior ou menor dano, temos de construir o mesmo tipo de websites, mas agora sem o Flash. Será um grande problema? Claro que será, mas a Adobe está a lançar um conjunto de ferramentas para ajudar a resolver essa transição.
Mas não temam, o futuro é sempre sorridente…afinal de contas, isto é só tecnologia, o nosso cérebro é a nossa ferramenta mais valiosa!! Por isso, vamos lá…WebDesign e WebDevelopment irão sempre prosperar, independentemente do código que escreverem e eu irei continuar a escrever sobre o assunto.

Até breve.