268 lines
8 KiB
HTML
268 lines
8 KiB
HTML
|
<!doctype html>
|
||
|
|
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=1024" />
|
||
|
|
<title>Das Vier-Seiten-Modell | Präsentation von Nick Singer</title>
|
||
|
|
|
||
|
|
<meta name="description" content="Das Vier-Seiten-Modell einer Botschaft - eine Präsentation von Nick Singer für die BOS Neuburg an der Donau in der Klasse B12Ta" />
|
||
|
|
<meta name="author" content="Nick Singer" />
|
||
|
|
|
||
|
|
<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/vier-seiten-modell.css" rel="stylesheet" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="impress-not-supported">
|
||
|
|
<script src="js/vier-seiten-modell.js"></script>
|
||
|
|
|
||
|
|
<div id="impress">
|
||
|
|
|
||
|
|
<div id="intro" class="step" data-x="-2100" data-y="40" data-z="3000" data-scale="6">
|
||
|
|
<h1>Das Vier-Seiten-Modell</h1>
|
||
|
|
<h4>von Friedemann Schulz von Thun</h4>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="definition-1" class="step" data-x="-5000" data-y="0" data-z="1000" data-scale="1">
|
||
|
|
Jede Aussage beinhaltet 4 Ebenen.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="definition-2" class="step" data-x="-4500" data-y="800" data-z="1000" data-rotate-y="40" data-scale="1">
|
||
|
|
Beeinflussung der Ebenen:
|
||
|
|
<ul>
|
||
|
|
<li>Unbewusst</li>
|
||
|
|
<li>Bewusst</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="definition-3" class="step" data-x="-3000" data-y="00" data-z"1000" data-rotate-y="0" data-scale="1">
|
||
|
|
<ul>
|
||
|
|
<li>Aussprache</li>
|
||
|
|
<li>Gestik</li>
|
||
|
|
<li>Mimik</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="factual-level" class="step side side-stage" data-x="0" data-y="0" data-z="4" data-scale="1">
|
||
|
|
<ul>
|
||
|
|
<li>Informationen</li>
|
||
|
|
<li>Fakten</li>
|
||
|
|
</ul>
|
||
|
|
<div id="factual-level-div" class="content side">
|
||
|
|
<b>Sachebene</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="self-declaration" class="step side side-stage" data-x="408" data-y="0" data-z="111" data-scale="1" data-rotate-y="90">
|
||
|
|
<ul>
|
||
|
|
<li>Werte</li>
|
||
|
|
<li>Ansichten</li>
|
||
|
|
<li>Bedürfnisse</li>
|
||
|
|
</ul>
|
||
|
|
<div id="self-declaration-div" class="content side self-declaration">
|
||
|
|
<b>Selbst-<br/>kundgabe<span></b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="appeal" class="step side side-stage" data-x="518" data-y="0" data-z="-298" data-rotate-y="180" data-scale="1">
|
||
|
|
<ul>
|
||
|
|
<li>Ratschlag</li>
|
||
|
|
<li>Wunsch</li>
|
||
|
|
<li>Anweisung</li>
|
||
|
|
</ul>
|
||
|
|
<div id="appeal-div" class="content side appeal">
|
||
|
|
<b>Appell</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="relation" class="step side side-stage" data-x="110" data-y="0" data-z="-405" data-rotate-y="270" data-scale="1">
|
||
|
|
<ul>
|
||
|
|
<li>Wertschätzung</li>
|
||
|
|
<li>Demütigung</li>
|
||
|
|
</ul>
|
||
|
|
<div id="relation-div" class="content side relation">
|
||
|
|
<b>Beziehung</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="lid-top" class="lid"></div>
|
||
|
|
<div id="lid-bottom" class="lid"></div>
|
||
|
|
|
||
|
|
<div id="conflict" class="step side-stage" data-x="0" data-y="0" data-z="700" data-rotate-x="0" data-rotate-y="270" data-rotate-z="0" data-scale="1">
|
||
|
|
<b>= Konfliktpotential</b>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="example" class="step" data-x="1000" data-y="3000" data-z="1200" data-rotate-x="0" data-rotate-y="90" data-rotate-z="0" data-scale="2">
|
||
|
|
<b>Beispiel:</b> <i>„Was ist das Grüne in der Soße?“</i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="meant" class="step" data-x="2000" data-y="4000" data-z="1200" data-rotate-y="0" data-scale="2">
|
||
|
|
Was kann gemeint sein?
|
||
|
|
<span class="table-center-wrapper">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td><b>Sachebene</b></td>
|
||
|
|
<td></td>
|
||
|
|
<td>Da ist was Grünes.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><b>Selbstkundgabe</b></td>
|
||
|
|
<td></td>
|
||
|
|
<td>Ich weiß nicht, was es ist.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><b>Beziehung</b></td>
|
||
|
|
<td></td>
|
||
|
|
<td>Du wirst es wissen.</td>
|
||
|
|
<tr>
|
||
|
|
</tr>
|
||
|
|
<td><b>Appell</b></td>
|
||
|
|
<td></td>
|
||
|
|
<td>Sag mir, was es ist!</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="understood" class="step" data-x="4400" data-y="4000" data-z="1200" data-rotate-y="0" data-scale="2">
|
||
|
|
Was kann verstanden werden?
|
||
|
|
<span class="table-center-wrapper">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td><b>Sachebene</b></td>
|
||
|
|
<td></td>
|
||
|
|
<td>Da ist was Grünes.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><b>Selbstkundgabe</b></td>
|
||
|
|
<td></td>
|
||
|
|
<td>Mir schmeckt das nicht.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><b>Beziehung</b></td>
|
||
|
|
<td></td>
|
||
|
|
<td>Du bist eine miese Köchin!</td>
|
||
|
|
<tr>
|
||
|
|
</tr>
|
||
|
|
<td><b>Appell</b></td>
|
||
|
|
<td></td>
|
||
|
|
<td>Lass nächstes Mal das Grüne weg!</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="overview-example" class="step" data-x="3200" data-y="4000" data-z="1200" data-rotate-y="0" data-scale="3.2">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="result" class="step" data-x="1000" data-y="3000" data-z="1200" data-rotate-y="40" data-scale="10">
|
||
|
|
<b>Fazit</b>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="questions" class="step" data-x="1000" data-y="3000" data-z="1200" data-rotate-y="40" data-scale="10">
|
||
|
|
<b>Fragen?</b>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="thanks" class="step" data-x="1000" data-y="3000" data-z="1200" data-rotate-y="40" data-scale="10">
|
||
|
|
<b>Vielen Dank!</b>
|
||
|
|
</div>
|
||
|
|
<!--
|
||
|
|
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
|
||
|
|
</div>
|
||
|
|
--!>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
|
||
|
|
Last, but not least.
|
||
|
|
|
||
|
|
To make all described above really work, you need to include impress.js in the page.
|
||
|
|
I strongly encourage to minify it first.
|
||
|
|
|
||
|
|
In here I just include full source of the script to make it more readable.
|
||
|
|
|
||
|
|
You also need to call a `impress().init()` function to initialize impress.js presentation.
|
||
|
|
And you should do it in the end of your document. Not only because it's a good practice, but also
|
||
|
|
because it should be done when the whole document is ready.
|
||
|
|
Of course you can wrap it in any kind of "DOM ready" event, but I was too lazy to do so ;)
|
||
|
|
|
||
|
|
-->
|
||
|
|
<script src="js/impress.js"></script>
|
||
|
|
<script>impress().init();</script>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
|
||
|
|
The `impress()` function also gives you access to the API that controls the presentation.
|
||
|
|
|
||
|
|
Just store the result of the call:
|
||
|
|
|
||
|
|
var api = impress();
|
||
|
|
|
||
|
|
and you will get three functions you can call:
|
||
|
|
|
||
|
|
`api.init()` - initializes the presentation,
|
||
|
|
`api.next()` - moves to next step of the presentation,
|
||
|
|
`api.prev()` - moves to previous step of the presentation,
|
||
|
|
`api.goto( idx | id | element, [duration] )` - moves the presentation to the step given by its index number
|
||
|
|
id or the DOM element; second parameter can be used to define duration of the transition in ms,
|
||
|
|
but it's optional - if not provided default transition duration for the presentation will be used.
|
||
|
|
|
||
|
|
You can also simply call `impress()` again to get the API, so `impress().next()` is also allowed.
|
||
|
|
Don't worry, it wont initialize the presentation again.
|
||
|
|
|
||
|
|
For some example uses of this API check the last part of the source of impress.js where the API
|
||
|
|
is used in event handlers.
|
||
|
|
|
||
|
|
-->
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
|
||
|
|
Now you know more or less everything you need to build your first impress.js presentation, but before
|
||
|
|
you start...
|
||
|
|
|
||
|
|
Oh, you've already cloned the code from GitHub?
|
||
|
|
|
||
|
|
You have it open in text editor?
|
||
|
|
|
||
|
|
Stop right there!
|
||
|
|
|
||
|
|
That's not how you create awesome presentations. This is only a code. Implementation of the idea that
|
||
|
|
first needs to grow in your mind.
|
||
|
|
|
||
|
|
So if you want to build great presentation take a pencil and piece of paper. And turn off the computer.
|
||
|
|
|
||
|
|
Sketch, draw and write. Brainstorm your ideas on a paper. Try to build a mind-map of what you'd like
|
||
|
|
to present. It will get you closer and closer to the layout you'll build later with impress.js.
|
||
|
|
|
||
|
|
Get back to the code only when you have your presentation ready on a paper. It doesn't make sense to do
|
||
|
|
it earlier, because you'll only waste your time fighting with positioning of useless points.
|
||
|
|
|
||
|
|
If you think I'm crazy, please put your hands on a book called "Presentation Zen". It's all about
|
||
|
|
creating awesome and engaging presentations.
|
||
|
|
|
||
|
|
Think about it. 'Cause impress.js may not help you, if you have nothing interesting to say.
|
||
|
|
|
||
|
|
-->
|
||
|
|
|
||
|
|
<!--
|
||
|
|
|
||
|
|
Are you still reading this?
|
||
|
|
|
||
|
|
For real?
|
||
|
|
|
||
|
|
I'm impressed! Feel free to let me know that you got that far (I'm @bartaz on Twitter), 'cause I'd like
|
||
|
|
to congratulate you personally :)
|
||
|
|
|
||
|
|
But you don't have to do it now. Take my advice and take some time off. Make yourself a cup of coffee, tea,
|
||
|
|
or anything you like to drink. And raise a glass for me ;)
|
||
|
|
|
||
|
|
Cheers!
|
||
|
|
|
||
|
|
-->
|
||
|
|
|