xml地图|网站地图|网站标签 [设为首页] [加入收藏]
开发者需要了解的技巧和工具汇总,H5端呼起摄像
分类:web前端

HTML5 开发者需要了解的技巧和工具汇总

2011/10/16 · HTML5 · HTML5

注:本文转载自iteye

HTML5现在已经成为了Web开发中的热门话题,大多数现代浏览器(Safari、Chrome,Firefox,IE10和移动设备)都支持HTML5。即使HTML5的规范还没有制定完成,但许多开发者已经将其作为Web开发项目中的主要技术。一些网站巨头,如Google、Facebook、Twitter和YouTube等,都建立在HTML5基础上。

HTML5中最令人兴奋的功能莫过于画布(canvas)和强大的表单功能,画布功能已经可以在大部分浏览器中完美体验(除了IE),但对于新表单元素的支持还不是太好。对Web开发者来说,是时候开始HTML5开发了。

要进行HTML5开发,本文中的一些技巧、工具可以让你缩短学习的时间,提高开发的效率。

一、HTML5支持测试列表

在开始之前,你需要了解现代的浏览器以及移动平台对于HTML5的支持情况。

  • 主流浏览器HTML5功能支持一览
  • 移动平台HTML5支持一览
  • HTML5支持测试
  • HTML5演示

二、让HTML5元素可用

老版本的IE浏览器不能识别新的HTML元素。但是,可以使用一些JavaScript或CSS解决方案来弥补这个缺陷。

  • HTML5Shiv:此脚本可以使IE浏览器识别HTML5元素。
  • HTML5 Enabler:功能与HTML5Shiv类似。
  • Modernizr:它使得开发者可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发,同时又不会牺牲其他不支持这些新技术的浏览器的控制。
  • HTML5 Reset:它提供了一组HTML、CSS文件,让你能够以最少的时间来启动一个新的项目。它使用modernizr来支持HTML5 和 CSS3。

三、浏览器插件

下面是一些JavaScript插件,可以弥补一些浏览器对HTML5的支持问题。

  1. VideoJS

VideoJS是一个HTML5的视频播放器,可以在所有浏览器中使用,包括IE6和移动设备。对于不支持HTML5的浏览器则自动使用Flash播放器来播放。

图片 1

  2. AudioJS

HTML音频播放器。用来让HTML5 的 <  audio> 标签可以在各种浏览器上使用,包括移动设备。

图片 2

  3. HTML5Widget

HTML5的表单模块,包括日历,调色板,滑动部件,客户端验证等。

图片 3

  4. Webforms2

HTML5 表单属性的支持,例如pattern、required和autofocus。

图片 4

  5. LimeJS

LimeJS是HTML5的游戏框架,用于为现代触摸设备和桌面浏览器创建快速、本地化的游戏。

图片 5

  6. FlexieJS

支持CSS3弹性盒子模型(Flexible Box Model)。

图片 6

四、在线工具

此外,还有一些在线工具,可以帮助开发者加快HTML5项目的开发。

1. HTML5 Boilerplate

HTML5Boilerplate 是一个HTML / CSS /JS模板,是实现跨浏览器正常化、性能优化、稳定的可选功能如跨域Ajax和Flash的最佳实践。开发者称之为技巧集合,目的是满足你开发一个跨浏览器,并且面向未来的网站的需求。

图片 7

  2. Switch to HTML5

非常有用的在线工具,可以根据你的喜好生成HTML5文档结构。

图片 8

  3. Initializr

Initializr是一个HTML5模板生成器,以帮助你开始HTML5项目的开发 。它建立在HTML5 Boilerplate之上。

图片 9

  4. HTML5 Visual 速查表

图片 10

  5. HTML5 Canvas 速查表

图片 11

  6. HTML5 笔记

图片 12

  五、其他

你可以通过下面的链接来跟踪HTML5的更新。

HTML5追踪

你可以通过下面的链接获得HTML5网站的设计灵感。这个网站库中包含了大量的使用HTML5技术的网站。

HTML5Gallery

 

赞 3 收藏 评论

图片 13

Adobe、标准和HTML5

2012/05/16 · HTML5 · HTML5

来源:Adobe CS6

“[提供商之间的]最激烈的竞争将与标准密切相关。大部分聪明人的眼睛将紧盯着技术标准。但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭。尽管存在着如此多的风险,标准仍然点燃了无限激情”

—The Economist, 1993年2月23日

在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准。Internet已存在标准,但万维网没有。浏览器的标准化甚至还未起步。

我们现在知道,与最近5年相比,作者在1993年看到的行业和他描述的“无限激情”是一个更加稳定和友好(甚至可能和谐)的时期。

