科学网 › 标签 › HTML5

标签: HTML5

相关帖子	版块	作者	回复/查看	最后发表

没有相关内容

相关日志

如何用 Github 免费在线播放你的幻灯？: wshuyi 2019-8-13 15:49; 让你从此摆脱优盘和连接线，潇洒从容走向讲台。需求曾经，我们对于“放幻灯”的刻板印象，是拿着一个优盘，或者举着自己的笔记本电脑走向讲台。经过识别优盘或者连线成功之后，开始播放幻灯片，娓娓道来。最近一段时间，不论是看学生展示，还是听讲座，抑或是参加国际学术会议，我发现越来越多的人，开始摆脱优盘与自己的笔记本电脑，转而使用在线形式来放幻灯了。他们潇洒地走到讲台电脑前，打开浏览器，输入一段网址。然后幻灯就出现了。这样一来，至少有以下几个好处：减少了优盘插拔可能带来的病毒感染避免了电脑连接线不匹配带来的尴尬演讲后，易于分享幻灯我观察了一下，大部分人使用的，都还是 Powerpoint 文件。他们只需要把 PPT 文件寄存在一个公开或者私有的网盘上面，打开即可。但这对于讲台电脑，还是有一些条件限制的。例如，至少需要安装了 Powerpoint 。如果你读过我之前的教程，便会发现相对于 Powerpoint ，我更加偏爱 Reveal.js 这样的 HTML 5 幻灯。因为它可控性强，开源免费，播放环境普遍（只要浏览器），而且还支持从简单的标记语言（例如 Markdown ）转换。我就在想，有没有可能，讲台电脑只需安装一个浏览器，便能播放幻灯呢？经过一番尝试，答案是可以的。我还找到了一个幻灯片共享与托管服务，叫做 slides.com 。它支持导入本地的 Reveal.js 幻灯，在线播放与分享。可问题是，这个在线服务，要收费。于是我就开始琢磨，有没有办法，用免费的文件托管方式，来寄存、放映和分享 Reveal.js 之类的 HTML 5 幻灯？功夫不负有心人，我还真找到了解决方案。我们将要使用的平台，正是在我的系列教程中反复提及的 Github 。幻灯准备为了在 Github 播放幻灯，你首先需要有一个制作好的 Reveal.js 幻灯。关于 Reveal.js 幻灯，我在《如何把思维导图秒变成幻灯？》和《如何用 Markdown 做幻灯？》两篇文章里都为你介绍过。说明一下，《如何把思维导图秒变成幻灯？》一文写作时间较久，当时的工具包，还是 Python 2 。更建议你使用《如何用 Markdown 做幻灯？》一文中较新的 Python 3 代码，来把 Markdown 转换成为幻灯。你还可以用许多第三方工具来生成 Reveal.js 幻灯。在 Reveal.js 官网，对这些工具都有细致的介绍。为了简明起见，本文我们依然使用《如何用 Markdown 做幻灯？》中的幻灯样例。它麻雀虽小，五脏俱全。包含了文字、渐进列表条目、全屏图片、内嵌图片、视频等元素。你可以点击这个链接查看播放效果。幻灯的 Markdown 源代码，你可以从这个 Github 链接下载。按照《如何用 Markdown 做幻灯？》文中的步骤，你可以自己很快地在本地生成 Reveal.js 幻灯。这里，为了方便你使用，我把生成好之后的幻灯打了个压缩包，请你到这个链接下载。解压后，请你先尝试本地打开播放。本地运行无误后，我来给你介绍怎么把它搬到 Github 上，直接在线播放。新建 Github 项目你可以为自己的幻灯，新建一个 Github 项目。本文中，我会详细为你介绍步骤。如果你希望进一步了解 Github 的使用方法和技巧，请参考我这篇《如何高效入门Github？》。你需要在 Github 创建并且登录你的个人账户。在本地计算机，也需要下载安装 Github 的命令行工具包。如果你对命令行操作不熟悉，没关系，请参考我的这一份命令行使用视频教程。在页面左上方，点击绿色的“New”按钮。在设置页面中，输入你想要的 Github 项目名称。本文中，我们使用的是 demo-slides-play-on-github 。点击绿色的 “Create Repository” 按钮，你的新项目就生成了。它大约是这个样子：在上图页面中，点击右侧的“Clone or Download” 按钮。点击右侧的剪贴板图标，复制项目的 HTTPS 地址。打开终端，输入以下命令。其中最后的地址，是你刚才复制来的。粘贴即可。 git clone https://github.com/wshuyi/demo-slides-play-on-github.git 于是，你本地就有了一个新的目录，它和你在 Github 上面新创建的这个项目内容完全一样。让我们打开看看：到了这一步，你就把本地文件夹与远程 Github 项目仓库同步起来了。下面我们就可以把 Reveal.js 幻灯上传。上传幻灯上传的方式非常简单，首先，从之前解压后的压缩包里面，把全部文件拷贝到当前项目文件夹。你本地文件夹就变成了这个样子：下面我们回到终端，执行以下三条指令： gitadd. gitcommit-m init gitpush 执行结果如下：我们回到 Github 项目页面下，刷新。你的幻灯相关文件都在这里了，对吧？下面我们来尝试打开，看能否显示出 HTML 5 幻灯的炫酷效果。尝试打开点击项目页面中的 slide.html 文件。我们期待的，是漂亮的幻灯播放出来。然而，效果却是这个样子的：这是什么东西？它是 HTML 文件源代码。我能用它给观众演示吗？当然不行。你可能有 Github 使用经验，于是有了疑问：能否用“原始文件”(Raw)方式开启 slide.html 呢？很好的问题。但如果你尝试，效果是这样的：虽然显示的结果不同，但依然只是源代码，对实现我们的目标没有什么帮助。这是怎么回事儿呢？其实，这是因为 Github 并不会主动渲染项目中寄存的 HTML 文件。默认设置中，它只会为你呈现它们的原始样貌（源代码）。怎么办？我们的尝试失败了吗？没有。下面这个步骤，才是重点。 Github Pages 回到你的 Github 项目页面。点击 “Settings” 标签栏。滚动页面，找到下面这个位置：默认情况下， Github Pages 选项是关闭的。你需要点击上图中标红的位置，把选项改成这样：保存设置之后，要牢记这个页面中的一行网络地址，下图中已标记。在你的浏览器里面，输入上述网址，接着输入你的 slides.html 文件名称。也就是 https://wshuyi.github.io/demo-slides-play-on-github/slide.html 看看会出现什么：尝试右键前进，看看图片、视频是否都可以正常显示。成功了！后续工作你可能会觉得这套流程有些繁琐。没错。但是，繁琐的简单任务序列，实际上是很好的现象。因为我们可以充分利用所学的 Python 知识。编写脚本，把繁复的工作，变得自动化。这一部分，因为篇幅所限，就不在这里详细说明了。希望你能够举一反三，自己编一个好用的脚本出来。也欢迎你把自己尝试的结果和代码地址发到留言区，分享给大家。小结通过本文的学习，希望你已经了解了以下知识点：如何利用 git 命令，把 Reveal.js 以及类似的 HTML 5 幻灯免费存放在 Github 上如何利用 Github Pages ，直接在线播放和分享 Reveal.js 幻灯这样一个工具，能让你从此摆脱优盘和连接线，潇洒从容走向讲台。在课堂展示或者学术报告中，直接在浏览器输入网址，就开始精彩的讲解汇报。祝你的演讲如虎添翼，大获成功！延伸阅读你可能也会对以下话题感兴趣。点击链接就可以查看。如何高效学 Python ？如何把 Markdown 文件批量转换为 pdf？如何用iPad运行Python代码？如何用Sikuli自动录入成绩？喜欢别忘了点赞。还可以微信关注我的公众号 “玉树芝兰”(nkwangshuyi) 。别忘了加星标，以免错过新推送提示。题图： Photo by Teemu Paananen on Unsplash; 2576 次阅读|0 个评论

