Antary

Kategorie: HTML5 & CSS3

PHP für Anfänger: Ein Leitfaden für Einsteiger in die PHP-Programmierung

23. Januar 2024, 23:04 · von · 0 Kommentare

Willkommen in der Welt der PHP-Programmierung! Wenn du dich auf das Abenteuer einlassen möchtest, eigene Webseiten und Anwendungen zu erstellen, bist du hier genau richtig. PHP, eine serverseitige Skriptsprache, ist ein wesentlicher Bestandteil vieler dynamischer Websites und Anwendungen im Internet. Es ist besonders beliebt, weil es leicht zu erlernen, flexibel und kompatibel mit vielen Betriebssystemen ist. Dieser Blog richtet sich an dich, wenn du noch keine oder nur wenig Erfahrung mit PHP hast. Dieser Beitrag hilft dir, die Grundlagen zu verstehen und deine PHP-Kenntnisse aufzubauen!

PHP Basics

PHP, eine serverseitige Skriptsprache, ist ein unverzichtbares Werkzeug in der Welt der Webentwicklung. Seine Hauptfunktion besteht darin, Webseiten dynamisch und interaktiv zu gestalten, indem es auf einem Webserver ausgeführt wird. Die Stärke von PHP liegt in seiner Fähigkeit, nahtlos in HTML integriert zu werden, was Entwicklern ermöglicht, komplexe Webanwendungen mit großer Einfachheit zu erstellen. Seine Flexibilität macht PHP zu einer idealen Wahl für Anfänger, die in die Entwicklung von Webanwendungen einsteigen möchten. Es ermöglicht dir eine schnelle Implementierung von Funktionen und ist gleichzeitig geeignet für komplexe Projekte.

Einrichtung einer PHP-Entwicklungsumgebung

Die Einrichtung einer PHP-Entwicklungsumgebung beginnt mit der Installation von PHP. Die Installationsschritte können je nach Betriebssystem variieren. Für Windows-Nutzer ist XAMPP eine beliebte Option, da es neben PHP auch MySQL und Apache enthält. MacOS-Nutzer können MAMP verwenden, während Linux-Nutzer PHP direkt über die Paketverwaltung ihres Systems installieren können.

Nach der Installation von PHP ist es wichtig, einen passenden Texteditor oder eine integrierte Entwicklungsumgebung (IDE) zu wählen. Einsteiger können mit einfachen Editoren wie Notepad++ oder Sublime Text beginnen. Fortgeschrittene Benutzer oder diejenigen, die eine umfassendere Entwicklungsumgebung suchen, könnten sich für IDEs wie PhpStorm oder Visual Studio Code entscheiden, die erweiterte Funktionen wie Debugging-Tools und Code Vervollständigung bieten. Diese Werkzeuge erleichtern das Schreiben und Testen von PHP-Code erheblich.

Erste PHP Schritte

Die ersten Schritte in PHP beginnen mit dem Schreiben eines einfachen Skripts. Ein grundlegendes PHP-Skript umfasst in der Regel die Ausgabe von Text. Dies dient als Einstiegspunkt, um zu verstehen, wie PHP-Code in den Server integriert und ausgeführt wird.

Wichtige Konzepte in PHP sind Variablen, Schleifen und Funktionen. Variablen werden verwendet, um Daten zu speichern, die während der Ausführung des Skripts verändert werden können. Schleifen, wie die ‘for’- und ‘while’-Schleifen, ermöglichen es, wiederholte Aufgaben effizient durchzuführen. Funktionen sind entscheidend, um Code zu organisieren und wiederverwendbar zu machen. Sie erlauben es, bestimmte Aufgaben in einem Programm zu kapseln und bei Bedarf aufzurufen. Diese Elemente bilden das Fundament für die Entwicklung komplexerer PHP-Anwendungen.

Die Rolle von VPNs in der PHP-Entwicklung

