WordPress Lisbon – January Meetup

The next WordPress Lisboa meetup will be next 12 January. The venue, Cerveteca near Principe Real. The main subject…well, as you may find in the meetup description (in portuguese), there will be none:

A Meetup in its true sense of meaning, with no defined agenda, no formalities, no “speakers and attendees”…where everyone may speake what and with whom they choose.
Certainly all participants will have something to say or to question about WordPress. The main purpose it the mutual knowledge sharing, and the public and light-hearted promotion of WordPress community.

 

In fact, back in 2009 and 2010 at Mix in Las Vegas, in those days it was an HUGE Microsoft event, I saw dozens of small meetups popping every day with no prior organization. All it was needed was to communicate the intention to meangle “I will be in bar X at H o’clock” and there were 10 to 15 developers or designers with a glass in their hands to discuss what each one was doing in terms of Web development with or without Microsoft technologies. I hope that this meetup of our/yours WordPress community happens in similar ways.

Ohh….I heard that there will appear some of the biggest WordPress geeks in the “World” and Lisbon as well 🙂

Drop by !

“What goes on your mind?”

Adults_Having_FunIn 2012 I developed a talk titled “Emotion through interaction” .The idea came from the “The Fun Theory” project and from the opportunity to make a presentation on creativity in duet with Hugo Fernandes for a design class of its former secondary school. Let’s say it was a good place to experience the material and analyze the reactions caused.

I had the privilege to present the same talk twice, but for an enterprise public – NOS and Bold Int. The main objective was to raise some questions and deliver none answers. I believe the participant should seek their own answers. That said, the goal is to rise doubt, encourage thinking and understanding there isn’t just one correct answer.

What was born by a mere “game” to shock creativity, has lived inside my mind almost daily. New ways to present that message, with a stronger foundation, give more thought to the subject and take the subject away from “Creativity” and heading it to “Knowledge”.

I will be working on this material for the next weeks. See you soon.

Two months …

It’s been two months…

The speed of time is directly related to the pleasure taken from the performed activity.

It is certainly a “defect” that the Great Inventor should have addressed.

I felt some changes in my brain during this period. What is responsible, I have my suspicions. My professional detour will have undoubtedly been one of the forrerunners.

This change has brought me technical challenges but also a new work paradigm. Working remotely enabled me to gain time. Time that was literally lost in transit. The days get longer and miraculously the “Monday syndrome” disappeared…

The speed of time is directly related to the pleasure taken from the performed activity.

It is a fact that I work more hours than in my previous job, however I still have more time available, and yet I feel that every time I have less time.

The brain has to be continually challenged, questioned, massaged. Only then can keep alert and elastic. I strongly believe in that. However, more fit means more fertile. In  my case, this clearly translates into ideas. More ideas, more time needed to put them into practice.

And ideas have bloomed in my mind and right now my biggest dilemma is how to organize all these ideas. I hope to find “time” because I would love to share them with you.

 

 

Hurry: time flees and drags us with: the moment I speak is already away from me.

Nicolas Boileau

Finally…

July brought amazing changes to my life – a new home, a new job, and a new work methodology.

The first one is still on going but the other ones are fully implemented. I’m officially working for the company log. A company dedicated to the development of solutions based over open-source code – WordPress (PHP) and JavaScript (React, Redux, Backbone, Marionette). For starters this new experience is presenting itself as fascinating, even more with the entire team working remotely (this is new for me).

What makes this even more interesting is that I may return sharing my learning and finds and to get back to the communities.

Hope to get in touch with you all very soon. Laters !

HTML5 and the new structural elements [Part 1]

HTML5 new structural tagsIn the development of a HTML document, most used tags for semantic reasons are headings (h1-h6). These will be responsible for the content outline. Div tag, a generic element without any semantic value, was used by developers, designers and webmasters to group content.

Imagine the following structure, in which the document will be divided between an header, a main area, a side area and a footer.

site_exemplo

Until then, we would code multiple div elements with id name or class name to allow us to apply CSS and JavaScript. However those attributes would work as hooks, since they don’t have any semantic value either.

Back in 2005, Google searched over one million pages, and three years later, Opera searched over four million. Both were searching for the same thing, the most used words for those attributes.

October 2014, HTML5 passed the standard barrier and is now a W3C recommendation. The document contains four new structural elements, that were created with the help of Google and Opera research. The new tags are article, section, nav, aside. We will see how they work in several distinct articles.

