more info, better structured
This commit is contained in:
parent
2703d21168
commit
58f63c569a
2 changed files with 93 additions and 32 deletions
122
info/index.html
122
info/index.html
|
|
@ -16,8 +16,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<html manifest="manifest.appcache">
|
||||
<head>
|
||||
<title>Die Zeit im Wort - Informationen</title>
|
||||
<script type="text/javascript" src="../jquery-2.0.3.min.js"></script>
|
||||
<script type="text/javascript" src="../jquery-ui-1.10.3.custom.min.js"></script>
|
||||
<script type="text/javascript" src="../jquery-2.1.0.min.js"></script>
|
||||
<script type="text/javascript" src="../jquery-ui-1.10.4.custom.min.js"></script>
|
||||
<script type="text/javascript" src="../jquery-cookie-1.4.0.js"></script>
|
||||
<script type="text/javascript" src="../uhr.js"></script>
|
||||
<script type="text/javascript" src="../uhr-de_CH.js"></script>
|
||||
|
|
@ -29,24 +29,46 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<link rel="stylesheet" type="text/css" href="../uhr-green.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../uhr-red.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../uhr-white.css" />
|
||||
<link rel="stylesheet" type="text/css" href="info.css" />
|
||||
<link rel="shortcut icon" type="image/png" href="../favicon.png" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Die Zeit im Wort</h1>
|
||||
<h2>Was soll das?</h2>
|
||||
<h1 id="main-title">Die Zeit im Wort</h1>
|
||||
<nav>Inhalt:
|
||||
<ol>
|
||||
<li><a href="#about">Was soll das?</a></li>
|
||||
<li><a href="#the-clock">Die Uhr</a>
|
||||
<ol>
|
||||
<li><a href="#requirements">Benötigte Bibliotheken</a></li>
|
||||
<li><a href="#include-in-html">Einbinden in HTML</a>
|
||||
<ol>
|
||||
<li><a href="#js-and-css-in-head">Javascript- und CSS-Dateien im <code><head></code></a></li>
|
||||
<li><a href="#clock-element">Uhr-Element auf der Seite</a></li>
|
||||
<li><a href="#initialize">Uhr initialisieren</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li><a href="#configuration">Konfiguration</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li><a href="#information">Informationen</a></li>
|
||||
<li><a href="#license">Lizenzbestimmungen</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h2 id="about">Was soll das?</h2>
|
||||
<p>Hallo, Besucher!</p>
|
||||
<p>Hier gibt's vertiefte Informationen über diese Uhr, die dir sagt,
|
||||
wie spät es ist. Hier erfährt du, wie du sie selber auf deiner
|
||||
Website einbauen kannst. Denn das darfst du gerne tun, solange du
|
||||
dich dabei an die Regeln der <a href="#lizenz">Lizenz</a> hältst.</p>
|
||||
<p><a href="..">Das interessiert mich nicht, ich will zurück zur grossen Uhr!</a></p>
|
||||
|
||||
<h2 id="uhr-titel">Die Uhr</h2>
|
||||
<h2 id="the-clock">Die Uhr</h2>
|
||||
<div id="uhr1"></div>
|
||||
<h3>Benötigte Bibliotheken</h3>
|
||||
<h3 id="requirements">Benötigte Bibliotheken</h3>
|
||||
<ul>
|
||||
<li><a href="http://jquery.com/download/">jQuery</a> (getestet mit Version 2.0.3)</li>
|
||||
<li><a href="http://jqueryui.com/download/">jQuery-UI</a> (getestet mit Version 1.10.3) mit folgenden Komponenten:
|
||||
<li><a href="http://jquery.com/download/">jQuery</a> (getestet mit Version 2.1.0)</li>
|
||||
<li><a href="http://jqueryui.com/download/">jQuery-UI</a> (getestet mit Version 1.10.4) mit folgenden Komponenten:
|
||||
<ul>
|
||||
<li>core</li>
|
||||
<li>widget</li>
|
||||
|
|
@ -54,34 +76,68 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
</li>
|
||||
<li><a href="https://github.com/carhartl/jquery-cookie/releases">jQuery-cookie</a> (getestet mit Version 1.4.0)</li>
|
||||
</ul>
|
||||
<h3>Einbinden in HTML</h3>
|
||||
<h3>Konfiguration</h3>
|
||||
<h3 id="include-in-html">Einbinden in HTML</h3>
|
||||
<h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code><head></code></h4>
|
||||
<p>Füge folgende Zeilen im <code><head></code>-Tag deines HTML-Dokumentes ein:<br/>
|
||||
<code><script type="text/javascript" src="jquery-2.1.0.min.js"></script>
|
||||
<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
|
||||
<script type="text/javascript" src="jquery-cookie-1.4.0.js"></script>
|
||||
<script type="text/javascript" src="uhr.js"></script>
|
||||
<script type="text/javascript" src="uhr-de_CH.js"></script>
|
||||
<script type="text/javascript" src="uhr-de.js"></script>
|
||||
<script type="text/javascript" src="uhr-en.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="uhr.css" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-black.css" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-blue.css" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-green.css" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-red.css" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-white.css" /></code>
|
||||
</p>
|
||||
<h4 id="clock-element">Uhr-Element auf der Seite</h4>
|
||||
<p>Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres <code><div></code>-Element:<br/>
|
||||
<code><div id="meine-uhr"></div></code>
|
||||
</p>
|
||||
<h4 id="initialize">Uhr initialisieren</h4>
|
||||
<p>Definiere im HTML-Dokument (<code><head></code> oder <code><body></code>) ein Javascript-Snippet, um die Uhr zu initialisieren:<br/>
|
||||
<code><script type="text/javascript">
|
||||
jQuery(document).ready(function() {
|
||||
jQuery('#meine-uhr').uhr();
|
||||
});
|
||||
</script></code>
|
||||
</p>
|
||||
<p>Die Uhr wird so in der Standardkonfiguration angezeigt, das heisst: Berndeutsche sprache, schwarzer Hintergrund, eingeschaltet, Breite 100% des Elternelementes. Wenn dies nicht deinen Bedürfnissen entspricht, lässt sich die Uhr wie im folgenden Abschnitt beschrieben konfigurieren. Die Konfiguration wird der <code>.uhr()</code>-Methode als JSON-Objekt übergeben, beispielsweise so:<br/>
|
||||
<code>jQuery('#uhr').uhr({
|
||||
width: '200px',
|
||||
theme: 'red'
|
||||
});</code>
|
||||
</p>
|
||||
<h3 id="configuration">Konfiguration</h3>
|
||||
<p>Es existieren die folgenden Konfigurationsoptionen:</p>
|
||||
<dl>
|
||||
<dt><tt>width</tt></dt>
|
||||
<dd>Die Breite der Uhr als CSS-String, z.B. <tt>'50%'</tt>, <tt>'120px'</tt> oder <tt>'2.8em'</tt>. Die Höhe passt sich automatisch der Breite an, so dass die Uhr immer Quadratisch ist.
|
||||
<dt><code>width</code></dt>
|
||||
<dd>Die Breite der Uhr als CSS-String, z.B. <code>'50%'</code>, <code>'120px'</code> oder <code>'2.8em'</code>. Die Höhe passt sich automatisch der Breite an, so dass die Uhr immer Quadratisch ist.
|
||||
<br/>Typ: String
|
||||
<br/>Default: <tt>'100%'</tt></dd>
|
||||
<dt><tt>status</tt></dt>
|
||||
<dd>Der Anfangszustand der Uhr, entweder <tt>'on'</tt> oder <tt>'off'</tt>
|
||||
<br/>Default: <code>'100%'</code></dd>
|
||||
<dt><code>status</code></dt>
|
||||
<dd>Der Anfangszustand der Uhr, entweder <code>'on'</code> oder <code>'off'</code>
|
||||
<br/>Typ: String
|
||||
<br/> Default: <tt>'on'</tt></dd>
|
||||
<dt><tt>language</tt></dt>
|
||||
<dd>Die anfänglich ausgewählte Sprache als String. Welche Sprachen unterstütz werden, hängt davon ab, welche Sprachdateien eingebunden werden. Bis anhin unterstütze Sprachen umfassen <tt>'de_CH'</tt> (Berndeutsch), <tt>'de'</tt> (Hochdeutsch) und <tt>'en'</tt> (Englisch).
|
||||
<br/> Default: <code>'on'</code></dd>
|
||||
<dt><code>language</code></dt>
|
||||
<dd>Die anfänglich ausgewählte Sprache als String. Welche Sprachen unterstütz werden, hängt davon ab, welche Sprachdateien eingebunden werden. Bis anhin unterstütze Sprachen umfassen <code>'de_CH'</code> (Berndeutsch), <code>'de'</code> (Hochdeutsch) und <code>'en'</code> (Englisch).
|
||||
<br/>Typ: String
|
||||
<br/>Default: <tt>'de_CH'</tt></dd>
|
||||
<dt><tt>theme</tt></dt>
|
||||
<dd>Die anfänglich ausgewählte Farbe der Uhr. Unterstütze Werte sind zur Zeit <tt>'black'</tt> (schwarz), <tt>'red'</tt> (rot), <tt>'blue'</tt> (blau), <tt>'green'</tt> (grün) und <tt>'white'</tt> (weiss).
|
||||
<br/>Default: <code>'de_CH'</code></dd>
|
||||
<dt><code>theme</code></dt>
|
||||
<dd>Die anfänglich ausgewählte Farbe der Uhr. Unterstütze Werte sind zur Zeit <code>'black'</code> (schwarz), <code>'red'</code> (rot), <code>'blue'</code> (blau), <code>'green'</code> (grün) und <code>'white'</code> (weiss).
|
||||
<br/>Typ: String
|
||||
<br/>Default: <tt>'black'</tt></dd>
|
||||
<dt><tt>force</tt></dt>
|
||||
<dd>Legt fest, ob die in der Konfiguration angegebenen Werte allfällig in einem Browser-Cookie gespeicherte Einstellungen überschreiben sollen oder nicht. Mögliche Werte sind <tt>true</tt> (Konfiguration überschreibt Cookie-Werte) oder <tt>false</tt> (Cookie-Werte haben Vorrang).
|
||||
<br/>Default: <code>'black'</code></dd>
|
||||
<dt><code>force</code></dt>
|
||||
<dd>Legt fest, ob die in der Konfiguration angegebenen Werte allfällig in einem Browser-Cookie gespeicherte Einstellungen überschreiben sollen oder nicht. Mögliche Werte sind <code>true</code> (Konfiguration überschreibt Cookie-Werte) oder <code>false</code> (Cookie-Werte haben Vorrang).
|
||||
<br/>Typ: boolean
|
||||
<br/>Default: <tt>false</tt></dd>
|
||||
<dt><tt>controls</tt></dt>
|
||||
<dd>Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt werden sollen. Mögliche Werte sind <tt>true</tt> oder <tt>false</tt>.
|
||||
<br/>Default: <code>false</code></dd>
|
||||
<dt><code>controls</code></dt>
|
||||
<dd>Gibt an, ob die Steuerelemente zur Auswahl von Farbe und Sprache und der Ein-/Ausschalter angezeigt werden sollen. Mögliche Werte sind <code>true</code> oder <code>false</code>.
|
||||
<br/>Typ: boolean
|
||||
<br/>Default: <tt>true</tt></dd>
|
||||
<br/>Default: <code>true</code></dd>
|
||||
</dl>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
|
|
@ -94,11 +150,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
<p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.
|
||||
|
||||
<h2 id="lizenz">Lizenzbestimmungen</h2>
|
||||
<h2 id="information">Informationen</h2>
|
||||
<p>Programmiert von <a href="mailto:manuel@fritteli.ch">Manuel Friedli</a> mit Inspiration von <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.<br/>
|
||||
Diese Uhr ist aus Freude am Programmieren und am Konzept einer die Zeit in Worten ausdrückenden Uhr entstanden. Sollte daraus jemandem Schaden oder ein gravierender Nachteil erwachsen, so soll sich diese Person bei mir melden und wir werden bestimmt eine Lösung finden, die für alle beteiligten angemessen ist. Allen anderen Personen wünsche ich viel Freude mit der Zeit im Wort.</p>
|
||||
<p>Der Quellcode ist frei zugänglich unter <a href="https://git.friedli.info/manuel/uhr">https://git.friedli.info/manuel/uhr</a></p>
|
||||
<h2 id="license">Lizenzbestimmungen</h2>
|
||||
<p>Der komplette Sourcecode ist unter der GNU GPL 3.0 lizenziert und darf nach deren Vorgaben verwendet, kopiert, weitergegeben und verändert werden. Die GNU GPL 3.0 findest Du unter folgendem Link: <a href="https://www.gnu.org/licenses/gpl-3.0">GNU GPL 3.0</a>. Und direkt hier:</p>
|
||||
<h3 style="text-align: center;">GNU GENERAL PUBLIC LICENSE</h3>
|
||||
<h3 id="gpl-v3" style="text-align: center;">GNU GENERAL PUBLIC LICENSE</h3>
|
||||
<p style="text-align: center;">Version 3, 29 June 2007</p>
|
||||
|
||||
<p>Copyright © 2007 Free Software Foundation, Inc.
|
||||
|
|
|
|||
3
info/info.css
Normal file
3
info/info.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
code {
|
||||
white-space: pre;
|
||||
}
|
||||
Loading…
Reference in a new issue