Archive for the ‘Projektmanagement’ Category

Zuletzt aktualisiert von .

W3C stellt die Webseiten Prüfung Unicorn vor

Posted in Allgemeines, CSS, HTML, HTML5, Projektmanagement, Webdesign on 07/29/2010 07:05 by Hoegerl_Karl

Nach 14 Jahren Erfahrung bei der Prüfung von HTML, Cascading Style Sheets (CSS) gibt es nun den Nachfolger W3C Unicorn. Der neue Dienst kann nicht nur HTML und CSS prüfen, sondern prüft auch Webseiten für mobile Geräte und RSS-Feeds.

Damit richtet sich W3C Unicorn  an

  • Server Administratoren, die einen eigenen Unicorn Service aufbauen wollen
  • Entwickler, die die neuen Services nutzen oder weiter entwickeln wollen
  • Nutzer, die Ihre Webseiten prüfen wollen

Die Unicorn Benutzeroberfläche steht in 20 Sprachen zur Verfügung.

 

Heat Maps zur Webseiten Analyse

Posted in Allgemeines, Projektmanagement, SEO, Tools, Webdesign on 06/23/2010 11:47 by kh4711

Heat Maps werden immer mehr zur Analyse des Klick Verhaltens von Nutzern eingesetzt. Die Heat Maps werden als Ersatz von Eyetracking Untersuchungen verwendet. Denn Eyetracking Untersuchungen sind aufwendiger und kosten wesentlich mehr Geld.

Eine kostenlose Möglichkeit Heatmaps zu erstellen bietet die Webseite Feng-GUI. Dort kann ein Screenshot der Webseite hochgeladen werden. Dann erstellt Feng-GUI die Heatmap.

Heatmap von Feng-GUI

Heatmap

 

Meta Informationen für Suchmaschinen

Posted in Allgemeines, Grundlagen, HTML, Projektmanagement, SEO on 05/11/2010 10:15 by Hoegerl_Karl
Mit Hilfe von Meta Informationen lassen sich die HTML Dokumente leichter katalogisieren. Die Einträge werden von Suchmaschinen wie Google ausgewertet. Oft werden Schlüsselworte als Schlagworte verwendet.
Die Meta Informationen werden innerhalb des Tags <head> eingetragen.

 

Beispiel einer Webseite mit Meta Informationen

<html>
<head>
<title>Metainformationen eintragen</title>
<meta name="author" content="Karl Hoegerl">
<meta name="keywords" content="html, meta, informationen">
<meta name="description" content="Hier wird der Inhalt der Webseite 
beschrieben. Die Beschreibung erscheint in der Suchmaschine.">
<meta name="date" content="2009-12-15T08:49:37+02:00">

</head>
<body>
<h1>Paradoxien des Autors</h1>
<p>Die sogenannten Paradoxien des Autors, an welchen ein Leser Anstoss nimmt,
stehen häufig gar nicht im Buche des Autors, sondern im Kopfe des Lesers.</p>
<p align="right">von Friedrich Wilhelm Nietzsche</p>
</body>
</html>

 

Angabe des Autor

<meta name=”author” content=”Karl Hoegerl”><

Mit diesem Tag wird der Autor der Webseite genannt.

 

Schlüsselwörter für die Katalogisierung

<meta name=”keywords” content=”html, meta, informationen”>

Die Schlüsselwörter werden von einigen Webkatalogen zur Kategorisierung verwendet. Bei Suchmaschinen dienen sie als Begriffe nach denen im Eingabefeld gesucht werden kann.

 

Beschreibung des Seiteninhalts

<meta name=”description” content=”Hier wird der Inhalt der Webseite beschrieben. Die Beschreibung erscheint in der Suchmaschine.”>

Die Beschreibung bei den Suchmaschinen im Suchergebnis angezeigt. Ohne diese Meta Information wird der Text am Beginn der Webseite dargestellt.

 

Datum der Erstellung

<meta name=”date” content=”2001-12-15T08:49:37+02:00″>

Das Erstellungsdatum wird angezeigt.

 

