前端 - 随笔分类 - javawebsoa

HTML5浏览器测试网站汇总

摘要：我经常看到有很多人询问HTML5某个特性当前各浏览器的支持情况。的确，因为HTML5内容庞大，特性众多，而浏览器的支持情况又混杂不一，随时都有可能变化，所以了解起来比较困难。在这里，我汇总了一些常用的网站供前端开发者了解HTML5浏览器的支持情况。浏览器支持情况统计 When Can IUse：图表经常更新，展示了HTML5、CSS3、SVG等浏览器的支持情况。在这里可以了解到很多新知识，例如Firefox和Opera支持PNG动画；另外重要的一点是可以了解到各浏览器是否支持某个HTML特性以及准备什么时候支持。 HTML5 Readiness：看起来很酷，但是信息较少。 Mobile... 阅读全文

posted @ 2012-04-19 20:32 javawebsoa 阅读(1795) 评论(0) 推荐(0)

《论道HTML5》内容技术分享活动

摘要：HTML5小组的第12次活动，本期沙龙围绕5月出版的《论道HTML5》重点章节内容展开，由我和另外一位作者@秀野堂主现场分享。欢迎大家参加，下面是活动的详细信息。活动介绍：时间：2012年04月21日 13:30-18:00地址：东直门南大街3号国华投资大厦11层1105室（ThoughtWorks北京办公室）地图:http://j.map.baidu.com/6vTVd路线：地铁2号线东直门站D西南口出主题：本期沙龙围绕小组5月出版的第一本本土HTML5书籍《论道HTML5》重点章节内容培训分享。由作者@秀野堂主 @蒋宇捷现场诠释精彩。参考内容：1、【《论道HTML5》作者访谈】：ht... 阅读全文

posted @ 2012-04-19 13:15 javawebsoa 阅读(699) 评论(0) 推荐(0)

用HTML5 Audio API开发游戏音乐

摘要：支持的浏览器：难度：中等注意：本文讨论的API尚未最终确定，仍在不断变化。请在自己的项目中谨慎使用。介绍音频在很大程度上使得多媒体体验非常引人注目。如果你曾经尝试在关闭声音的情况下看电影，你就很可能已经注意到了这一点。游戏也不例外！我最喜爱的视频游戏的回忆里包含了音乐和声效。在二十年后的今天，大多情况下，当玩我最爱的游戏时，我仍然不能把“塞尔达”里近藤浩二的乐曲和马特大气的暗黑配乐从我的头脑里驱逐掉。这同样适用于音效，例如魔兽里单位实时点击的响应，以及任天堂的经典例子。游戏的音频提出了一些有趣的挑战。要创建令人着迷的游戏音乐，设计人员需要调节潜在的不可预知的状态。实际上，部... 阅读全文

posted @ 2012-04-09 23:17 javawebsoa 阅读(344) 评论(0) 推荐(0)

遇见Javascript类型数组

摘要：我在Chrome的最新动态里提到了Typed Arrays（Typed Array，类型数组）这个概念，可能对很多人来说非常陌生，那么它是什么，又有什么用途呢？之前的问题 Web应用程序变得越来越强大，例如新增了音视频处理、WebSocket等多个功能特性。毫无疑问，如果Javascript能够快速方便的操作原始二进制数据会相当的有用。过去，我们必须要把原始数据当作字符串来处理，并且使用charCodeAt方法来从数据缓冲区中读取字节。但是这种方法需要多次转换数据（尤其在二进制数据不是字节格式的数据时，例如32位整数或者浮点数），所以非常慢而且容易出错。 Javascri... 阅读全文

posted @ 2012-04-02 10:43 javawebsoa 阅读(410) 评论(0) 推荐(0)

摘要：Chromium版本库上周开发的重点包括许多表单相关的变化、电池状态API（注：电池状态即Battery Status API实际上是Device API里System Information API的一个组成部分）以及性能提升。所有无符号和浮点数的类型数组（注：它使得Javascript可以支持二进制数据，可以看看这篇文章）现在在开发者工具内将会显示为普通数组。获取堆的快照现在会比之前快12％，另外准备在脚本面板中支持片段的工作也正在进行中。Sneak-peak: 使用颜色输入来创建平台的本地选择器 HTML5的meter和progress元素不再和表单相关，文档之外的单... 阅读全文

posted @ 2012-03-29 19:03 javawebsoa 阅读(417) 评论(0) 推荐(0)

百度开发者大会-《用HTML5新特性开发移动App》PPT分享

摘要：今天百度开发者大会，移动互联网分论坛，我的主题演讲《用HTML5新特性开发移动App》PPT分享如下。完整PPT可在Slideshare观看，或者在百度开放云平台上下载到。阅读全文

posted @ 2012-03-23 23:07 javawebsoa 阅读(208) 评论(0) 推荐(0)

HTML5新特性：范围样式

摘要：Chromium最近实现了一个HTML5的新特性：范围样式，又叫做<style scoped>。开发者可以通过为根元素设定一个添加了scoped属性的style标签，来限制样式只作用于style标签的子元素上。这会限制样式只影响style标签的父元素和它所有的后代元素。例子下面是一个使用了标准样式的简单页面：<html><body> <div>a div! <span>a span!</span></div> <div> <style> div { color: red; } span 阅读全文

