使用Jupyter notebook作为slide主要有两个方面: 在运行notebook 的时候可以幻灯片播放 这样幻灯片就有了notebook可交互的功能,而notebook就有了幻灯片全屏容易分享可是聚焦的功能 导出HTML版本的幻灯片以方便在其他的地方展示 在运行notebook 的时候可以幻灯片播放 这部分实现主要依靠RISE这个jupyter notebook插件,关于它的使用可以参考它的文档 有时候只想看到结果并分析,notebook有个扩展可以解决这个问题 导出HTML版本的幻灯…
python神器 Jupyter Notbook 简介 Jupyter Notebook是基于网页的用于交互计算的应用程序.其可被应用于全过程计算:开发.文档编写.运行代码和展示结果. Jupyter Notebook官方 简而言之,Jupyter Notebook是以网页的形式打开,可以在网页页面中直接编写代码和运行代码,代码的运行结果也会直接在代码块下显示.如在编程过程中需要编写说明文档,可在同一个页面中直接编写,便于作及时的说明和解释. 组成部分 1,网页应用 网页应用即基于网页形式的.结…
PPT 是个强大的工具,但是笔者的 PPT 制作技术不咋地,所以之前的分享习惯使用 Jupyter Notebook + RISE,这样使用简单的 markdown 格式加上代码就足够做一次代码分享了.由于是纯文本格式的,我们可以放到 git 仓库里做版本控制.甚至你可以在网页里直接运行 python 代码.做好的分享还可以用 Jupyter 导出成 pdf.html等格式分享出去. 本文主要是讲如何使用 Jupyter Notebook + RISE 制作一个分享用的网页 PPT. 安装和使用…
官网:http://lab.hakim.se/reveal-js/#/ github  https://github.com/hakimel/reveal.js 更多资源:6个最好的 HTML5/CSS3 演示(PPT)框架 reveal.js是一个制作3D幻灯片效果的插件,它同时应用最新的web技术,来创建漂亮的html演示效果. reveal.js不依赖其他任何javascript库,是一个独立的javascript插件库.当然,它应用了最新web新技术,所以需要浏览器对CSS 3D变形的支…
前言 最近热衷于Docker,由于这段时间使用Docker来折腾自己的服务器,越来越感觉这是一种及其被应该推广的技术,因此想在公司内部也做一次技术分享.当然,如果只是做的PPT,我就不写这文章了.既然把Docker说这么好,那就想办法用Docker来搭建一个在线的PPT展示网站吧. 寻找合适的工具 在网上搜了一下,发现reveal.js这个工具的展示效果非常好,它基于HTML即可完成在线PPT的制作,而且在移动设备上也有非常好的兼容性,同时也支持直接用markdown语法来写,毫无疑问,这个就是…
reveal.js是一个能够帮助我们很轻易地使用HTML来创建漂亮的演示效果,也就是我们常见的PPT幻灯片.reveal.js不依赖其他任何javascript库,是一个独立的javascript插件库.它提供了多种幻灯片过渡效果,是一个非常棒的在线演示库. reveal.js还拥有许多高级特性,完整安装,某些 reveal.js 的功能,像外部的Markdown和演讲注释,需要演示文稿运行在本地的一个web服务器上,因此需要在nodejs环境下运行,安装node.js以及grunt,稍微比较复…
摘要 还需学习参考的链接  https://www.tuicool.com/articles/2AFFj2j 无意中看到这个插件,很喜欢,可以作用在演讲ppt,幻灯片,用户指引上等.代码简单,易维护 reveal.js不依赖其他任何javascript库,是一个独立的javascript插件库.它提供了多种幻灯片过渡效果,是一个非常棒的在线演示库. reveal.js提供了全屏模式,只需要在键盘上点击 »F« 按键即可进入全屏模式,点击 »ESC« 按键可退出全屏模式. head: <link…
前言 程序员除了会写的一手漂亮的代码,也要求做出风格优雅的PPT,诸如向领导汇报工作.向小组成员反馈项目进展自己的工作等等.就本人而言,做ppt还要去找模板,还需要设计风格,内心是焦灼的.于是乎,我搜到了这样的一款js库,用代码完成ppt,培训期间论文的答辩PPT采用这一方案,得到了领导同事的一致好评.这篇文章简单地讲一下reveal.js的基础知识,我是用了不到两个小时做出了一个ppt,从无到有,个人觉得很简单. 正文 reveal.js是一个专门用来做 HTML 演示文稿的框架.只需要在in…
<body> <a data-reveal-id="myModalDailyModify" data-animation="fade" title="编辑">编辑</a> <div style="position:fixed"> <div id="myModalDailyModify" class="reveal-modal">…
打开 cmd 输入命令 jupyter notebook --generate-config  2.打开配置文件  3.修改路径  转自: https://blog.csdn.net/zw__chen/article/details/78254140…
前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装X,是需要付出一些代价的,不过如果你是一个前端爱好者,理解HTML/CSS,那么就没什么问题了. 看看网上的实例,动手练习练习,分分钟就能上手了. 介绍: impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(…
今天学习的是JS中的if语句,除此之外老师还教给我们switch语句的用法, 我们用来写了简单计算器的算法,如下: <script> var a=prompt("请输入一个数字") var a=parseInt(a) if(!isNaN(a)) { var b=prompt("请输入一个数字") var b=parseInt(b) if(!isNaN(b)) { var c=prompt("请输入加减乘除运算中的一种") switch…
一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;list-style: none;} #div{width: 1180px;height: 405px;bo…
在整个项目中,总共写了1000+的代码,可以更加简单优化的.整个主页交互效果能基本,包括轮播,视频,点击变化形状,移入蒙版,瀑布流加载滑动,旋转等等.轮播导航没有完全做完,暂时做了往右无限推动.个人觉得主要难点是在于对于JS的函数和应用,CSS熟悉了后,主要是重复性工作,JS涉及到一些计算反而比较困难.在整个代码中都有详细的注释,有兴趣的朋友可以看看. 项目下载地址:http://pan.baidu.com/s/1miaVde4 这里是实现点击过后menu形状 “三” 变成“Ⅹ” 共设置了4个d…
1.数据 有如下数据,需要可视化: var dataset = [ 30 , 10 , 43 , 55 , 13 ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些值都不存在于数组 dataset 中.因此,需要用到布局,布局的作用就是:计算出适合于作图的数据.这个过程称为数据转换 2.布局(数据转换) 定义一个布局,返回值赋给变量 pie,此时 pie 可以当做函数使用. var pie = d3.layout.pie(); 将数组 datase…
前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细说吧. 最近同事用CanTK开发了一个基于微信的贺卡制作APP,我虽然没有参与开发,但是提供CanTK和GameBuilder的技术支持,觉得有些东西比较有意思,写几篇博客和大家分享吧.这个贺卡APP完全开源,有需要的朋友可以随意修改和发布. CanTK(Canvas ToolKit)是一个开源的游…
1.html /* movie.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Video</title> <link rel="stylesheet" type="text/css" href="styles/player.css"> </head…
1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Design</title> <link rel="stylesheet" type="text/css" href="styles/list.css"> </head> <body&g…
1. html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cities</title> <link rel="stylesheet" type="text/css" href="styles/format.css"> </head> <body>…
1.html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Man bites dog</title> <link rel="stylesheet" type="text/css" href="styles/story.css"> </head> <…
首先是一个html文档 /* explanation.html */<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Explaining the Doucment Object Model</title> <link rel="stylesheet" type="text/css" href=&qu…
最近在看js编程艺术,照葫芦画瓢,做了一个小网页.作为一枚前端渣渣,遇到了好多坑,在这里就不提了. 首先是html代码 /*gallery.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>image gallery</title> <link rel="stylesheet" type="text…
思想:导航在这里只有两种状态,一种是初始状态.一种是固定布局状态.实现悬浮导航其实就是通过Javascript脚本语言控制导航的两种状态,主要是对两种状态成立条件的判断,明确了这些,实现起来就不会太难. 1.基础页面(HTML+CSS) 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content=&quo…
思想:导航在这里只有两种状态,一种是初始状态.一种是固定布局状态.实现悬浮导航其实就是通过Javascript脚本语言控制导航的两种状态,主要是对两种状态成立条件的判断,明确了这些,实现起来就不会太难. 1.基础页面(HTML+CSS) 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content=&quo…
运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由一段滚动到另一端,会重复 slide:表示由一端滚动到另一端,不会重复 2 direction滚动的方向down.up.left.right 3 loop滚动的次数(当loop=-1表示一直滚动下去,默认为-1) 4 scrollamount设定活动字幕的滚动速度 5 scrolldelay设定活动…
力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. 各连线的长度几乎相等,且尽可能不相交.节点和连线都被施加了力的作用,力是根据节点和连线的相对位置计算的. 根据力的作用,来计算节点和连线的运动轨迹,并不断降低它们的能量,最终达到一种能量很低的安定状态. 力导向图能表示节点之间的多对多的关系. 1. 数据 初始数据如下: var nodes = […
最近同事用CanTK开发了一个基于微信的贺卡制作APP,我虽然没有参与开发,但是提供CanTK和GameBuilder的技术支持,觉得有些东西比较有意思,写几篇博客和大家分享吧.这个贺卡APP完全开源,有需要的朋友可以随意修改和发布. CanTK(Canvas ToolKit)是一个开源的游戏引擎和APP框架,是开发HTML5游戏和APP的利器,如果你喜欢它,请在github上给它加星,您的支持是我们努力的动力:https://github.com/drawapp8/cantk 0.先Show一…
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> td { text-align: center; } </style></head> <body> <p> <select id="yearS…
最近有three网友,问我要不要学习blender,其实我感觉学习一下也无妨,不过花大量时间精通,尚可不必,术业有专攻给别人留一条路吧,哈哈.那我我们就是用ThreeBSP和uv贴图的知识来制作一个定制化的快递柜,先上图,在线案例请点击博客原文. 下面我们来讲解一下这样一个柜子的制作. 1. 主角是一个JSON 这样一个快递柜的核心是JSON数据的创建,有了jSON数据,我们就可以通过循环遍历出柜子,柜门和uv映射关系.那面下面来看看我们的JSON数据(部分代码). var doorArray…
通过补充代码,实现时钟实时显示当前时间:年.月.日.时.分.秒.日期. <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scal…