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