HTML Einstieg für Anfänger mit einem interaktivem Online HTML Tutorial

Im Internet gibt es viele freie verfügbare Quellen, damit man die ersten Schritte bei der Internetentwicklung gehen kann. Dabei ist hier jeder in seinem Lerntyp ein wenig unterschiedlich. Der eine nutzt lieber ausgedrucktes in einem Buch und der andere schaut sich einfach ein Youtube Video zu dem Thema an. Ein wahres Highlight für die ersten Schritte der Webentwicklung hält dabei Codecademy bereit. Es handelt sich hierbei um ein interaktives HTML Tutorial. Man klickt sich hierbei durch die einzelnen Kapitel.

Auf der linken Seite wird jeweils der Inhalt des Kapitels und die Aufgabenstellung erläutert , auf der rechten Seite muss man dann selber in einem Webeditor ausprobieren, wie alles geht. Dabei ist schon Beispiel Quellcode vorgegeben, den man einfach erweitern kann.

Der große Vorteil von diesem online HTML Tutorial ist das Fehler im Quellcode von der Software erkannt werden und der User eine sehr aussagekräftige Fehlermeldung  mit einer Lösungshilfe bekommt. Das ist wesentlich besser und innovativer, als wenn man alleine mit einem HTML Editor und einem Browser kämpft. Die einzelnen Kapitel sind dabei kurzweilig hintereinander aufgebaut. Der Einsteiger erhält einen schnellen Überblick über die Funktionsweise von HTML.
Die HTML Tutorial Kapitel im einzelnen sind

  • HTML Aufbau Und Funktionsweise Mit Absätzen
  • Das erste eigene HTML Gerüst
  • Überschriften
  • Links
  • Bilder
  • Kombination von Bildern und Links
  • Wie geht es weiter

Das gute an diesem interaktiven HTML Tutorial ist das es für jedes neue Kapitel ein einfaches und anschauliches HTML Beispiel gibt. Zusätzlich bekommt man auch eine schnelle Beispiel Hilfe. Die zeigen den richtigen HTML Code. Als User wird man dabei die ganze Zeit unterstützt und bleibt so  bei seinen ersten Schritten nicht allein. Nachdem man erfolgreich durch dieses erste Tutorial  gegangen ist kann man in den Praxistest.

Dieses Tutorial richtet sich vor allem an User die noch nichts mit dem Thema zu tun gehabt haben und einfach einmal einsteigen wollen. Es ist dabei sehr nett aufgebaut und mit schnellen Ergebnissen hält es einen User bei Laune.

Weiterführende Links:
Das online HTML Tutorial
http://www.codecademy.com/courses/html-one-o-one/

Der HTML Praxistest
http://www.codecademy.com/courses/week-3-html-project/0#!/exercises/0

PHP 5.4 die Neuerung für Performance Messungen, Array Funktionen, Traits, Kompabilität, interner Webserver und vieles mehr

PHP Programmierung aus Duisburg

PHP Programmierung aus Duisburg


