Archiv der Kategorie: Weiterbildung

Beiträge die direkt mit der Weiterbildung zum Web-Developer in Verbindung stehen

Hui ui ui ui ui….

Hallo lieber Blog! Da bist du ja wieder! =)

Vieles passiert gerade. Vieles in der Weiterbildung. Vieles bei der Jobsuche. Vieles, das mir die Zeit nimmt mich angemessen um meinen Blog zu kümmern.
Mich für die Weiterbildung im Bereich Web-Entwicklung zu entschließen war vermutlich die beste Entscheidung seit langem. Fast täglich telefoniere oder schreibe ich mit Rekruitern, Personalvermittlern und potentiell interessierten Firmen. Nicht immer kann ich den Anforderungen gerecht werden und so waren auch schon Absagen dabei, aber das ist auch ok so.

Vieles passiert auch gerade, was uns alle angeht – aber die meisten ignorieren. Stichwort NSA. Stichwort PRISM. Stichwort Tempora. Edward Snowden. Er hat uns die Möglichkeit gegeben, die Augen zu öffnen. Nur viele tun es nicht. Den meisten ist schlicht und einfach nicht bewusst, was da gerade abgeht – nein, was schon seit langem abgeht, aber erst seit kurzem wirklich öffentlich wurde. Edward Snowden hat ein überaus hohes Risiko begangen und sein Leben für uns alle riskiert. Du denkst, ich übertreibe? Sein Leben? Ja! Wie viele gibt oder gab es denn, von denen wir nicht wissen? Die es nicht an die Öffentlichkeit und in die (zumindest temporäre) Sicherheit geschafft haben? Google ist dein Freund? Mitnichten! Deine Daten sind sicher? Bullshit!

Das ein Unternehmen wie Google gewinnorientiert ist und deswegen beispielsweise den Inhalt aller deiner E-Mails scant mag noch vertretbar sein. Aber das (amerikanische) Unternehmen von der Regierung gezwungen werden, Hintertüren in ihre Systeme, in ihre Betriebssysteme wie Windows einzubauen, die es den Geheimdiensten ermöglichen Zugriff auf dein System zu erlangen ist nicht vertretbar. Dass Geheimdienste mittels U-Booten die Datengroßleitungen anzapfen, und jegliche Informationen des weltweiten Internetverkehrs mithören ist nicht vertretbar! Dass der Deutsche Staat, dessen Bürger, dessen Firmen und unter Umständen deren Firmengeheimnisse mitgehört werden ist nicht vertretbar! Dass unsere Regierung so tut, als wüsste sie von all dem nichts, sich darüber ausschweigt, es herunterspielt und nichts unternimmt ist VERDAMMT NOCH MAL NICHT OK!

Du hast bis hierhin gelesen? Dafür danke ich dir! Ich könnte noch viel mehr darüber schreiben. Diese Thematik, die derzeitigen Geschehnisse und alles, was damit verbunden ist und noch folgen wird bewegen mich sehr. Und sie sollten auch jeden anderen Bürger bewegen, dem es eben nicht egal ist, dass fremde Personen, fremde Regierungen in seinen Daten herumschnüffeln! Als ob die, die wirklich was im Schilde führen nicht wüssten, wie sie sich vor solchen Abhöraktionen schützen…


Ich bin stark abgeschweift. Der Blog wird zweckentfremdet. Aber gerade die Menschen, die sich in den Bereichen der IT bewegen und evtl. auch meinen Blog ab und an oder auch nur zufällig lesen, dürften ein nicht minder starkes Interesse an der Sicherheit ihrer Daten haben.

Abschließend (um mich wieder um meine Bewerbungen zu kümmern) möchte ich noch auf Bewegungen wie #StopWatchingUs, Campact und PRISM BREAK verweisen. Sie bieten noch weitere Informationen und speziell PRISM BREAK zeigt einfach und verständlich auf, wie man sich vor Datenspionage schützen kann bzw. es den Geheimdiensten zumindest schwerer macht.

So long, das wars erst mal wieder von mir. Jetzt gehts wieder ans aktive Bewerben, Recherchieren und wenn die Zeit es zulässt auch noch n bisserl ans openSUSE Linux einrichten – oder slacken… schau mer mal… =)

 

