分类目录 ‘前端开发’

5从根本上改变了开发商开发Web应用的方式,从桌面浏览器到移动应用,这种语言和标准都正在影响并将继续影响着各种操作平台。

在移动领域,大家争论不休的一个问题就是开发Web应用还是原生应用?而随着HTML 5标准的发展,两者之间的差异已经逐渐变得模糊,今天各大媒体都争相报道与HTML 5有关的东西,那么,HTML 5未来的发展趋势到底是什么?

1) 移动优先

前天,appMobi获选ReadWriterWeb2012最具前途的的公司,作为一家初创公司,这个奖公司首先专注于在移动平台上如何实现HTML 5的简单易用和无处不在。

从如今层出不穷的移动应用就知道,在这个智能手机和将平板电脑大爆炸的时代,移动优先已成趋势,不管是开发什么,都以移动为主。

如上文所说,此前一直困扰移动领域的问题就是开发Web应用还是原生应用。而如今,我们看见一些大型企业如《金融时报》在冲着HTM L5进军移动市场过程中,从App Store撤掉iPad原生应用而开发Web应用,同样表现出色。

许多游戏开发商也将在移动Web应用中扮演中重要角色,移动Web应用优先的趋势将会持续到移动设备统治信息处理领域。其实用户根本不在乎你用什么工具开发了什么应用,不管是Web应用还是原生应用,只要好用就可以了。
(全文 …)

开发者需要经常更新他们的知识,学习新的技术,如果他们还想继续在 开发领域混并混得还不错的话。下面将为你展示 7 项新的 开发技术,作为一个 开发人员,你需要了解、熟悉并学会的技术。

1、CSS3 media queries

目前,大量智能手机设备的涌现,同时各种不同尺寸屏幕的设备,如平板电脑之类的出现,对 Web 开发带来了前所未有的挑战,如何让 Web 页面能适应各种尺寸的屏幕让很多 Web 开发人员相当的纠结。幸运的是 CSS3 规范可帮我们轻松的解决此事,你可以根据不同尺寸的屏幕定义不同的 CSS 样式。

例如,下面的代码只在屏幕显示区域大小为 767px 的时候才有效:

    @media screen and (max-width:767px){
        #container{
            width:320px;
        }   

        header h1#logo a{
            width:320px;
            height:44px;
            background:url(image-small.jpg) no-repeat 0 0;
        }                             

    }


(全文 …)

优秀的Stoyan Stefanov在他的新书中(《 Patterns》)介绍了很多编写高质量代码的技巧,比如避免使用全局变量,使用单一的var关键字,循环式预存长度等等。

这篇文章不仅仅从代码本身来考虑如何优化编码,也从代码的设计阶段来考虑,包括书写API文档,同事的review,使用JSLint。这些习惯都 能帮助你编写更加高质量的、更易于理解的、可维护的代码(让你的代码在多年之后仍使你引以为傲)。

编写可维护的代码
软件的BUG修复需要花费大量的精力。尤其当代码已经发布之后,随着时间的增长,维护的成本愈发的高。当你一发现BUG的 时候,就立即去修复,这时候你的代码还是热乎的,你也不需要回忆,因为就是刚刚写好的。但是当你做了其他任务,几乎完全忘记了这份代码,这时候就需要:

重新学习和理解问题
理解代码是如何解决问题的
另外一个问题是,在大项目或者大公司里面,经常是解决BUG的人不是产生BUG的 人,而且也不是发现BUG的人。所以减少理解代码的时间就是最重要的问题,无论这个代码是你自己以前写的还是团队中的其他成员写的,因为我们都想去搞搞新 的有意思的东西,而不是去维护那些个陈旧的代码。
(全文 …)

如今,构建网站和开发Web应用程序已经不仅要求开发人员是一名优秀的程序员,更需要聪明的程序员。这也就是说,在可能的情况下,重复使用已有的代 码和应用程序,而不是自己重头开始。开源由来已久,并且很多网站的构建也使用了开源。开发人员都知道Linux、Apache、MySQL及 PHP (LAMP)。 但是除那些之外的其他开源项目呢?作为一名Web开发人员,你可以借助诸多可用的项目,以节省开发时间,或提高程序性能。

下面让我们看一下哪些开源项目可供大家免费使用。

可供使用的新型数据库

传统上讲,你可能习惯使用MySQL。尽管MySQL是一个非常棒的数据库,但诸多试图解决MySQL存在的问题的新型数据库已经问世。

1. MongoDB

MongoDB就是的“非关系型”数据库之一。它扩展性强、性能高。

2. Apache Cassandra

与MongoDB相似,Apache Cassandra也是一种“非关系型”数据库,它亦扩展性强、性能高。并且能够很好地处理庞大而活跃的数据集。(编注:Facebook用 Cassandra来做邮箱搜索。)
(全文 …)

