分类目录归档：前端开发

淘宝前端技术系列课程

发表于 2012/04/13 由 前端开发-武方博  435 views

今天是第一堂课，由灵玉主讲的“淘宝前端技术巡礼”。全面回顾淘宝前端技术的缘起和发展，介绍前端工程师的职业发展路线，给出足够多的铺垫，为接下来的三次课程打好基础。 淘宝前端技术的发展一定程度上反应了中国国情，前端工程师的入门、入道过程是非常坎坷也是备受关注，尽管大学里还缺少“前端技术”这门专业，但前端技术的知识体系已然趋于丰富和完善，前端技术本身就是一门充满挑战的行当，不断的从实践中提炼出一支支各具特色的技术派系，当下的前端技术也呈现出多元绚丽、独具魅力的一面。（本次课程ppt参考了部分小马和玉伯的分享） 本次系列课程即是由浅入深的介绍前端技术的关键部分，后续对HTML/CSS/JavaScript、包括浏览器渲染过程和JS引擎原理、常用工具等知识会有更详细的讲解。 http://www.slideshare.net/lijing00333/ss-12323405 本次课为系列课程的第二课，由舒克带来的“HTML/CSS/JavaScript”基础知识，课程中着重介绍了HTML的语义......查看更多>>

发表在 前端开发 | 标签为 , , | 留下评论

基于多栏列表的瀑布流布局

发表于 2012/03/25 由 前端开发-武方博  928 views

一、开篇无关紧要的话 今天四处闲逛，看到迅雷UEDxwei兄写了篇名为“浅谈个人在瀑布流网页的实现中遇到的问题和解决方法(http://www.wufangbo.com/pubuliufangfa/)”的文章，我两只沉沉的萝卜眼顿时放出无数闪亮的小星星。 倒不是文章本身，而是可以用来制作demo的图片资源啊，啊咔咔（得瑟中……）！！ 因此，本文即将展示的demo中的图片都有迅雷UED提供，这里先郑重感谢。 二、稍稍要紧的话 跟风，尤其受pinterest的煽风点火，瀑布流现在不少人关注。我正好最近比较闲，加上有人曾在我站点提出希望我介绍点瀑布流的东西，所以，今儿个也随下大流。 pinterest以及上面迅雷UED xwei的瀑布流demo（至少在FireFox下还是有致命的显示bug的）都是采用的绝对定位实现的，有相对复杂的位置计算。 我一向不喜欢吃别人嚼过的米饭，于是尝试使用另外的原理实现。我是个流体布局控，对绝对定位啊、浮动啊什么的一向没什么好感，于是，这里要介绍的就是基于多栏列表流体......查看更多>>

发表在 前端开发 | 标签为 , , , | 2 条评论

浅谈个人在瀑布流网页的实现中遇到的问题和解决方法

发表于 2012/03/25 由 前端开发-武方博  621 views

先上Demo js实现瀑布流排序 :http://www.wufangbo.com/demo/javascript/04/index.html js实现瀑布流无限向下拖动效果:http://www.wufangbo.com/demo/javascript/05/index.html 随着pinterest的走红，瀑布流式的布局被越来越多的网站所使用，这种布局确实有很多好处，图片列表页有很强大的视觉感染力，而且还提高了用户“发现好图”的效率。瀑布流的实现有很多种方式，之前淘宝UED有篇文章详细的介绍过各种方式的优劣。今天我们主要讨论一下绝对排序来实现瀑布流的方式 即 Pinterest 采用的方式。 首先说下瀑布流的排序算法，参考demo1，思路非常简单，我们把瀑布流拆成三个部分来看：容器、列、格子 1.先计算当前屏幕最多能容纳几列瀑布，其值为 “向下取整(屏幕可见区域宽度/(格子宽度+间距))”; 2.为了保证容器的居中，将容器的宽度设置为 列数* (格子宽度+间距) – 间距，这里需要注意的是 当容器的宽度计算出来之后再显示，否则会造成页面宽度的抖动，......查看更多>>

发表在 前端开发 | 标签为 , , , | 留下评论

Web前端开发面临的挑战主要有哪些？【整理版】

发表于 2012/02/27 由 前端开发-武方博  416 views

曹刘阳，盛大的web工程师 1) css和dom提供的接口都太low level了，而BOM提供的控件只有input、select、textarea这几种最基本的，稍复杂一点的UI效果，都要前端自己利用css和dom去组合创造。看到一个需求，脑子里第一步要想如何利用css、dom这些基本的零件组合成最终的这个效果，实现最终效果其实是一个“创造”的过程，比如说tabView,treeView,richEditor,colorPicker这种看起来常见的组件,其实在前端里都是没有现成可用的，需要自己去实现。 2) 前端语言的胶水性需求太强。css、dom、js是三种不同的技术，这也是前端知识系统中要掌握的最重要的三个基本功。server端编程当然也会需要不同方向的知识，比如php、sql等，但server端编程大部分时间只用专注在某一个知识点上，只要必要时粘一下其它语言。但前端不同，前端的效果是通过css、dom和js三者配合起来最终呈现出来的，脱了任何一个技术都寸步难行，时刻要同时考虑多个方向的知识点。这么说吧，server端编......查看更多>>