但是,作者表达的观点是,标准(尽管平凡且无趣)是将信息和通信技术(ICT)行业凝聚在一起的黏合剂。标准的关键是互操作性和用户效用——它们现在的主要功能是使复杂、异构的系统可行且可满足用户需要。标准化领域现在比以往更加复杂,这在很大程度上离不开万维网的普遍性,这既提高市场的技术复杂性,也提高用户需要和期望。

万维网基本上基于两种标准——HTML和HTTP。HTML是万维网联盟(W3C)的建议标准,HTTP由Internet工程任务组(IETF)提出。

在这两种标准中,HTML更容易在各种消息中看到,因为它在Web内容的创建上占据主导地位。它是定义网络的基本标记语言的规则。使用HTML,异构系统、供应商和产品之间可以进行互操作。HTML4(HTML5的上一版)在HTML3.2推出之后不久推出,保留了自2000年以来主要的HTML形式。正是在这个时间段(2000年以来),网络发生了显著的商业增长。

但是,与ICT行业的方方面面一样,变化发生了。用户开始期望更复杂的功能,各种工具被创建来响应用户的期望和需求。举例而言,在动画领域出现了各种替代方案,到2005年,Macromedia Flash平台成为了用户所期望的和生产商所提供的交互性事实标准(广告、品牌网站、下拉菜单等)。

在市场的不断变化之中,多家浏览器开发商对复兴和改造HTML提供了一种推动力——自上一个HTML版本发布至今已近5年,整个市场也已改变。新产品包括针对多种平台和屏幕尺寸的开源浏览器和移动浏览器,电子发布和电子媒体变得愈加重要,对视觉增强的需要已然凸显出来。

为了响应此需要,多家浏览器开发商启动了一项创建一个更新的HTML版本(称为HTML5)的工作。该工作在W3C外部启动,但最终会转移到W3C内形成更正式的标准化和知识产权保护。(W3C强制要求W3C建议中包含的所有知识产权免费。通过将规范引入W3C,创建者和他们的赞助公司可确保所有他们(以及所有其他贡献者)无法在以后声明版权或创建一个以IP为围墙的花园)。此工作已创建了最新的HTML规范修订版(HTML5)。因为网络是对我们的客户至关重要的平台,所以Adobe向W3C标准化组织同时提供了HTML5的技术资源和知识产权。

但是,因为Adobe是一家工具开发商,而不是浏览器开发商,我们必须像所有工具开发商一样采用一种不同的方法来实现HTML5。浏览器使用HTML5——也就是说,Web浏览器读取HTML文档,然后将文档组合到一个看得见或听得见的显示界面上。Adobe的主要工作是检查HTML5是否“适合工具”。对于Adobe等工具开发商而言,重要的是规范是明确和无歧义的,所有各种实现都是兼容的,减少了创建针对浏览器呈现差异提供了具体调整的HTML5内容的需要。

作为工具开发商,Adobe专注于编写HTML页面的人和这个人在创建内容时的需要,或者专注于生成HTML页面的流程(服务器、工具)。我们收到的客户和用户反馈表明,用户已认识到行业正处于一个重要的过渡期,因为正在创造“新型网络”。旧知识正在被重新审视,新创意正在经历测试。在网络上生成发布质量输出的用户,习惯于像素特定的设计的用户,必须以不同的方式进行思考。现在他们必须创建自适应且可缩放的内容。所以他们会问自己(和Adobe):您如何控制体验而不控制像素?我们没有听到太多表明该模型是错误的反馈。我们在密切关注着这样一群人,他们尝试获取新工具来执行他们实现富有创意的表达所需的操作。

理想情况下,工具会使创造工作变得更轻松;在这个不断演化的市场中,Adobe面临的一部分挑战是理解用户想从工具中得到什么。用户想要让他们专注于以更快、更轻松、更好或更廉价的方式(或者可预测地,所有上述优势)实现他们的目标的工具。作为工具开发商,Adobe必须高瞻远瞩,摆脱对W3C规范的基本支持。举例而言,性能(包括工具的性能和输出内容的质量)是许多用户的关键考虑因素。如果性能配置文件在不同设备和浏览器之间差别巨大,这可能是与缺乏功能互操作一样巨大的壁垒。随着移动访问变得更加普遍,性能成为了一个尤其重要的问题。