posted @ 2012-03-21 22:16 javawebsoa 阅读(243) 评论(0) 推荐(0)

2012第一季度国外HTML5移动开发趋势

摘要：著名移动云平台公司Appcelerator刚发布了2012年Q1移动开发者调查报告，其中值得关注的几个地方为： 1、整个报告的关键句为“The Google and FacebookBattle Moves to Mobile While HTML5 Gains Speed”，意思为当HTML5开始加速的时候，Google和Facebook的战场已经转移到了移送设备上。 2、报告中对比了Native App、Hybrid App和Web App三种形式的App。 3、 HTML5 Mobile Web已经上升为开发者最关注的开发平台第四位，远高于WP7、Symbian等平... 阅读全文

posted @ 2012-03-21 18:15 javawebsoa 阅读(179) 评论(0) 推荐(0)

如何使用HTML5实现拍照上传应用

摘要：在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面，我将讲解Web App如何用手机进行拍照，显示在页面上并上传到服务器。1、视频流 HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源（请注意目前仅Chrome和Opera支持getUserMedia。补充：请使用Opera支持HTML5的新版本，如果是Chrome，版本需为Chrome 18.0.1008+，并使用about:... 阅读全文

posted @ 2012-03-14 22:16 javawebsoa 阅读(506) 评论(0) 推荐(0)

对HTML5 Device API相关规范的解惑

摘要：在HTML5中，Device API相关内容众多，而且结构比较复杂，内容有所重叠，大家在使用时可能会遇到许多问题，下面我针对这些问题谈一下个人的理解。1、The Media CaptureAPI VS System Information API，两者都可以访问摄像头和话筒，有什么区别？背景：The Media Capture API定义了一个高级别的API来访问设备的摄像头和话筒，SystemInformation API的输入设备展示了系统的输入设备，例如鼠标、键盘、摄像头和话筒。答案：The Media CaptureAPI定义的API提供了对设备的音频、图像和... 阅读全文

posted @ 2012-03-09 19:25 javawebsoa 阅读(209) 评论(0) 推荐(0)

来自CodeCanyo的15个优秀移动应用和工具

摘要：随着移动站点的发展和普及，毫无疑问CodeCanyon的移动应用集合有了巨大的增长。从iPhone到Android，开发者已经贡献了一些令人惊艳的移动站点开发工具。这里快速列出了一些市场上所销售的顶级移动应用和工具。你可以试用它们并为你下一个移动站点获得灵感。1、创建自己的应用程序（无需任何编程技能）不需编码就能创建你自己的iPhone/ iPod Touch应用！让客户在苹果AppStore找到你并且挖掘你沟通的潜力。2、DOLPHIN- XML的iPad / iPhone幻灯片和电子书模板 Dolphin，XML驱动的App模板，兼容iPad和iPhone，拥有... 阅读全文

posted @ 2012-02-29 23:28 javawebsoa 阅读(231) 评论(0) 推荐(0)

用HTML5献上爱的3D玫瑰

摘要：译自：http://www.romancortes.com/blog/1k-rose/转载请标明作者和出处：http://blog.csdn.net/hfahe 我曾参与js1k爱情主题的第四次活动（译者注：关于有趣的js1k，可以看看我上一篇博文《JS1k比赛与3D玫瑰》）。我所提交的是一个静态图像，由程序生成的三维玫瑰。你可以在这里看到它。它是通过显式分段三维曲面的蒙特卡洛采样所实现的。我要在这篇文章中尝试解释所有内容。关于蒙特卡罗方法的简短说明蒙特卡罗方法是令人难以置信的强大工具。我一直在使用它们来实现很多功能优化和采样的问题。相比起设计和编写算法，如果你有更多CPU时... 阅读全文

posted @ 2012-02-10 23:48 javawebsoa 阅读(292) 评论(0) 推荐(0)

JS1K比赛与3D玫瑰

摘要：也许它最开始只是作为一件好玩的事，但一年一度的JS1K比赛现在已经不再只是一个玩笑。今年的比赛已经开展得如火如荼，并且因为用小于1K的JavaScript脚本渲染的3D玫瑰的出现而显得更加壮观。 JS1K大赛旨在找寻互联网上最好的JavaScript创意，只有一个小条件 - 使用的代码必须小于1K。这可能听起来很疯狂，因为一些JavaScript框架 – 只是框架本身！- 代码量就超过了100k，但是从几年前开始时，JS1K的尝试就给人留下了深刻的印象。今年最令人瞠目结舌的努力之一是开发者罗曼科尔特斯的作品3D渲染的玫瑰。依靠蒙特卡罗方法以保持代码的大小，科尔特斯的代码为以爱... 阅读全文

posted @ 2012-02-10 19:58 javawebsoa 阅读(334) 评论(0) 推荐(0)

CSS3新的鼠标样式介绍