VPNs (Virtual Private Networks) spielen eine wesentliche Rolle für PHP-Entwickler, insbesondere bei der Arbeit mit entfernten Servern. Sie bieten eine sichere Verbindung, indem sie den Datenverkehr verschlüsseln, was für Entwickler, die auf entfernte Datenbanken oder Server zugreifen müssen, unerlässlich ist. Dies ist besonders relevant, wenn man in öffentlichen Netzwerken arbeitet, wo die Gefahr von Datendiebstahl höher ist. VPNs verbessern nicht nur die Sicherheit, sondern auch den Datenschutz, da sie die IP-Adresse des Benutzers verbergen und somit Anonymität gewährleisten. Dieser zusätzliche Schutz ist in der heutigen Zeit, in der Datenschutz und -sicherheit immer wichtiger werden, von großem Vorteil. Wenn du nach dem besten Anbieter für das beste VPN suchst, empfehlen wir dir diesen Beitrag.

Häufige Fehler und Problemlösung

In der PHP-Entwicklung können Anfänger einige häufige Fehler machen. Hier sind einige davon und Tipps zur Behebung:

  • Syntaxfehler: Einer der häufigsten Fehler ist die falsche Syntax, wie das Vergessen von Semikolons oder Klammern. Achte auf die korrekte Struktur und überprüfe den Code sorgfältig.
  • Fehler bei Variablen: Verwechslung von Variablennamen oder falsche Datentypen. Eine gute Übung ist es, klare und beschreibende Namen für Variablen zu verwenden.
  • Fehler beim Umgang mit Arrays: Schwierigkeiten beim Zugriff auf oder der Manipulation von Array-Elementen. Experimentiere mit verschiedenen Array-Funktionen und lese die Dokumentation, um ein besseres Verständnis zu entwickeln.
  • Datenbankfehler: Probleme beim Verbinden mit und Abfragen von Datenbanken. In diesem Fall überprüfe die Verbindung Strings und SQL-Abfragen auf Fehler.
  • Fehler im Umgang mit Formulardaten: Schwierigkeiten beim Empfangen und Verarbeiten von Daten aus HTML-Formularen. Stelle sicher, dass die Formularfelder korrekt mit dem PHP-Backend verknüpft sind.

Diese Tipps und Ressourcen können dir helfen, häufige Fehler zu vermeiden und deine Fähigkeiten in PHP zu verbessern.

Zusammenfassung

Mit deinem Einstieg in die PHP-Programmierung hast du die Türen zu einer Welt voller Möglichkeiten in der Webentwicklung geöffnet. Denke daran, dass das Erlernen einer neuen Programmiersprache Zeit und Geduld erfordert. Fehler sind ein natürlicher Teil des Lernprozesses, und jede Herausforderung verbessert dein Verständnis und deine Fähigkeiten.

Mit fortlaufender Übung wirst du bald in der Lage sein, komplexe Webanwendungen zu entwickeln. Deine Reise hat gerade erst begonnen, und jede Zeile Code, die du schreibst, bringt dich deinem Ziel, ein erfahrener PHP-Entwickler zu werden, einen Schritt näher!

Kategorien: Coding HTML5 & CSS3 Internet

Adobe Flash ist tot!

1. März 2018, 23:16 · von · 2 Kommentare

Adobe Flash Logo

Was vor einigen Jahren nicht viel mehr als eine kleine Hoffnung war, ist heute fast schon Realität: Adobe Flash ist mittlerweile in die Bedeutungslosigkeit verschwunden und dürfte spätestens im Jahr 2020 komplett tot sein.

Die neuesten Statistiken von Google belegen dies eindrucksvoll. Während Adobe Flash Mitte 2014 bei 80 Prozent aller Chrome-Nutzer mindestens einmal pro Tag genutzt wurde, ist dieser Wert Anfang 2018 auf unter 8 % gesunken. Damit wird der subjektive Eindruck untermauert und es kann zweifelsfrei behauptet werden, dass Webseiten mit Flash-Inhalten sehr exotisch geworden sind.

Adobe selbst ist der Trend auch nicht verborgen geblieben und hat bereits letztes Jahr das Ende von Flash für 2020 angekündigt. Ab Ende 2020 wird der Flash Player nicht mehr zum Download angeboten werden und es werden auch keine Updates mehr veröffentlicht. Wer aktuell noch auf Flash setzt hat also noch etwas weniger als drei Jahre Zeit um auf moderne Techniken wie beispielsweise HTML5 oder WebGL umzusteigen.

Specifically, we will stop updating and distributing the Flash Player at the end of 2020 and encourage content creators to migrate any existing Flash content to these new open formats.

