ECE slides, final touch
Change-Id: I899033836827a374e43f47a14819ce3ef87d76bb
diff --git a/presentations/EclipseCon Europe 2015/01 Slides/content/index.html b/presentations/EclipseCon Europe 2015/01 Slides/content/index.html
index 810406b..8ed0bd4 100644
--- a/presentations/EclipseCon Europe 2015/01 Slides/content/index.html
+++ b/presentations/EclipseCon Europe 2015/01 Slides/content/index.html
@@ -35,21 +35,13 @@
</div>
<div id="impress">
- <div id="title" class="step slide" data-x="10000" data-y="22000" data-scale="40">
+ <div id="title" class="step slide" data-x="0" data-y="600" data-scale="4">
<div id="i_love">I love scripting</div>
- <div id="copyright" class="bottomright">EclipseCon Europe 2015<br />by Christian Pontesegger</div>
+ <div id="copyright">EclipseCon Europe 2015<br />by Christian Pontesegger</div>
</div>
- <div id="ide-support" class="step slide" data-x="-55" data-y="45" data-scale="0.52">
- </div>
-
- <div id="engines" class="step slide" data-x="60" data-y="45" data-scale="0.52">
- </div>
-
- <div id="bigPicture" class="step slide" data-x="0" data-y="0" >
- <p id="picture_java" class="box eclipse">
- <img src="images/java.png" />
- </p>
+ <div id="bigPicture" class="step slide" data-x="0" data-y="500" data-z="-500" data-rotate-x="-90">
+ <img id="picture_java" src="images/java.png" />
<img id="picture_script1" src="images/script.png" />
<img id="picture_script2" src="images/script.png" />
@@ -76,12 +68,12 @@
<p id="picture_jruby" class="engine box eclipse">JRuby</p>
</div>
- <div id="shell_main" class="step slide background" data-x="0" data-y="-1500">
+ <div id="shell_main" class="step slide background" data-x="0" data-y="-1700">
<h1>An interactive script shell</h1>
<img class="center" src="images/scrn_shell.png" />
</div>
- <div id="shell_jre" class="step slide" data-x="0" data-y="-2500">
+ <div id="shell_jre" class="step slide background" data-x="0" data-y="-2700">
<h1>... with access to the Java runtime</h1>
<div id="jre1" class="code">
<img src="images/shell_java_1.png" />
@@ -94,12 +86,12 @@
</div>
</div>
- <div id="shell_jars" class="step slide" data-x="-700" data-y="-3500">
+ <div id="shell_jars" class="step slide background" data-x="-700" data-y="-3700">
<h1>... your JARs</h1>
<img class="center" src="images/scrn_shell_jars.png" />
</div>
- <div id="shell_eclipse" class="step slide" data-x="700" data-y="-3500">
+ <div id="shell_eclipse" class="step slide background" data-x="700" data-y="-3700">
<h1>... and Eclipse</h1>
<img class="center" src="images/scrn_shell_eclipse.png" />
<p class="bottomright">with all its plug-ins</p>
@@ -110,7 +102,7 @@
<img class="center" src="images/scrn_code_completion.png" />
</div>
- <div id="code_completion_help" class="step slide" data-x="2200" data-y="-1900" data-rotate="45">
+ <div id="code_completion_help" class="step slide background" data-x="2200" data-y="-1900" data-rotate="45">
<h1>... with help tooltips</h1>
<img class="center" src="images/scrn_code_completion_help.png" width="880" />
<img id="coming_soon" src="images/coming_soon.png" width="300" />
@@ -129,24 +121,24 @@
<img class="right" src="images/scrn_modules_explorer.png" />
</div>
- <div id="load_modules" class="step slide" data-x="3000" data-y="0" data-rotate="90">
+ <div id="load_modules" class="step slide background" data-x="3000" data-y="0" data-rotate="90">
<h1>... loaded dynamically during runtime</h1>
<img class="center" src="images/scrn_load_module.png" />
<img id="popup" src="images/scrn_script_popup.png" />
</div>
- <div id="wrap_java_instance" class="step slide" data-x="4000" data-y="-1250" data-rotate="90">
+ <div id="wrap_java_instance" class="step slide background" data-x="4000" data-y="-1250" data-rotate="90">
<h1>Wrap any java object</h1>
<img class="center" src="images/scrn_wrap_instance.png" />
</div>
- <div id="register_pojo" class="step slide" data-x="4000" data-y="0" data-rotate="90">
+ <div id="register_pojo" class="step slide background" data-x="4000" data-y="0" data-rotate="90">
<h1>Register POJOs</h1>
<img id="pojo1" src="images/code_simple_module.png" />
<img id="pojo2" src="images/code_module_extension.png" />
</div>
- <div id="write_modules" class="step slide" data-x="4000" data-y="1250" data-rotate="90">
+ <div id="write_modules" class="step slide background" data-x="4000" data-y="1250" data-rotate="90">
<h1>or write sophisticated modules</h1>
<ul class="center">
<li>select methods/fields to export</li>
@@ -154,16 +146,16 @@
<li>provide method aliases</li>
<li>deprecate methods</li>
</ul>
- <a class="centerbottom" href="http://codeandme.blogspot.co.at/2014/10/writing-modules-for-ease.html">Read the
+ <a target="_blank" class="centerbottom" href="http://codeandme.blogspot.co.at/2014/10/writing-modules-for-ease.html">Read the
detailed tutorial</a>
</div>
- <div id="module_docs" class="step slide" data-x="5000" data-y="-625" data-rotate="90">
+ <div id="module_docs" class="step slide background" data-x="5000" data-y="-625" data-rotate="90">
<h1>Consistent documentation</h1>
<img class="center" src="images/scrn_online_help.png" />
</div>
- <div id="module_docs_build" class="step slide" data-x="5000" data-y="625" data-rotate="90">
+ <div id="module_docs_build" class="step slide background" data-x="5000" data-y="625" data-rotate="90">
<h1>created @ build time</h1>
<img class="center code" src="images/code_build_module_docs.png" />
</div>
@@ -173,12 +165,12 @@
<img class="center" src="images/scrn_launch_configuration.png" />
</div>
- <div id="debug_config" class="step slide" data-x="2200" data-y="1900" data-rotate="135">
+ <div id="debug_config" class="step slide background" data-x="2200" data-y="1900" data-rotate="135">
<h1>Integrated debugger</h1>
<img class="center" src="images/scrn_debugging.png" />
</div>
- <div id="script_libraries" class="step slide background" data-x="0" data-y="1500" data-rotate="180">
+ <div id="script_libraries" class="step slide background" data-x="0" data-y="1700" data-rotate="180">
<h1>Create script libraries</h1>
<img class="left" src="images/scrn_script_explorer.png" />
<ul class="right">
@@ -190,13 +182,13 @@
</ul>
</div>
- <div id="script_repositories" class="step slide" data-x="0" data-y="2500" data-rotate="180">
+ <div id="script_repositories" class="step slide background" data-x="0" data-y="2700" data-rotate="180">
<h1>Share with colleagues</h1>
<img class="center" src="images/scrn_script_locations.png" />
<p class="bottomright">... or the world</p>
</div>
- <div id="script_ui_integration" class="step slide" data-x="0" data-y="3500" data-rotate="180">
+ <div id="script_ui_integration" class="step slide background" data-x="0" data-y="3700" data-rotate="180">
<h1>Enhance your UI</h1>
<div id="toolbar">
<img src="images/scrn_script_ui_toolbar.png" />
@@ -210,7 +202,7 @@
<img src="images/scrn_script_ui_context.png" />
<p>... context menus</p>
</div>
- <a class="bottomright" href="http://codeandme.blogspot.co.at/2014/12/ease-scripts-conquer-ui.html">Read the
+ <a target="_blank" class="bottomright" href="http://codeandme.blogspot.co.at/2014/12/ease-scripts-conquer-ui.html">Read the
detailed tutorial</a>
</div>
@@ -221,7 +213,7 @@
</div>
<img id="charts1" src="images/scrn_simple_chart.png" />
<img id="charts2" src="images/scrn_advanced_chart.png" />
- <a class="bottomright" href="http://codeandme.blogspot.co.at/2015/04/live-charting-with-ease.html">Read the detailed tutorial</a>
+ <a target="_blank" class="bottomright" href="http://codeandme.blogspot.co.at/2015/04/live-charting-with-ease.html">Read the detailed tutorial</a>
</div>
<div id="unit_tests" class="step slide background" data-x="-2000" data-y="0" data-rotate="270" >
@@ -233,7 +225,7 @@
<li>Reporting</li>
<li>integrates with Hudson/Jenkins</li>
</ul>
- <a class="bottomright" href="http://codeandme.blogspot.co.at/2015/05/unit-testing-with-scripts-in-ease.html">Read
+ <a target="_blank" class="bottomright" href="http://codeandme.blogspot.co.at/2015/05/unit-testing-with-scripts-in-ease.html">Read
the detailed tutorial</a>
</div>
@@ -242,19 +234,19 @@
<img class="center" src="images/code_invoke_java.png" />
</div>
- <div id="java_load" class="step slide" data-x="-2200" data-y="-1900" data-rotate="315">
+ <div id="java_load" class="step slide background" data-x="-2200" data-y="-1900" data-rotate="315">
<h1>... load classes from workspace</h1>
<img class="center" src="images/scrn_compile_class.png" />
</div>
- <div id="java_invoke" class="step slide" data-x="-2900" data-y="-2600" data-rotate="315">
+ <div id="java_invoke" class="step slide background" data-x="-2900" data-y="-2600" data-rotate="315">
<h1>INVOKE !</h1>
<img class="center" src="images/scrn_invoke_java.png" />
<img id="java_result" src="images/scrn_invoke_result.png" />
<p class="bottomright">... and we do not launch a new JRE.</p>
</div>
- <div id="engine_integration" class="step slide" data-x="-3000" data-y="-4000" >
+ <div id="engine_integration" class="step slide background" data-x="0" data-y="-5000" data-rotate="360">
<h1>Supported engines</h1>
<table class="center">
<tr>
@@ -323,19 +315,17 @@
</table>
</div>
-
-
- <div id="conclusion" class="step slide" data-x="10000" data-y="8000" data-scale="40">
+ <div id="conclusion" class="step slide" data-x="0" data-y="100" data-scale="3" data-rotate-x="-20">
<div>That's why</div>
</div>
- <div id="get_in_touch" class="step slide" data-x="80000" data-y="8000" data-scale="40">
+ <div id="get_in_touch" class="step slide background" data-x="0" data-y="-500" data-z="500" data-rotate-x="-90">
<h1>Get in touch</h1>
- <p id="link1" class="center"><a href="https://eclipse.org/ease">eclipse.org/ease</a></p>
- <p id="link2" class="center"><a href="https://codeandme.blogspot.com">codeandme.blogspot.com</a></p>
+ <p id="link1" class="center"><a target="_blank" href="https://eclipse.org/ease">eclipse.org/ease</a></p>
+ <p id="link2" class="center"><a target="_blank" href="https://codeandme.blogspot.com">codeandme.blogspot.com</a></p>
</div>
- <div id="evaluation" class="step slide" data-x="170000" data-y="8000" data-scale="40">
+ <div id="evaluation" class="step slide" data-x="0" data-y="-500" data-z="1500" data-rotate-x="-90">
<img class="center" src="images/evaluation.png" />
</div>
diff --git a/presentations/EclipseCon Europe 2015/01 Slides/content/style.css b/presentations/EclipseCon Europe 2015/01 Slides/content/style.css
index 3baa67f..cc93326 100644
--- a/presentations/EclipseCon Europe 2015/01 Slides/content/style.css
+++ b/presentations/EclipseCon Europe 2015/01 Slides/content/style.css
@@ -34,15 +34,6 @@
list-style: none;
}
-blockquote, q {
- quotes: none;
-}
-
-blockquote:before, blockquote:after, q:before, q:after {
- content: '';
- content: none;
-}
-
table {
border-collapse: collapse;
border-spacing: 0;
@@ -74,9 +65,8 @@
*/
a {
color: blue;
- text-decoration: underline;
- padding: 0 0.1em;
- text-shadow: -1px -1px 2px rgba(100, 100, 100, 0.9);
+ text-decoration: none;
+ padding: 5px 10px 5px 10px;
border-radius: 0.2em;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
@@ -86,11 +76,137 @@
}
a:hover, a:focus {
- background: rgba(255, 255, 255, 1);
+ background: #ffffef;
text-shadow: -1px -1px 2px rgba(100, 100, 100, 0.5);
+ box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
}
/*
+ slide headers
+*/
+h1 {
+ font-size: 1.5em;
+ text-align: center;
+ color: #444466;
+
+ padding-top: 50px;
+}
+
+/*
+ tables
+*/
+table {
+ font-size: 0.6em;
+ border-collapse: collapse;
+}
+
+td {
+ border: 1px solid #ccc;
+ text-align: center;
+ vertical-align: bottom;
+ padding: 5px 20px 5px 20px;
+}
+
+tr:nth-child(even) {
+ background: #d8d89e;
+}
+
+/*
+ rotated table headers
+*/
+th.rotate {
+ /* Something you can count on */
+ height: 70px;
+ white-space: nowrap;
+}
+
+th.rotate > div {
+ transform:
+ /* Magic Numbers */
+ translate(10px, 20px)
+ /* 45 is really 360 - 45 */
+ rotate(300deg);
+ width: 50px;
+}
+
+th.rotate > div > span {
+ padding: 5px 10px;
+}
+
+/*
+ general stuff
+*/
+img {
+ max-height: 450px;
+}
+
+li {
+ margin-top: 10px;
+}
+
+ul {
+ list-style-image: url('images/bullet.png');
+}
+
+/*
+ Source code styling
+*/
+div.code {
+ background-image: url("images/script.png");
+ background-repeat: no-repeat;
+ background-size: 32px 32px;
+ background-position: 10px 10px;
+ padding-left: 60px;
+}
+
+.code {
+ background: white;
+ border: 1px solid black;
+ border-radius: 5px;
+ padding: 5px 10px 5px 10px;
+}
+
+/*
+ Locations on a slide
+*/
+.left {
+ position: absolute;
+ left: 80px;
+
+ top: 55%;
+ transform: translate(0%, -50%);
+}
+
+.right {
+ position: absolute;
+ right: 80px;
+
+ top: 55%;
+ transform: translate(0%, -50%);
+}
+
+.bottomright {
+ position: absolute;
+ right: 80px;
+ bottom: 50px;
+}
+
+.center {
+ position: fixed;
+ top: 55%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.centerbottom {
+ position: fixed;
+ bottom: 50px;
+ left: 50%;
+ transform: translate(-50%, 0%);
+}
+
+
+/*
All of the content will be still fully accessible for them, but I want
them to know that they are missing something - that's what the demo is
about, isn't it?
@@ -147,41 +263,6 @@
box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}
-.background {
- background: #ffffc7;
-}
-
-/*
- ... and we enhance the styles for impress.js.
-
- Basically we remove the margin and make inactive steps a little bit transparent.
-*/
-.impress-enabled .step {
- margin: 0;
-}
-
-.impress-enabled .step * {
- opacity: 0.4;
- -webkit-transition: opacity 1s;
- -moz-transition: opacity 1s;
- -ms-transition: opacity 1s;
- -o-transition: opacity 1s;
- transition: opacity 1s;
-}
-
-.impress-enabled .step.active * {
- opacity: 1;
- -webkit-transition: opacity 1s;
- -moz-transition: opacity 1s;
- -ms-transition: opacity 1s;
- -o-transition: opacity 1s;
- transition: opacity 1s;
-}
-
-/*
- These 'slide' step styles were heavily inspired by HTML5 Slides:
- http://html5slides.googlecode.com/svn/trunk/styles.css
-*/
.slide {
display: block;
width: 900px;
@@ -196,65 +277,48 @@
letter-spacing: -1px;
}
-/*
- The last step is an overview.
- There is no content in it, so we make sure it's not visible because we want
- to be able to click on other steps.
-
-*/
-#overview {
- display: none
+.background {
+ background: #ffffc7;
}
/*
- We also make other steps visible and give them a pointer cursor using the
- `impress-on-` class.
+ ... and we enhance the styles for impress.js.
*/
-.impress-on-overview .step {
+.impress-enabled .step {
+ opacity: 0;
+ -webkit-transition: opacity 1s;
+ -moz-transition: opacity 1s;
+ -ms-transition: opacity 1s;
+ -o-transition: opacity 1s;
+ transition: opacity 1s;
+
+ margin: 0;
+}
+
+.impress-enabled .step.active {
opacity: 1;
- cursor: pointer;
+ -webkit-transition: opacity 1s;
+ -moz-transition: opacity 1s;
+ -ms-transition: opacity 1s;
+ -o-transition: opacity 1s;
+ transition: opacity 1s;
}
+.impress-enabled .step.past {
+ opacity: 0.6;
+}
+
+#title {
+ opacity: 1;
+}
+
+#bigPicture.step.past {
+ opacity: 0;
+}
+
/*
Now, when we have all the steps styled let's give users a hint how to navigate
around the presentation.
-
- The best way to do this would be to use JavaScript, show a delayed hint for a
- first time users, then hide it and store a status in cookie or localStorage...
-
- But I wanted to have some CSS fun and avoid additional scripting...
-
- Let me explain it first, so maybe the transition magic will be more readable
- when you read the code.
-
- First of all I wanted the hint to appear only when user is idle for a while.
- You can't detect the 'idle' state in CSS, but I delayed a appearing of the
- hint by 5s using transition-delay.
-
- You also can't detect in CSS if the user is a first-time visitor, so I had to
- make an assumption that I'll only show the hint on the first step. And when
- the step is changed hide the hint, because I can assume that user already
- knows how to navigate.
-
- To summarize it - hint is shown when the user is on the first step for longer
- than 5 seconds.
-
- The other problem I had was caused by the fact that I wanted the hint to fade
- in and out. It can be easily achieved by transitioning the opacity property.
- But that also meant that the hint was always on the screen, even if totally
- transparent. It covered part of the screen and you couldn't correctly clicked
- through it.
- Unfortunately you cannot transition between display `block` and `none` in pure
- CSS, so I needed a way to not only fade out the hint but also move it out of
- the screen.
-
- I solved this problem by positioning the hint below the bottom of the screen
- with CSS transform and moving it up to show it. But I also didn't want this move
- to be visible. I wanted the hint only to fade in and out visually, so I delayed
- the fade in transition, so it starts when the hint is already in its correct
- position on the screen.
-
- I know, it sounds complicated ... maybe it would be easier with the code?
*/
.hint {
/*
@@ -312,17 +376,7 @@
}
/*
- There is one funny thing I just realized.
-
- Thanks to this workaround above everything except #impress element is invisible
- for click events. That means that the hint element is also not clickable.
- So basically all of this transforms and delayed transitions trickery was probably
- not needed at all...
-
- But it was fun to learn about it, wasn't it?
-*/
-
-/*
+ ================================================================================
And now we start to style each step separately.
I agree that this may be not the most efficient, object-oriented and
@@ -334,154 +388,52 @@
*/
/*
- Slide: IDE Support (ide-support)
-
- Display Eclipse & supported scripting IDEs
+ Slides without borders & background
*/
+.impress-on-title .step.active {
+ background: none;
+
+ border-width: 0px;
+ box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
+}
-.impress-on-ide-support .step #picture_eclipse,
-.impress-on-ide-support .step #picture_eclipse *,
-.impress-on-ide-support .step .ideSupport
-{
- opacity: 1;
+.impress-on-conclusion .step.active {
+ background: none;
+
+ border-width: 0px;
+ box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
+}
+
+.impress-on-evaluation .step.active {
+ background: none;
+
+ border-width: 0px;
+ box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
}
/*
- Slide: Engine Support (engines)
-
- Display Eclipse & supported script engines
+ Slide: 'I love scripting'
*/
-
-.impress-on-engines .step #picture_eclipse,
-.impress-on-engines .step #picture_eclipse *,
-.impress-on-engines .step .engine
-{
- opacity: 1;
-}
-
-.impress-on-conclusion .step #title,
-.impress-on-conclusion .step #title *
-{
- opacity: 1;
-}
-
-
-.top {
- position: absolute;
- top: 20px;
-}
-.bottom {
- position: absolute;
- bottom: 20px;
-}
-.left {
- position: absolute;
- left: 80px;
-
- top: 55%;
- transform: translate(0%, -50%);
-}
-.right {
- position: absolute;
- right: 80px;
-
- top: 55%;
- transform: translate(0%, -50%);
-}
-
-.bottomright {
- position: absolute;
- right: 80px;
- bottom: 50px;
-}
-
-h1 {
- font-size: 1.5em;
+#title #i_love {
+ font-family: 'Marck Script', cursive;
+ font-size: 2.5em;
text-align: center;
color: #444466;
- padding-top: 50px;
+ padding-top: 200px;
+}
+
+#title #copyright {
+ font-size: 0.8em;
+
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, 0%);
}
-div.code {
- background-image: url("images/script.png");
- background-repeat: no-repeat;
- background-size: 32px 32px;
- background-position: 10px 10px;
- padding-left: 60px;
-}
-.code {
- background: white;
- border: 1px solid black;
- border-radius: 5px;
- padding: 5px 10px 5px 10px;
-}
-
-li {
- margin-top: 10px;
-}
-
-.center {
- position: fixed;
- top: 55%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-
-.centerbottom {
- position: fixed;
- bottom: 50px;
- left: 50%;
- transform: translate(-50%, 0%);
-}
-
-th.rotate {
- /* Something you can count on */
- height: 70px;
- white-space: nowrap;
-}
-
-th.rotate > div {
- transform:
- /* Magic Numbers */
- translate(10px, 20px)
- /* 45 is really 360 - 45 */
- rotate(300deg);
- width: 50px;
-}
-
-th.rotate > div > span {
- padding: 5px 10px;
-}
-
-table {
- font-size: 0.6em;
- border-collapse: collapse;
-}
-
-td {
- border: 1px solid #ccc;
- text-align: center;
- vertical-align: bottom;
-}
-
-td {
- padding: 5px 20px 5px 20px;
-}
-
-tr:nth-child(even) {
- background: #d8d89e;
-}
-
-img {
- max-height: 450px;
-}
-
-ul {
- list-style-image: url('images/bullet.png');
-}
/*
Slide: 'Shell JRE access'
*/
@@ -560,21 +512,6 @@
right: 40px;
}
-/*
- Slide: 'I love scripting'
-*/
-#title #i_love {
- font-family: 'Marck Script', cursive;
- font-size: 2.5em;
- text-align: center;
- color: #444466;
-
- padding-top: 200px;
-}
-
-#title #copyright {
- font-size: 0.8em;
-}
/*
Slide: 'Conclusion'
@@ -715,23 +652,13 @@
}
#picture_java {
- left: 20px;
- top: 20px;
-
- width: 860px;
- height: 660px;
-
- border: 1px solid #8C6C9C;
- background: linear-gradient(to bottom, #FFFFEE, #FFFFCC);
- color: #330066;
- font-size: 20px;
-}
-
-#picture_java img {
width: 15%;
height: 15%;
- margin-top: 550px;
+ position: absolute;
+ top: 575px;
+ left: 50%;
+ transform: translate(-50%, 0%);
}
#picture_ease {
@@ -801,4 +728,5 @@
font-size: 20px;
}
+
\ No newline at end of file