Neue Array Funktionen für PHP 5.4 in der Übersicht
Es gibt in der aktuellen Version von PHP eine neue Möglichkeit Arrays anzulegen.
Eindimensionales PHP Array
$array = ['foo','bar'];
bisherige Schreibweise
$array = array(‘foo’,'bar’);

Mehrdimensionales Array
$array = [
'value1' => 'This is value1',
'array2' => ['foo','bar']
]

Die Art der Schreibweise ist sehr der von Java Skript angelehnt. Sie stellt eine gute Vereinfachung dar und ich denke das es in Zukunft auch so eingesetzt wird. PHP ist schon immer sehr großzügig mit seiner Syntax umgegangen und wird deshalb auch gerne als „Code Bitch“ bezeichnet. Natürlich gibt es für den Programmierer immer Vor- und Nachteile eines bestimmten Programmierstils. Funktionstüchtiger Quellcode muss noch lange nicht sauber programmiert sein. Zudem gibt es sehr viele Programmierer, die sich durch Try and Error als Autodidakten ihr Wissen angeeignet haben und noch nicht einmal mit einem anderen Programmierer gemeinsam an einem Projekt gearbeitet haben. Es gibt viele unterschiedliche Programmierstile, die in diesem Artikel nicht weiterbehandelt werden. Ich gehe hier ausschließlich auf die Neuerungen von PHP 5.4 ein.

Array Handling in PHP 5.4
echo explode(‘:’,'foo:bar:foobar’)[1];
Ausgabe:
bar

Das ist eine neue Möglichkeit direkt ein Array zu erzeugen und darauf zuzugreifen.Das war bisher nur mit einer Hilfsvariablen möglich.

Bisheriges Array Handling
list($wert1, $wert2, $wert3) = explode(‘:’,'foo:bar:foobar’);
echo $wert2;
Ausgabe
bar

Natürlich kann das Beispiel auch ohne die list()-Funktion arbeiten und die explode()-Funktion direkt einem Array zuweisen werden.

Es gibt jetzt auch noch die Möglichkeit Rückgabewerte von Funktionen direkt als Array anzusteuern.

function foo()
{
$return = ['foo','bar'];
}

echo foo()[1];
Ausgabe
bar

Sicherlich ist hilfreich bei „Quick and Dirty“ Lösungen immer solche kurzen Code Snippets zu verwenden. Was die Übersichtlichkeit der Programmierung und die Schnelligkeit der Anwendung angeht ist diese Schreibweise sicherlich nicht sehr hilfreich. Aber vielleicht ist es auch nur eine Gewohnheitssache. Wenn man ein zweites oder drittes Mal auf den Code schaut ist es schon besser lesbar. Die Variable $foo, die man normalerweise nutzen würde, mit $foo = foo(); oder gar einem $fooreturn = foo(); zeigt schon deutlich wo die Stärken der neuen Schreibweise liegen.

Traits in PHP 5.4 verwenden
In einem Trait können Methoden geschrieben werden, die nachher in mehreren Klassen verwendet werden. Im Grunde kann man es als eine ausgelagerte Methode betrachten. Dabei dürfen verschiedene Traits keine Methoden mit gleichem Namen enthalten. Das führt direkt zu einem Fatal Error. Ergänzend gibt es hier auch die Magic Constant __TRAIT__ für die Ausgabe des Namens.

Tutorial zu Traits in PHP 5.4
trait neueTrait
{
public function ausgabe_a()
{
echo ‘This is a test’;
}
}

class ersteKlasse
{
use neueTrait;
public function ausgabe()
{
$this->ausgabe_a();
}
}

class zweiteKlasse
{
use neueTrait;
public function ausgabe()
{
$this->ausgabe_a();
}
}

$erste = new ersteKlasse();
$erste->schreibe();
Ausgabe
This is a test

$zweite = new zweiteKlasse();
$zweite->schreibe();
Ausgabe
This is a test

Neue Schreibweise in PHP 5.4
$schreibe = ‘schreibe’;
$zweite->$schreibe();
Ausgabe
This is a test

Durch Traits gibt es also die Möglichkeit Methoden in verschiedenen Klassen wieder zu verwenden. Das ist nichts Neues, aber von der Syntax her ein wenig einfacher zu schreiben und zu lesen. Konkrete Anwendungsfälle wären beispielsweise die Logik zur Einbindung einer Datenbankinstanz oder auch bestimmte Sicherheitsfunktionen, die beispielsweise ein Zugriff nur für bestimmte IP Adressen auf die Klasse erlauben. Aber es ist nichts wirklich neues. Konsequent angewendet kann es allerdings schon Übersicht für die einzelnen Programmierer bringen, da Traits natürlich an einer ausgelagerten Stelle gebündelt werden können.

Standard Charset in PHP 5.4 als UTF8
Endlich wurde das Standard Charset UTF8 umgestellt. Seit der PHP Version 4.0 wurde der Header Content Type ISO-8859-1 mitgesendet. Das ist ein wichtiger und in meinen Augen längst überfälliger Schritt. Dass die Applikationen UTF8 verwendet muss also nicht mehr extra in einem HTML Meta Tag angegeben werden.

E_ALL jetzt auch mit E_STRICT in PHP 5.4
Dadurch enthält E_ALL jetzt wirklich alle Fehler, Warnungen und Hinweise.

Binärdarstellung von Zahlen seit PHP 5.4
Eine neue Repräsentation von Zahlen ist in PHP verfügbar. Ab sofort können neben Hexadezimal-, Dezimal- und Okatlzahlen jetzt auch Zahlen in der Form Ob (Binärzequenz) instanziert werden.

Beispiel
echo Ob10;
Ausgabe
2

PHP 5.4 Neuerungen wie beim Update Probleme machen können
In der neuen Version wurde in PHP richtig aufgeräumt. Dadurch ist alles bedeutend schneller geworden, aber die Abwärtskompatibilität ist leider nicht mehr so gut gewährleistet wie bei anderen Updates. Ich liste hier einmal auf welche Änderungen in meinen Augen am wichtigsten sind.

  • Abgeschafft
    • safe mode
    • register_globals
    • magic_quotes_gpc
    • session_register()
    • session_is_registered()
    • session_unregister()
  • Hinzugefügt
    • Anführungszeichen aus einem Formular oder Cookie werden automatisches escaped
    • short open tags sind immer aktiviert

Das die Short Open Tags immer aktiviert sind ist sehr hilfreich, gerade bei der Verwendung von Templates und PHP Frameworks mit dem Model-View-Controller (MVC) Prinzip. Dadurch lassen sich jetzt alle Ausgaben kurz mit <?=$value?> schreiben. Wenn die entsprechend kurze Schreibweise in der php.ini die Datei nicht eingeschaltet war musste man bisher folgende Schreibweise nutzen <?php echo $var; ?>. Auf die Methoden einzelner Klassen und deren Attribute kann jetzt auch direkt bei deren Instanzierung zugegriffen werden. (new klassenname)->methode.

Upload Prozess transparenter in PHP 5.4
Mit dem INI-Eintrag session.upload_progress.name = meinName ist es ab sofort möglich detaillierte Informationen über den gesamten Uploadprozess zu erhalten. Hierfür kann die superglobale Variable $_SESSION['upload_progress_meinName'] genutzt werden. Voraussetzung hierfür ist es natürlich immer php.ini die Direktive session.upload_progress.enabled = on zu setzen.

Neue Zeitmessung in PHP 5.4 direkt auf den Request möglich
Für Freunde von High Performance Anwendungen ist dieser Schritt sehr hilfreich. Ab sofort ist es möglich einen mit Request Timer anzusteuern, der die Mikrosekunden genaue Zeit enthält, die genau sagt wann der Request beim Server eingegangen ist. So lassen sich jetzt sehr genaue Messungen über die Ausführungen einzelner Applikationen vornehmen.

Beispiel
echo ‘Dauer Seitenausgabe’.(mictrotime(true) – $_SERVER['REQUEST_TIME_FLOAT']).’ Sek’;

Integrierter Webserver in PHP 5.4
Die neue PHP Version bringt standardmäßig einen Webserver mit, der über die Kommandozeile gestartet werden kann. Es ist also nicht benötigte nur einen Apache Server zu betreiben. Ich geh doch mal davon aus dass jeder der sich mit PHP Programmierung beschäftigt einen im PC-Server nutzt und das ist ja auch nicht schwierig ist mit der Entwicklungsumgebung XAMPP einen solchen zu betreiben. Die PHP Entwickler selber weisen zusätzlich darauf hin dass ihr integrierter Webserver nicht für den Livebetrieb geeignet ist.Hier ist trotzdem eine kleine Übersicht wie man diesen Server nutzen kann.

Unter Windows
Verzeichnis anlegen
D:\development\htdocs
Datei hinzufügen
router.php

Diese Datei wird beim Aufruf an den Webserver gelesen. Liefert das Skript den Wert false bei der Verarbeitung, wird die Datei auf die der Request ausgeführt wurde ohne Verarbeitung an den Browser gesendet.Hier sieht man deutlich wie rudimentär der Webserver arbeitet.

Datei hinzufügen
index.php
<?php
echo ‘This is a test’;
?>

Jetzt kann der Webserver auch schon gestartet werden. Gehen Sie über die Kommandozeile auf ihre PHP Umgebung. Im Falle von XAMPP kann das so aussehen.
D:\development\xampp

Start des Webservers über die Kommandozeile
php -S 0.0.0.0:8080 -t
D:\development\htdocs
D:\development\htdocs\index.php

Der Webserver ist jetzt gestartet und bleibt solange an, wie das Kommandozeilenfenster geöffnet ist. Gibt man jetzt in seinem Browser http://localhost:8080/index.php erhält man seine Ausgabe.

Blog Highlight: Sergej Müller ist Entwickler für WordPress-Plugins, iOS-Apps und Twitter-Apps

Galerie

Diese Galerie enthält 4 Fotos.

Der von Sergej Müller geführte Google+ Blog enthält Neuheiten zum Thema Internet Programmierung.…

Internet Explorer Anteil sinkt auf unter 50% – Internet Explorer und Internetprogrammierung

Die Urasche für den sinkenden Marktanteil vom Internet Explorer
Schon lange ist der Internet Explorer von seinen Rekordzahlen von damals weit entfernt. Aber er ist immer noch mit sehr großen Abstand führend. Den aktuellen Statistiken wird erstmals beobachtet dass der Anteil auf unter 50 % sinkt. Der Anteil des Internetexpolorers 8 macht übrigens 50% der Internet Explorer Usern aus. Dadurch hat er einen Gesamtanteil von 25%. Den hat Microsoft sich sicherlich auch zum großen Teil selbst zuzuschreiben. Fehlende Innovationen, schlechte Kompatibilität zu modernen Webstandards und fehlende Features sind sicherlich Gründe vorallem für junge User auf einen anderen Browser zu setzen. Hinzu kommt natürlich auch das Mac Betriebssystemen aus der Familie Apple. Diese nutzen ausschließlich die Browser Firefox und Safari. Safari ist dabei der Standardbrowser von Apple.

Warum der Internet Explorer immer noch Marktführer ist und noch lange bleiben wird
Windows von Microsoft ist das Betriebssystem, welches bei Desktop Arbeitsplätzen am meisten eingesetzt wird. In den meisten Firmen wird darauf geachtet, daß die Mitarbeiter keine Rechte für weitere Installationen haben. Dadurch ist es ihnen nicht möglich einem weiteren Browser zu installieren. In diesem Falle können Sie nur den Internet Explorer nutzen. Betrachtet man die Zugriffszahlen auf die einzelnen Internetseiten so stellt man immer wieder fest, daß während der Bürozeiten ein erheblich höherer Traffic auf Internet Seiten stattfindet als an den Wochenenden.

Internet User mit dem Smartphone
Da viele Arbeitnehmer während der Arbeitszeit nicht frei im Internet surfen dürfen, oder das trotzdem sehr ungerne tun, nutzen sie dafür zunehmend moderne Smartphones mit Internetzugang. Deren Anteil am gesamten Internet Traffic liegt mittlerweile bei circa 30 %. Allerdings unterscheidet sich die Nutzung des Internets von einem Smart von User erheblich von der eines PC-Users. Der Smart von Users surft viel weniger und hat nur 50 % der Klicktiefe eines PC-Anwenders. Ausschlaggebende Gründe hierfür sind sicherlich die langsame Geschwindigkeit und das sehr kleine Display. Der typische Smartphone User nutzt das Internet nur um sehr aktuelle Informationen abzurufen. Hierzu zählen Nachrichten dicht gefolgt von Facebook. Viele Smartphone User nutzen ihr Handy unter anderem um Sportergebnisse abzufragen. Ein Surfen mit dem Ziel sich über Internetinhalte zu informieren oder gar eine Kaufentscheidung zu treffen finden weiterhin auf dem PC statt.

Internetprogrammierer klagen über den Internet Explorer
Als ich als Internetprogrammierer angefangen habe gab es noch keinen Firefox als Internetbrowser. Damals waren Internetseiten sehr einfach. Aber das ist lange her. Heutige Internetseiten sind sehr funktional und nutzen zum Teil sehr viele Internettechnologien auf einmal. Hierfür ist ein flüssiges Zusammenspiel zwischen HTML, CSS, Java Skript und AJAX notwendig. Wer meiner täglichen Arbeit als Internetprogrammierer muss ich sagen es nicht nur der Internet Explorer ist der manchmal zickt. Aber beim Internet Explorer treten schon sehr häufig Probleme gerade was die Abwärtskompatibilität angeht auf. Die Internet Explorer Versionen 6 und 7 haben sicherlich die meiste Zeit für die Erstellung von Internet Explorer Hacks in Anspruch genommen. Der Internet Explorer 8 war hier schon ein wesentlicher Fortschritt. Mit der aktuellen Version Nummer 9 ist der Internet Explorer sicherlich auch wieder auf Augenhöhe mit den anderen Browserherstellern, die wie gesagt auch nicht fehlerfrei sind.

Internetprogrammierung in der Praxis
Vor einigen Wochen hatte ich das Problem das beim Internet Explorer 8 HTML Code mit türkischen Schriftzeichen nicht über das JSON Format mit AJAX verarbeitet werden konnte. Es war auch nicht möglich die Textzeile in einem HTML Text zu verstecken und den daraus weiter im Javascript zu verarbeiten. Am Ende musste ich die türkische Fehlermeldung direkt in das HTML laden und über Java Skript die Sichtbarkeit regeln. Das Problem bei der Entwicklung hier war auch das ich in meiner eigenen Umgebung der Internet Explorer 9 nutze und hier über die Abwärtskompatibilitätsprüfung den Fehler nicht simulieren konnte. Der Fehler tauchte nur auf einem tatsächlichen Internet Explorer 8 auf. Natürlich handelt es sich hierbei um einen absoluten Sonderfall.

In Zukunft werden die Ansprüche an eine Internetseite allerdings nicht geringer werden. Die Vielzahl der Browser, die zurzeit im Internet unterwegs sind zeigen auch das es hier in Zukunft nicht einfacher wird. Von daher ist es sehr wichtig sich an den W3C Standard zu halten und auch während der Programmierung direkt für den Internet Explorer zu entwickeln. Es ist wesentlich einfacher nachträglich Fehler in anderen Browsern auszugleichen als rückwirkend Fehler für den Internet Explorer zu entfernen. Bei genauerer Betrachtung merkt man auch an das Firefox, der bei Internetprogrammierern durch seine Webdeveloper Tools sehr beliebt ist, viele Fehler bei der Programmierung toleriert und so zufälligerweise eine korrekte Ausgabe erzeugt. Das bedeutete das der Anspruch an die Qualität der eigentlichen Programmierung beim Firefox nicht so hoch ist. Durch den großen Marktanteil des Internet Explorers wird es auch in Zukunft sehr wichtig sein die Funktionalität hier bestmöglich zu gewährleisten. Ein ähnliches Phänomen gibt es für den Versand von Newslettern. Auch hier ist die Darstellung in Outlook und Outlook Express absolut Ausschlag gegebend.

Das Ende der Geschichte vom ersten XSS Wurm – ein Teenie Hacker wird verurteilt

Samy hatte sich seinen Weg durch Myspace gebohrt. Das damals größte Web2.0 Community Forum war für einige Stunden nicht erreichbar. Myspace schaltete die Behörden ein und ließ die Adresse von Samy zwei Wochen lang ermitteln, obwohl diese im System bekannt war. Die Behörden ermittelten die Adresse über eine Fotografie aus Samys Myspace Account, die ihn mit seinem Auto zeigte.

Nachdem die Adresse endlich bekannt war wurden von der Polizei sowohl seine Wohnung als auch seine Arbeitsstelle gestürmt. Insgesamt wurden 30 Computer von Freunden und Arbeitskollegen beschlagnahmt. 2007 kam es dann zum Prozess. Ein Jahr Haftstrafe auf Bewährung und 90 Tage „Community Service“ wurden verhängt. Hinzu kam noch die Auflage, daß er in Zukunft Computer nur noch unter Bewachung einsetzen durfte.

Myspace selber hat während des gesamten Prozesses nichts von sich hören lassen. Es gab auch keine finanziellen Forderungen von Seiten des Unternehmens Fox. Im Grunde kann man hier von einem sehr milden Urteil sprechen. Das liegt vor allem daran das keine böse Absicht hinter der schädlichen Software lag und auch nicht versucht wurde bösartigen Payload mitzuführen. Samy selber ging es schließlich nie darum Passwörter oder Kreditkarteninformationen zu stehlen oder den anderen Usern der Web2.0 Plattform einen Schaden zuzuführen. Er wollte nur ihr neuer Freund sein und Mädchen beeindrucken. Durch die sehr offene Sicherheitslücke, die Samy in dem System vom Myspace gefunden hatte, wäre es ein leichtes gewesen sehr großen Schaden anzurichten.

Das Ziel seine eigene Popularität damit zu steigern hatte er auf jeden Fall erreicht. Die Mädchen hatte er jedenfalls riesig beeindruckt. Die ganze Geschichte hat auch ein Happyend. Samy hatte seine neue Freundin bekommen, konnte reihenweise Interviews geben und wurde zu diversen Sicherheitskonferenzen eingeladen. Und wenn sie nicht gestorben sind…