Google möchte Flash mit Chrome 76 standardmäßig deaktivieren, was für Juli 2019 geplant ist. Nutzer sollen das Flash-Plugin aber manuell wieder aktivieren können. Mit Chrome 87 im Dezember 2020 soll der Flash Player vollständig entfernt werden. Auch Microsoft will den Flash-Support mittelfristig beenden. Zwischen Mitte und Ende 2018 soll Microsofts Edge aktualisiert werden und frägt dann in jeder Sitzung nach, ob Flash ausgeführt werden darf oder nicht. Beim Internet Explorer 11 ändert sich vorerst nichts. Zwischen Mitte und Ende 2019 soll Flash im IE 11 und Edge standardmäßig deaktiviert werden, bevor es Ende 2020 komplett entfernt werden wird.

Kategorien: HTML5 & CSS3 Internet Software & Apps Web-Design

Die Neuerungen von HTML5.1 im Überblick

7. Juli 2016, 18:42 · von · 1 Kommentare

Zwei Jahre nach HTML5 befindet sich der neue Webstandard HTML5.1 auf der Zielgeraden. Er dürfte höchstwahrscheinlich im September 2016 fertiggestellt werden. Vor wenigen Tagen wurde der HTML5.1 Working Draft (Arbeitsversion) als sogenannter Empfehlungskandidat (Candidate Recommendation (CR)) veröffentlicht. Das bedeutet, dass die Arbeiten an den neuen Spezifikationen so gut wie abgeschlossen und keine Änderungen mehr zu erwarten sind. Jetzt kommt die W3C Patent Policy ins Spiel und überprüft, ob der Empfehlungskandidat implementiert und genutzt werden kann. Einige Features sind allerdings als gefährdet (at risk) gekennzeichnet. Diese Features könnten aus HTML5.1 herausfallen, sofern sie nicht von mindestens zwei Browsern unterstützt werden. Im September soll HTML5.1 dann offiziell als W3C Recommendation verabschiedet werden. Davon abgesehen wird in den nächsten Wochen der erste Working Draft von HTML5.2 erscheinen.

Kommen wir aber zurück zu HTML5.1 und werfen einen kurzen Blick auf die Neuerungen. Viele Features von HTML5.1 werden bereits jetzt von den meisten Browsern unterstützt.

  • <picture>-Element: ermöglicht die Auszeichnung verschiedener Bilder über  je ein eigenes source-Element, was vor allem im responsive Webdesign sinnvoll ist
  • srcset-Attribut: ermöglicht die Auszeichnung von Bildern für hochauflösende Bildschirme
  • <input>-Element mit neuen Datumseingaben: mit den neuen Typen “month” und “week” lassen sich neben Tagen und Uhrzeiten nun auch Monate und Kalenderwochen auswählen.

Darüber hinaus könnten mit HTML5.1 einige bisherige Elemente entfernt werden. Sie sind aktuell mit “at risk” gekennzeichnet und es steht noch nicht fest, ob sie den neuen Standard tatsächlich verlassen müssen. Sehr wahrscheinlich entfernt werden die drei Elemente <keygen>, <menu> und <dialog>, da sie nur von einzelnen Browsern unterstützt werden und außerdem kaum zum Einsatz kommen. Außerdem könnte es auch das Element <menuitem> oder den Input-Typ “datetime-local” treffen.

Kategorien: HTML5 & CSS3 Internet

“rem” vereinfacht Nutzung flexibler Schriftgrößen

3. Oktober 2013, 11:50 · von · 2 Kommentare

Es existieren unterschiedliche Möglichkeiten die Schriftgröße im Webdesign zu definieren. Am häufigsten werden sicherlich “px”, “em” und “%” verwendet. Die jeweiligen Nachteile liegen auf der Hand. “px” ist eine absolute Größenangabe und findet vorrangig in festen Designs Anwendung. Gerade im Bezug auf Responsive Webdesign und “Mobile First” ist aber eine flexible Gestaltung der Schriftgröße fast unumgänglich.

Aus diesem Grund setzen viele moderne Designs auf “em”. Die relative Angabe der Größe mittels “em” birgt in der Praxis aber Probleme bei der Vererbung. Die “em”-Einheit richtet sich meist an der Schriftgröße des Elternelements aus. In simplen Designs ist das noch kein Problem. Bei komplexen Umgebungen mit vielen Verschachtelungen verliert man aber schnell den Überblick und die Gestaltung mittels “em” wird sehr aufwendig. Beispielsweise wird eine Schriftgröße welche als “0.875em” definiert ist, bei jeder Verschachtelung ein Stück kleiner.

