分类: 前端开发

前端技术包括JavaScript、ActionScript、CSS、xHTML等“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等等。根据该词可以做这样的理解,用互联网来做比喻,凡是通过浏览器到用户端计算机的统称为前端技术.相反存贮于服务器端的统称为后端技术。

jQuery Mobile 入门教程

你每天都会对着它讲话,和它玩游戏,用它看新闻——没错,它就是你裤兜里的智能手机。android,黑莓还是iphone?为了让你清楚意识到究竟哪些才算是智能手机,我在下面总结了一个智能手机系统/设备的列表:

  • Apple iPhone/iPod Touch
  • Google Android
  • RIM BlackBerry/Playbook OS
  • Nokia Symbian (我承认它该退休了,可是在世界范围内它仍然拥有10亿以上的用户)
  • HP/Palm WebOS
  • Microsoft Window Phone 7

没错,这令人眼花缭乱的众多智能手机系统对 HTML标准支离破碎的支持,直接导致了处理这些系统浏览器的兼容性成为了你最大的挑战。举例来说,苹果的iphone对HTML5标准有着很好的支持, 然而Symbian和Microsoft Phone系列却几乎不支持HTML5的任何特性(译注:准确的说,是windows mobile系列,目前的windows phone 7对HTML5支持很好)。jQuery社区为了在解决兼容性和高效创建移动web站点做了大量努力,并开发了jQueryMobile这个移动框架。而本文旨在为读者介绍仍在alpha版本阶段的jQueryMobile框架(译注:目前jQueryMobile已经为beta2版本)的开发基础知识和技巧。

更多

自适应网页设计(Responsive Web Design)

随着3G的普及,越来越多的人使用手机上网。

移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?

更多

5173首页前端性能优化实践

从制定计划,到前后端的开发,最后到测试以及上线,历时4个月,5173首页前端性能优化项目终于顺利上线,并达到了预期的性能优化目标。这次的项目并不是改版,而是原来首页的设计和功能不变,只做重构和优化。虽然项目名叫前端的性能优化,但也并不仅仅是前端单方面的工作,要想彻底的把优化做好,还是需要前后端的通力配合。

历史背景

老首页应该是09年上线的,首页也是各部门争夺资源的地方,大家都想在首页有一席之地,各部门在首页都有各自的小豆腐块,如果有新项目的上线,大多是打补丁的方式,并且唯一的规范就是能保证功能正常运行,至于性能方面,那是很遥远的事。苦逼的是开发人员,每次有首页的修改都是担惊受怕的,怕改了这个那个又出问题,历史原因造成的问题越来越多。

最先看不下去的应该是前端人员,因为首页在不断的修修补补中,性能已经差到前端人员觉得很没面子的地步了。但是看不下去也仅仅是看不下去,没法采取实质性的措施来改善,因为这牵涉到各部门的利益,也如上面说的,优化不仅仅在于前端,于是前端人员也只能向上面反映问题。到了今年,终于领导也看不下去了,某领导在海外访问我司的8185173首页,对比起来前者首页很快(插播一句,818首页前端开发人员也正是我^_^),后者首页很慢,差别较大。于是在领导重视的推动下,5173首页的前端性能优化项目才经过批准,开发人员终于可以放手大胆的折腾了。

更多

图片的宽度自适应,限制图片最大宽度,css和js实现

from http://iseexn.noads.biz/archives/178.html

图片的自适应问题普遍存在,下面分别是js和css的实现方法提供参考:

第一种js方法:以前用过js来自适应,图片的onload事件加入调节图片大小的js代码,onload=”MyImage(this,870,1000)”,缺点是需要指定限定的宽、高,需要计算得到缩放后的宽高,图片会先显示原图片再变小。

第二种css方法:css方法简单方便,完全能取代上面的方法。有个现象我是后来才发现,图片在限制了宽度后,高度会等比例缩放,如原来是800*600的图片,宽度被限制成400后,高度会自动缩到300,这样的话就是只要限定图片的宽度就可以了。由于ie6不识别max-width,所以要使用expression来进行css hack。WordPress里面可以用下面的css来实现图片自适应:
.post .content img {
margin:15px 0 0 0;
max-width:590px;
_width:expression(this.width>590?’590px’:’auto’);
}

上面的css是限制图片最大宽度的,其实限制图片最大高度是同理的。

更多

页面前端的水有多深?

但凡从事互联网的人基本都会写几行 html,用过 Word 的人用 Dreamweaver 也能做出规整的页面,所以大部分人会很自然地认为“页面的开发没什么技术含量,很简单”。不仅有这种普遍的认知,对从业者来说也有很多疑惑:做页面前端实现,没问题;兼容性,小 case;图片集成,一直都在用……还能有什么问题?瓶颈啊、天花板啊、转型啊、出路啊就在从业者中广泛讨论。是不是真的没什么问题了呢?网易邮箱前端技术中心也设立好几年了,似乎有着讨论不完的话题,也经常会有一些新的想法让大家为之一振。那么页面开发还有哪些要求,还要做些什么,这里面的水有多深,让我们舀舀看。

在不同的时期对页面前端的看法似乎是多变的。在互联网早期的时候,小车还是比房子贵的,烧饼和粉丝还只是用来吃的,菊花还只是用来泡茶的。那时的页面设计风格相对单一,对应的页面需求比较简单,并且当时的浏览器也基本是 IE6 的天下,javascript 也只是网页特效的代名词,HTML 页面本身没有引起太多人的关注,似乎只要能用 div 甚至 table 加 css 辅助把图片定好位,把页面内容预留好就 OK 了,并且这种观念存在了很长一段时间。随着页面内容的丰富,设计风格的发展,交互复杂性的增加,AJAX 的应用,浏览器的更新换代,又让大家重新对最基本的页面本身重视起来。然后热议的就是浏览器的兼容性,碰到问题最热衷的就是满网络搜索 hack,顺便再骂骂 IE6、7……当这些都做一遍后,似乎又遇到了瓶颈,又开始寻找出路。我们就从这个阶段开始说起。

更多

CSS Hack浏览器兼容IE6+IE7+IE8+IE9+FF

本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象
HACK原理:不同浏览器对各中字符的识别不同 (读完文章你会发现,FF和IE8对以下字符的识别能力完全相同)

在 CSS中常用特殊字符识别表:

(1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;

(2)!important: 除IE6不能识别 !important外, FF+IE8+IE7都能识别!important ;

(3)_ : 除IE6支持_ 外, FF+IE8+IE7都不支持_;

(4)\9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)

更多

JS控制图片显示的大小(图片等比例缩放)

方法一:

<script type=”text/javascript”>
function ResizeImages()
{
var myimg,oldwidth;
var maxwidth=200;
for(i=0;i<document.images.length;i++){ myimg = document.images[i]; if(myimg.width > maxwidth)
{
oldwidth = myimg.width;
myimg.width = maxwidth;
myimg.height = myimg.height * (maxwidth/oldwidth);
}
}
}
ResizeImages();
</script>

更多