<?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>Ice.Crystal</title>
	<atom:link href="http://www.7crystal.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.7crystal.com</link>
	<description>花落ベ莫相离メ翼</description>
	<lastBuildDate>Wed, 30 Nov 2011 06:24:25 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>windows下用bat脚本定时备份mysql</title>
		<link>http://www.7crystal.com/2011/11/windows%e4%b8%8b%e7%94%a8bat%e8%84%9a%e6%9c%ac%e5%ae%9a%e6%97%b6%e5%a4%87%e4%bb%bdmysql/</link>
		<comments>http://www.7crystal.com/2011/11/windows%e4%b8%8b%e7%94%a8bat%e8%84%9a%e6%9c%ac%e5%ae%9a%e6%97%b6%e5%a4%87%e4%bb%bdmysql/#comments</comments>
		<pubDate>Wed, 30 Nov 2011 06:24:25 +0000</pubDate>
		<dc:creator>七彩crystal</dc:creator>
				<category><![CDATA[PHP+Apache+MySql]]></category>

		<guid isPermaLink="false">http://www.7crystal.com/?p=100</guid>
		<description><![CDATA[set "ymd=%date:~,4%%date:~5,2%%date:~8,2%" md "D:\mysql\backup\%ymd%" copy "D:\mysql\data\mysql" "C:\backup\%ymd%" ::pause 呵呵，用了也看了很多方法，最后觉得需求很简单直接保证每天copy一份数据库就成，就简单写个copy就OK了，然后加入任务计划中定时执行即可。]]></description>
		<wfw:commentRss>http://www.7crystal.com/2011/11/windows%e4%b8%8b%e7%94%a8bat%e8%84%9a%e6%9c%ac%e5%ae%9a%e6%97%b6%e5%a4%87%e4%bb%bdmysql/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>4月，怎么了！@-@</title>
		<link>http://www.7crystal.com/2011/04/4%e6%9c%88%ef%bc%8c%e6%80%8e%e4%b9%88%e4%ba%86%ef%bc%81/</link>
		<comments>http://www.7crystal.com/2011/04/4%e6%9c%88%ef%bc%8c%e6%80%8e%e4%b9%88%e4%ba%86%ef%bc%81/#comments</comments>
		<pubDate>Tue, 19 Apr 2011 06:07:58 +0000</pubDate>
		<dc:creator>七彩crystal</dc:creator>
				<category><![CDATA[o(∩_∩)o... life]]></category>

		<guid isPermaLink="false">http://www.7crystal.com/blog/?p=91</guid>
		<description><![CDATA[再也不会比这个月悲剧了，坏了块500G台式机硬盘，拿去返修换回一块超大噪声的盘，继续返修！ 随后移动硬盘不亮了还真吓我一跳，本是做数据备份的盘，如果2块同时坏还真的要命会，还好只是硬盘盒坏了，换货，换了个新的还不错。刚才不小心摔了下，NND电源灯OK，数据灯不亮了，继续换货。真脆弱的硬盘，看来得多买些用来备份数据。 保佑我只是硬盘盒坏了吧！[2011-4-19 14:07:42]]]></description>
		<wfw:commentRss>http://www.7crystal.com/2011/04/4%e6%9c%88%ef%bc%8c%e6%80%8e%e4%b9%88%e4%ba%86%ef%bc%81/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【转载】图片格式与设计那点事儿</title>
		<link>http://www.7crystal.com/2011/01/%e5%9b%be%e7%89%87%e6%a0%bc%e5%bc%8f%e4%b8%8e%e8%ae%be%e8%ae%a1%e9%82%a3%e7%82%b9%e4%ba%8b%e5%84%bf/</link>
		<comments>http://www.7crystal.com/2011/01/%e5%9b%be%e7%89%87%e6%a0%bc%e5%bc%8f%e4%b8%8e%e8%ae%be%e8%ae%a1%e9%82%a3%e7%82%b9%e4%ba%8b%e5%84%bf/#comments</comments>
		<pubDate>Thu, 20 Jan 2011 06:31:21 +0000</pubDate>
		<dc:creator>七彩crystal</dc:creator>
				<category><![CDATA[xhtml+css]]></category>
		<category><![CDATA[gif]]></category>
		<category><![CDATA[jpg]]></category>
		<category><![CDATA[PNG]]></category>

		<guid isPermaLink="false">http://www.7crystal.com/blog/?p=87</guid>
		<description><![CDATA[第一次写技术博客，有不尽如人意的地方，还请见谅和指正。 为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。 除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么 样的设计才更适合Web页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。 有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。 本文主要包括以下几方面内容： 1、基本概念 矢量图与位图 有损压缩与无损压缩 2、实际应用 什么时候应该使用PNG 什么时候应该使用JPG 总结 3、思考与实践 什么样的设计更适合Web页面？ 我们还可以做些什么？ 4、附录-Photoshop中各种参数的含义及设置技巧 1、基本概念 要了解图片格式的特性，首先得从一些基本概念开始。这部分内容读起来可能会比较枯燥，但如果你耐着性子读完它，相信会获益匪浅。 矢量图与位图 矢量图-完美的几何图形 矢量图是 通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半 径来描述，当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。 矢量图的优点在于文件相对较小，并且放大缩小不会失真。缺点则是这些完美的几何图形很难表现自然度高的写实图像。 需要强调说明的是我们在web页面上所使用的图像都是位图，即便有些称为矢量图形（如矢量icon等）也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的（区别于像素绘制的图形）。 位图-神奇的拼图 位图又 叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的 像素点，当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。所以当我们放大一幅像素图时，能看到这些拼片一样的像素 点（如下图）。 位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真。 尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这就是涉及到有损压缩和无损压缩的区别。 有损压缩与无损压缩 有损压缩-你看到的不一定是真实的 按照我的理解有损压缩就 是在存储图像的时候并不完全真实的记录图像上每个像素点的数据信息，它会根据人眼观察现实世界的特性（人眼对光线的敏感度比对颜色的敏感度要高，生物实验 证明当颜色缺失时人脑会利用与附近最接近的颜色来自动填补缺失的颜色）对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐 变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。 JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。JPG在存储图像时会把图像分解成8*8像素的栅格（如上图），然后对每个栅格的 数据进行压缩处理，当我们放大一幅图像的时候，就会发现这些8*8像素栅格中很多细节信息被去除，而通过一些特殊算法用附近的颜色进行填充（为了让大家看 得更清楚我将图像的压缩比率调到很低）。这也是为什么我们用JPG存储图像有时会产生块状模糊的原因。 无损压缩-最精确的拼图 相对有损压缩而言无损压缩则 会真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪 些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的 白云和渐变等数据）。 PNG是我们最常见的一种采用无损压缩的图片格式。无损压缩在存储图像前会先判断图像上哪些地方是相同的哪些地方是不同的，为此需要对图像上所有出现的颜色进行索引（如上图），我们把称这些颜色称为索引色。索引色就好比绘制这幅图像的“调色版”，PNG在显示图像的时候则会用“调色版”上的这些颜色去填充相应的位置。 这里大家可能会疑惑既然PNG采用的是无损压缩为什么我们保存的PNG格式图片还会有失真呢？这是因为无损压缩只是说它的压缩方式会尽可能真实的还 原图像，但从它的压缩原理我们可以知道它是通过索引图像上相同区域的颜色进行压缩和还原的，这就意味着只有在图像上出现的颜色数量小于我们可以保存的颜色 数量时，我们才能真实的记录和还原图像，否则就会丢失一些图像信息（PNG8最多只能索引256种颜色，所以对于颜色较多的图像不能真实还原；PNG24 则可以保存1600多万种颜色，基本能够真实还原我们人类肉眼所可以分别的所有颜色；PNG格式最多可以保存48位颜色通道）。而对于有损压缩来说，不管 图像上的颜色多少，都会损失图像信息。 JPG和PNG 关于JPG和PNG的基本信息介绍这里就不赘述了，有兴趣详细了解的同学可以去这里： [...]]]></description>
		<wfw:commentRss>http://www.7crystal.com/2011/01/%e5%9b%be%e7%89%87%e6%a0%bc%e5%bc%8f%e4%b8%8e%e8%ae%be%e8%ae%a1%e9%82%a3%e7%82%b9%e4%ba%8b%e5%84%bf/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【转载】php+mysql+memcache实战型技术测试</title>
		<link>http://www.7crystal.com/2011/01/%e3%80%90%e8%bd%ac%e8%bd%bd%e3%80%91phpmysqlmemcache%e5%ae%9e%e6%88%98%e5%9e%8b%e6%8a%80%e6%9c%af%e6%b5%8b%e8%af%95/</link>
		<comments>http://www.7crystal.com/2011/01/%e3%80%90%e8%bd%ac%e8%bd%bd%e3%80%91phpmysqlmemcache%e5%ae%9e%e6%88%98%e5%9e%8b%e6%8a%80%e6%9c%af%e6%b5%8b%e8%af%95/#comments</comments>
		<pubDate>Wed, 12 Jan 2011 13:03:28 +0000</pubDate>
		<dc:creator>七彩crystal</dc:creator>
				<category><![CDATA[PHP+Apache+MySql]]></category>

		<guid isPermaLink="false">http://www.7crystal.com/blog/?p=85</guid>
		<description><![CDATA[出两个变态的题目，题目很变态，但是都是实战中遇到的真实案例， 1：我写一个程序，既要使用mysql也要使用memcache， 第一行是 mysql_connect,第二行是memcache_connect 换过来写，第一行是memcache_connect，第二行是mysql_connect caoz发现实践中这两种写法有很大的区别，区别在哪里？ 2：我写一个程序，使用了mysql，生成了一个页面最后用 echo $html; 输出 一种写法是 mysql_close(); echo $html; 另一种是 echo $html; mysql_close(); caoz发现实践中这两种区别很大，区别在哪里？ 两个全是实践中发现并调整的案例。 &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;半夜黑眼圈更新博客的分割线&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211; caoz写程序不是追求BT的人，caoz经常和工程师强调，不追求极端的技术体现或者技术炫耀，所以，如果读者认为这里的题目是为了所谓的诸如某个写法比某个写法资源开销小一点或者其他什么，那么这真不是caoz的本意。 这两道题都是真实运营环境中遇到的典型案例，典型在哪里呢？就是当你遇到一个系统故障的时候，你怎么分析，怎么思考，怎么判断多种关联因素的影响，所以这个题目答出答不出并不重要，重要的是怎么思考系统彼此的关系。 一个典型的系统故障是， mysql 连接过多，或者说too many connections，这个问题困扰了我们很久，如果这是因为索引导致的，或者因为数据并发请求导致的，定位到原因并不复杂，但是当上述问题解决后，诡异的现象发生了，数据库几乎没有压力，没有阻塞进程，没有慢查询，但是mysql连接很多，而且都是sleep连接。此时，webserver的链接也很多，换句话说，因为php执行阻塞，导致mysql链接无法迅速释放，那么，php为什么会阻塞？ 逐个断点分析发现，原来echo耽误了最多时间。 这个事情让caoz涨了点经验，之前从来不会认为echo是一个时间阻塞点（如果你在本机测试，你会认为其时间延迟几乎是0），但是实例跟踪发现，echo实际上在我们的工作环境中，代表的网络传输的过程，换言之，会因为路由，带宽的因素而等待，而此时，mysql的链接还在那里没有释放，是的，看到题目每个人都会想到，mysql_close要放在echo后面，但是为什么echo会耽误时间，很少人会想到。当然，这个也与工作环境有关，caoz只知道我们配置的webserver会有这种情况，是不是存在其他的配置模式，caoz没有实测，不敢乱说，但是这里的经验是，mysql_close放到echo前面，大量的sleep链接会迅速减少。 echo并不耗费太多系统资源，但是会等待网络传输，在高并发的网络环境下，注意这一点对数据库很有好处。 这个问题解决后，mysql健康了很多，但是偶然还会出现链接过多的问题，又困扰了很久，直到有一天，根据用户反馈的一些错误信息，发现 memcached服务器有不稳定因素，原来是memcached流量过高产生阻塞，php进程等待链接，导致mysql链接大量等待，这是第一个题目的由来，其实这个题目本身没有标准答案，但是应该有一个意识，当你在一个脚本中同时启动A,B两个链接，那么如果你不能保证这两个链接是必然可靠的（通常是无法保障的），那么后者一旦阻塞，就会导致前者大量链接等待，而前者阻塞，通常不会影响后者。所以，这个答案取决于，哪个链接对你的应用更重要，以及哪个链接有更大的并发支撑性。 两道题说到底就是一个意思，当遇到系统问题和故障的时候，多想想一些关联的因素影响，多思考整个架构响应先后过程的逻辑，数据库连接过多，不一定是数据库造成的，web链接过多，也不一定非要去优化webserver，关联因素可能才是根源，解决了根源，表象才会彻底解决。 来源http://hi.baidu.com/caoz/blog/item/a46234a83b7cc7bacb130cd5.html]]></description>
		<wfw:commentRss>http://www.7crystal.com/2011/01/%e3%80%90%e8%bd%ac%e8%bd%bd%e3%80%91phpmysqlmemcache%e5%ae%9e%e6%88%98%e5%9e%8b%e6%8a%80%e6%9c%af%e6%b5%8b%e8%af%95/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>心累了，无痕.</title>
		<link>http://www.7crystal.com/2010/09/%e5%bf%83%e7%b4%af%e4%ba%86%ef%bc%8c%e6%97%a0%e7%97%95/</link>
		<comments>http://www.7crystal.com/2010/09/%e5%bf%83%e7%b4%af%e4%ba%86%ef%bc%8c%e6%97%a0%e7%97%95/#comments</comments>
		<pubDate>Thu, 16 Sep 2010 00:35:17 +0000</pubDate>
		<dc:creator>七彩crystal</dc:creator>
				<category><![CDATA[o(∩_∩)o... life]]></category>

		<guid isPermaLink="false">http://www.7crystal.com/blog/?p=83</guid>
		<description><![CDATA[好累，好累。]]></description>
		<wfw:commentRss>http://www.7crystal.com/2010/09/%e5%bf%83%e7%b4%af%e4%ba%86%ef%bc%8c%e6%97%a0%e7%97%95/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>基于vertical-align的表单元素垂直对齐方式研究</title>
		<link>http://www.7crystal.com/2010/07/%e5%9f%ba%e4%ba%8evertical-align%e7%9a%84%e8%a1%a8%e5%8d%95%e5%85%83%e7%b4%a0%e5%9e%82%e7%9b%b4%e5%af%b9%e9%bd%90%e6%96%b9%e5%bc%8f%e7%a0%94%e7%a9%b6/</link>
		<comments>http://www.7crystal.com/2010/07/%e5%9f%ba%e4%ba%8evertical-align%e7%9a%84%e8%a1%a8%e5%8d%95%e5%85%83%e7%b4%a0%e5%9e%82%e7%9b%b4%e5%af%b9%e9%bd%90%e6%96%b9%e5%bc%8f%e7%a0%94%e7%a9%b6/#comments</comments>
		<pubDate>Thu, 01 Jul 2010 03:26:50 +0000</pubDate>
		<dc:creator>七彩crystal</dc:creator>
				<category><![CDATA[xhtml+css]]></category>
		<category><![CDATA[vertical-align]]></category>
		<category><![CDATA[表单元素对齐]]></category>

		<guid isPermaLink="false">http://www.7crystal.com/blog/?p=80</guid>
		<description><![CDATA[最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的 提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依 然不能完美对齐。如下图所示： 于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（FF3.5）： 在很多网站涉及到表单的页面中，都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先，搜索到了蓝色上wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章中关于垂直居中提到了这样几个关键点： 1、vertical-align:middle的时候，是该元素的中心对齐周围元素的中心。 2、这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心 （baseline等名词如果不懂，请先阅读wheatlee的文章） 按照这个思路，对照我遇到的问题，首先想到的是先验证一下浏览器对于“复选框”和图片是不是使用同样的规则来渲染（是不是把复选框当成一个正方形图片来对待）。于是写出下面的代码： &#60;style&#62; body{font-size:12px;} &#60;/style&#62;&#60;input style=”vertical-align:middle;” name=”test” type=”checkbox”&#62; &#60;img style=”vertical-align:middle;” src=”testpic.gif” /&#62; 测试文字 代码中的testpic.gif是一个尺寸与复选框完全一样的黑色图片。FF3.5下显示如下： 事实证明，FF3.5对于复选框和图片的垂直对齐方式是采用同样的规则进行渲染的，即将复选框当作一个正方形的图片(IE不是)。按照wheatlee“middle的时候，是该元素的中心对齐周围元素的 中心”的观点，如果我在复选框后面输入英文字符，那么复选框的中心将与英文中小写字母x的中心对齐。经测试，FF3.5下面基本上是这样的(在一些字号的 时候会有一定的误差，比如，如果字体高度是偶数，那么这个中心点有时在一半偏上1px，有时在一半偏下1px)。如图： 但是这对于中文来说，并不是一个好的结果。因为中文是方块字，并且相同字号的情况下，高度会比小写的x高出很多。所以，按照浏览器内置的方式，只用 vertical-align:middle是无论如何也无法对齐中文的（无论是只写中文，中文在前，英文在前，FF3.5都是按照小写x中心那种方法来 对齐的。）。但是回头再看看wheatlee的文章，他说这个小写x中心对齐的渲染方式，是对于“文字”来说的。那么，如果不是文字呢…？如果复选框后面 跟的是一个行内元素，如label，而文字是写在它内部的，会是什么样呢？浏览器会不会将这个内联元素整体看作一个“块”，然后依照类似图片的规则进行渲 染呢？如果那样，我们就达到目的了。 但是经过测试，很遗憾，事实并不是这样，加上label后跟没加没有任何区别。FF3.5/IE6/IE7均是如此。在FF3.5中用firebug看一下，证明浏览器并没有按照label的高度值来去对齐中心点。如图： 如果按照之前的设想，红蓝两线应该是重合的。但现在的情况是，它们相差了1px。并且这1px是没有规律的，随着字号的放大，并不恒定，貌似轻易也无法提炼出对应关系来。于是想到，再试一下将label也加上vertical-align:middle。结果如图： 在FF3.5和IE7下面已经很接近于我们希望的状态了，只差1px。IE6下… 无语了。 经过以上折腾，我得出了跟wheatlee相同的结论，就是，各种浏览器之间对这个问题的处理貌似没有任何规律。并且，似乎每一种浏览器对于 vertical-align:middle的渲染都不是完全遵从W3C所说的“Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.” [...]]]></description>
		<wfw:commentRss>http://www.7crystal.com/2010/07/%e5%9f%ba%e4%ba%8evertical-align%e7%9a%84%e8%a1%a8%e5%8d%95%e5%85%83%e7%b4%a0%e5%9e%82%e7%9b%b4%e5%af%b9%e9%bd%90%e6%96%b9%e5%bc%8f%e7%a0%94%e7%a9%b6/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>你是一个职业的页面重构工作者吗？</title>
		<link>http://www.7crystal.com/2009/10/%e4%bd%a0%e6%98%af%e4%b8%80%e4%b8%aa%e8%81%8c%e4%b8%9a%e7%9a%84%e9%a1%b5%e9%9d%a2%e9%87%8d%e6%9e%84%e5%b7%a5%e4%bd%9c%e8%80%85%e5%90%97%ef%bc%9f/</link>
		<comments>http://www.7crystal.com/2009/10/%e4%bd%a0%e6%98%af%e4%b8%80%e4%b8%aa%e8%81%8c%e4%b8%9a%e7%9a%84%e9%a1%b5%e9%9d%a2%e9%87%8d%e6%9e%84%e5%b7%a5%e4%bd%9c%e8%80%85%e5%90%97%ef%bc%9f/#comments</comments>
		<pubDate>Thu, 22 Oct 2009 05:09:54 +0000</pubDate>
		<dc:creator>七彩crystal</dc:creator>
				<category><![CDATA[xhtml+css]]></category>
		<category><![CDATA[页面重构]]></category>

		<guid isPermaLink="false">http://www.7crystal.com/blog/?p=76</guid>
		<description><![CDATA[做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里 导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种 的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不 理会下面的内容。 单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=&#62;切图=&#62;写HTML和CSS”， 虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设 计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热 情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。 跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。又引出另一个话题，“何为好页面？”，一般包括下面几点： 结构完整，可通过标准验证 标签语义化，结构合理 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化 很多同学多少都遇到过方向不明，不知道自己应该提高些什么，我们可以从“分析设计稿=&#62;切图=&#62;写HTML和CSS”这个工作内容，针对每一点提出一些要求，以方便我们分析自己的能力水平，为继续提高确定个方向： 一，设计稿的分析 设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段： 能分清设计稿中的公共与私有的部分 在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式） 在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式） 在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式） 在4的基础上，考虑整站的结构分布（包括文件分布、目录结构） 上面这些都是在还没开始动手制作之前所要做的。 二，切图 切图是指将设计稿切成便于制作成页面的图片。都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段： 切成所需要的图片（如何将需要的部分切出来） 在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型） 在2的基础上，规划切出来的图片（包括文件分布） 在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小） HTML和CSS的编写 HTML和CSS的编写是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段： 还原设计稿视觉效果，并通过标准验证（HTML） 在1的基础上，实现多浏览器的兼容（HTML） 在2的基础上，标签语义化（HTML） 在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，HTML和CSS） 在4的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS） 在5的基础上，考虑到整站的样式分布（包括如何实现分布） 在6的基础上，样式写法的优化（包括技巧的应用） 是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。 如果你已经达到或超过3、4、5，恭喜你，你已经是一个职业的“页面重构工作者”了。为了我们自身的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等，也是十分必要的。大家一起进步吧。 转自：http://webteam.tencent.com/?p=133]]></description>
		<wfw:commentRss>http://www.7crystal.com/2009/10/%e4%bd%a0%e6%98%af%e4%b8%80%e4%b8%aa%e8%81%8c%e4%b8%9a%e7%9a%84%e9%a1%b5%e9%9d%a2%e9%87%8d%e6%9e%84%e5%b7%a5%e4%bd%9c%e8%80%85%e5%90%97%ef%bc%9f/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>“五险一金”的深入解析，上班打工族的一定要看</title>
		<link>http://www.7crystal.com/2009/09/%e2%80%9c%e4%ba%94%e9%99%a9%e4%b8%80%e9%87%91%e2%80%9d%e7%9a%84%e6%b7%b1%e5%85%a5%e8%a7%a3%e6%9e%90%ef%bc%8c%e4%b8%8a%e7%8f%ad%e6%89%93%e5%b7%a5%e6%97%8f%e7%9a%84%e4%b8%80%e5%ae%9a%e8%a6%81%e7%9c%8b/</link>
		<comments>http://www.7crystal.com/2009/09/%e2%80%9c%e4%ba%94%e9%99%a9%e4%b8%80%e9%87%91%e2%80%9d%e7%9a%84%e6%b7%b1%e5%85%a5%e8%a7%a3%e6%9e%90%ef%bc%8c%e4%b8%8a%e7%8f%ad%e6%89%93%e5%b7%a5%e6%97%8f%e7%9a%84%e4%b8%80%e5%ae%9a%e8%a6%81%e7%9c%8b/#comments</comments>
		<pubDate>Mon, 21 Sep 2009 02:41:47 +0000</pubDate>
		<dc:creator>七彩crystal</dc:creator>
				<category><![CDATA[o(∩_∩)o... life]]></category>
		<category><![CDATA[智能手机]]></category>
		<category><![CDATA[五险一金]]></category>
		<category><![CDATA[保险]]></category>

		<guid isPermaLink="false">http://www.7crystal.com/blog/?p=72</guid>
		<description><![CDATA[相信已工作的大哥大姐们对自己缴纳的社会保险都是非常关注的吧&#8230;认真看吧 “耐心看吧” ..  绝对有用 首先,大家应该意识到社会保险是比商业保险更为优质的一种保险..  原因大致如下: （1）社会保险是国家不以营利为目的而开展的全民福利保障事业.. 而商业保险是要营利的 . . 总体来说商业保险收费比同等规格的社会保险要高不少喔 （2）社会保险保障的方面比一般的商业保险要更多一些.. 商业保险一般只保医疗或养老 ..  .. 社会保险一般可以同时保五个险.. 而且在医疗这一块.. 社会保险的优势非常突出 （3）社会保险的标准每年都在不停提高.. 国家每年7月初都会按照职工基本工资进行社保基数调整.. 而且调整的比例还很高..一般每年调高10%以上.. 就是说越往后拿得钱越高 .. 这样做最大的好处就是可以把通货膨胀的影响消除到比较小.. 而商业保险就算也会调整回报..  但总体也不会比社会保险涨得快 一句话,现在没有参加社会保险的已工作同学请速参加社会保险,已参加商业保险但并未参加社会保险的已工作同学也请速参加社会保险&#8230;.. &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;开始了&#8212;&#8212;&#8212;&#8212;开始了&#8212;&#8212;&#8212;&#8212;开始了&#8212;&#8212; 那么,社会保险具体是怎么构成的呢&#8230;  ? 社会保险=养老保险+医疗保险+失业保险+工伤保险+生育保险+住房公积金 (注意:以上五险一金可能在各个地区实践有所不同,你的单位也许不会把五险一金全部为你交,比如南京有些单位就不给职工交医疗保险而只交其余的四险一金,有些单位不交公积金而只交五险,所以你一定要搞清楚你的单位到底给你交了哪些保险以及是否交公积金!) 具体的社保构成比例为: 养老保险:单位每个月为你缴纳21%,你自己缴纳8%; 医疗保险:单位每个月为你缴纳9%,你自己缴纳2%外加10块钱的大病统筹(大病统筹主要管住院这块); 失业保险:单位每个月为你缴纳2%,你自己缴纳1%; 工伤保险:单位每个月为你缴纳0.5%,你自己一分钱也不要缴; 生育保险:单位每个月为你缴纳0.8%,你自己一分钱也不要缴; 住房公积金:单位每个月为你缴纳8%,你自己缴纳8% 以上..这么算下来.. 单位每个月为你缴纳的社保比例应该是21%+9%+2%+0.5%+0.8%+8%=41.3% 你自己每个月为你缴纳的社保比例应该是8%+2%+10块+1%+8%=19%+10块 暂时去掉你交的10块钱不谈..  单位缴纳的比例和你缴纳的比例应该为413:190..  这就是说如果你每个月为自己的社保缴纳了190块钱..那么单位会往你的社保帐户上打进去413块钱.. 每个月你的社保帐户上增加的钱就应该是413+190=603块钱, 所以说在你看不见的情况下,单位交的社保费用其实是你的2倍还多,所以你每个月交社保费的时候千万别心疼呀~你要知道单位比你交的多得多了呢..心疼的其实是单位&#8230; ！ 呀呀~话说回到那三险一金和五险一金,这里大家应该已经看出来了,其实江湖上所说的三险一金完全就等于五险一金.. 只是三险一金是从你个人交的保险(养老+医疗+失业+公积金)来说的.. 五险一金是从你单位交的保险(养老+医疗+失业+工伤+生育+公积金)来说的&#8230;  把三险一金说成五险一金其实只是说起来好听而已~ 除了单位能为你交社保,其实没工作但有收入的同学或者有单位但单位不交社保的同学也可以自己交社保,不过个人只能缴纳养老保险+医疗保险, 工伤呀生育呀失业呀公积金呀你个人都交不起来的 &#8230; [...]]]></description>
		<wfw:commentRss>http://www.7crystal.com/2009/09/%e2%80%9c%e4%ba%94%e9%99%a9%e4%b8%80%e9%87%91%e2%80%9d%e7%9a%84%e6%b7%b1%e5%85%a5%e8%a7%a3%e6%9e%90%ef%bc%8c%e4%b8%8a%e7%8f%ad%e6%89%93%e5%b7%a5%e6%97%8f%e7%9a%84%e4%b8%80%e5%ae%9a%e8%a6%81%e7%9c%8b/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>键盘上所有快捷键</title>
		<link>http://www.7crystal.com/2009/08/%e9%94%ae%e7%9b%98%e4%b8%8a%e6%89%80%e6%9c%89%e5%bf%ab%e6%8d%b7%e9%94%ae/</link>
		<comments>http://www.7crystal.com/2009/08/%e9%94%ae%e7%9b%98%e4%b8%8a%e6%89%80%e6%9c%89%e5%bf%ab%e6%8d%b7%e9%94%ae/#comments</comments>
		<pubDate>Tue, 18 Aug 2009 01:20:05 +0000</pubDate>
		<dc:creator>七彩crystal</dc:creator>
				<category><![CDATA[IT-NET]]></category>
		<category><![CDATA[快捷键]]></category>

		<guid isPermaLink="false">http://www.7crystal.com/blog/?p=69</guid>
		<description><![CDATA[F1帮助 F2改名 F3搜索 F4地址 F5刷新 F6切换 F10菜单 CTRL+A全选 CTRL+C复制 CTRL+X剪切 CTRL+V粘贴 CTRL+Z撤消 CTRL+O打开 SHIFT+DELETE永久删除 DELETE删除 ALT+ENTER属性 ALT+F4关闭 CTRL+F4关闭 ALT+TAB切换 ALT+ESC切换 ALT+空格键窗口菜单 CTRL+ESC开始菜单 拖动某一项时按CTRL复制所选项目 拖动某一项时按CTRL+SHIFT创建快捷方式 将光盘插入到CD-ROM驱动器时按SHIFT键阻止光盘自动播放 Ctrl+1,2,3&#8230;　切换到从左边数起第1,2,3&#8230;个标签 Ctrl+A　全部选中当前页面内容 Ctrl+C　复制当前选中内容 Ctrl+D　打开“添加收藏”面版(把当前页面添加到收藏夹中) Ctrl+E　打开或关闭“搜索”侧边栏(各种搜索引擎可选) Ctrl+F　打开“查找”面版 Ctrl+G　打开或关闭“简易收集”面板 Ctrl+H　打开“历史”侧边栏 Ctrl+I　打开“收藏夹”侧边栏/另:将所有垂直平铺或水平平铺或层叠的窗口恢复 Ctrl+K　关闭除当前和锁定标签外的所有标签 Ctrl+L　打开“打开”面版(可以在当前页面打开Iternet地址或其他文件&#8230;) Ctrl+N　新建一个空白窗口(可更改,Maxthon选项→标签→新建) Ctrl+O　打开“打开”面版(可以在当前页面打开Iternet地址或其他文件&#8230;) Ctrl+P　打开“打印”面板(可以打印网页,图片什么的&#8230;) Ctrl+Q　打开“添加到过滤列表”面板(将当前页面地址发送到过滤列表) Ctrl+R　刷新当前页面 Ctrl+S　打开“保存网页”面板(可以将当前页面所有内容保存下来) Ctrl+T　垂直平铺所有窗口 Ctrl+V　粘贴当前剪贴板内的内容 Ctrl+W　关闭当前标签(窗口) Ctrl+X　剪切当前选中内容(一般只用于文本操作) Ctrl+Y　重做刚才动作(一般只用于文本操作) Ctrl+Z　撤消刚才动作(一般只用于文本操作) Ctrl+F4　关闭当前标签(窗口) Ctrl+F5　刷新当前页面 Ctrl+F6　按页面打开的先后时间顺序向前切换标签(窗口) Ctrl+F11　隐藏或显示菜单栏 Ctrl+Tab　以小菜单方式向下切换标签(窗口) Ctrl+Enter　域名自动完成http://www.**.com(内容可更改,Maxthon选项→地址栏→常规)/另:当输入焦点在搜索栏中时,为高亮关键字 Ctrl+拖曳　保存该链接的地址或已选中的文本或指定的图片到一个文件夹中(保存目录可更改,Maxthon选项→保存) [...]]]></description>
		<wfw:commentRss>http://www.7crystal.com/2009/08/%e9%94%ae%e7%9b%98%e4%b8%8a%e6%89%80%e6%9c%89%e5%bf%ab%e6%8d%b7%e9%94%ae/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Web测试方法 by IT168</title>
		<link>http://www.7crystal.com/2009/08/web%e6%b5%8b%e8%af%95%e6%96%b9%e6%b3%95/</link>
		<comments>http://www.7crystal.com/2009/08/web%e6%b5%8b%e8%af%95%e6%96%b9%e6%b3%95/#comments</comments>
		<pubDate>Wed, 12 Aug 2009 04:06:32 +0000</pubDate>
		<dc:creator>七彩crystal</dc:creator>
				<category><![CDATA[编程杂谈]]></category>
		<category><![CDATA[web 测试]]></category>

		<guid isPermaLink="false">http://www.7crystal.com/blog/?p=65</guid>
		<description><![CDATA[在Web工程过程中，基于Web系统的测试、确认和验收是一项重要而富有挑战性的工作。基于Web的系统测试与传统的软件测试不同，它不但需要检查和验证 是否按照设计的要求运行，而且还要测试系统在不同用户的浏览器端的显示是否合适。重要的是，还要从最终用户的角度进行安全性和可用性测试。然 而，Internet和Web媒体的不可预见性使测试基于Web的系统变得困难。因此，我们必须为测试和评估复杂的基于Web的系统研究新的方法和技术。 本文将 web 测试分为 6 个部分： 1. 功能测试 2. 性能测试（包括负载/压力测试） 3. 用户界面测试 4. 兼容性测试 5. 安全测试 6. 接口测试 本文的目的是覆盖 web 测试的各个方面，未就某一主题进行深入说明。 一、功能测试 1.1 链接测试 链接是Web应用系统的一个主要特征，它是在页面之间切换和指导用户去一些不知道地址的页面的主要手段。链接测试可分为三个方面。首先，测试所有链接是否 按指示的那样确实链接到了该链接的页面；其次，测试所链接的页面是否存在；最后，保证Web应用系统上没有孤立的页面，所谓孤立页面是指没有链接指向该页 面，只有知道正确的URL地址才能访问。 链接测试可以自动进行，现在已经有许多工具可以采用。链接测试必须在集成测试阶段完成，也就是说，在整个Web应用系统的所有页面开发完成之后进行链接测试。 采取措施：采用自动检测网站链接的软件来进行。 推荐软件： Xenu Link Sleuth 免费 绿色免安装软件 HTML Link Validator 共享（30天试用） 1.2 表单测试 当用户通过表单提交信息的时候，都希望表单能正常工作。 如果使用表单来进行在线注册，要确保提交按钮能正常工作，当注册完成后应返回注册成功的消息。如果使用表单收集配送信息，应确保程序能够正确处理这些数 据，最后能让顾客能让客户收到包裹。要测试这些程序，需要验证服务器能正确保存这些数据，而且后台运行的程序能正确解释和使用这些信息。 当用户使用表单进行用户注册、登陆、信息提交等操作时，我们必须测试提交操作的完整性，以校验提交给服务器的信息的正确性。例如：用户填写的出生日期与职 业是否恰当，填写的所属省份与所在城市是否匹配等。如果使用了默认值，还要检验默认值的正确性。如果表单只能接受指定的某些值，则也要进行测试。例如：只 能接受某些字符，测试时可以跳过这些字符，看系统是否会报错。 1.3 数据校验 如果系根据业务规则需要对用户输入进行校验，需要保证这些校验功能正常工作。例如，省份的字段可以用一个有效列表进行校验。在这种情况下，需要验证列表完整而且程序正确调用了该列表(例如在列表中添加一个测试值，确定系统能够接受这个测试值)。 在测试表单时，该项测试和表单测试可能会有一些重复。 1.2和1.3的采取措施：第一个完整的版本采用手动检查，同时形成WinRunner（QTP）脚本；回归测试以及升级版本主要靠WinRunner（QTP）自动回放测试。 1.4 [...]]]></description>
		<wfw:commentRss>http://www.7crystal.com/2009/08/web%e6%b5%8b%e8%af%95%e6%96%b9%e6%b3%95/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

