Skip to content

Commit

Permalink
Add slide of Hachioji.pm 37
Browse files Browse the repository at this point in the history
  • Loading branch information
@hideo55
hideo55 committed Jan 25, 2014
1 parent 55440ed commit 9ad472b
Show file tree
Hide file tree
Showing 4 changed files with 927 additions and 0 deletions.
188 changes: 188 additions & 0 deletions slides/hachiojipm37/css/mosho.css
View file
@@ -0,0 +1,188 @@
/**
* This is a stylesheet for a demo presentation for mosho.js
*
* It is not meant to be a part of mosho.js and is not required by mosho.js.
* I expect that anyone creating a presentation for mosho.js would create their own
* set of styles.
*/


/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

body {
font-family: "Josefin Sans";
font-size: 32px;
line-height: 48px;
color: #fff;
height: 100%;
background: #000;
background: -webkit-radial-gradient(center, ellipse cover, #222 0%, #222 80%, #1a1a1a 100%);
background: -khtml-radial-gradient(center, ellipse cover, #222 0%, #222 80%, #1a1a1a 100%);
background: -moz-radial-gradient(center, ellipse cover, #222 0%, #222 80%, #1a1a1a 100%);
background: -ms-radial-gradient(center, ellipse cover, #222 0%, #222 80%, #1a1a1a 100%);
background: -o-radial-gradient(center, ellipse cover, #222 0%, #222 80%, #1a1a1a 100%);
background: radial-gradient(center, ellipse cover, #222 0%, #222 80%, #1a1a1a 100%);
background-attachment: fixed;
}

h1, h2, h3 {
font-family: "Actor";
font-weight: normal;
}
h1 { font-size: 96px; line-height: 128px; }
h2 { font-size: 72px; line-height: 96px; }
h3 { font-size: 64px; line-height: 72px; }

aside {
font-size: 48px;
}

a {
display: inline-block;
padding: 6px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
color: #acd;
background: rgba(0,0,0,0.15);
font-weight: bold;
text-decoration: none;
-webkit-transition: all 1s ease;
-khtml-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a:hover {
background: rgba(0,0,0,0.25);
}

.mosho-slide {
width: 920px;
padding: 20px;
-webkit-border-radius: 16px;
-khtml-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
border-radius: 16px;
text-align: center;
-webkit-text-shadow: 0 0 16px #fff; /* shadows to simulate blur, why not? */
-khtml-text-shadow: 0 0 16px #fff;
-moz-text-shadow: 0 0 16px #fff;
-ms-text-shadow: 0 0 16px #fff;
-o-text-shadow: 0 0 16px #fff;
text-shadow: 0 0 16px #fff;
color: rgba(255,255,255,0);
opacity: 0.2;
-webkit-transition: all 0.5s ease; /* ease into state changes */
-khtml-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.mosho-slide.mosho-active {
-webkit-text-shadow: none;
-khtml-text-shadow: none;
-moz-text-shadow: none;
-ms-text-shadow: none;
-o-text-shadow: none;
text-shadow: none;
color: rgba(255,255,255,1);
opacity: 1.0;
}

.mosho-slide ul {
list-style: circle;
text-align: left;
width: 650px;
margin: 0 auto;
padding-left: 30px;
}

.mosho-slide ol {
list-style: decimal;
padding-left: 50px;
}

.mosho-slide li {
word-wrap: break-word;
}

.mosho-slide pre {
width: 600px;
text-align: left;
overflow: auto;
white-space: pre-wrap;
word-wrap: break-word;
background-color: #ffffff;
color: #000000;
padding: 5px;
border-radius: 10px;
margin: 15px auto;
line-height: 36px;
}

.mosho-slide p {
margin-bottom: 20px;
}


/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }

@media print {
.str { color: #060; }
.kwd { color: #006; font-weight: bold; }
.com { color: #600; font-style: italic; }
.typ { color: #404; font-weight: bold; }
.lit { color: #044; }
.pun { color: #440; }
.pln { color: #000; }
.tag { color: #006; font-weight: bold; }
.atn { color: #404; }
.atv { color: #060; }
}

104 changes: 104 additions & 0 deletions slides/hachiojipm37/index.html
View file
@@ -0,0 +1,104 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hachioji.pm #36</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="css/mosho.css" rel="stylesheet" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
</head>
<body>
<div id="mosho">
<div data-y="0" data-x="0" id="title" class="mosho-slide">
<h1>Hachioji.pm #36</h1>

<p>2014-01-25</p>

</div>
<div data-roty="90" class="mosho-slide" data-rotz="90" data-y="0" data-x="1200">
<h2>About me</h2>

<!-- data-rotz=90 -->

<ul>
<li>Hideaki Ohno
<ul>
<li>Twitter: @hide_o_55</li>
<li>Hatena: id:hide_o_55</li>
<li>github: hideo55</li>
<li><a href="http://hideo55.github.com/">http://hideo55.github.com/</a></li>
</ul></li>
<li>Favorite Programing Language
<ul>
<li>Perl/C/C++/JavaScript/Go</li>
</ul></li>
</ul>

<!-- data-roty=90 -->

</div>
<div class="mosho-slide" data-y="0" data-x="2400">
<h2>最近作ってるもの</h2>

</div>
<div data-roty="90" class="mosho-slide" data-y="0" data-x="3600">
<h2>FiniteStateEntropy for Perl</h2>

<!-- data-roty=90 -->

</div>
<div data-x="4800" data-y="0" class="mosho-slide">
<h2>FiniteStateEntropyとは</h2>

<ul>
<li>エントロピー圧縮</li>
<li>他の方式
<ul>
<li>ランレングス</li>
<li>スライディング・ディクショナリ(Lempel-Ziv法など)</li>
</ul></li>
</ul>

</div>
<div class="mosho-slide" data-y="800" data-x="0">
<h2>エントロピー圧縮</h2>

<ul>
<li>符号の出現頻度統計から符号長に差のある新たな符号を 割り当てる圧縮方式。</li>
<li>ハフマン符号や算術符号の仲間</li>
</ul>

</div>
<div data-y="800" data-x="1200" class="mosho-slide">
<h2>Compress::<br />FiniteStateEntropy</h2>

<ul>
<li>XS</li>
<li>Module::Build::XSUtilあるので簡単</li>
</ul>

</div>

</div>
<script src="js/mosho.js"></script>
<script type="text/javascript">
mosho.plugin({
name: "scaleActiveSlide",
preShow: function (evt) {
prv = evt.detail.prevSlide;
nxt = evt.detail.nextSlide;
if (prv) { prv.scale(0.25) }
if (nxt) { nxt.scale(4) }
}
});
mosho.init();

try{
window.addEventListener("load",prettyPrint,false);
}catch(e){
window.attachEvent("onload",prettyPrint);
}
</script>
</body>
</html>

0 comments on commit 9ad472b

Please sign in to comment.