www.xiaoqiang.org小强ORG

[Css]CSS3 Media Query:移动Web的完美开端

移动时代,是任何 Web 设计与开发者都不能忽视的一个时代,总有一天,你设计的东西将被显示在两种屏幕上,桌面大屏幕和移动小屏幕,如何让同一个网站同时适应完全不同的两种尺寸的屏幕,这是一个很久以来都没有完美解决方案的问题,直到有了 CSS3。

CSS3 的 Media Queries

在 CSS2 时代,如果你曾经为你的网站设计过打印版 CSS,就会明白 CSS3 Media Queries 的作用,不过,CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用,事实上,CSS2 的 Media Type 并不曾被多少设备所支持过。CSS3 的 Media Queries 可以帮你获取以下数据:

  1. 浏览器窗口的宽和高
  2. 设备的宽和高
  3. 设备的手持方向,横向还是竖向
  4. 分辨率

阅读全文

[Mobile Web]移动Web前端开发——开发语言和手机浏览器

WAP:无线应用协议,是在无线网络环境中应用层通讯的一个开放国际标准,主要用于手机等移动设备访问国际互联网。而WAP网站则是使用WML编写的网站的俗称。

移动web:是指可以用移动设备访问的WWW内容、应用和服务。

很明显,移动web应该包含了WAP。所以,我把能用移动设备访问的网站或应用称为移动web。

移动web是客户端技术,如果要开发移动网站,自然我们需要选择一款合适的标准语言。主要技术标准有:

  1. WML——古典的移动web标准,使用WML
  2. i-mode——小日本的标准,使用iHTML,我们可以忽略
  3. OMA领导的xHTML mobile profile,使用xHTML
  4. W3C领导的xHTML Basic,使用xHTML
  5. 以及所谓的Full Web,也就是普通的HTML——从iPhone开始流行起来

阅读全文

[UE]团客拉用户体验浅析

对团客拉(www.tuankela.com)网站的用户体验浅析,下面是目录,提供doc下载。希望大家共同交流学习!

一、用户界面测试

  1. 网站配色方案
  2. Logo文化
  3. Icon图标规范

二、可访问性

  1. 浏览器兼容性
  2. 设备兼容性
  3. 无图模式或者无样式模式
  4. 客户端禁用js

三、代码测试

  1. HTML Validator
  2. Firebug
  3. Yslow

四、人机交互测试

  1. 眼动议
  2. 黑盒测试
  3. 谷歌AB测试

五、SEO测试

  1. 代码级别
  2. 搜索引擎
  3. 外链内链
  4. 软文推广

六、总结

文档下载:团客拉体验测试报告

[Css]IE下中英文混排bug

这个bug很常见,首先看示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>000</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; color:#333;}
#list{font-family:Arial; list-style:none;}
#list li{float:left;margin-right:10px;}
</style>
</head>
<body>
<ul id="list"><li>12条留言</li><li>回复</li></ul>
</body>
</html>
IE下中英文混排bug

IE下中英文混排bug

阅读全文

[javascript]javascript定义方法的四种途径

最近在看一本名叫《javascript设计模式》的书,感觉还不错,记录一些学习内容当作读书笔记。

第一章讲的是javascript的灵活性,用四种不同的方法实现同一件事情。

1,最常用的方式,但是无法保存状态

/*开始和结束动画*/
function startAnimation(){
    ...
}
function stopAnimation(){
    ...
}

阅读全文