Beiträge

Veröffentlicht am

HTML5 – <audio> Element

Weil Flash von Adobe durch die schnelle Entwicklung über viele Jahre immer mehr Fehler und Sicherheitslücken besaß, wurden Multimedia- und Animationsfunktionen in HTML5, CSS und Javascript integriert. Eines der TML Elemente ist <audio>. Es ermöglicht die Integration von Audioplayern in Webseiten. Damit können Audio Streams oder Sound genutzt werden.

Das HTML <audio> Element hat 7 Attribute

  • src = Der Pfad und Dateiname des Sounds angegeben werden
  • autoplay = Wenn der Wert “autoplay” eingetragen ist, dann startet die Sound Datei nach dem laden der Datei
  • controls = Bei eingetragenen Wert “controls” werden die Steuerelemente angezeigt
  • loop = Wenn der Parameter “loop” eingetragen ist, dann wird die Musik endlos wiederholt
  • preload = Wenn “preload” eingetragen wird, dann wird der Sound Datei zusammen mit der Webseite geladen. Dies funktioniert nur, wenn das Attribut autoplay nicht genutzt wird!
  • muted = Schaltet die Wiedergabe auf Lautlos
  • crossorigin = Festlegen, wie das Steuerelement ursprungsfremde Anfragen behandelt

Zudem können die Universalattribute verwendet werden

accesskey
autocapitalize
autofocus
contenteditable
dir
draggable
enterkeyhint
hidden		 inputmode
is
itemid
itemprop
itemref
itemscope
itemtype		 lang
nonce
spellcheck
style
tabindex
title
translate

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Das HTML Element &lt;audio&gt; einsetzen</title>
  </head>
  <body>
    <h1>Ein Klang auf der Webseite</h1>
    <p>Das Sound ist eingebunden</p>

      <video src="http://www.html-lernen.de/wp-content/uploads/2009/12/Gimp_verbesserung.flv"
      controls="controls">
        Ihr Browser unterstützt den &lt;audio&gt; Element nicht.
      </video>
  </body>
</html>

Der Tag wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!

 

Veröffentlicht am

HTML Canvas Grafiken

HTML Canvas wird zum softwaregesteuerten Zeichnen von Grafiken auf Webseiten eingesetzt.  Das Element <canvas> mit weiteren Parametern zeichnet grafische Figuren, Texte, Hintergründe und kann Bilder hinzufügen. Canvas ist ein Container für Grafiken und Javascript wird zum Zeichnen der Grafiken genutzt.

Welche Browser unterstützen HTML Canvas?

Die volle Unterstützung von Canvas beherrschen die Browser ab der genannten Version und jede neuere Version.

  • Firefox ab Version 2.0
  • Apple Safari ab Version 3.1
  • Chrome ab Version 4.0
  • Opera ab Version 9.0

Ein Code Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>HTML Canvas</title>
</head>
<body>

<!-- Rechteck zeichnen mit Canvas-->
<canvas id="meinCanvas" width="300" height="200" style="border:4px solid #0000cc;">
</canvas>

