大赛技术资源

回到第五届英特尔杯全国大学生软件创新大赛技术支持首页>>



目录

 

HTML5学习

HTML5能做什么
在2012年,使用HTML5和其它最新的Web技术(CSS/JavaScript),我们能做什么?

 

  • 制作图标



http://graphicpeel.com/cssiosicons

 

  • 制作漂亮的按钮





http://lab.simurai.com/

 

  • 幻灯片播放

http://bartaz.github.com/impress.js/#/bored

 

  • 模仿一个Finder/Explorer

http://arronhunt.com/labs/finder/index.html
http://arronhunt.com/labs/explorer/index.html

 

  • 模仿一个iPad

http://alexw.me/ipad2/

 

  • 小游戏

http://agent8ball.com/

http://www.pirateslovedaisies.com/

http://www.cuttherope.ie/

 

  • 3D人体解剖模型

http://www.zygotebody.com/#nav=1.64,106.2,44.23

附:一个3D光影水池

http://madebyevan.com/webgl-water/

 

  • 用JavaScript来生成PDF文件,或者用JavaScript来显示PDF文件(不需插件)

http://snapshotmedia.co.uk/blog/jspdf
http://mozilla.github.com/pdf.js/web/viewer.html

 

  • VNC客户端

在浏览器中连接远程桌面

http://kanaka.github.com/noVNC/

 

  • 用HTML来解释/绘制HTML

http://html2canvas.hertzen.com/

 

  • 用JavaScript来解释执行Python语言(还能跑Ruby, Lua, Scheme等多种其它语言,以及SQLite等)

http://repl.it/

http://syntensity.com/static/sql.html

And alsohttp://projects.nikhilk.net/ScriptSharp

 

  • 用JavaScript来运行NES游戏

http://fir.sh/projects/jsnes/

 

  • 用JavaScript来Boot一个Linux Kernel

http://bellard.org/jslinux/

http://bellard.org/jslinux/tech.html

返回页首

 

基础学习资料

  • HTML5的设计原理

这里有Jeremy Keith的一个演讲--为什么要有HTML5?HTML5的基础设计原则是什么?在这里你能找到这些问题的答案。

中文全文:http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html

视频和幻灯片:http://fronteers.nl/congres/2010/sessions/the-design-of-html5-jeremy-keith

 

  • HTML5演示网站

HTML5功能的在线演示和源码

http://www.html5rocks.com/en/

 

  • HTML5学习资料

http://www.mhtml5.com/resources

返回页首

 

高级学习资料

  • HTML5: 挑战与机遇

观看视频 | 下载培训资料

 

  • HTML5 应用开发及工具运用

观看视频 | 下载培训资料

 

  • HTML5 应用平台概览

观看视频 | 下载培训资料

 

  • 优化 HTML5 引擎,提升用户体验

观看视频 | 下载培训资料

返回页首

 

开发工具

  • RIB

1. 概要介绍

Rapid Interface Builder(RIB)是一个所见即所得(WYSIWYG)的 web app 开发工具。可用来快速生成应用的原型和用户界面,让开发者集中精力于应用逻辑。

通过拖拽即可生成相应 html 和 Javascript 代码;在代码区,你可以查看生成的代码;在预览区你可以预览生成的界面.最后你的设计被导出,你可以专心完成你的应用逻辑。


2. 安装及使用方法

RIB 是基于 web 的开发工具,您可以通过以下几种方式安装使用:(请使用 chrome 或 chromium)

▶ Online:https://01.org/rib/online/

▶ Crx:你可以下载 crx 插件,直接安装到你的 chrome

▶ 本地运行:下载 RIB 最新的code(https://github.com/01org/rib

▪ Linux
在终端进入 rib code 所在目录,输入:google-chrome --enable-file-cookies --allow-file-access-from-files index.html

▪ Windows :直接执行 Rib.bat (目前没有)

这里有一篇文章,详细描述如何使用:https://01.org/rib/documentation/running-rib


3. 下载链接、支持渠道及相关在线资源

发布版:https://01.org/rib/downloads

开发版:https://github.com/01org/rib

注意:开发仍在继续,最好使用最新的开发者稳定版(master 分支)

你可以访问 https://01.org/rib/community,获取更多支持
更多资源请访问我们的主页 https://01.org/rib/

 

  • Web Simulator

1. 工具概要介绍

Web Simulator 是一个开发移动网络应用的小工具。它扩展了 Google Chrome 的开发者工具,支持在多种移动平台上运行和调试网络 API。目前支持 Tizen 1.0 Web API。

特点:

▶ 支持运行和调试流行的 HTML5 网络应用。

▶ 支持通过 Javascript 后端模拟平台 API。目前:Tizen 1.0 Web APIs。

▶ 包含发送应用事件和消息来调试诸如 Geo Location, Accelerometer, Messaging 等功能的配置面板。

▶ 在 Google Chrome 上运行并支持 Web Inspector 开发工具。


2. 安装及使用方法

Web Simulator 能够在多种环境设置下运行,包括独立模式及与其它 SDK 和 IDE 共同运行。

> 2.1 安装 Google Chrome

Web Simulator 运行在 Google Chrome 浏览器中。要使用 Web Simulator,您必须先在开发平台上下载并安装 Google Chrome: http://www.google.com/chrome/

> 2.2 配合 Tizen SDK 使用 Web Simulator

如果您正在为 Tizen 开发应用,Tizen SDK 提供了全套工具,包括在 基于 Eclipse 的 IDE 外的 Web Simulator。整合文档和完整的模拟器。这使得开发者能够使用 Tizen IDE 创造应用并且使用模拟器对这些应用进行运行及调试。如需下载 SDK,请到 Tizen 开发者网站。详情参考下方的文档链接:Using the Simulator with the Tizen SDK。

> 2.3 运行 Web Simulator 独立模式

Web Simulator 对于网络应用开发者的工具包来说是一个不错的组件。无论使用哪款网络内容编辑器或 IDE,您都能够像使用网络浏览器一样加载并调试模拟器中的内容。

请附带下面的参数打开 Google Chrome。(注意为了使这些参数发挥作用,必须在开始前杜绝其它 Chrome 运行)
--allow-access-from-files 允许模拟器的 Javascript API 获取磁盘上的文件访问权限(譬如 config.xml 和应用图标)。
--disable-web-security 允许模拟器运行跨域请求(譬如访问另一台服务器上的地图位置)。

启动脚本(simulator.sh 或 simulator.bat)来打开 Chrome 并开始模拟。


▶ 下载链接、支持渠道及相关在线资源

网站:https://01.org/web-simulator

文档:https://01.org/web-simulator/documentation

下载:https://01.org/web-simulator/downloads

社区(Mailing list 邮件列表和 IRC):https://01.org/web-simulator/community


3. 其他需要分享的资源

在线开发学习资源:

JavaScript
http://www.w3schools.com/js/default.asp

jQuery
http://jquery.com/

返回页首

 

参考资料

  • W3C官方网站

HTML5和其它最新Web标准

http://www.w3.org/

e.g. https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

 

  • W3Schools.com

一个学习Web技术的网站,提供示例的源码的live demo

http://www.w3schools.com/

e.g. http://www.w3schools.com/html5/html5_canvas.asp

 

  • HTML5功能测试网站

测试你的浏览器支持多少HTML5功能

http://www.html5test.com/

 

  • When Can I Use?

桌面和移动浏览器的兼容性测试报告网站

http://caniuse.com/

返回页首

立即加入大赛博客征集

有关编译器优化的更完整信息,请参阅优化通知