“rem” als Lösung?

Die CSS3-Schriftgrößeneinheit “rem” (root em) könnte in Zukunft eine gute Lösung darstellen. “rem” vereint die Vorteile von “px” und “em”. Im Grund funktioniert “rem” genauso wie “em”, mit einem entscheidenden Unterschied: Die Nachteile bei der Vererbung sind nicht vorhanden, weil sich “rem” immer am Root-Element, also die Schriftgröße für html, orientiert.

Üblicherweise wird die Schriftgröße des Root-Elements auf “100%” gesetzt, was einer Standard-Schriftgröße von 16 Pixel entspricht. Alle weiteren mit “rem” definierten Schriftgrößen orientieren sich nun an diesem Ausgangswert. Zur Errechnung des “rem”-Werts muss nur die gewünschte Pixelgröße durch den Standardwert 16 geteilt werden. Nachfolgend ein kleines Beispiel:

html { font-size: 100%; } /* 16px Standard-Schriftgröße */
h1 { font-size: 1.875rem; } /* 30/16 = 1.875 */
h2 { font-size: 1.5rem; } /* 24/16 = 1.5 */
h3 { font-size: 1.25rem; } /* 20/16 = 1.25 */
p { font-size: 0.875rem; } /* 14/16 = 0.875 */

Zur Anpassung der Schriftgröße reicht es aus, wenn die Standard-Schriftgröße der des Root-Elements geändert wird. Das Verhältnis aller definierten Schriftgrößen bleibt dabei unverändert.

Nachteile von “rem”

Wie immer gibt es jedoch Probleme mit älteren Browsern. Die Übersicht unter http://caniuse.com/rem zeigt genauere Details:

rem_support

Problematisch ist im Grunde nur der IE vor Version 9. Auch Opera Mini kann mit “rem” nichts anfangen, was jedoch zu verschmerzen ist. Wenn diese Browser vernachlässigt werden können ist der Einsatz von “rem” absolut empfehlenswert.

Andernfalls muss eine Fallback-Lösung verwendet werden, welche jedoch nicht optimal ist.

html {
    font-size: 100%;
}
h1 {
    font-size: 30px;
    font-size: 1.875rem;
}
h2 {
    font-size: 24px;
    font-size: 1.5rem;
}
h3 {
    font-size: 20px;
    font-size: 1.25rem;
}
p {
    font-size: 14px;
    font-size: 0.875rem;
}

Ältere Browser verwenden den Pixelwert und ignorieren die “rem”-Angabe. Moderne Browser können diese jedoch Nutzen und überschreiben somit den zuerst angegebenen Pixelwert.

Weitere Infos gibts im Artikel “CSS-Tipp: rem als Einheit für Schriftgröße nutzen” bei Elmastudio.

Kategorien: HTML5 & CSS3 Web-Design

HTML5 UP: Kostenlose und moderne HTML5-Templates

29. Juni 2013, 12:52 · von · 1 Kommentare

Im Internet existieren viele kostenlose Webtemplates, die aber von der Qualität des Quelltexts und der Optik oft nicht überzeugend sind. Die Templates von HTML5 UP gehören definitiv nicht dazu. Aktuell stehen 14 sehr unterschiedliche Templates zum kostenlosen Download bereit. Egal ob man Fotos präsentieren, einen Blog betreiben oder eine Unternehmenswebseite gestalten möchte, für alle Bedürfnisse ist ein passendes Template vorhanden. Dank der Creative-Commons-Lizenz können die Templates frei angepasst und sogar kommerziell verwendet werden. Einzige Voraussetzung ist ein Verweis auf HTML5 UP.

Alle Templates sind auf Basis von HTML5 und CSS3 umgesetzt. Sie sind vollständig responsiv aufgebaut und für Tablets sowie Smartphones optimiert. Außerdem ist eine JavaScript-Bibliothek in Form von jQuery enthalten. Bei HTML5 UP können alle Templates auf einer Demoseite genauer betrachtet werden. Sogar für die Darstellung auf Tablets und Smartphones ist eine Vorschau vorhanden.

