HTML5 Codestruktur (Semantic)

Publiziert am 7. Februar 2012 von Christoph Eder

HTML5 Simple Tags

Doctype

Zu den wohl sinnvollsten Änderungen von HTML4 auf HTML5 zählt wohl der neue Doctype. Keine Ahnung wie es euch ging, aber ich konnte mir den HTML4/XHTML-Doctype nie wirklich merken:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Jetzt sieht dieser so aus:

<!DOCTYPE html>

Charset

Auch das Charset-Attribut im META-Tag wurde deutlich vereinfacht:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

So einfach wie der neue Doctype:

<meta charset="utf-8">

Externe Stylesheets und Scripts

So band man in HTML4 externe Stylesheets und Scripte ein:

<script src="foobar.js" type="text/javascript"></script>
<link href="foobar.css" rel="stylesheet" type="text/css" />

Das “type”-Attribut wird ab sofort nicht mehr benötigt:

<script src="foobar.js"></script>
<link href="foobar.css" rel="stylesheet" />

Weiterlesen →

Veröffentlicht unter Allgemein, HTML / CSS | Verschlagwortet mit , | Hinterlasse einen Kommentar

Footer immer ganz unten

Publiziert am 30. Januar 2012 von Christoph Eder

Einen Footer-DIV immer ganz Unten anzeigen lassen … hört sich einfacher an, als es ist.

#footer {
    position: absolute;
    bottom: 0px;
}

… ist zwar schön und gut, funktioniert allerdings nur, solange der Inhalt nicht länger, als die anzeigbar Höhe ist.
Wenn beide Versionen möglich sein sollen, kann man auf folgendes zurückgreifen:

HTML

<div id="wrapper">
    <div id="content">content</div>
    <div id="footer">footer</div>
</div>

CSS

html, body {
    height: 100%;
}

#wrapper {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

#content {
    padding-bottom: <HÖHE DES FOOTERS>px;
}

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

Ist euer Inhalt kürzer als die anzeigbare Höhe, befindet sich der Footer am unteren Bildschirmrand, sonst rutscht er mit dem Seiteninhalt nach unten.

Chris

Veröffentlicht unter Allgemein, HTML / CSS | Verschlagwortet mit , , | Hinterlasse einen Kommentar

SEO: Suchmaschinenfreundliche URLs durch Rewriten in der .htaccess Datei

Publiziert am 20. Januar 2012 von Markus Hauser

Wenn man Projekte mit PHP umsetzt, in welchen sich die einzelnen Seiten des Webs über einen GET-Parameter unterscheiden, sehen die URLs (Adresspfade) oft unschön aus. Ein sehr gängiges Beispiel einer internen Verlinkung ist “index.php?page=kontakt”. Wenn man da drauf klickt, übermittelt man einen GET-Parameter names page mit dem Wert kontakt und PHP kann darauf hin die korrekte Kontaktseite laden.

Soweit ist alles in Ordnung, gegen diese Technik ist auch nichts zu sagen. Allerdings leidet die Optik der Adressen etwas. Und noch viel wichtiger ist: Sie sind nicht suchmaschinenfreundlich.
Wie man solche suchmaschinenfreundlichen Verlinkungen (auch: SEF URLs, Search Engine Friendly URLs) erstellt, erkläre ich euch in diesem Beitrag. Weiterlesen →

Veröffentlicht unter Allgemein, HTML / CSS | Verschlagwortet mit , , , , , , , , , , , | Hinterlasse einen Kommentar

SEO – Optimieren der Seite für Google+ mit Microdata Markups

Publiziert am 4. Dezember 2011 von Christoph Zettl

Google+ erleichtert die Suchmaschinenoptimierung ungemein. Durch verschiedenste Techniken ermittelt Google+ Inhalte von geteilten Links und nimmt diese so auch in den Index auf.
Diese Angewohnheit kann jeder für sich nutzen. Bei Google werden verschiedenste Links deiner Seite geteilt.

Jeder Google+ User kennt das Phänomen. Beim Einfügen eines Links kommt eine komplett verwirrende Linkbeschreibung raus:

GooglePlus ohne Markup

Google Plus automatische Linkbeschreibung

Dabei nutzt Google einen kleinen Bot der deine Seite auf interessanten Inhalt checkt. Inhalte in Listen oder Überschriften in semantischen Tags werden dann in die Description gepackt.
Das kann aber oft von Nachteil sein. So kann es vorkommen, dass die Beschreibung zu einem geteilten Link oft aus Menüpunkten oder Breadcrumb-Texten besteht (wenn man diese SEO-orientiert aufgebaut hat). Weiterlesen →

Veröffentlicht unter Allgemein, HTML / CSS, Social Media | Verschlagwortet mit , , , , , | Hinterlasse einen Kommentar

PHP: Objektorientierung für Unorientierte – Teil 1

Publiziert am 16. November 2011 von Christoph Zettl

Jeder kennt es: Mit der Zeit wird der Code immer länger und länger, bis irgendwann der Punkt erreicht ist, an dem einem alles über den Kopf wächst. Spätestens dann kommt man um objektorientierte Programmierung (kurz OOP) nicht mehr herum.

