Web Engineering – einige Werkzeuge

Web Engineering ist im weiteren Sinne die Entwicklung von Web-Anwendungen. In den  Kursen Web Engineering I (Grundlagen) und II (Entwicklung) auf iversity lag der Fokus auf der Erstellung von mobilen HTML5-Apps.

Was kann denn HTML5 und CSS (auch CSS3) überhaupt? Nachschlagen kann man dies im deutschsprachigen HTML5 Handbuch von Stefan Münz und Clemens Gull.

Mit der folgenden Liste stelle ich Werkzeuge und Webseiten vor, die ich in der Auseinandersetzung mit der Thematik Webseiten und Apps erstellen hilfreich fand. Auf manche davon wurde in den Kursen hingewiesen, andere habe ich mir selbst ausgesucht. Die Liste ist weder vollständig noch systematisch, sondern eine persönliche Zusammenstellung.

Selbstlernen mit der W3CSchools Online oder auch bei der Codecademy. Während bei der W3CSchools die Elemente vorgestellt und mittels eines Online HTML Editors direkt auch probiert werden kann, wird bei Codecademy stufenweise das Wissen mittels zahlreichen Aufgaben aufgebaut und es gibt dazu eine Community und zur Motivation auch Badges. Gelernt werden kann bei beiden, außer HTML und CSS, auch Javascript, PHP und anderes. Und für Anfänger sind auch die Einführungen zur Javascript Programmierung bei der Khanacademy zu empfehlen, die richtig Spaß machen.

Bootstrap, ein front-end framework, also ein Werkzeugkasten mit Hilfsmitteln für die Gestaltung von responsivem Webdesign. Genauere Erläuterungen zu Bootstrap findet man auf Wikipedia. Sehr umfangreich, wenn man bspw. die Einstellungen im CSS verändern will, sollte man Zeit für die Einarbeitung einplanen, da die Vorlagen sehr umfangreich sind.

HTML5 Boilerplate, ein front-end framework für Webseiten und Apps. Man kann es mit Bootstrap kombinieren.

Sencha Touch, ein HTML5 framework für mobile Apps. Ein Tutorial ist hier zu finden.

Firebug, sozusagen ein „must have“ Entwicklungswerkzeug, wenn man mit Firefox arbeitet und Websites genauer untersuchen möchte. Total praktisch, weil man hier dann sehen kann welches Skript oder welcher CSS Befehl dahinter steht.

Git, für gemeinsames Arbeiten, mithilfe dieser Versionsverwaltungssoftware. Ein Handbuch in deutsch ist hier zu finden.

Loslegen könnte man mit vielen Programmen, zwei stelle ich noch kurz vor:

  • PSPad (nur für Windowssysteme) das ich selbst gern nutze.

Im Bildungsbereich könnte  h5p (für Joomla und Drupal) interessant sein. Es ist ein Plugin für die Erstellung von eLearning Inhalten mittels HTML5, bspw. interaktive Videos.  Es ist open source und frei zur Benutzung. Ein Artikel dazu findet sich hier.

In der eigenen Webpräsenz Barrierefreiheit gewährleisten. Mit dem Thema Barrierefreiheit kann man sich im Angebot der Aktion Mensch auseinandersetzen. Es gibt hier auch zahlreiche praktische Tipps für die konkrete Umsetzung. Die von der W3C (World Wide Web Consortium) herausgegebenen Empfehlungen, dienen hierfür als Richtlinie.  Überprüfen kann man dies dann mit dem Web Accessiblity Evaluation Tool

Die Validierung der Website über W3C kann man hier vornehmen.  Und für  CSS hier.

Die E-Mail Adressen in der Webpräsenz sollte man vor Spam schützen, bspw. indem man sie in Unicode speichert. Die Konvertierung kann man bspw. hier vornehmen.

Advertisements
Dieser Beitrag wurde unter Rund um das Web 2.0 abgelegt und mit , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

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