<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>AVENIR.ZHENG 郑焕义 &#187; html</title>
	<atom:link href="http://caib.me/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://caib.me</link>
	<description>从平凡到卓越</description>
	<lastBuildDate>Wed, 07 Sep 2011 18:47:16 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>{ Web Standards } 你是一个职业的页面重构工作者吗?[载]</title>
		<link>http://caib.me/web-standards/</link>
		<comments>http://caib.me/web-standards/#comments</comments>
		<pubDate>Mon, 05 Jan 2009 07:20:39 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[前端]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[PSD]]></category>
		<category><![CDATA[W3C]]></category>
		<category><![CDATA[Web Standards]]></category>
		<category><![CDATA[XHTML]]></category>
		<category><![CDATA[切图]]></category>
		<category><![CDATA[结构与表现分离]]></category>
		<category><![CDATA[结构化]]></category>
		<category><![CDATA[网页结构]]></category>
		<category><![CDATA[语义化]]></category>

		<guid isPermaLink="false">http://blog.adriancheng.name/index.php/2009/01/05/web-standards/</guid>
		<description><![CDATA[&#160;&#160;&#160;&#160;&#160;&#160; 在大一有幸拜读了Jeffrey Zeldman经典的《网站重构》，开始领悟网页结构与表现分离，语义化、结构化等等概念。
&#160;&#160;&#160;&#160;&#160; 最近，看到了Ghost的这篇文章... ]]></description>
			<content:encoded><![CDATA[<p><img title="web standards" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="143" alt="web standards" src="http://cai13.info/blog_pic/2009/01/webstandards.jpg" width="500" border="0" />&#160;&#160;&#160;&#160;&#160;&#160; 在大一有幸拜读了<a href="http://www.zeldman.com/" target="_blank">Jeffrey Zeldman</a>经典的<a href="http://www.amazon.cn/mn/detailApp?qid=1231138929&amp;ref=SR&amp;sr=13-1&amp;uid=168-8245945-8170615&amp;prodid=zjbk068158" target="_blank">《网站重构》</a>，开始领悟网页结构与表现分离，语义化、结构化等等概念。</p>
<p>&#160;&#160;&#160;&#160;&#160; 最近，看到了<a href="http://www.cssforest.org/blog/index.php?s=about" target="_blank"><strong>Ghost</strong></a>的这篇文章，颇有收获。</p>
<p>&#160;&#160;&#160;&#160;&#160; 在平常中，我们将PSD设计稿转为Web页面的过程称为代码实现，很多时候，我们会通俗的认为这仅仅是切图，输出的过程，但实际上，除了切图，写html外，性能的优化、结构化和语义化、搜索引擎的优化、是否能通过W3C标准验证和JS的实现等等，这些要点，都是网页重构过程中是必须考虑的地方，页面重构不仅仅等同于切图。</p>
<p> <span id="more-823"></span><br />
<h2>原文：</h2>
<p>&#160;</p>
<p>&#160;&#160;&#160;&#160;&#160; 做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从<acronym>PS</acronym>里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不理会下面的内容。</p>
<p>&#160;&#160;&#160;&#160;&#160; 单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=&gt;切图=&gt;写<acronym>HTML</acronym>和<acronym>CSS</acronym>”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。</p>
<p>&#160;&#160;&#160;&#160;&#160; 跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。又引出另一个话题，“何为好页面？”，一般包括下面几点：</p>
<ol>
<li>结构完整，可通过标准验证 </li>
<li>标签语义化，结构合理 </li>
<li>充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化 </li>
</ol>
<p>&#160;&#160;&#160;&#160;&#160; 很多同学多少都遇到过方向不明，不知道自己应该提高些什么，我们可以从“分析设计稿=&gt;切图=&gt;写HTML和CSS”这个工作内容，针对每一点提出一些要求，以方便我们分析自己的能力水平，为继续提高确定个方向：</p>
<h5>一，设计稿的分析</h5>
<p>&#160;&#160;&#160;&#160;&#160; 设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：</p>
<ol>
<li>能分清设计稿中的公共与私有的部分 </li>
<li>在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式） </li>
<li>在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式） </li>
<li>在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式） </li>
<li>在4的基础上，考虑整站的结构分布（包括文件分布、目录结构） </li>
</ol>
<p>&#160;&#160;&#160;&#160;&#160; 上面这些都是在还没开始动手制作之前所要做的。</p>
<h5>二，切图</h5>
<p>&#160;&#160;&#160;&#160;&#160; 切图是指将设计稿切成便于制作成页面的图片。都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段：</p>
<ol>
<li>切成所需要的图片（如何将需要的部分切出来） </li>
<li>在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型） </li>
<li>在2的基础上，规划切出来的图片（包括文件分布） </li>
<li>在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小） </li>
</ol>
<h5>HTML和CSS的编写</h5>
<p>&#160;&#160;&#160;&#160;&#160; HTML和CSS的编写是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段：</p>
<ol>
<li>还原设计稿视觉效果，并通过标准验证（HTML） </li>
<li>在1的基础上，实现多浏览器的兼容（HTML） </li>
<li>在2的基础上，标签语义化（HTML） </li>
<li>在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，HTML和CSS） </li>
<li>在4的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS） </li>
<li>在5的基础上，考虑到整站的样式分布（包括如何实现分布） </li>
<li>在6的基础上，样式写法的优化（包括技巧的应用） </li>
</ol>
<p>&#160;&#160;&#160;&#160;&#160; 是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。</p>
<p>&#160;&#160;&#160;&#160;&#160; 如果你已经达到或超过3、4、5，恭喜你，你已经是一个职业的“页面重构工作者”了。为了我们自身的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等，也是十分必要的。大家一起进步吧。</p>
<p>&#160;</p>
<p>原文：<a title="http://www.cssforest.org/blog/index.php?id=121" href="http://www.cssforest.org/blog/index.php?id=121">http://www.cssforest.org/blog/index.php?id=121</a></p>
<p>作者：<a href="http://www.cssforest.org/blog/index.php?s=about" target="_blank"><strong>Ghost</strong></a></p>
]]></content:encoded>
			<wfw:commentRss>http://caib.me/web-standards/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>{ Plan } 暑期总结及大三之野望</title>
		<link>http://caib.me/plan/</link>
		<comments>http://caib.me/plan/#comments</comments>
		<pubDate>Wed, 27 Aug 2008 08:24:52 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[生活]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[soho]]></category>
		<category><![CDATA[专业技能]]></category>
		<category><![CDATA[外语能力]]></category>
		<category><![CDATA[大三]]></category>
		<category><![CDATA[实习]]></category>
		<category><![CDATA[暑假]]></category>
		<category><![CDATA[暑期]]></category>
		<category><![CDATA[社团工作]]></category>

		<guid isPermaLink="false">http://blog.adriancheng.name/index.php/2008/08/27/plan-%e6%9a%91%e6%9c%9f%e6%80%bb%e7%bb%93%e5%8f%8a%e5%a4%a7%e4%b8%89%e4%b9%8b%e9%87%8e%e6%9c%9b/</guid>
		<description><![CDATA[
   大二的暑假过去了，走完了大学的前半部分，该是时候停下脚步，回想过去所得、所失，思考未来方向，未来掌握在自己手上。

 
暑期总结：
   暑假做的事情都零零碎碎记下了，实习－旅... ]]></description>
			<content:encoded><![CDATA[<p><img title="plan" src="http://cai13.info/blog_pic/2008/08/plan.jpg" border="0" alt="plan" width="500" height="143" /></p>
<p>   大二的暑假过去了，走完了大学的前半部分，该是时候停下脚步，回想过去所得、所失，思考未来方向，未来掌握在自己手上。</p>
<p><span id="more-591"></span></p>
<h2> </h2>
<h2>暑期总结：</h2>
<p>   暑假做的事情都零零碎碎记下了，实习－旅行－回乡－奥运，没什么特别的事情，感受最深的，还是在<strong><span style="color: #ffff80;">“体验生活”</span></strong>上，常常把自己局限于小圈子，以后也更应该多出去走走，认识更多朋友，享受更多乐趣，体验更多生活。</p>
<h2>大三展望：</h2>
<p>   <strong>外语能力</strong>－CET-6比较理想地通过了，对成绩有点意外，呵呵。下一步，<span style="color: #ffff80;">BEC商务英语中高级</span>，大三英语课少，以实用性最高的BEC作为目标还是很有用，既保证课余时间不懈怠，又能掌握真正实用的商务英语。争取在11月份取得较好成绩，这样，英语就算到头了。大三下学期全力专攻法语，希望能达到<span style="color: #ffff80;">法语二级</span>水平。</p>
<p>   <strong>专业技能－</strong>大三课余时间较多，第一选择还是<span style="color: #ffff80;">找一份高质量的实习</span>。根据自己的条件：有较成熟的作品、项目经验、外语能力、学校口碑以及自身综合素质和对未来的职业规划，还是希望能找到一份相对较符合的实习：一周2天半至4天、网页设计或HTML/CSS代码编写、有专业网页设计师指导、公司运作规范。对于实习，还是抱着宁缺毋滥的心态，否则到头来一无所获，浪费的，是宝贵的时间。第二选择，大三上学期专注于设计和代码的基础，总觉得自己眼高手低，过去一直没打好基础，一段相对长的时间，能系统的掌握网页设计领域的专业知识，同时，利用空余时间soho，希望能做成一两项成熟的线上作品。下学期，集中准备腾讯、迅雷、网易等等的暑期实习计划。</p>
<p>   <strong>社团工作</strong>－上学期，继续积极推行制度化管理，一来提高效率，二来也减轻管理压力；加强沟通，<span style="color: #ffff80;">希望部门的同事都能开开心心，都能学到东西，都能感觉到有收获。</span>下学期，培养下一届管理层咯。</p>
<p>   <strong>其他</strong>－身体健康，戒掉睡懒觉的恶习，戒掉半夜工作的恶习，思考<span style="color: #ffff80;">找个女人好还是养只猫好</span>的问题。</p>
]]></content:encoded>
			<wfw:commentRss>http://caib.me/plan/feed/</wfw:commentRss>
		<slash:comments>29</slash:comments>
		</item>
	</channel>
</rss>

