background preloader

Tuto

Facebook Twitter

Stylisez vos hCards avec CSS ! People - Centre d'aide Outils pour les webmasters. <strong>Novo! </strong>schema.orgpermite que você marque uma gama muito maior de tipos de itens em suas páginas, usando um vocabulário que o Google, a Microsoft e o Yahoo! Conseguem entender. <a href="answer.py?

Answer=80472">Saiba mais. </a> O Google ainda oferece suporte para sua marcação de rich snippets existente. Sobre informações de contato Marcar informações de contato e de rede social no corpo de uma página web ajuda o Google a reconhecer e exibir melhor as suas informações nos resultados de pesquisa. Propriedades Cada contato (pessoa) pode ter diversas propriedades diferentes, como nome, cargo e um endereço. O Google reconhece as seguintes propriedades de contato, derivadas do microformato hCard.

Title ou role affiliation (org) address Como marcar o conteúdo O seguinte código HTML descreve Bob "Smithy" Smith. <div> Meu nome é Bob Smith, mas todos me chamam de Smithy. As seções a seguir descrevem como marcar este conteúdo usando microdados, microformatos ou RDFa. hCard authoring. Short URL This page contains useful tips and guidelines for how to author hCards, either from scratch, or by adding markup to existing content. Goal: The goal of this document is to provide some good intuitive guidelines that should make it as easy and as quick as possible for any web author to create hCards or add hCard markup to existing content. Audience: Web authors, designers, IA's.

Author(s): Tantek Çelik, Mark Rickerby A 5 minute primer to using hCard Let's imagine a static page that contains some personal contact details, the main part of which looks something like: <div id="contact"><h2>Contact Me</h2><p>You can contact me via email to <a href="mailto:jane@example.com">jane@example.com</a>, or send stuff to me at the following address:</p><p>255 Some Street,<br /> Some Place,<br /> Some Town</p></div> Another thing we can do to improve the semantics of the snippet is to mark up the address with "adr", and use div tags since its not really a paragraph. E.g. and <! hCard supporting user profiles. One of many sets of hCard examples in the wild.

Welcome! If you have an account on any of the following services, you already have an hCard which you can provide to other services to import or subscribe your profile information. The ability to syndicate your profile from the service of your choice is a key component of social-network-portability. short URL Services with hCard profiles and OpenID The following web sites support both hCard on user profiles and the ability to use your user profile as an OpenID. With rel=me support: Others: All services with hCard profiles The following web sites support hCard on their user profiles and are thus suitable for importing/subscribing to other sites that support hCard. Following the name of the site. Alphabetically sorted. 3eep - each user's public profile is located at Add-ons for Firefox - e.g.

Offline sites Sites that used to support hCard but lost it in some upgrade: import on sign-up. Weblog | Value Class Pattern. The value-class-pattern solves two of the three most challenging issues that microformats have encountered in their entire history: accessibility and localization. After many long months of focused iterating (repeatedly researching, brainstorming, testing, documenting) led by Ben Ward, the value-class-pattern alpha draft is ready to use and support. Publish and implement Several publishers have already started using the value-class-pattern, including this blog, and some implementations have already started supporting it as well. Everyone who publishes content marked up with microformats or develops microformats implementations such as parsers and authoring tools should take a close look at supporting the value-class-pattern in the content they are publishing and the tools they are implementing.

If and when you encounter any issues or have feedback regarding the value-class-pattern, please add them to the value-class-pattern-issues and value-class-pattern-feedback pages respectively. Related. hCard Examples in the wild. This page is an informative section of the hCard specification . The following sites have published hCards , and thus are a great place to start for anyone looking for examples "in the wild" for inspiration, or try parsing and indexing. new and uncategorized examples Have hCard?

If you have a site with hCard(s), add it to the top of this list. Include at least one URL to a page that includes actual hCard markup. Examples without direct links to pages with hCard(s) will be removed. You may want to use these buttons on your pages with hCards. Dato Capital uses hCard for millions of public profiles of company executives, Example: Executive profile iProcess uses hCard for binding its legal location derived from founder specifically, though its an online only business firm. Thank you for the feedback on problems - improvements made - hope better now! 2012-09-01: There are some worse problems now, e.g. the <a class="url fn org"> element has no contents, so there is no "fn" or "org"!

Get Started. Get started by adding support for microformats to your website, services, and products. introduction Microformats are based on simple markup conventions that enable you to add meaningful structure to your web content. One of the key principles of microformats, is to privilege human readable content. This means that you should think first and foremost of your content design being readable and accessible to web viewers.

Using the most appropriate HTML elements and applying structured class names to your markup enables you to produce content that can be clearly understood by a human audience and also used in a structured way by automated programs and other online tools. The best way to understand microformats is to start using them straight away. Many common kinds of content can be marked up in microformats. Yourself your website using the hCard creator if you wish. your blog If you have a blog: add hAtom to your blog pages add your blog to the hatom-examples-in-wild page. your organization events.