最开始是在淘宝UED官方博客上看到的.觉得很不错,以为是flash. F12一下才知道是js实现的.当时没具体看,现在开始学javascript了,突然想到这个效果,决定挑战一下哈~开始吧~

Mockup

第一步:HTML&CSS

先不要着急写代码,先要考虑考虑实现这个效果对于代码结构上有什么特别的要求,我想到了两个方案:

1.一个小图容器,一个放大镜容器.原图做为放大镜容器的背景

2.一个小图容器,一个放大镜容器.原图做为放大镜子容器

这两个方案其实实现起来差别不大,但是考虑到将来图片有可能是动态读取出来的,而且大小不定,所以我们不推荐放在CSS背景中来实现,最后选择第二种方案.

HTML代码片段如下:

<div onMouseMove="imgZoomOut(event)" id="smallImgCon">
	<img src="img/airport_small_1.jpg" id="smallImg"/>
	<div id="magnifierCon" style="display:none">
		<img src="img/magnifier.png" id="magnifierBg"/>
		<img src="img/airport_large_1.jpg" id="largeImg"/>
	</div>
</div>

CSS代码片段如下:

#smallImgCon {position:relative;left:0;top:0;}
#magnifierCon {height:276px;width:276px;position:absolute;overflow:hidden;z-index:3}
	#magnifierCon img#magnifierBg {position:absolute;z-index:2}
	#magnifierCon img#largeImg {position:absolute;z-index:1}

第二步:准备好我们需要的信息

我们暂且不去考虑图片大小不定这样一种情况,我们目前可以只针对这其中一张图片.只是放大镜大小固定而已.这里我使用的大小是276*276.
大致思路是可以通过下图来了解:

Step1.得到小图所在位置,即坐标,并将其做为原点.
Step2.得到鼠标当前所在位置,这里是指相对于原点的,所以需要减去上一步得到的坐标值.
Step3.有了这个距离,再减去放大镜长宽的一半就得到了放大镜的坐标.即它相对于原点的距离.
Step4.关键一步大图如何定位呢?
这里需要注意的是这几个容器的层级关系:最外层容器是爷爷,放大镜与小图同是兄弟俩,大图是孙子(哈哈~~不是骂人哈)
说白了就是将光标与原点之间的距离*缩放比例=相对应的大图坐标
再减去放大镜宽高一半就得到了超出放大镜的那段距离 也就是大图相对于其父级容器(放大镜)的距离.将这两个值的赋给大图的left,top就基本搞定了~~
大家晕不?呵呵 我都有点儿晕了…思路及表达能力有待进一步提高

那么按照以上步骤写代码吧:
主要代码如下

	var smallImgCon = document.getElementById("smallImgCon");
	var smallImg = document.getElementById("smallImg");
	var magnifierCon = document.getElementById("magnifierCon");
	var magnifierBg = document.getElementById("magnifierBg");
	var largeImg = document.getElementById("largeImg");

	function imgZoomOut(event) {

		//Step 1得到小图位置,即原点.
		smallImgConLocationX = smallImgCon.offsetLeft;
		smallImgConLocationY = smallImgCon.offsetTop;

		//Step2.得到光标相对于原点的坐标值.
		x = event.clientX - smallImgConLocationX;
		y = event.clientY - smallImgConLocationY;

		//Step3.放大镜相对于原点的距离.
		magnifierCon.style.left = x - magnifierWidth/2 + "px";
		magnifierCon.style.top = y - magnifierHeight/2 + "px";

		//Step4.大图定位
		x = - x*(largeImgWidth/smallImgWidth) + magnifierWidth/2;
		y = - y*(largeImgWidth/smallImgWidth) + magnifierHeight/2;

		largeImg.style.left = x + "px";
		largeImg.style.top = y + "px";

	}

写到这里基本结构有了,但还有一些问题需要考虑:

1. 鼠标移到图像外面了怎么办?
2. 如何动态得到各个元素的大小,便于将来扩展呢?

于是我们要添加另外两个函数跟一个条件判断:

	function getImageSize(imageEl) {
		var i = new Image();
		i.src = imageEl.src;
		return new Array(i.width, i.height);
	}
	function dispear() {
		magnifierCon.style.display = "none";
	}
	if ( x < 0 || x > smallImgWidth || y < 0 || y > smallImgHeight) {
		dispear();
	}else {
		...
	}

最终效果演示
小提示:大小图最后比例差别大些 这样效果更好更明显~
再次强调,因为是初学,所以代码还有很多地方需要优化,再小的功能也要不断完善,倔倔会在学习中不断完善之前的练习~希望大家能多多帮助倔倔~~:)

知识点总结:

1. 函数之间的调用
2. 数组的定义
3. 鼠标事件的概念

下期预告:图片浏览+放大镜

在windows下要运行安装根目录下的vimtutor.bat.打开的文件默认就是一个副本,所以你可以尽情地在上面练习修改.

