Juni & Juli 2013 / HTML 5

HTML 5 ist die neuste Version von HTML und wird von W3C (World Wide Web Consortium) entwickelt bzw. definiert, während die WHATWG (Web Hypertext Application Technology Working Group) an einem "HTML-Standard" arbeiten will, der immer weiter entwickelt wird.
HTML 5 soll das klassische HTML und das XML-basierte XHTML, welches von W3C entwickelt wurde, ersetzten bzw. vereinen.
Die vollständige Spezifikation soll laut W3C 2013 verabschiedet werden. Auch wenn HTML 5 noch nicht vollständig fertiggestellt ist, wir es doch schon von den meisten Browsern unterstützt, wenn auch unvollständig.

Die Wichtigsten Ziele

Kompatibilität
Bestehender Inhalt muss weiterhin unterstützt werden. Neue Elemente der Sprache dürfen den bestehenden Inhalt nicht negativ beeinflussen.

Verwendbarkeit
Neue Funktionen sollen echte Probleme lösen und dies vorrangig für Autoren(Entwickler), dann Browserhersteller und zuletzt der reinen Lehre dienend. Funktionen jedoch, die bereits einen bestimmten Zweck erfüllen, sollen nicht neu erfunden werden.

Sicherheit
Bei der Entwicklung neuer Funktionen müssen Sicherheitsaspekte berücksichtigt werden.

Konsistenz
Teile aus XML, die in XHTML Anwendung finden, sollen auch in HTML erlaubt werden.

Vereinfachung
Durch genau definiertes Verhalten (auch in Fehlersituationen) und geringe Komplexität soll HTML problemlos implementiert werden können

Universalität
HTML soll auf allen Endgeräten und mit Inhalt in allen Weltsprachen verwendbar sein.

Neuheiten

Bereits bei der Definition des Doctypes ist die 1. Änderung, welche die Erstellung für den Autor vereinfacht, zu finden.
Während früher die Definition z.B. so aussah:

Reicht bei HTML 5 ein simples

Weiterhin muss der gesamte Bereich mit einem html-Tag geöffnet und geschlossen werden.
Ebenfalls bleibt die Aufteilung mit Header und Body gleich.
Im Header werden weiterhin die Kopfdaten der HTML-Datei eingegeben. z.B. der Titel, der Link in auf eine css Datei usw.
Dieser wird weiterhin mit dem head-Tag definiert.
Geändert hat das definieren der Zeichenkodierung. Diese sollte übrigens auf jeder Website definiert werden, um sie sicherer zu machen.
Früher musst man folgenden Text eingeben:

Mit HTML 5 reicht ein simples:

Geändert hat aber auch das einbinden einer CSS- oder Javascript-Datei. Das Attribut type muss dabei nicht mehr angegeben werden.
HTML 4:

HTML5:



Weiter geht's mit dem Body also dem effektiven Inhalt der Website.
Auch er wird immernoch mit dem body-Tag definiert.
Eine Website besteht meistens aus einem Header, einer Navigation, einem Hauptbereich und einem Footer. Mit HTML 4 hat man diese Bereiche meist mithilfe von DIVs kreiert.
HTML 5 hingegen soll dass Ganze ja vereinfachen. Anstatt nun so viele Divs und verschiedene Klassen fürs CSS zu kreieren, gibt es neue Strukturbezogene Tags:

 

• Das header-Tag ist für die Einleitung gedacht. Darin werden meistens das Logo sowie Login-/Logout-Funktionen angezeigt.
• Das nav-Tag ist für die Haupt-Navigation der Website gedacht und könnte theoretisch auch direkt im header-Tag platziert werden.
• Neuerdings, und daher auf einigen Informationsseiten zu HTML 5 noch nicht vorhanden, gibt es das main-Tag. Dieses Tag dient zum Markieren das Hauptinhalts.
• Zusätzlich gibt es noch ein aside-Tag das für Zusatzinformationen gedacht ist, welche nicht in direktem Zusammenhang mit dem eigentlichen Inhalt der Website stehen. Dieses könnte man auch in den Main-Teil nehmen. Wie das genau umgesetzt wird, ist dem Entwickler überlassen.
• Das section-Tag ist für einzelne Abschnitte der Inhalte gedacht.
• Das article-Tag ist für unabhängige Inhalte, die für sich alleine stehen könnten. Ein Blogeintrag wie dieser hier wäre dafür ein gutes Beispiel. In den meisten Websites wird wohl aber auch das nicht gebraucht.
• Wie der Name schon sagt, ist das footer-Tag für die Fusszeile gedacht.

