html-lernen.de

Häufig werden Computer Nutzer mit wiederkehrenden Tätigkeiten am Computer beschäftigt. Dies kann zum Beispiel

• das Auslesen eines wöchentlich erhaltenen Excel Arbeitsblatts sein, dessen Daten in einem anderen Programm eingegeben und weiterverarbeitet werden müssen.
• periodisch durchzuführende Wartungsarbeiten an einem PC oder Server.
• automatisiertes Ablegen / Archivieren von Dateien inklusive Anlegen von Ordnern.
• und viele weitere Aufgaben …

Durch Makro Recorder kann Abhilfe geschaffen werden. Winautomation ist nicht nur ein Macro Recorder, sondern ein leicht zu bedienendes Automatisierungs Werkzeug.

WinAutomation Console

Winautomation bietet mehr als 130 vordefinierte Aktionen.

Winautomation Aktionen

Dies sind

• Mausbewegungen und Tastatureingaben
• Abfragen, Schleifen
• zum Beispiel Anmelden bei FTP Servern und das notwendige Handling der Dateien
• Anmelden und Abfragen von Datenbanken
• Texte und Excel Tabellen bearbeiten
• …

Die Aktionen lassen sich in Gruppen aufteilen:

Eine neue Aufgabe lässt sich schnell lösen. Entweder durch Direktauswahl von den vordefinierten Aktionen im visuellen Editor, oder bequem mit dem Macro Rekorder.

WinAutomation >> Aufgabe erstellen

Nach Abschluss der Aufzeichnung wird der Vorgang im Job Designer in leicht lesbaren Abschnitten in englischer Sprache dargestellt.

Winautomation Jobdesigner

Durch Doppelklick auf einen Abschnitt können Änderungen und Ergänzungen vorgenommen werden. Wenn man mit dem Mauszeiger auf  fährt, dann erscheint ein kurzer Hilfetext. Mit dem Icon “Start”  kann der Vorgang abgespielt werden. Ein Debugger unterstützt bei der Fehlersuche.

Eigenschaft eines Prozess Schritts

Die vielfältigen Möglichkeiten werden durch den Einsatz von Variablen ergänzt. Der Variablen Manager bietet übersichtlich eine Übersicht der genutzten Variablen und der Trigger.

Winautomation Variablen Manager

Manchmal kommt es auf einen PC oder Server vor, dass zum Beispiel ein Programm oder eine Funktion nicht ausgeführt wird. In diesem Fall hilft ein Ausnahme Handler, dass das Macro weiter ausgeführt wird.

Winautomation Ausnahme Handling

Durch die eingebaute Bilderkennung können auch grafische Elemente genutzt werden.

Winautomation Bilderkennung

Mit dem Zeitplaner können die Macros periodisch gestartet werden.

Winautomation Zeitplaner

Trigger bieten die Möglichkeit ein Macro bei einer bestimmten Zuständen zu starten. Zum Beispiel kann die Defragmentierung der Festplatte gestartet werden, wenn der Bildschirmschoner aktiviert wird.

Jede Nutzung kann in einer Log Datei aufgezeichnet werden.

Winautomation Log

Die Macros können in ausführbare Dateien umgewandelt werden. Die Datei kann auf Computer mit .net Umgebung ablaufen, ohne dass Winautomation installiert sein muß.

Winautomation in ausführbare Datei umwandeln

Fazit:

Winautomation ist ein  praktisches Programm, mit dem auch komplexe Tätigkeiten automatisiert werden können. Ein Einsteiger kann schnell eine Automatisierung mit Hilfe des Macro Recorders durchführen. Nach kurzer Einarbeitungszeit lassen sich mit Hilfe von Variablen, Abfragen, und Schleifen auch schwierigere Aufgaben lösen.

Ich möchte das Programm nicht mehr missen, da es mich in meiner Arbeit gut unterstützt.

Mit dem Tag <nav> werden Hyperlinks zu einer Navigationssektion in der Webseite zusammengefügt. Mit Hilfe von CSS bietet der Tag nav zusätzliche Möglichkeiten ein Navigationsmenü zu gestalten. Spezielle Attribute besitzt der mit  HTML5 neu geschaffene Tag nicht.

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>Mit nav eine Navigationsstruktur aufbauen</title>
  </head>
  <body>
     <h1>Mit nav eine Navigationsstruktur aufbauen</h1>

      <nav>
          <a href="index.html">Startseite</a>
          <a href="html5.html">HTML5 lernen</a>
          <a href="css.html">Cascading Style sheets</a>
          <a href="cms.html">Joomla</a>
          <a href="wordpress.html">Wordpress</a>
      </nav>

</body>
</html>

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

Der Tag <meter> von HTML5 dient zur Angabe von Messwerten. Dabei kann nicht nur der aktuelle Messwert angegeben werden, sondern über die Attribute auch weitere Angaben. Der Tag meter kann für alle Messgrössen verwendet werden. Ein weiterer Vorteil ist, dass die Messwerte in Attributen leichter mit Javascript verarbeitet werden können.

Es können sechs Attribute genutzt werden:

