分类目录归档:HTML

HTML技术文章

Html5 属性浏览器速查

网址:http://caniuse.com/#index

Html5属性支持

Html5属性支持

该网站提供了非常丰富的H5以及各种新型浏览器API,并且能够在网站上快速搜索某一属性在各个浏览器以及设备上的支持情况。
例如:搜索GEOLOCATION属性的支持。

Html5属性支持

Html5属性支持

这样极大的方便了日常H5开发的浏览器支持一览,如果需要支持低端浏览器,可以在重构HTML之前就查询相应的支持,从而判断如何使用降级版本处理方案。

tabs复习(jQuery)

已经不记得是多久没有写过了,最近的状态还不错,因为各种考试的缘故,很多技术文章都是看了,没有往上面写。在亚马逊购了一些H5,CSS3以及移动互联网开发的书,等驾照考过之后就又要开启学习模式了。

今天闲来无聊,也就把jQuery里面的几个点复习了一边,写了一个小DEMO。复习点是jQuery的自定义事件。

直接帖代码上来了。

jQuery.fn.tabs = function (control) {
    var element = $(this);
    control = $(control);
    //初始化完毕

    element.delegate("li", "click", function () {
        //找到需要修改的目标
        var tabName = $(this).attr("data-tab");
        //点击选项卡触发自定义事件
        element.trigger("change.tabs", tabName);
    });

    element.bind("change.tabs", function (e, tabname) {
        element.find("li").removeClass("active");
        element.find(">[data-tab='" + tabname + "']").addClass("active");
    });

    element.bind("change.tabs", function (e, tabname) {
        control.find(">[data-tab]").removeClass("active");
        control.find(">[data-tab='" + tabname + "']").addClass("active");
    });

    var firstName = element.find("li:first").attr("data-tab");
    element.trigger("change.tabs",firstName);

    return this;
}

自定义事件在日常的WEB开发中是非常常见的功能,用于封装自有组件定义自有API。实在是居家旅行,开发面试必备技能。

关于前端开发用户体验上的一些唠叨

不管做什么东西,现在基本上一开口就是要求用户体验。说的多了,耳朵也腻。在我心目中良好的设计肯定是很少使用图片的,为啥?不光节约了HTTP请求,压缩了文件尺寸,最重要的是在界面渲染上使用纯CSS肯定比图片要来得快啊。但是 IE 对CSS3高级属性的支持一直是前端开发工程师的痛。所以我也有了以下的一些疑惑。

  1. 是否还需要考虑的浏览器?
    IE6 已经很老了,应该到了退休的年龄了。但是也许公司的 BOSS 或者客户使用浏览器的时候可能还是老式的 IE6 ,我个人已经开始厌倦了对 IE6 的 BUG 修复了,慢慢杜绝开始兼容 IE6 。比如,一个元素看上去有圆角,有阴影,支持 CSS2 伪类等,为了这些表现层的东西而写一大段的 CSS HACK 或者 JavaScript 脚本。很显然不值得。当然,也并不是完全没有任何底线。底线就是,不影响用户正常的功能使用
  2. 视觉设计和前端的关系其实真的很暧昧
    为什么 TAOBAO,BAIDU,SINA等都会要求界面设计师懂 HTML,CSS 代码。曾经我和设计师争论过这个问题,这里我提出我自己的观点。一个页面最重要的展示元素是 “内容” ?。那么到底是 “内容驱动设计的布局” 还是 “设计驱动内容布局” 很明显的我趋向于前者。当然,我的理解也许过于片面的追求HTML “良构” 了,一开始用 HTML 所谓的法则限制了视觉上的设计,也许就扼杀了设计师的设计思维。一开始又设计师直接设计,也许会为了刻意的追求一些效果而写了大量冗余的 HTML 代码。并且还要使用大量的 CSS 去渲染,似乎也得不偿失。我想一线公司要求懂 HTML,CSS 的原因也就是希望设计师能够在界面实现的风险上面有一个大概的权重了解吧。
  3. 体验的终极目标
    用户体验是什么,良好的界面布局设计?精心设计的圆角和阴影效果?很炫的 JavaScript 脚本特效?清晰的界面结构分割?No!No!No!这些东西的基础都是建立在速度的基础上的。0.1秒的系统会让人感觉很愉悦,1秒的系统会让人感觉开始有点停顿,知道计算机在处理数据,而10秒的系统,用户则会直接关闭浏览器。为了靠近 0.1 秒的目标,我个人觉得设计UI的时候都应该都尝试使用纯 CSS 和 HTML 用弱性衰减的原则去设计为主是最好的方案。其实用纯色来设计用户界面不是也挺好么。?当然,这又回到了上面需要讨论的问题了。一个好的设计师是否要掌握HTML,CSS ?