创建Web内容的群体已发展地非常多样性,新标准需要广泛、深入地支持这种多样性。这样做,使Adobe的客户能够拥有生成他们想要的高质量和强大的网站所需的一致性和互操作性。标准所提供的一致通信至关重要,这在它缺乏时非常明显。每个人都还记得(或应该记得)二十世纪90年代中期的Netscape-Microsoft浏览器大战。这是浏览器开发商蓄意添加不兼容竞争对手浏览器的功能的一个事例。这个时代已在一般用户和开发商的抗议中结束。所以,Adobe用户的第一个需求是在这些无处不在的浏览器之间一致的HTML5呈现,一种“编写一次,随处良好运行”模型。

但是,要实现此目标,Adobe在修改和专门化我们的Web产品以利用新功能之前,一直在等待标准的稳定化。我们在开发HTML5工具的过程,还使用了我们跨不同平台(PDF、Flash、HTML、多媒体)的广泛的工具开发经验。与此同时,Adobe的用户可能主要是内容生成者,他们并不真正关心技术规范——他们希望Adobe关注规范,然后开发出最佳的工具供他们表达自己的想法和创造力。他们的问题是,“我们如何使用不断变化的标准所带来的能力表达我们想要什么,我们如何将它们整合到工作流中?”以及,“您能够多快提供这些工具?”

用户需要和需求变得日渐复杂,尤其是在所有一切(比如视频、杂志和电视)变得数字化时。此外,交互式设备的种类比桌面和笔记本时代多得多。现在,屏幕尺寸和文本可见性,以及交互性机制在不同设备上表明应用程序和内容必须采取的形式的方式上各不相同。最近,Adobe展开了一些有趣的讨论,而杂志出版商反馈,他们希望在平板电脑和其他设备上复制他们的高质量印刷出版物。具有类似尺寸的设备类别已然出现。目前,Adobe已开始认识到布局模式可适用于不同的类别。在创建者从一种类别进入另一种时,比如从小型手持设备尺寸进入平板电脑尺寸,再到台式机时,存在一些“断点”。这些设备还有不同的交互模式。用户喜欢与设备独立地创作的想法,但也希望放大每种设备的能力。

与此同时,用户注意到,用户熟悉的丰富的印刷品还未使用HTML5。HTML5/CSS布局标准并不像他们在印刷环境中所熟悉的标准那么完善。为了响应这一区域的用户需要(以及帮助行业创建更丰富的显示效果),Adobe最近向W3C CSS工作组提议了一个CSS3区域模块。另外,由于Adobe客户群的多样性,移动创作在目前对几乎所有客户都至关重要。这已成为了他们的一个重要出路,并且这一趋势正在迅猛地增长(在智能电话和平板电脑上)。例如,Adobe的工具集被出版商用于创作杂志(使用InDesign),我们将为他们提供一种使用标准导出内容并在移动设备上显示的方式。这一切创建满足用户需要的工具紧密相关,而工具离不开稳定的标准。

Adobe用户也关注不断出现的大量规范。再一次,其中一些规范并不仅仅关系到部分客户。它们影响到我们支持什么和不支持什么。作为工具制造商,我们需要满足对有用和适用的工具的需求。我们需要理解用户需求,然后需要确定如何和何时将规范结合起来,使它们变得更强大。当处理CSS区域时,Adobe认识到您可使用它执行有趣的布局,但在与JavaScript结合时能实现更有趣的操作。

Adobe也已开始向WebKit工作做出贡献。上面已经提到,与其说HTML5规范引起了用户的兴趣,倒不如说它们能够实现和运行在HTML5上构建的代码。因此,我们在工具中使用了WebKit,向WebKit引擎贡献了我们的错误修复程序。再次说明,我们旨在通过多种方式使HTML5工具对我们的用户有用。作为我们工作的一个示例,在8月中旬的WebKit提交期间,Adobe的Alexandru Chiculita被得到了如下表彰“……为浮动元素查找添加了 一种新的性能测试 ,它带来了一种优化,在查找浮动元素上带来了大约150%的性能改进。”再次说明,我们旨在通过多种方式使HTML5工具对我们的用户有用。

类似地,借助所有主流浏览器中对SVG的支持,我们注意到我们的用户现在要求Adobe恢复对在已存在多年的Adobe Illustrator中创建SVG的支持。他们还希望我们的所有产品为SVG提供更多支持。此外,来自Adobe实验室的工具Wallaby可从Flash中导出HTML,并同样利用SVG。

矢量图形是构建高保真Web平台的一个重要部分,也是Adobe在网络上实现高保真度呈现的目标的一部分:布局控制、丰富的动画和高质量排印都是缩小差距的重要元素。HTML5有望从“80%的份额”提升到为网络创建富应用程序和内容而“唯一需要的平台”。作为这一推动力量的一部分,有一种使用HTML和CSS创建动画的需要,我们正在开发工具来提供浏览器支持但工具中缺乏的HTML5功能。我们知道我们有能力提供优秀的工具——请访问Adobe Edge,查看来自Adobe的最新示例。