倔倔现在就要开始练习啦~哈

…

过了一遍vimtutor确实感觉不错~,好多命令都非常吸引人,我已经感觉到了熟练使用了这些命令后,编写代码时会有多么惊人的效率了~~

教程中每讲小结如下:

熟悉Linux的同学应该对Vim很了解,也清楚它的神通广大~可我一做前端爱设计的人对这东西根本没接触.所以接下来的介绍依然是为那些同类的朋友们准备的.很简单,我也尽量将步骤说得详细些~

先记住它是一个编辑器其它的先不用管,马上开始!

安装

了解之前咱得先看看这东西长什么样儿. Download Vim for Win

不用修改什么,一直Next下去就成~除非你要改安装路径跟选择语言.

中文手册安装

这种编辑器的命令忒多,看英文的手册头疼,下个中文的吧.这里

下载之后运行,安装成功后重启Vim,启动界面是中文了,可是菜单上的中文却成了乱码.google之后发现一篇文章,修改后问题解决

配色方案设置及保存

但这次修改明白了Vim的用户设置基本都可以通过在_vimrc这个文件里修改添加

于是修改了配色方案,如果不在_vimrc文件里设置的话,下次打开Vim又会还原到最初始状态.

找到 Vim 官方百科 按照这篇文章 顺便将字体跟大小也一起改了

我目前选用的是Consolas:h14

效果如下:

在Vim下安装zen coding

这里包含了所有安装zen-coding的信息.

如果想了解什么是zen-coding可以参看这里

最后阅读中文手册,练习了一些最基本的操作命令(多了也记不住哈哈).目前感觉很不错~

以后会慢慢熟悉Vim,希望自己能快快进步~大家共勉~:)

最近各种刺激扑面而来,叫我怎能不好好学习?在坨坨同学的指导下 我开始了”又”一次的Javascript之旅~(之所以说”又”是因为07年自己买下了《Javascript高级程序设计》,现在想来真不知道当时自己怎么了….好在是本好书~银子没白花)

先做几个很简单的实例,把自己学习的兴趣提起来.这点很重要.

声明:本人可以说是0基础,所以初学JS的朋友也可以一起学习.高手们可以飘过,多多指导哈

实例一:图片浏览

实现效果:点击”Previous”和”Next” button实现连续几张图片的切换. 很简单吧~

第一步:HTML&CSS

这一步对各位来说应该并不难,不过既然元素少,又是做Demo用的,我们就对自己的要求放松些吧,我说的放松是对于浏览器兼容问题的放松.我们选择HTML5与CSS3.可以暂时不用过多管IE678.(但你可以下载IE9的preview版来看看,也无妨)

主要HTML代码如下:

	<input type="button" id="btn_previous" value="Previous"/>
	<input type="button"  id="btn_next" value="Next"/>
	<ul id="container">
		<li id="pic_1" class="current">
			<img src="../images/demo/pic_1.gif" title="NO.1" alt="NO.1"/>
			<p title="NO.1">NO.1</p>
		</li>
		<li id="pic_2">
			<img src="../images/demo/pic_2.gif" title="NO.2" alt="NO.2"/>
			<p title="NO.2">NO.2</p>
		</li>
		<li id="pic_3">
			<img src="../images/demo/pic_3.gif" title="NO.3" alt="NO.3"/>
			<p title="NO.3">NO.3</p>
		</li>
		<li id="pic_4">
			<img src="../images/demo/pic_4.gif" title="NO.4" alt="NO.4"/>
			<p title="NO.4">NO.4</p>
		</li>
		<li id="pic_5">
			<img src="../images/demo/pic_5.gif" title="NO.5" alt="NO.5"/>
			<p title="NO.5">NO.5</p>
		</li>
	</ul>

第二步:梳理思路

想想需要解决哪几个问题:

1. 怎么知道是显示当前图片的上一张还是下一张?
2. 如何替换当前图片?

好,先解决掉这两个问题事情就好办多了.

1. 我们需要将”向前”和”向后”分别用两个数值来代替,做为参数传给接下来我们要完成的函数,这里用(-1)和(1)来表示.
2. 知道了是向前还是向后之后 我们就要把当前图片隐藏起来,然后显示出它的上一张或者下一张图片.

Ok,那我们就开始吧~

第三步:编写代码

首先我们给函数起个名字,就叫 imgSlider.(也许并不贴切,但以后会改进功能).把要传给这个函数的值取名为n.所以简单写下来函数应该长这个样子:

function imgSlider(n) {

}

然后我们需要一个变量,这个变量用来存储当前显示的是第几张图片,我们先赋一个初始值给它,像这样.

var currentImg = 1;
function imgSlider(n) {

}

为什么要把这个赋值语句写在函数外面呢?(全局变量)因为函数要对这个值做处理,也就是说将来一旦触发了这个函数,currentImg这个值会改变,所以我们将它写在外面.