Hier sehen Sie nun noch, wie man diese Tags einsetzen könnte um eine Website aufzubauen.
Diese HTML-Datei ist W3C-Validiert und kann daher bedenkenlos benutzt werden.

 

Das ganze Styling der Site wir natürlich im externen css-Dokument erledigt.

Es gibt jedoch auch noch andere Tags, welche nicht zur Struktur der Website benutzt werden.
Z.B. gibt es ein video-Tag zum hinzufügen von Videos, sowie ein audio-Tag zum hinzufügen von Musik.
Ganz im Sinne von HTML 5 sind diese Tags sehr simpel gehalten. Das Video-Tag braucht lediglich eine Grössenangabe, sowie den Link zur Videodatei und den Type, z.B. "video/mp4".

Mai 2013 / IPA: indico Service Management System

Jeder Informatiklehrling muss am Ende seiner Lehre eine individuelle praktische Arbeit, kurz IPA durchführen. Dabei muss er ein Projekt planen und realisieren. In meinem Fall habe ich das indico Service Management System, kurz iSMS entwickelt.

Ausgangslage

Die Kunden unserer Firma betreiben verschiedene Industrie-Anlagen, bei denen wir verschiedene Hardware-Komponenten sowie Software-Lösungen, hier „Service-Objekte“ genannt, installiert haben.

Damit die Wartung dieser Service-Objekte geregelt ist und nicht vergessen wird, wünscht mein Vorgesetzter ein Programm, mit welchem er und andere Projektleiter ihre Kunden, Anlagen und Service-Objekte verwalten können.

Wichtig ist die Hierarchie dieser Objekte:

• Man kann beliebig viele Kunden erstellen
• Einem Kunden kann man beliebig viele Anlagen anfügen
• Einer Anlage kann man beliebig viele Service-Objekte anfügen
• Einem Service-Objekt kann man beliebig viele Service -Objekte anfügen

Hier ist das Ganze noch bildlich dargestellt:

Jedes Service-Objekt soll direkt einer Anlage zugewiesen werden können, es soll jedoch nicht jedes Service-Objekt jedem anderen Service-Objekt angefügt werden können.

Es macht ja keinen Sinn, einen PC einer Festplatte anzuhängen. Eine Festplatte einem PC hingegen schon.

Um dies zu ermöglichen, gibt es Service-Objekt-Typen. Ein Service-Objekt hat immer einen bestimmten Typen. Die Service-Objekt-Typen können so konfiguriert werden, dass sie nur bestimmten anderen Service-Objekt-Typen angehängt werden können.

Man kann z.B. die folgenden Objekttypen erstellen: PC, Festplatte und Virenschutz. Anschliessend kann man dann die möglichen Zuweisungen definieren. Z.B:

• Festplatte an PC
• Festplatte an Panel
• Virenschutz an PC

Hier eine bildliche Erläuterung:

Ausserdem sollen die Projektleiter den Service-Objekten ein Wartungsintervall zuweisen können. Ist dieses Wartungsintervall erreicht, soll das die Applikation nach dem Start anzeigen.
Zusätzlich soll es möglich sein, für die erfassten Service-Objekte Offerten zu generieren, in denen dem Kunden die durchzuführenden Wartungsarbeiten aufgelistet werden.
Die Offerten sind als Microsoft Word-Dokument auszugeben und sollen auf einer Word-Vorlage mit Textmarken basieren, damit die Darstellung ohne Anpassung des Programms geändert werden kann.

 

Konzept

