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 !

“O que te vai na cabeça?”

Adults_Having_FunEm 2012 desenvolvi uma palestra entitulada “Emoção através da Interação“.A ideia surgiu do projecto “The Fun Theory” e da oportunidade de fazer uma apresentação sobre criatividade em dueto com o Hugo Fernandes para uma turma de design da sua antiga Escola Secundária. Digamos que foi um bom local para experimentar material e analisar as reações provocadas.

Tive o previlégio de apresentar essa palestra por mais duas vezes, e para um público empresarial – NOS e Bold Int. O objetivo dessa palestra foi principalmente levantar algumas questões e apresentar nenhumas respostas. Tenho em crer que os participantes deverão conseguir encontrar algumas respostas por si próprios. Isto é, o grande propósito foi criar dúvidas, incentivar a pensar no assunto e seguramente que não existirá uma só resposta certa.

O que nasceu como uma mera “brincadeira” para espicaçar a criatividade, tem-me acompanhado em pensamento quase diariamente. Novas formas de entregar a mensagem, com uma base mais sólida e consistente, melhor ponderação sobre o tema e desviar o tema “criatividade” para “conhecimento”.

Nas próximas semanas irei continuar a trabalhar no assunto. Até breve.

Dois meses …

Já passaram dois meses…

A velocidade do tempo está diretamente relacionado com o prazer retirado da atividade exercida. É sem dúvida um “defeito” que o Grande Inventor deveria de ter endereçado.

Senti algumas mudanças no meu cérebro durante este período. De que serão fruto, tenho as minhas suspeitas. A mudança profissional terá sido sem dúvida um dos precursores.

Esta mudança trouxe-me desafios técnicos mas também um novo paradigma de trabalho. Trabalhar remotamente permitiu-me ganhar tempo. Tempo que era literalmente perdido no trânsito. Os dias ficaram subitamente longos e o síndrome de segunda-feira desapareceu miraculosamente…

A velocidade do tempo está diretamente relacionado com o prazer retirado da atividade exercida.

É factual que trabalho mais horas do que no meu anterior trabalho, continuo a ter mais tempo disponível, e no entanto sinto que cada vez tenho menos tempo.

O cérebro tem de ser continuamente desafiado, questionado, massajado. Só assim se poderá manter elástico e alerta. Acredito vivamente nisso. No entanto, quanto mais ginasticado, mas fértil se torna. No meu caso pessoal, isso traduz-se claramente em ideias. Mais ideias, mais tempo necessito para as colocar em prática.

E ideias têm florido na minha mente e neste momento o meu maior dilema encontra-se na organização dessas ideias. Tomara encontrar “tempo” pois gostaria imenso de as partilhar convosco.

 

 

Depressa: o tempo foge e arrasta-nos consigo: o momento em que falo já está longe de mim.

Nicolas Boileau

Finalmente…

Julho foi um mês de grandes mudanças – casa, trabalho e modo de trabalhar.

Se a primeira ainda não está concluída, as outras duas já estão bem implementadas. Estou oficialmente a trabalhar na empresa log. Uma empresa dedicada ao desenvolvimento de soluções suportadas em código-aberto, isto é, no nosso caso falamos de WordPress (PHP) e JavaScript (React, Redux, Backbone, Marionette). Para já está a ser uma experiência muito interessante, ainda para mais que toda a equipa trabalha remotamente – cá está o novo modo de trabalhar (novo para mim, pelo menos).

O que torna isto ainda mais interessante é que finalmente posso voltar a partilhar as descobertas e aprendizagens, e a participar mais ativamente nas comunidades.

Espero vos apanhar a todos muito em breve. Até já !

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.

Developer Tech Refresh – Lisboa

Developer Tech RefresÀ algumas semanas atrás realizaram-se os eventos BUILD Ignite, com imensas novidades sobre o Windows 10, Universal Apps, Office 365, Edge (o novo browser), serviços Azure (Internet of Things) entre outras. Se acederem aos sites respectivos, conseguirão assistir às sessões, em diferido.

No próximo dia 15 de Junho ir-se-á realizar em Lisboa, nas instalações da Microsoft Portugal, o evento Developer Tech Refresh. Um pequeno resumo do que foi apresentado nos eventos principais. O evento será composto por 5 tracks – Windows, Azure, Data Platform & IoT, e WEB.

[Update: 13/06/2015]

Eu irei estar sentado na track WEB e talvez dê uma espreitadela na track Windows, ainda mais que agora é possível construir Apps para o Universo Windows com HTML5, CSS3 e JavaScript 🙂

A Microsoft lançou-me o desafio de preparar uma apresentação para a track de WEB. O tema escolhido “HTML5 Semantics”. Irei também tentar dar uma espreitadela na track Windows, ainda mais que agora é possível construir Apps para o Universo Windows com HTML5, CSS3 e JavaScript 🙂

Ahhh….esqueci de mencionar que a inscrição é gratuita.

Vemo-nos por lá?