接下来我们需要得到网页中的几个对象,取得对象的方法是采用document.getElementById(“idname”):

var currentImg = 1;
function imgSlider(n) {
	var currentImgCon = document.getElementById("pic_"+ currentImg);
	var btn_previous = document.getElementById("btn_previous");
	var btn_next = document.getElementById("btn_next");
}

哈哈,现在就到了最关键的步骤了,到目前为至我们还没有用到传进来的参数呢,想想假设现在传进来的是(1),即用户要显示下一张图片的话,我们要做何处理呢?很简单,就是在当前图片基础上+1 显示下一张呗~

var currentImg = 1;
function imgSlider(n) {
	var currentImgCon = document.getElementById("pic_"+ currentImg);
	var btn_previous = document.getElementById("btn_previous");
	var btn_next = document.getElementById("btn_next");
	currentImg = currentImg + n;
	targetImgCon.setAttribute("class","current");
	targetImgCon.className = "current";
}

currentImg加了1后,我们根据currentImg的最新值通过document.getElementById()这个方法找到了我们要显示的那个图片,并且将得到的对象命名为targetImgCon,然后将current这个class加到这个对象上,那么第二张图片就显示出来了.可不要忘记在这之前要先将之前的图片隐藏起来,所以还要对代码要做以下修改

var currentImg = 1;
function imgSlider(n) {
	var currentImgCon = document.getElementById("pic_"+ currentImg);
	var btn_previous = document.getElementById("btn_previous");
	var btn_next = document.getElementById("btn_next");
	currentImgCon.setAttribute("class","");
	currentImgCon.className = "";
	currentImg = currentImg + n;
	var targetImgCon = document.getElementById("pic_"+ currentImg);
	targetImgCon.setAttribute("class","current");
	targetImgCon.className = "current";
}

到此为至主要功能实现了,但完整程度还差好多~.不信可以将事件加到两个button上,如下:

<input type="button" onclick="imgSlider(-1)" id="btn_previous" value="Previous" disabled="disabled"/>
<input type="button" onclick="imgSlider(1)" id="btn_next" value="Next"/>

那么我们还要做什么呢?目前页面中只有5张图片,我们不希望用户一直点击向前向后,那样currentImg数值会越来越大,而执行过程中又取不到数值大于5的图片,会报错.所以现在我们要对临界值做一个判断处理.我们希望只有在1-5这个范围内再做我们以上的那些事情.

var currentImg = 1;
function imgSlider(n) {
	var currentImgCon = document.getElementById("pic_"+ currentImg);
	var btn_previous = document.getElementById("btn_previous");
	var btn_next = document.getElementById("btn_next");
	currentImgCon.setAttribute("class","");
	currentImgCon.className = "";
	currentImg = currentImg + n;
	if (currentImg > 1 || currentImg < 5 ) {
		var targetImgCon = document.getElementById("pic_"+ currentImg);
		targetImgCon.setAttribute("class","current");
		targetImgCon.className = "current";
	}
}

可运行一下,发现到第5张时候再点”Next”就什么都显示不出来了,再点”Previous”也没反应了,为什么呢?我们用input来跟踪下currentImg的数值变化:
在HTML中添加一个input:

<input type="text" value="" id="logger"/>

JavaScript做如下修改:

document.getElementById("logger").value = currentImg;

刷新下页面,点到最后发现currentImg的值是6,超出了1-5这个范围,自然执行不了我们if条件里的语句了.怎么解决这个问题呢,其实很简单,当页面当前显示的是第一张图片时我们就将”Previous”button 屏蔽掉,同理,当页面当前显示的是第5张,也就是最后一张的时候屏蔽掉”Next”button,事情就解决了.其它情况下两个button正常显示~~哈哈

初始的时候就要先将”Previous” button 置为disabled

<input type="button" onclick="imgSlider(-1)" id="btn_previous" value="Previous" disabled="disabled"/>

JavaScript添加如下代码:

if(currentImg == 1) {
	btn_previous.setAttribute("disabled","disabled");
}else {
	btn_previous.removeAttribute("disabled");
}

if(currentImg == 5) {
	btn_next.setAttribute("disabled","disabled");
}else {
	btn_next.removeAttribute("disabled");
}

大功告成~~最终效果

知识点:

1. CSS3 渐变http://www.qianduan.net/understand-the-css3-gradient.html
2. CSS Selector
3. CSS 缩写http://www.qianduan.net/css-font-shorthand-attribute-handbook.html
4. input disabled属性
5. function定义
6. 全局变量定义/初始化
7. document.getElementById(“idName”)
8. setAttribute(“attributeName”,”attributeValue”)
9. removeAttribute(“attributeName”)
10. if else

下期预告:放大镜~~~

什么是Float?

Float是一个CSS定位属性.想要搞懂它的目标跟初衷,我们可以来看看平面印刷设计.在一个平面布局中,图片是可以根据需要被文字环绕的放在页面中.这通常被称为”文字环绕”.如下图所示:

在页面布局中,包含文本的盒子可以让文字换行或者忽略换行.忽略换行就会让文字流向右边就像图片不存在一样.这就是图片是与不是页面中的”流”的区别.网页设计也是相类似的.

在网页设计中,被赋予了CSS Float 属性的页面元素就会像印刷布局中被文字环绕的图片一样.浮动的元素仍是网页流中的一部分.这与使用绝对定位的网页元素有着很大的区别.被绝对定位了的元素是被网页流移除掉的元素,就像印刷布局中被告知忽略页面换行一样.被绝对定位了的元素不会影响其它元素的定位并且其它元素也不会影响它们,不管它们之间是否接触到了.

用CSS设置一个元素为浮动的情况是这样:

#sidebar {
   float: right;
}

这里有四种浮动值.Left和Right将元素分别向这两个方向浮动.None(默认值)确使元素不会浮动,Inherit会使元素继承父级元素的浮动值.

浮动元素用来做什么?

除了让文字围绕在图片周围的例子,浮动元素还可以用来产生整体网页布局.

在一些小规模的布局中浮动也是非常有帮助的.看一下网页中的这个小区域.如果你在我们的小头像图片上应用浮动,当图片改变大小时盒子中的文字也会相应的调整流向.

也可以使用容器相对定位而头像绝对定位来完成相同的布局.这种做法,文字将不会受头像影响并且也不会根据大小改变而重新调整流向.

清除浮动

浮动的姊妹属性是clear.一个被赋予了clear属性的元素将不会向上移动到浮动元素的旁边,但它会将自身向下移动以越过浮动元素.拿出一个实例比文字说明更直观.

在上面这个例子中,侧边栏被浮动到了右边而且比Main Content的高度要矮.于是Footer就被要求跳上来补足由浮动元素产生的空间.要解决这个问题,footer可以被设为clear来确保它在所有浮动的列之下.

#footer {
   clear:both;
}

Clear也有四个可用值.Both是最常用的,用来清除来自各个方向的浮动元素.Left和Right分别来用清除各自方向上的浮动.None是默认值,通常来讲是无用的除非是要将样式中的clear值去掉的情况下才用.Inherit是第五个属性值,但它在IE中几乎不被支持.只清除左边或只清除右边浮动看似没有被广泛使用,但它的确有用武之地.

伟大的断裂

在运用浮动元素的过程中一件很令人费解的事情就是如何让它们去影响包含它们的容器(它们的”父级”容器).如果一个元素除了包含浮动元素不包含其它元素的话,它的高度将是0.如果父级容器没有明显可见的背景色时,这一点通常是不明显的,但它又是必须要注意的很重要的一点.

与这种直觉上的反差相比更糟糕的是考虑以下情况:

如果上面这个块级元素自动扩展以适应浮动元素的话,那么我们就会在段落之间的文本流中得到一个不自然的空隙,也没有特别有效的解决方法.在这种情况下设计师们会非常抱怨,这比我们对断裂做出处理更加让人痛苦.

断裂通常需要做些处理用以阻止产生奇怪的布局和一些跨浏览器兼容问题.我们在浮动元素之后父级容器之前来清除浮动.

几种清除浮动的方法

如果你所处的情况是你总是知道随后而来的元素是什么,那么你可以给元素的clear属性设置为both,然后继续做你的事情.这是理想情况,不需要任何虚假的hack技术跟多余的元素而是完全符合语义的.当然事情总不会按照这种方式进行并且在我们的工具箱中需要更多清除浮动的工具.

• 空div方法:顾名思义,一个空的div.<div style=”clear: both;”></div>.有时你会看到一个<br/>元素或者其它不常见的元素,但是div是最常用的一个,因为浏览器没有赋予它默认样式,也没有特别功能,一般不太可能被冠以通用CSS样式.这种方法不受语义纯粹主义者的重视是因为它对于页面没有任何实际内容跟语义仅仅是为了显示.当然从严格的角度来讲它们是正确的,可是它起到了自己应该起到的作用也没有伤害到其它任何人.
• overflow方法:需要给父级容器设置overflow属性.如果父级容器被设为auto或者hidden,那么容器就会自动扩展去包容里面的浮动元素,实际上是为了它之后的元素清除浮动的.然后如果你发现自己新加了一个div仅仅是为了应用这一点属性,那么这就跟加一个空div是一样缺少语义的了,同样是很难被接受的.需要记住的是overflow属性并不仅仅是为了清除浮动.小心不要隐藏了内容或者触发了不想要的滚动条.
• 简单清除方法:使用CSS伪类选择器(:after)去清除浮动.你需要添加一个类似”clearfix”的class来解决这个问题,而不是在父级容器上设置overflow属性.然后应用这样的CSS:

.clearfix:after {
   content:".";
   visibility:hidden;
   display:block;
   height:0;
   clear:both;
}