Download HTML5UP Themes

HTML5UP

(via)

Kategorien: HTML5 & CSS3 Internet Web-Design

selfoss RSS-Reader + Google Reader Design

9. Mai 2013, 12:20 · von · 0 Kommentare

In weniger als zwei Monaten ist es soweit: der Google Reader wird zum 1. Juli 2013 eingestellt. Sehr schade, da ich vor allem die Weboberfläche sehr intensiv genutzt habe. Aus diesem Grund habe ich euch in einem Artikel auch schon zahlreiche Alternativen zum Google Reader vorgestellt.

Obwohl ich bereits alle Dienste mit Weboberflächen getestet habe, konnte ich mich bisher für keine Alternative begeistern. Aktuell kommt einfach nichts an den Google Reader heran. Daher wurde es Zeit erneut die selbstgehosteten Möglichkeiten auszuprobieren. Aktuell gefällt mir selfoss sehr gut.

Der minimalistische RSS-Reader wird von Tobias Zeising als Open-Source-Projekt bei Github entwickelt. Seit der Ankündigung von Google hat selfoss einige Updates erhalten und bekommt auch viel Unterstützung durch die Community. Der Import von Google funktioniert prima und auch die Bedienung weiß zu gefallen. Tastaturkürzel werden unterstützt und auch eine eigene API ist seit der letzten Version verfügbar. selfoss bietet so gut wie keine Möglichkeiten zur Anpassung. Dadurch wirkt der Reader aber auch nicht so überladen wie beispielsweise Tiny Tiny RSS. Andererseits kann der Reader aber auch nicht den eigenen Bedürfnissen angepasst werden. Dennoch hat selfoss großes Potential, ich blicke erwartungsvoll in die Zukunft!

Download selfoss

Google Reader Design für selfoss

Da ich selfoss seit einigen Tagen nutze und mir das Standarddesign etwas unübersichtlich vorkommt, habe ich es kurzerhand etwas modifiziert. Herausgekommen ist ein Design, welches eine große Ähnlichkeit zum Google Reader besitzt ;-) Der Screenshot unten zeigt selfoss mit meinem Design. Bei Interesse könnt ihr euch das Google-Reader-Design für selfoss bei Github herunterladen.

selfoss mit Google Reader Design

selfoss mit Google Reader Design

Kategorien: HTML5 & CSS3 Internet Software & Apps

Windows 8 Design mit CSS3 und jQuery nachbauen

5. März 2013, 19:03 · von · 0 Kommentare

Nach gefühlten 100 Jahren mal wieder ein Artikel von mir über das Thema Web-Design. Bei Google+ hat Sergej heute einen Link gepostet, den ich sehr interessant fand: “Windows 8 Animations“.

Wie der Name schon sagt geht es um die neue Windows 8 Oberfläche und wie man diese mit HTML5, CSS3 und JavaScript bzw. jQuery realisieren kann. Neben dem ausführlichen Tutorial ist auch ein Demo vorhanden, welche das beeindruckende Ergebnis zeigt. Die Demo läuft in aktuellen Versionen von Firefox, Opera, Chrome und Safari. Ebenso im Internet Explorer 10.

Zum Tutorial “Windows 8 Animations”

Kategorien: HTML5 & CSS3 Web-Design

HTML5 soll 2014 erscheinen, HTML5.1 im Jahr 2016

21. September 2012, 10:43 · von · 0 Kommentare

Das W3C (World Wide Web Consortium) möchte HTML5 unbedingt bis Ende 2014 fertig stellen. Dafür werden einige geplante Neuerungen gestrichen und aus HTML5 herausgenommen. Diese werden dann als Erweiterungen separat weiterentwickelt. Falls sie rechtzeitig fertig werden, sollen die Erweiterungen dann doch noch in HTML5 aufgenommen werden. Ansonsten bleiben sie unabhängige Erweiterungen. Außerdem sollen Tests von bereits im Internet verwendeten Funktionen deutlich geringer ausfallen. Dies betrifft beispielsweise SVG oder MathML.

Des Weiteren wurde festgelegt, dass HTML5.1 bereits im Jahr 2016 erscheinen soll. Die Version wird neue Funktionen ebenfalls in Form von Erweiterungen beinhalten. Verzögern sich geplante Funktionen, werden sie aus HTML5.1 herausgenommen und entsprechend in HTML5.2 integriert werden.