Cite oder nicht cite? Das ist hier die Frage! – Bezeichnungen von Bildern

Der Online-Übersetzungsdienst LEO übersetzt “cite” unter anderem mit “zitieren” und “anführen”. Folglich könnte man davon ausgehen, dass das entsprechende HTML-Element <cite> eben genau für Zitate zuständig ist. Leider ist dem nicht so. Zumindest nicht immer. Je nach HTML-Version. Theorethisch. … (ausstehend) …

Dieser Beitrag sollte eigentlich bereits vor zwei Tagen das Licht der Welt erblicken. Hat er aber aus zeitlichen Gründen leider nicht geschafft. =(

Zwischenzeitlich sind wir jedoch im HTML-Grundkurs wieder ein gutes Stück weiter gekommen und beim Einbinden von Grafiken angelangt. Daher wird der eigentliche Artikel so erst mal nicht vollendet, eventuell aber später noch mal aufgegriffen.


Das Einbinden von Grafiken in HTML ist kein Hexenwerk. Bis auf ein paar wenige (teils veraltete) Attribute wie “align”, “hspace”, “vspace” “border”, etc. gibt es nach wie vor jedoch das “alt”-Attribut- und genau dieses wirft immer wieder Fragen über dessen Verwendung auf. Das Internet ist voll mit Beiträgen, die sich dem Thema “Bezeichnung von Bildern” widmen. Gerade in Foren wird immer wieder das alt-Attribut falsch interpretiert und dadurch falsch verwendet. Aus diesem Grund möchte ich hier auch noch einmal Bezug darauf nehmen und für Aufklärung sorgen.

Korrekte Verwendung von “alt” und optionale Verwendung von “title”

Mittels dem alt-Attribut wird der Inhalt des Bildes beschrieben. Zum Einen, falls das Bild aus bspw. technischen Gründen nicht angezeigt werden kann – zum Anderen für bspw. Screenreader im Bezug auf das Thema “Barrierefreiheit”. Ein Bild einer Blumenwiese soll also im alt-Attribut bspw. “Photoaufnahme einer Blumenwiese” enthalten.

Nun hat der Internet Explorer bisher jedoch fälschlicherweise den Inhalt des alt-Attributs beim Überfahren mit dem Mauszeiger als Tooltip angezeigt und viele Benutzer haben sich daran gewöhnt. Neueste Versionen des IE machen dies nicht mehr und auch alle anderen Browser nicht. Um dem User aber weiterhin ein visuelles Feedback beim Mouse-Over zu geben – da er sich daran gewöhnt hat – empfiehlt sich optional die Verwendung des title-Attributs.

Das title-Attribut ist universell und nahezu überall verwendbar. Im Zusammenhang mit Bildern hat es per Definition jedoch die Bedeutung “Working title”. So soll nacht HTML-Referenz ein Bild eines Kunstwerks bspw. mit “Mona Lisa” betitelt werden, im alt-Attribut könnte bzw. sollte jedoch bspw. “Malerisches Bildnis einer jungen Frau” stehen. Nach dem Grundverständnis von SEO ist nämlich doppelter Inhalt zu vermeiden. Auch macht es schlicht keinen Sinn etwas doppelt zu erwähnen.

Abschließend noch einmal ein anderes Beispiel:

Weiße Glasflasche gefüllt mit rot-transparenter Flüssigkeit und einer Art Gewürzzweigalt-Attribut:
Weiße Glasflasche gefüllt mit rot-transparenter Flüssigkeit und einer Art Gewürzzweig

title-Attribut:
Beispielbild

Liebe deinen Coder wie dich selbst!

HTML Code 1Der just diesen Morgen ins Postfach geflatterte t3n-Newsletter enthält im Titelthema einen Beitrag über den Xing-Gründer Lars Hinrichs. Sein Credo: “Programmierer sind die Künstler des 21. Jahrhunderts”. Passender könnte diese Aussage nicht sein, haben wir doch gestern mit dem Schreiben (nicht programmieren) von HTML begonnen.

Die Zeit des Bling Bling ist nun vorbei – jetzt wirds ernst! Nunja, zumindest für die meisten der Teilnehmer dieses Kurses. In diesem (auch von WBS fälschlich als “Webprogrammierung” bezeichneten) Abschnitt der Weiterbildung beginnen wir nun mit dem eigentlichen “developen” – sprich Entwickeln von Internetseiten. Schöne Bilder wie aus Photoshop oder interessante Flash-Animationen wird es auf meinem Blog zunächst also nicht mehr geben. Lediglich die noch nicht hochgeladenen Flash-Dateien werde ich evtl. noch kurz in einem separaten Post zusammenfassen – zumindest jedoch in meine Flash-Galerie einbinden.

Wie gesagt liegt der Flash-Bereich hinter uns und trotz keiner Vorkenntnisse meinerseits konnte ich beide Prüfungen mit Bravour absolvieren. Vergangenen Mittwoch hatten wir die zweite und letzte Prüfung darin und somit auch den letzten Unterrichtstag bei unserem Lieblingsbayern Manfred Karg. Auch wenn ich bei ihm anfangs Schwierigkeiten hatte, nach Ablenkungen akustisch herauszufinden, wann es für mich wieder interessant wird, werde ich ihn irgendwie vermissen. Ein toller, ehrlicher und vor allem authentischer Typ!


Nun also ein neuer Bereich. HTML steht an. Ein neuer Dozent. Jens Suhr.
Manchmal ist aller Anfang schwer sagt man. Ohne jemandem auf den Schlips treten zu wollen, war es doch recht seltsam und für mein Verständnis von Seriösität auch nicht ganz angebracht, gleich zu Beginn und während der Vorstellungsrunde erneut mehrfach zu erwähnen “den Herrn Willi kenn ich ja schon; … sein Gesicht habe ich schon gesehen; … hier aus dem Kurs führt jemand einen Blog; … etc.” (Kein Zitat; Gedächtnisprotokoll).

Klar ist, dass dieser Blog Aufmerksamkeit erzeugt und auch hoffentlich noch weiter erzeugen wird. Ich bin ein fairer, aber kritischer Mensch. Vieles in der heutigen Welt läuft schief und ich sehe es als eine Art “Aufgabe” bei Bedarf für Aufklärung zu sorgen. Jedes Unternehmen muss sich in dem heutigen, digitalen Zeitalter darüber im Klaren sein, dass gute und schlechte Dinge für jeden jederzeit zugänglich sein können. Wie ein Unternehmen damit umgeht, ist die Kunst. Ob nur “Bling bling” nach außen dargestellt oder auch in der Realität praktiziert wird, kann schnell ans Licht kommen.

In diesem Sinne also war es doch etwas unangenehm von einer Person die man nicht kennt, welche in einem Unternehmen arbeitet über das man durchaus schon Kritik geäußert hat, darauf hingewiesen zu werden, das man einen doch schon “kennt”. Als ich an der Reihe war (als Letzter, bedingt durch die alphabetische Reihenfolge) ging ich jedoch sogleich in die Offensive und es klärte sich rasch auf, dass die Kenntnis über meinen Blog und meine Website laut Jens (er fragte gleich zu Beginn ob wir uns alle per Du ansprechen möchten) wohl rein zufällig durch die Internetsuche einer Teilnehmerin aus einem vorigen Kurs herrührt. Somit wäre das fürs Erste geklärt und ich bin gespannt über den weiteren Verlauf meiner Weiterbildung.


Nun aber genug der Berichterstattung. Es geht ums Coden!
Nach einer überaus ausführlichen und ausladenden Erläuterung zu HTML und deren Hintergrundgeschichte gestern morgen haben wir dann gestern mittag mit dem Schreiben der ersten Zeilen HTML-Quellcode begonnen. Anfangs ziemlich gelangweilt, da ich HTML schon sehr gut kann kamen dann doch schon die ersten “Aha”-Ereignisse bei mir auf. Man merkt eben doch, ob man sich das Ganze selbst beigebracht hat oder fundiert erläutert bekommt. Nicht, dass meine HTML-Kenntnisse nicht auch durch langjährige Arbeit mittlerweile umfangreich wären, aber alles benötigt man nicht immer unbedingt in der Praxis. Jens weis von was er spricht. Das merkt man und das finde ich auch gut, wenn es um die Erweiterung meiner Kenntnisse geht. Ich werde also höchstwahrscheinlich hier wie auch zuvor im Photoshop-Teil das ein oder andere mitnehmen können.

Nachfolgend der von uns gestern geschriebene HTML-Code für alle interessierten:
So sieht es im Browser aus: 01 HTML Grundgerüst

<html> <!-- Kommentar // <html> umschließt das gesamte Dokument-->
	<head> <!-- Kopfbereich des HTML-Dokuments, welcher u.a. den Titel enthält -->
		<title>Das ist (nicht) mein erstes Dokument in HTML</title> <!-- Titel des Dokuments -->
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<!-- Innerhalb des head-tags können weitere Angaben zum Dokument stehen. JavaScript, CSS, meta, etc. -->
	</head>
	<body> <!-- Enthält den Inhalt eines HTML-Dokuments, welcher im Darstellungsprogramm (Browser) angezeigt wird -->

		Freude sei mit dir!
		Diese Zeile Text wird nicht so im Browser dargestellt,<br /> <!-- erzwungener Zeilenumbruch -->
		erst mit z.B. br -> brake wird ein Zeilenumbruch erzeugt.

		<p>Das ist ein Absatz, der in der nächsten Zeile fortgesetzt wird und automatisch einen Umbruch zum nachfolgenden Text bewirkt.</p>
		<!-- <p></p> kennzeichnet einen Absatz im Inhalt. Auch innerhalb von <p></p> kann <br /> verwendet werden. -->
		<p>Das ist ein Absatz, der in der nächsten Zeile fortgesetzt wird, automatisch einen Umbruch zum nachfolgenden Text bewirkt und einen <br />
		manuell erzwungenen Zeilenumbruch enthält.</p>

		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br /> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br /><br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br /> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

		Diese Zeile hat kein Absatzelement.

		<p align="right">Dieser Absatz wird rechtsbündig ausgerichtet</p>

		<p align="justify">Hier ein weiterer Textblock, der als Blocksatz formatiert ist:<br />
		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

		<p>&nbsp;</p> <!-- Leerzeile mit Inhalt -->

		<h1 align="center">Text als größte Überschrift markiert (H1)</h1> <!-- größte Überschrift in HTML -->

		<p>...</p> <!-- Absatz im Dokument oder auch mehrere Absätze können folgen -->

		<h6 align="center">Kleinste Überschrift in HTML (H6)</h6>

		<p>&nbsp;</p>

		<div align="center"> <!-- Einen definierten Bereich im Dokument erzeugen -->
			<p>Das ist der erste Absatz...</p>
			<p>Das ist der zweite Absatz...</p>
			<p>Das ist der dritte Absatz...</p>
		</div>

		<h3>Zeilenumbruch verhindern</h3>

		<p>Gestern Abend habe ich am Sternenhimmel <nobr>48 Sterne</nobr> gezählt.</p>
		<p>Gestern Abend habe ich am Sternenhimmel 48&nbsp;Sterne gezählt.</p> <!-- Aktuell bessere Variante -->

		<!-- Nicht zu viele Leerzeichen hintereinander, um große Abstände zwischen Wörtern zu ergeugen -->
	</body>
</html>

 

Oh look! There´s a hidden button!!

flash_hidden-button“Do you see it?” – “No! Where is it?” – “Oh it´s invisible!”

Lange Rede, kurzer Sinn. In Flash kann man sogenannte “hidden buttons” erstellen – Bereiche, die Aktionen auslösen ohne selbst sichtbar bzw. erkennbar zu sein. In diesem Beispiel ein einfacher Bildaustausch.

PeopleWithOpenMouth.com

PeopleWithOpenMouth.com – oder die Website eines Chors.
In diesem kleinen Projekt widmeten wir uns erneut der Erstellung einer einfachen Website in Flash. Diesmal haben wir zudem jedoch einen kleinen Einblick in Sachen Workflow und Einbettung des Flash-Films in HTML behandelt.

Recht interessant finde ich den Effekt der über dem Header-Bild liegt. Mit äußerst simplen Mitteln (lediglich ein einfaches Movieclip mit Bewegungstween) lässt sich durch geschickte Kombination ein ansehnlicher Effekt erzielen.

Flash - Chor-Website

Flash Grundkurs glänzend beendet

Gestern stand sie an – die Prüfung vor der wir uns alle so gefürchtet hatten! Unsere im Flash Grundkurs erlernten Fähigkeiten wurden aufs Härteste auf die Probe gestellt! Die Vorgaben waren klar, eindeutig und herausfordernd!


Simpel animierter Glanzeffekt in Flash

Nach der Prüfung haben wir uns dann noch mal mit dem Thema Maske beschäftigt und neben anderen, kleineren Übungen einen “animierten Glanz” über eine Wortmarke gelegt.

Wann wir die Ergebnisse unserer Prüfung erhalten werden, ist uns noch nicht bekannt. Ob wir danach den Kurs noch auf diesem Level fortführen können, wird sich zeigen… ;-)

 

