Jan 232014
 

http://cargocollective.com/markwangillustration/concepts-sketchesThe year ended after having a great time at the #hackership, Batch-0 officially ended there but for the learners it had not been enough time, and we wanted to continue meeting and learning together, so we launched the proposal of continuing in an unofficial second part of #hackership. Hackership organizers agreed that it would be nice and support us, so we found a new space in K9, and there is where we are now meeting, following the same methodology learned during the Hackership, stand-up rounds, presentations, etc.

So now, let’s see at what point am I. After reading the Dive into HMTL5 guide and implementing some part of the things learned into my webcalendar pet-project. One of the things that interest me more, in general, is semantics, so I’m very happy to see that HTML5 is including semantic markup that can also be extended with the use of microdata.

After changing HTML to HTML5 the main part of the events index page, now looks like this

<body>
<header>
<h1>Webcalendar</h1>
<nav>
<%= render “shared/top_menu” %>
</nav>
</header>
<section>
<%= yield %>
</section>
<footer>
<%= render “shared/footer” %>
</footer>
</body>

These are the basic things:

header represents a group of introductory or navigational aids
section is an element represents a generic document or application section
nav represents a section with navigation links
footer represents a footer for its nearest ancestor sectioning content

I wanted to extend the semantics with microdata, in the same partial _event.html.erb, we have the following

<td itemprop="name" itemscope itemtype="http://schema.org/Place"><%= event.location.name %></td>

<td itemprop="name" itemscope itemtype="http://data-vocabulary.org/Organization" ><%= event.organizer.name %></td>

itemprop refers to the element property (quite obvious, right?) , in the first case is the name of the location and in the second case is the name of the organization.

itemscope, since microdata is about extending semantics you always need to declare the vocabulary that you are usingis and the scope of the properties. You do this by adding the itemtype and itemscope attributes on the outermost element that contains the other elements that contain the actual data. In our case we are using the vocabulary that is defined in http://data-vocabulary.org/Organization.

Is not a too sophisticated use of HMTL5 but its a start :-), things that would be nice to implement is the usage of datepicker and to take the webcalendar offline, this will be pending things for the near future, hopefully.

I was going to write something about the experience of learning how javascript, jquery and ajax interact with Rails, but I’ll leave for the next post, now I feel like going back to code.

 

 

  One Response to “Going back to #hackership via HTML5”

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)