Das Projekt wurde mit der Projektmethode HERMES und als Einzelarbeit von mir durchgeführt.
In der Voranalyse habe ich entsprechend HERMES einen Variantenentscheid durchgeführt, ein Pflichtenheft erstellt, eine Risikoanalyse gemacht usw. Wie es natürlich zu einem Konzept gehört, habe ich die Anwendungsfälle analysiert und erfasst und ein umfangreiches Testkonzept definiert
Das Programm wurde als „Windows Forms Applikation“ und mit einer 3-Schichten-Architektur umgesetzt, obwohl ich mit dieser Architektur vor der IPA noch keine Erfahrungen gesammelt habe. Diese Architektur ist jedoch besonders im Hinblick auf die spätere Realisierung eines Server-Dienstes zur automatischen Überwachung der Service-Objekte sinnvoll. Als Datenbankserver habe ich einen SQL-Server 2008 R2 verwendet, auf den ich mit der LINQtoSQL-Komponente zugreife.

 

Realisierung

Das Programm hat 2 bzw. 3 Ansichten.

Service Ansicht

In der Service Ansicht sieht man auf der linken Seite die erfassten Service-Objekte in einer Liste, welche mit Hilfe der darübergelegenen Felder gefiltert werden können. Sortiert ist die Liste nach dem Fälligkeitsdatum, also dem Tag, an dem die nächste Wartung durchgeführt werden sollte. Hat ein Service-Objekt das Fälligkeitsdatum erreicht, so wird es wie im folgenden Bild orange markiert.
Auf der rechten Seite sind die Abhängigkeit und darunter die Service-History des selektierten Service-Objekts zu sehen. Mithilfe des Buttons Offerte kann die oben erwähnte Offerte generiert werden.

 

Administrationsansicht

Die Administrationsansicht dient zum Verwalten der in der Datenbank gespeicherten Elemente. Sie ist wiederum in 2 weitere Ansichten unterteilt.

 

Baum Ansicht

In der Baum-Ansicht kann man die Kunden, Anlagen und Service-Objekte verwalten. Die vorhandenen Objekte werden hierarchisch angezeigt. Daher können die anderen Objekte hier auch nicht verwaltet werden.

 

 

Objekt-Ansicht

In der Objekt-Ansicht kann man alle Objekte also Kunden, Anlagen, Service-Objekte, Service-Objekt-Typen, Projektleiter und Kostenstellen verwalten. Hier werden sie jedoch einfach immer nur aufgelistet und nicht hierarchisch dargestellt.

April 2013 / ASP.NET MVC 4

Bereits vor ca. einem Jahr habe ich einen Eintrag über ASP.NET MVC 3 geschrieben, als ich dieses Framework in einem Schulprojekt verwendet habe.
Nun werde ich in Kürze damit beginnen, die erste Webapplikation in unserer Firma zu entwickeln. Um das Ganze etwas aufzufrischen, werde ich mich daher nochmals mit MVC befassen, diesmal werde ich jedoch effektiv auf den Code, bzw. die Erstellung der Website eingehen.

Neues Projekt

Um alles zu verstehen, beginne ich mit einem Standard Projekt.
Danach sieht das Projekt folgendermassen aus:

 

Dieses Standard-Projekt hat keine Master-Page, welche den Header, den Footer usw. zur Verfügung stellt. Daher erstelle ich zuerst diese Master-Page "Site.Master" im Ordner Views/Shared:

 

Anschliessend wähle ich Masterseite aus, gebe einen Namen und klicke auf Hinzufügen:

Diese MasterPage enthält noch nicht allzu viel. Sie kann nun mithilfe von ganz normalen HTML-Tags aufgebaut werden. Meistens wird ein Aufbau mit verschiedenen Divs wie z.B. Header, Content und Footer realisiert.
Am Wichtigsten sind eigentlich die beiden folgenden Zeilen:

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>

Diese Zeilen bilden sozusagen einen "Platzhalter" für die eigentliche View, welche später vom Controller zurückgegeben wird. Daher ist der Text unter ID (also hier "ContentPlaceHolder1") auch wichtig, da man ihn beim Hinzufügen einer View braucht.

Als nächstes muss ein Controller erstellt werden:

 

Anschliessend wird folgendes Fenster angezeigt, in dem man den Controller-Namen definieren muss.

 

