index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>PrologIDE - Team Lambda</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/blog.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/prologIDE.css" rel="stylesheet">

    <!-- Caroussel style -->
    <link href="carousel.css" rel="stylesheet">

    <!-- Full screen images -->
    <link rel="stylesheet" href="css/jquery-fullsizable.css">
    
  </head>

  <body>

    <nav class="navbar">
      <div class="blog-masthead">
	<div class="container">
	  <nav class="blog-nav">
	    <a class="blog-nav-item active" href="#">Home</a>
	    <a class="blog-nav-item" href="#Vision">Vision</a>
	    <a class="blog-nav-item" href="#Anforderungen">Anforderungen</a>
	    <a class="blog-nav-item" href="#Funktionalität">Anforderungsanalyse</a>
	    <a class="blog-nav-item" href="#Projektplanung">Projektplanung</a>
	    <a class="blog-nav-item" href="#Architektur">Architektur</a>
	    <a class="blog-nav-item" href="#TechnischerAufbau">Technischer Aufbau</a>
	    <a class="blog-nav-item" href="#Fazit">Fazit</a>
	  </nav>
	</div>
      </div>
    </nav>

    <div class="container">

      <div class="blog-header">
	<h1 class="blog-title">PrologIDE</h1>
	<p class="lead blog-description">The brand new IDE for professional Prolog development.</p>
      </div>

      <div class="row">

	<div class="col-sm-8 blog-main">
	  
	  <div class="blog-post">
	    <h2 class="blog-post-title" id="Vision">Vision</h2>

	    <p>In moderner Softwareentwicklung ist der umfangreiche Einsatz von Tools längst Standard. Tools helfen dem Entwickler zu mehr Produktivität,
	      mehr Qualität und entlasten ihn von langweiligen und eintönigen Aufgaben. Der Kern einer jeden Tool-Strategie für ihr Unternehmen ist dabei die
	      IDE. Sie ist das zentrale Tool um Software zu entwickeln und übernimmt die fundamentalsten Aufgaben.</p>

	    <p>Doch in Prolog ist eine zeitgemäße IDE nicht verfügbar gewesen. Bis zur Geburt dieses Projekts das Prolog ins 21. Jahrhundert befördert und
	      einen produktiven und professionellen Umgang mit der Sprache erlaubt.</p>
	  </div><!-- /.blog-post -->

	  <div class="blog-post">
	    <h2 class="blog-post-title" id="Anforderungen">Anforderungen</h2>
	    
	    <p> Anforderungen an das Projekt:</p>

	    <ul>
	      <li>
		<p class="requirements">Plattform-Agnostik</p>
		<p>Prolog ist eine Sprache die sich nicht auf eine bestimmte Plattform festlegt, sondern auf jedem Betriebssystem brilliert. Deshalb soll
		auch die IDE auf den drei populärsten Plattformen - Windows, Linux und Mac - laufen.</p>
	      </li>
	      <li>
		<p class="requirements">Text Highlighting</p>
		<p>Direkt bei der Eingabe sollen Code Wörter der Prolog Sprache hervorgehoben werden und Strukturen übersichtlicher dargestellt werden.
		  Damit können Entwickler schnell Syntaxfehler und Inhalt des Codes erfassen.
		  </p>
	      </li>
	      <li>
		<p class="requirements">Code Analyse</p>
		<p>Syntax und Semantik des Programmes soll fortlaufend untersucht werden und Fehlermeldungen frühzeitig und übersichtlich an den User
		zurück gegeben werden.</p>
	      </li>
	      <li>
		<p class="requirements">Compilierung</p>
		<p>Die IDE soll eine schnelle und simple Compilier-Methode anbieten. Der User soll über einen Button die komplette Compilierung starten
		und ablaufen lassen. Die IDE soll dabei die Projektabhängigkeiten verwalten und auflösen.</p>
	      </li>
	      <li>
		<p class="requirements">Debuggingunterstützung</p>
		<p>Eine gute Unterstützung der Prolog-Debuggers soll fester Bestandteil der IDE sein. Dabei soll der User übersichtlich durch den Quellcode
		navigiert werden und ihm durch anzeigen von aktuellen Werten in der Suche nach Fehlern unterstützen.</p>
	      </li>
	      <li>
		<p class="requirements">Projektmanagement</p>
		<p>Mit der IDE soll ein großer Teil der Projektorganisation übernommen werden und der Entwickler somit von dieser Tätigkeit entlastet werden.
		Vor dem User soll die Komplexität und die Abhängigkeiten des Projekts versteckt werden und transparent gespeichert werden.</p>
	      </li>
	      <li>
		<p class="requirements">Einfache Integration von Versionierungssystemen</p>
		<p>Die IDE soll unterschiedliche Versionierungssysteme, wie zum Beispiel Git und Subversion, einbinden und mit übernehmen. Projekte sollen
		direkt aus Repositories geladen und rückgespeichert werden können.</p>
	      </li>
	    </ul>
	    
	  </div><!-- /.blog-post -->
	  
	  <div class="blog-post">
	    <h2 class="blog-post-title" id="Funktionalität">Anforderungsanalyse</h2>

	    <p> Die oben formulierten Anforderungen wurden während des Projekt analysiert und ein System aufgebaut in dem die Abhängigkeiten der einzelnen
	    Punkte in klarem Zusammenhang steht. Daraus ergibt sich das folgende UseCase Diagramm:</p>

	    <a class="fullsizable" id="fullsized_fullscreen" href="images/useCase.jpg" title="Architektur">
              <img src="images/useCase.jpg" alt="Generic placeholder image" width="100%">
	    </a>

	    <p>Dieser grobe Überblick über die definierten UseCases kann beliebig verfeinert werden. Besonders die Ausformulierung der UseCases kann dabei
	      unterschiedlich umfangreich sein. Zwei der wichtigsten UseCases sind hier präsentiert.</p> 
 
            <p>Der UseCase für die Compilierung des Projektes ist einer der wichtigsten UseCases, da er eine Grundfunktionalität einschliesst und auch
	    in dem sehr wichtigen Debugging UseCase Anwendung findet:</p>

	    <!-- This is the Container for Use Cases -->
	    <div>
	      <table class="table table-striped table-bordered usecase">
		<tbody>
		  <tr>
		    <td colspan="2">Use Case Nr</td>
		    <td colspan="2">2</td>
		  </tr>
		  <tr>
		    <td colspan="2">Use Case Name</td>
		    <td colspan="2">Compile Project</td>
		  </tr>
		  <tr>
		    <td>Created By</td>
		    <td>Maximilian Probst</td>
		    <td style="font-weight:bold">Last Updated By</td>
		    <td>Maximilian Probst</td>
		  </tr>
		  <tr>
		    <td>Date created</td>
		    <td>03.03.2015</td>
		    <td style="font-weight:bold">Last Updated</td>
		    <td>03.03.2015</td>
		  </tr>
		  <tr>
		    <td colspan="2">Actor</td>
		    <td colspan="2">User</td>
		  </tr>
		  <tr>
		    <td colspan="2">Description</td>
		    <td colspan="2">The project gets compiled into an executable program.</td>
		  </tr>
		  <tr>
		    <td colspan="2">Preconditions</td>
		    <td colspan="2">Application is started, Project is loaded</td>
		  </tr>
		  <tr>
		    <td colspan="2">Postconditions</td>
		    <td colspan="2"></td>
		  </tr>
		  <tr>
		    <td colspan="2">Priority</td>
		    <td colspan="2">High</td>
		  </tr>
		  <tr>
		    <td colspan="2">Frequency of Use</td>
		    <td colspan="2">Often</td>
		  </tr>
		  <tr>
		    <td colspan="2">Normal Course of Events</td>
		    <td colspan="2">Files are saved, compiler settings are parsed, compilation is invoked, the new binary is executed</td>
		  </tr>
		  <tr>
		    <td colspan="2">Alternative Events</td>
		    <td colspan="2"></td>
		  </tr>
		  <tr>
		    <td colspan="2">Exceptions</td>
		    <td colspan="2">No correct input -> Return errors generated by the compiler</td>