Objektorientierte Programmierung? Das hab ich schon mal gehört, aber das ist doch sicher tierisch kompliziert…

Nein, das ist es nicht. Sind Grundkenntnisse des Programmierens vorhanden, so hilft OOP die Arbeit zu erleichtern, Zeit zu sparen und vor allem die Nerven zu schonen.

Doch wie kann man sich OOP vorstellen? Das möchte ich anhand eines Beispiels erklären. Weiterlesen →

Veröffentlicht unter PHP / MySQL | Verschlagwortet mit , , , , | Hinterlasse einen Kommentar

Alternative (Kurz-) Schreibweisen für if-Anweisungen in PHP

Publiziert am 30. August 2011 von Markus Hauser

In PHP gibt es ein paar Möglichkeiten eine if-Anweisung zu schreiben. Dabei gibt es kein “richtig” oder “falsch”, es ist einfach eine persönliche Geschmackssache.

In diesem Beitrag möchte ich euch die verschiedenen (mir bekannten) Varianten näher bringen. Vielleicht findet der Eine oder die Andere eine alternative Schreibweise übersichtlicher und hat es damit in Zukunft leichter beim Programmieren.

Bei jeder Schreibweise sind übersichtlich die Vorteile und Nachteile angegeben.

Weiterlesen →

Veröffentlicht unter PHP / MySQL | Verschlagwortet mit , , , , | 2 Kommentare

JavaScript Kurzschreibweise für “Variablenwert wenn gesetzt, sonst Standardwert”

Publiziert am 23. August 2011 von Markus Hauser

Beim Programmieren gibt es häufig den Anwendungsfall, dass man an einer gewissen Stelle eine Variable verwenden möchte, aber nur sofern sie überhaupt gesetzt ist und einen Wert hat. Ansonsten soll ein fixer Standardwert verwendet werden.

In diesem kurzen Beitrag möchte ich euch über eine sehr nützliche Funktion in JavaScript aufklären, die mir schon sehr viel Schreibarbeit erspart hat. Weiterlesen →

Veröffentlicht unter JavaScript | Verschlagwortet mit , , , | Hinterlasse einen Kommentar

PHP: Eine Seite korrekt auf eine Neue umleiten – “301 Moved Permanently”

Publiziert am 14. Juli 2011 von Markus Hauser

Oft ist es notwendig, dass man eine alte (ungültige?) URL auf eine Neue umlenkt, damit die Besucher keine unnötige 404 Not Found Meldung bekommen. Es kann auch sehr interessant für Suchmaschinenoptimierungen (SEO) sein, da die Suchmaschinen unter Umständen die veraltete URL aufrufen und die Adresse aus dem Index nehmen, obwohl an einem anderen Ort eine neue Version davon existiert. Weiters kann man doppelten Inhalt (z.B. Domain mit oder ohne www geschrieben) vermeiden.

Wie man solche Umleitungen mit PHP realisiert erkläre ich euch hier in 2 Praxisnahen Beispielen.

Hinweis: Die Umleitungen funktionieren auch mit suchmaschinenfreundlichen (SEF) URLs.
Wichtig: Die Umleitungen müssen möglichst ganz am Anfang der PHP-Datei eingebunden werden, zum Beispiel ganz oben in der index.php. Wird vor der Umleitung schon HTML (oder auch nur ein leerer Zeilenumbruch) ausgegeben, funktioniert die Umleitung nicht und man erhält einen PHP-Fehler. Weiterlesen →

Veröffentlicht unter HTML / CSS, PHP / MySQL | 7 Kommentare

Eigenes CSS für den Internet Explorer mit Conditional Comments

Publiziert am 28. Juni 2011 von Christoph Eder

Wer kennt das Problem nicht: Du erstellst ein wunderschönes, modernes CSS-Design, siehst es dir dann im Internet Explorer (IE) an und merkst, dass eigentlich nichts mehr passt. Firefox und Co. stellen dein Design allerdings perfekt dar.

Die einfachste und schnellste Lösung für diese Problematik sind separate Styles die nur für die IE‘s gelten, was sich mit den sogenannten “Conidtional Comments” lösen lässt. Mit ihnen kann man HTML-Code browserabhängig beeinflussen.

Weiterlesen →

Veröffentlicht unter HTML / CSS | Verschlagwortet mit , , , , | 1 Kommentar

XML Datei dynamisch erstellen mit PHP

Publiziert am 6. Juni 2011 von Markus Hauser

Die Programmiersprache PHP wird weitläufig nur in Zusammenhang mit HTML-Code verwendet. Was aber vielen nicht bekannt ist: Man gibt mit PHP lediglich Text aus und HTML ist dabei nur ein speziell strukturierter Text.

XML-Dateien bestehen ebefalls aus speziell strukturiertem Text den man mit PHP generieren kann. Die dynamisch erstellte Datei kann dann zum Beispiel Texte oder Bildpfade für eine Flash-Datei enthalten. In unserem Beispiel werden wir eine XML-Datei generieren, die einen Bildpfad und einen Titel enthält.
Die fertige PHP Datei gibt’s natürlich unten als Download. Weiterlesen →

Veröffentlicht unter PHP / MySQL | Verschlagwortet mit , , , , , , | 2 Kommentare