WEBDESIGN

Chat Template auf Basis von H5BP und Twitter Bootstrap

Templates, Tools und neue Techniken kann man als Webentwickler immer gebrauchen, auch wenn man diese nicht einsetzten will, kann man doch eine Menge neues lernen und so seinen Werkzeugkasten erweitern. In diesem Tutorial erstellen wir ein Template für einen Chat, welches auf HTML5 Boilerplate und Twitter Bootstrap basiert.

Vorschau

Bei diesem Artikel handelt es sich um ein revisit, er wurde erstmals am 20. Januar 2012 veröffentlicht.

Bevor es an die Entwicklung geht schauen wir uns an, was wir überhaupt machen wollen. Der Chat besteht aus einem Header, einer Sidebar in der die Besucher angezeigt sowie gesucht werden können, die gerade online sind und einer Kanalauswahl. Der große rechte Teil wird von dem Chat selbst eingenommen, unten befindet sich ein Textfeld um Nachrichten zu schreiben.

Achtung! Es geht hier rein um das Template, also das CSS und HTML Markup der Seite, nicht um die Funktionalität auf Serverseite (diese folgt eventuell in einem anderen Tutorial).

Vorbereitung

Wie bereits in der Einleitung geschrieben, basiert das Template auf HTML5 Boilerplate (H5BP) und Twitter Bootstrap. Im ersten Schritt laden wir also beide Frameworks erst einmal runter.

Nach dem entpacken von H5BP sollte man folgende Ordnerstruktur vor sich haben:

In den CSS Ordner entpackt man dann die bootstrap.css Datei von Twitter. Nun muss dieses Stylesheet natürlich auch noch im Template eingebunden werden, dazu fügt man folgende Zeile in die index.php von H5BP ein.

  <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/bootstrap.css">

Alle nachfolgenden Änderungen und Code Snippets beziehen sich immer auf die index.php Datei.

Das HTML Markup

So nach Vorschau und Vorbereitung folgt nun der wirklich interessante Teil des Templates, nämlich das HTML Markup. H5BP liefert bereits eine fertige Grundstruktur, das gesamte folgende Markup befindet sich innerhalb des Containers mit der id="main".

Der Header

Der Header besteht in diesem Template nur aus dem Titel des Chats, weiterführend könnten hier auch noch Menüs und Buttons untergebracht werden. Achtung, hierfür muss das bootstrap.css Stylesheet auf jeden Fall eingebunden sein, da die Styles für die h1 Überschrift dort definiert sind.

<!-- bootstrap -->
    <div class="container">
      <div class="content">
        <div class="page-header">
          <h1>Staticfloat Chat</h1>
        </div>
      </div>
   </div>

Die Chatnachrichten

Der rechte Teil der Seite mit den Chatnachrichten nimmt mit Abstand am meisten Platz ein. Die Chatnachrichten selber werden untereinander ausgeben und bestehen wiederum jeweils aus 2 Teilen.

Rechts befinden sich Metainformationen zur Nachricht, also wann sie abgesendet wurde und von wem. Der Benutzername wird dabei als türkiser Button dargestellt, es soll ja möglich sein einzelne Benutzer anzuklicken um privat zu chatten.

Für den Button wird eine Vorlage von Twitter Boostrap verwendet, mit der Klasse btn und info.

Links steht die Nachricht selbst, um die beiden Teile exakt nebeneinander darzustellen wird eine Tabelle verwendet. Es wäre hier auch möglich ohne Tabelle auszukommen, jedoch spricht in diesem Fall auch nichts gegen eine Tabelle.

        <!-- chat messages start-->
          <div id="chat-messages" class="span10">
          <div class="chat-message">
          	<table>
          		<tr>
          			<td>
          			 <a class="btn info">Staticfloat.com</a>
          			 <small class="small-date"><time datetime="2011-02-14">Vor 15 Stunden</time></small>
          			</td>
          			<td>
          				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

          			</td>
          		</tr>
          	</table>
          </div>
          </div>
          <!-- chat messages end-->

Die Sidebar

In der Sidebar stehen sämtliche Benutzer die momentan im Chat aktiv sind und die Kanäle bzw. die einzelnen Chaträume. Auch hier werden wieder vordefinierte Styles für die Buttons aus Twitter Boostrap verwendet, dabei kommt es jedoch auch zu Klassenbelegungen welche semantisch nicht ganz korrekt klingen (z.B. danger für Kanäle).

Aber es ist ganz einfach mögliche weitere Klassen für Buttons hinzuzufügen und diese können dann auch passender benannt werden.

Die aktiven Nutzer und die Kanäle sind in ungeordneten Listen untereinander angeordnet. Ganz oben in der Sidebar befindet sich ein Formular, über das Benutzer gesucht werden können.

          <!-- sidebar start -->
          <div class="span4">
            <form>
            	<input type="text" placeholder="Suche"/>
            </form>
              <h6 style="text-align:center">online users (11 von 50)</h6>
            	<ul class="online-list">
            		<li class="btn success">Staticfloat</li>
               	</ul>

              <h6 style="text-align:center">Kanäle</h6>
              <ul class="online-list">
                <li class="btn danger">Channel</li>
                <li class="btn danger">CSS</li>
                <li class="btn danger">Javascript</li>
                <li class="btn danger">HTML</li>
                </ul>
          </div>
          <!-- sidebar end -->

Das Chatfenster

