给大家带来网页简历布局和语义信息:hResume微格局

只看该作者 · 发表于 2015-1-15 23:25:35

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

大大缩减页面代码，提高页面浏览速度,缩减带宽成本;
网页制造poluoluo文章简介：如今，我们来会商hResume微格局，他一般被用来为网页内容中的简历增加布局和语义信息。
在两个月前入手下手了这个系列。我但愿可以经由过程报告我怎样完成他们的细节来传布我对微格局的酷爱，勉励更多的人来撑持他。到如今为止，我们已会商了：
基于链接干系的微格局:利用rel属性
为网页增加hCard微格局
十分酷的微格局：XFN标准
为网页内容增加布局和语义的hAtom微格局
如今，我们来会商hResume微格局，他一般被用来为网页内容中的简历增加布局和语义信息。
hResume背景

在我们具体会商hResume之前，先来懂得一些背景常识。
提案标准

hResume是一个处于提案形态的微格局。这是甚么意义呢？意味着在成为正式提案之前还会有良多变更，固然说终极必定会经由过程。这会不会有很年夜影响？大概对您来讲，可是对我来讲影响不年夜。我十分承受的一点就是如今一切的互联网手艺都是一日千里的，这是互联网的特征。
微格局最好的中央

hResume属于复杂的微格局之一，只要八个属性。同时，hResume仍是一个很庞大的微格局；他使用别的三个微格局：rel-tag，hCard和hCalendar。在良多方面上看，这也出现出微格局最壮大的特性：他们利用已有的尺度。
最欠好的中央

hResume怎样使用hCard和hCalendar关于我来讲，良多时分都十分让人狐疑和有挫败感。大概是由于他还处于提案形态，在最初经由过程的时分但愿这些成绩都可以被办理。不外，也多是由于我没有想好怎样把hCard和hCalendar信息更好的同我的简历交融在一同。不外不论是甚么缘故原由，从我的角度来讲，hResume在某种水平上显现了微格局很欠好的中央。并非只要在利用hResume的时分才有成绩。一切的微格局都短少简单了解的信息和很好的文档。我想这让推进微格局很忧?。
由于hResume仍是提案阶段，以是很难希冀有良多人分享这方面的信息和资本。可是微格局的Wiki上仍是供应了很具体的界说。由于别的的资本十分少，以是才使得完成这个微格局十分的疾苦和挫败。不外这也是我为何写这些关于微格局的博客文章，我也但愿可以有愈来愈多的文章呈现，愈来愈多的人议论他，就会有愈来愈多更好的资本和信息。
汗青

hResume的汗青十分复杂。不像hCard、hCalendar和hAtom，在他之前没有相似的手艺手腕。不外，他仍是创建在对现有简历格局的研讨基本上，比方HR-XML和Europass。
基本常识

跟一切微格局一样，他也有一些划定规矩这里还要申明：

属性和子属性经由过程class代码声明。这些代码界说了hResume微格局
属性和子属性称号巨细写敏感
“根”属性不克不及和其他子属性组合在一同。因而，<pclass="hresumecontact">是有效的
包括微格局的标志元素跟微格局之间没有间接干系（倡议利用无效并具有语义信息的标志）

Profile

在完成hResume的页面中，必要在<head>中声明他的Profile：
<headprofile=”http://microformats.org/wiki/hresume-profile/”>
后面提过，hResume使用hCard和hCalendar来形貌信息，以是，假如您也完成了这两个微格局，您还必要包括他们的Profile声明。W3C同意多个Profile声明（利用空格离隔），以是能够同时包括三个Profile：
<headprofile="http://microformats.org/wiki/hresume-profile/http://purl.org/uF/hCard/1.0/http://purl.org/uF/hCalendar/1.0/“>
因为hCard和hCalendar属于正式尺度，以是，他们可使用组合ProfileURL来声明，我保举利用该声明：
<headprofile="http://microformats.org/wiki/hresume-profile/http://purl.org/uF/2008/03/“>
例子

同后面讲过的微格局分歧，我没有在博客上完成hResume。由于真是找不到缘故原由在我的博客上放团体简历，并且我已在我的计划档案中供应了hResume完成。上面的例子是从我我计划档案中的简历提掏出来的。不外实在的信息长短常多的标志元素和信息，以是我删除一些反复的信息，只管坚持简便，别的还剔除用来界说显现作风的class值。
假如必要的话，您能够往我的页面中检察全文的代码。

<divclass=”hresume”>
<divclass=”contactvcard”>
LinkedInprofile</a></li>
</ul>
</div>

同rel-me界说一致的身份

在下面的例子中，我在到网站的链接上利用了rel-me：

<li><ahref="http://www.emilylewisdesign.com/"class="url"rel=”me”>DesignPortfolio</a></li>
<li><ahref="http://www.linkedin.com/in/emilyplewis/"rel=”me”>LinkedInprofile</a></li>

