some first real presentation slides
This commit is contained in:
Yann Esposito (Yogsototh)
parent
616d295240
commit
c279e4872b
3 changed files with 233 additions and 146 deletions
102
boilerplate.html
102
boilerplate.html
|
|
@ -38,7 +38,7 @@
|
|||
|
||||
<section class="slide">
|
||||
<h1>Category Theory <span class="and">&</span> Programming
|
||||
<div><author style="font-size: .5em">by Yann Esposito
|
||||
<div><author style="font-size: .4em"><em class="base01">by</em> Yann Esposito
|
||||
<div>
|
||||
<twitter style="font-size: .5em">
|
||||
<a href="http://twitter.com/yogsototh">@yogsototh</a>,
|
||||
|
|
@ -60,6 +60,106 @@
|
|||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<h2>Abstraction Example</h2>
|
||||
<p>Something you see very often but in different instances.</p>
|
||||
<p>Once you recognize the notion, you see it almost everywhere.</p>
|
||||
<ul>
|
||||
<li class="slide">Numbers: <em>0</em>,1,2,3,... (3400 BC, real numbers 760 BC)</li>
|
||||
<li class="slide">Rational numbers: \(\frac{p}{q}\) (concept is prehistoric)</li>
|
||||
<li class="slide">Negative numbers: ..., -3, -2, -1, 0, 1, 2, ... (100-50 BC)</li>
|
||||
<li class="slide">Irrational numbers: \(\mathbb{A}\), \(\mathbb{R}\) (500 BC → Pythogoras killed Hippasus because of \(\sqrt{2}\)!)</li>
|
||||
<li class="slide">Complex numbers: \(\mathbb{C}\) (100 AD, then 16th century)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<h2>Numbers ⇒ Set Theory (\(\infty\))</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Numbers</th>
|
||||
<th>Set Theory</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\(\mathbb{N}\): \((+,0)\)</td>
|
||||
<td>Semigroups</td>
|
||||
</tr>
|
||||
<tr class="slide">
|
||||
<td>\(\mathbb{Z}\): \((+,0,\times,1)\)</td>
|
||||
<td>Rings</td>
|
||||
</tr>
|
||||
<tr class="slide">
|
||||
<td>\(\mathbb{Q}\)</td>
|
||||
<td>Fields</td>
|
||||
</tr>
|
||||
<tr class="slide">
|
||||
<td>\(\mathbb{R}\)</td>
|
||||
<td>Complete Fields (<em class="base01">topology</em>)</td>
|
||||
</tr>
|
||||
<tr class="slide">
|
||||
<td>\(\mathbb{C}\)</td>
|
||||
<td>Algebræ</td>
|
||||
</tr>
|
||||
<tr class="slide"><td></td><td>Modules,Vector Spaces, Monoids, ...</td></tr>
|
||||
</table>
|
||||
<p class="slide">More <strong>general</strong>: more things are sets.<br/>
|
||||
<span class="and">&</span> More <strong>precise</strong>: clear distinction between concepts)</p>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<h2>Set Theory ⇒? Category Theory</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Numbers</th>
|
||||
<th>Set Theory (\(\infty\))</th>
|
||||
<th>Category Theory (relations)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\(\mathbb{N}\): \((+,0)\)</td>
|
||||
<td>Semigroups</td>
|
||||
<td>?</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\(\mathbb{Z}\): \((+,0,\times,1)\)</td>
|
||||
<td>Rings</td>
|
||||
<td>?</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\(\mathbb{Q}\)</td>
|
||||
<td>Fields</td>
|
||||
<td>?</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\(\mathbb{R}\)</td>
|
||||
<td>Complete Fields (<em class="base01">topology</em>)</td>
|
||||
<td>?</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\(\mathbb{C}\)</td>
|
||||
<td>Algebræ</td>
|
||||
<td>?</td>
|
||||
</tr>
|
||||
<tr><td></td><td>Modules,Vector Spaces, Monoids, ...</td><td>?</td></tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<h2><span class="yellow">/.*/</span> ⇒? Category Theory</h2>
|
||||
<ul>
|
||||
<li class="slide">Topology ⇒ Category Theory</li>
|
||||
<li class="slide">Quantum Physics ⇒ Category Theory</li>
|
||||
<li class="slide">Logic ⇒ Category Theory</li>
|
||||
<li class="slide"><b>Programming</b> ⇒ Category Theory</li>
|
||||
</ul>
|
||||
<p class="slide">More <strong>general</strong>: more things are sets.<br/>
|
||||
<span class="and">&</span> More <strong>precise</strong>: clear distinction between concepts)</p>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<h2>too much abstraction?</h2>
|
||||
<p>More general <span class="and">&</span> more precise</p>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<h2>Animation, Math & Code</h2>
|
||||
<p>Some math \(\sum_{i=1}^\infty \frac{1}{2^x} = 1 \)</p>
|
||||
|
|
|
|||
|
|
@ -1,53 +1,5 @@
|
|||
/* Solarized palette */
|
||||
/* I won't use completely */
|
||||
.base03 {
|
||||
color: #002b36; }
|
||||
|
||||
.base02 {
|
||||
color: #073642; }
|
||||
|
||||
.base01 {
|
||||
color: #586e75; }
|
||||
|
||||
.base00 {
|
||||
color: #657b83; }
|
||||
|
||||
.base0 {
|
||||
color: #839496; }
|
||||
|
||||
.base1 {
|
||||
color: #93a1a1; }
|
||||
|
||||
.base2 {
|
||||
color: #eee8d5; }
|
||||
|
||||
.base3 {
|
||||
color: #fdf6e3; }
|
||||
|
||||
.yellow {
|
||||
color: #b58900; }
|
||||
|
||||
.orange {
|
||||
color: #cb4b16; }
|
||||
|
||||
.red {
|
||||
color: #dc322f; }
|
||||
|
||||
.magenta {
|
||||
color: #d33682; }
|
||||
|
||||
.violet {
|
||||
color: #6c71c4; }
|
||||
|
||||
.blue {
|
||||
color: #268bd2; }
|
||||
|
||||
.cyan {
|
||||
color: #2aa198; }
|
||||
|
||||
.green {
|
||||
color: #859900; }
|
||||
|
||||
@font-face {
|
||||
font-family: "cmuntt";
|
||||
src: url("fonts/cmuntt.eot");
|
||||
|
|
@ -77,6 +29,38 @@
|
|||
.deck-container {
|
||||
font-family: "ComputerModern", Georgia, serif;
|
||||
/* Header Numbering */ }
|
||||
.deck-container .base03 {
|
||||
color: #002b36; }
|
||||
.deck-container .base02 {
|
||||
color: #073642; }
|
||||
.deck-container .base01 {
|
||||
color: #586e75; }
|
||||
.deck-container .base00 {
|
||||
color: #657b83; }
|
||||
.deck-container .base0 {
|
||||
color: #839496; }
|
||||
.deck-container .base1 {
|
||||
color: #93a1a1; }
|
||||
.deck-container .base2 {
|
||||
color: #eee8d5; }
|
||||
.deck-container .base3 {
|
||||
color: #fdf6e3; }
|
||||
.deck-container .yellow {
|
||||
color: #b58900; }
|
||||
.deck-container .orange {
|
||||
color: #cb4b16; }
|
||||
.deck-container .red {
|
||||
color: #dc322f; }
|
||||
.deck-container .magenta {
|
||||
color: #d33682; }
|
||||
.deck-container .violet {
|
||||
color: #6c71c4; }
|
||||
.deck-container .blue {
|
||||
color: #268bd2; }
|
||||
.deck-container .cyan {
|
||||
color: #2aa198; }
|
||||
.deck-container .green {
|
||||
color: #859900; }
|
||||
.deck-container div {
|
||||
font-family: "ComputerModern", Georgia, serif; }
|
||||
.deck-container .and {
|
||||
|
|
@ -144,7 +128,8 @@
|
|||
list-style: none; }
|
||||
.deck-container body, .deck-container h1, .deck-container h2, .deck-container h3, .deck-container h4, .deck-container #entete, .deck-container .tagname {
|
||||
text-rendering: optimizelegibility;
|
||||
line-height: 1.5em; }
|
||||
line-height: 1.5em;
|
||||
border-color: #586e75; }
|
||||
.deck-container body {
|
||||
font-family: "ComputerModern", Georgia, Palatino, "Century Schoolbook L", "Times New Roman", Times, serif; }
|
||||
.deck-container .article #afterheader {
|
||||
|
|
@ -176,7 +161,7 @@
|
|||
.deck-container p {
|
||||
margin-bottom: 1.2em; }
|
||||
.deck-container blockquote {
|
||||
border: solid 1px #ccccd0;
|
||||
border: solid 1px #586e75;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 4px #073642 inset;
|
||||
background-color: #002934;
|
||||
|
|
@ -206,9 +191,9 @@
|
|||
border-top: 4px double #93a1a1; }
|
||||
.deck-container #liens .active, .deck-container #sousliens {
|
||||
color: #839496;
|
||||
border: #ccccd0 solid 1px;
|
||||
border: #586e75 solid 1px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 2px #ccccd0 inset;
|
||||
box-shadow: 0 0 2px #586e75 inset;
|
||||
background-color: #fdf6e3; }
|
||||
.deck-container #liens .active a, .deck-container #sousliens a {
|
||||
color: #93a1a1; }
|
||||
|
|
@ -252,14 +237,14 @@
|
|||
border: 1px solid #002b36;
|
||||
color: #93a1a1; }
|
||||
.deck-container #clickcomment:hover, .deck-container #choixlang > a:hover, .deck-container #choixrss > a:hover, .deck-container .return > a:hover {
|
||||
border: solid 1px #ccccd0;
|
||||
border: solid 1px #586e75;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 4px #073642 inset;
|
||||
background-color: #002934;
|
||||
color: #a4b2b2;
|
||||
text-shadow: 0 0 2px #ffaaaa; }
|
||||
.deck-container #clickcomment:active, .deck-container #choixlang > a:active, .deck-container #choixrss > a:active, .deck-container .return > a:active {
|
||||
border: solid 1px #ccccd0;
|
||||
border: solid 1px #586e75;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 4px #073642 inset;
|
||||
background-color: #002934;
|
||||
|
|
@ -310,9 +295,9 @@
|
|||
line-height: 3ex;
|
||||
clear: both;
|
||||
color: #839496;
|
||||
border: #ccccd0 solid 1px;
|
||||
border: #586e75 solid 1px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 2px #ccccd0 inset;
|
||||
box-shadow: 0 0 2px #586e75 inset;
|
||||
background-color: #fdf6e3;
|
||||
border-radius: 0; }
|
||||
.deck-container .date .year a {
|
||||
|
|
@ -415,9 +400,9 @@
|
|||
margin-bottom: 2em; }
|
||||
.deck-container .encadre, .deck-container .black, .deck-container .red, .deck-container .shadow {
|
||||
color: #839496;
|
||||
border: #ccccd0 solid 1px;
|
||||
border: #586e75 solid 1px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 2px #ccccd0 inset;
|
||||
box-shadow: 0 0 2px #586e75 inset;
|
||||
background-color: #fdf6e3; }
|
||||
.deck-container .encadre a, .deck-container .black a, .deck-container .red a, .deck-container .shadow a {
|
||||
color: #93a1a1; }
|
||||
|
|
@ -487,7 +472,7 @@
|
|||
margin-bottom: 0; }
|
||||
.deck-container .corps img {
|
||||
max-width: 80%;
|
||||
border: 1px solid #ccccd0;
|
||||
border: 1px solid #586e75;
|
||||
background-color: #002b36;
|
||||
padding: 0.5em;
|
||||
box-shadow: 0 10px 15px #cccccc;
|
||||
|
|
@ -752,7 +737,7 @@
|
|||
color: #93a1a1;
|
||||
font-family: "Lucida Grande", Tahoma; }
|
||||
.deck-container .block {
|
||||
border: solid 1px #ccccd0;
|
||||
border: solid 1px #586e75;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 4px #073642 inset;
|
||||
background-color: #002934;
|
||||
|
|
@ -793,7 +778,7 @@
|
|||
.deck-container #tagcloud {
|
||||
font-size: 0.8em;
|
||||
background: #073642;
|
||||
box-shadow: 0 0 6px #ccccd0;
|
||||
box-shadow: 0 0 6px #586e75;
|
||||
border-radius: 3px;
|
||||
line-height: 2.5em;
|
||||
padding: 2em;
|
||||
|
|
@ -833,7 +818,8 @@
|
|||
font-size: 1em;
|
||||
margin-bottom: 1em; }
|
||||
.deck-container table {
|
||||
border: 1px solid #ccccd0; }
|
||||
border: 1px solid #586e75;
|
||||
width: 100%; }
|
||||
.deck-container table tr td {
|
||||
padding: 2px 0.5em; }
|
||||
.deck-container table tr:nth-child(odd) {
|
||||
|
|
@ -846,7 +832,7 @@
|
|||
padding: 0; }
|
||||
.deck-container p code, .deck-container ul li code, .deck-container ol li code {
|
||||
background: #053440;
|
||||
border: solid 1px #ccccd0;
|
||||
border: solid 1px #586e75;
|
||||
padding: 2px; }
|
||||
.deck-container ul.sameline {
|
||||
list-style: none; }
|
||||
|
|
@ -870,19 +856,19 @@
|
|||
.deck-container a.cut:hover {
|
||||
opacity: 1;
|
||||
background-color: #073642;
|
||||
border-color: #ccccd0;
|
||||
box-shadow: 0 0 3px #ccccd0 inset; }
|
||||
border-color: #586e75;
|
||||
box-shadow: 0 0 3px #586e75 inset; }
|
||||
.deck-container a.cut strong {
|
||||
font-weight: bold; }
|
||||
.deck-container .codehighlight pre {
|
||||
border-left: 4px solid #ccccd0; }
|
||||
border-left: 4px solid #586e75; }
|
||||
.deck-container #social {
|
||||
text-align: left;
|
||||
opacity: 0.3; }
|
||||
.deck-container #social:hover {
|
||||
opacity: 1; }
|
||||
.deck-container .popularblock {
|
||||
width: 30.3333%;
|
||||
width: 30.333%;
|
||||
margin: 0 1.5%;
|
||||
float: left; }
|
||||
.deck-container .popularblock figure {
|
||||
|
|
@ -903,7 +889,7 @@
|
|||
background: #073642; }
|
||||
|
||||
.deck-container {
|
||||
font-size: 2em;
|
||||
font-size: 3em;
|
||||
color: #839496;
|
||||
background-color: #002b36; }
|
||||
.deck-container h1 {
|
||||
|
|
|
|||
|
|
@ -16,39 +16,6 @@ $blue : #268bd2
|
|||
$cyan : #2aa198
|
||||
$green : #859900
|
||||
/* I won't use completely */
|
||||
.base03
|
||||
color: $base03
|
||||
.base02
|
||||
color: $base02
|
||||
.base01
|
||||
color: $base01
|
||||
.base00
|
||||
color: $base00
|
||||
.base0
|
||||
color: $base0
|
||||
.base1
|
||||
color: $base1
|
||||
.base2
|
||||
color: $base2
|
||||
.base3
|
||||
color: $base3
|
||||
.yellow
|
||||
color: $yellow
|
||||
.orange
|
||||
color: $orange
|
||||
.red
|
||||
color: $red
|
||||
.magenta
|
||||
color: $magenta
|
||||
.violet
|
||||
color: $violet
|
||||
.blue
|
||||
color: $blue
|
||||
.cyan
|
||||
color: $cyan
|
||||
.green
|
||||
color: $green
|
||||
|
||||
$behindColor: $base0
|
||||
$mainTextColor: $base0
|
||||
$mainBackgroundColor: $base03
|
||||
|
|
@ -58,7 +25,7 @@ $revealColor: $base1
|
|||
$secondRevealColor: $revealColor
|
||||
$lighterRevealColor: $revealColor + #666
|
||||
$imageBackgroundColor: $mainBackgroundColor
|
||||
$borderColor: #ccccd0
|
||||
$borderColor: $base01
|
||||
$imageBorderColor: $borderColor
|
||||
$mainLinkColor: $mainTextColor
|
||||
$textLinkColor: $base1
|
||||
|
|
@ -97,6 +64,47 @@ $secondTextColor: $base1
|
|||
font-weight: normal
|
||||
font-style: normal
|
||||
|
||||
=selected
|
||||
background: $base01
|
||||
color: $base2
|
||||
|
||||
=darkselected
|
||||
background: $base01
|
||||
color: $base2
|
||||
|
||||
=sc
|
||||
text-transform: uppercase
|
||||
font-size: 0.8em
|
||||
|
||||
=insetbox
|
||||
background: rgba(#000,.05)
|
||||
box-shadow: 0 0 2px #FFF, 0 0 3px #CCC inset
|
||||
border: 1px solid rgba(#000,.1)
|
||||
border-radius: 3px
|
||||
&:hover
|
||||
background: rgba(#000,.1)
|
||||
box-shadow: 0 0 6px #555 inset
|
||||
|
||||
=clearbutton
|
||||
display: block
|
||||
width: 25%
|
||||
cursor: pointer
|
||||
margin: 1em 0
|
||||
padding: 1em
|
||||
font-size: 16px
|
||||
line-height: 1.4em
|
||||
border: 1px solid $mainBackgroundColor
|
||||
color: $lighterText
|
||||
&:hover
|
||||
+innerblock
|
||||
color: $highlightRevealColor
|
||||
text-shadow: 0 0 2px #FAA
|
||||
&:active
|
||||
+innerblock
|
||||
color: $highlightRevealColor
|
||||
text-shadow: 0 0 2px #FAA
|
||||
background: $mainBackgroundColor - #060606
|
||||
|
||||
=italic
|
||||
font-style: italic
|
||||
|
||||
|
|
@ -166,8 +174,40 @@ $secondTextColor: $base1
|
|||
color: $base02
|
||||
color: $base0
|
||||
|
||||
|
||||
.deck-container
|
||||
.base03
|
||||
color: $base03
|
||||
.base02
|
||||
color: $base02
|
||||
.base01
|
||||
color: $base01
|
||||
.base00
|
||||
color: $base00
|
||||
.base0
|
||||
color: $base0
|
||||
.base1
|
||||
color: $base1
|
||||
.base2
|
||||
color: $base2
|
||||
.base3
|
||||
color: $base3
|
||||
.yellow
|
||||
color: $yellow
|
||||
.orange
|
||||
color: $orange
|
||||
.red
|
||||
color: $red
|
||||
.magenta
|
||||
color: $magenta
|
||||
.violet
|
||||
color: $violet
|
||||
.blue
|
||||
color: $blue
|
||||
.cyan
|
||||
color: $cyan
|
||||
.green
|
||||
color: $green
|
||||
|
||||
font-family: "ComputerModern",Georgia,serif
|
||||
div
|
||||
font-family: "ComputerModern",Georgia,serif
|
||||
|
|
@ -190,19 +230,11 @@ $secondTextColor: $base1
|
|||
body
|
||||
+mainColor
|
||||
|
||||
=selected
|
||||
background: $base01
|
||||
color: $base2
|
||||
|
||||
::selection
|
||||
+selected
|
||||
::-moz-selection
|
||||
+selected
|
||||
|
||||
=darkselected
|
||||
background: $base01
|
||||
color: $base2
|
||||
|
||||
pre, code, a.cut
|
||||
font-family: "cmuntt",Incosolata, Monaco, monospace
|
||||
|
||||
|
|
@ -256,6 +288,7 @@ $secondTextColor: $base1
|
|||
body, h1, h2, h3, h4, #entete, .tagname
|
||||
text-rendering: optimizelegibility
|
||||
line-height: 1.5em
|
||||
border-color: $base01
|
||||
|
||||
body
|
||||
font-family: "ComputerModern", Georgia, Palatino, "Century Schoolbook L", "Times New Roman", Times, serif
|
||||
|
|
@ -297,10 +330,6 @@ $secondTextColor: $base1
|
|||
ul
|
||||
padding-left: 1.5em
|
||||
|
||||
=sc
|
||||
text-transform: uppercase
|
||||
font-size: 0.8em
|
||||
|
||||
abbr,
|
||||
acronym
|
||||
+sc
|
||||
|
|
@ -321,35 +350,6 @@ $secondTextColor: $base1
|
|||
#liens .active, #sousliens
|
||||
+secondColor
|
||||
|
||||
=insetbox
|
||||
background: rgba(#000,.05)
|
||||
box-shadow: 0 0 2px #FFF, 0 0 3px #CCC inset
|
||||
border: 1px solid rgba(#000,.1)
|
||||
border-radius: 3px
|
||||
&:hover
|
||||
background: rgba(#000,.1)
|
||||
box-shadow: 0 0 6px #555 inset
|
||||
|
||||
=clearbutton
|
||||
display: block
|
||||
width: 25%
|
||||
cursor: pointer
|
||||
margin: 1em 0
|
||||
padding: 1em
|
||||
font-size: 16px
|
||||
line-height: 1.4em
|
||||
border: 1px solid $mainBackgroundColor
|
||||
color: $lighterText
|
||||
&:hover
|
||||
+innerblock
|
||||
color: $highlightRevealColor
|
||||
text-shadow: 0 0 2px #FAA
|
||||
&:active
|
||||
+innerblock
|
||||
color: $highlightRevealColor
|
||||
text-shadow: 0 0 2px #FAA
|
||||
background: $mainBackgroundColor - #060606
|
||||
|
||||
#liens a
|
||||
border: 1px solid #EEE
|
||||
+insetbox
|
||||
|
|
@ -1039,6 +1039,7 @@ $secondTextColor: $base1
|
|||
|
||||
table
|
||||
border: 1px solid $borderColor
|
||||
width: 100%
|
||||
table tr td
|
||||
padding: 2px .5em
|
||||
table tr
|
||||
|
|
@ -1115,7 +1116,7 @@ $secondTextColor: $base1
|
|||
background: $base02
|
||||
|
||||
.deck-container
|
||||
font-size: 2em
|
||||
font-size: 3em
|
||||
color: $base0
|
||||
background-color: $base03
|
||||
h1
|
||||
|
|
|
|||
Loading…
Reference in a new issue