Web前端-关注HTML5与CSS3
文章平均质量分 78
Web前端的技术分享,重点关注HTML5、CSS3的方向、趋势和实例。
蒋宇捷
信天创投合伙人,专注企业服务领域投资。曾就职于腾讯、百度担任技术管理。创新工场魔图精灵联合创始人、CTO。《论道HTML5》作者。
展开
-
基于HTML5的Web跨设备超声波通信方案
前言:Chirp在iPhone上掀起了有声传输文件的序幕,我们再也不需要彩信、蓝牙配对、IM来传送数据。它通过“叽叽喳喳”的小鸟叫声来分享数据,简单有趣,而且可以快速的实现一对多的分享。 此外支付宝曾经试推过“声波支付”,利用手机发送超声波至终端作为交易密码进一步完成交易。然而支付宝的技术目前只是使用在了支付上,而需要可接受声波支付的特定售货机方可使用。 《Advan翻译 2013-08-18 11:35:51 · 20217 阅读 · 9 评论 -
从HTML5移动应用现状谈发展趋势
作者注:此文章原为2013年5月的《程序员》杂志所做,现刊登于此,以飨读者。从HTML5移动应用现状谈发展趋势 时光如梭,自2008年HTML5诞生以来已经过去了5年的时间,作为新一代的Web标准,它自问世以来就受到方方面面的强烈关注,也引起了许多争议,支持者因其开放强大的特点而鼓吹它的美好前景,质疑者因其迟迟不能很好落地而怀疑它的实际作用。现在我们从现状入手,以提问的方式针对HTM原创 2013-08-08 22:27:12 · 15817 阅读 · 6 评论 -
趋势:Chrome为打包应用提供强大新特性
Chrome 7月9日刚为Chrome打包的应用提供了强大的访问Google服务例如Google统计、GoogleAPI和Google 钱包的能力,除此之外,还能够使用系统层面的服务包括蓝牙和原生应用通信。 打包应用可以在Mac、Linux和Windows上脱离Chrome浏览器独立运行。可以把它们看做用传统Web技术例如HTML、CSS和JS开发的单机应用,同时它们看起来和用起来也原创 2013-07-19 19:17:36 · 8473 阅读 · 1 评论 -
如何开发优秀的HTML5游戏?-迪斯尼《寻找奥兹之路》游戏技术详解(二)
(接上文)桌面游戏通常创建于一个核心的物理引擎。因此,要在3D世界中模拟一个柔软的物体,需要一个完整的物理模拟器,并且建立一种可信的行为。 WebGL和JavaScript还不能奢华到可以运行一个完全成熟的物理模拟器。因此,在这个游戏中我们必须找到一种方式来创建风的效果。 我们在3D模型中为每一个对象嵌入“风敏度”的信息。3D模型的每个顶点有一个“风属性”,指定顶点应该翻译 2013-06-05 23:18:43 · 9945 阅读 · 1 评论 -
如何开发优秀的HTML5游戏?-迪斯尼《寻找奥兹之路》游戏技术详解(一)
前言 迪斯尼《Find Your Way to OZ》这个贴近地气的游戏我在最新一期《程序员》杂志的《从HTML5移动应用现状谈发展趋势》这篇文章里有所提及,它借用了近期上映的《魔境仙踪》电影的设定(设定来自于经典故事《绿野仙踪》,看过这个电影的同学们会深有感触),构建了一个等同的宏大游戏世界。同时迪斯尼又和谷歌合作,把它作为Chrome浏览器性能和HTML5技术的一个show ca翻译 2013-05-17 22:33:01 · 9956 阅读 · 2 评论 -
HTML5下载属性简介
一直以来,人们习惯在网页上下载文件的方式是用右键的“另存为”命令。因为1、人们往往不清楚直接点击是打开文件还是下载,2、直接打开文件会遇到几个问题:1)打开大文件例如pdf时较慢;2)大文件例如图像或者pdf的渲染容易造成浏览器崩溃;3)打开文件有可能展示文件内容,例如bt种子,而其实这和我们的目的完全南辕北辙。在网页中打开种子文件和我们的目的完全相反 但是这种方式非常麻烦,很不直观原创 2013-05-02 17:56:30 · 10978 阅读 · 4 评论 -
漫谈@supports与CSS3条件规则
好吧,好久没有聊CSS3了,今天我们来讲讲CSS3的最新特性。 在Chrome最新的动态里,添加了对CSS.supports()方法的支持,而许多关注浏览器发展的朋友也可能已经了解到Firefox和Opera开始支持@supports规则。CSS.supports()和@supports看起来非常相似,它们之间有什么关联,它们的前世今生究竟是怎么一回事呢? 为了应付原创 2013-02-27 21:33:12 · 9131 阅读 · 1 评论 -
用HTML5构建高性能视差网站
本文介绍了一种时尚的网站设计方法,以及如何由浅入深的通过HTML5和浏览器渲染机制来构建高性能的站点。 文中多处涉及浏览器重绘和性能优化的原理,也是《Web滚动性能优化实战》的拓展和延续,难度上属于中级进阶,请在阅读前请先看看这篇文章。 介绍 视差网站最近风靡一时,只需看看下面这些站点: Old Pulteney Row to the Pol翻译 2013-02-07 15:57:51 · 18757 阅读 · 8 评论 -
用CSS3设计响应式导航菜单
春节将至,先祝大家新年快乐。我在这段时间内将会抽出时间由浅入深的发表几篇CSS3、HTML5最新的技术文章,涉及原理、实现、应用的几个层面,代表了国外HTML5最新发展的趋势,希望能给大家带来新的启迪。 下面的这篇文章非常简单,是响应式设计的一个具体实现。我希望能带给刚入门的朋友一些思路和帮助。 ……………………………………✄……………………………………翻译 2013-02-07 13:08:51 · 9496 阅读 · 3 评论 -
Web滚动性能优化实战
我的前言 HTML5的API体系是重要知识,但是如何写出更高效的Web App对于从程序员进阶为高级程序员来说更为重要。技很重要,但是容易学会,术才是茫茫人海中鹤立鸡群,安生立命之本。 码农们容易吗?是的,我们必须要不断努力和学习才能进化为高级码农乃至顶级码农。 Web App的性能优化非常重要,之前我有过一篇LinkedIn的相关文章《用HTML5实现i翻译 2013-01-24 20:57:00 · 14784 阅读 · 2 评论 -
激动人心!在网页上通过语音输入文字 - HTML5 Web Speech API介绍
很久前我曾经提到过Web Speech API,现在Chrome刚刚发布的25版本已经为桌面和Android提供了对此API的支持,这对Web开发者来说无疑是一个具有里程碑意义的事件,因为我们可以直接在Web App中原生使用语音识别技术,Web应用的新时代将会由此开启。 控制不住激动的心情,下面我会通过示例马上给大家介绍此API的详细信息。 Google专门提供了原创 2013-01-16 22:39:13 · 23476 阅读 · 3 评论 -
HTML5安全攻防详析之完结篇:HTML5对安全的改进
HTML5对旧有的安全策略进行了非常多的补充。 一、iframe沙箱 HTML5为iframe元素增加了sandbox属性防止不信任的Web页面执行某些操作,例如访问父页面的DOM、执行脚本、访问本地存储或者本地数据库等等。但是这个安全策略又会带来另外的风险,这很有趣,例如ClickJacking攻击里阻止JavaScript脚本的运行来绕过JavaScript的防御方原创 2013-01-15 23:04:50 · 11564 阅读 · 18 评论 -
HTML5安全攻防详析之八:Web Socket攻击
HTML5的最好的功能之一WebSocket允许浏览器打开到特定IP目标端口的Socket连接,它提供了基于TCP Socket的全双工双向通信,可以实现消息推送机制,大大减少了服务器和浏览器之间的不必要的通信量。例如可以用它来实现QQ的消息弹窗或者微博的新消息通知,让我们可以更好的实现Web应用。iPhone的消息推送 HTML5限制了Web Socket可以使用的端口,但是,它可原创 2013-01-15 19:01:22 · 6427 阅读 · 0 评论 -
HTML5光线传感器简介
HTML5环境传感器由Sensor API描述和定义,包含了6种常见的传感器类型: 它们分别代表温度(摄氏度)、气压(千帕)、湿度(百分比)、光线(lux ,勒克司)、声音(分贝)、临近(厘米)。 HTML5传感器目前讨论的比较多的是DeviceOrientationEvent运动传感器和方向传感器,而Sensor API的详细内容在国内很少有相关的文章提及。下面我对其原创 2013-01-14 21:59:13 · 7081 阅读 · 0 评论 -
Firefox、Android、iOS遇见WebRTC
注:我昨天刚发了一篇关于WebRTC的文章,但是WebRTC的变化如此之大,让我不得不再用一篇文章的篇幅从另外一个方面详细阐述它带给我们的变化。Firefox、Opera、Android、iOS平台的广泛支持会让它可以立即落地,实现很多有趣的视频功能和应用。你准备好使用它了吗? 关键词:视频 RTCPeerConnection getUserMedia WebRTC 多媒体翻译 2012-12-28 23:51:40 · 13001 阅读 · 3 评论 -
使用WebRTC实现远程屏幕共享
正如我们上周报道的一样,最近有很多事情发生在我们熟知的WebRTC上。 其中一个是:基于WebRTC的屏幕共享。 这是屏幕录像:youtube.com/watch?v=tD0QtBUZsF4。 这是代码:github.com/samdutton/rtcshare。 从本质上讲,我们使用RTCPeerConnection和chrome.tabC翻译 2012-12-27 19:37:47 · 31093 阅读 · 3 评论 -
在iOS Safari中播放离线音频
在iOS的Safari浏览器上播放缓存的音频供离线使用一直是一个挑战,已经被证明是不可能完成的任务 。但随着网络音频API的发展(仅支持WebKit内核),现在终于实现了-不过还需要经过一些步骤。 坏消息是我们还无法使用应用缓存缓存MP3文件,然后简单地使用XmlHttpRequest进行加载。iOS6上的Safari浏览器可以缓存MP3,但是会拒绝播放它。 但是这不代翻译 2012-12-26 22:40:44 · 6382 阅读 · 1 评论 -
HTML5安全攻防详析之七:新标签攻击
HTML5去掉了很多过时的标签,例如和,同时又引入了许多有趣的新标签,例如和标签可以允许动态的加载音频和视频。 HTML5引入的新标签包括、、、、等等,而这些标签又有一些有趣的属性,例如poster、autofocus、onerror、formaction、oninput,这些属性都可以用来执行javascript。这会导致XSS和CSRF跨域请求伪造。 下面我们要原创 2012-12-26 21:54:36 · 4884 阅读 · 0 评论 -
HTML5安全风险详析之六:API攻击
HTML5里有许多协议、模式和API,可能成为攻击者的攻击途径。 一、registerProtocolHandler:信息泄漏 HTML5允许某些协议和schema注册为新的特性。例如下面的语句可以注册一个email handler。navigator.registerProtocolHandler(“mailto”,“http://www.f.com/?uri=%s原创 2012-11-20 19:42:17 · 7459 阅读 · 1 评论 -
HTML5安全风险详析之五:劫持攻击
下面我们要讲到一类的HTML5安全问题,也就是劫持的问题。 一、ClickJacking-点击劫持 这种攻击方式正变得越来越普遍。被攻击的页面作为iframe,用Mask的方式设置为透明放在上层,恶意代码偷偷地放在后面的页面中,使得一个页面看起来似乎是安全的,然后诱骗用户点击网页上的内容,达到窃取用户信息或者劫持用户操作的目的。下图中,欺诈的页面放置在下层,被攻击的银原创 2012-11-01 22:18:45 · 10799 阅读 · 6 评论 -
HTML5安全风险详析之四:Web Worker攻击
一、WebWorker介绍 由于Javascript是单线程执行的,在执行过程中浏览器不能执行其它Javascript脚本,UI渲染线程也会被挂起,从而导致浏览器进入僵死状态。使用WebWorker可以将计算过程放入一个新线程里去执行将避免这种情况的出现。这样我们可以同时执行多个JS任务而不会阻塞浏览器,非常适合异步交互和大规模计算,这在以前是很难做到的。 下面一张图形原创 2012-10-23 19:50:11 · 10545 阅读 · 7 评论 -
Chrome引入WebRTC支持视频聊天App
Goole在Chrome的最新beta版本中添加了关键的WebRTC框架,以此来支持第三方开发者创建视频聊天程序,而不需要下载任何插件。这项技术可能有一天会在Chrome里支持原生的Goole Hangouts视频群聊。 Google的工程师在Chromium的博客上写到: Chrome现在嵌入了PeerConnectionAPI,允许开发者创建实时的音视频Web Ap原创 2012-10-17 23:28:05 · 9136 阅读 · 0 评论 -
HTML5安全风险详析之三:WebSQL攻击
一、WebSQL安全风险简介 数据库安全一直是后端人员广泛关注和需要预防的问题。但是自从HTML5引入本地数据库和WebSQL之后,前端开发对于数据库的安全也必须要有所了解和警惕。WebSQL的安全问题通常表现为两个部分: 第一种是SQL注入:和本地数据库一样,攻击者可以通过SQL注入点来进行数据库攻击。 另外一方面,如果Web App有XSS漏洞,那么本地数原创 2012-10-08 17:49:04 · 12966 阅读 · 5 评论 -
HTML5移动Web App相关标准状态及路线图
W3C最新公布了和移动WebApp有关的标准当前的状态及路线图,它汇总了和移动Web App开发相关的所有HTML5和CSS3标准以及他们当前的状态和未来路线,对使用HTML5进行移动Web App开发的开发者有着极大的指导意义。文档地址为:http://www.w3.org/2012/08/mobile-web-app-state/。 下面是该文档的主要内容。 ---原创 2012-09-11 23:22:26 · 10754 阅读 · 1 评论 -
HTML5图像适配最新进展:响应式图片规范草案
在我之前《HTML5图像适配介绍》的一文里,提到了响应式图片的需求以及一些讨论方案,而目前W3C关于响应式图片已经有了最新进展,此规范上上周已经作为编辑草案出现,到今天还在更新中。 未来的格式很可能会如下所示,来适配不同的屏幕分辨率。 文档的地址请点击这里。原创 2012-09-10 14:21:39 · 4856 阅读 · 0 评论 -
HTML5安全风险详析之二:Web Storage攻击
一、WebStorage简介 HTML5支持WebStorage,开发者可以为应用创建本地存储,存储一些有用的信息。例如LocalStorage可以长期存储,而且存放空间很大,一般是5M,极大的解决了之前只能用Cookie来存储数据的容量小、存取不便、容易被清除的问题。这个功能为客户端提供了极大的灵活性。二、攻击方式 LocalStorage的API都是通过Javasc原创 2012-09-09 22:51:39 · 9030 阅读 · 1 评论 -
HTML5安全风险详析之一:CORS攻击
一、从SOP到CORS SOP就是Same Origin Policy同源策略,指一个域的文档或脚本,不能获取或修改另一个域的文档的属性。也就是Ajax不能跨域访问,我们之前的Web资源访问的根本策略都是建立在SOP上的。它导致很多web开发者很痛苦,后来搞出很多跨域方案,比如JSONP和flash socket。如下图所示: 后来出现了CORS-CrossOrigin原创 2012-09-09 22:28:32 · 14203 阅读 · 5 评论 -
《关注HTML5安全》
在今天的2012中国软件开发者大会上,我做了名为《关注HTML5安全》的主题演讲。我个人认为,随着HTML5的普及和发展,HTML5的安全会成为近期带来的严重问题。之所以大家还没有感受到的原因是什么?1、目前HTML5应用还不普及 2、暂时还没有吸引攻击者的关注。 演讲摘要如下(来自CSDN专题): ----------- 我首先介绍了从HTML到HTML原创 2012-09-09 17:01:58 · 10274 阅读 · 7 评论 -
谈谈移动App的思维误区
移动App和传统互联网有很多不同,在移动App的领域中,经常有一些常见的惯性思维,实际上并不一定正确。在此我抛砖引玉,就一些误区聊聊自己的经验。用户使用时长下降,一定是应用出现了问题 在许多移动统计系统里,有用户平均每次使用时长这一数据。如果你发现这个数据有所下降,就认为这一定是坏事,这种想法可能有欠全面。 事实上,你需要考虑你最近是否对软件进行了优化,因为有一种可能是原创 2012-07-17 22:21:29 · 3748 阅读 · 0 评论 -
Chrome新特性:文件夹拖拽支持
现代浏览器支持拖放本地文件到浏览器上,应用可以进行文件的编辑、上传等操作,但是之前并不支持文件夹拖放。但是从最新的Chrome 21开发版开始,这个功能已经得到了支持。 文件拖放 之前文件拖放的代码如下: var dropzone = document.getElementById('dropzone');dropzone.ondrop = function(e)原创 2012-08-22 22:48:18 · 6736 阅读 · 3 评论 -
用CSS3 Region和3D变换实现书籍翻页效果
前言:我曾在之前的分享里提到CSS3 Region(区域模块)的重要作用:实现更复杂的排版效果,实现更丰富的富文本体验。下文就是和此模块相关的实际应用,可以看到未来它将发挥出巨大的作用。 这一天终于到来:你开始对大段滚动的文字感到厌倦,并正在寻找一种新的格式,更加优雅,更加紧凑。它可以把长长的滚动条切分为整齐的页面并结合在一起。我把这个发明叫做“书”。 利用CSS3 R翻译 2012-07-12 19:42:59 · 6359 阅读 · 0 评论 -
HTML5安全:CORS(跨域资源共享)简介
前言:像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及,在百度或者Google上搜索CORS,搜到的中文文章基本都是另外一种卫星定位技术CORS的介绍,让我等前端同学情何以堪(对比起来,用Google搜到的国外文章,基本都是跨域资源共享的介绍,说明了前端技术在国内外环境和发展的巨大差距)。 我之前《用HTML5实现人脸识别》这篇文章中提到了“Face.com实现原创 2012-07-09 22:40:38 · 56697 阅读 · 6 评论 -
HTML5安全:内容安全策略(CSP)简介
前言:HTML5出现后,网络安全更加受到广泛的关注。Web对于网络安全有哪些改进?我们如何来面对越来越危险的网络欺诈和攻击?下面的文章谈到了W3C对于这个问题的最新解决方案。未来有机会的话,我会针对XSS、P3P、同源策略、CORS(跨域资源共享)和CSP进行关于HTML5内容安全的现场分享。 ------------------------华丽的分界线 注意:本文所讨翻译 2012-07-08 22:57:10 · 14126 阅读 · 0 评论 -
HTML5图像适配介绍
现在移动互联网日新月异,各种移动设备层出不穷,在iPhone 4上最先出现视网膜屏幕后,这种技术快速的被大多数智能移动设备所采用,可以遇见将会快速的普及开来。 但是这也对我们的Web提出了更高的要求,因为我们需要适配更为复杂的UI方案。 适配图像将会是响应式网络设计下一个需要解决的问题,因为我们针对不同分辨率的屏幕,例如iPhone 4s和iMac,最佳的方案是分别提供原创 2012-07-02 05:20:44 · 6376 阅读 · 2 评论 -
了解SVG
教程细节· 语言: JavaScript,HTML, SVG· 难度: 中等· 预计阅读时间: 30 分钟 SVG-可缩放矢量图形 ,是一个XML风格标记驱动的矢量图形的浏览器渲染引擎。除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG。Canvas也有同样的支持情况,所以问题往往表现为:我们应该使用哪种方案? 今天翻译 2012-06-14 00:28:56 · 21307 阅读 · 4 评论 -
用非响应式设计构建跨端Web App
写在前面的话:对于移动Web App来说,响应式设计相当的有价值,现在大家也正在逐渐的了解它。但是我认为它也有自己适用的范围,需要根据具体的场景来选择使用。正好最近业界对此也有一些声音和反思传递,例如我之前的一篇博文《用HTML5实现iPad应用无限平滑滚动》里就有提及。现在我翻译一篇相关文章,大家可以对此有更多的了解和判断。-- 宇捷媒介查询很伟大,但是... 对于Web开发人员来翻译 2012-05-18 23:01:52 · 6407 阅读 · 1 评论 -
用HTML5实现iPad应用无限平滑滚动
前言: LinkedIn 5月2日发布了新的iPad版本,它基于HTML5制作,在体验和界面上非常出色,在使用中可以发现它和原生应用基本没有任何差别。 关于这个版本,有两篇文章非常有价值,深入的介绍了Mobile Web App和HTML5移动开发的原理和方法。 第一篇《你绝对想不到的LinkedIn如何构建iPad新应用》主要包括三个方面的内容:Link翻译 2012-05-04 19:16:02 · 15788 阅读 · 5 评论 -
用HTML5实现手机摇一摇的功能
在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运原创 2012-04-26 23:39:34 · 45560 阅读 · 30 评论 -
Chrome 20对于HTML5最新支持的动态:颜色输入,网络信息API,CSS着色器
最近几周Chrome的最新动态如下: Android平台上Chromium内容外壳的骨架上周已经开始落实,这是能够建立一个包含Chromium 的Android apk文件的第一步。 WebKit已经支持网络信息API(Network InformationAPI),但是目前只适用于EFL版本的移植。 黑莓版本的移植增加了电池状态(BatteryStatu原创 2012-04-24 22:15:55 · 3995 阅读 · 1 评论 -
用Javascript实现人脸美容
本文可视为《用HTML5实现人脸识别》的进阶,在人脸识别的基础上,我们将使用纯Javascript来实现如下的功能:识别和标注人脸以及五官对人脸进行美容 从本文的内容中,你将意识到,Javascript能做的,能实现的,远远比你想象的多。演示一、实现1、人脸识别 Face.com有包括检测、识别在内的多个API接口,根据《用HTML5实现人脸识别》一文,我们已经可以实现原创 2012-04-24 18:57:20 · 8113 阅读 · 0 评论