好像我们在第一部分中会商的，rel="me"用来界说从关于或人的某个页面到另外一个页面的超链接干系。
利用address的成绩

hResume标准中也倡议利用<address>来形貌团体接洽信息。依据W3C的形貌，<address>元素为：

“…usedbyauthorstosupplycontactinformationforadocumentoramajorpartofadocumentsuchasaform.（译：作者用来为文档大概文档年夜部份内容供应接洽信息）“

在简历的例子中，<address>语义上是准确的，由于他形貌的接洽信息是属于简历作者的。不外，您会注重到我在下面的例子中没有利用<address>，这是由于<address>不克不及包括块级元素。固然，我可使用<span>来交换一切的<p>和<ul>，可是那会让文档得到良多语义信息和布局，以是就没有思索<address>。
可选属性：summary

可选属性summary用来标明求职意向和胜任事情的简介。一样，只能在hResume中利用一次。在我的简历中，我没有形貌求职意向，可是却供应了胜任事情的列表：

<h3>HighlightsofQualifications</h3>
<ulclass=”summary”>
<li>Webdesignerspecializinginhand-codedsemanticXHTML,cross-browserCSS,progressiveenhancementaccessibilityandusability</li>
<li>Expertinthedesignofcorporatewebsites,intranets,emailcampaignsande-commerceapplications</li>
…
</ul>

可选属性：skill

可选属性skill附加在内容元素上，用来标明团体的特别才干和手艺。skill可使用屡次。标准请求妙技的内容必要包括在指定了class="skill"和rel="tag"的链接元素中：

<ul>
<li><ahref="http://technorati.com/tag/xhtml"class=”skill”rel=”tag”>XHTML</a>—9yrs</li>
<li><ahref="http://technorati.com/tag/css"class=”skill”rel=”tag”>CSS</a>—9yrs</li>
…
</ul>

猖狂的链接

我依照标准请求的完成了skill属性，可是我十分不喜好这些链接。我不分明为何标准必要属性必需要被包括在链接以内，为何不克不及包括在内容元素中？我其实不能确认这些链接带来任何的代价，特别是关于大概的店主来讲。现实上，这会让想懂得我的人注重力分离。
标签空间仿佛有关

别的一个成绩就是标准请求这些链接必需完成rel="tag"。在第一部分中，我们会商过，rel-tag暗示链接的目标地点是一个标签地点。并且rel-tag必要在链接中利用标签内容作为URL的最初一段。因为这些限制，我把一切的skill链接都指向了Technorati，由于他供应了标签空间。
但是，这就让这些链接更跟我的内容有关了。假如我利用这些链接，我更但愿他们可以链接到能给出详细信息的中央，好比Wikipedia，可是他并没有供应这些妙技的条目。最初，我大概会把一切能指向wikipedia的链接都换成指向wikipedia，而内容不存在的妙技链接就只好删失落。大概只好把全部skill部分都删除，归正他是可选的。
可选属性：experience

可选属性experience用来标明团体的事情履历。可使用屡次。标准请求每一个事情履历都作为一个“事务”可使用hCalendar来形貌，而且把职务/脚色的内容写在hCard中：

<divclass=”vcalendar”>
<divclass="experienceveventvcard“>
<aclass="includenonVisual"href="#emily-hcard-name"></a>
<h4class="titlesummary“>WebDesigner</h4>
<pclass=”org”>PitneyBowesBusinessInsight</p>
<p><abbrclass=”dtstart”title=”2004-12-01″>December2004</abbr>–present</p>
<ulclass=”description”>
<li>DesignedinterfacesanddevelopedXHTML,CSSandgraphicsformaincorporatesite,internationalsites,marketingnewsletters,corporateblog,corporateintranetanduserconferencesite</li>
…
</ul>
</div>
…
</div>

包括形式：制止冗余

由于标准请求为一切事情职务和脚色指定hCard信息，而hCard必要fn属性（人的格局假名字）这就意味着关于我简历中每条experience，我必要列出我的名字信息。这真是没有太粗心思。
幸亏，微格局的家伙们想出了举措──包括形式，同意在页面中利用已在某个中央界说好的数据。利用包括形式，我就能够在experience中包括我已在contact中界说好的fn信息了。起首，我必要为我的contacthCardfn值界说一个id，如许我就能够援用他：
<h2class="fnn"id=”emily-hcard-name”><spanclass=”given-name”>Emily</span><spanclass=”additional-name”>Paige</span><spanclass=”family-name”>Lewis</span></h2>
然后，对应一切的experience，我能够为链接<a>指定class="include"，而在链接的href值中指定到fnid：