Ich nenne meinen Controller "HomeController", da er die Startseite verwalten wird.
Im Controller befindet sich nun noch nicht viel Code.

 

 

Er hat das ActionResult "Index", welches die View zurückgeben will. Jedoch ist noch keine vorhanden.
Deshalb fügen wir nun eine hinzu:

 

 Anschliessend zeigt sich die folgende Form.

Zu beachten hier ist nun, dass der erstellte Site.Master ausgewählt ist und die oben erwähnte ContentPlaceHolder-ID stimmt, ansonsten kann die View nicht hinzugefügt werden.

Nun kann die Website aufgerufen werden, jedoch ist sie noch fast leer.
Zuerst empfiehlt es sich, eine Navigation hinzuzufügen und die css-Datei, welche sich unter Content befindet, anzupassen, damit die Website bereits nach etwas aussieht.

Das Design der Navigation wird ebenfalls über das css geregelt.
Die Navigation an sich muss nun jedoch nicht mehr mit simplem HTML realisiert werden.
MVC bietet einen HTMLHelper an, der die Links zusammensetzt. Um die möglichen Links zu
definieren erstelle ich verschiedene ActionResults im HomeController.
Ein Link wird dann folgendermassen zusammengesetzt:

 <%: Html.ActionLink("Kontakt", "Contact", "Home") %>

Mit dem %-Zeichen wird deklariert, dass nun C#-Code folgen wird.
Mit Html.ActionLink kann ein neuer Link hinzugefügt werden.
Der erste Parameter von "ActionLink", hier "Kontakt", ist der Text, welcher schlussendlich angezeigt wird.
Der zweite Parameter, hier "Contact", ist das ActionResult des Controllers.
Der dritte Parameter, hier "Home", ist der Name des Controllers.
Der HTML-Output dieser Methode sieht folgendermassen aus und könnte theoretisch auch direkt so verwendet werden:

<a href="../../Home/Contact">Kontakt</a>

Auf dieselbe Art können auch andere HTML-Elemente generiert werden. Z.B. Forms, Input-Felder, Labels usw.
Diese können bei Strongly-typed Views (Siehe MVC 3-Eintrag)direkt an die Eigenschaften des Models gebunden werden.

Um z.B. bei einem Login-Fenster ein Label mit dem Text "Benutzername" und dazu das passende Input-Feld für die Eigenschaft "Benutzername" des Models zu erstellen, kann folgender Code genutzt werden:

<%: Html.LabelFor(m => m.UserName) %>
<%: Html.TextBoxFor(m => m.UserName) %>

Das könnte dann, durch ein passendes css, so aussehen:





Damit die Benutzereingaben auch wieder zurückgesendet werden können, müssen diese in eine Form gelegt werden.
Diese wird folgendermassen erstellt:

<% using (Html.BeginForm()) { %>

Und so wieder geschlossen:

<% } %>

Um die Form abzuschicken, braucht es natürlich noch einen Button. dieser muss wie gehabt in HTML geschrieben werden:

<input type="submit" value="Anmelden" />

Um die Daten auswerten zu können, muss im Controller ein ActionResult erstellt werden, welches denselben Namen wie bereits das ActionResult hat, welches die View aufruft.
Zusätzlich muss vor dieses ActionResult folgende Eigenschaft gesetzt werden:

[HttpPost]

So ist klar definiert, welche Methode wann aufgerufen wird. Ebenfalls muss sie als Übergabeparameter das zu empfangende Model haben.
Hier ein Beispiel mit dem ActionResult Register:

[AllowAnonymous]
public ActionResult Register()
{
     return View();
}

[HttpPost]
[AllowAnonymous]
public ActionResult Register(RegisterModel model)
{
     // Code
}

Februar 2013 / Doxygen

Doxygen ist ein Tool, geschrieben in C++ zum automatischen Generieren von Code-Dokumentationen.
Das bedeutet, das Tool liest alle Dateien eines Code-Projekts. Es speichert alle Klassen und Methoden sowie die dazugehörigen Kommentare und generiert daraus ein Klassenverzeichnis, welches der Benutzer anschliessend anschauen kann.
Dieses Tool kann verschiedenste Sprachen lesen sowie die Dokumentation in verschiedenen Formaten ausgeben.
Ich werde als Programmiersprache wie meistens C# verwenden, das Ausgabeformat ist HTML.

