Script-Quicky: HTML-Template für das HTML-UI

Auf den letzten Entwicklerrunden wurde immer wieder ein Wunsch geäußert, dass man gerne ein Template für ein HTML-UI haben möchte. Damit dieser Wunsch nicht unbeachtet bleibt, erfolgt heute ein kleiner „Script-Quicky“ in dem ich euch eine ganz einfache HTML-Datei als Template zur Verfügung stelle.

Hinweis:
TippDieser „Script-Quicky“ kann als Ergänzung zu diesem Blogbeitrag genutzt werden. In diesem Beispiel berücksichtige ich ein HTML-UI in der Größe von 200px Breite und 400px Höhe. Ihr könnt später natürlich alles so abändern, dass es zu eurem Projekt passt.

 

home.html

<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta charset="utf-8" />

	<title>Anzeigename für PopUps</title>
    
    <script src="/apps/api/knuddels-api.js"></script>
    <!-- 
    Hier laden wir alle Funktionen die für die clientseitige Verarbeitung unserer App notwendig sind.
    -->
    <script>
		Client.includeCSS('style.css');
		Client.includeJS('/apps/api/jquery.min.js', 'func.js');
	</script>
    <!-- 
        Hier laden wir die CSS-Datei für die Ausgestaltung unserer User App (style.css) - Diese muss unbedingt im WWW-Ordner liegen
        Zusätzlich wird neben der von Knuddels zur Verfügung gestellten JQuery-Version auch noch eine eigene JS-Datei eingebunden, mit der wir Javascriptspielereien einbinden können.
    -->
</head>

<body>
    <div class="Wrapper">
        <div class="Header"></div>
        <div class="Content"></div>
        <div class="Footer"></div>
    </div>
    <!-- 
    Ich habe mir angewöhnt meine User App immer in 4 Bereiche einzuteilen, die ich dann via CSS ausgestalten kann.
    Der Wrapper ist quasi der "Schaukasten" in dem mein angezeigter Content liegt.
    Im Header wird später z.B. das Logo eingefügt, im Footer wäre Platz für ein Copyright oder Versionshinweise und im Content-Bereich logischerweise der Content der App.
    
    -->
</body>
</html>

style.css

.Wrapper {
    /* CSS-Inhalt für den Wrapper-Bereich */
    position:   absolute;
    top:        0px;
    left:       0px;
    background: #000;
    width:      200px;
    height:     400px;
    display:    block;
}
.Header {
    /* CSS-Inhalt für den Header-Bereich */
    position:   absolute;
    top:        0px;
    left:       0px;
    height:     50px;
    width:      200px;
    display:    block;
    background: red;
}
.Content {
    /* CSS-Inhalt für den Content-Bereich */
    position:   absolute;
    top:        50px;
    left:       0px;
    width:      200px;
    height:     325px;
    background: #fff;
    color:      #000;
    display:    block;
}
.Footer {
    /* CSS-Inhalt für den Footer-Bereich */
    position:   absolute;
    bottom:     0px;
    left:       0px;
    width:      200px;
    height:     25px;
    font-size:  10px;
    color:      #fff;
    background: red;
    line-height:25px;
    font-size:  10px;
}

func.js

$(function(){
    alert('Deine User App ist bereit für Neues!');
});

 

DownloadAlle Dateien dieses Blogbeitrages kannst du auf GitHub downloaden.

 

„Hallo Ironist“ oder Echtheit hat Klasse

Es ist mal wieder Zeit für ein Interview mit einem weiteren Knuddelsteamler. Ironist alias Sascha ist nicht nur unter den alten Hasen, die häufiger auf Chattertreffen sind ein bekanntes Gesicht, sondern auch eine der treibenden Kräfte für viele Komponenten und Bereiche der Community. Er ist der Urvater der iOS-App und neben User Apps zuständig für das neue Projekt Echtheit. Viele Projekte, die Sascha betreut, sind wegweisende Funktionen, die unserer Community Schritt für Schritt besser machen.

Weiterlesen

Hey, Quiz doch mal wieder!

Alte Spiele auf Knuddels haben ja das Image, dass sie etwas „Stiefmütterlich“ behandelt werden. Doch das ist gar nicht so. Immer wieder werden kleine Änderungen durchgeführt, damit diese Spiele nicht aussterben. Erst vor Kurzem wurde durch die Forumssprecherin bekannt gegeben, dass die Ränge im Spiel Quiz überarbeitet wurden. Doch was hat sich genau getan?

Weiterlesen

Nutzungszahlen April 2017

Hallo!

Hier die aktuellen Zahlen:

Monat Eindeutige Nutzer Nutzer %-Weiblich
April 2017 230.169 2.118.090 39%
März 2017 223.317 2.166.619 39%
Februar 2017 224.852 1.984.304 39%
Januar 2017 228.833 2.226.730 39%
Dezember 2016 223.811 2.174.092 38%
November 2016 228.638 2.130.668 38%
Oktober 2016 221.480 2.126.363 38%

Glossar:

Eindeutige Nutzer:

Eindeutige Nutzer die sich mindestens ein Mal im Monat bei Knuddels eingeloggt haben

Nutzer:

Anzahl der insgesamt eingeloggten Nutzer

%-Weiblich:

Prozentsatz der Frauen an Nutzer