میکروفرمت چیست؟
اگر با مفهوم POSH( معنایی ساده قدیمی HTML) آشنا نیستید ، اولین چیزی که باید بدانید تولید کد معنایی ;i محتوا را منعکس می کند (بجای سبک) یک مؤلفه مهم فرآیند طراحی وب است. در حالی که HTML مجموعه کاملی از عناصر جذاب دارد که به وسیله آن می توانند معنی را منتقل کنند ، تعداد زیادی میکروفرمت (کنوانسیون) با هدف ساخته شده ایجاد شده اند تا بهتر بتوانند نوع محتوایی را که در صفحه وجود دارد نشان دهند. این مقاله در مورد میکروفرمت های محبوب است که می تواند معنایی و قابلیت همکاری وب سایت شما را تقویت کند ، می باشد.
میکروفرمت چیست؟
ا میکروفرمت ها بسیار جالب هستند. در حالی که آنها جزئی از مشخصات HTML W3C نیستند ، آنها مجموعه ای ارزشمند و مفید از کنوانسیون های نامگذاری (با استفاده از مقادیر کلاس ، شناسه ، ) را ارائه می دهند که نقاط مورد علاقه در صفحه مانند رویدادهای تقویم ، لینک هایی برای موافقت مجوز محتوا ، و حتی موارد عجیب و غریب مانند دستور العمل های پخت و پزرا شناسایی می کنند .
در حالی که میکروفرمها استاندارد W3C نیستند - هرچند که بسیاری ازمیکروفرمت ها به عنوان استاندارد به W3C توصیه می شوند یا به صورت پیش نویس هستند - سطح پشتیبانی مرورگرهای و سرویسهای وب برای آنها فواید آنها را توضیح می دهد.
به عبارت ساده: میکرو فرمت ها به ارزش یادگیری و پیاده سازی وب سایتهایی که ایجاد می کنید هستند.
اگر از CMS مانند WordPress استفاده می کنید ، می توانید از میکروفرم استفاده کنید ، زیرا برای برخی از اشکال ساده تر داده ها ، مانند ویژگی rel ، پشتیبانی داخلی را در اختیار شما قرار داده است.
اگر تازه وارد زمینه میکرو فرمت ها شده اید ، احتمالاً تعجب نمی کنید که چرا باید از آنها استفاده کنید. خوب ، آنها جوانب مثبت و منفی را دارند ، اما هر چیزی که به وب سایتهای ما کمک کند تا بهترتوسط دستگاههای خارجی بهتر درک شوند- مانند عنکبوتهای وب که صفحات وب ما را فهرست می کنند -ارزش زیادی برای تلاش در استفاده از ان دارد.
از آنجا که میکرو فرمت ها از ترکیب و خصوصیات متداول HTML استفاده می کنند ، می توانید از آنها در XHTML استفاده کنید. حتی صفحات XML (مانند فیدهای RSS و Atom) می توانند از میکرو فرمت ها استفاده کنند (و در صورت استفاده از سرویس هایی مانند Feedburner) ، آنها نیز این کار را انجام دهند. این به طرز چشمگیری استفاده بالقوه آنها را افزایش می دهد. آنها همچنین با RDFa و سایر داده های متا ترکیب خوبی دارند.
مزایای استفاده از میکرو فرمت ها
اشکالاتی در میکروفرمات ها
جدول مرجع میکروفرمت ها
هر میکروفرم دارای یک هدف منحصر به فرد برای ارائه نوع خاصی از اطلاعات است و همه آنها بسته به نیاز شما می توانند از نظر بالقوه مفید باشند.در حالی که می توانید جزئیات گسترده ای را در مشخصات موجود در وب سایت میکروفرمات ها مشاهده کنید ، در زیر فهرست سریع مرجع موجود است.
علامت گذاری آدرس | ADR |
توضیح یک رابطه با سایت دیگر | FOAF |
علامت گذاری یک موقعیت جغرافیایی | Geo |
ایجاد محتوای دوستانه برای تبلیغات | hAtom |
تصویف فایل صوتی یا پاکست | hAudio |
علامت گذاری محتوی تاریخ محور | hCalendar |
برای تماسهای تجاری و شخصی | hCard |
لیست کالاها و خدمات | hListing |
استفاده از hAtom برای اخبار و روزنامه نگاری | hNews |
درج جزئیات گسترده محصول | hProduct |
دستور العمل ها و داده های آشپزی را نشان می دهد | hRecipe |
برای نمایش یک CV یا رزومه کاری | hResume |
بررسی و رتبه بندی محصولات و خدمات | hReview |
پنجره های اشتراک داخلی یا خارجی را در IE8 می گذارد | hSlice |
ویژگی rel یک میکروفرماتی برای عناصر HTML است | rel |
دستورالعمل های خزنده وب را ارائه می دهد | Robot Exclusion |
گزینه هایی را برای مورد بودن یا نبودن لینک فراهم می کند | VoteLinks |
رابطه با یک وب سایت را توصیف می کند | XFN |
لینک های مورد علاقه را لیست می کند | XFolk |
منابعی را به نمایه صفحه اضافه می کند | XMDP |
یک سند یا لیست موارد را ترسیم می کند | XOXO |
چند نمونه محبوب از rel در HTML:
ویژگی های ارزشیrel
در اینجا توصیفهای مربوط به ویژگیهای rel (که برای "رابطه" کوتاه است) آورده شده است:
مجوز: توافق نامه مجوز (مانند Creative Commons یا GPL) را در صفحه مشخص می کند.
Nofollow: به موتورهای جستجو می گوید وزن یا ارزش خود را به منبع مرتبط اضافه نكنند.
برچسب: برای ساخت ابرهای برچسب یا دسته بندی ها ، کلمات کلیدی را در لنگرگاه ها اعمال می کند.
دایرکتوری: لیست موجود در یک فهرست (مانند پوشه) در وب سایت فعلی نشان می دهد.
محوطه: برای مجریان که به پرونده های قابل بارگیری و سایر اسناد غیر وب پیوند دارند.
صفحه اصلی: پیوند مجازی را برای صفحه اصلی وب سایت تولید می کند.
پرداخت: در لنگرهایی که به صفحه خرید یا پرداخت اشاره می کنند گنجانده شود.
استفاده از میکروفرمات: نمونه ها
توصیه میکروفرماتها بدون ارائه توضیحی در مورد نحوه استفاده از آنها ، کارایی چندانی ندارد. بنابراین ، در اینجا نمونه هایی از هر میکروفرماتی که می تواند در وب سایت شما اجرا شود را مرور خواهیم کرد.
اول ، مفهوم اصلی برای درک این است که یک میکروفرم توسط یک تکه از داده های موجود در کلاس یا مقدار شناسه یک عنصر HTML شناسایی می شود.
این عنصر می تواند در نوع داده نمایش داده شود (مانند پیوندهای لنگر) ، اما اگر هیچ گزینه معنایی وجود نداشته باشد ، می توانید از div یا span برای بسته بندی نام در اطراف محتوا استفاده کنید. اگرچه استفاده از دهانه ممکن است غیر ضروری به نظر برسد ، اما در این مورد معنای خاصی می افزاید.
<ul class="adr">
<li class="street-address">123 North Street</li>
<li class="locality">Manchester</li>
<li class="postal-code">MX43 991</li>
<li class="country-name">UK</li>
</ul>
نام ریشه: adr
ویژگی مقادیر:
صندوق پست
آدرس گسترده
آدرس خیابان
محل
منطقه
کد پستی
نام کشور
FOAF
نحوه ایجاد نمایه FOAF:
<link rel="meta" type="application/rdf+xml" title="FOAF" href="foaf.rdf" />
<p class="geo">
<abbr class="latitude" title="37.408183">N 37° 24.491</abbr> -
<abbr class="longitude" title="-122.13855">W 122° 08.313</abbr>
</p>
نام ریشه: geo
ویژگی مقادیر لازم:
<div class="hAtom">
<div class="hentry">
<h3 class="entry-title">I Love Microformats</h3>
<abbr class="published" title="2010-08-28T13:14:37-07:00">Aug 28, 2010</abbr>
<p class="category"><a href="/category/rdf" rel="tag">RDF</a></p>
<p><a href="#" title="Post a comment">What do you think of this post?</a></p>
<div class="entry-content">
<p>Place your content right here for maximum impact!</p>
</div>
<dl>
<dt>Tags:</dt>
<dd><a href="/tag/standards/" rel="tag">standards</a></dd>
<dd><a href=" /tag/microformats/" rel="tag">microformats</a></dd>
</dl>
</div>
</div>
نام ریشه: hAtom ، hFeed
ویژگی مقادیر:
<p class="haudio">
<em class="fn">Bohemian Rhapsody</em>
by <span class="contributor vcard">
<em class="fn org">Queen</em></span>
found on <em class="album">A Night at the Opera</em>
</p>
نام ریشه: hAudio
ویژگی مقادیر لازم:
سایر ویژگی مقادیر:
می توانید به جای نوشتن کد به صورت دستی ، از hCalendar Creator استفاده کنید.
<p class="vEvent">
<a class="url" href="http://www.yoursitehere.com/">MySite</a>
<span class="summary">New website launch</span>:
<abbr class="dtstart" title="20091202">December 2</abbr>-
<abbr class="dtend" title="20091204">4</abbr>, at
<span class="location">Google College, London, UK</span>
</p>
نام ریشه: vCalendar ، vEvent
ویژگی مقادیرلازم:
سایر مقادیر صفت:
می توانید به جای نوشتن کد به صورت دستی ، از سازنده hCard استفاده کنید.
<ul id="hCard-John-Doe" class="vcard">
<li class="fn">John Doe</li>
<li class="org">Special Stores</li>
<li><a class="email" href="mailto:John@doe.org">John@doe.org</a></li>
<li class="adr">
<ul>
<li class="street-address">44 Semantic Drive</li>,
<li class="locality">Markup City</li>,
<li class="region">World Wide Web</li>,
<li class="postal-code">BP33 9HQ</li>
<li class="country-name">Internet</li>
</ul>
</li>
<li class="tel">01234 56789</li>
</ul>
نام ریشه: hCard
ویژگی مقادیر لازم:
<div class="hlisting">
<p>
<span class="item fn">Office space</span>
<span class="offer rent">to rent</span>(<abbr class="dtlisted" title="20100202">2/2/10</abbr>)
</p>
<p class="description">50-square-foot space available in local tech office at:
<div class="location adr">
<span class="street-address">123 Microland Road.</span>
<span class="locality">Cyberspace</span>, <span class="region">XD</span>
<span class="postal-code">12345</span>
<span class="country">Mars</span>
</div>
Available during <abbr class="dtexpired" title="20100401">April 2010</abbr>
for <span class="price">$1500/qtr</span>
</p>
<div class="lister vcard">
Contact:
<span class="fn">John Doe</span>
at <span class="tel"><span class="value">(01) 12345-678900</span>(<abbr class="type" title="cell">C</abbr>)</span>
</div>
</div>
نام ریشه: لیست بندی
ویژگی مقادیر لازم:
سایر مقادیر صفت:
<div class="hmedia">
<h3 class="fn">Introduction to the Open Media Web</h3>
<object class="player" type="application/x-shockwave-flash" data="http://www.exampleurl.com/video.swf">
<param name="movie" value="http://www.exampleurl.com/video.swf"/>
<param name="allowScriptAccess" value="always"/>
<param name="allowFullScreen" value="true"/>
</object>
<ul>
<li><a rel="enclosure" type="video/mp4" title="Download the movie" href="http://www.exampleurl.com/video.mp4">Video.mp4</a></li>
</ul>
</div>
نام ریشه: hMedia
ویژگی مقادیر:
<div class="hnews hentry item">
<h4 class="entry-title">Microformats are awesome</h4>
<p class="author vcard">
By <span class="fn" >John Doe</span>,
<span class="source-org vcard dateline"><span class="org fn">Associated Press</span></span> -
<span class="updated" title="2010-04-19">19 April 2010</p>
<p>News story</p>
</div>
نام ریشه: hNews
ویژگی مقادیر لازم:
<ul class="hproduct">
<li class="brand">MySite!</li>
<li class="category">Software</li>
<li class="fn">Microsoft Office 2007</li>
<li class="description">The world's most popular office suite.</li>
<li class="url">http://office.microsoft.com</li>
</ul>
نام ریشه: hProduct
ویژگی مقدار لازم:
<div class="hrecipe">
<h3 class="fn">Quick noodles</h3>
<p class="summary">Noodles are quick and easy, like this example!</p>
<p class="ingredient hcard"><span class="value">2.5</span><span class="type">kilogram</span>bag of instant noodles.</p>
<ul class="instructions">
<li>Put water on to boil,</li>
<li>Add the powder for the sauce,</li>
<li>Add the noodles, and stir till ready.</li>
</ul>
<p>Enough for <span class="yield">1 adult</span>.</p>
<p>Preparation time is approximately <span class="duration">5 <abbr title="minutes">mins</abbr></span>.</p>
<p class="nutrition hcard">Noodles have more than <span class="value">500</span> <span class="type">joules</span> of energy.</p>
</div>
نام ریشه: hRecipe
ویژگی مقادیر لازم:
سایر مقادیر صفت:
<div id="hResume">
<p class="summary">I have been producing microformatted data for years</p>
<ul class="vcard">
<li class="fn">Jane Doe</li>
<li class="adr">
<span class="street-address">44 Broadband Street</span>
<span class="locality">Microland</span>, <span class="region">Internet</span>
<span class="postal-code">QW11 ER4</span></li>
<li>Email: <a class="email" href="mailto:jane@doe.org">jane@doe.org</a></li>
<li>Homepage: <a class="url" href="http://www.yoursitehere.com/">www.yoursitehere.com</a></li>
<li>Phone: <span class="tel">+44 12345 67890</span></li>
</ul>
<ol class="vcalendar">
<li class="education vevent"><a class="url summary" href="http://example/">Example</a>(<abbr class="dtstart" title="2007-02-11">2007</abbr> - <abbr class="dtend" title="2009-03-22">2009</abbr>)</li>
</ol>
<ol class="vcalendar">
<li class="experience vevent"><span class="summary">CEO</span>, <span class="location">Microland</span>, <abbr class="dtstart" title="2006-09-01">May 2006</abbr> - <abbr title="2009-05-22">present</abbr></li>
</ol>
<ul class="vcard">
<li><a href="/jdoe/index.php" class="include" title="Jane Doe"></a></li>
<li class="org">MicroLand</li>
<li class="title">CEO</li>
</ul>
<p>I have skills in
<a class="skill" rel="tag" href="http://en.wikipedia.org/wiki/HTML">HTML</a> and
<a class="skill" rel="tag" href="http://en.wikipedia.org/wiki/CSS">CSS</a>.
</p>
</div>
نام ریشه: hResume
ویژگی مقدار
سایر مقادیر صفت:
<div class="hreview">
<p><span class="rating">5</span> out of 5 stars</p>
<h4 class="summary">Noodle Hut</h4>
<span class="reviewer vcard">Reviewer:
<span class="fn">John Doe</span> - <abbr class="dtreviewed" title="20070418T2300-0700">April 18, 2007</abbr>
</span>
<p class="description item vcard">
<span class="fn org">Noodles Hut</span> is one of the best little places out there!
</p>
<ul>
<li>Visit date: April 2007</li>
<li>Food eaten: Instant noodles</li>
</ul>
</div>
نام ریشه: hReview
وژگی مقدار
مورد (نوع (محصول ، تجارت ، رویداد ، شخص ، مکان ، وب سایت ، آدرس اینترنتی) ، hCard / hCalendar)
سایر مقادیر صفت:
<div class="hslice" id="news">
<h2 class="entry-title">Recent News</h2>
...
</div>
نام ریشه: hSlice
ویژگی مقادیر لازم:
سایر مقادیر صفت:
<a rel="license" href="http://creativecommons.org/licenses/by/2.0/">Some rights reserved.</a>
<a rel="nofollow" href="http://www.w3.org/">World Wide Web consortium</a>
ویژگی مقادیر:
<head profile="http://example.org/xmdp/robots-profile#">
</head>
...
<p><img src="exclusive.png" class="robots-noarchive" alt="Exclusive image" /></p>
مقادیر ویژگی:
<a rev="vote-for" href="http://www.yoursitehere.com/vote.php?id=yes" title="Vote yes!">Vote Yes!</a>
<a rev="vote-abstain" href="http://www.yoursitehere.com/vote.php?id=maybe" title="Vote maybe!">Vote Maybe!</a>
<a rev="vote-against" href="http://www.yoursitehere.com/vote.php?id=no" title="Vote no!">Vote No!</a>
میژگی مقادیر:
<a href="http://www.yoursitehere.com" rel="me">My Site!</a>
ویژگی مقادیر:
<ul>
<li>
<ul class="xfolkentry">
<li><a class="taggedlink" href="http://www.google.com" title="Google">Google</a></li>
<li class="description">The home page of the world's biggest search engine</li>
<li class="meta">Tags:
<a rel="tag" href="http://del.icio.us/tag/google">google</a>
<a rel="tag" href="http://del.icio.us/tag/search">search</a>
</li>
</ul>
</li>
</ul>
نام ریشه: xFolkEntry
ویژگی مقادیر لازم:
ویژگی مقدار دیگر:
<head profile=”http://www.mysitehere.com/profilename”>
Root reference: profile
<ol class="xoxo">
<li>Subject 1
<ol>
<li>item a</li>
<li>item b</li>
</ol>
</li>
<li>Subject 2
<ol>
<li>item a</li>
<li>item b</li>
</ol>
</li>
</ol>
نام ریشه: XOXO
نتیجه
میکروفرمت های زیادی در حال حاضر وجود دارند ، و جامعه همواره به دنبال راه هایی برای استفاده از عناصر موجود برای انتقال اطلاعات بیشتر درباره صفحات وب ما است. آنها نه تنها از موتورهای جستجو و شبکه های اجتماعی بهره می برند بلکه کاربرانی که ترافیک سایت ما را بالا می برند