Let us begin with the definition for the nav element, as seen at W3C website in the recommendation of October 28th of 2014:

“The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links(…)”

Perhaps the easiest of the new elements. Lets see how the ul element, used for a navigation menu, will be rewritten:

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>

Take notice that the id=”nav” attribute was removed from the ul element.

html5_outliner

Seeing the document above through an HTML5 Outliner, such as the “Headings Map” Google Chrome’s extension, is possible to see the nav element at work.

The Outliner is reporting an error, and that is because we don’t have any heading element inside of the nav elements.

In the next article we will continue our persuit of the new HTML5 structural element, and at the end, we will manage to compare the above document structure in HTML4.1 and HTML5.

HTML5 and Tag’s simplification

HTML5_TagsThe path outlined for the evolution of HTML heads to simplification. In a previous post I wrote aboutthe simplification in the DOCTYPE declaration. The content type meta information that one should include was also simplified, and only the charset is still, for security concerns, advised.

HTML4.01

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

HTML5

<meta charset="utf-8">

Even the type attribute was removed from the HTML5 specs:

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">

Also quotes (“) aren’t mandatory no more, if the content doesn’t have blank spaces:

HTML5

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

Of course that its usage, for retro-compatibility issues, isn’t advised (but I hope for a brighter future).

Several tags no longer require for correct “closing” – <p>, <li>, <tr>, <td>, <body>, <html>, … – but, and once again for retro-compatibility issues, W3C advises to keep closing all tags.

In the next post I will write about the new tags for a more semantic web. Until then.

HTML5 and Viewport

Viewport (src Google Images)

Viewport (source Google Images)

At the beginning of May, Google made an official statement that the usage of their search engine via mobile devices already surpassed the usage via desktop computers. That means surfing the Web through mobile devices – smartphones / tablets / etc – had increased a lot. Then surely you may have the experience of accessing a webpage on your device, and when the browser loads the page it shrinks all the content to fit inside the screen, other times it leaves the content in its original size exceeding the available screen space (the viewport).

This behavior is controlled through an HTML5 meta-tag, where we can define how much the viewport can shrink or enlarge the page content.

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

The usage of the attribute content we can declare:

  • width:  the pages dimension;
  • initial-scale: the initial zoom level allowed after loading;
  • minimum-scale: the smallest zoom level allowed for the content;
  • maximum-scale: the biggest zoom level for the content.

In the code-example above, we are declaring that the pages content must fit the viewport screen, without any zoom. This sort of declaration is intended for a responsive content (more about this subject on a future article).

You may find more about the viewport meta-tag specifications on the W3C website.

HTML5 and Doctype

html5 superpowers

HTML on ‘roids (imagem retirada do Google)

HTML 5 brings us some simplifications and many new features – some of them may give good headaches while creating rich and creative content. First things first …

All HTML documents should start with a declaration of HTML version – the Doctype – in use through the page. Before the latest revision of the HTML Standards, there were several different Document Type Definition – DTD (document type definition) to choose from:

  • 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”)

Besides multiple DTDs to choose from, the way how it is written in the doctype was also not very straight forward:

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">

Fortunately, the new HTML5 specifications moved to the “recomendation” phase, in fact we may start using the more simplified doctype declaration:

HTML5

<!DOCTYPE html>

In the meantime, there are a strong advise against the usage of obsolete doctype declarations.

Hope you enjoyed the first of several articles on HTML5’s new features.

Internet or World Wide Web?

Global Network

Global Network

Internet or World Wide Web?
Are they two different things or just two faces for the same coin?
I got this question not only by info-excluded individuals but also by many generation Y, the so-called Milleniums. Personally I consider this situation almost counter-intuitive, but I came across this question many times in my classes, which consist of Millenium individuals. This generation uses technology since birth, but the majority lack the curiosity factor.

Internet and World Wide Web aren’t the same thing, but in fact are two faces of the same coin.

Internet a huge massive network, a global network. As such, millions of computers are connected to each other, enabling them to communicate between them. This was only possible due to the invention of various protocols that facilitate these communications in different languages. Some of these protocols are used daily, such as SMTP for email (more on protocols in a future post).

World Wide Web, or Web, is a way of accessing information over the Internet medium. A information sharing model that uses one of the protocols that make up the Internet, HTTP – HyperText Transfer Protocol. This protocol enables information containing text, images, audio, video and, more importantly, that all information is linked together via hyperlinks.

If you happen to use a browser to “surf the Internet”, you will actually be surfing the Web!