不同的情况需要用不同的清除浮动的方法.看下面这个网格结构块,每一个都不同类型.

为了视觉中更好的展示相似块,我们想要按照我们的意愿插入新的一行,这里是指按颜色差异.如果第一组都有一个父级容器的话我们可以就用overflow或者是简易清除方法.又或者我们在每一组之间使用空div方法.三个之前本来不存在的换行div还是三个后加的div.我将交给你来决定哪一种更好.

浮动产生的问题

浮动通常是因为很脆弱而被击败.它主要的脆弱表现是来自于IE6和大量存在的与浮动相关的bug.因为越来越多的设计师们放弃支持IE6了,你可能也不关心了,但是对于那些还很关心的朋友们这里还是有一些快速解决的方法.

• 下推:是指一个浮动元素里面的元素比本身浮动的元素宽(特别是图片).大部分浏览器会将图片渲染在浮动元素外面,但是没有影响其它部分的布局.IE则会扩大浮动元素去包含图片,而破坏了布局.一个常见的例子就是main content里的图片过宽而将侧边栏推到下面了.
  
  快速解决:确定你没有任何这样的图片,使用overflow:hidden来切掉多余部分.
• 双边距Bug-在解决IE6问题上另外一个需要注意的就是如果你给一个浮动元素在浮动方面加了一个外边距的话,就会产生双边距.
  快速解决:给浮动元素设置为display:inline,并且不用担心,它仍然还是一个块级元素.
• 3像素是指当文字紧挨着一个被浮动的元素时就会被一种强大的外边像外踢3像素.快速解决:给文字设一个宽度或者一个高度.
• 当在IE7中,底部外边距Bug是如果一个浮动的父级容器里还有一个浮动的子元素,这些子元素的底部外边距就被父级窗容器忽略掉了.
  快速解决:快速解决:用父级容器的底部内边距代替.

其它

如果你需要文字环绕那些图片的话,没有比浮动更适合的了.谈到这,可以参看更聪明的方法一文,描述如何让文字围绕不规则图形.但对于网页布局,这里确实有几种选择.Eric Sol 在A List Apart上有一篇关于”山寨版绝对定位“的文章,非常有意思地通过多种途径来对比浮动布局的灵活性跟绝对定位的优势.CSS3有布局模板,当它被广泛接受时,就会被证实为网页布局的又一选择.

===============分隔线===============

倔倔总结:

还有一篇小文章也是关于浮动问题的http://css-tricks.com/containers-dont-clear-floats/

近日还将翻译一篇A List Apart上关于block和inline的文章.敬请期待~~同时欢迎大家对于翻译不妥之处进行指正及需要补充的地方进行完善~

知道为什么网页没有想象中很炫的效果吗？因为今天是一年一度的“CSS裸奔节”。

想参与或了解更多，请点击http://naked.webrebuild.org/

最近特别关注一个网站叫”美团“,专注在线团购

是各类web2.0网站的先锋用户？
有自己的blog，写意生活，分享技术？
不能容忍哪怕是一个像素的偏差？
对代码的整洁性有强迫症式的偏执？
对排版、字体、色彩等有超乎寻常的敏感？
准确的知道自己负责的网站加载一个页面有多少次HTTP请求，完成一次请求要花多少时间？
“Every millisecond counts”对你来说意味点什么？
Doug Bowman, Douglas Crockford, Steve Souders等对你来说是如神一般的名字？
以做最NB的前端工程师为长期的职业目标？
曾做过一个一年以上的长期规划并付诸实践？

以上是美团网对于前端开发工程师这一职位提出的10个问题,在投递简历之前需要在邮件中需要先就以上问题给出简单回答.

先不说美团网是模仿也好,抄袭也罢.单从他的招聘信息来看还是给我留下了不错的印象的.看多了那些”基本款”的招聘要求,麻木了.一下子看到这10个问题让我深刻意识到了自己的差距,借以重新思考下自己接下来的努力方向.

其实这些问题只是换了个角度来对一个前端工程师的基本技能做全面考查:

• 是各类web2.0网站的先锋用户？互联网是一个快速发展的产业,如果你跟不上他的脚步,不对自己的行业有足够的了解何以在这个行业立足?
• 有自己的blog，写意生活，分享技术？开发并不是一个闭门造车的职业,需要积累,需要分享,需要成为你生活中的一部分.
• 不能容忍哪怕是一个像素的偏差？态度!像素是我们工作中接触到的最小单位,从小见大.一位优秀的前端工程师的素质就表现在此
• 对代码的整洁性有强迫症式的偏执？这一点更不用多说了,开发者的基本要求.写出的代码一定要漂亮
• 对排版、字体、色彩等有超乎寻常的敏感？对于美食不敏感的厨师不是好裁缝!
• 准确的知道自己负责的网站加载一个页面有多少次HTTP请求，完成一次请求要花多少时间？对你的用户负责,对你的代码负责.
• “Every millisecond counts”对你来说意味点什么？明白用户最关心什么.做到这一点,在同行业中的优势就多出了一大截.赢得了更用的用户!
• Doug Bowman, Douglas Crockford, Steve Souders等对你来说是如神一般的名字？Follow the steps of the winners, you will get what they have and even more.
• 以做最NB的前端工程师为长期的职业目标？对于自己的职业有清晰坚定的目标,想要长期从事前端开发才有可能做出更好的成绩
• 曾做过一个一年以上的长期规划并付诸实践？情商的考验,现代人的普遍特别:浮躁,缺乏毅力!无法实现自己既定的目标又如何完成好自己的工作?只能靠奴性了……