Kategorien: HTML5 & CSS3 Internet Web-Design

Automatische Silbentrennung mit CSS3

2. August 2012, 18:14 · von · 7 Kommentare

CSS3 bietet in allen Bereichen viele neue Möglichkeiten. Unter anderem auch bei der Textgestaltung. Mit der CSS3-Eigenschaft “hyphens” wurde eine automatische Silbentrennung eingeführt. Damit kann die Darstellung von langen Texten verbessert werden. Wie die Silbentrennung mit CSS3 in der Praxis aussieht, könnt ihr beispielsweise in meinem SSDblog anschauen.

Damit die Silbentrennung funktioniert, muss die korrekte Sprache für die Seite definiert werden. Diese kann für das gesamte Dokument oder für einzelne Textabschnitte angegeben werden.

<html lang="de">

<p lang="de">deutscher Text</p>
<p lang="en">englischer Text</p>

Aktuell muss noch mit den verschiedenen Browser-Präfixen gearbeitet werden, damit die Silbentrennung funktioniert.

p {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}

Mit “auto” entscheidet der Browser selbst, wo getrennt werden muss. Bei “none” wird keine Silbentrennung angewendet. Der Standardwert der Eigenschaft ist “manual”. In diesem fall wird lediglich bei solchen Stellen getrennt, die mit “&shy;­” gekennzeichnet sind.

Firefox und Safari unterstützen die CSS3-Eigenschaft “hypehns” bereits. Opera und Chrome sollten demnächst nachziehen. Auch der Internet Explorer wird die Silbentrennung mit Version 10 unterstützen.

Kategorien: HTML5 & CSS3 Tutorials Web-Design

Vector Maps – SVG-Karten mit jQuery

9. Juli 2012, 21:58 · von · 1 Kommentare

Interaktive Karten auf Webseiten sind ein toller Blickfang und können für verschiedene Zwecke eingesetzt werden. Mit modernen Webtechnologien lassen sich mittlerweile vektorisierte Land- oder Weltkarten realisieren, komplett ohne Flash. Stattdessen kommt bei den beiden jQuery-Plugins jQuery Vector Maps und jVectorMap SVG und JavaScript zum Einsatz.

Die Plugins werden von Firefox, Chrome, Opera, Safari und IE9 unterstützt. jQuery Vector Maps ist dabei eine modifizierte Version von jVectorMap, mit einigen Veränderungen und neuen Funktionen. Beide Plugins bieten auf ihrer Homepage eine ausführliche Dokumentation und einige Beispielkarten an. So ist es unter anderem möglich, eigene Karten zu erstellen oder die Farben anzupassen.

jVectorMap – Weltkarte

Kategorien: HTML5 & CSS3 Internet Web-Design

Kostenloses, responsives HTML5-Template

14. Juni 2012, 18:41 · von · 1 Kommentare

Bei EGrappler gibt es seit wenigen Tagen ein kostenloses, responsives HTML5-Template zum Download. Das Template hört auf den Namen “Brownie” und ist primär für Portfolio- oder Business-Webseiten ausgelegt. Nichtsdestotrotz kann das Template als Basis für ein modernes Design dienen und an die eigenen Bedürfnisse angepasst werden. Auch die gute Dokumentation ist dabei sehr hilfreich.

Neben einem Slider auf der Startseite sind auch eine Fotogallerie, ein Kontaktformular, eine Blog-ähnliche Ansicht und ein- bis vierspaltige Layouts vorhanden. Das Template ist in validem HTML5 und CSS3 erstellt und soll auf allen aktuellen Browsern ohne Probleme funktionieren. Außerdem passt sich das responsive Layout automatisch auf die Auflösung von Desktop, Tablet und Smartphone an. Eine Demo von “Brownie” gibts direkt bei EGrappler.

Download Brownie-Template

Kategorien: HTML5 & CSS3 Internet Web-Design

Gastartikel – HTML5 – die wichtigsten Elemente

2. Mai 2012, 17:52 · von · 0 Kommentare

Marie arbeitet bei der Projektplattform twago im Online-Marketing. Sie schreibt über App-Programmierung, HTML, iPhone/iPad und Android. Im heutigen Text beschreibt Sie die wichtigsten Elemente von HTML5.