发表在 前端开发 | 标签为 , , | 一条评论

浏览器渲染原理

发表于 2012/02/16 由 前端开发-武方博  272 views

Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的： 1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件； 2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件； 3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件； 4. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了； 5. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码； 6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码； 7. 浏览器发现了一......查看更多>>

发表在 前端开发 | 标签为 , , , , | 一条评论

IE6、7中display:inline-block的测试

发表于 2012/02/16 由 前端开发-武方博  559 views

通常我们想让内联元素为行块布局显示，有2种方法，最常见的是方法是.selector {display:block;float:left;……}，第二种方法是.selector {display:inline-block;……}，对于第二种方法，在IE浏览器中得到支持，测试结果会认为IE能识别display:inline-block属性，而最近查阅了资料后，得到结果并非如此…… display:inline-block ，简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。这个属性目在主要浏览器的新版本中得到良好的支持，而IE6、7浏览器并不识别display:inline-block属性，之所以IE6、7中内联元素设置了display:inline-block后成行块布局，是因为display:inline-block触发了内联级别的元素的 layout 特性，使内联元素具有inline-block的表症。 关于IE haslayout，《什么是IE的haslayout》中有详细介绍，本文简单介绍haslayout的2个重要知识点： IE6、7中内联元素（如span）触发layout属性后，......查看更多>>

发表在 前端开发 | 标签为 , , | 留下评论

兼容IE与火狐 谷歌的css 线性渐变

发表于 2012/02/16 由 前端开发-武方博  235 views

IE系列  filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=’#FF0000′,endColorStr=’#F9F900′,gradientType=’0′); 参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平 Firefox background: -moz-linear-gradient(top, #FF0000, #F9F900); 参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变 Opera background: -o-linear-gradient(top,#FF0000, #F9F900); 参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变 webkit，如Chrome、Safari等  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); 参数：linear线性， x1 x2, x3 x4 x1与x3相同时垂直，x2与x4相同时水平 from起始......查看更多>>

发表在 前端开发 | 标签为 , | 留下评论

两个js实现瀑布流布局的方法

发表于 2012/02/04 由 前端开发-武方博  2,467 views

最近几个月突然流行一种布局方式——瀑布流。 比如最早的 Pinterest，然后国内的33号铺，Mark之，蘑菇街，还有Qzone的好友相册，以及淘宝最新上线的“哇哦” 等等，都是采用这种布局方法。 兼容性较强的实现方法有两种，taobaoUED有介绍： N列布局方法 绝对定位方法 推荐使用绝对定位方法，那么如何使用绝对定位呢？有两个js库值得推荐。 masonry KISSY的Waterfall组件 masonry提供的定位参数更多，包括流式布局、居中、图片lazyload、jQuery动画、在瀑布流中定位一个区域（放广告）等。 KISSY更轻便，而且还多了一个专门异步加载的class。 二者各有所长，根据自己的需要选择一个即可，用法也很简单，看看API和demo就可以了。 查看更多>>

发表在 前端开发 | 标签为 , , , | 4 条评论

【顶】Web开发入门不得不看

发表于 2012/01/15 由 前端开发-武方博  519 views

引 如今，各种互联网的Web应用程序层出不穷，那么如何快速入门，成长为一个优秀的Web开发工作者呢？ 这个问题不容易回答，几乎所有的培训机构都不能清晰地解答。 所以对于Web开发刚刚入门的菜鸟们，我觉得只有通过去做，去实验，学会Web开发，可能是学着学着，实验着实验着就会了。 没有人告诉你如何去做。我学习的时候，我的导师只是给了我一堆视频，一堆文档。我们从明确一个目标开始：“哦，这个阶段，我要独立完成一个简单的Web应用程序，例如新闻发布系统”。 或许学会如何开发Web应用程序只是在完成这个Web应用程序过程中产生的副产品而已。你可以管它叫项目驱动，也可以认为这只是学习任何语言的一个非常有效的方法。       一、分析与设计 无论做一个传统的桌面应用程序，还是做一个Web应用程序，前期的分析与设计是不可避免的。 分析：需求分析，你必须了解你要做的是什么，你的客户到底想要的是什么，在做新闻发布系统的时候，我就......查看更多>>

发表在 前端开发 | 标签为 , , , , , , , , | 留下评论

几种常见的浏览器页面跳转

发表于 2012/01/15 由 前端开发-武方博  321 views

1.链接 <a href=”">…</a> 2.表单提交数据 3.meta标签 <meta http-equiv=”refresh” content=”3;url=www.xxx.com”> 4.javascript:history.back();    javascript:history.forward(); 5.response.sendRedirect(“a.jsp”); 6.response.setHeader(“refresh”,”3;url=3.jsp”) 查看更多>>