Verwendeter Zeichensatz

<meta http-equiv=”content-type” content=”text/html; charset=ISO-8859-1″>

Der verwendete Zeichensatz wird benannt. Dies ist wichtig, da es sonst zur fehlerhaften Darstellung von Texten kommen kann. Weit verbreitet ist der Zeichensatz „utf-8“. Dieser stellt mehr internationale Zeichen dar als der im oberen Beispiel angegebene westeuropäische Zeichensatz „iso-8858-1“.

 

Steuerung von Proxy Servern

<meta http-equiv=”expires” content=”0″>

Diese Einstellung steuert den Cache von Proxy-Servern. Der Wert des Attributs „content“ wird in Sekunden angegeben. Bei der Angabe von 0 Sekunden wird die Webseite nicht zwischengespeichert. Dies ist bei dynamisch erzeugten Anwendungen notwendig, weil sich hier die Inhalte ändern können. Dadurch ist ein Nachladen der Webseite erwünscht!

 

Weiterleitung zu einer anderen Webseite

<meta http-equiv=”refresh” content=”5; url=http://www.html-lernen.de/”>

Mit diesem Meta Tag erfolgt nach 5 Sekunden eine Weiterleitung zu der Webseite http://www.html-lernen.de/
 

HTML5 – Verzeichnis der neuen Tags, Attribute und Events

Posted in Allgemeines, HTML5, Projektmanagement, Web 2.0, Webdesign on 04/18/2010 08:21 by Hoegerl_Karl

Da nun alle neuen HTML5 Tags, Attribute und Events auf dieser Webseite verfügbar sind, habe ich hier ein Inhaltsverzeichnis stellt. Durch die Übersicht können Sie leichter die gewünschte Information zu HTML 5 finden.

Neue Tags bei HTML 5

Neue Standard Attribute bei HTML 5

