Skip to content


QQREADER46B16E53C862D4FB

QQREADER46B16E53C862D4FB


mobile web前端重构介绍(wap2.0)

http://neten.cn/mobile/mobilewebrebuildintroduce2.ppt

一、Mobile web发展历史

二、手机平台

三、手机屏幕分辨率

四、手机浏览器

五、测试工具

六、语言选择

七、Mobile web现况

八、测试结果分享

九、Mobile web2.0展望


Html5应用大聚合

一、视频播放

现在网页上流行的在线播放视频基本都是以flash格式呈现的,多年使用下来,flash已经成为网民生活的一部分了。所以当苹果宣布在移动设备平台上与Flash划清界线后,很多人都会无法理解。当然,是好是坏就不在这评论啦,直接讲重点,下面就带大家看看如果不用FLASH,单用HTML5的应用,在线视频可以在网页上表现成什么样子吧。

这个应用叫“sublimeVideo”,通过它,你会看到与FALSH效果一样的在线视频播放。

演示地址:http://jilion.com/sublime/video

二、在线画板

在线画板也不算是什么新鲜的东西,但以前的画板多半是用flash来实现,而基于HTML5技术制作的在线画板又可以做成怎么样呢?可以看看下面的演示地址。

演示地址:http://mugtug.com/sketchpad/

三、可拖动的交互
    HTML页面一直给我的印像都是很静态的,像以下的画面:
    如果这里作为一款小游戏,需要你按先后顺序把右边选框内的答案扔到左边的垃圾桶里,正常做法只能点击每个选框进行选择,比较生硬。一般的解决方法我们会利用FLASH来做出可拖动的效果,把答案拖进垃圾桶内,使这个过程更加生动。不过现在通过HTML5应用也可以实现拖动的效果。

演示地址:http://html5demos.com/drag

四、按标准解析SWF动画文件
    虽然看了以上几个例子会觉得HTML5已经可以完成之前需要flash才能实现的效果,但其实网站还是很需要FLASH的帮助,起码个人觉得短时间内不可能取代。
    现在通过一个叫“Gordon”的应用,可以把SWF文件在HTML5的环竟中按照标准的Flash动画模式播放出来。而且在浏览的时候完全不需要Flash插件,这个应用号称:An open source Flash runtime, 利用JS+SVG技术实现的Flash运行环境。

演示地址:http://paulirish.com/work/gordon/demos/

http://www.benjoffe.com/code/games/torus/  html5游戏应用


浏览器Quirksmode(怪异模式)与CSScompat

由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同。在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为Compatibility Mode);由于W3C标准的推出,浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode),这就是二者最简单的区别。

W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页还能继续浏览,在标准出来以前,很多页面都是根据旧的渲染方法编写的,如果用的标准来渲染,将导致页面显示异常。为保持浏览器渲染的兼容性,使以前的页面能够正常浏览,浏览器都保留了旧的渲染方法(如:微软的IE)。这样浏览器渲染上就产生了Quircks mode和Standars mode,两种渲染方法共存在一个浏览器上。

那么浏览器究竟该采用哪种模式渲染呢?这就引出的DTD,既是网页的头部声明,浏览器会通过识别DTD而采用相对应的渲染模式:

1. 浏览器要使老旧的网页正常工作,但这部分网页是没有doctype声明的,所以浏览器对没有doctype声明的网页采用quirks mode解析。
2. 对于拥有doctype声明的网页,什么浏览器采用何种模式解析,这里有一张详细列表可参考:http://hsivonen.iki.fi/doctype/
3. 对于拥有doctype声明的网页,这里有几条简单的规则可用于判断:对于那些浏览器不能识别的doctype声明,浏览器采用strict mode解析
4. 在doctype声明中,没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本所有的浏览器都是使用quirks mode呈现,其他的则使用strict mode解析。
5. 可以这么说,在现有有doctype声明的网页,绝大多数是采用strict mode进行解析的。
6. 在ie6中,如果在doctype声明前有一个xml声明(比如:),则采用quirks mode解析。这条规则在ie7中已经移除了。

Quirks mode和Standars mode最大的不同就是提现在对盒模式的解释上,这也是我们在js里要注意的地方。
什么是盒模式? 这是针对块级元素说的,说白了就是把块级元素想像成一个装东西的盒子,而margin,padding,border,width这些css属性构成了盒模式。

在Standars mode中:

元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

在Quirks mode中:

width则是元素的实际宽度,内容宽度 = width – (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

1. 内联元素 ,例如|等,定义上下边界不会影响到行高(line-height),内联元素距离上一行元素的距离由行高决定,而不是填充或边界。
2. 内联元素(display: inline) 内联元素不需要在新行内显示,而且也不强迫其后的元素换行,如a|em|span等都为内联元素。内联元素可以为任何其他元素的子元素。
3. 浮动元素(无论左或者右浮动)边界不压缩 ,且若浮动元素不声明宽度,则其宽度趋向于0,即压缩到其内容能承受的最小宽度。
4. 如果盒中没有内容,则即使定义了宽度和高度都为100%,实际上只占0% ,因此不会被显示,此点在采取层布局的时候需特别注意。
5. 边界值可为负,其显示效果各浏览器可能不相同。
6. 填充值不可为负。
7. 边框默认的样式(border-style)为不显示(none)。

在js中如何判断当前浏览器正在以何种方式解析?
document对象有个属性compatMode ,它有两个值:

BackCompat 对应quirks mode
CSS1Compat 对应strict mode

各浏览器的兼容性表,可以查看PPK的网站:

http://www.quirksmode.org/compatibility.html


盖洛普Q12

1.我知道公司对我的工作要求吗?

  2.我有做好我的工作所需要的材料和设备吗?

  3.在工作中,我每天都有机会做我最擅长做的事吗?

  4.在过去的六天里,我因工作出色而受到表扬吗?

  5.我觉得我的主管或同事关心我的个人情况吗?

  6.工作单位有人鼓励我的发展吗?

  7.在工作中,我觉得我的意见受到重视吗?

  8.公司的使命目标使我觉得我的工作重要吗?

  9.我的同事们致力于高质量的工作吗?

  10.我在工作单位有一个最要好的朋友吗?

  11.在过去的六个月内,工作单位有人和我谈及我的进步吗?

  12.过去一年里,我在工作中有机会学习和成长吗?


无线精彩,有你更精彩,聘!

WEB/wap 前端开发工程师
地点:深圳/北京
•计算机专业或相关专业大学本科以上学历,一年以上工作经验, 有wap开发经验者优先考虑
•具有很好的口头和书目的表达和沟通的能力;
•对符合web标准的网站构建有丰富经验,有成功案例,精通结构化语言xhtml、xml与解释性语言css;
•熟练使用Adobe工具: photoshop/dreamweaver
•有一定的审美能力, 对色彩, 视觉感觉, 字体等有一定感觉;
•深入了解并熟练使用html, css, javascript, ajax;
•了解jsp/php语言者优先考虑
•了解HTML5/css3者优先考虑
•腾讯粉丝者优先考虑

http://mparty.qq.com/2010Q1/job/other/other_22.html

也可以发送简历到Hoosinhu#tencent.com


招行银行专业版 win7安装问题解决

按了网上一些安装还是没用
最后同事说把文件改成rar的后缀,解压,然后在解压文件里面安装,问题解决。


nexus one有哪些不足

1.相比droid来说颗粒感更差,使用中明显可以看到许多小颗粒。
2.打电话时切换出来有一个电话类型文字没法隐藏的 bug,如图。

3.触摸起来不是很顺畅,不好控制。
4.拍摄的相片过大…可以短信分享但又缺少对相片大小处理的功能。
5.n1自带浏览器对lightbox处理有问题,一直移位,让你根本没办法选中输入框。
6.对传统页面控制有点奇怪,不好控制,在这方面比opera要差很多。.
7.经常会卡住


nexus one截屏的图很清晰

截屏工具:shoot me
下载地址:http://m.91.com/soft/Android/shootme-0.73.html


wap开发者常用的几个插件

User Agent Switcher 0.7.2

The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of the browser.

在研读JForum源码时遇到过ClickstreamFilter.java过滤来自客户端的每个请求,源码中通过request获取请求头User-Agent信息,来判断当前请求是否来自搜索引擎和机器人。

它的功能体现主要在于,在网站规模达到一定程度时,要求针对不同的浏览客户端进行不同的显示方式,会根据这个字段信息来设置不同用户的不同访问体验。例如,当我们直接访问http://www.google.com时,Google会通过请求头User-Agent消息来判断请求是否来源自手机客户端,从而返回适合于手机浏览的页面回来。
对多种不同客户端请求进行判断提供了依据。

官方地址:
https://addons.mozilla.org/zh-CN/firefox/addon/59

XHTML Mobile Profile 0.5.3

https://addons.mozilla.org/en-US/firefox/addon/1345/?src=api

Firefox does not natively support the mime-type application/vnd.wap.xhtml+xml. This is one of the possible mime-types for XHTML Mobile Profile. This extension adds support for this mime-type. (The other, application/xhtml+xml, is supported…

With version 0.5, support for multipart/mixed content is added. This is not true support, the addon simply removes the HTML from the multipart packaging so that the browser can render it properly.