用 HTML5 做簡報,瀏覽器就能播,簡報軟體 bye bye

标签: html5 bye bye | 发表时间:2012-01-28 15:00 | 作者:Mengkuei Hsu
出处:http://www.techbang.com.tw/
HTML5 出現後,除了做出很棒的網路服務,也可以讓你使用 HTML 來製作簡報,如果再搭配 CSS3,那麼做出媲美簡報軟體的成品也不是問題,最好的是,HTML 所做的簡報只需瀏覽器就可以播放,在任何一台電腦上都可以順利使用。小編使用 QuickSlides 進行示範,為大家說明。

不過要使用 HTML5 語言製作簡報對一般人來說可能困難了點,但我們可以藉助 QuickSlides 這個工具,完成一個簡單的 HTML5 簡報後再來修改。QuickSlides 是由 Showdown 和 Slidy 這兩個現有的工具組成,Showdown 是 JavaScript 版的 Markdown,可以讓你直接使用 Markdown 這個輕量 script 語言來撰寫簡報,Showdown會直接把 Markdown 轉成 HTML5 語言。而 Slidy 則是用來美化簡報並且分頁的 JavaScript 和 CSS 程式。

▲ 許多瀏覽器公司的員工都喜歡用 HTML5+CSS3 來製作簡報,如果應用得宜,效果不輸專用軟體編輯的簡報檔案,而且每台電腦都可以播放。

QuickSlides 小檔案

QuickSlides 的使用方式非常簡單,你只要把 QuickSlides 下載後解壓縮,並將所有檔案放在同一個資料夾內,接著你只要利用純文字編輯器編輯資料夾中的 presentation.html 這個檔案即可。更好的是由於 QuickSlides 裡包含了 showdown 這個 JavaScript 版 Markdown,因此我們不需要直接撰寫 HTML 原始碼,只要使用 Markdown 編輯內容即可。至於 Markdown 的基本使用方式可以參考小編之前寫過的 Markdown 介紹文: WriteMonkey:用純文字變一篇Word出來

▲ 透過 showdown 和 slidy,我們可以利用 Markdown 來撰寫簡報檔。

▲ 在 QuickSlides 中,是以「————」作為分頁的依據,其他都用一般的 Markdown 語法撰寫即可。

▲ 要是你不需要花俏的效果,那麼只要 5 分鐘就可以編寫出一份簡報檔。你可以利用空白鍵或是左右鍵來控制簡報的上下頁。

▲ 如果你想要有更好的效果,則可以透過編輯 CSS 的方式美化你的簡報檔。

QuickSlides 的好處除了方便使用,可以在你沒有什麼時間的時候,讓你快速的編寫簡報檔之外,最好的就是它的開放特性,由於它是最常見的網頁檔案,因此只要電腦裡有瀏覽器就可以播放,不需要額外安裝任何軟體,而且也比較不耗費資源。不過 QuickSlides 製作出的簡報除了預設的分頁和字體風格外,並沒有任何的 CSS 風格,如果你想要有更為美觀的網頁簡報檔,就必須自行編輯 style.css 這個檔案,對於 CSS 不熟的使用者可能會花上好一陣時間。

延伸閱讀:

HTML5 網路的大未來,各家瀏覽器的實際應用與未來發展

加入T客邦Facebook粉絲團

相关 [html5 bye bye] 推荐:

用 HTML5 做簡報,瀏覽器就能播,簡報軟體 bye bye

- - T客邦
在 HTML5 出現後,除了做出很棒的網路服務,也可以讓你使用 HTML 來製作簡報,如果再搭配 CSS3,那麼做出媲美簡報軟體的成品也不是問題,最好的是,HTML 所做的簡報只需瀏覽器就可以播放,在任何一台電腦上都可以順利使用. 小編使用 QuickSlides 進行示範,為大家說明. 不過要使用 HTML5 語言製作簡報對一般人來說可能困難了點,但我們可以藉助 QuickSlides 這個工具,完成一個簡單的 HTML5 簡報後再來修改.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息,甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面,主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭. 尽管存在着如此多的风险,标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准.

HTML5漫谈(4)–HTML5应用平台:PhoneGAP

- - HTML5研究小组
(  程宝平 chengbp @gmail.com). http://phonegap.com)按官方说法,是HTML5移动应用平台,它包括两部分:. 1)       应用开发框架:采用Web/HTML5技术编写应用,支持设备能力(如GPS、重力感应等)调用;支持能力插件灵活扩展. 图1 PhoneGAP支持设备能力API列表.

HTML5新特性之CSS+HTML5实例

- - CSDN博客Web前端推荐文章
1、新的DOCTYPE和字符集. HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. HTML5引入了很多新的标签,根据内容和类型的不同,被分为7大类. 语义化标签可以简化HTML页面设计,并且将来搜索引擎在抓取和索引网页的时候,也会利用这些元素的优势. HTML5的宗旨之一就是存在即合理.

HTML5设计原理

- jessie - 蓝色理想
Jeremy Keith在 Fronteers 2010 上的主题演讲 下载PPT(PDF) 观看视频 今天我想跟大家谈一谈HTML5的设计. 主要分两个方面:一方面,当然了,就是HTML5. 我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范.

HTML5的SEO探索

- Amo - HTML5研究小组
所有现代浏览器对HTML5的支持问题不大. HTML5被智能手机浏览器和越来越多的网站广泛的采用,甚至作为最优的选择. 但是,Googlebot,Bidubot等其他搜索引擎呢. 引擎是否会由于HTML5这任何额外因素,在搜索结果中优先推荐您的网站吗. 另一方面,少数搜索引擎会认为所有这些额外的H1标记的是垃圾网站吗.