<!-- Fülling erstellen mit Javascript -->
<script>
var c = document.getElementById("meinCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,260,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"gold");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,280,180);
</script>
</body>
</html>

Fazit

HTML Canvas ist eine praktische Erweiterung, wenn es darum geht maschinell Grafiken zu erstellen. Bei der Digitalisierung und Industrie 4.0 werden Funktionen wie diese die Kommunikation zwischen Mensch und KI erleichtern.

Veröffentlicht am

Höhere Produktivität mit dem Vivaldi Browser

Browser gibt es inzwischen eine ganze Menge und daher ist es schwierig, den Richtigen zu finden. Der Vivaldi Browser ist ein außergewöhnlicher Browser, denn er hat eine interessante Entstehungsgeschichte. Die Entwickler von Vivaldi Technologies sorgen für eine erfolgreiche Entwicklung. Einige Entwickler haben sich von dem Opera Team getrennt. Das norwegische Unternehmen Opera stellte den ersten europäischen Browser mit eigener Rendering Engine her. Diese hervorragende Browser wurde mit der Opera Version 12.18 aufgegeben und durch die Chromium Rendering Engine ersetzt. Der neue Opera Browser hatte nur einen Bruchteil der Funktionalität des alten Opera Browsers. Mit dieser Weiterentwicklung bei Opera, der Reduktion der Funktionalität waren verschiedene Entwickler nicht einverstanden.

So wurde Vivaldi Technologies gegründet. Der Vivaldi Browser hat das Ziel einen sicheren und auch benutzerfreundlichen Browser anzubieten, bei dem den Nutzer selber in der Konfiguration den Funktionsumfang einstellen kann. Also ein hoch konfigurierbarer Browser für Power Nutzer, aber ebenso einfach und benutzerfreundlich für Einsteiger zu bedienen.

Die Umsetzung ist sehr gut gelungen und die neue Version des Vivaldi Browser besticht durch eine umfangreiche Funktionalität. Er ist einfach zu bedienen und außer dem hat der Vivaldi Browser eine hohe Rendering Geschwindigkeit.

html-lernen

Der Funktionsumfang im Überblick:

  • Schutz vor Tracking Ads und Werbeblocker bei Webseiten
  • Tabs und Bookmarks werden mit Ende-zu-Ende Verschlüsselung synchronisiert
  • Aufruf eines Schnellbefehlsfenster
  • Notizen Fenster, das der jeweiligen Webseite zugeordnet ist
  • Pop-out Videos
  • Screenshots der gesamten Webseite
  • und viele weitere Funktionen …

Der Vivaldi Browser kann kostenlos heruntergeladen und genutzt werden. Er ist für Microsoft Windows, Linux, Apple OS-X und Android verfügbar.

Veröffentlicht am

Protokolle und Adressen im Internet verwenden

Um mit dem Internet arbeiten zu können brauchen wir auf jeden Fall die Art des Protokolls und die Adresse des entsprechenden Servers. Der Fachausdruck für die Adresse heißt auch Uniform Resource Locator (URL). Um die Informationen zu finden muss man folgendes wissen:

  • Um welche Art von Information handelt es sich?
  • Auf welchem Rechner befindet sich die Information?
  • Wo liegt die Information auf dem Rechner?

 

Zusammensetzung der Adresse

Wenn wir uns die Adresse genauer betrachten, dann können wir folgendes feststellen. Die Adresse setzt sich aus mehreren Teilen zusammen.

  • https:// bezeichnet die Art des Protokolls.
  • www.html-lernen.de bezeichnet die Adresse des Servers.
  • ordner/datei.htm zeigt den Pfad auf dem Server.
Protokoll Sub-Level-Domain Top-Level-Domain Pfad und Seitenname
https:// www.html-lernen de ordner/datei.htm

 

Das Protokoll

Browser können Protokolle verarbeiten. Protokolle sind für Computer das gleiche wie für den Menschen. Es werden Regeln oder Standards vorgegeben. Mit deren Hilfe wird die Kommunikation erleichtert.

Protokolle für das Internet sind:

Protokoll Dienst
http:// Hypertext Transfer Protokoll für das WWW
https:// Verschlüsseltes Hypertext Transfer Protokoll
telnet:// Telnet-Verbindung
ftp:// File Transfer Protocol
ftps:// Verschlüsseltes File Transfer Protocol
news:// Usenet
mailto: e-mail

 

Die IP Adresse

Wie wir schon gelesen haben, hat jeder Computer eine IP-Adresse (Internet Protokoll Adresse). Mit Hilfe dieser Adresse ist jeder Computer in dem weltweiten Netzwerk zu finden. Die IP-Adresse setzt sich aus 4 Zahlenblöcken zusammen.

Hier ein Beispiel einer Adresse: 122.37.61.45.

Der erste Zahlenblock links, beschreibt die Größe des Netzwerks. Hier gibt es drei Netzwerk Klassen:

Netzwerknummer maximale Anzahl der Adressen Klasse
1 – 126 16 387 064 A
128 – 191 64 516 B
192 – 223 254 C

Der Rest zeigt auf den jeweiligen Rechner in der Netzwerkklasse.

Namen als Adressen benutzen

Da wir uns unter den Zahlen keine richtige Vorstellung über die entsprechende Webseite machen können, hat man zusätzlich Domain Name Server (DNS) eingeführt. Diese DNS weisen den IP-Adressen einen Namen zu. Dieser Name wird auch Uniform Resource Locator (URL) genannt und kann beispielsweise

http://www.html-lernen.de/ordner/datei.html

lauten.

 

Die Domänennamen

Dazu gibt es den Daomänennamen als weiteres Kennzeichen. Hier gibt es zwei Kategorien.

  • Gruppierung nach Ländernamen
  • Gruppierung nach Organisationstyp

Hier ist eine Auswahl verschiedener Domains:

Domainname Kennung
com Kommerzielles Unternehmen
org Organisationen
edu Bildungseinrichtungen
net Netzwerke
gov Behörden oder Regierungseinrichtungen
mil Militär
de Deutschland
us USA
ca Kanada
uk Großbritannien
fi Finnland
au Australien
dk Dänemark
ru Russische Föderation
fr Frankreich

Veröffentlicht am

Das opte Projekt – sehenswerte Internet Karte

Das Ziel des opte Projekts war eine grafische Kartografierung des Internets. Das letzte Bild aus dem Jahr 2005 zeigt weniger als 30 % des Internets basierend nur auf Klasse C Netzwerken.

Karte OPTE Projekt

Internet Karte

Die Linien sind farblich entsprechend den RFC 1918 Addressbereichen gekennzeichnet:
Dunkelblau: net, ca, us
Grün: com, org
Rot: mil, gov, edu
Gelb: jp, cn, tw, au, de
Magenta: uk, it, pl, fr
Gold: br, kr, nl
Weiß: unbekannt
Leider wurde das opte Projekt eingestellt. Die Visualisierung ist ein Kunstwerk und wirkt wie eine Sternenkarte.
Veröffentlicht am

HTML5 – Neuer Tag <video>

Der Element <video> ist neu und dient zum Einbinden von Videoclips oder Streaming Video in Webseiten. Es ist ein Ersatz für die Video Funktion von Flash. Browser mit HTML5 Unterstützung können Videos somit ohne Flash wiedergeben. Das bekannteste Gerät ist das iPad von Apple, das Ostern 2010 in Deutschland auf dem Markt kommt. Weitere Browser, wie Opera V10.51, Apple Safari 4 und Firefox 3.6 und einige Handys unterstützen die Video Funktion von HTML 5.

Das Element <video>hat sieben Attribute:

  • autoplay = Wenn der Wert “autoplay” eingetragen ist, dann startet der Video nachdem die Daten geladen sind.
  • controls = Bei eingetragenen Wert “controls” wird die Steuerung angezeigt.
  • height = Hier wird die Höhe des Videofensters in Pixel angegeben.
  • loop = Wenn der Parameter “loop” eingetragen ist, dann wird der Video endlos wiederholt.
  • preload = Wenn “preload” eingetragen wird, dann wird der Video zusammen mit der Webseite geladen. Dies funktioniert nur, wenn das Attribut autoplay nicht genutzt wird!
  • src = Als Wert muss hier der Pfad und Dateiname des Videos angegeben werden.
  • width = Hier wird die Breite des Videofensters in Pixel angegeben.

Zusätzlich können

  • die Universalattribute class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title
  • die Eventattribute onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

verwendet werden.

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Das HTML Element &lt;video&gt; einsetzen</title>
  </head>
  <body>
    <h1>Ein Video auf der Webseite integrieren</h1>
    <p>Das Video ist eingebunden</p>

      <video src="http://www.html-lernen.de/wp-content/uploads/2009/12/Gimp_verbesserung.flv"
      controls="controls">
        Ihr Browser unterstützt das &lt;video&gt; Element nicht.
      </video>
  </body>
</html>

Der Element wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!

 

 

 

 

 

Veröffentlicht am

HTML5 – Neuer Tag <section>

Der Tag <section> in HTML5 teilt die Webseite in Abschnitte. Dies können Kapitel, Sektionen oder ähnliches sein. Dieser Tag lässt sich sehr gut mit Cascading Style Sheets  ( CSS ) nutzen und vereinfacht den Aufbau des Webdesigns.

Es kann ein Attribute genutzt werden:

  • cite = Die Angabe der URL, wenn der Abschnitt von einer anderen Webseite genutzt wird

Achtung: Auch hier werden Attribute optional angegeben.

Zudem können

  • die Universalattribute class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title
  • die Eventattribute onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

verwendet werden.

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Den Tag section nutzen</title>

  </head>
  <body>
    <h1>Des Kaisers Marcus Aurelius Antonius Selbstbetrachtungen</h1>

      <section cite="http://gutenberg.spiegel.de/?id=5&xid=4103&kapitel=
       2&cHash=69c0c0a45a2#gb_found">
        Alles ist voll von Spuren göttlicher Vorsehung. Auch die zufälligen
        Ereignisse sind nichts Unnatürliches, sind abhängig von dem
        Zusammenwirken und der Verkettung der von der Vorsehung gelenkten
        Ursachen. Alles geht von der Vorsehung aus. Hiermit verknüpft sich
        sowohl die Notwendigkeit als auch das, was zur Harmonie des
        Weltganzen nützlich ist, wovon du ein Teil bist. Was mit dem großen
        Ganzen übereinstimmt und was zur Erhaltung des Weltplanes dient, das
        ist für jeden Teil der Natur gut. Die Harmonie der Welt wird erhalten
        sowohl durch die Veränderungen der Grundstoffe als auch der daraus
        bestehenden Körper. Das genüge dir, das möge dir stets zur Lehre
        dienen. Den Bücherdurst vertreibe, damit du nicht murrend sterbest,
        sondern mit wahrem Seelenfrieden und dankbarem Herzen gegen die Götter.
      </section>
  </body>
</html>

Der Tag wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!

Veröffentlicht am

Schnelle Faltenglättung mit Gimp

Portraits von Personen werden oft nachbearbeitet. Eine häufig verwendete Funktion ist die Faltenglättung. Diese wollen wir mit Hilfe von Gimp kennenlernen.

Als erstes laden wir das Bild in Gimp.

Falten reduzieren 01

Nun duplizieren wir die Ebene, indem wir Duplikat der Ebene auswählen.

Falten reduzieren 02

Die neu erstellte Ebene wird jetzt mit dem Filter “Gaußscher Weichzeichner” aus dem Menü “Filter/Weichzeichnen” bearbeitet. Benutzen Sie die Einstellung Weichzeichenradius zwischen 3 und 8. Die Weichzeichenmethode wählen Sie nach der optisch im Vorschaubild am besten dargestellten Reduzierung und bestätigen mit dem Button “OK”.

Falten reduzieren 03

Aktivieren Sie nun die Ebene “Hintergrund”. Wählen Sie im Werkzeugkasten “Klonen” aus. Links unten werden dann die Einstellungen Pinsel “Fuzzy Cirlcle” in der gewünschten Größe mit Deckkraft 100%, Quelle “Bild” und Ausrichtung “Registriert” aus. Klicken Sie mit gedrückter STRG-Taste in das angezeigte Bild.

Falten reduzieren 04

Wechseln Sie nun auf die Ebene “Hintergrund-Kopie” und vergrößern Sie ggf. das Bild zur leichteren Bearbeitung. Wenn Sie jetzt mit dem Pinsel über die Zähne, Augen und Augenbrauen fahren, dann wird an diesen Stellen die Weichzeichnung entfernt. Das darunter liegende Bild wird sichtbar.

Falten reduzieren 05

Stellen Sie danach rechts oben die gewünschte Deckkraft der weichgezeichneten Ebene ein. Dieser Wert liegt meist von 40 bis 80%. Jetzt können Sie Ihr Bild abspeichern.

Ein Vergleich zeigt das unbearbeitete Original

Unbearbeitetes Original

und das bearbeitete Portrait.

Bearbeitetes Portrait

Veröffentlicht am

HTML5 – Neues Element <embed>

Der <embed> Tag von HTML5 ist vielfältig nutzbar.  Mit Hilfe des Tags werden multimediale Inhalte, Plugins eingebunden. Das bietet die Möglichkeit Flash, Videos und andere multimediale Inhalte in der Webseite zu präsentieren. Über Attribute wird die Breite und die Höhe der genutzten Inhalte festgelegt.

Es können vier Attribute genutzt werden:

  • height = Die Höhe des genutzten Bereichs wird in Pixel angegeben.
  • width = Die Breite des Bereichs in Pixel angeben.
  • src = Den Pfad und Dateiname des eingebundenen Elements eintragen.
  • type = Die Art des genutzten Inhalts bestimmen.

Zudem können

  • die Universalattribute class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title
  • die Eventattribute onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

verwendet werden.

In den Quellcode Beispiel wird eine lokale Flash Datei in die Webseite eingebunden. Die Breite und Höhe werden durch die Flash Datei gesetzt.

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Den Tag embed nutzen</title>
  </head>
  <body>
    <h1>Video aus dem Artikel Gimp Bildverbesserung</h1>
    <p>Es wird ein Flash Video eingebunden.</p>

       <embed src="http://www.html-lernen.de/wp-content/uploads/2009/12/Gimp_verbesserung.flv" />

</body>
</html>

Der Tag wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!

Veröffentlicht am

HTML5 – Neues Element <canvas>

Der Tag <canvas> ist neu und fügt mit Javascript oder Scriptsprachen erstellte Grafiken ein. Dies können zum Beispiel Statistiken, Werbung oder weitere Elemente dargestellt werden. Das ist ein Tag mit viel Potential!

Es gibt zwei Attribute:

  • width = Bei width wird die Breite der grafisch genutzten Fläche in Pixel angegeben werden.
  • height = Hier wird die Höhe der grafisch genutzten Fläche in Pixel angegeben.

Zusätzlich können

  • die Universalattribute class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title
  • die Eventattribute onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

verwendet werden.

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Den Tag canvas einsetzen</title>
  </head>
  <body>
    <h1>Meine Webseite</h1>
    <p>Das ist der Text in meiner Webseite. Nun wird ein berechnetes
Quadrat eingebunden.</p>

       <canvas id="quadrat></canvas>

       <!-- Berechnung der Grafik -->
       <script type="text/javascript">
         var ctx=canvas.getContext('2d');
         var canvas=document.getElementById('quadrat');
         ctx.fillStyle='#6666ff';
         ctx.fillRect(10,10,120,120);
       </script>
</body>
</html>

Der Tag wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!

Veröffentlicht am

HTML5 – Neues Element <article>

HTML5.2 ist vom W3C am 14.12.2017 als Recommendation verabschiedet worden. In den neueren Browser Versionen stehen die meisten HTML Erweiterungen bereits zur Verfügung.

Beginnend mit diesem Artikel stelle ich nach und nach die neuen Tags von HTML5 vor.

<article>

Der Tag <article> wird genutzt, um fremde Artikel in der eigenen Webseite einzufügen.

Es gibt zwei Attribute:

  • cite = URL des Artikels
  • pubdate = Erscheinungsdatum des Artikels

Zusätzlich können

  • die Universalattribute class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title
  • die Eventattribute onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

verwendet werden.

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Den Tag article einsetzen</title>
  </head>
  <body>
    <h1>Meine Webseite</h1>
    <p>Das ist der Text in meiner Webseite. Nun folgt der
    Artikel der externen Webseite.</p>
      <article cite="http://www.w3c.org" pubdate="2009-12-20T09:38:46+01:00">
        <a href="http://www.w3c.org>W3C</a>
        <p>Wer mehr über das World Wide Web Consortium wissen möchte.</p>
      </article>
  </body>
</html>

Der Tag wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!

Veröffentlicht am

Mindmapping – Gedanken sammeln und Informationen strukturieren

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.

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. 20 Jahren erfolgreich ein. Ich bin immer wieder begeistert, welche Potentiale durch Mindmapping freigesetzt werden.

In meinen Workshops können Sie Mindmapping kennenlernen.

Veröffentlicht am

HTML-Seiten in andere Webseiten einbetten

Manchmal gibt es HTML-Seiten deren Daten auf einer anderen Webseite dargestellt werden sollen. Die Inhalte sollen aber nicht mehrfach erstellt werden. Häufig wird dies genutzt, um zum Beispiel die ausgegebenen Daten einer Datenbank in Webseiten mit verschiedenen Designs darstellen zu können. Dies wird mit Inline Frames möglich.

Durch den HTML Code

<iframe src=”pfad/IhreWebseite.html” width=”80%” height=”500″ name=”InlineFrame”>
<p>Sie können die eingebettete Webseite über den Hyperlink
<a href=”pfad/IhreWebseite.html”>Eingebettete Webseite</a> aufrufen.</p>
</iframe>

wird Ihre Webseite als Inline Frame in die HTML Seite eingefügt.

Achtung:
Beim Kopieren in die Zwischenablage wird manchmal statt dem Anführungszeichen (“)  ein anderes Zeichen eingefügt. Dann funktioniert das Beispiel nicht.

Folgende Attribute stehen zur Verfügung und können eingesetzt werden:

  • src = Angabe des Pfads und des Dateinamens der einzubettenden Webseite
  • name = Name des Frame Bereichs. Hyperlinks können auf den Namen verweisen
  • width = Breite des Frame beispielsweise in Prozent der Breite der umgebenden Box
  • height = Höhe des Frame hier im Beispiel mit der Angabe in Pixel
  • align = Ausrichtung des Frames mit “left” linksbündig und mit “right” rechtsbündig
  • scrolling = Anzeigen von Scrollbalken mit “yes”. Mit “no” werden keine angezeigt. Bei “auto” wird nur bei Bedarf ein Scrollbalken angezeigt
  • frameborder = Erzeugt einen sichtbaren Rahmen um den Frame. Mit frameborder=”0″ gibt es keinen Rahmen

Das HTML Dokument muss über folgende Dokumenttyp Deklaration verfügen.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

Inline Frames sind eine praktikable Möglichkeiten Teile von Webseiten in einzufügen. Änderungen der eingefügten Webseiten werden überall sofort verfügbar.

Veröffentlicht am

Universalattribute in HTML nutzen

Befehle der Seitenbeschreibungssprache HTML heißen Tags. Sie sind durch eckige Klammern gekennzeichnet. Innerhalb der Tags gibt es die Möglichkeit weitere Eigenschaften einzustellen. Dies geschieht durch Attribute im HTML Tag.

Universalattribute unterscheiden sich von normalen Attributen dadurch, dass sie in fast allen Tags genutzt werden können.

Schema:

<Tag Universalattribut=”Wert”> … </Tag>

Beispiele:

<h1> Dies ist ein HTML Tag für eine Überschrift </h1>
<h1 style="text-align:left;"> HTML Tag mit Universalattribut style </h1>
<h1 style="text-align:left;" id="Titel"> Mehrere Universalattribute </h1>

Liste der Universalattribute:

Attribut Beschreibung
title Dem Tag wird ein Kommentar hinzugefügt. Dieser erscheint in einen kleinen Fenster, das Tooltip genannt wird. Es erscheint, wenn der Mauszeiger einige Zeit über den Text gehalten wird.
style Hier werden dem HTML Tag Befehle von Cascading Style Sheets (CSS) hinzugefügt. Cascading Style Sheets diesen zur erweiterten Formatierung von HTML.
class Dem Tag wird eine Klasse zugeordnet, die mit Cascading Style Sheet Befehlen genutzt wird.
id Durch die ID ist eine eindeutige Identifizierung eines Elements möglich. Dies wird hauptsächlich bei Javascript Programmierung verwendet. Innerhalb der Datei darf der Wert dieses Attributs nicht wiederholen.
lang Dieses Attribut gibt die Sprache an, die innerhalb dieses Tags verwendet wird. Mögliche Werte wären zum Beipiel: de = Deutsch, en = Englisch, ru = Russisch, jp = Japanisch …
dir Hier wird die Leserichtung des Textes eingestellt. Denn zum Beipiel wird Arabisch von Rechts nach links gelesen. Mögliche Werte wären ltr = von Links nach Rechts, rtl = von Rechts nach Links.