Firebug对于Web开发人员来说,已经成为了不可或缺的工具,但是在我日常的工作中,常常感觉还没有能够深刻的挖掘出她的潜力,今天花了点时间仔细研究了Console和命令行的使用在提高工作效率方面的作用,
记下来和大家分享一下.

Firebug一共有Console,,CSS,Script,DOM,NET六个Tab,今天着重说一下Console的用法。

其实我们对于Console应该非常熟悉,因为这里是Firebug给出各种信息的窗口,而这也正是Console的主要用途,日志记录(Logging)。
除此之外,Console还提供了通过命令行方式来调试Javascript的方法。下面就来学习一下Console的用法。

1、Firefox的日志记录(Logging in Firefox)。

通过Console的记录方法,我们可以不再使用烦人的alert或者document.write方法来进行调试。
Firebug提供了五种日志的类型:

console.log: 记录一行信息,无任何图标提示; console.debug:记录一行信息,带超链接,可以链接到语句调用的地方; console.error():向控制台中写入错误信息,带错误图标显示和高亮代码链接; console.info():向控制台中写入提示信息,带信息图标显示和高亮代码链接; console.warn():向控制台中写入警告信息,带警告图标显示和高亮代码链接;
(全文 …)

有不少wBox的用户反映iframe时候不可以自动撑开高度,今天在无意中看到了司徒正美的一片关于iframe自适用高度的js代码,感觉不错,转载来了。

var adjustIframe = function (id) {
    var iframe = document.getElementById(id)
    var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;
    var callback = function () {
        var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight); //取得其高
        iframe.style.height = iheight + "px";
    }
    if (iframe.attachEvent) {
        iframe.attachEvent("onload", callback);
    } else {
        iframe.onload = callback
    }
}

(全文 …)

在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?

同源策略

在客户端编程语言中,如javascript和 ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的,一个域的脚 本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.example.org),那么我们就可以认为它们是相同的域。比如 http://www.example.org/index.html和http://www.example.org/sub/index.html是同域,而http://www.example.org, https://www.example.org, http://www.example.org:8080, http://sub.example.org中的任何两个都将构成跨域。同源策略还应该对一些特殊情况做处理,比如限制file协议下脚本的访问权限。 本地的HTML文件在浏览器中是通过file协议打开的,如果脚本能通过file协议访问到硬盘上其它任意文件,就会出现安全隐患,目前IE8还有这样的 隐患。
(全文 …)

用户界面设计在持续的基础上不断成长和演变。要跟上时代,你需要关注趋势、新资源和正被实施和谈论的新技术。同时,你也要亲身尝试,并提出原创的见解和应用。下面列举的这些工具能帮你做到这些。尽情分享下面这些我找到的注释出的资源中你认为有用的部分。

看看这些其他人已经想出的对一般用户界面挑战的解决方案,它不仅能帮助你找到正确的现有解决方案,还能作为你提出新的和原创的东西的基础。

一个在线文字和图形目录是常见解决的UI设计问题的方案。使用非常宽松的分类,同时也让你用标签或颜色分类:

Pattern Tap

一个能找到平常被使用的设计模板精神的好资源。Pattern Tap将UI元素分类集合,同时也将个别项目以标签形式在新窗口打开:
(全文 …)

HTML中的IE条件注释

作者: seasun

IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解。比如普通的HTML注释是:

<!--This is a comment-->

而只有IE可读的IE条件注释是:

<!--[if ]> <![endif]-->

“非IE条件注释”:

<!--[if !IE]>--> non-IE  Code <!--<![endif]-->

“非特定版本IE条件注释”(很少用到):

<!--[if ! lt IE 7]><![IGNORE[--><![IGNORE[]]>Code for browsers that match the if condition<!--<![endif]-->

简而言之,除了“Windows上的IE”之外的所有浏览器都会认为条件注释只是一段普通的HTML注释。你不能在CSS代码中使用条件注释。IE 条件注释是很有用的对IE隐藏或者展现特定代码的方法,比起在CSS中用诡异的_/制造bug,利用IE条件注释来写CSS “hacks”是更合理的方法。通俗点,条件注释就是一些if判断,但这些判断不是在脚本里执行的,而是直接在html代码里执行的。
(全文 …)

jQuery越来越流行,也就越来越多的开发者制作各种各样的jQuery插件。它们当中的一些非常的酷,例如之前介绍的“2010年最佳jQuery插件”和现在有介绍的10个给力的jQuery图片插件

jquery image 9

如果你也想让你的博客上的图片让人眼前一亮,不妨试试WDL博客推荐的10个jQuery图片插件。
(全文 …)