这并不是我对于10个问题的回答,而是表面上的分析.提高自己的过程中当然不只是要针对这10个问题,技术的发展,互联网时代的变迁,对于前端工程师会有更多的要求.

其它要求体现在工作职责上:

1. 积极寻求改进美团网的各种可能的思路和方案；
2. 对美团网在用户浏览器端的最终视觉呈现负责；
3. 使用HTML/CSS/Javascript开发符合W3C标准的网站前端页面；
4. 和后台工程师一起研讨技术实现方案，制定服务接口等；
5. 积极探索并总结美团网前端开发模式和规范

美团们?

2010年3月4号 饭否创始人王兴宣布美团网正式上线,上线以来就受到了不小的业内行外的关注,大家对于国内这种”Copy”模式已经见怪不怪了.

美团们上场(网友们收集的):

• http://www.meituan.com/ 每天团购一次，精品消费指南
• http://www.lashou.com/ 拉手团购打折，全球首家结合Groupon和Foursquare的团购打折网站
• http://www.mydingo.com.cn/ 丁狗网，每天团购一次
• http://24qiang.com/ 每天24小时只卖一件超低价商品
• http://www.ftuan.com/ 爱赴团，中国第一精品消费限时团购网站
• http://www.55tuan.com 窝窝团，北京最热团购
• http://www.manzuo.com/ 满座网，聪明消费每一天
• http://www.taobao.com/go/act/other/juhuasuan1.php 淘江湖，聚划算
• http://www.masamaso.com/group_buy.php masamaso精品购物团
• http://www.zuitu.com/ 最土网，精品团购每一天

有些真的把我雷倒了….送给团们的一篇文章美团网们，Groupon有风险，Copy须谨慎

最新消息:Groupon.cn登陆中国了,这个算是正牌吧

Groupon!

放下美团,来看groupon,真的是让人有些兴奋:兴奋的原因是Groupon真的是好玩又简单.它带给用户跟商家的好处十分明显直接.相当佩服Andrew Mason啊.

这里分享两篇相关分析文章,很全面的分析的groupon的商务模式:

向左走，向右走？本地化+精品模式 vs 全国市场+长尾模式

相信这篇文章能引起国人对于此现象的一些思考

想知道什么?我们都告诉你

(以下分析从groupon的发家之地:chicago为例)

groupon在与用户互动上也做了不少文章,这些是目前国内团们还没有做起来的地方:

1.商品旁边放置用户讨论内容提要(国团们只有**团答疑)

参加团购的消费者们最相信的就是跟他们同一立场的朋友对于商品的评价与讨论,当你看到当日推出的团购商品时会第一时间想要了解其它朋友的看法与讨论.

2.商品下方列出消费者使用后的评论,客观,真实.

3.在groupon消费过的忠实用户反馈的信息你一定更加感兴趣吧

经常回来看看啊

以上这些小地方还不足以提升信任度,更多的回访率还需要更加长久的关注用户反馈与互动:

1.明天卖什么?

2.开设专门的社区

3.举办photo contest

4.具有诱惑力的奖金

We will choose one person to attempt to survive for one year with nothing but a laptop, cellphone, and an unlimited supply of Groupons. If successful, that person will receive $100,000!

够有挑战性的~~刺激!

来Groupon,往这儿看

groupon在视觉引导上做得比较出色,射线背景一下子将用户的眼球吸引过来,硕大的标题,醒目的价格,明显的折扣数字等等都能引起消费者的购买欲望.

加之提供了来自各个方面的用户信息,评价,反馈.让购买变得又简单又好玩.色彩上的搭配,布局上的安排也合理,简单.每个页面都有一个明确清晰的主题.因为本身模式就简单明了,所以用户的门槛特别低.有着丰富的网上消费经验的用户一定觉得此流程并不繁琐.带来的是快速愉悦的购物体验.

简单合理布局的表单设计也让用户感觉舒服,采用的眼动分析中跳转次数较少的上label下field的方式.

以上这些国内的这些团们还没有快速copy过来,相信其中的一部分团会陆续学起来的.

另外对于groupon在手机上的应用恐怕国人一时很难学得起来,毕竟是要受到其它条件影响的 那就是iphone App