• high = Die eingetragene Zahl gibt den höchsten Messwert einer Messreihe an.
• low = Die angegebene Zahl zeigt den niedrigsten Wert der Messreihe.
• optimum = Bei angegebene Messwert ist der optimale Messwert.
• value = Zusätzlich kann der aktuelle Messwert mit diesem Attribut angegeben werden.
• max = Eine eingetragene Zahl bei diesem Attribut gibt den möglichen Maximalwert an. Standardeinstellung ist “1″.
• min = Der mögliche Minimalwert wird bei diesem Attribut angegeben. Standardeinstellung ist hier “0″.

Achtung: Auch hier werden Atribute 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 meter nutzen</title>
  </head>
  <body>
    <h1>Natriumdisulfit </h1>
    <p>E223 - Einsatz als Konservierungsmittel.</p>
    <p>Schmelzpunkt bei 150 Grad Celsius</p>
       Temperaturmessung in der Probe (Apfelsaft):
       <meter value="28" max="150" high="100">28</meter> Grad Celsius.

</body>
</html>

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

Mit dem <mark> Tag wird Text in einer Webseite markiert. Der Tag mark  ist eine optimale Unterstützung für CSS. Spezielle Attribute besitzt der mit HTML5 neu geschaffene Tag nicht.

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>Wege des Wissens</title>
  </head>
  <body>
          <p>Solange ihr den Berg nicht zu besteigen vermögt,<br />
             werdet ihr <mark>den Weg</mark> nicht finden.
</p>

<footer>von Wei Guan</footer>
</body>
</html>

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

Nachdem ich heute morgen mit Gimp die schnelle Methode zur Faltenglättung vorgestellt habe, eine weitere präsentieren. Mit Hilfe des “Heilen” Funktion können Falten entfernt werden.

Starten Sie Gimp und laden Sie Ihr Portrait zum retuschieren. Erstellen Sie als Erstes auf der rechten Seite ein Duplikat des Fotos. Klicken Sie danach auf der linken Seite auf den Button “Heilen” und wählen Sie den passenden Pinsel aus.

Falten reduzieren V2-01

Jetzt können wir mit der eigentlichen Bearbeitung der Falten beginnen. Wir vergrößern das Portrait und suchen die zu bearbeitende Falten aus. Den Mauszeiger ziehen wir auf eine faltenlose, ähnlich aussehende faltenfreie Haut. Mit gedrückt gehaltener STRG-Taste klicken wir auf die Stelle.

Falten reduzieren V2_02

Danach wird der Mauszeiger ohne gedrückte STRG-Taste auf die Falte geschoben und durch mehrfaches Klicken wird die Falte entfernt, wie im rot umrahmten Bereich zu sehen ist.

Falten reduzieren V2_03

Nun ist es aber so, dass ein Gesicht ganz ohne Falten unnatürlich aussieht. Daher stellen wir die Transparenz der kopierten Ebene so ein, dass leichte Falten sichtbar sind.

Falten reduzieren V2_04

In diesem Beispiel habe ich den rot umrahmten Bereich bearbeitet. Diese Art der Bearbeitung ist relativ zeitaufwendig, ergibt aber ein tolles Ergebnis!

Der <keygen> Tag von HTML5 ist ursprünglich von Netscape entwickelt worden.  Mit Hilfe des Tags wird ein Schlüsselpaar erzeugt und in einem HTML Formular übertragen. Über Attribute können Einstellungen vorgenommen werden.

Es können sechs Attribute genutzt werden:

• autofocus = Der Focus zum automatischen Laden kann auf “enable” oder “disable” gestellt werden.
• challenge = Mit dem Parameter “challenge” wird die Nutzung der Schlüssel vorgeschrieben, wenn der öffentliche Schlüssel übertragen wurde.
• disabled = Der Parameter “disabled” deaktiviert die Schreibrechte des Nutzers für das Formularfeld mit dem öffentlichen Schlüssel.
• form = Das Feld mit dem Schlüssel wird mit diesem Parameter dem angegebenen Formular hinzugefügt.
• keytype = Hier wird der Verschlüsselungstyp “rsa” als Parameter für die Erstellung eines RSA Schlüssels angegeben.
• name = Der Feldname des Schlüsselfelds wird als Parameter angegeben.

Achtung: Bei der Nutzung des Parameters “hidden” können die oben genannten Parameter “autofocus” und “disabled” nicht genutzt werden.

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 keygen nutzen</title>
  </head>
  <body>
    <h1>Daten verschlüsselt übertragen</h1>
    <p>Es wird ein Flash Video eingebunden.</p>

<form action="http://www.test.org/cgi-bin/test.pl">

<keygen keytype="rsa" name="securekey" challenge="challenge">
<input name="securekey" value="Schlüssel" />
</form>

</body>
</html>

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

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

Eine weitere, qualitativ hochwertige Bearbeitung befindet sich im Artikel:

Weitere Methode um mit Gimp Falten zu glätten

Zum Beginn des neuen Semesters gibt es eine große Auswahl an Kursen zur Weiterbildung. Am 05.02. und 06.02.2010 fand der Infotag bei der Volkshochschule der Stadt Regensburg statt. Dort gab es Informationen über die Möglichkeiten sein Wissen zu erweitern.