好了。准备下班,回家睡觉,继续学习我的 Python.

2010年总结

又过了一年,又老了一岁,我的开发也迈入了第四年.在过去的一年里,收获不少.找到了一个适合自己的team.并且在前端技术上又精进了不少.

在 HTML 上,对界面的要求更加语义化.对结构的把握有了新的理解.对于HTML5技术有了初步的认识和了解.

在CSS上,通过多个项目使用 Css Sprites .在构图的经验上有所提升.对 IMG 的结构优化有了一定程度的增长.

综合技术,在前端的设计上看了应该有1000+以上的网站,对欧美风格的网站特别推崇,对韩国网站在色彩的应用上有了初步的感知.在用户易用性和界面结构上面开始有了初步的认识.前端框架中新研究了GWT.在EXTJS的应用上有了更加深层次的掌握.

进步比较大的前端性能优化.包括G-Zip压缩,合并背景图片,Script Loader技术,图片优化技术,Apache与Tomcat整合,Google Apache自动优化模块的应用(能够优化客户端缓存,图片缓存,本地缓存,连接数优化,最大并发优化等…)

新年新计划:

今年的主要研究:

  1. JavaScript高级应用以及如何编写高效的JavaScript.
    去年一年没有写过多少行 JavaScript 主要都放在了 html,css,前端性能提上,所以今年一定要全部补回来.
  2. 掌握 Python 语言,并且要求作出一个小 mis 系统.
    Java 对与web应用以及框架的掌握已经达到了一个开发级别,没有想法继续研究下去了.转向自己喜爱的动态语言阵营.
  3. 使用 html5,css3 制作一个支持 iPad ,IPhone 的小型网站.
    对新型技术的应用.
  4. 研究 Dojo 框架.
    在 IBM 以及各个论坛上介绍了 Dojo 在企业应用的优越性.并且相对 Ext 这样对客户端有一定要求的框架,Dojo,Gwt这中框架更加的 fast.对Comet技术,IO的优化非常好,如果能伴随新的 tomcat7,Jetty 服务器以及 Java Servlet 3.0 在前端的使用上会有新的飞跃.

今年,刚开年我收获了我人生第一份至宝,我亲爱的女朋友终于和我一起去民政局打了标签回来了,以后填表的时候终于可以勾 “已婚” 了.????? ^_^?????? 希望正式升级为老婆的她能够一辈子健康.

HTML5用户指南 读后感

相对国内的书而言,这本书应该也算走在前列了吧.书中的内容介绍得多而全.如:

  • 新标签的语义以及使用环境
  • CSS样式化
  • 在什么环境下使用新的标签
  • 介绍 html5 为什么要以内容为主并且放弃了验证
  • 新型HTML5元素在浏览器中的应用
  • 新媒体,视频,音频
  • 画布
  • 数据存储 ( 比较感兴趣的是 web sql 的应用)
  • 如何构建离线程序
  • 拖放功能以及数据的传递
  • 如何获得自己的坐标(mobile 应用)
  • Message,Worker,Socket 的实现

给我的感觉就是作者有丰富的开发经验,并且对HTML在未来的应用充满了憧憬,的确也是,读完本书,我个人也觉得HTML5在未来 MOBILE 平台上肯定会大放异彩,当然也不排除传统的 WEB 应用在 RIA 方面的升华.作者结合了日常开发中的小例子,给读者小片的CODE并且对应用的案例进行一些简单的分析,留给读者发挥的空间.代码写得都是通俗易懂,没有特别难以理解的代码片段.基本上都是属于新API的调用.当然,这些例子也是点到即止,如果想对某章节深入研究的读者可能会失望了.

总的来说: 专业,简单,内容丰富且生动是我对这本书的评价.适合所有WEB前端开发人员.如果相对HTML5有一个基础的了解,这本书还算一个不错的选择.

[A188N+.Q] HTML5设计原理 —— Jeremy Keith在 Fronteers 2010 上的主题演讲

导读:“大多数人的意见和运行的代码”,Jeremy Keith的讲演站在开发者的角度娓娓道来Web真谛。围绕Html5的设计,探讨从规范的制定者、浏览器开发商再到开发者在标准制定上的逐步优先。作者旁征博引,引人入胜。很久没读到如此令我激动的文章了,不得不Copy一份。

——Jeremy Keith在 Fronteers 2010 上的主题演讲

