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.

 

Ein Gedanke zu “Script-Quicky: HTML-Template für das HTML-UI

  1. A) Javascript immer am Ende des Body’s laden. Erstens ist dann der komplette DOM verfügbar, zweitens hebt dies auch das render-blocking und das Layout wird schneller angezeigt/gerendert.

    B) Auf jQuery verzichten. jQuery ist Uralt und zu überladen. Was braucht man denn großartig in Javascript, dass man jQuery nutzen muss?

    Gefällt mir

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s