文档章节

HTML5 PPT

jsycwangwei
 jsycwangwei
发布于 2015/04/22 23:09
字数 1131
阅读 78
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="utf-8">


<title>Hornbill</title>



<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


<link rel="stylesheet" href="http://www.lamper.cn/NodeJS/css/reveal.min.css">

<link rel="stylesheet" href="http://www.lamper.cn/NodeJS/css/theme/default.css" id="theme">


<!-- For syntax highlighting -->

<link rel="stylesheet" href="http://www.lamper.cn/NodeJS/lib/css/zenburn.css">


<!-- If the query includes 'print-pdf', use the PDF print sheet -->

<script>

document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );

</script><link rel="stylesheet" href="./Hornbill_files/paper.css" type="text/css" media="print">


<!--[if lt IE 9]>

<script src="lib/js/html5shiv.js"></script>

<![endif]-->

</head>


<body style="transition: -webkit-transform 0.8s ease; -webkit-transition: -webkit-transform 0.8s ease;">

<div class="reveal default center">

    <div style="width: 960px; height: 700px; zoom: 0.842142857142857;">

<!--

<section id="themes">

<h2>Themes</h2>

<p>

Reveal.js comes with a few themes built in: <br>

<a href="?theme=sky#/themes">Sky</a> -

<a href="?theme=beige#/themes">Beige</a> -

<a href="?theme=simple#/themes">Simple</a> -

<a href="?theme=serif#/themes">Serif</a> -

<a href="?theme=night#/themes">Night</a> -

<a href="?#/themes">Default</a>

</p>

<p>

<small>

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <code>&lt;head&gt;</code> using a <code>&lt;link&gt;</code>.

</small>

</p>

</section>

-->

        <section style="top: -40px; display: block;">

        </section>  

        <section style="top: -154px; display: block;">

         <h1>大道至简</h1>

         <h2>javascript的web解决方案</h2>

        </section>

        <section class="stack future" data-previous-indexv="2" style="top: 0px; display: block;">

            <section style="top: -99.5px; display: block;">

             <h3>为什么要重构?我们是在重复造轮子吗?why?</h3>

            </section>

            <section style="top: -165.5px; display: block;">

            <p></p><h3>为什么要分层,传统的MVC架构的不足</h3><p></p>

            <ul>

            <li>C层容易去干M层的活</li>

            <li>前端开发要去学smarty or sth.</li>

            <li>只是显示上的修改也要整体发布</li>

            </ul>

            </section>

            <section class="" style="top: -187px; display: block;">

            <p></p><h3>为什么不使用一些流行的开源程序</h3><p></p>

            <ul>

            <li>我们只关注显示层,开源程序都是通用型程序,对我们来说“太强大了”</li>

            <li>开源程序为了服务端和客户端语法一致,服务端代码是冗余的</li>

            <li>二次开发成本过高</li>

            </ul>

            </section>


</section>

        <section class="stack future" data-previous-indexv="2" style="top: 0px; display: block;">

            <section style="top: -74.5px; display: block;">

             <h3>我们想要什么样的轮子</h3>

            </section>

            <section style="top: -77.5px; display: block;">

             <small>

             <ul>

             <li>对我们来说要足够简单</li>

             <li>要方便扩展</li>

             <li>性能要好</li>

             </ul>

             </small>

            </section>

            <section style="top: -66.5px; display: block;" class="">

             <p>很幸运,我们有Node</p>

            </section>

        </section>

    </div>

    <div>

            <section style="top: -88px; display: block;">hornbill用到的开源程序 

            <p>

            <small>

             <a href="http://nginx.org/" target="_blank"><span data-title="nginx ">nginx </span></a>

             <a href="http://nodejs.org/" target="_blank"><span data-title="Node.js ">Node.js </span></a>

             <a href="https://www.varnish-cache.org/" target="_blank"><span data-title="varnish ">varnish </span></a>


             <a href=""><span data-title="

             formidable/

             uglifyjs/

             less">

             formidable/

             uglifyjs/

             less</span></a>

                 就这些了

            </small>

            </p>

            </section>

    </div>

    <div>

     <section style="top: -134px; display: none;">

     <h2>Hornbill构成</h2>

     <small>

     <ul>

     <li> 

    web     -&gt; Client-Side 的 .js 和 .css ,.less

     </li>

     <li>

server -&gt; Server-Side 的 V和C,基于资源,url动态映射

      </li>

     <li> 

jserver -&gt; 静态文件伺服 .js .css .less 及js动态合并文件

     </li>

     <li> 

cmd -&gt;  js文件的压缩 , less to css生成 ,服务端进程的启动控制

     </li>

     </ul>

     </small>

     </section>

      <section class="stack future" data-previous-indexv="5" style="top: 0px; display: none;">

        <section style="top: -20px; display: block;">先看下代码长什么样子</section> 

        <section style="top: -20px; display: block;">

            <p>C层</p>

             <img src="./Hornbill_files/ppt-s1.png">

            <p style="background:black;color:green">controller/mls.com/guang.js</p>

        </section> 

        <section style="top: -20px; display: block;">

            <p>V层</p>

            <img src="./Hornbill_files/ppt-s-view.png">

        </section> 

          <section style="top: -20px; display: block;">

            <img src="./Hornbill_files/ppt-s-view-repeat-tpl.png">

          </section>  

        <section style="top: -20px; display: block;">

          <p>js长这个样子(AMD)</p>

          <img src="./Hornbill_files/ppt-web-cap.png">

          <p style="background:black;color:green">component/dialog.js</p>

        </section>

        <section style="top: -20px; display: block;" class="">

            <p>css长这个样子 (LESS)</p>

            <img src="./Hornbill_files/ppt-web-less.png">

          <p style="background:black;color:green">less/welcome.less</p>

        </section>

      </section>

      <section style="top: -66.5px; display: none;">

        <p>它们是如何工作的</p>

      </section>

      <section style="top: -40px; display: none;">

      </section>  

      <section style="top: -61.5px; display: block;">

        没有绝对的规则

      </section>  

      <section style="top: -40px; display: block;">


      </section>  


    </div>

