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.

 

Meinungsumfrage: Welche Art von User Apps spielt ihr am liebsten?

umfragepictureIn Knuddels tummeln sich viele verschiedene Arten von User Apps. Egal ob es Tools, Spiele für die Unterhaltung, Apps zum Flirten oder Casinogames sind. Für jeden Geschmack sind die passenden User Apps bereits realisiert worden. Doch heute würde es mich interessieren, welche Art von User App euch am meisten interessiert? Weiterlesen

Besser User Apps entwickeln: HTML-UI mit TypeScript und modernen Web Technologien

In diesem Teil der Serie geht es darum zu zeigen wie man zusätzlich zum Server-Teil auch den Client Teil, die HTML-UI bzw. den dazugehörigen JavaScript Code mit TypeScript schreiben kann. Zusätzlich werde ich noch ein paar Worte zur modernen Web-Platform verlieren. (jQuery?! Den Kram braucht man doch nicht mehr!)

Weiterlesen

Besser User Apps entwickeln: Schreibe deine App mit TypeScript

Dies soll eine Serie von Blog Posts werden, in denen ich darüber spreche, welche Probleme ich beim Entwickeln von User Apps festgestellt habe und wie ich sie für mich löste. Dafür werde ich mehrere Themen behandeln. Hauptthema wird aber sein “Wie schreibe ich mit modernen Hilfsmitteln eine User App”. Beginnen werde ich aber erstmal mit etwas sehr grundlegendem: Die Programmiersprache an sich.

Weiterlesen