html5手机开发cookie的用法总结: hillpig 2015-3-13 15:44; 首先，如果不跨域，发送Ajax请求，例如： $( #btn_login ).on( click, function( event ) { $.ajax({ type: POST, url: serverURL + '/user', dataType: 'json', dataType : 'jsonp', data: { 'nickname': nickname, 'password': password, 'action': 'login' }, error: function(xhr, ajaxOptions, thrownError){ //alert(xhr.status); }, success: function(xml, status, jqxhr) { if('true' == xml.issuccessful){//登录成功 alert(document.cookie); $('#rtnInfo').html(登录已成功,正在跳转...); $(#bkbutton).trigger(click); }else{//登录失败 $('#rtnInfo').html(xml.reason); } } }); }); 服务器Java通过Response写一个cookie: Cookie cookie = new Cookie(cookieName,); cookie.setDomain(your.server.domain); cookie.setPath(/); cookie.setMaxAge(10000); response.addCookie(cookie); 那么alert(document.cookie)结果是：但是如果使用Intel XDK 的Emulate，同样的代码，获取到的结果如下：然后如果用Intel XDK 的Test，或者用Cordova封装到手机上进行测试，结果如下：那说明在手机上 document.cookie访问不到Ajax请求获得的返回的带域名的cookie的。那么是不是可以通过 getResponseHeader获得呢？ success: function(xml, status, jqxhr) { console.log( jqxhr .getResponseHeader(Set-Cookie)); }); 我们通过： http://stackoverflow.com/questions/14362830/cookies-not-sent-in-ajax-request-headers-when-doing-xss-with-cors-access-contro 知道，也是获取不到的。那通过Jquery的cookie插件是否可以呢？我们通过引入http://plugins.jquery.com/cookie/插件： script type=application/javascript src=vendor/jquery.cookie.js /script 发现，通过： $.cookie('go*****') 也是获取不到？那么我们的问题来了，html5做手机开发，怎样使用cookie是最佳实践？我的理解有两个方法：第一个方法，app中不用传统的cookie处理，改用html5的localstorage，可以参考： http://stackoverflow.com/questions/18976319/cordova-on-android-getresponseheaderset-cookie-returns-only-the-last-cookie 即：服务端json数据传回cookie的值，然后存在 local storage中: window.localStorage.setItem(Cookies, data); 在以后的发送Ajax请求都使用： beforeSend:setHeader function setHeader(xhr){ xhr.setRequestHeader('Set-Cookie', window.localStorage.getItem(Cookies));} 第2个办法，我们发现虽然通过js获取不到服务端传回的cookie，但是实际上app的运行时是获取到了的，在以后的请求中实际上是发送了以前传回来的cookie的，故，干脆在js中什么都不干。只是有一个问题，是app中删除不了这个cookie，用户退出登录时，再次让服务器设置cookie为过期。其他的参考: https://software.intel.com/zh-cn/forums/topic/542690#comment-1817112 加我私人微信，交流技术。; 个人分类: js|18156 次阅读|0 个评论

透明计算：英特尔基于HTML5的实现: 热度 1 davidneo 2015-1-26 12:16; 前一篇博文谈了对张院士透明计算的一些想法。后来，受到评论的启发，找到了英特尔的一个网页： link 。这个网页介绍了了一种基于HTML5的透明计算的实现 -- freedom engine： The tool is Freedom-Engine, a solution that frees developers from all obstacles to transparent computing, allowing them to write once and target both mobile and PC devices, including the latest Ultrabook features. Code in the Cloud – no development kits or APIs to install Full HTML5 Support – graphics, audio, input, devices, WebGL, Box2D Deploy to all platforms – HTML5 browsers + Native mobiles, tablets desktop Write Once – input and resolution agnostic commands eliminate porting pain Free To Use – develop, test and distribute your apps, you keep all revenues. 其透明计算的概念跟张院士大致相同，但是实现的技术迥异。计算应用保存在服务器（云端）的概念相同 -- code in the cloud；计算应用运行在各种终端的概念也相同 -- deploy to all platforms。具体实现方面的不同包括：freedom engine的计算应用是基于网络浏览器的 -- 现在主要支持firefox和chrome，这些网络浏览器对应了张院士透明计算概念中的操作系统（被作为计算应用的一部分）；freedom engine的计算应用需要重新开发 -- 使用HTML5和freedom engine提供的API，而张院士透明计算的目标之一是重用（reuse）各操作系统上已存在的计算应用（这也是将操作系统当作计算应用一部分的动机）。 freedom engine的开发环境在云端，程序本身和所需的资源保存在云端，编译在云端，最后生成的应用也在云端。英特尔提供了这个开发环境的演示： link （点击之后需要点击忽略安全证书错误；另外还需要webGL插件）。考虑到国内的网络访问这个链接会有问题，我把Hello Universe的例子截屏了下来：中间的窗口里是代码，右上角是图形显示窗口（图片中正在显示“Hello Universe”，背景是一个旋转的星空图），右下角是系统提示信息（现在显示的是代码编译过程中的提示信息，包括背景星空图的文件名）。另外值得一提的是，这个开发环境本身也是freedom engine的一个计算应用。截图中的开发环境运行在chrome上，chrome运行在一台windows8.1的台式机上。按照透明计算的概念，截图中开发环境也应该能运行在任何一个能运行chrome的设备上，但现实是骨感的。我在自己的ipad和android手机上（华为mate2）都做了测试：打开chrome，输入https://freedom-engine.com/ide.php。测试显示，webGL没有被打开。于是我搜索”how to enable webGL in chrome“。根据网络上提供的信息，我打开了android chrome上的webGL，重新输入网址，没有提示缺少webGL，但是进程卡在了”load freedom engine“这一步上；iOS上的chrome暂时还不支持webGL，但是据说Safari支持，于是我测试了Safari，结果却显示缺少webGL支持。至此，测试的结果是都失败了。在寻找更多关于freedom engine的资料时发现，这个测试版的工具已经被冻结了（在这个网站宣布：http://www.freedom-engine.com/）。原因不明。不过，英特尔没有放弃透明计算的努力，他们又推出了Intel XDK： link 。这个工具的目标跟freedom engine一脉相承： The Intel® XDK provides a comprehensive cross-platform development environment for building hybrid HTML5 apps for mobile phone and tablet devices. HTML5 apps are not limited to smart web pages viewed in a browser, you can also package your HTML5 code and deploy it directly on a mobile device as a locally installed hybrid mobile app . This enables the use of the same distribution and monetization channels as for native mobile apps, in addition to the same app installation and launch experience. 我计划下一步测试这个工具。; 3045 次阅读|2 个评论

图灵机演示软件 V.02 及使用说明: 热度 1 kghao 2011-9-30 22:01; 图灵机演示软件 V.02 及使用说明为直观地了解图灵机的执行过程，我用 HTML5 设计了一个图灵机的执行演示软件，放在博客上同大家共享。欢迎大家使用（给学生讲课很有用），并请提出宝贵意见。图灵机演示软件V.02说明作者：西北大学郝克刚此图灵机演示软件是为直观地了解图灵机的执行过程而设计的。演示软件设计为一个 .html 文件，用浏览器演示。由于浏览器 IE 不支持 HTML5 的 Canvas 功能，本软件只能用 firefox 或 chrome 浏览器观看。这些浏览器可以很容易从它们的官方网站免费下载。演示可用浏览器直接指向链接，或将 .html 文件下载到本机上浏览（见文后附件）。演示软件的界面由图灵机显示窗、控制按钮区和规则显示区三部分组成。画面出现后，按如下步骤进行。 1. 选择用例。软件设计了三个演示用例，可以点击演示： Ⅰ , Ⅱ , Ⅲ（或按键盘的 1 ， 2 ， 3 键）进行选择。 2. 设置初始字。演示用例选择后，在规则区中显示其规则列表，并在图灵机的带子上设置初始字“ 1 ”。可以用点击初始字： + （或按键盘的 ↑上箭头键）来增加初始字的值。以后可以用点击 “ l ”（或按键盘的↓ 下箭头键）来恢复初始字“ 1 ”。 3. 执行。设置初始字后，规则区中适用的规则呈红色。点击向右的三角形图标（或按键盘的回车键 Enter ）图灵机单步执行一步。点击向右的双三角形图标（或按键盘的空格键 Space ）图灵机将自动执行。再点击双杠图标（或按空格键）一次，图灵机将暂停。在自动执行的过程中，可用点击向右并带丨的三角形图标（或按 K 键）加快或还原执行的速度。按照图灵机的规定，在没有适用的规则时，执行将中止。可点击向左并带丨的三角形图标（或按键盘的退格键 Backspace ）回到执行的开始。 4. 显示窗的调整。点击图灵机显示窗左、右下角的三角形（或按键盘的← 左箭头、 → 右箭头）可任意调整显示窗的显示位置。在图灵机自动执行时，会自动调整显示窗的显示位置，不必手工干预。 5. 演示用例 Ⅰ 。二进制数的展开。初始字是一个二进制数。通过图灵机的执行，得到的结果是长度等于此数值的由一串“ 1 ”组成的字。 6. 演示用例 Ⅱ 。求 2 的 x 次方。初始字是一个二进制数 x ，执行结果是 2 x 二进制表示。 7. 演示用例 Ⅲ 。这是对通用图灵机执行的一个示意，本软件并没有真正实现通用图灵机，只是一个简单的表述。当选择演示用例 Ⅲ 后，规则区显示的应当是通用图灵机的规则（本软件只是示意，显示的并不是真正通用图灵机的规则。）当第一次选择 Ⅲ 时，我们演示的是用通用图灵机执行二进制数的展开的例子（相当于演示用例 Ⅰ ）。当再次选择 Ⅲ 时，我们演示的是用通用图灵机执行求 2 的 x 次方的例子（相当于演示用例 Ⅱ ）。在设置初始字的过程中，在图灵机带子上除设置计算的初始字外，还分别把相应（用例 Ⅰ 或 Ⅱ ）的计算规则编码后也放在带子上。可以自动执行来示意计算的过程，最后用点击向右并带丨的三角形图标（或按 K 键）加快执行速度，并最终显示计算结果。附：图灵机演示软件（用 firefox 或 chrome 浏览器浏览）图灵机演示软件 TMshow02.html 演示软件说明 TMshowmanu02.doc 也可使用下述链接： http://mainpage.nwu.edu.cn/hkg/home/games/turing/TMshow02.html http://mainpage.nwu.edu.cn/hkg/home/games/turing/TMshowmanu02.doc; 个人分类: 学术交流|8516 次阅读|1 个评论

HTML 5 增加了图板（canvas）功能请帮我测试: 热度 2 kghao 2011-8-18 22:43; HTML 5 增加了图板（cannvas）功能，有些浏览器支持，但是有些不支持， firefox 肯定支持，IE8 不支持。你用的是什么浏览器，可否顺便帮我测试一下，留言告知结果。正常情况应能看到棋盘，点击落子，显示坐标，听到咯吱声。谢谢！ canvastest.html dada3.wav; 个人分类: 学术交流|3226 次阅读|4 个评论

更多...

帐号		自动登录	找回密码
密码			注册

关闭 安全验证

标签: HTML5

相关帖子

相关日志

关闭安全验证