做足了这些,商家也会不请自来的借此方式宣传自己的商品,折扣的部分全当广告费用了,不但开销少,产生的效应却很大.从此groupon进入一个相对稳定的循环中.但我相信它的创始人不会仅限于此,还会在此基础上发倔更大更好的市场及模式.这也是在发展快速的互联网中的生存之道之一.毕竟目前看来这种模式还是比较容易被模仿的.

最后

一个看似简单的网站,要想成功也是需要诸多方面的因素.首先是绝佳的创意模式,优秀的技术支持,出色的市场运作,高效的团队执行,不断的思考改进等等等等.

而国内就缺少这类团队.希望更多的这样的创业队伍出现.让国内的互联网真正健康快速的发展.开发流程的规范,分工的明确,技术的跟进都是大家非常期待的.也需要大家一起努力去营造这样一个理解环境.

PS.面对国内这么多团们,我还是会每天上美团看一眼,没办法,这种每天只推出一种商品的模式对用户的好奇心有很大的影响力:)

淘宝首页使用的文档类型声明是HTML5的写法,而且这种写法在IE6,IE7上的兼容性了不错.只是偶尔会出现些小问题.根据这张对照表可以了解到各个浏览器对于各个文档声明的详细渲染情况.

<button>标签与<input type=”button”/>的区别

在研究淘宝注册页面的时候发现它的注册表单提交按钮是用的<button></button>这个标签,平时工作中我从来没用过这个标签,甚至一时怀疑这是不是W3C标准推荐使用的合理标签.Google一下大致了一些了解:

简单总结区别有以下几点

1. 如果用在表单里<button></button>不会自动提交表单数据,只会默认提交标签里的图像或文本信息,而<input type=”button”/>则会直接提交表单数据,使用起来很方便.所以在HTML的表单当中推荐使用input.
2. 写法上button是成对的闭合标签,里面可以直接包含图片或文本(其它标签不合理,热点地图是不合法的),而input只能将文本写在value的属性值里.
3. 从可操控性上来看button要比input更丰富些 具体可参看Button元素/button对象

Axure RP 5.6

昨天在网上下了汉化包,用起来方便多了,因为功能实在是太多了,呵呵.看了一些教程了解了一些基本功能.希望能在公司网站前端优化的同时借机会熟悉下这个软件.它最吸引我的功能是对于模板的管理.

主要是视觉零件与模板结构.这对于代码的重用性和维护性都是一个相当不错的工具. 接下来再要学习的就是交互原型的实现方法了. 当然它还有其它更多优秀的功能,比如流程图,导出HTML演示demo等等.

Gzip

之前对于Gzip一直有个不小的误解,或者说是学习时的粗心.在用firebug查看页面元素时发现所有图片都没有Gzip. 仔细看过http://developer.yahoo.com/performance/rules.html#gzip才知道原因. 原来图片等这些多媒体文件在传输过程中已经是压缩过的了,如果再压缩会对CPU造成很大压力.所以在发布产品时只对HTML Doc, CSS, JavaScript文件进行Gzip压缩.效果非常明显.

今天就到这里~~

PS.Zen-Coding是真好用.不过一些更方便的语法还没了解到 现在只会写最简单的,以后会越用越熟练~

PPS.最近发现许蒿的歌不错 跟之前后弦的风格很像~~

PPPS.某人真好~竟然将自己一半的年假分给我~估计这不管是在什么样的公司都很少见吧~~哈哈!

最近经常看到关于zen-coding的文章,没太在意.今天有空瞄了一眼,看了相关视频,发现真是一个不错的前端开发工具.就试着装到了eclipse里.配好了快捷键还没进一步研究文档.以后一定多多利用,提高效率.不得不佩服老外,只用javascript就搞定了.

Axure RP Pro 5.6

一款经常用于产品开发初期制作原型,制定各类组件的软件.功能强大,便于产品设计经理与其它部门人员沟通.(序列号可以在网上搜到)

最后是一篇文章Nicholas C. Zakas谈怎样才能成为优秀的前端工程师

HTML跟XHTML什么关系?它们之间有什么区别,都说HTML要向XML过渡,可现在又推出了HTML5?为什么要向XML过渡,它有什么好?XHTML2.0又为什么中途夭折了呢?以前上学时老师说过:带着问题学习是一个很好的自学方法~哈哈

HTML

先说说我们熟悉的HTML吧,它是一种可以告诉浏览器如何显示内容的语言.发展的历史可以参看http://zh.wikipedia.org/wiki/HTML

HTML是一个松散结构的标记语言,其中包含的标签大致分以下四种:

1. 文档标记(document markup): <h1></h1> <p></p>
2. 表示性元素(presentational element):<b></b> <s></s>
3. 短语元素(phrase element):<acronym></acronym>
4. 图像和其它媒体(images&media element):<img/>

从它包含的众多标签看来,它是一个相对较弱的规则,将数据的结构,表现都混在一起,没有很强的语义. 与XML相比差别很大.

