传播、沟通、分享
« 类别 html5 下的文章
人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
早在公元2011年6月3日傍晚，人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床。哦，Sorry, 是 拖拽上传 。到现在，这个功能已经上线了整整半年，这篇文章也足足拖延了半年才分享给大家，实在是对不住了，呵呵，今后彬Go一定要勤奋发Blog！ 您还可以参考以下HTML5相关文章: 《 HTML5 DragDrop 拖拽、FileReader实例教程 》 《 HTML5 WebSockets 基础使用教程 》 《 关于HTML 5 canvas 的基础教程 》 《 让所有IE支持HTML5的解决方案 》 《 一起感受HTML5和CSS3的能量 》 关于这个拖拽上传，其实国外有很多网站已经有这样的应用，最早推出拖拽上传应用的是Gmail，它支持标准浏览器下拖拽本地文件到浏览器中作为 邮件的附件发送。人人网的这个拖拽上传也是同理，可以让使用标准浏览器的用户通过简单的拖拽行为，将本地文件夹中的照片直接上传到人人网，用户体验能得到 提升的同时，也希望借此机会推广一下标准浏览器，淘汰IE。人人网当时也向广大用户推出升级浏览器活动，并喊出口号：”工欲善其计算机，必先利其浏览 器”。本次…
用userdata和localstorage做跨浏览器本地储存
为网站做一个搜索历史本地储存,想法是对于ie外的浏览器可以直接使用localstorage,但是对于不争气的IE,难道只能使用cookies? 然后搜到hacker news上的一篇文章。 Store.js – cross browser local storage without using cookies or flash (github.com) http://github.com/marcuswestin/store.js 于是才知道IE下的userData。 1.浏览器支持 userData是微软为IE在系统中开辟的存储空间。因此只支持windows+IE。意外的是从IE5.5就已经开始userData了。 2.保存位置 在XP下，一般位于C:\Documents and Settings\用户名\UserData，有些时候会在C:\Documents and Settings\用户名\Application Data\Microsoft\Internet Explorer\UserData。 在Vista下，位于C:\Users\用户名\AppData\Roaming\Mi…
Google 发布基于 HTML 5 的实时音频和视频通讯平台 WebRTC
Google宣布推出 开发者预览版的WebRTC ，这是一个可让网友之间通过音频和视频实时交流的开放工程，只要是支持Real-Time Communications (RTC)的浏览器都可实现实时音频和视频聊天。 这个新的技术使用了HTML 5和简单的Javascript API，开发者可以很轻松的创建RTC应用，只要浏览器支持，就可在不安装任何扩展和插件的前提下进行实时音频和视频聊天。Google希望用这个开源工程击败微软的Skype和苹果的Facetime。 WebRTC应该是基于 Google在去年收购的GIPS技术 ，其实在收购之前GIPS就制作了Android、Windows Mobile和iOS版的VideoEngine，可实现跨设备的实时聊天标准。 Chrome、Firefox和Opera未来都将支持WebRTC。 继续观看官方介绍视频： Popout iOS设备观看地址 。 Via TNW © musiXboy 发表于 谷奥——探寻谷歌的奥秘 ( http://www.guao.hk ) , 2011. | 3 条评论 | 永久链接 | 关于谷奥 | 投稿/爆料 Pos…
IBM发布开源HTML5可视化设计工具Maqetta
IBM推出了一个基于浏览器的开源HTML5网页编辑工具 Maqetta ，支持Google Chrome、Mozilla Firefox 3.5+（推荐Firefox 4）和Mac Safari 5，为用户体验设计师提供了一个可见即可得的可视化编辑环境。 Maqetta目前发布了Preview 1版，可以在浏览器上直接使用，无需安装任何插件，用户也可以选择下载和安装到自己的服务器上。 Maqetta 应用本身用HTML5/Ajax编写，因此运行在浏览器中无需请求额外的插件或下载。用户可以下载源码，并安装在自己的服务器上，并可自定义源码来满足自己的需求，再回馈到开源项目。 Maqetta 功能如下： WYSIWYG可视化页面编辑 拖曳式移动UI设计 设计或源码浏览同步编辑 对CSS样式的深度支持 Maqetta联合创作者Adam Peller表示，他们希望与社区用户和开源开发者合作，推动基于HTML5的用户界面创作工具的开发。 下载地址： http://maqetta.org/downloads/ 原文： http://www.eweek.com/c/a/Application-Deve…
10个超棒的HTML5素描及绘画设计工具
1. Mr. Doob’s Harmony 非常适合随手绘制勾勒图像轮廓的一个工具。 2. Sketch 这个工具的开发者是Hakim El Hattab。你会发现用它画素描非常有趣，甚至还可以画3D草图。 3. Deviant Muro 这是个很强大的工具。带有多种笔刷跟滤镜，能够进行比较精细的创作。不必安装FLASH 插件就可以使用。 4. Sketchy Structures 用它可以绘制梦幻般复杂的场景。 5. Multi-User Sketchpad 支持多用户同时绘画。 6. Sketchpad 一款小巧好用的绘图应用，非常容易上手。 7. Bezier Sketching 可以很方便地定义路径的素描工具。 8. Spirograph Spirograph是一个非常有趣的HTML 5工具，通过设置不同的参数，可以自动绘制千变万化的圆圈类图形。 9. Bomomo Bomomo 具有20种绘画和造型的工具。鼠标跟随效果很好玩哦。 10. Zwibbler 用Zwibbler可以绘制任何形状圆形跟矩形，还可以自由手绘。具备加阴影，撤消，重做，复制和粘贴功能。
JavaScript 线路脚本库 WireIt
喜欢设计开发的朋友应该都比较熟悉 Yahoo Pipes 那漂亮的界面，而 WireIt 是一个 开源的javascript 脚本库 , 可以让你创建类似风格的可视化界面。 这个脚本库非常适合用来创建数据流应用(比如家庭树)和可视化编程语言。 授权协议： MIT 开发语言： JavaScript 操作系统： 跨平台 收录时间： 2011年02月06日 软件首页 软件下载
让IE6/7/8 支持 HTML5 标签
html html head style figure {color:blue;background-color:red;} /style script document.createElement(figure); /script /head body figurefdsafd/figure /body/html
关于脚本载入器的思考
原文： http://www.nczonline.net/blog/2010/12/21/thoughts-on-script-loaders/ == 上周，Steve Sounder 发布了 ControlJS 项目，目的是让开发者可以更好地控制 JavaScript 的载入和执行。实现上借鉴了 Stoyan Stefanov 关于预载入但不执行的方法 ，同时开启平行下载还带来了一些愉快的副作用。更多详情见 Steve 的 三篇 文 章 。 第一篇日志的评论中有来自 Kyle Simpson 的批评 (Kyle 是另一个脚本载入器 LABjs 的创建者)。LABjs 目标和 ControlJS 有些不同：开启 JavaScript 文件的平行下载，同时管理执行顺序。为了要做到这点，LABjs 需要知道哪些浏览器支持平行下载，然后为不支持的浏览器提供其他解决方案。 然 而，LABjs 和 ControlJS 都有个问题：他们用了多种浏览器探测技术来决定如何脚本载入的方式。有些人觉得 LABjs 用的浏览器接口(探测)比 ControlJS 的 user-agent 探测安全点，我不同意…
图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)
以前要实现图片的旋转或翻转，只能用ie的滤镜来实现，虽然canvas也实现，但ie不支持而且不是html标准。 css3出来后，终于可以用标准的transform来实现变换，而canvas也已成为html5标准的一部分。 css3和html5使web变得越来越强大，各种新奇的技术正等待我们发掘。 本程序分别通过滤镜(ie)、ccs3和canvas来实现图片的旋转、缩放和翻转变换效果，可以用作图片查看器。 有如下特色： 1，用滤镜、ccs3和canvas实现相同的变换效果； 2，可任意角度旋转； 3，可任意角度翻转； 4，可扩展滚轮缩放； 5，可扩展拖动旋转。 兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0 效果预览、原文地址：http://www.cnblogs.com/cloudgamer/archive/2010/08/16/ImageTrans.html
JavaScript 图片3D展示空间（3DRoom）
一般的平面效果，通过改变水平和垂直坐标就能实现，再加上深度，就能在视觉上的产生3D（三维）的效果。 程序就是模拟这样一个三维空间，里面的图片会根据三维坐标显示在这个空间。 很久以前就看过一个 3DRoom 效果，是用复杂的计算实现的。 在上一篇 图片变换 研究过css3的transform之后，就想到一个更简单的方法来实现。 兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0 中秋将至，预祝各位中秋快乐，团团圆圆！ 效果预览 3DRoom 程序说明 【实现原理】 3D效果的关键，是深度的实现。 把3D容器看成一个由多个不同深度的层组成的空间，这些层的尺寸默认跟容器一样。 层里面放了该深度的图片，并且各个层会根据深度的变化做缩放变换，从视觉上产生深度差。 缩放变换的比例按照最近点为1，最远点为0，逐渐变化。 关键的地方是层里面图片的尺寸和坐标必须跟着层同时变换，这个通过css3的transform很简单就能实现。 这样图片只需设置好尺寸再相对层定好位就行了，避免了随深度变化要不断调整图片尺寸和定位的麻烦。 【图片…