<div style="display: block;"><span style="width: 67.3684210526316px;"></span></div><aside style="display: block;"><div class="navigate-left enabled"></div><div class="navigate-right enabled"></div><div></div><div></div></aside><div></div><div></div></div>


<script src="./Hornbill_files/head.min.js"></script>

<script src="./Hornbill_files/reveal.min.js"></script>


<script>


// Full list of configuration options available here:

// https://github.com/hakimel/reveal.js#configuration

Reveal.initialize({

controls: true,

progress: true,

history: true,

center: true,


theme: Reveal.getQueryHash().theme, // available themes are in /css/theme

transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none


// Optional libraries used to extend on reveal.js

dependencies: [

{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },

{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },

{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },

{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },

{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },

{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }

// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }

]

});


</script><script type="text/javascript" src="./Hornbill_files/highlight.js"></script><script type="text/javascript" src="./Hornbill_files/zoom.js"></script><script type="text/javascript" src="./Hornbill_files/notes.js"></script>

</body></html>


jsycwangwei
粉丝 2
博文 60
码字总数 20736
作品 0
南京
高级程序员
私信 提问
加载中
请先登录后再评论。
HTML5移动页面框架--Junior

Junior 是一个前端的框架,用来构建 HTML5 的移动 Web 应用,外观跟原生应用一致,特点: 为移动性能优化的 CSS3 转换 使用 flickable.js 的可滑动旋转效果 集成 backbone.js 视图和路由 CS...

匿名
2013/01/05
4W
5
JS实现的1080p视频解码方案--ORBX.js

ORBX.js是Mozilla、OTOY、Autodesk和南加州大学联合开发的一款基于JavaScript和WebGL的HD编解码器,让1080p视频解码和云游戏都可以完全靠JS完成。这为HTML5高清视频提供了一种纯JavaScript替...

匿名
2013/05/07
2.4K
0
看个片儿不发烫

替换中国大陆主流视频网站的 Flash 播放器为 HTML5 播放器 使用 Mac 的同学都可能碰到过在线看视频引起机子风扇狂转、机身发烫等情况,这是因为 Flash 占用了过多系统资源的缘故。 目前主流视...

匿名
2013/05/12
5.9K
4
价值100W的经验分享: 基于JSPatch的iOS应用线上Bug的即时修复方案,附源码.

限于iOS AppStore的审核机制,一些新的功能的添加或者bug的修复,想做些节日专属的活动等,几乎都是不太可能的.从已有的经验来看,也是有了一些比较常用的解决方案.本文先是会简单说明对比大部分...

ios122
2015/12/07
2K
1
构建web应用前端方面的一点点心得

首先做个自我介绍:馒头。做了大概有3年前端了。 现在一家公司担任前端负责人。平时喜欢研究一些技术,搞点设计什么的~ 去年。利用业余时间做了一个HTML5的在线编辑器,就以这个编辑器为例子...

馒头
2015/12/02
2.1K
10

没有更多内容

加载失败,请刷新页面

加载更多

基于反射实现DBUtils封装(读取数据库数据生成对象或对象集合以及对数据库的CRUD)version2.0

DBUtils version2.0 附带jdbc.properties配置文件 支持操作: 1.加载驱动 2.获取数据库连接对象 3.关闭资源 4.封装通用的更新操作:INSERT UPDATE DELETE 5.封装通用查询单条数据的方法 (JDB...

osc_dh3qbz0a
23分钟前
9
0
标准驼峰命名转数据库字段

碰到一个这样的场景,数据库字段bill_no 代表单据编号,然后返回前端json 是billNo,严格按照驼峰命名法,现在前端需要自定义按照箭头进行排序,但是并不知道数据库字段,所以前端只能给你"...

osc_kvlhvh2u
24分钟前
0
0
突然的立秋

前几天在某app上面耍到说“8月7号就立秋了,等我们再见面就该穿长袖了,不,我们应该不会再见到了”。 就很突然了,今天立秋了。 秋天到了,和夏天的人和事好好道个别吧。 还记得以前,每年的...

osc_z3ivsxnp
25分钟前
8
0
第一届华数杯A题思路分析

** 华数杯a题浅见 需要本文的话请加2574364134 ** 当我刚拿到这个题目的时候,惊呆了,这个不就是2018年国赛的A题吗?2018年的国赛A题是为了进行高温防护,这道题现在就是低温防护服御寒,所...

osc_zken4nb1
26分钟前
0
0
想象自己在前方等自己-纯内心戏

以下为一年级某个时刻的痛苦挣扎,就是个经历而已,记录经历。 论文的初初稿终于在昨天发给了老师。客观的讲我写的真的很差,很多时候感觉自己写不下去了,很多放弃的念头不是一闪而过,而是...

osc_b67rw1ne
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部