Diese nützliche Technik ermöglicht es, Web-Anwendungen zu entwickeln und bis jetzt nicht denkbare Eigenschaften zu implementieren. Die textbasierte Einführungssprache HTML5 beinhaltet viele neue und zum Teil auch sehr nützliche Elemente. In diesem Artikel werden nun die wichtigsten HTML5-Elemente dargestellt und kurz beschrieben, um einen Überblick über die interessantesten Änderungen zu geben. Die Elemente lassen sich in viele Kategorien einteilen. Fangen wir mit der Kategorie der Gruppierungselemente an.

Gruppierungselemente

figure
Das figure-Element  hat die Aufgabe, die Auszeichnung zusätzlicher Inhalte, beispielsweise Abbildungen mit Bildunterschriften, zu vereinfachen; Damit können Abbildungen mit einer Beschriftung versehen werden, wie man es aus dem Printbereich kennt.

header
Das header-Element benennt den Kopfbereich einer Webseite. In diesem Bereich könnte man ein gewünschtes Logo, die Nagivation oder ein Inhaltsverzeichnis platzieren.

footer
Das footer-Element hingegen legt den Fußbereich der Seite fest. Man kann dort Querverweise, Autor-Informationen oder Informationen über die Webseite platzieren.

nav
Das nav-Element ist zum Auszeichnen der Navigation gedacht. Es wird oft nur für die Hauptnagivation verwendet, muss aber nicht.

section
Dieses HTML5-Element hat die Aufgabe zwei Inhaltsbereiche von einander zu differenzieren und trennt somit verschiedene Bereiche der Website. Dies ist auch der Grund, warum es mehrfach verwendet werden kann.

article
Das article-Element eignet dafür Artikeltexte in Form eines Blocks zu umschließen und somit den wichtigsten Inhalt herauszuheben und auszuzeichnen. Durch das zusätzliche section-Element können die Blöcke in mehrere Abschnitte unterteilt werden.

aside
Mit diesem Element kann man eine Sidebar erstellen. Diese Abschnitte, müssen nicht unbedingt mit dem eigentlichen Inhalt zusammen hängen.

details
Das details-Element führt ergänzende Informationen zu einem Thema an. Meistens wird dieser Inhalt bereits standardmäßig ausgeblendet und muss über einen Klick eingeblendet werden.

Formularelemente

input
Diese Element wurde zur Eingabe von Suchbegriffen, Telefonnummern, URL- und E-Mail-Adressen, Datums- und Zeitangaben, Zahlen sowie Farbangaben erweitert.

datalist
Mit dem datalist-Element können Vervollständigungsvorschläge angegeben werden

output
Das output-Element stellt Ergebnisse von Berechnungen dar.

progress
Das progress-Element bildet die Fortschritte einer Aktion ab. Der Fortschritt einer Aktion kann als Prozent- oder Sekundenangabe angezeigt werden und laufend aktualisiert werden.

meter
Das Element gibt einen statistischen Überblick über einen aktuellen IST-Zustand

source
Mit dessen Hilfe können für Medien verschiedene Quellen angegeben werden, aus denen der Browser dann die angemessenste auswählt.

Textauszeichnungselemente

time
Mit dem time-Element können feste Zeitangaben im Dokument integriert werden.

mark
Mit diesem Element können Textabschnitte oder einzelne Wörter, sowie Passagen hervorgehoben werden. Es wird oft verwendet, um Schlüsselbegriffe auf einer Seite hervor zu heben, die als Ergebnis einer Suche geliefert wurden.

Multimedia-Elemente

Video/audio/canvas
Das wichtigste dieser drei Elemente ist das canvas-Element. Mit diesem Element wird eine rechteckige Zeichenoberfläche erzeugt, die mit Inhalten gefüllt werden kann und in der auch Bewegungen eingebaut werden können. So können dynamische und interaktive Grafiken erstellt werden. Es wird behauptet, dass dieses Element das meiste Potenzial für neue Entwicklungen bietet.

Der große Vorteil von HTML5 ist, dass vieles für den HTML-Programmierer vereinfacht wurde und er durch die Anwendung Zeit einspart. Die Web-Entwickler sparen sich viele unnötige Handgriffe und die Suchmaschinen finden HTML Seiten wesentlich schneller.