Neue Event Attribute bei HTML 5

    Zum Seitenanfang

     

    HTML5 – Neue Event Attribute

    Posted in Allgemeines, HTML5, Projektmanagement, Webdesign on 04/12/2010 02:46 by Hoegerl_Karl

    Die Event Attribute ermöglichen die interaktive Nutzung von Javascript in Webseiten. In HTML5 wurden die Möglichkeiten enorm ausgeweitet, wie den unten gezeigten Tabellen entnommen werden kann. HTML5 stellt in Verbindung mit CSS3 und ECMA Javascript die zukünftige Plattform für Webprogramme von Web 3.0 dar.

    Die Events, oder auch Ereignisse genannt, teilen sich in 5 Gruppen:

    1. Window Events
    2. Formular Events
    3. Tastatur Events
    4. Maus Events
    5. Medien Events

    Window Events Attribute:

    Diese gehören zum <body> Tag.

    StatusAttributWertBeschreibung
    NeuonafterprintScriptDas Skript startet nachdem das Dokument gedruckt wurde.
    NeuonbeforeprintScriptDas Skript startet bevor das Dokument gedruckt wird.
    NeuonbeforeonloadScriptIst der Inhalt für den Nutzer editierbar?
    NeucontextmenuWert der idDie id dient zur weiteren Erstellung eines Kontextmenüs.
    data-meineDatenmeineDatenBenutzerdefiniertes Attribut. Der Wert muss mit “data-” beginnen.
    dirltr order rtlBeschreibt die Leserichtung im Element.
    Neudraggabletrue, false
    oder auto    		Das Attribut legt fest, ob das Element verschoben werden kann.
    NeuhiddenhiddenDas Element wird nicht angezeigt und ist nicht relevant.
    NeuidWert der idEs kann eine individuelle “id” festgelegt werden.
    Neuitemleere URLDient zur Auswahl beim Gruppieren des Elements.
    NeuitempropURL der GruppeDient zum Gruppieren von Elementen.
    langSprachcodeGibt die Sprachauswahl die Daten eines Elements an.
    Neuspellchecktrue, falseGibt an ob im Element eine Sprachprüfung durchgeführt werden muss.
    styleCSS DefinitionGibt die CSS Definition für das Element an.
    NeusubjectidÜber die id als zugehöriger Betreff gekennzeichnet.
    tabindexZahlGibt die Nummer des Tabelements an.
    titleTextGibt bei Mouse-over weitere Informationen aus.

    Zur Auswahl

    Formular Event Attribute:

    Ereignisse, die innerhalb eines Formulars ausgelöst werden. Sie können von allen Tags verwendet werden.

    StatusAttributWertBeschreibung
    onblurScriptDas Script startet, wenn ein Element den Focus verliert.
    onchangeScriptDas Script startet, wenn sich ein Element verändert.
    NeuoncontextmenuScriptDas Script startet, wenn das Context Menü aufgerufen wird.

    		onfocusScriptDas Script startet, wenn ein Element den Focus erhält.
    Neuonformchange ScriptDas Script startet, wenn das Formular sich verändert.
    NeuonforminputScriptDas Script startet, wenn im Formular eine Eingabe erfolgt.
    NeuoninputScriptDas Script startet, wenn in einem Element des Formulars eine Eingabe erfolgt.
    NeuoninvalidScriptDas Script startet, wenn ein Element ungültig ist.
    onresetScriptDas Script wird beim reset ausgeführt.
    Wird von HTML5 nicht unterstützt!
    onselectScriptDas Script startet, wenn ein Element ausgewählt wird.
    onsubmitScriptDas Script startet, wenn das Formular übermittelt wird.

    Zur Auswahl

    Tastatur Event Attribute:

    Das sind Ereignisse, die von der Tastatur ausgelöst werden.

    StatusAttributWertBeschreibung
    onkeydownScriptDas Script startet, wenn eine Taste gedrückt wird.
    onkeypressScriptDas Script startet, wenn eine Taste gedrückt und losgelassen wird.

    		onkeyupScriptDas Script startet, wenn eine Taste losgelassen wird.

    Zur Auswahl

    Maus Event Attribute:

    Das sind Ereignisse, die von der Maus ausgelöst werden.

    StatusAttributWertBeschreibung
    onclickScriptDas Script startet, wenn mit der Maus geklickt wird.
    ondblclickScriptDas Script startet, wenn ein Doppelklick stattfindet.
    NeuondragScriptDas Script startet, wenn ein Element verschoben wird.
    NeuondragendScriptDas Script startet, wenn ein verschobenes Element losgelassen wird.
    Neuondragenter ScriptDas Script startet, wenn ein verschobenes Element an einer gültigen Stelle plaziert wird.
    NeuondragleaveScriptDas Script startet, wenn ein Element einen gültigen Platz verlässt.
    NeuondragoverScriptDas Script startet, wenn ein Element über ein anderes Element plaziert wird.
    NeuondragstartScriptDas Script startet, wenn begonnen wird, ein Element zu verschieben.
    NeuondropScriptDas Script startet, wenn ein verschobenes Element plaziert wird.
    onmousedownScriptDas Script startet, wenn die Maustaste gedrückt wird.
    onmousemoveScriptDas Script startet, wenn der Mauszeiger bewegt wird.
    onmouseoutScriptDas Script startet, wenn der Mauszeiger von einem Element wegbewegt wird.
    onmouseoverScriptDas Script startet, wenn der Mauszeiger auf ein Element bewegt wird.
    onmouseupScriptDas Script startet, wenn die Maustaste losgelassen wird.
    NeuonmousewheelScriptDas Script startet, wenn am Mausrad gedreht wird.
    NeuonscrollScriptDas Script startet, wenn die Scroll (Verschiebe) Leiste bewegt wird.

    Zur Auswahl

    Medien Event Attribute:

    Das sind Ereignisse, die von Medien (Videos, Töne oder Bilder) ausgelöst werden. Sie können von allen Tags verwendet werden.

    StatusAttributWertBeschreibung
    onabortScriptDas Script startet, wenn ein Medienereignis abgebrochen wird.
    NeuoncanplayScriptDas Script startet, wenn ein Medium abgespielt werden kann, aber noch auf die Beendigung der Zwischenpufferung wartet.
    NeuoncanplaythroughScriptDas Script startet, wenn ein Medium bis zum Ende abgespielt werden kann, ohne dass zum Zwischenpuffern gestoppt werden muss.
    NeuondurationchangeScriptDas Script startet, wenn sich die Dateigröße des Mediums und somit die Abspieldauer ändert.
    Neuonemptied ScriptDas Script startet, wenn der Medienpuffer plötzlich wegen Netzwerkfehler, Ladefehler leer ist.
    NeuonendedScriptDas Script startet, wenn ein Medium bis zum Ende abgespielt wurde.
    NeuonloadeddataScriptDas Script startet, wenn die Mediendaten geladen sind.
    NeuonloadedmetadataScriptDas Script startet, wenn die Zeitdauer und andere Metadaten geladen werden.
    NeuonloadstartScriptDas Script startet, wenn mit dem Laden der Mediendaten begonnen wird.
    NeuonpauseScriptDas Script startet, wenn die Pause des Medienspielers aktiviert wurde.
    NeuonplayScriptDas Script startet, wenn das Abspielen des Medienspielers aktiviert wurde.
    NeuonplayingScriptDas Script startet, wenn der Medienspielers die Daten abspielt.
    NeuonprogressScriptDas Script startet, wenn der Fortschritt des abgespielten Mediums ermittelt wird.
    NeuonratechangeScriptDas Script startet, wenn sich die Abspielrate des Medienspielers geändert hat.
    NeuonreadystatechangeScriptDas Script startet, wenn sich der Status des Medienspielers von “Ready” in einen anderen Zustand ändert.
    NeuonseekedScriptDas Script startet, wenn das Suchattribut nicht mehr logisch wahr (true) ist und eine Suche beginnt.
    NeuonstalledScriptDas Script startet, wenn ein Fehler das Abrufen von Daten verzögert.
    NeuonsuspendScriptDas Script startet, wenn der Medienspielers bereits Mediendaten erhalten hatte, aber bei den momentan abgerufenen Mediendaten gestoppt wurde.
    NeuontimeupdateScriptDas Script startet, wenn sich beim Medienspieler die Position geändert hat.
    NeuonvolumechangeScriptDas Script startet, wenn beim Medienspielers die Lautstärke auf Null gestellt “Mute” wurde.
    NeuonwaitingScriptDas Script startet, wenn der Medienspielers gestoppt wurde und wieder gestartet werden könnte.

    Zur Auswahl

    Mit diesem Artikel ist die Beschreibung der HTML5 Elemente abgeschlossen. Viel Spass beim Programmieren und Erstellen von Webseiten mit HTML, CSS und Javascript!

     

    Erfassen von Informationen und deren Quellen

    Posted in Allgemeines, Grundlagen, Medientheorie, Projektmanagement on 04/02/2010 08:40 by Hoegerl_Karl

    Die Strategien des Informationsmanagement zeigen die allgemeine Vorgehensweise auf. Nachdem der Informationsbedarf und das Design geklärt ist, werden Inhalte für die Webseite gesammelt. Das können unstrukturierte und strukturierte Informationen sein.

    Bei unstrukturierten Informationen empfiehlt sich die Daten zu kategorisieren. Dadurch lassen sich die Daten später leichter verwenden. Webseiten leben durch Veränderung und die kategorisierten Daten lassen eine mehrfache Wiederverwendung zu. Zudem können die Daten leichter wiedergefunden werden.

    Strukturierte Informationen stammen meist aus Datenbanken, Wikis, Tabellen, Mindmaps und weiteren Quellen. Je nach Quelle können die Informationen mehr oder weniger einfach in die Webseiten eingefügt werden. Meist werden die Informationen umgeformt. Dazu gibt es unterschiedliche Techniken.

    Wichtig ist auch die Dokumentation der eingesetzten Quellen, Techniken und deren Besonderheiten.

     

    Informationsmanagement – Informationsbedarf ermitteln

    Posted in Allgemeines, Projektmanagement, Webdesign on 03/20/2010 11:16 by kh4711

    Einer der ersten Schritte bei der Planung eines Internet Projekts ist das Ermitteln der Anforderungen des Auftraggebers. Wichtig hierbei ist nicht nur aktives Zuhören, sondern auch der Erfassen der Anforderungen. Dazu eignet sich hervorragend ein Mindmapping Tool, wie Freemind.

    Basierend auf den Anforderungen des  Auftraggebers sind weitere Tätigkeiten notwendig.

    1. Die Anforderungen auf Machbarkeit prüfen
    2. Alternative Vorschläge machen, falls die Anforderung nicht oder aufwendig machbar ist
    3. Die Informations- und Datenquellen ermitteln
      1. Sind die verfügbaren Informationen ausreichend?
      2. Haben die Informationen genügend Qualität?
    4. Die weitere Vorgehensweise festlegen, um fehlende Informationen zu erhalten.

    Ein weiterer Schritt ist die Auswahl des Designs nach den Anforderungen des Auftraggebers. Dies wird in einer folgenden Webseite erläutert.

     

    Strategien des Informationsmanagement bei der Webdesign Planung nutzen

    Posted in Allgemeines, Projektmanagement, Webdesign on 03/17/2010 09:29 by kh4711

    Informationsmanagement und Webdesign, das sind zwei Instrumente die aufeinander aufbauen. Zur Erstellung von Webseiten wird psychologiebasiertes Informationsmanagement genutzt. Das bedeutet, dass Beziehungen zwischen den Partnern, Partner <-> Kunde die wesentliche Vorgehensweise bestimmen. Zudem werden die Felder

    • Absatzmarkt
    • Beschaffungsmarkt
    • Konkurrenzmarkt
    • interner Markt

    nach strategischen und taktischen Gesichtspunkten analysiert. Das Ergebnis legt die weitere Vorgehensweise fest.

    Nach dieser Analyse erfolgt

    Durch diese Vorgehensweise wird eine erfolgreiche Webpräsenz erstellt.

     

    Mindmapping – Gedanken sammeln und Informationen strukturieren

    Posted in Allgemeines, Projektmanagement, Training on 12/20/2009 03:00 by Hoegerl_Karl

    Tony Buzan, britischer Mentaltrainer und Mitglied von Mensa International hat in den 70er Jahren Mindmapping entwickelt. Mindmapping ist eine Technik bei der Gedächtniskarten entstehen. Durch Mindmapping wird das Sprachzentrum der linken Gehirnhälfte und der gegenüberliegende, räumlich abstrakt denkende Bereich des Gehirns angeregt. Dadurch lassen sich Informationen ganzheitlich verarbeiten.

    Gezeichnete Mindmap

    Gezeichnete Mindmap

    Mindmapping wird genutzt für

    • Planung und Organisation
    • Strukturierte Darstellung von Texten und Berichten
    • Aufbereiten der Information für Lernen und Lehren
    • Ideenfindung und Brainstroming
    • Projektmanagement
    • Qualitätssicherung
    • Webseiten Planung und Entwicklung

    Durch die Umsetzung des Mindmapping auf dem Computer haben sich Vorteile ergeben, die eine effektivere Nutzung zulassen. Die Äste lassen sich einfach verschieben und neu anordnen. Wenn die Mindmap in Laufe der Zeit umfangreicher wird, dann wird automatisch für neue Äste Platz geschaffen.

    Es gibt aber auch Einschränkungen, da das Konzept von Tony Buzan bei Mindmapping Software nicht vollständig umgesetzt worden ist. Bei der grafischen Darstellung von Bildern gibt es Einschränkungen mit der Darstellung von Grafik. Es gibt keine Bildbearbeitungs-Funktionen und somit können nur fertige Bilder und Grafiken eingebunden werden.

    Freemind Präsentation

    Freemind Mindmapping SoftwareDas Programm dass ich heute vorstellen werde, heißt FreeMind und ist ein Open Source Programm mit GPL Lizenz, das kostenlos genutzt werden kann. Das Programm kann mit Windows, Linux und Apple OS-X benutzt werden. FreeMind funktioniert auf allen Betriebssystemen die die Java Runtime Engine (JAR) von Sun unterstützen.

    Die Oberfläche kann wie links dargestellt, im Präsentations Modus genutzt werden. Dann werden die zur Entwicklung notwendigen Funktionen ausgeblendet.

    Ein blauer Rahmen zeigt den ausgewählten Text oder Grafik an. Mit gedrückter linker Maustaste lässt sich die Mindmap verschieben. Dadurch können auch umfangreichere Mindmaps benutzt werden.

    Freemind Mindmap Entwicklung

    Um Mindmaps zu erstellen wählt man im Menü “Maps”  den Mindmapmodus. Die Oberfläche ändert sich und es können weitere Funktionen genutzt werden.

    Freemind im Mindmap ModusWer sich einige Tastaturkürzel merkt, kann sehr schnell Mindmaps erstellen oder ändern. Es lassen sich Bilder, Dateien und Hyperlinks einbinden.

    Im unteren Bereich sehen Sie den Editor für Kommentare. Hier kann mit einem WYSIWYG Editor oder im Quellcode mit HTML und Cascading Style Sheets gearbeitet werden.

    Auf der linken Seite befinden sich kleine Grafiken, die zum Text hinzugefügt werden können. Dadurch lassen sich grafische Hinweise wie  Prioritäten und Hinweise in die Äste hinzufügen.

    Die Mindmaps lassen sich vielfältig exportieren. Es stehen die Dateiformate HTML, Flash, Java Applet, PDF, SVG, verschiedene Bild- und Office Formate zur Verfügung.  Hier zwei Beispiele einer exportierten Mindmap.

    Beispiel Mindmap Webseiten_entwickeln

    Beispiel1:

    Mini Mindmap Webseiten entwickeln in 3 Minuten

    Beispiel2:

    http://freemind.sourceforge.net/wiki/extensions/freemind/flashwindow.php?startCollapsedToLevel=1&initLoadFile=/wiki/images/6/65/Steuerrecht.mm&mm_title=Steuerrecht.mm

    Fazit: Danke, Tony Buzan für deine genialen Ideen!

    Mindmapping setze ich nun bereits seit ca. 10 Jahren erfolgreich ein. Ich bin immer wieder begeistert, welche Potentiale durch Mindmapping freigesetzt werden.

    In meinen Workshops können Sie Mindmapping kennenlernen.

     

    Einheitliche Webseiten mit Designvorgaben

    Posted in Allgemeines, Projektmanagement, Webdesign on 06/14/2009 03:10 by Hoegerl_Karl

    Durch einheitliche Designvorgaben, die oft Style Guides genannt werden, lassen sich Webseiten mit einheitlicher Bedienung und Aussehen erstellen. Bei Webdesign wird im professionellen Umfeld immer mit diesen Methoden gearbeitet.

    Die Designvorgaben enthalten folgende Informationen:

    • Ziel der Webseite
    • Zielgruppe der Nutzer
    • URLs der betroffenen Webseiten
    • Struktur der Webseite
      • Technologie (HTML, CSS, …)
      • Maße der Tabellen oder Boxen
      • Rahmen
    • Schriftarten
    • Gliederung von Bildern, Grafiken und anderen Objekten
    • Beispielseiten mit den Stil
    • Homepage Struktur
      • HTML Seiten
      • CSS Dateien
      • Javascript Dateien
      • Frameworks
      • sonstige Objekte

    Es gibt verschiedene Wege zur Dokumentation. Ich persönlich finde ein Wiki am praktischsten, wenn in einer Gruppe an den Webseiten gearbeitet wird.

    Wenn eine Person die Seiten bearbeitet, dann kann auch ein Open Office Text Dokument eingesetzt werden. Dies hat den Vorteil, dass die HTML-Beispiele direkt in die Dokumentation mit eingearbeitet werden können.

     
    Older Entries     Newer Entries