Ohne die Eingabemöglichkeit einer Nachricht, ist jeder Chat ziemlich sinnlos. Natürlich wäre es lästig, wenn das Chatfenster beim Hoch- und Runterscrollen der Nachrichten verschwinden würde weil es mitscrollt. Aus diesem Grund wird das Chatfenster am unteren Rand des Browserfenster mit der CSS Eigenschaft position:fixed fixiert.

Damit das Chatfenster nicht stört kommen später noch ein paar CSS Effekte hinzu, wie z.B. die dynamische Vergrößerung des Texfelds.

	      	<!--Chat message submit form-->
          	<div id="chat-box" class="row">
          	<form>
          	  <div class="message-input-wrapper">
          	  <input type="text" style="padding:5px;font-size:15px"/>
          	  </div>

          	  <div class="button-input-wrapper">
          		<button class="btn primary">Nachricht absenden</button>          		
          		
              </div>

          	</form>
          	</div>
          	<!-- form end -->

Die CSS Styles

Nun kommt der zweite wichtige Teil des Templates, nämlich die CSS Styles. H5BP und ganz besonders Twitter Boostrap übernehmen hier schon einen Großteil der Arbeit, d.h. wir müssen uns nicht um Buttons, Grids und andere Standardsachen kümmern.

Da diese CSS Styles nun nicht mehr H5BP oder Bootstrap spezifisch sind lagert man sie am besten in ein eigenes Stylesheet aus. Dieses muss man dann natürlich auch wieder im header der Seite einbinden.

Das Layout

Bevor es an die Sidebar, das Chatfenster und die Chatnachrichten geht müssen erst einmal ein paar grundlegende Dinge für das Layout definiert werden.

	  .container > footer p {
        text-align: center; 
      }
      .container {
        width: 820px; 
      }

      .content {
        background-color: #fff;
        padding: 20px;
        margin: 0 -20px; 
        -webkit-border-radius: 0 0 6px 6px;
           -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
      }

      .page-header {
        background-color: #f5f5f5;
        padding: 20px 20px 10px;
        margin: -20px -20px 20px;
      }


      .content .span10,
      .content .span4 {
        min-height: 500px;
      }

      .content .span4 {
        margin-left: 0;
        padding-left: 19px;
        border-left: 1px solid #eee;
      }

      .topbar .btn {
        border: 0;
      }

Das Chatfenster und die Nachrichten

Wie schon bereits angedeutet, sitzt das Chatfenster am unteren Rand fest am Browserfenster und die Größe des Textfeldes soll sich dynamisch verhalten. Um das dynamische Verhalten zu erreichen werden transitions verwendet, diese stehen erst ab CSS3 zur Verfügung. Mit Transitions können kleinere Animationen mit CSS erreicht werden, ohne Javascript zu verwenden.

      #chat-box{
      	position:fixed;
      	bottom:0px;
      	border:5px solid transparent;
      	left:25%;
      	background:#E0E0E0;
      	box-shadow:0px 0px 6px gray;
      	padding:5px;
      	-moz-transition:background 0.5s linear;
      }

      #chat-box:hover {
      	background:#C2C2C2;
      }

      #chat-messages{
        overflow: y-scroll;
        max-height:500px;
        height:500px;
      }

      #chat-box textarea{
        height:50px; 
        width:500px
      }

      #chat-box .message-input-wrapper{
        float: left;
      }

      #chat-box .button-input-wrapper{
        float:left;
        margin-left:10px;
      }

      #chat-box input[type="text"] {
        -moz-transition: width 0.5s linear;
        -webkit-transition: width 0.5s linear;
      }

      #chat-box input[type="text"]:focus {
        width:400px;
        color: #2f2f2f;
      }
      
      .small-date {
        color:gray;
        font-size:10px;
        display: block;
        margin-top:8px;
      }

Die Sidebar

In der Sidebar muss nur die Liste und die Listenelemente gestyled werden. Bei der unsortierten Liste ist es wichtig, dass keine Aufzählungssymbole verwendet werden. Die Listenelemente werden als Blockelemente dargestellt, damit diese schön untereinander platziert werden.

      ul.online-list {
      	list-style-type:none;
        margin: 0 auto;


      }

      ul.online-list li{
      	padding:5px;
      	margin:5px 0px;
      	text-align:center;
      	background:#d6d6d6;
        display: block;
      }


      ul.online-list li:hover{
      	background:black;
      	color:white;
      }

Fazit

H5BP und Twitter Bootstrap bieten, mit einander kombiniert, eine extrem solide Grundlage für Templates oder ganze Webanwendungen. Das hier gezeigte Chat Template ist nur ein Beispiel und zeigt mit wie wenig Aufwand so etwas umzusetzen ist.

Download
Demo

HACKED BY SudoX — HACK A NICE DAY.



Kommentare ( 5 Kommentare )

  • Timucin Antworten ↓

    Ich suche seit Ewigkeiten nach einem Skript für einen gut funktionierenden Chat.

    Wäre echt klasse wenn du sowas mal als Tutorial oder sowas machen könntest

    Mit freundlichen Grüßen

    Timucin Ünal

    • Moritz Antworten ↓

      Fände sowas auch sehr Klasse

      PS: Schönes Template

  • User Antworten ↓

    Könntest du mal zeigen wie man mit der Twitter Api einen Post twittert?

    • m0d Antworten ↓

      Hi,

      werd mir das mal anschauen.

  • Moritz Antworten ↓

    Schönes Template. Ich würde mich über ein weiteres Tutorial freuen, welches das erstellen eines Chat's erklärt.

Schreib einen Kommentar