Was muss ich wissen um eigene Webseiten erstellen zu können?

• Grundlage bildet ein Webdesign Einsteigerkurs, in dem das Basiswissen über die Seitenbeschreibungssprache HTML erlernt wird.

• Grafiken und Bilder spielen bei Webseiten eine wichtige Rolle. Daher sind Kenntnisse über Bildbearbeitung auf dem Computer erforderlich. Häufig werden dafür die Bildbearbeitungsprogramme GIMP und Photoshop Elements eingesetzt.

• HTML ist eine mächtige Seitenbeschreibungssprache. Entwickler mit Grundlagenkenntnisse erfahren in einem HTML Webdesign Erweiterungskurs zusätzliche Möglichkeiten der fortgeschrittenen Webseiten Entwicklung kennen.

• Cascading Style Sheets bieten weitere Möglichkeiten bei dem Design von Webseiten. Zudem kann die Wartung der Webseiten durch geschickten Einsatz von CSS vereinfacht werden.

• Das Mindmapping Programm Freemind eignet sich sehr gut zur Planung von Web Projekten, zur Qualitätssicherung und Dokumentation.

• Durch die Scriptsprache Javascript und das Document Object Modell kann der Browser programmiert werden. Häufig wird dies in Web 2.0 Applikationen eingesetzt.

• Content Management Systeme wie zum Beispiel Joomla werden gerne bei Vereinen und kleineren Unternehmen eingesetzt. Es können mehrere Mitarbeiter Inhalte auf die Webseiten einstellen. Der Entwicklungsbereich ist von dem Text- und Inhalte- Bereich abgetrennt.

• Webmarketing und Suchmaschinen Optimierung, auch SEO genannt, wird immer wichtiger.  Mit den Google Tools zur Suchmaschinen Optimierung lassen sich gute Ergebnisse erzielen.

• Die Scriptsprache PHP und die Datenbank MySQL werden häufig im Internet eingesetzt und bilden die Grundlage des Web 2.0.

Das Internet entwickelt sich ständig weiter. So gibt es weitere interessante Bereiche:

• Mashup Systeme verbinden die Daten von Webseiten und ermöglichen so neue Erkenntnisse. Fragen Sie bei mir nach, falls Sie mehr wissen wollen.

• Blogs werden häufig für Tagebücher und Reisebeschreibungen genutzt.

• Wikis werden als Stadtwiki oder zur Dokumentation von Geräten, Programmen oder im Support eingesetzt.

• Bei der Planung, Installation und Wartung eines Wikis oder Blogs kann der Informationsdienst Högerl weiterhelfen.

Weitere Information zu Schulungen finden Sie unter html-lernen.de oder schreiben Sie mir eine Email.

Welcher Nutzer von Gimp hätte nicht auch gerne mal ein Photoshop Plug-in benutzt? Mit Hilfe von PSPI für Gimp von Tor Lillqvist können viele Photoshop Plug-ins in Gimp eingesetzt werden.

Die Installation des PSPI in Windows ist sehr einfach. Laden Sie die gepackte Datei gimp-pspi-1.0.7.win32.zip von der Webseite von Tor Lillqvist. Entpacken Sie die Datei pspi.exe in dem GIMP plug-ins Ordner. Im Regelfall ist dies \Programme\GIMP\lib\gimp\2.0\plug-ins.

Starten Sie dann Gimp. Es wird ein Verzeichnis C:\Programme\GIMP-2.0\photosh-plugins erstellt. Beenden Sie Gimp und kopieren Sie Ihre Photoshop Plug-ins in den neuen Ordner photosh-plugins. Nach dem erneuten Start von Gimp stehen die Photoshop Plug-ins im Gimp Menü “Filter” zur Verfügung.

Viel Spass bei der Nutzung Ihrer neuen Filter.

Der Tag <hgroup> wird zum Gruppieren von Überschriften genutzt. Die Nutzung dieses Tags ist erst in Verbindung mit Cascading Style Sheets interessant. Dann können Die Gruppen durch Style leicht umformatiert werden. Spezielle Attribute besitzt der mit HTML5 neue Tag nicht.

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 hgroup nutzen</title>
  </head>
  <body>
    <hgroup>
       <h1 align="center">Rede zum Schulabschluß am 20.09.1809</h1>
       <h3>von Georg Wilhelm Friedrich Hegel</h3>
    </hgroup>
         <p>Das Fortschreiten der Bildung ist nämlich nicht als das ruhige
            Fortsetzen einer Kette anzusehen, an deren frühere Glieder
            die nachfolgenden zwar mit Rücksicht auf sie gefügt würden,
            aber aus eigener Materie und ohne daß diese weitere Arbeit
            gegen die erstere gerichtet wäre. Sondern die Bildung muß
            einen früheren Stoff und Gegenstand haben, über den sie arbeitet,
            den sie verändert und neu formiert. Es ist nötig, daß wir uns
            die Welt des Altertums erwerben, so sehr, um sie zu besitzen,
            als noch mehr, um etwas zu haben, das wir verarbeiten.
            ...
</p>
</body>
</html>

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