发表在 前端开发 | 标签为 , | 留下评论

哈哈 设计开发的百度音乐应用通过审核上线啦

发表于 2012/01/11 由 前端开发-武方博  537 views

最近几天做了一个百度搜索里面的应用，还是用jplayer制作的，现在这个播放器用的好熟练啦，哈哈 界面可谓是随心所欲的设计，实现起来都很简单！ 哈哈 百度搜索歌曲和歌手的应用提交通过了 可是功能在百度的几次审核只中也被砍的差不多了，登录也不让登录了，还必须用百度的帐户登录，最后只好把登录和收藏功能给去掉了！所幸最后通过了！ 感觉js制作的播放器虽然界面没有flash开发的那么炫，但是功能都一样，很实用！   哈哈 jplayer设计制作的音乐电台 功能很简单 歌曲推荐算法完善中   jplayer设计制作的音乐播放器 太单调了 都是测试版本的   查看更多>>

发表在 前端开发 | 标签为 , , , | 3 条评论

系列集合-页面重构中的模块化设计-CSS森林 【极力推荐看完】

发表于 2012/01/11 由 前端开发-武方博  380 views

样式的作用域──页面重构中的模块化设计（一）   很久没有更新blog了，这段时间实在是发生了很多的事，累身累心。但还是有很多想做的事，比如更新merceCSS、把一直以来所总结的有关模 块化的内容整理出来跟大家分享、参加交流会等等。 模块化设计我已经提过很多了，像《 从宜家的家具设计讲模块化 》、《 页面重构中的模块化思维 》、《 页面重构中的组件制作 要点 》都是跟模块化相关的，不过之前一直没有讲到具体实现方面的内容，只是一些思维。这次重点讲一下实现方面的内容，权当到目前为止我对模块化的一些总结整 理。 要做好模块化，我觉得理解好样式的作用域是很重要的，所以将这部分作为这个系列的第一篇。 写过程序的同学应该都知道，变量是有作用域的（不知道的同学自己去问谷歌，这里就不作解释了），样式的定义也同样存在着作用域的问题，即定义的作 用范围，很容易就能理解，如下面的p的作用域： /*作用域：全局*/ p{text-inden......查看更多>>

发表在 前端开发 | 标签为 , , , , | 留下评论

两年前收藏的一些前端学习资料地址

发表于 2012/01/11 由 前端开发-武方博  324 views

1：杭州淘宝开源项目  kissy            http://kissy.googlecode.com/svn/trunk/docs/index.html 2：北京雅虎淘宝团队开源项目 Cubee Cubee包含一套基于yui3的widget控件库 Cubee项目最初源自淘宝北京UED的一个团队项目，包含常见的团队开发解决方案 Cubee给出一套css/js框架思路，开发者可以方便对其进行扩展和二次开发 http://cubee.github.com/doc/ 3：淘宝DPL  http://assets.taobaocdn.com/tbra/dpl/ 4：http://directguo.com/html5/#slide1 谷歌工程师做的html5的展示 5：经典的js 插件目录 http://code.js.cn/demo/ 6：提供丰富多彩的jquery和CSS样式效果 http://www.5ihtml.com/ 查看更多>>

发表在 前端开发 | 标签为 , , | 留下评论

如何采集腾讯QQ空间装扮商城皮肤图片

发表于 2012/01/10 由 前端开发-武方博  494 views

最近制作点歌传情系统，需要用到大图背景的底图，哈哈 我立马就想到了QQ空间里面的皮肤。 打算让同事去采集他们图片的时候发现了一个问题，图片路径规则里面就有分类，有图片id，就是有一个字段没有在json里面传回来，后来查看QQ空间的js发现他们使用了一个小伎俩，用js小小的加密了一下。哈哈 折腾了一会算是知道规则了，剩下的就是抓取了！ 查看更多>>

发表在 前端开发 | 标签为 , | 一条评论

JS 图片预加载技术[转]

发表于 2011/12/20 由 前端开发-武方博  542 views

项目开发中时常需要用 JS 判断一张图片是否加载成功， 如果图片加载成功，则执行其相应的 onload 绑定事件， 这个就是我们所说的图片预加载技术，先上最终版代码： function loadImage(url, callback) { var img = new Image(); img.onload = function () { img.onload = null; callback(img); } img.src = url; } 经测试发现 IE6、IE7、IE8： 如果图片已经存于浏览器缓存中，那么再次对该图片发起请求时， 浏览器就会直接从缓存中加载，这样就无法触发其 onload 事件。   而在 IE9、Chrome、FireFox： 无论图片是否存于浏览器缓存中，都会触发其 onload 事件。 所以上述代码中我们先要为 img 绑定 onload 事件，再为其赋值 src 地址！ 更多参考文献： 再谈javascript图片预加载技术 关于图片的预加载,你所不知道的 查看更多>>

发表在 javascript, 前端开发 | 标签为 , , , | 留下评论
第 1 页，共 4 页1234