Navigationselemente in Flash

Flash - NavigationFlash - Website SchwedenActionScript 2.0 und ActionScript 3.0 unterscheiden sich deutlich und in vielen Aspekten. Das haben wir heute beim Scripten von Navigationselementen bemerkt. Was in AS2 funktioniert, geht in AS3 im Prinzip gar nicht mehr – und umgekehrt. Das Skripten erfordert einiges an Übung und logisches Verständnis.

Weiterhin haben wir heute noch den Import aus einer PSD-Datei behandelt, welcher von Flash sehr gut unterstützt wird.

Und ich entschuldige mich für den äußerst schlechten Schreibstil heute :P

Sammelwerke in Flash

A Wahnsinn! Diese Einleitung ist nicht nur passend zum Dialekt unseres derzeitigen Dozenten, sondern auch für die aktuellen, vielen Kleinprojekte die wir hier täglich in Flash erstellen.

Dass das kontinuierliche Führen eines Blogs durchaus auch “stressig” sein kann, war mir in dem Zusammenhang so nicht klar und daher gab es die letzten Tage auch keine Einträge. Ab kommendem Wochenende wird sich aber auch meine Pendelsituation in Luft auflösen womit mir dann auch mehr Zeit zum Schreiben bleibt.

Wir haben wie gesagt etliche, kleinere Projekte die Tage erstellt. Manche davon waren etwas umfangreicher und lohnen sich hier zu zeigen. Seit Dienstag arbeiten wir zudem in ActionScript 3.0, haben hierin aber noch nichts gescriptet bzw. sind aktuell dabei.

