新 · 交互

交 HTML5 、CSS3 时代来了，我们能做些什么?

新互小鱼［林建锋］

http://sofish.de

11年1月21日星期五

http://sofish.de

http://sofish.de

1 新技术带来了什么

技术实现与创新

使用于什么地方

是什么打动了浏览器厂商，让他们争相实现？是什么让前端欣喜如此？

有地方可用吗？兼容性不好，我们应该放弃吗？

前端有什么能做的？交互设计师能想到的？我们可以如何去合作？

2

3

内容概要SUMMARY


1 新技术带来了什么是什么打动了浏览器厂商，让他们争相实现？是什么让前端欣喜如此？

HTML5 、CSS3

前端旧技术用法的创新

Background Size Multiple Backgrounds Border Image / Radius Box Shadow Text Shadow Opacity CSS Animations

CSS Columns CSS Gradients CSS Reflections CSS Transform CSS Transitions CSS FontFace FlexBox

Local Storage Session Storage Post Message Offline ApplicationsWorkers Query Selector WebSQL Database

IndexDB Database Drag and Drop Hash Change (Event) History Management WebSockets GeoLocationTouch

Combo / Node.js / Facebook BigPie / IE filter / SVG



HTML5 、CSS3






...

Combo / Node.js / Facebook BigPie / IE filter / SVG



HTML5 、CSS3






...

Combo / Node.js / Facebook BigPie / IE filter / SVG ...



新技术带来的东西又意味着什么？




更丰富的交互体验

更多实用的处理数据方法

更炫的视觉效果

更快的页面...




既然新技术这么好

为什么还是这么少见？？

更丰富的交互体验

更多实用的处理数据方法

更炫的视觉效果

更快的页面...


Data Table form:http://j.mp/cross-browser


http://www.findmebyip.com/litmus

http://www.findmebyip.com/litmus

http://j.mp/cross-browser

http://j.mp/cross-browser

是什么打动了浏览器厂商，让他们争相实现？是什么让前端欣喜如此？

使用于什么地方2

电脑端浏览器

移动设置浏览器

Firefox / Chrome / Safari / Opera / IE9

IE8 / IE7、IE6

主要用处：

增强效果 / 插件类产品

Apple Safari / Opera Mini /

Webkit based Browser

未来的 windows phone 7 IE 浏览器

主要用处：

APP / 插件类产品


© CopyRIght : http://iflonely.com/page/50/


技术实现与创新3


© CopyRIght : http://iflonely.com/page/50/



大屏幕 vs 小屏幕2.

永不丢失的表单数据3.

文件拖放1.

共享地理信息4.




文件拖放1.我们已经习惯了在系统中拖动各种文件（夹）如果 Web 也可以，是不是让用户忘记浏览器，想拖就拖，那不是很方便？而且，这种习惯几乎不需要培养用户学习的成本




文件拖放1.我们已经习惯了在系统中拖动各种文件（夹）如果 Web 也可以，是不是让用户忘记浏览器，想拖就拖，那不是很方便？而且，这种习惯几乎不需要培养用户学习的成本

Drag & Drop http://sofish.de/file/html5/drag_and_drop/

模拟拖放 + HTML5 拖放，实现浏览器拖放，目前成功应用的网站如 Gmail，Min.us


http://sofish.de/file/html5/drag_and_drop/

http://sofish.de/file/html5/drag_and_drop/



大屏幕 vs 小屏幕2.是在 iPad 上使用呢，还是在分辨率大于 1024 的电脑上看又或许我希望把屏幕缩小一点，同时照顾到多件事？




大屏幕 vs 小屏幕2.是在 iPad 上使用呢，还是在分辨率大于 1024 的电脑上看又或许我希望把屏幕缩小一点，同时照顾到多件事？

Media Query

使用 Media Query 但产品增强效果。在支持相应技术的浏览器上得到体验

http://sofish.de/file/html5/media_query/






永不丢失的表单数据1.像支付宝很多时候要做的都是填表单比如收款、付款、AA、缴费，还有新的注意之类的神马的到处都是表单，我要返回怎么办？浏览器崩溃了怎么办？




永不丢失的表单数据1.像支付宝很多时候要做的都是填表单比如收款、付款、AA、缴费，还有新的注意之类的神马的到处都是表单，我要返回怎么办？浏览器崩溃了怎么办？

LocalStorageCookie 存储的数据太少了，而且会通过 HTTP 头发送，这样可能让网速变慢利用，LocalStorage + UserData(IE)，搞定永不丢失的表单。

http://sofish.de/file/html5/localStorage/






共享地理信息，记录我的生活轨迹4.现在是微博时代，是SNS时代。做什么都喜欢分享。共享地理位置的也是一种时尚。但在 AA 的时候，想分享是在那个地理位置上发的AA。Check In，记录自己生活的轨迹。




共享地理信息，记录我的生活轨迹4.现在是微博时代，是SNS时代。做什么都喜欢分享。共享地理位置的也是一种时尚。但在 AA 的时候，想分享是在那个地理位置上发的AA。Check In，记录自己生活的轨迹。

Geolocation

HTML5 Geolocation 让我们可以通过IP地址、Wifi 热点、GPS 卫星轻松获取到地理信息







关于创新




前端产品研发

更多的创新需求

折衷与产品的渐进增强

....

Arale/Alice 对新技术的支持，自动化生成工具 ...

产品经理、交互设计师、视觉设计师都是非常有创意的群体，期待更多的创意

提供实验性的体验，但不强制所有浏览器都实现

关于创新




如果您对前端技术有兴趣前端随时欢迎您过来交流、切磋神马都可以

而我们虽然是前端，但对于产品的体验也是非常关注的期待您有空的时候过来给我们讲讲

。。。


ThankYou!! FAQ

小鱼［林建锋］

http://sofish.de


http://sofish.de

http://sofish.de

新 · 交互

Technology

Transcript of 新 · 交互