视频播放兼容解决方案 – Video For Everybody

从这里看到的:http://camendesign.com/code/video_for_everybody

通过一段HTML实现在各个浏览器下的视频播放:

<video width="640" height="360" controls>
	<!-- MP4 must be first for iPad! -->
	<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video    -->
	<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
	<!-- fallback to Flash: -->
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<!-- fallback image. note the title field below, put the title of the video there -->
		<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
		     title="No video playback capabilities, please download the video below" />
	</object>
</video>
<p>	<strong>Download Video:</strong>
	Closed Format:	<a href="__VIDEO__.MP4">"MP4"</a>
	Open Format:	<a href="__VIDEO__.OGV">"Ogg"</a>
</p>

HTML5规定,任何内嵌于'<video>’元素的标签,除了'<source>’都将忽略,因此内嵌'<object>’元素保持向后兼容。
继续阅读视频播放兼容解决方案 – Video For Everybody

通过Java的static,理解JavaScript的prototype

先看两段代码:

Java 代码

public class Dog {
  public static final String type="golden retriever";

  public Dog(String name){
    System.out.println(name + " is a " + type + " dog.");
  }
  
  public static void main(String[] args){
    Dog dog = new Dog("tom_1");
    dog = new Dog("tom_2");
  }
} 

JavaScript 代码

function Dog(name){
  alert(name+ " is a " + this.type +" dog");
}

Dog.prototype.type="golden retriever";

var dog = new Dog("tom_1");
dog = new Dog("tom_2");

共性:

1、都是在构造方法之前就已经初始化了;

2、所有实例对象共享同一个变量;

Notes:ajaxForm上传文件,返回json,回调不到success的处理建议

把之前项目中头像上传的一个功能,改为ajaxForm回调success处理。

之前是先上传头像到服务器,然后再在另一个页面显示并通过jcrop剪辑,最终生成用户头像。

这个过程多了一步页面刷新,如果使用ajaxForm做异步文件提交,那么返回json数据直接处理,方便不少。

但是有一个问题那就是之前好多人遇到的问题,ajaxForm上传文件时,页面中的js无法回调success方法,导致出现下载框,昨天对这个问题深入做了测试,一般解决方式:

  1. 选对jquery版本和jform版本,并不是最新的版本都可以,推荐经测试肯定可以用的版本:jquery-1.5.1.min.js 和 jquery.form-2.67.js
  2. 如果出现下载框,可以尝试将服务器返回json的ContentType 改为text/html
  3. 使用struts-json插件的,可以如下设置:

    <result name="success" type="json">
        <param name="contentType">
               text/html
        </param>
    </result>
    

    直接在页面输出的,可以如下设置:

    HttpServletResponse response = ServletActionContext.getResponse();
    response.setContentType("text/html;charset=UTF-8");
    

分享:CSS3渐变按钮

开始之前先看看效果:DEMO1 DEMO2 DEMO3

这么漂亮的按钮是如何制作的呢?

  1. 纯CSS,没有使用到图片和javascript
  2. 按钮上的渐变是跨浏览器的(IE, Firefox 3.6, Chrome, and Safari)
  3. 灵活可扩展性:按钮的大小和圆角都可以通过改变字体的大小和填充值进行调整
  4. 按钮有三个状态:normal, hover, and active
  5. 可以被应用到HTML的任何元素,如 a, input, button, span, div, p, h3, etc
  6. 如果浏览器不支持CSS3,那么将显示为普通按钮,不带渐变,阴影,圆角

继续阅读分享:CSS3渐变按钮

Notes: 通过 label 标签改进鼠标用户的可用性

先看看 label 标签的使用说明:

HTML <label> 标签

定义和用法

<label> 标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

案例

<div>
   <input type="checkbox" name="rememberme" id="rememberme">
   &nbsp;记住我
</div>

继续阅读Notes: 通过 label 标签改进鼠标用户的可用性

分享:第三方IP地址查询接口

平时在做web应用时,有时避免不了IP查询,自建自然有些浪费时间和精力,何不用第三方的一些工具,分享三个常用的IP查询服务:

太平洋电脑网IP地址查询:http://whois.pconline.com.cn/

新浪IP地址查询:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=211.153.22.125

网易有道IP地址查询:http://www.youdao.com/smartresult-xml/search.s?type=ip&q=211.153.22.125

这几个都可以在页面直接嵌入使用,通过JS做简单的处理即可。

分享:web标准化交流会第二十期北京站总结

分享内容如下:

开心网 李国新 规范JavaScript开发模式(海贝网CommonJS实践之路)
傲游浏览器 赵锦江 git和github简介
谷歌 黄昊 Chrome 浏览器开发者工具介绍
W3Help javaScript模板引擎 -jsTemplate 应用场景及设计实现
联想研究院 小贝 谈团队协作的“兼”情和“基”情

分享:使用HTML5和CSS3来创建幻灯片

很不错的一篇介绍HTML5幻灯片制作的教程

译自:http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-presentation-slides-with-html-and-css-2/

译者:蒋宇捷(转载请标明出处-http://blog.csdn.net/hfahe)

下载源文件 示例 (用向左向右键翻页,Ctrl加+或者-键放大缩小)

阅读地址:http://blog.csdn.net/hfahe/archive/2011/06/06/6527467.aspx

Note:做优化

补发:之前某项目尾声时做的一些显而易见的优化工作:

1、图片size优化

使用Firebug上的YSlow就可以很方便的处理,但是对于一些重要的图片,比如logo等,还是让UI工程师专门做优化。

2、检查gzip是否开启

检查服务器上的gzip是否开启,这个对于前端优化起很大作用,如下图, gzip前后的js文件大小变化很大:


继续阅读Note:做优化