ActionScript 2.0-Projekte:
Flash - Pfad-Demo Flash - Einfacher Preloader

 

 

 

 

ActionScript 3.0-Projekte:
Flash - Kameraschwenk mit Maske und SoundFlash - Bildergalerie AS3Flash - FliegeFlash - Animiertes "ciao!"-Logo

Einfache Bildergalerie in Flash

Flash - Einfache BildergalerieAls bisheriger “Nicht-Flasher” bin ich positiv überrascht und beeindruckt, wie relativ rasch wir doch ganz tolle Sachen erstellen können.

Derzeit arbeiten wir noch mit Actionscript 2.0 und eben damit haben wir heute schon Bekanntschaft gemacht.

Bildergalerie? Timeline, on (release), gotoAndStop sag ich da nur!

Masken und Effekte

Flash - Animierte ZeichnungDritter Tag Adobe Flash. Gestern bereits haben wir uns die Masken angeschaut und etwas damit herum gespielt. Hinzu kommen heute noch die Effekte und deren Wechselwirkung untereinander – je nach Anordnung.

Durch die bisher einfachen Elemente ergeben sich schon vielfältige Möglichkeiten. Faszinierend. Hier ergeben bspw. die Kombination einer Maske mit mehreren Schlüsselbildern und Ebenen eine (einfach) animierte Zeichnung.