本文原文来自:adactio.com/articles/1704/
译文取自:为之漫笔,最后更新于:14:29 2010/11/07
使用本文请遵循?Creative Commons attribution licence (CC-By 3.0)

今天我想跟大家谈一谈HTML5的设计。主要分两个方面:一方面,当然了,就是HTML5。我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范。

实际上,确实有人会谈到规范的内容。史蒂夫·福克纳(Steve Faulkner)会讲HTML5与可访问性。而保罗·艾里什(Paul Irish)则会讲HTML5提供的各种API。因此,我今天站在这里,不会光讲一讲HTML5就算完事了。

说老实话,在正式开始之前,我想先交待清楚我所说的HTML5到底是什么意思。这话听起来有点搞笑:这会子你一直在说HTML5,难道我们还不知道什么是HTML5吗?大家知道,有一个规范,它的名字叫HTML5。我所说的HTML5,指的就是这个规范。但问题是,有些人所说的HTML5,指的不仅仅是这个规范,还有别的意思。比如说,用HTML5来代指CSS3就是一种常见的叫法。我可不是这样的。我所说的HTML5,不包含CSS3,就是HTML5。

类似的术语问题以前也有过。Ajax本来是一种含义明确的技术,但过了不久,它的含义就变成了“用JavaScript来做一切好玩的东西”。这就是Ajax,对不对?今天,HTML5也面临同样的问题,它本来指的是一个特定的规范,但如今含义却成了“在Web上做一切好玩的事。”我说的不是这种HTML5,不是这种涵盖了最近刚刚出现的各种新东东的HTML5。我说的仅仅是规范本身:HTML5。

刚才已经说了,我今天想要讲的内容不多,也没有打算介绍HTML5都包含什么。今天我要讲的是它的另一方面,即HTML5的设计。换句话说,我要讲的不是规范里都包含什么,而是规范里为什么会包含它们,以及在设计这个规范的时候,设计者们是怎么看待这些东西的。

设计原理

设计原理本质上是一种信念、一种想法、一个概念,是你行动的支柱。不管你是制定规范,还是制造一种有形的物品,或者编写软件,甚至发明编程语言。你都能找到背后的一个或者多个设计原理,多人协作的任何成果都是例证。不仅仅Web开发领域是这样。纵观人类历史,像国家和社会这样大规模的构建活动背后,同样也有设计原理。

就拿美国为例吧,美国的设计原理都写在了《独立宣言》中了。

我们认为这些真理是不言而喻的,人人生而平等,造物主赋予了每个人不可剥夺的权利,包括生存、自由和追求幸福。

这里有一句口号:生存、自由和追求幸福。这是被写进宪法中的核心理念,它关系到我们所有人的一切,也就是我们构建自己社会的原则。

还有一个例子,就是卡尔·马克思(Karl Marx),他的著作在20世纪曾被奉为建设社会主义的圭臬。其基本思想大致可以归结为下面这条设计原理:

各尽所能,各取所需。

这其实就是一种经济体系背后的设计原理。

还有一个例子,比前面两个的历史更久远一些,不过大同小异:

人人为我,我为人人。 继续阅读

2010 Web前端技术趋势及总结(转载)

为了推广前端技术的发展,发现一偏不错的文章,特意和大家共享一下.原文地址是:http://www.cnblogs.com/pandora/archive/2010/12/12/1904032.html

经过这段时间国内(百度,淘宝,新浪)及国外(Facebook,Youtube,Yahoo)各大公司的集中自曝,我们可以从中总结出2010 Web前端技术的一些趋势。总的来说,随着后端技术(存储,并发,分布式)的成熟,各大公司已经把重点从后端架构调整/建设转移至前端(TTI时间,快速发布,带宽利用率)。但作为明星技术的HTML5/CSS3,都未正式成为各公司的考虑重心,虽有所尝试,但在关键功能上,均未成为主力。这也W3C对当前HTML5/CSS3标准现状的表述:“不适宜用作生产环境”一致。

基本概念

Web前端技术的范围

1. 编程语言/技术(HTML,JavaScript,CSS等) 继续阅读

HTML元信息标记(meat)

MEAT位于<head></head>间

<meat?name=”author”?content=”网页内容”>

<meat>标记属性:name是描述网页的,对应与content以便与搜索引擎机器人的查找,分类(目前几乎所有搜索引擎都使用网上机器人自动查找meat值来给网页分类)

<meat?name=”keywords”??content=”关键字内容”>

name=keywords代表关键字,当在搜索引擎总输入相关主题就会搜到本网站,关键字输入不要过多,应切中要害,关键字之间用逗号分割。 继续阅读