So wird Doxygen benutzt

Das Tool kann man hier gratis downloaden.
Nach der Installation findet man unter "Alle Programme/doxygen" das Tool "Doxywizard", welches einem beim Erstellen der Konfiguration hilft.
Das GUI ist ziemlich selbsterklärend, jedoch gibt es sehr viele Konfigurationsmöglichkeiten.
Hier das Wichtigste:
Im Tab "Wizard" und dem Knoten "Project" muss das korrekte "Source code directory", also der Projektordner, sowie das "Destination directory", also der Ausgabeordner angegeben werden.
Ausserdem sollte das Häkchen "Scan recursively" gesetzt werden, damit alle Unterordner des ausgewählten Projektordners durchsucht werden.

Dem Projekt den korrekten Namen und die richtige Versionsnummer zu geben ist natürlich auch sinnvoll.
Im Knoten "Mode" empfehle ich noch unter "Select the desired extraction mode:" "All Entities" auszuwählen, damit auch wirklich alles vorhanden ist. Ausserdem kann noch die Optimierung für die genutzte Sprache auswählen.

Im Knoten "Output" kann noch an der Ausgabe-Datei herum geschraubt werden.
Hier kann z.B. das Farbschema geändert, eine Navigation sowie ein Suchfeld hinzufügen werden usw.
Im Tab "Expert" kann alles Mögliche eingestellt werden. Die Sprache der ausgegeben Datei kann man unter "OUTPUT_LANGUAGE" anpassen, was womöglich gewünscht ist.
Im Tab "Run" kann die Generierung der Dokumentation gestartet werden, indem man den Button "Run doxygen" benutzt. Mithilfe des Buttons "Show HTML output" kann die erstellte Dokumentation auch gleich angezeigt werden.

Code Dokumentieren

Wichtig ist, dass der Code richtig dokumentiert ist.
Ohne korrekte Dokumentation des Codes sieht man zwar, welche Klasse welche Methoden hat und welche Parameter gefordert werden, jedoch ist keine Beschreibung vorhanden.
Je nach dem welche Programmiersprache genutzt wird, müssen auch die Kommentare anders gekennzeichnet werden.
Wenn man das Visual Studio nutzt und mit C# programmiert, kann man einfach direkt vor der Klasse bzw. vor der Methode 3 Slashs einfügen, was dann einen Summery-Eintrag erstellt.
Der sieht folgendermassen aus:

Hier kann nun die Klasse bzw. die Methode beschrieben werden.

Das Wichtigste: Wozu wird sie verwendet? / Was kann sie?

 

Ebenfalls sollten die Parameter von den Methoden beschrieben werden. Hat eine Methode einen oder mehrere Parameter, wird für jeden Parameter unter die letzte Summary-Zeile diese Zeile angefügt:

Hier kann nun der entsprechende Parameter beschrieben werden.

Der Name wird vom gegebenen Namen für den Parameter und nicht von der Parameterklasse abgeleitet.

 

Hat man den Code sauber dokumentiert, generiert Doxygen eine sehr saubere Code-Doku. Am Anfang ist es etwas kompliziert, die Übersicht zu wahren, besonders wenn man ein grösseres Projekt dokumentieren liess. Hat man jedoch einmal den Durchblick mit der Navigation, ist es kein Problem mehr, das Gesuchte zu finden.



Januar 2013 / Microsoft SQL-Server

Um die Daten einer Applikation irgendwo sinnvoll speichern zu können, verwenden wir Datenbanksysteme. Ein Datenbanksystem besteht aus einer Verwaltungssoftware (Datenbankmanagementsystem) und der effektiven Datenbank, welche die gesamten Daten speichert.

Es gibt verschiedenste Datenbanksysteme, welche man verwenden kann.

Ich habe bis jetzt nur mit den folgenden drei gearbeitet:

• Microsoft Access
• Microsoft SQL Server
• MySQL mithilfe von xampp (phpMyAdmin)