Marie Schubert

Kategorien: HTML5 & CSS3 Internet

HTML5-Nachfolger HTML.Next in Entwicklung

26. April 2012, 12:26 · von · 0 Kommentare

Obwohl HTML5 vermutlich erst im Jahr 2014 fertiggestellt sein wird, hat das W3C (World Wide Web Consortiums) mit der Entwicklung am Nachfolger begonnen. Die neue HTML-Version trägt vorerst den Namen HTML.Next. Außerdem hat das W3C aufgerufen, erste Vorschläge für HTML.Next einzusenden.

Gleichzeitig plant man weiterhin mit der WHATWG (Web Hypertext Application Technology Working Group) zusammenzuarbeiten. Die WHATWG setzt sich aus Mitarbeitern der Browserhersteller Mozilla und Opera zusammen. Auch einige W3C-Mitglieder sind Teil von WHATWG. Die WHATWG arbeitet schon länger an einem Nachfolger für HTML5. Wenn es nach der WHATWG geht, soll die nächste HTML-Version ohne Versionsnummer auskommen und stattdessen dynamisch weiterentwickelt werden. Es ist davon auszugehen, dass HTML.Next auf einem Vorschlag der WHATWG basieren wird.

Kategorien: HTML5 & CSS3 Internet Web-Design

Farbe von markiertem Text mit CSS anpassen

15. November 2011, 18:32 · von · 6 Kommentare

In allen Browsern ist die standarmäßige Darstellung von markiertem Text auf weiße Schrift und blauen Hintergrund gesetzt. In letzter Zeit sehe ich jedoch immer mehr Webseiten, die sich davon abwenden. Einerseits um markierte Textstellen besser lesbar zu machen, andererseits um das Design noch einheitlicher zu gestalten.

Farbige Textmarkierungen können mit Hilfe von CSS realisiert werden. Dabei lassen sich die Text- und Hintergrundfarbe von markiertem Text ändern. Unterstützt wird der “selection”-Selektor von Opera ab Version 9.5, vom Internet Explorer ab Version 9, von Chrome und Safari. Firefox kann seit Version 3.6 ebenfalls damit umgehen.

::selection {background: #ff0000; color: #ffffff;}
::-moz-selection {background: #ff0000; color: #ffffff;}

Ursprünglich war der neue Selektor Teil der CSS3-Spezifikation. Mittlerweile wurde der Support eingestellt und der Selektor ist in der neuesten Spezifikation leider nicht mehr vorhanden. Durch die breite Unterstützung auf Browserbasis bleibt der “selection”-Selektor aber weiterhin interessant. Einziger Nachteil beim Einsatz ist, dass dieser Selektor nicht valide ist.

Ich habe euch eine Demo mit drei verschiedenen Beispielen erstellt. Dort könnt ihr selbst testen und den Quellcode kopieren:
https://www.antary.de/wp-content/uploads/2011/11/css_selection.html

 

Kategorien: HTML5 & CSS3 Web-Design

Firefox erreicht 100 Punkte im Acid3 Test

26. September 2011, 01:41 · von · 0 Kommentare

Obwohl der Acid3-Test bereits im Februar 2008 veröffentlicht wurde, haben die Firefox Versionen 4 bis 7 den Test bisher nur mit 97 von 100 Punkten bestanden. Seit einem Update des Acid3-Tests vor einigen Tagen kommt Firefox aber auf die volle Punktzahl.

Als Hintergrundinformation sollte man wissen, dass der Acid3-Test nur stichprobenartig bestimmte Webstandards prüft. Darunter befinden sich auch die drei, bisher fehlenden Punkte. Diese beziehen sich auf die Unterstützng von SVG-Fonts. In der Realität hat sich mittlerweile aber WOFF (Web Open Font Format) durchgesetzt, weswegen SVG-Fonts nie genutzt wurden. Selbst andere Browser, die in der Vergangenheit 100 Punkte erreichten, haben SVG-Fonts fehlerhaft implementiert, um auf die werbewirksame Zahl von 100 Punkten zu kommen. Firefox zog jedoch nicht mit und blieb bis vor Kurzem eben bei 97 Punkten stehen.

Kategorien: Firefox HTML5 & CSS3 Internet