<divclass="vcalendar">
<divclass="experienceveventvcard">
<aclass=”includenonVisual”href=”#emily-hcard-name”>EmilyPaigeLewis</a>
<h4class="title">WebDesigner</h4>
<pclass="orgfn">PitneyBowesBusinessInsight</p>
<p><abbrclass="dtstart"title="2004-12-01">December2004</abbr>–present</p>
<ulclass="description">
<li>DesignedinterfacesanddevelopedXHTML,CSSandgraphicsformaincorporatesite,internationalsites,marketingnewsletters,corporateblog,corporateintranetanduserconferencesite</li>
…
</ul>
</div>
…
</div>

别的，包括形式还同意利用<object>。<object>比链接要加倍具有语义信息，不外他会形成显现成绩。
比方，在Safari中：

登录/注册后可看大图

Chrome也会有相似成绩：

登录/注册后可看大图

Opera不会显现转动条，可是会显现一年夜片空缺地区：

登录/注册后可看大图

IE6和IE7也显现一些器材（不晓得详细是甚么器材）：

登录/注册后可看大图

因为这些显现成绩，今朝仍是保举利用链接体例，不外一样有成绩。实在算不上成绩，只是必要记着：链接外部必需有指定内容，以便无停滞会见的屏幕发声程序有器材能够读取。
日期工夫计划形式

关于每一个事情“事务”，我都利用了保举的hCalendar体例形貌。这意味着我要利用对入手下手和停止的工夫利用日期工夫计划形式：
<p><abbrclass=”dtstart”title=”1999-11-01″>November1999</abbr>–<abbrclass=”dtend”title=”2004-01-01″>January2004</abbr></p>
这个形式请求被包括在<abbr>元素中，该元素利用title属性值来界说“呆板可读”的工夫格局，而经由过程包括的内容来指定人类可读的工夫格局。在title中包括的日期工夫格局必要遵守ISO8601格局请求。
可选属性：education

可选属性education标明教导“事务”，好比本科教导。education也能够利用屡次。而且同experience类似，标准请求每一个education“事务”都利用hCalendar格局形貌。固然标准中没有请求，我仍是为年夜学或学院增加了hCard信息形貌：

<divclass=”vcalendar”>
<divclass="educationveventvcard“>
<h4class=”summary”>WebDesign&DevelopmentCertification</h4>
<pclass=”orgfn”><ahref=”http://www.gwu.edu/index.cfm”class=”url”title=”Linkopensoffthissite”>GeorgeWashingtonUniversity</a>,CenterforProfessionalDevelopment</p>
<p><abbrclass=”dtstart”title=”2001-09-01″>September2001</abbr>–<abbrclass=”dtend”title=”2003-06-01″>June2003</abbr></p>
<p>GPA3.8</p>
</div>
</div>

我没有利用甚么

hResume还撑持affiliation和宣布作品信息。我没有完成他们由于同我干系不太年夜。
可选属性：affiliation

可选属性affiliation标明团体属于/有干系的机构构造。affiliation能够被利用屡次。标准请求个中的构造要利用hCard来形貌：

<ul>
<liclass="affliationvcard“><spanclass=”fnorg”>AssociationforAccountingMarketing</span></li>
<liclass="affliationvcard“><spanclass=”fnorg”>NMAdobeUsersGroup</span></li>
</ul>

宣布作品

hResume没有特定的属性用来形貌宣布信息，不外，标准保举利用<cite>来标明团体宣布过的作品信息：
<cite>“ChoosingtheBestManagedCarePlan”</cite>,NewOD,September1998
工具

下面基础涵盖了hResume的全体，我们看看怎样可以使事情简单一些。有一些工具能够匡助完成hResume：

hResume天生器经由过程提交信息主动天生hResume
hResume项目为WordPress构建了hResume插件
Emurse供应一些天生hResume的模板
LinkedIn为他900万大众团体信息供应hResume形貌
CVAntix是一个基于收集使用的简历天生器
Resolio天生基于hResume格局的简历

其他工具

有一个WordPress的LinkedInhResume插件能够从LinkedIn材料中提取hResume数据
BrianSuda构建了一个beta版本的hResume到简历XML转化的工具
Optimus微格局转换器供应从hResume到JSON，XML大概RSS格局的转换

优点

关于我来讲，当有人问我为何要利用微格局？我城市回覆“为何不呢”，尺度、语义和微格局关于我来讲都是最美好的器材。
就这么多了？

下面就是关于hResume的形貌。可是并非这个系列的停止。另有一篇文章我企图用来会商一些在写作这个系列的过程当中学到的事变。还企图会商一下“微格局同RDF”之间的争辩。
</p>
Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。

只看该作者 · 发表于 2015-1-17 22:39:02

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-1-26 23:24:07

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-2-5 08:16:01

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

只看该作者 · 发表于 2015-2-11 08:28:35

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-3-2 05:58:37

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

只看该作者 · 发表于 2015-3-17 23:10:08

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-3-25 11:21:11

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 给大家带来网页简历布局和语义信息:hResume微格局

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子