Microformats in the profile of a habrauser
Made a test page . Under the cut description of my actions.
ATTENTION! I add and supplement the description right now when you read it, so do not be surprised at the appearance of new paragraphs.
So, "Habr" imprinted blocks. An excellent reason to start introducing microformats into it. At the same time I will clean that code with which I will deal. That was the idea that came to me a few days ago. I downloaded the page of my profile, adapted it to work on the local computer (corrected the paths to the files of images, styles, etc.), and began to inspect the battlefield.
Before you edit the code of a site that was not written by you, it would be good to study its characteristic features. So, what we see, looking inside the current version of the habra-user page:
')
Scroll through the cap, menu, etc. I began to study the contents of the block with class = "userinfo" - it contains the information about the user. I will assign him an additional vcard class. This will indicate that the block contains the microformat hCard.
Portions of information about the user are now contained within typical constructions of this type:
I know how to make it more compact and more semantic. I use certain lists, immediately starting to saturate them with context-appropriate microformatting classes. I will make a tabbing tag. So clearer, and faster, and less weight.
In the examples, I removed all the service information that interferes with perception (mainly URLs), replacing it with ellipsis (...).
This code indicates that inside it contains information about the name and surname of the person.
We go further. We describe the information about the date of birth:
We describe the link to the photo:
Now it’s time for the user's location information:
ATTENTION! I add and supplement the description right now when you read it, so do not be surprised at the appearance of new paragraphs.
With a new line is not sorry for a new start line
So, "Habr" imprinted blocks. An excellent reason to start introducing microformats into it. At the same time I will clean that code with which I will deal. That was the idea that came to me a few days ago. I downloaded the page of my profile, adapted it to work on the local computer (corrected the paths to the files of images, styles, etc.), and began to inspect the battlefield.
Our new profiles
Before you edit the code of a site that was not written by you, it would be good to study its characteristic features. So, what we see, looking inside the current version of the habra-user page:
- The page is block-wise (good, but better)
- DOCTYPE enabled compliance mode (what you need)
- The elements do not have fields reset and “default” paddings (sorry, I’ll have to reset myself)
- The code is feverishly repulsed with spaces, and therefore heavy and poorly readable
')
Scroll through the cap, menu, etc. I began to study the contents of the block with class = "userinfo" - it contains the information about the user. I will assign him an additional vcard class. This will indicate that the block contains the microformat hCard.
<div class="userinfo vcard ">Portions of information about the user are now contained within typical constructions of this type:
<div class="userinfo_line">
<div class="left"></div>
<div class="right"><span class="username"> </span></div>
</div>
I know how to make it more compact and more semantic. I use certain lists, immediately starting to saturate them with context-appropriate microformatting classes. I will make a tabbing tag. So clearer, and faster, and less weight.
In the examples, I removed all the service information that interferes with perception (mainly URLs), replacing it with ellipsis (...).
<dl class=" fn n ">
<dt> </dt>
<dd class="username"><span class=" given-name "></span> <span class=" family-name "></span></dd>
</dl>This code indicates that inside it contains information about the name and surname of the person.
We go further. We describe the information about the date of birth:
<dl>
<dt> :</dt>
<dd class=" bday " title="1982-01-26" >26 1982</dd>
</dl>We describe the link to the photo:
<dl>
<dt>:</dt>
<dd><img class="photo" src="…" width="136" height="144" alt="" title="" border="0"></dd>
</dl>Now it’s time for the user's location information:
<dt>:</dt>
<dd><a class="country-name" href="…"></a>,
<a class="region" href="…"> .</a></dd>
</dl>
, :
<dl>
<dt> :</dt>
<dd class= "summary" > , </dd>
</dl>
. IT- ? , "url" rel "me" — , , . .. . — , XFN, hCard.
<dl>
<dt>:</dt>
<dd class= "url" ><a class="icon" rel="me" href="http://webmascon.com/" target="_blank">Webmascon</a></dd>
</dl>
.
Source: https://habr.com/ru/post/10601/
All Articles