所以在HTML最初的几个版本开发中,并没有成为W3C推荐的标准,直到2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准.

XML是互联网用来传输数据一个很理想的语言(稍后解释),但是让浏览器支持很难,所以在这过程当中就要一步步慢慢过渡. XHTML出现了.

XHTML

1、什么是XHTML？

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。

2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。下面是W3C的HTML工作组主席Steven Pemberton回答的关于XHTML的常见基础问题。

问：什么是XHTML?

答：XHTML是一种为适应XML而重新改造的HTML。当XML越来越成为一种趋势，就出现了这样一个问题：如果我们有了XML，我们是否依然需要HTML?为了回答这个问题，1998年5月我们在旧金山开了两天的工作会议，会议的结论是：需要。我们依然需要使用HTML。因为大量的人们已经习惯使用HTML来作为他们的设计语言，而且，已经有数以百万计的页面是采用HTML编写的。

问：为什么XHTML 1.0相对HTML 4.0独立发展?

答：并不是这样。XHTML恰恰就是HTML 4.0的重新组织，(确切的说它是HTML 4.01，是一个修正版本的HTML 4.0，只不过以XHTML 1.0命名发行。) 它们在XML里的解释会有一些必要的差别，但另一方面，它们依然非常相似，我们可以把XHTML的工作看作是HTML 4.0基础上的延续。
问：XHTML 1.0如何实现XML标准?

答：XHTML就是一种XML应用。它采用XML的DTD文件格式定义，并运行在支持XML的系统上。这里要感谢XML的Namespaces功能，浏览器制造商不需要再创造新的私有标签(tags)，他们只需要在XHTML代码里包含XML代码片段，或者XML代码里包含XHTML代码片段。

2、与HTML相比XHTML有什么特点？

（1）XHTML解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存在三个主要缺点：不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML；由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML；数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML过度的一个桥梁。
（2）XML是web发展的趋势，所以人们急切的希望加入XML的潮流中。XHTML是当前替代HTML4标记语言的标准，使用XHTML 1.0，只要你小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，你可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到XML。
（3）使用XHTML的另一个优势是：它非常严密。当前网络上的HTML的糟糕情况让人震惊，早期的浏览器接受私有的HTML标签，所以人们在页面设计完毕后必须使用各种浏览器来检测页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览器。
（4）XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。
（5）XHTML是Web标准家族的一部分，能很好在无线设备等其它用户代理上。
（6）在网站设计方面，XHTML可助你去掉表现层代码的恶习，帮助你养成标记校验来测试页面工作的习惯。

看到这里,我就更加好奇为什么大家都拼了命的要向XML过渡了,到底XML有什么好呢?试着弄清楚些,但也许不是很深刻.

XML

可扩展置标语言（eXtensible Markup Language，简称XML），又称可扩展标记语言，是一种置标语言。置标指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种信息的文章等。如何定义这些标记，既可以选择国际通用的标记语言，比如HTML，也可以使用像XML这样由相关人士自由决定的标记语言，这就是语言的可扩展性。XML是从标准通用置标语言（SGML）中简化修改出来的。它主要用到的有可扩展置标语言、可扩展样式语言（XSL）、XPath等。

XML设计目的用来传送及携带数据信息，XML不用来表现或展示数据，HTML语言恰恰用来表现数据，所以XML用途的焦点是它说明数据是什么，以及携带数据信息。

更多深入的了解我会在以后慢慢学习,不想跑题太远呵呵.

在向XML迈进的过程中并不那么理想,比如XHMTL2.0中途夭折了,HTML5草案公布了. 之前我并没有关注这些东西,最近一看还真有点儿糊涂.现在整理整理

XHMTL1.0让编码者的编码方式进一步规范了,这是好事.但XHTML2.0的宣告终止让大家有点迷惑了,但牛人们可以理解,因为XHTML2.0有点儿过了.

当万维网联盟（World Wide Web Consortium (W3C)）于 2002 年 8 月 5 日发布 XHTML 2.0 的第一个工作草案时， 最让人吃惊的是：与其先前的版本不同，它不是向后兼容的。 对于先前的发行版，如从 HTML 4.01 转到 XHTML 1.0 以及后来从 XHTML 1.0 到 XTHML 1.1，变化都是添加一些内容； 可以读取 XHTML 1.0（过渡的）文档的浏览器也可以理解 HTML 4.01 文档。而 XHTML 2.0 不是那样的。

HTML5

XHTML2.0终止了,但HTML5却让大家又激动了一次.

HTML 5提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似<div>和<span>标签，但有一个含义，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如<audio>和<video>标记。^[3]

一些过时的HTML 4标记将取消。其中包括纯粹显示效果的标记，如<font>和<center>，因为它们已经被CSS取代。还有一些透过DOM的网络行为。

预计HTML5会在2022年正式公布,到时候我们的下一代都会打酱油了…..

以上是对于HTML发展历史的简单了解~