Während Microsoft Access neben den herkömmlichen Möglichkeiten der Datenbankverwaltung auch noch die Möglichkeit bietet, direkt eine Applikation mit einem UI zu entwickeln, bieten die anderen beiden Datenbanksysteme vor allem Verwaltungsmöglichkeiten.

MySQL von Xampp kann mithilfe von phpMyAdmin ohne Probleme verwaltet werden. Dieses Datenbanksystem habe ich bisher nur für Websites und Java-Applikationen genutzt.

Der Microsoft SQL Server kommt mit einem Management Studio, welches ähnlich wie phpMyAdmin die Verwaltung der Datenbanken ermöglicht. Dieses Datenbanksystem nutze ich für meine C# Applikationen am liebsten, egal ob Desktop oder Webanwendung.

Die Möglichkeiten, welche man mit diesem Datenbanksystem hat, sind mir jedoch noch nicht wirklich bekannt. Ich habe es bis jetzt einfach so gebraucht, mich jedoch nie wirklich damit beschäftigt.

Im Zusammenhang mit diesem Post werde ich das nun tun und einige nützliche und wichtige Funktionen aufzeigen.

Microsoft SQL Server Management Studio

Wie bereits erwähnt, wird mit dem Microsoft SQL Server ein passendes Verwaltungstool namens "Microsoft SQL Server Management Studio" mitgeliefert.

Nach der erfolgreichen Installation des SQL-Servers kann das Management Studio gestartet werden. Nach dem Start wird eine Art "Login"-Screen angezeigt.

Hier muss der gewünschte SQL-Server angegeben bzw. ausgewählt werden. Ebenfalls muss man Windows-Authentifizierung, also mit dem eingeloggten Benutzer anmelden, oder SQL Server-Authentifizierung auswählen. Bei der SQL Server-Authentifizierung muss man den Benutzernamen sowie das passende Kennwort eines eingerichteten Benutzers angeben.

Das führt mich auch zum 1. Schwerpunkt, dem Erstellen eines Benutzers und der anschliessenden Vergabe der Rechte.

Nach dem erfolgreichen Verbinden werden standardmässig folgende Menübar sowie der Objekt-Explorer angezeigt:

 

Mithilfe des Objekt-Explorers kann man nun z.B. eine Datenbank erstellen und Tabellen hinzufügen.

Das ist jedoch total simpel und ich werde dieshier nicht aufzeigen.

Anmeldenamen erstellen

Wie bereits erwähnt können, neue Benutzer erstellt werden, mit denen man anschliessend auf den Datenbankserver zugreifen kann.

Wichtig ist dabei, dass die SQL-Authentifizierung auch freigeschaltet ist. Einstellen kann man das mit einem Rechtsklick auf das Server-Objekt und dann unter "Eigenschaften" --> "Sicherheit".

Um den Benutzer zu erstellen, wird ein sogenannter "Anmeldename" erstellt. Dazu muss ein Rechtsklick auf den Ordner "Sicherheit" gemacht werden und anschliessend "Neu" --> "Anmeldung" ausgewählt werden.

 

Nun kann hier die SQL Server-Authentifizierung ausgewählt sowie ein Anmeldename und ein Kennwort angegeben werden.

Wichtig ist es, dem Benutzer die richtigen Serverrollen zuzuweisen, damit er z.B. auch eine DB erstellen kann. Ebenfalls müssen unter Status die Berechtigung zum Herstellen einer Verbindung mit dem Datenbankmodul auf "Erteilt" und der Anmeldename "Aktiviert" sein.

Unter "Benutzerzuordnung" können die Berechtigungen auf die einzelnen bereits vorhandenen Datenbanken geregelt werden. Dabei kann genau angegeben werden, ob der Benutzer überhaupt Zugriff hat, ob er nur lesen, auch schreiben oder sogar Tabellen erstellen/modifizieren kann.

Die restlichen Häkchen und Optionen sind selbsterklärend oder brauche ich aktuell nicht. Anschliessend kann der Vorgang mit einem Klick auf "OK" abgeschlossen werden. Voraussetzung dafür sind natürlich die passenden Berechtigungen.