摘要：在Web开发的早期，随着新技术的不断涌现，一切都让人兴奋。但是我们在过去十年里经历了一个技术的停滞期，直到由于HTML5的出现，Web开发再次让人着迷。特别是CSS3正在迅速发展，你会在其规范里发现许多有趣的宝物。在这篇文章里，我们要研究的是CSS鼠标样式属性，正如你所期望的的一样，它允许你改变在一个元素上移动鼠标时的指针样式。它对于交互式Web App来说已经变得越来越重要。CSS2的鼠标样式 CSS2中提供相对较少的选择（悬停在不同的网页元素上，看看鼠标指针样式是如何变化的）：cursor: auto cursor: inherit cursor: crosshair c... 阅读全文

posted @ 2012-01-29 18:07 javawebsoa 阅读(287) 评论(0) 推荐(0)

用纯CSS3绘制萌系漫画人物动态头像

摘要：大家已经见惯了用CSS3画的图标、LOGO、头像，这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫《轻音少女》女主角秋山澪的动态头像。CSS3的强大再次霸气测漏！请点击Demo查看效果，示例支持Chrome、Firefox、Opera、Safari等全系列的现代浏览器。示例中用到的主要CSS3特性如下： border-radius：绘制边框圆角。 transform：主要是旋转（rotate）和偏斜（skew），用于绘制各种形状。 animation：动画效果的实现，例如头发的飘动、眼睛的闪动。只要掌握了这几个特性，你也能画出同样奇妙的CSS3动画... 阅读全文

posted @ 2012-01-05 18:50 javawebsoa 阅读(232) 评论(0) 推荐(0)

关于CSS3滤镜的碎念

摘要：1、Webkit内核这次又远远走在了前面。开源的Chromium和每日构建的力量是无穷的。2、Firefox、Opera等浏览器不久之后将会马上跟进，IE也一样。说到IE，其实IE是最早提出和支持类似滤镜效果的浏览器，早在IE 5.5的时代（还记得国悼日全灰色的网站是如何快捷实现的吗？），只是它糟透了的名声让人忘记了它的一切好处。Whatever，这次时光轮回又把一个强大和统一的规范带给了我们。3、CSS3的快捷滤镜使用起来相当方便，也很强大。参见演示页面（请用Chrome的最新版本观看）。4、《遇见CSS3滤镜》文中介绍的滤镜还不足以实现更加复杂的效果，例如Instagram的Poprock 阅读全文

posted @ 2011-12-30 21:02 javawebsoa 阅读(130) 评论(0) 推荐(0)

遇见CSS3滤镜

摘要：译自：http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/Jeffrey Way于2011年12月22日译者：蒋宇捷（转载请标明出处-http://blog.csdn.net/hfahe）------教程详细内容• 主题：CSS滤镜• 可用性： Webkit每晚构建的版本• 酷炫程度：100观看演示本月初公布了一个新的规范-滤镜效果1.0。它提出了一些令人兴奋的新特性，我们可以使用它在浏览器中来创建Photoshop般的效果。更妙的是， Webkit已经在每晚构建的版本中添加... 阅读全文

posted @ 2011-12-26 23:33 javawebsoa 阅读(221) 评论(0) 推荐(0)

用3个步骤实现响应式网页设计

摘要：写在前面的话：随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开发和CSS3结合，来进行多种分辨率适配的例子。文中提到的响应式网页设计（Responsive web design）是一种现代网页设计方法，基于CSS3的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。 ----------- 译自：http://webdesignerwall.com/tutorials/responsi... 阅读全文

posted @ 2011-12-18 23:29 javawebsoa 阅读(519) 评论(0) 推荐(0)

用纯CSS3实现Path华丽动画

摘要：11月30日熟人社交移动应用Path 2.0发布后，因为其精美的界面和漂亮的动画效果受到许多人的赞誉，在Pinterest之后，又涌起一股新的模仿浪潮。 Path 2.0的一个亮点是左下角的菜单展开动画效果：一个名为Victor的法国人使用纯CSS3在HTML上实现了同样的动画效果，没有使用任何图片和Javascript，具体采用Sass+Compass计算坐标，最后为每一项生成了Keyframe动画，十分的有想象力，动画效果如下所示，也可以在http://dribbble.com/shots/339001-Path-menu-recreated-in-css3查看。 ... 阅读全文

posted @ 2011-12-05 23:45 javawebsoa 阅读(313) 评论(0) 推荐(0)

HTML5视频字幕与WebVTT

摘要：译自：http://html5doctor.com/video-subtitling-and-webvtt/ 转载请标明出处：蒋宇捷的博客(http://blog.csdn.net/hfahe) -------- 我们在几年前就已经可以不需要插件在浏览器里播放视频了。但是在编码解码器方面，仍然存在一些困扰。现在问题已经集中在视频本身上面了：下一步将是添加资源到视频里，使其更容易访问并且为观众提供更多选择。我们目前还没有说到下面的内容，这代表视频还不是非常便利，用户还不能非常轻松的定位到某一个特定的段落。值得庆幸的是，有一个名为WebVTT（网络视频文本轨道）的新... 阅读全文

posted @ 2011-12-04 23:12 javawebsoa 阅读(695) 评论(0) 推荐(0)

javawebsoa

随笔分类 - 前端

公告