-
Notifications
You must be signed in to change notification settings - Fork 4
/
Wordpress.html
157 lines (125 loc) · 5.93 KB
/
Wordpress.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ELNs with Wordpress</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/cci.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<!-- Header logo -->
<!--img style="position:fixed;top:1em;right:1em;" src="img/logo_cci.png" width="15%"-->
<!-- Slide Title -->
<header style="position: absolute;top: 1em; left: 1em; z-index:10;"></header>
<!-- ---------------------- START OF SLIDES -------------------------- -->
<div class="slides">
<section data-menu-title="Title">
<h2>Electronic lab notebooks with Wordpress</h2>
<h4>Erick Martins Ratamero<br>Research Fellow</h4>
</section>
<section data-menu-title="Introduction" data-state="intro0"><style>.intro0 header:after { content: "Introduction"; }</style>
<ul>
<li>These slides: http://tiny.cc/camduWP (redirects to https://erickmartins.github.io/Wordpress.html)</li>
<ul><li>Navigation: arrow keys left and right to navigate</li><li>'m' key to get to navigation menu</li><li>Escape for slide overview</li></ul>
</section>
<section data-menu-title="What is Wordpress?" data-state="intro1z"><style>.intro1z header:after { content: ""; }</style>
<h1>What is Wordpress?</h1>
<h4><i>an online, open source website creation tool written in PHP</i></h4>
<img src="img-wp/wp_site.png">
</section>
<section data-state="intro1"><style>.intro1 header:after { content: "But why Wordpress?"; }</style>
<p>What we'd like from an Electronic Lab Notebook (ELN), according to <a href="http://quantixed.org/2017/04/25/the-soft-bulletin-electronic-lab-notebooks/">Steve</a>:</p>
<ul>
<li>Easy-to-use. Allow adding pictures and notes easily.</li>
<li>Versioning (ability to check edits and audit changes)</li>
<li>Backup and data security</li>
<li>Ability to export and go elsewhere if required</li>
<li>Free or low cost</li>
<li>Integration with existing lab systems if possible</li>
<li>Open software, future development</li>
<li>Clarity over who owns the software, who owns the data, and where the information is stored</li>
<li>Can be deployed for the entire lab</li>
</ul>
</section>
<section data-state="intro1"><style>.intro1 header:after { content: "But why Wordpress?"; }</style>
<p>Most solutions stumble on steps 4, 5 and 7</p>
<p>Self-hosted wiki would solve <i>almost</i> everything - but it fails right out of the gate on step 1</p>
<p>Wordpress is not the only solution that works, but it works! (and if it's good enough for a third of the internet, it's probably good enough for us)</p>
</section>
<section data-menu-title="Introduction to Wordpress: dashboard" data-state="wp1z"><style>.wp1z header:after { content: ""; }</style>
<h1>Introduction to Wordpress</h1>
<h4>Chapter 1: the dashboard</h4>
</section>
<section data-state="wp1"><style>.wp1 header:after { content: "Introducing Wordpress: the dashboard"; }</style>
Let's start by logging in. I have created a training website at <a href="http://k2.mechanochemistry.org/training">k2.mechanochemistry.org/training</a>.<br/>
<img src="img-wp/login.png" width="50%">
</section>
<section data-state="wp1"><style>.wp1 header:after { content: "Introducing Wordpress: the dashboard"; }</style>
Now let's go to the <a href="http://k2.mechanochemistry.org/training/wp-admin/">dashboard</a>.<br/>
<img src="img-wp/dashboard1.png" width="70%">
</section>
<section data-state="wp1" data-transition="none-out"><style>.wp1 header:after { content: "Introducing Wordpress: the dashboard"; }</style>
<img src="img-wp/dashboard2.png" width="70%">
</section>
<section data-state="wp1" data-transition="none-in"><style>.wp1 header:after { content: "Introducing Wordpress: the dashboard"; }</style>
<img src="img-wp/dashboard3.png" width="70%">
</section>
<section data-menu-title="Introduction to Wordpress: posting" data-state="wp2" data-transition="none-out"><style>.wp2 header:after { content: "Introducing Wordpress: publishing a post"; }</style>
<img src="img-wp/post1.png" width="70%">
</section>
<section data-state="wp2" data-transition="none-in"><style>.wp2 header:after { content: "Introducing Wordpress: publishing a post"; }</style>
<img src="img-wp/post2.png" width="70%">
</section>
<section data-state="wp2"><style>.wp2 header:after { content: "Introducing Wordpress: publishing a post"; }</style>
<img src="img-wp/post3.png" width="90%">
</section>
</div> <!-- ---------------------- END OF SLIDES -------------------------- -->
</div>
<!-- Footer -->
<img style="position:fixed;bottom:1em;right:1em;" src="img/logo_WMS.jpg" width="10%">
<!--img style="position:fixed;bottom:1em;left:1em;" src="img/logo_tw.png" width="20%"-->
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
controls: false,
slideNumber: true, //-- Added for development
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/menu/menu.js' }
],
menu: {
hideMissingTitles: true,
themes: false,
transitions: false,
//markers: true,
numbers: true,
openButton: false,
titleSelector: 'span.menu-title',
custom: [
]
}
});
</script>
</body>
</html>