与此同时,我们还开发了The Expressive Web作为供HTML5和CSS开发人员使用的一种资源。因为不是所有浏览器都一致地采用了HTML5的所有功能,我们发现在主流浏览器都认可它们想要使用的大部分功能之前,表明何种功能适用于何处和兼容何种功能(在不兼容时如何做),有助于开发人员实际熟悉HTML5和它的功能,以及它将拥有的缺点。为了帮助用户,Adobe提供了Adobe BrowserLab工具,它允许用户在不同的浏览器和配置上测试Web内容。我们会呈现您的内容,并向您发回图像以显示有效和无效的功能。

在您在浏览器中实现的功能方面,桌面与移动设备之间仍然存在着差距。在设备功能集成或访问上,我们还没有达到相同的丰富程度,但这种差距正在缩小:浏览器中添加了新功能,JavaScript引擎的性能改进了不少。前途是光明的,差距终会消除,但我们还需努力。

我们的传统软件产品拥有悠久的历史,但我们正在努力改进产品来与如今互联的时间更紧密地整合。我们提供了一些试验工作来判断客户反馈,比如在Photoshop Express中,允许通过浏览器和在移动设备上管理图像。您一定会看到我们在此领域的更多成就。

Adobe的意图始终是使用户能够最大化他们的信息和内容的价值和流行。我们不断在开发使对内容的访问更轻松、更迅速、更富表现力和更有价值的工具。因为即使细微的技术更改,对开发工具以及依靠它们的设计人员和开发人员也有巨大的影响,所以Adobe选择比提供试验性呈现器的厂商更缓慢地发展。我们的客户需要摆脱试验,它们希望使用Adobe工具实现此目标。因为我们通过工具来代表我们的用户,所以我们对HTML5的全景拥有与此领域的其他许多厂商不同的独特视角。而且正因为这种不同的、基于工具的视角,我们现在专注于来自W3C的更加成熟和稳定的HTML5建议。

图片 14

作者:Carl Cargill

 

英文原文:

 

赞 收藏 评论

图片 15

H5端呼起摄像头扫描二维码并解析

2016/01/22 · HTML5 · 二维码

本文作者: 伯乐在线 - zhiqiang21 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

2016年6月29日补充:

最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑。也包括与这篇文章相关的。

首先我们应该知道使用h5新提供的属性getUserMedia这个属性,是可以调取系统的摄像头进行拍照或者是摄像的,但是兼容性支持的不好,所以当我们需要获取系统的多媒体权限时我们都不会采用这个属性。

使用<input type="file">标签我们可以间接的呼起系统选择文件的窗口,来读取系统文件。但是在WebView中,因为安卓权限的问题,我们是没办法直接获取读取文件这个操作的。而在原生的浏览器中是不存在这个问题的。所以选择使用这个input的时候一定要注意自己的页面是主要运行在webview中还是浏览器中。如果注意运行在客户端的webvie中,是需要客户端的同学支持的。

在IOS的某些系统版本中也会出现这个问题。具体的可以参考下面的参考文章。
参考文章:

引子:

最近公司项目有个需求,微博客户端中, h5 的页面上的某个按钮能够与native 交互呼起摄像头,扫描二维码并且解析。在非微博客户端中(微信或者是原生浏览器,如:safari)呼起系统的拍照或者上传图片按钮,通过拍照或者上传图片解析二维码。

第二种方案需要在前端 js 解析二维码。这样依赖一个第三方的解析库jsqrcode。这个库已经支持在浏览器端呼起摄像头的操作了,但是依赖一个叫getUserMedia的属性。该属性移动端的浏览器支持的都不是很好,所以只能间接的上传图片的方式解析二维码。

getUserMedia属性兼容浏览器列表:
图片 16

首先感谢 jsqrcode 的开发者,提供这么优秀的解析二维码的代码,为我减少了很大的工作量。jsqrcode 地址:点我

我的代码库地址:点我

1.解决的问题:

1.能够在微博客户端呼起摄像头扫描二维码并且解析;
2.能够在原生浏览器和微信客户端中扫描二维码并且解析;

2.优点:

web端或者是 h5端可以直接完成扫码的工作;

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:开发者需要了解的技巧和工具汇总,H5端呼起摄像

上一篇:浏览器端,HTML5和Unity开发网页游戏的现实 下一篇:rows属性和宽度高度关系研究,那些事儿
猜你喜欢
热门排行
精彩图文