</tr>
<tr>
  <td colspan="2">Includes</td>
  <td colspan="2">Read Compiler Options, Run application</td>
</tr>
<tr>
  <td colspan="2">Special Requirements</td>
  <td colspan="2"></td>
</tr>
<tr> 
  <td colspan="2">Assumptions</td>
  <td colspan="2">Correct Code</td>
</tr>
<tr>
  <td colspan="2">Notes and Issues</td>
  <td colspan="2"></td>
</tr>
</tbody>
</table>
</div>

<p> Der zweite UseCase beschreibt das Laden eines Projekts. </p>
</div>
  
	    <!-- This is the Container for Use Cases -->
	    <div>
	      <table class="table table-striped table-bordered usecase">
		<tbody>
		  <tr>
		    <td colspan="2">Use Case Nr</td>
		    <td colspan="2">5</td>
		  </tr>
		  <tr>
		    <td colspan="2">Use Case Name</td>
		    <td colspan="2">Project Loading</td>
		  </tr>
		  <tr>
		    <td>Created By</td>
		    <td>Maximilian Probst</td>
		    <td style="font-weight:bold">Last Updated By</td>
		    <td>Maximilian Probst</td>
		  </tr>
		  <tr>
		    <td>Date created</td>
		    <td>03.03.2015</td>
		    <td style="font-weight:bold">Last Updated</td>
		    <td>03.03.2015</td>
		  </tr>
		  <tr>
		    <td colspan="2">Actor</td>
		    <td colspan="2">User</td>
		  </tr>
		  <tr>
		    <td colspan="2">Description</td>
		    <td colspan="2">A project is loaded in the workspace of the PrologIDE</td>
		  </tr>
		  <tr>
		    <td colspan="2">Preconditions</td>
		    <td colspan="2">Application is started, Project files are in the correct format</td>
		  </tr>
		  <tr>
		    <td colspan="2">Postconditions</td>
		    <td colspan="2">Project is loaded and all possibilities to work on the project are enabled</td>
		  </tr>
		  <tr>
		    <td colspan="2">Priority</td>
		    <td colspan="2">High</td>
		  </tr>
		  <tr>
		    <td colspan="2">Frequency of Use</td>
		    <td colspan="2">Sometimes</td>
		  </tr>
		  <tr>
		    <td colspan="2">Normal Course of Events</td>
		    <td colspan="2"></td>
		  </tr>
		  <tr>
		    <td colspan="2">Alternative Events</td>
		    <td colspan="2"></td>
		  </tr>
		  <tr>
		    <td colspan="2">Exceptions</td>
		    <td colspan="2">Incorrect file format of the project file. Corrupted files.</td>
                  </tr>
                  <tr>
                    <td colspan="2">Includes</td>
                    <td colspan="2"></td>
                  </tr>
                  <tr>
                    <td colspan="2">Special Requirements</td>
                    <td colspan="2"></td>
                  </tr>
                  <tr> 
                    <td colspan="2">Assumptions</td>
                    <td colspan="2"></td>
                  </tr>
                  <tr>
                    <td colspan="2">Notes and Issues</td>
                    <td colspan="2">The concrete implementation could take the project from a server.</td>
                  </tr>
                </tbody>
              </table>
            </div>
	    
	  <!-- /.blog-post -->
	  
	  <div class="blog-post">
	    <h2 class="blog-post-title" id="Projektplanung">Projektplanung - Ziele und Vorgehensweisen</h2>

	    <p>Nach der ausführlichen Analyse der Anforderungen, Wünschen und bestehenden Lösungen wurde ein Projektplan eingeführt.
	      Dabei wurde eine inkrementelle Projektvorgehensmethode gewählt. Das heißt stückweise sollen immer neue Parts der Application
	      eingeführt werden und somit durch jedes Inkrement eine Erweiterung der bestehenden Applikation vorgenommen werden. Dabei soll
	      die Balance gehalten werden zwischen der schnellen Belieferung des Kunden und der größtmöglichen Qualität der Software. Als
	      Zeitraum zwischen den Releases sollen circa 2 Wochen liegen. </p>

	    <p>Aus diesen Überlegungen wurden die Anforderungen in Packets gebündelt und die folgenden Milestones definiert:</p>

	    <table class="table">
	      <tbody>
		<tr>
		  <td>17.03.2015</td><td>Erste Kundenpräsentation: Vorstellung einer IDE die die Kompilierung und Text Highlighting unterstützt</td>
		</tr>
		<tr>
		  <td>31.03.2015</td><td>Zweite Kundenpräsentation und Alpha-Auslieferung: Vorstellung des Debugginginterfaces und der Code Analyse in einer Live-Demo</td>
		</tr>
		<tr>
		  <td>14.04.2015</td><td>Release der Beta-Version</td>
		</tr>
		<tr>
		  <td>21.04.2015</td><td>Finales Release</td>
		</tr>
	      </tbody>
	    </table>
	      
	    <p>Daraus ergibt sich ein konkreter Zeitplan der in dem untenstehenden Bild gut nachvollzogen werden kann.</p>
	    <a class="fullsizable" id="fullsized_fullscreen" href="images/Projektplan_LambdaIDE.png" title="Architektur">
	      <img src="images/Projektplan_LambdaIDE.png" alt="Generic placeholder image" width="100%">
	    </a>

	  </div><!-- /.blog-post -->

	  <div class="blog-post">
	    <h2 class="blog-post-title" id="Architektur">Architektur</h2>
	    <p>
	      Folgende Anforderungen werden an die Architektur der Prolog-IDE gestellt:
	      <ul>
		<li>Entwicklung muss offline stattfinden können</li>
		<li>Echtzeit Compilierung des Codes</li>
		<li>Austausch mit anderen Entwicklern über Versionierungssysteme</li>
              </ul>
	    </p>

	    <p>
	      Außerdem gibt es folgende Randbedingungen:
	      <ul>
		<li>Datenaustausch in Versionierungssystemen erfolgt mit Prolog-Code</li>
		<li>Stark schwankende Anzahl von aktiven Benutzern</li>
	      </ul>
	      

	      Aus den genannten Gründen und Anforderungen wird eine Fat Client Architektur wie folgt umgesetzt:
	    </p>
	    
	      <a class="fullsizable" id="fullsized_fullscreen" href="images/Architecture.png" title="Architektur">
	        <img src="images/Architecture.png" alt="Architektur der Applikation" width="100%">
	      </a>
	    <p>
	      Eine serverseitige Umsetzung der Businesslogik scheidet aus, um die Offline-Entwicklung von Prolog-Code zu ermöglichen.
	      Auch ohne diese Anforderung wäre aufgrund der stark schwankenden Benutzeranzahl und der hohen Rechenlast durch die Live-Compilierung eine Businesslogik auf Serverseite unwirtschaftlich.
	      Mit anderen Systemen wird ausschließlich Prolog-Code ausgetauscht. Aus diesem Grund ist das Zusammenarbeiten mit verschiedensten IDE-Versionen möglich.
	      Es ist sinnvoll, ein Versionierungstool zu verwenden, das Abwärtskompatibilität ermöglicht. Der Nachteil der Updateproblematik bei der Fat Client Architektur tritt bei uns deshalb nicht auf.
	    </p>

	  </div><!-- /.blog-post -->

	  
	  <div class="blog-post">
	    <h2 class="blog-post-title" id="TechnischerAufbau">Technischer Aufbau der Applikation</h2>
	    <p>Bei der technischen Umsetzung der Applikation wurde versucht die Anforderungsanalyse konsequent weiterzuführen
	      und zu verfeinern. Dies ist besonders gut im UML-Klassendiagramm zu erkennen. </p>

	    <p> Besonders gut sind in diesem Fall auch die grundlegenden Abstraktionspatterns zu sehen. Ein klassisches Beispiel
	      für die Anwendung von OOP-Methoden ist an dem Beispiel der abstrakten Klasse "Shortcuts" zu sehen. Sie wird von
	      zahlreichen Klassen implementiert die Methoden von ihr erben. Um das UML-Diagramm sauber zu halten wurde hierbei auf die
	      Auflistung der Methoden verzichtet. Es ist aber deutlich zu sehen das im Falle einer Tastenkombination in der Appliktion die
	      konkrete Klasse aufgerufen werden kann, die dann evaluiert welche Aktionen ausgeführt werden sollen. Damit ist sicher gestellt
	      das jeder Programmierer seine Vorlieben in der IDE ausleben kann.</p>
	    <a class="fullsizable" id="fullsized_fullscreen" href="images/klassendiagramm.png" title="Architektur">
	      <img src="images/klassendiagramm.png" alt="UML-class diagram" width="100%">
	    </a>

	    <p>Für eine klare Struktur und eine leichte Erweiterung wurden an verschiedenen Stellen Design Patterns eingesetzt.
		  So wird zum Beispiel eine Undo Funktion durch das Command pattern realisiert. Jede Aktion in einem File,
		  egal ob cut, paste, write oder delete, wird dem CommandManager mitgeteilt. Mithilfe seines Befehls Stacks können vorhergehende
		  Aktionen Rückgängig gemacht werden. In den Einstellungen gibt es die Option Compiler und Debugger zu wählen. Anhand des
		  Factory Pattern können diese von der Prolog IDE ausgewählt und verwendet werden. Anhand eines allgemeinen Creators wird der spezielle
		  Compiler/Debugger initialisiert und steht durch eine abstrakte Methode nach außen als allgemeiner Compiler oder Debugger zur Verfügung.
		  Zudem wurde für verschiedene GUI Designs das Strategy Pattern verwendet. Beisoielhaft wurden hier interfaces für Farb Design und Inhalts Anordnung
		  modeliert. Es kann aber auf beliebig viele Eigenschaften und Änderungen erweitert werden. Zunächst werden verschiedene Bausteine, mithilfe von Interfaces zusammengefasst, angeboten.
		  Einzelne Desingdefinitionen können dann ausgeführt werden (hier DesignOne, DesignTwo und DesignThree). Mithilfe des Singleton Patterns wird sichergestellt, dass die Prolog nur
		  ein Design haben kann und nichts durcheinander kommt. Aus dem gleichen Grund wird auch bei den Einstellungen das Singleton Pattern eingesetzt.</br></br>
		  Bei der Programmierung wird dabei auf die Sprache C++ gesetzt die sehr gut für unterschiedliche Plattformen geschrieben
	      werden kann. Um die GUI innerhalb des Strategy Patterns zu modelieren wird auf das Qt-Framework gesetzt, dass graphische Komponenten plattformunabhängig
	      bereitstellt. Durch die Wahl dieser Kombination konnte weitesgehend derselbe Code für alle Plattformen verwendet werden.
	    </p>

	  </div><!-- /.blog-post -->
	  
	  <div class="blog-post">
	    <h2 class="blog-post-title" id="Fazit">Fazit</h2>
	    <p>Die Application wurde streng nach Projektplan entwickelt und von den Entwicklern in der vorgesehen Zeit fertiggestellt.
	      Alle Milestones konnten gehalten werden und nach einigen Nachbesserungen wurde das Projekt endgültig ausgeliefert.</p>

	    <p>Die umfangreichen Anforderungen konnten alle beachtet werden und sind ohne Einschränkungen auf allen Plattformen benutzbar.
	      Die untenstehenden Screenshots vermitteln dabei einen ersten Eindruck über die Mächtigkeit der neuen Programmierumgebung.
	    </p>
	    
	    <!-- Carousel
		 ================================================== -->
	    <div id="myCarousel" class="carousel slide" data-ride="carousel">
	      <!-- Indicators -->
	      <ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
		<li data-target="#myCarousel" data-slide-to="3"></li>
		<li data-target="#myCarousel" data-slide-to="4"></li>
		<li data-target="#myCarousel" data-slide-to="5"></li>
		<li data-target="#myCarousel" data-slide-to="6"></li>
		<li data-target="#myCarousel" data-slide-to="7"></li>
		<li data-target="#myCarousel" data-slide-to="8"></li>
		<li data-target="#myCarousel" data-slide-to="9"></li>
		<li data-target="#myCarousel" data-slide-to="10"></li>
	      </ol>
	      <div class="carousel-inner" role="listbox">
		<div class="item active">
		  <img src="images/mockups/101.jpg" alt="The Graphical User Interface of the PrologIDE">
		  <div class="container">
		    <div class="carousel-caption">
		      <h1>Graphical User Interface</h1>
		    </div>
		  </div>
		</div>
		<div class="item">
		  <img src="images/mockups/102.jpg" alt="Project Settings Tab">
		  <div class="container">
		    <div class="carousel-caption">
		      <h1>Projekt Settings und Optionen</h1>
		    </div>
		  </div>
		</div>
		<div class="item">
		  <img src="images/mockups/103.jpg" alt="Edit Tab">
		  <div class="container">
		    <div class="carousel-caption">
		      <h1>Edit-Funktionen nur einen Klick entfernt</h1>
		    </div>
		  </div>
		</div>
		<div class="item">
		  <img src="images/mockups/104.jpg" alt="Compiler Options and Settings">
		  <div class="container">
		    <div class="carousel-caption">
		      <h1>Automatische, komfortable Compilation</h1>
		    </div>
		  </div>
		</div>
		<div class="item">
		  <img src="images/mockups/105.jpg" alt="Debugging Tab">
		  <div class="container">
		    <div class="carousel-caption">
		      <h1>Effektives und übersichtliches Debugging</h1>
		    </div>
		  </div>
		</div>
		<div class="item">
		  <img src="images/mockups/106.jpg" alt="Settings Tab">
		  <div class="container">
		    <div class="carousel-caption">
		      <h1>Settings und Tutorials für einen schnellen Einstieg</h1>
		    </div>
		  </div>
		</div>
		<div class="item">
		  <img src="images/mockups/107.jpg" alt="Setting Window">
		  <div class="container">
		    <div class="carousel-caption">
		      <h1>Alle Projekteinstellungen in einem Fenster</h1>
		    </div>
		  </div>
		</div>
				<div class="item">
		  <img src="images/mockups/108.jpg" alt="Setting Window">
		  <div class="container">
		    <div class="carousel-caption">
		      <h1>Einfaches Set-up für ihre Version Control System</h1>
		    </div>
		  </div>
		</div>
		<div class="item">
		  <img src="images/mockups/109.jpg" alt="Setting Window">
		  <div class="container">
		    <div class="carousel-caption">
		      <h1>Konfigurierbare Compiler Settings</h1>
		    </div>
		  </div>
		</div>
		<div class="item">
		  <img src="images/mockups/110.jpg" alt="Setting Window">
		  <div class="container">
		    <div class="carousel-caption">
		      <h1>Konfigurierbare Debugging Settings</h1>
		    </div>
		  </div>
		</div>
		<div class="item">
		  <img src="images/mockups/207.jpg" alt="Setting Window">
		  <div class="container">
		    <div class="carousel-caption">
		      <h1>Platformunabhängiges Design</h1>
		    </div>
		  </div>
		</div>
	      </div>
	      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	      </a>
	      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	      </a>
	    </div><!-- /.carousel -->

	    <p> Besonders die Konzentration auf Einfachheit und Funktionalität wird dabei offensichtlich, die dem Prolog Developer helfen
	      sollen sich auf seine Arbeit zu fokusieren. Durch die Kategorisierung die schon im ersten Funktionalen Entwurf vorgenommen wurde,
	      werden die diversen Feature übersichtlich getrennt und präsentiert.</p>
    
	  </div><!-- /.blog-post -->

        </div><!-- /.blog-main -->

	<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
	  <div class="sidebar-module sidebar-module-inset">
	    <h4 >Projekt Team Lambda - Die Entwickler hinter der IDE</h4>

	    <div class="mitarbeiter" style="text-align:left">
	      <p>Team Lambda ist die Produktionsstätte der PrologIDE. Die kleine Firma arbeitet auf neustem Stand der Methoden und führt
	         inkrementelle Projekte durch, die Entwickler in ihrer alltäglichen Arbeit unterstützen und zur Produktivität beitragen.</p>
	      <hr>
	    </div>
	    
            <div class="mitarbeiter">
              <img class="img-circle" src="images/flanders.jpg" alt="Generic placeholder image" width="140" height="140">
              <h2>Nicolai Davidsson</h2>
              <p>Projektleiter und Software Developer</p>
	    </div>    

	    <div class="mitarbeiter">
              <img class="img-circle" src="images/Mitarbeiter.jpg" alt="Generic placeholder image" width="140" height="140">
              <h2>Maximilian Probst</h2>
              <p>Dokumentation und Marketing</p>
	    </div>

	    <div class="mitarbeiter" >
              <img class="img-circle" src="images/bart.png" alt="Generic placeholder image" width="140" height="140">
              <h2>Moritz Scherzinger</h2>
              <p>Software Developer</p>
	    </div>    
	 
	    <div class="mitarbeiter">
              <img class="img-circle" src="images/abraham.gif" alt="Generic placeholder image" width="140" height="140">
              <h2>Benedikt Jung</h2>
              <p>Software Developer</p>
	    </div>    
	 
	    <div class="mitarbeiter">
              <img class="img-circle" src="images/tingeltangel.gif" alt="Generic placeholder image" width="140" height="140">
              <h2>Lukas Wuesteney</h2>
              <p>Testing</p>
	    </div>    

	  </div>
	</div><!-- /.blog-sidebar -->

      </div><!-- /.row -->

    </div><!-- /.container -->

    <footer class="blog-footer">
      <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
      <p>
	<a href="#">Back to top</a>
      </p>
    </footer>

        <!-- Bootstrap core JavaScript
	     ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.fullsizable.2.0.2.min.js"></script>
	<script>
	  $(function() {
	  $('a.fullsizable').fullsizable({
  detach_id: 'wrapper',
  clickBehaviour: 'close'
	  });
	  });
	</script>
  </body>
  </html>