Webdesign-Podcast.de Archiv
42 Episoden
14 Minuten
Seit dem 11.12.2012 ist die neue WordPress Version 3.5 verfügbar, alles in allem hat sich nichts grundsätzliches geändert, bis auf den Media Manager, dieser hat ein umfangreiches und grundlegendes Redesign erfahren, weiterhin gibt es ein neues Standard Theme: Twenty Twelve . Das vom Grundsatz her alles beim alten geblieben ist, soll an dieser Stelle aber keine Kritik sein, denn von der Funktionalität und Bedienbarkeit ist WordPress bereits weit vorne.
In diesem Artikel möchte ich euch sämtliche wichtigen Neuerungen vorstellen und auf einige Umstrukturierungen in den Einstellungen hinweisen. Neben dem Artikel ist am Ende des Beitrags noch ein ca. 15-minütiges Video, dass ebenfalls alle wichtigen Neuerungen aufzeigt.
Anzeige:
Kurze Themen-Übersicht:
Der neue WordPress Media Manager
WordPress Standard-Theme Twenty Twelve
Verbesserte / Überarbeitete Administrationsoberfläche in WordPress 3.5
Updates unter der Haube…
WordPress Aktualisieren – So geht’s…
Video-Podcast zu allen Neuerungen in WordPress 3.5
WordPress 3.5 Trailer
Der neue WordPress Media Manager
Der neue Media Manager spielt in WordPress eine zentrale Rolle, denn neben dem offensichtlichen neuen Standard Theme Twenty Twelve, dass nicht unbedingt jeder verwendet, handelt es sich hierbei um die wichtigste Neuerung. Im Gegensatz zu den früheren WordPress-Versionen öffnet sich der neue MediaManager in der Medathek-Ansicht und bietet so schnellen Zugriff auf bestehende Medien-Dateien.
Die Bilder lassen sich schnell und einfach im rechten Bereich des Media Managers anpassen:
Galerien lassen sich jetzt komfortabler erstellen, da sich entsprechende Bilder aus der gesamten Mediathek einfach wie Auswahlfeld markieren lassen. Die Sortierung funktioniert über ein einfaches Drag & Drop Interface. So hat sich das Mühsame bearbeiten der Galerien im Shortcode erledigt, definitiv eine große Erleichterung für Autoren, die sicht nicht großartig mit dem Code beschäftigen wollen.
Insgesamt macht der neue Media Manager einen sehr guten Eindruck und stellt gerade für Webmaster oder Blogger, die mit vielen Bildern oder generell Mediendateien arbeiten, eine enorme Erleichterung dar.
WordPress Standard-Theme Twenty Twelve
Das neue Theme Twenty Twelve löst das alte Theme Twenty Eleven aus WordPress 3.4 ab und folgt dem aktuellen Responsive Webdesign Trend. Soll heißen, dass sich das neue Theme immer der entsprechenden Displaygröße des Endgerätes anpasst. So wird eine gute Darstellung auf Desktop-Computern, Tablets und Smartphones gewährleistet.
Das Twenty Twelve theme verfügt über die selben und gut ausgeprägten Theme-Optionen und Einstellungsmöglichkeiten, wie auch die ältere Twenty Eleven Variante. In den Bereichen zum Anpassen des Themes kommt auch der neue Color-Picker zum Vorschein, der sich im Vergleich zum alten „Farbkreis“ wesentlich besser bedienen lässt.
Im WordPress Codex wird das neue Theme wie folgt beschrieben:
New Default Theme – Twenty Twelve
Simple, flexible, elegant
Mobile-first, responsive design
Gorgeous Open Sans typeface
Uses the latest Theme Features
Verbesserte / Überarbeitete Administrationsoberfläche in WordPress 3.5
Auch die Administrationsoberfläche wurde in WordPress 3.5 angepasst, wenn auch marginal: Es gibt einen neuen Willkommens-Bildschirm im Dashboard, nach der Erst-Installation und die vorher runden bzw. ovalen Buttons sind nun eher eckig mit abgerundeten Ecken.
Wer ein Gerät mit einem High-Resolution Display (HiDPI) oder auch Retina-Display sein eigen nennt, kann sich über eine entsprechend angepasste Administrationsoberfläche freuen, zu diesen Geräten zählen z.B. iPad mit Retina-Display oder die neuen Mac Book Pro’s.
Einstellungen wurden zusammengefasst
Erst auf den zweiten Blick fällt auf, dass im WordPress Backend die „Privatsphäre“ Einstellung fehlt, über die Suchmaschinen ausgesperrt werden konnten. Diese Einstellung wurde allerdings nicht entfernt, sondern lediglich verschoben. Sie befindet sich jetzt im Bereich „Einstellungen > Lesen“ und dort unter „Suchmaschinen-Sichtbarkeit“.
Eine weitere Einstellung die dem Update zum Opfer gefallen ist, trägt den Namen XML-RPC Schnittstelle, diese wird zum Beispiel für Zusatzsoftware oder die WordPress App benötigt. Die XML-RPC Schnittstelle ist jetzt standardmäßig immer aktiv und lässt sich auch nicht mehr über eine entsprechende Option abschalten.
Updates unter der Haube…
Unter der Haube wurden alle externen Bibliotheken, wie z.B. jQuery und andere Scripte auf die aktuellsten Versionen gebracht. Zusätzlich wurden einige Sicherheitsrelevante Funktionen überarbeitet bzw. bestehende erweitert, eine aktuell häufig auftauchende Fehlermeldung wird durch genau so eine Sicherheitsrelevante Änderung erzeugt: PHP Warning: Missing argument 2 for wpdb::prepare()
Informationen dazu gibt es im WordPress Blog: PHP Warning: Missing argument 2 for wpdb::prepare()
Alle weiteren Informationen die vor allem für Developer und Theme-Entwickler wichtig sind, findet ihr im WordPress Codex.
WordPress Aktualisieren – So geht’s…
Die Aktualisierung auf WordPress 3.5 ist wie immer kinderleicht und kann über die automatische Update-Funktion vollzogen werden. Bei meinen Seiten traten im Zusammenhang mit Plugins von Drittentwicklern keine Probleme auf.
Wer WordPress manuell updaten möchte kopiert und überschreibt einfach sämtliche Daten aus dem neuen Download-Paket, ausgenommen ist alles in eurem /wp-content/ Ordner und öffnet danach die Datei zum aktualisieren der Datenbank.
Entsprechende Informationen gibt es hier: WordPress Update
Video-Podcast zu allen Neuerungen in WordPress 3.5
Podcast Info:
Titel: Neuerungen in WordPress 3.5 mit Video
Autor: Pascal Bajorat
Länge: 15 Min
Dateigröße: 111 MB
Das Video ist ein Teil meins achtstündigen WordPress-Video-Trainings.
WordPress 3.5 Trailer
Hier der offizielle Video-Trailer zu WordPress 3.5.
Ähnliche Artikel:
WordPress 3.1 MultiSite / Blognetzwerk Installation WordPress 3.4 (Green) Neuerungen: Custom-Header, Custom-Backgrounds, oEmbed und Live Theme Vorschau als Video-Training WordPress Multisite (MU) und Domain-Mapping
In diesem Artikel möchte ich euch sämtliche wichtigen Neuerungen vorstellen und auf einige Umstrukturierungen in den Einstellungen hinweisen. Neben dem Artikel ist am Ende des Beitrags noch ein ca. 15-minütiges Video, dass ebenfalls alle wichtigen Neuerungen aufzeigt.
Anzeige:
Kurze Themen-Übersicht:
Der neue WordPress Media Manager
WordPress Standard-Theme Twenty Twelve
Verbesserte / Überarbeitete Administrationsoberfläche in WordPress 3.5
Updates unter der Haube…
WordPress Aktualisieren – So geht’s…
Video-Podcast zu allen Neuerungen in WordPress 3.5
WordPress 3.5 Trailer
Der neue WordPress Media Manager
Der neue Media Manager spielt in WordPress eine zentrale Rolle, denn neben dem offensichtlichen neuen Standard Theme Twenty Twelve, dass nicht unbedingt jeder verwendet, handelt es sich hierbei um die wichtigste Neuerung. Im Gegensatz zu den früheren WordPress-Versionen öffnet sich der neue MediaManager in der Medathek-Ansicht und bietet so schnellen Zugriff auf bestehende Medien-Dateien.
Die Bilder lassen sich schnell und einfach im rechten Bereich des Media Managers anpassen:
Galerien lassen sich jetzt komfortabler erstellen, da sich entsprechende Bilder aus der gesamten Mediathek einfach wie Auswahlfeld markieren lassen. Die Sortierung funktioniert über ein einfaches Drag & Drop Interface. So hat sich das Mühsame bearbeiten der Galerien im Shortcode erledigt, definitiv eine große Erleichterung für Autoren, die sicht nicht großartig mit dem Code beschäftigen wollen.
Insgesamt macht der neue Media Manager einen sehr guten Eindruck und stellt gerade für Webmaster oder Blogger, die mit vielen Bildern oder generell Mediendateien arbeiten, eine enorme Erleichterung dar.
WordPress Standard-Theme Twenty Twelve
Das neue Theme Twenty Twelve löst das alte Theme Twenty Eleven aus WordPress 3.4 ab und folgt dem aktuellen Responsive Webdesign Trend. Soll heißen, dass sich das neue Theme immer der entsprechenden Displaygröße des Endgerätes anpasst. So wird eine gute Darstellung auf Desktop-Computern, Tablets und Smartphones gewährleistet.
Das Twenty Twelve theme verfügt über die selben und gut ausgeprägten Theme-Optionen und Einstellungsmöglichkeiten, wie auch die ältere Twenty Eleven Variante. In den Bereichen zum Anpassen des Themes kommt auch der neue Color-Picker zum Vorschein, der sich im Vergleich zum alten „Farbkreis“ wesentlich besser bedienen lässt.
Im WordPress Codex wird das neue Theme wie folgt beschrieben:
New Default Theme – Twenty Twelve
Simple, flexible, elegant
Mobile-first, responsive design
Gorgeous Open Sans typeface
Uses the latest Theme Features
Verbesserte / Überarbeitete Administrationsoberfläche in WordPress 3.5
Auch die Administrationsoberfläche wurde in WordPress 3.5 angepasst, wenn auch marginal: Es gibt einen neuen Willkommens-Bildschirm im Dashboard, nach der Erst-Installation und die vorher runden bzw. ovalen Buttons sind nun eher eckig mit abgerundeten Ecken.
Wer ein Gerät mit einem High-Resolution Display (HiDPI) oder auch Retina-Display sein eigen nennt, kann sich über eine entsprechend angepasste Administrationsoberfläche freuen, zu diesen Geräten zählen z.B. iPad mit Retina-Display oder die neuen Mac Book Pro’s.
Einstellungen wurden zusammengefasst
Erst auf den zweiten Blick fällt auf, dass im WordPress Backend die „Privatsphäre“ Einstellung fehlt, über die Suchmaschinen ausgesperrt werden konnten. Diese Einstellung wurde allerdings nicht entfernt, sondern lediglich verschoben. Sie befindet sich jetzt im Bereich „Einstellungen > Lesen“ und dort unter „Suchmaschinen-Sichtbarkeit“.
Eine weitere Einstellung die dem Update zum Opfer gefallen ist, trägt den Namen XML-RPC Schnittstelle, diese wird zum Beispiel für Zusatzsoftware oder die WordPress App benötigt. Die XML-RPC Schnittstelle ist jetzt standardmäßig immer aktiv und lässt sich auch nicht mehr über eine entsprechende Option abschalten.
Updates unter der Haube…
Unter der Haube wurden alle externen Bibliotheken, wie z.B. jQuery und andere Scripte auf die aktuellsten Versionen gebracht. Zusätzlich wurden einige Sicherheitsrelevante Funktionen überarbeitet bzw. bestehende erweitert, eine aktuell häufig auftauchende Fehlermeldung wird durch genau so eine Sicherheitsrelevante Änderung erzeugt: PHP Warning: Missing argument 2 for wpdb::prepare()
Informationen dazu gibt es im WordPress Blog: PHP Warning: Missing argument 2 for wpdb::prepare()
Alle weiteren Informationen die vor allem für Developer und Theme-Entwickler wichtig sind, findet ihr im WordPress Codex.
WordPress Aktualisieren – So geht’s…
Die Aktualisierung auf WordPress 3.5 ist wie immer kinderleicht und kann über die automatische Update-Funktion vollzogen werden. Bei meinen Seiten traten im Zusammenhang mit Plugins von Drittentwicklern keine Probleme auf.
Wer WordPress manuell updaten möchte kopiert und überschreibt einfach sämtliche Daten aus dem neuen Download-Paket, ausgenommen ist alles in eurem /wp-content/ Ordner und öffnet danach die Datei zum aktualisieren der Datenbank.
Entsprechende Informationen gibt es hier: WordPress Update
Video-Podcast zu allen Neuerungen in WordPress 3.5
Podcast Info:
Titel: Neuerungen in WordPress 3.5 mit Video
Autor: Pascal Bajorat
Länge: 15 Min
Dateigröße: 111 MB
Das Video ist ein Teil meins achtstündigen WordPress-Video-Trainings.
WordPress 3.5 Trailer
Hier der offizielle Video-Trailer zu WordPress 3.5.
Ähnliche Artikel:
WordPress 3.1 MultiSite / Blognetzwerk Installation WordPress 3.4 (Green) Neuerungen: Custom-Header, Custom-Backgrounds, oEmbed und Live Theme Vorschau als Video-Training WordPress Multisite (MU) und Domain-Mapping
16 Minuten
Ich habe euch bereits in einem kleinen Artikel die wichtigsten Neuerungen von WordPress 3.4 Green vorgestellt, sowie in einem weiteren die Funktionsweise der neuen Custom-Header Funktion. Um das ganze nun abzurunden, möchte ich euch alle neuen Funktionen in einem Video vorstellen.
Neben den Neuerungen in der Oberfläche möchte ich euch noch zeigen wie ihr die neuen Funktionen Custom-Header ( add_theme_support( ‚custom-header‘, $args ) ), register_default_headers() und Custom-Background ( add_theme_support( ‚custom-background‘ ) ) in eure Themes einbauen könnt.
Wie bereits erwähnt findet ihr alle Infos zu add_theme_support( ‚custom-header‘, $args ) und register_default_headers() in dem Artikel: WordPress 3.4 – Custom-Header mit add_theme_support() und natürlich in diesem Video-Podcast.
Anzeige:
add_theme_support( ‚custom-background‘ )
Der Code für die Custom-Background Funktion ist extrem simpel, sieht wie folgt aus und muss in die functions.php integriert werden:
add_theme_support( 'custom-background', array( 'default-color' => 'ffffff' /* Standard-Farbe für den Hintergrund */ ) );
Den Rest übernimmt WordPress, wenn ein Custom-Background gesetzt ist, wird in der wp_head() Funktion automatisch der entsprechend Stil ausgegeben.
Podcast Info:
Titel: WordPress 3.4 (Green) Neuerungen: Custom-Header, Custom-Backgrounds, oEmbed und Live Theme Vorschau als Video-Training
Autor: Pascal Bajorat
Länge: 17 Min
Dateigröße: 143 MB
Auf Vimeo ansehen…
Ähnliche Artikel:
Post Thumbnails in WordPress verwenden WordPress 3.1 MultiSite / Blognetzwerk Installation Custom-Post-Types in WordPress mit eigener Taxonomie – mit Video-Training
Neben den Neuerungen in der Oberfläche möchte ich euch noch zeigen wie ihr die neuen Funktionen Custom-Header ( add_theme_support( ‚custom-header‘, $args ) ), register_default_headers() und Custom-Background ( add_theme_support( ‚custom-background‘ ) ) in eure Themes einbauen könnt.
Wie bereits erwähnt findet ihr alle Infos zu add_theme_support( ‚custom-header‘, $args ) und register_default_headers() in dem Artikel: WordPress 3.4 – Custom-Header mit add_theme_support() und natürlich in diesem Video-Podcast.
Anzeige:
add_theme_support( ‚custom-background‘ )
Der Code für die Custom-Background Funktion ist extrem simpel, sieht wie folgt aus und muss in die functions.php integriert werden:
add_theme_support( 'custom-background', array( 'default-color' => 'ffffff' /* Standard-Farbe für den Hintergrund */ ) );
Den Rest übernimmt WordPress, wenn ein Custom-Background gesetzt ist, wird in der wp_head() Funktion automatisch der entsprechend Stil ausgegeben.
Podcast Info:
Titel: WordPress 3.4 (Green) Neuerungen: Custom-Header, Custom-Backgrounds, oEmbed und Live Theme Vorschau als Video-Training
Autor: Pascal Bajorat
Länge: 17 Min
Dateigröße: 143 MB
Auf Vimeo ansehen…
Ähnliche Artikel:
Post Thumbnails in WordPress verwenden WordPress 3.1 MultiSite / Blognetzwerk Installation Custom-Post-Types in WordPress mit eigener Taxonomie – mit Video-Training
41 Minuten
Seit WordPress 3.0 besteht die Möglichkeit, dass man sich eigene Inhalts-Typen (sogenannte Custom-Post-Types) in Plugins oder in der functions.php seines eigenen Themes definieren kann. Custom-Post-Types gehören generell zu den interessantesten Neuerungen, die mit WordPress 3.0 eingeführt wurden, denn sie ermöglichen es jedem Plugin- oder Theme-Entwickler auf eigene Inhalts-Typen zurückzugreifen, die wie Seiten oder mit eigener Taxonomie wie Artikel behandelt werden können.
In diesem Tutorial möchte ich euch genau erklären wie ihr Custom-Post-Types verwendet, weiterhin findet ihr am Ende noch ein 40 minütiges Video-Training zu Custom-Post-Types, dieses entstammt meinem neuen WordPress-Video-Training.
Anzeige:
Was sind Custom-Post-Types und wie funktionieren sie …
Stellen wir uns einmal vor, wir haben eine einfache Webseite von einer kleinen Firma: Die Webseite verfügt über einen Blog-Bereich (hier kommen Artikel und Kategorien zum Einsatz) und einige normale Seiten, wie z.B. Über uns, Partner, Kontakt und Impressum, diese Einzelseiten werden natürlich über die „Seiten“ Funktion von WordPress verwaltet.
Nun möchte der Seitenbetreiber neben den zwei Bereichen, Artikel und Seiten, noch einen weiteren Bereich Produkte in dem er nach Kategorien sortiert seine Produkte auflisten kann. Hier könnte man zwar die Artikel-Funktion missbrauchen, dass würde in diesem Fall aber nicht funktionieren, da diese ja bereits regulär für den Blog verwendet wird.
Genau hier würden nun Custom-Post-Types ins Spiel kommen, die prinzipiell genau so aufgebaut sind wie die Artikel in WordPress. Stellt auch also einfach vor ihr hättet eine zweite Artikel Funktion, die allerdings auch direkt Produkte heißt und einen eigenen Menüpunkt im Backend hat. Weiterhin sind die Artikel, die über den Custom-Post-Type Produkte eingefügt wurden, völlig unabhängig von den eigentlichen Artikeln.
Um das ganze etwas besser zu verdeutlichen seht euch einmal den beigefügten Screenshot an:
Auf dem Screenshot ist der in einem Plugin angelegte Custom-Post-Type Produkt zu sehen.
Tipp: Custom-Post-Types können auch für komplexere Funktionen verwendet werden, wie z.B. die Verwaltung einer Slideshow. Ein gutes Beispiel ist hier der NivoSlider, dessen Backend ebenfalls auf einem Custom-Post-Type basiert.
Custom-Post-Types als Plugin oder im Theme (functions.php)
Es gibt zwei Möglichkeiten Custom-Post-Types anzulegen, zum einen in der functions.php des aktiven Themes oder in einem einfachen kleinen Plugin. Beide Varianten haben wichtige Vor- und Nachteile.
Wann sollte man Custom-Post-Types in der functions.php definieren
Es macht nur dann Sinn Custom-Post-Types in einem Theme direkt in der functions.php zu definieren, wenn es sich dabei um Theme relevante Post-Types handelt, wie z.B. für eine Slideshow. Denn stellen wir uns einmal vor, wir würden die Produktverwaltung mit dem Theme verbinden und irgendwann das Theme wechseln, so wäre auch die Produktverwaltung wieder verschwunden. Man müsste nun die Custom-Post-Type Definition manuell in die functions.php des neuen Themes übernehmen, dass wäre nicht wirklich komfortabel.
Wann sollte man Custom-Post-Types in einem extra Plugin definieren
Wenn es sich um Inhaltsbezogene Post-Types handelt, die nicht direkt mit dem Theme zusammenhängen wie z.B. die Produktverwaltung. So kann man das Theme wechseln so oft man will, ohne das dies direkten Einfluss auf die definierten Custom-Post-Types hat.
Wie werden Custom-Post-Types in einem Theme definiert:
Falls noch nicht vorhanden legt euch einfach in eurem Theme Ordner ( /wp-content/themes/EUER-THEME-NAME/ ) eine neue PHP Datei namens functions.php an, dort könnt ihr dann die folgenden Funktion reinschreiben.
Wie werden Custom-Post-Types in einem Plugin definiert:
Legt euch in eurem Plugins Ordner ( /wp-content/plugins/ ) eine neue PHP Datei an, wie ihr diese Datei nennt bleibt euch überlassen. In diesem Beispiel nennen wir sie einfach passend zur Produktverwaltung products.php. Die products.php muss folgende Angaben beinhalten:
Ersetzt einfach die Daten aus dem Beispiel mit den euren.
Tipp: Noch mehr interessante WordPress Workshops findet ihr in meinem neuen WordPress-Video-Training.
Wie werden Custom-Post-Types angelegt
Um in WordPress Custom-Post-Types anzulegen wird die Funktion register_post_type() verwendet, schaut euch das folgende Beispiel aus der Produktverwaltung an:
Die Argumente die dem Post-Type mit übergeben werden sind eigentlich selbsterklärend, eine genaue Liste der Post-Type Funktionen ist in der WordPress Dokumentation zu finden:
http://codex.wordpress.org/Function_Reference/register_post_type#Arguments
Mit der oben gezeigten Funktion lassen sich einfache Post-Types anlegen die vom Funktionsprinzip den Seiten in WordPress ähneln. Um der Produktverwaltung nun noch Kategorien hinzufügen zu können, muss eine eigene Taxonomie für diesen Post-Type angelegt werden.
Taxonomie für Custom-Post-Types anlegen
Um eine Taxonomie zu erzeugen, wird die Funktion register_taxonomy() verwendet:
// WordPress Hook der die Funktion "create_product_taxonomies" beim initialisieren von WordPress aufruft add_action( 'init', 'create_product_taxonomies', 0 ); // Selbst definierte Funktion die wir oben an den Hook übergeben function create_product_taxonomies() { // Die Labels sind für die Ausgaben im Backend zuständig $labels = array( 'name' => __( 'Kategorien' ), 'singular_name' => __( 'Kategorie' ), 'search_items' => __( 'Kategorien durchsuchen' ), 'all_items' => __( 'Alle Kategorien' ), 'parent_item' => __( 'Hauptkategorie' ), 'parent_item_colon' => __( 'Hauptkategorie:' ), 'edit_item' => __( 'Kategorie bearbeiten' ), 'update_item' => __( 'Kategorie aktualisieren' ), 'add_new_item' => __( 'Neue Kategorie hinzufügen' ), 'new_item_name' => __( 'Neue Kategorie Name' ), 'menu_name' => __( 'Kategorien' ), ); // Name der Taxonomie - array('product') verbindet diese Taxonomie mit dem Post-Type product register_taxonomy('product_category',array('product'), array( 'hierarchical' => true, 'labels' => $labels, 'show_ui' => true, 'query_var' => true, 'rewrite' => array( 'slug' => 'kategorie' ), )); }
Die genauen Informationen zu den Argumenten könnt ihr der WordPress Dokumentation entnehmen: http://codex.wordpress.org/Function_Reference/register_taxonomy#Arguments
So einfach lassen sich Custom-Post-Types definieren, falls ihr weitere Informationen benötigt seht euch das folgende Video-Training an. In dem Video-Training wird auch gezeigt, wie die Post-Types im Theme wieder ausgegeben werden.
Custom-Post-Type im Theme ausgeben
Um Custom-Post-Types im Theme auszugeben wird folgender modifizierter Content-Loop benötigt:
Custom-Post-Types Video-Training
Seit der WordPress-Version 3.0 gibt es die Möglichkeit, sogenannte Custom-Post-Types zu definieren. Bei diesen Custom-Post-Types handelt es sich um Inhaltsarten, die mit Artikeln vergleichbar sind, sie lassen sich allerdings einzeln im Theme abrufen und sind so flexibler für eigene Inhalte.
So lassen sich z.B. neben Artikeln auch DVD-Sammlungen, Bücher-Listen oder Mitglieder-Verwaltungen realisieren.
Weitere Informationen zu Custom-Post-Types gibt es unter: http://codex.wordpress.org/Post_Types#Custom_Types
Podcast Info:
Titel: Custom-Post-Types – was ist das, wozu kann man sie verwenden und wie funktionieren sie
Autor: Pascal Bajorat
Länge: 40 Min
Dateigröße: 280 MB
Das Video ist ein Teil meins achtstündigen WordPress-Video-Trainings.
Video auf Vimeo ansehen…
Ähnliche Artikel:
WordPress Multisite (MU) und Domain-Mapping WordPress Multisite (MU) installieren und konfigurieren WordPress 3.2 wurde veröffentlicht und bringt ein komplett neues Backend
In diesem Tutorial möchte ich euch genau erklären wie ihr Custom-Post-Types verwendet, weiterhin findet ihr am Ende noch ein 40 minütiges Video-Training zu Custom-Post-Types, dieses entstammt meinem neuen WordPress-Video-Training.
Anzeige:
Was sind Custom-Post-Types und wie funktionieren sie …
Stellen wir uns einmal vor, wir haben eine einfache Webseite von einer kleinen Firma: Die Webseite verfügt über einen Blog-Bereich (hier kommen Artikel und Kategorien zum Einsatz) und einige normale Seiten, wie z.B. Über uns, Partner, Kontakt und Impressum, diese Einzelseiten werden natürlich über die „Seiten“ Funktion von WordPress verwaltet.
Nun möchte der Seitenbetreiber neben den zwei Bereichen, Artikel und Seiten, noch einen weiteren Bereich Produkte in dem er nach Kategorien sortiert seine Produkte auflisten kann. Hier könnte man zwar die Artikel-Funktion missbrauchen, dass würde in diesem Fall aber nicht funktionieren, da diese ja bereits regulär für den Blog verwendet wird.
Genau hier würden nun Custom-Post-Types ins Spiel kommen, die prinzipiell genau so aufgebaut sind wie die Artikel in WordPress. Stellt auch also einfach vor ihr hättet eine zweite Artikel Funktion, die allerdings auch direkt Produkte heißt und einen eigenen Menüpunkt im Backend hat. Weiterhin sind die Artikel, die über den Custom-Post-Type Produkte eingefügt wurden, völlig unabhängig von den eigentlichen Artikeln.
Um das ganze etwas besser zu verdeutlichen seht euch einmal den beigefügten Screenshot an:
Auf dem Screenshot ist der in einem Plugin angelegte Custom-Post-Type Produkt zu sehen.
Tipp: Custom-Post-Types können auch für komplexere Funktionen verwendet werden, wie z.B. die Verwaltung einer Slideshow. Ein gutes Beispiel ist hier der NivoSlider, dessen Backend ebenfalls auf einem Custom-Post-Type basiert.
Custom-Post-Types als Plugin oder im Theme (functions.php)
Es gibt zwei Möglichkeiten Custom-Post-Types anzulegen, zum einen in der functions.php des aktiven Themes oder in einem einfachen kleinen Plugin. Beide Varianten haben wichtige Vor- und Nachteile.
Wann sollte man Custom-Post-Types in der functions.php definieren
Es macht nur dann Sinn Custom-Post-Types in einem Theme direkt in der functions.php zu definieren, wenn es sich dabei um Theme relevante Post-Types handelt, wie z.B. für eine Slideshow. Denn stellen wir uns einmal vor, wir würden die Produktverwaltung mit dem Theme verbinden und irgendwann das Theme wechseln, so wäre auch die Produktverwaltung wieder verschwunden. Man müsste nun die Custom-Post-Type Definition manuell in die functions.php des neuen Themes übernehmen, dass wäre nicht wirklich komfortabel.
Wann sollte man Custom-Post-Types in einem extra Plugin definieren
Wenn es sich um Inhaltsbezogene Post-Types handelt, die nicht direkt mit dem Theme zusammenhängen wie z.B. die Produktverwaltung. So kann man das Theme wechseln so oft man will, ohne das dies direkten Einfluss auf die definierten Custom-Post-Types hat.
Wie werden Custom-Post-Types in einem Theme definiert:
Falls noch nicht vorhanden legt euch einfach in eurem Theme Ordner ( /wp-content/themes/EUER-THEME-NAME/ ) eine neue PHP Datei namens functions.php an, dort könnt ihr dann die folgenden Funktion reinschreiben.
Wie werden Custom-Post-Types in einem Plugin definiert:
Legt euch in eurem Plugins Ordner ( /wp-content/plugins/ ) eine neue PHP Datei an, wie ihr diese Datei nennt bleibt euch überlassen. In diesem Beispiel nennen wir sie einfach passend zur Produktverwaltung products.php. Die products.php muss folgende Angaben beinhalten:
Ersetzt einfach die Daten aus dem Beispiel mit den euren.
Tipp: Noch mehr interessante WordPress Workshops findet ihr in meinem neuen WordPress-Video-Training.
Wie werden Custom-Post-Types angelegt
Um in WordPress Custom-Post-Types anzulegen wird die Funktion register_post_type() verwendet, schaut euch das folgende Beispiel aus der Produktverwaltung an:
Die Argumente die dem Post-Type mit übergeben werden sind eigentlich selbsterklärend, eine genaue Liste der Post-Type Funktionen ist in der WordPress Dokumentation zu finden:
http://codex.wordpress.org/Function_Reference/register_post_type#Arguments
Mit der oben gezeigten Funktion lassen sich einfache Post-Types anlegen die vom Funktionsprinzip den Seiten in WordPress ähneln. Um der Produktverwaltung nun noch Kategorien hinzufügen zu können, muss eine eigene Taxonomie für diesen Post-Type angelegt werden.
Taxonomie für Custom-Post-Types anlegen
Um eine Taxonomie zu erzeugen, wird die Funktion register_taxonomy() verwendet:
// WordPress Hook der die Funktion "create_product_taxonomies" beim initialisieren von WordPress aufruft add_action( 'init', 'create_product_taxonomies', 0 ); // Selbst definierte Funktion die wir oben an den Hook übergeben function create_product_taxonomies() { // Die Labels sind für die Ausgaben im Backend zuständig $labels = array( 'name' => __( 'Kategorien' ), 'singular_name' => __( 'Kategorie' ), 'search_items' => __( 'Kategorien durchsuchen' ), 'all_items' => __( 'Alle Kategorien' ), 'parent_item' => __( 'Hauptkategorie' ), 'parent_item_colon' => __( 'Hauptkategorie:' ), 'edit_item' => __( 'Kategorie bearbeiten' ), 'update_item' => __( 'Kategorie aktualisieren' ), 'add_new_item' => __( 'Neue Kategorie hinzufügen' ), 'new_item_name' => __( 'Neue Kategorie Name' ), 'menu_name' => __( 'Kategorien' ), ); // Name der Taxonomie - array('product') verbindet diese Taxonomie mit dem Post-Type product register_taxonomy('product_category',array('product'), array( 'hierarchical' => true, 'labels' => $labels, 'show_ui' => true, 'query_var' => true, 'rewrite' => array( 'slug' => 'kategorie' ), )); }
Die genauen Informationen zu den Argumenten könnt ihr der WordPress Dokumentation entnehmen: http://codex.wordpress.org/Function_Reference/register_taxonomy#Arguments
So einfach lassen sich Custom-Post-Types definieren, falls ihr weitere Informationen benötigt seht euch das folgende Video-Training an. In dem Video-Training wird auch gezeigt, wie die Post-Types im Theme wieder ausgegeben werden.
Custom-Post-Type im Theme ausgeben
Um Custom-Post-Types im Theme auszugeben wird folgender modifizierter Content-Loop benötigt:
Custom-Post-Types Video-Training
Seit der WordPress-Version 3.0 gibt es die Möglichkeit, sogenannte Custom-Post-Types zu definieren. Bei diesen Custom-Post-Types handelt es sich um Inhaltsarten, die mit Artikeln vergleichbar sind, sie lassen sich allerdings einzeln im Theme abrufen und sind so flexibler für eigene Inhalte.
So lassen sich z.B. neben Artikeln auch DVD-Sammlungen, Bücher-Listen oder Mitglieder-Verwaltungen realisieren.
Weitere Informationen zu Custom-Post-Types gibt es unter: http://codex.wordpress.org/Post_Types#Custom_Types
Podcast Info:
Titel: Custom-Post-Types – was ist das, wozu kann man sie verwenden und wie funktionieren sie
Autor: Pascal Bajorat
Länge: 40 Min
Dateigröße: 280 MB
Das Video ist ein Teil meins achtstündigen WordPress-Video-Trainings.
Video auf Vimeo ansehen…
Ähnliche Artikel:
WordPress Multisite (MU) und Domain-Mapping WordPress Multisite (MU) installieren und konfigurieren WordPress 3.2 wurde veröffentlicht und bringt ein komplett neues Backend
39 Minuten
In diesem Workshop möchte ich euch zeigen, wie man ganz einfach statische Webseiten umbaut und mit meinem mini CMS simpleCE verwalten kann. Das simpleCE System ist dabei so flexibel, dass man neben normalen Texten und Bildern auch eine individuelle Slideshow damit bearbeiten kann. Ebenso lassen sich Seitentitel und Metatags mit simpleCE verwalten.
Durch den einfachen Funktionsaufbau bietet simpleCE ein umfangreiches Framework zur Bearbeitung von Webseiten.
Hier gibt es weiterführende Informationen zu simpleCE:
simpleCE (mini CMS) auf CodeCanyon
simpleCE Produktinformationen auf Pascal-Bajorat.com
simpleCE – Das kleine und feine mini CMS (inkl. Video)
simpleCE (mini CMS) jetzt auf CodeCanyon
Anzeige:
Podcast Info:
Titel: simpleCE (mini CMS) Workshop – so werden statische Webseiten schnell und einfach bearbeitbar
Autor: Pascal Bajorat
Länge: 40 Min
Dateigröße: 350 MB
Ähnliche Artikel:
simpleCE – Das kleine und feine mini CMS (inkl. Video) Icon mit Adobe Photoshop Haare freistellen (Alpha-Kanal) Photoshop
Durch den einfachen Funktionsaufbau bietet simpleCE ein umfangreiches Framework zur Bearbeitung von Webseiten.
Hier gibt es weiterführende Informationen zu simpleCE:
simpleCE (mini CMS) auf CodeCanyon
simpleCE Produktinformationen auf Pascal-Bajorat.com
simpleCE – Das kleine und feine mini CMS (inkl. Video)
simpleCE (mini CMS) jetzt auf CodeCanyon
Anzeige:
Podcast Info:
Titel: simpleCE (mini CMS) Workshop – so werden statische Webseiten schnell und einfach bearbeitbar
Autor: Pascal Bajorat
Länge: 40 Min
Dateigröße: 350 MB
Ähnliche Artikel:
simpleCE – Das kleine und feine mini CMS (inkl. Video) Icon mit Adobe Photoshop Haare freistellen (Alpha-Kanal) Photoshop
18 Minuten
Wie ihr vielleicht wisst, habe ich bereits einige DVD-Produktionen hinter mir. Dazu zählen unter anderem die Webdesign-Workshop DVD, Webdesign-Workshop DVD Vol. 2, sowie die Photoshop-Workshop-DVD – Effekte für Typo, Layout & Foto – Vol. 2. All diese DVD’s sind wunderbare Lernmittel, an denen ich und einige weitere Autoren mitgewirkt haben.
Das neue achtstündige HTML5 & CSS3 Video-Training ist nun das erste, dass ich als alleiniger Autor erstellt habe, daher möchte ich euch die DVD in diesem Artikel gerne kurz vorstellen und ein Training davon zum ausprobieren und antesten zeigen.
Als erstes fangen ich einmal damit an, was diese Lern-DVD / Video-Training von denen anderer unterscheidet. Ich selber mache mir bei solchen Projekten auch immer Gedanken, wie man bestimmte Sachen am Besten lernen kann. Letztendlich stand für mich fest, dass man am einfachsten lernen kann, wenn man den Einsatz von HTML5 und CSS3 nicht in Einzelnen kleinen Videos sieht, sondern in zusammenhängenden Praxis-Projekten.
Anzeige:
Entsprechend werden in dem Video-Training drei ganze Webseiten in komplett unterschiedlichen Stilrichtungen vom leeren HTML-Dokument bis hin zur fertigen Webseite mit SlideShow und JavaScript spielereien umgesetzt und das Beste daran ist: Es wird wirklich kein Schritt übersprungen. So können sowohl Anfänger direkt mit HTML5 & CSS3 durchstarten, als auch Umsteiger ihr entsprechendes Wissen auf den neusten Stand bringen.
Neben den drei Praxis-Projekten sind noch über 10+ weitere Einzel-Workshops enthalten, diese decken unter anderem noch folgende weitere Themengebiete ab:
Generelle Einleitung und Unterschiede zwischen XHTML / HTML4 gegenüber HTML5
HTML5-Boilerplate – die beste Vorlage für HTML- und CSS3-Webseiten
HTML5 Video Tag und eigene Video-Player mit JavaScript (video.js)
HTML5 Audio Tag
Formulare mit den neuen HTML5 Tags
Animationen mit CSS3 (die sind echt verdammt cool )
Typografie im Web mit CSS3, @font-face und Cufon
Effektvolle Navigation mit HTML5 und CSS3 ( z.B. Verläufe und Transitions mittels CSS3 )
Webseiten richtig testen / Browsertests ( damit es mit den neuen Standards auch keine bösen Überraschungen gibt )
Die richtige Entwicklungsumgebung zum Erstellen von Webseiten ( vor allem für Anfänger gedacht, die sich zum ersten mal mit dem Thema HTML & CSS auseinandersetzen )
Die besten Tools zum Erstellen von HTML5- und CSS3-Webseiten ( denn es kann nicht schaden, wenn man sich etwas Arbeit abnehmen lässt )
Ich denke mit dieser Aufstellung ist mir ein ausgeglichenes Lehrwerk zum Thema HTML5 & CSS3 gelungen, dass sowohl Anfänger, wie auch Umsteiger und Fortgeschrittene anspricht.
Da es für das Video-Training auch schon die ersten Käuferstimmen gibt und das Rating aktuell bei 5 von 5 Sternen liegt (was hoffentlich auch so bleibt) hier ein paar Kundenstimmen:
Hendrik Sommer – 5 von 5 Sterne vergeben
Ich habe mir bis jetzt erst die Einleitung angesehen und bin einfach nur begeistert! Ich habe schon lange keine so gute Lern-DVD mehr gesehen. Die Stimme ist sehr angenehm, das Tempo genau richtig und der gute Mann scheint wirklich Ahnung von dem zu haben, was er einem beibringen möchte. Insgesamt 5 von 5 Sternen!
mirrorme – 5 von 5 Sterne vergeben
Super! Ich bin wie immer von der Qualität eurer Produktionen begeistert.
Dagobert68 – 5 von 5 Sterne vergeben
Bereits nach kurzem Reinschauen war klar: das perfekte Tutorial! Anschaulich erklärt mit tollen Beispielen – einfach perfekt. Besonders gut gefällt mir auch die Auswahl der Einzelbeispiele. So wird an konkretem Beispiel ein schickes Menü erklärt, ein Formular mit clientseitiger Validierung und sogar auf Boilerplate wird ausführlich eingegangen. Genau so etwas hat mir gefehlt. Danke!
Hanspeter Vogt – 5 von 5 Sterne vergeben
Eine sehr gute und leicht verständliche Einführung, die ein breites Spektrum abdeckt.
Jürgen Hoffmann – 5 von 5 Sterne vergeben
Preis/Leistung super. Für ein Kursangebot für hunderte von Euro würde mir auch das Geld fehlen. So gibt es eine Menge Infos für 30 Euro – Danke.
Die Bewertungen entstammen dem Bewertungssystem vom PSD-Tutorials.de Shop.
Podcast Info:
Titel: Animationen mit CSS3
Autor: Pascal Bajorat
Länge: 18 Min
Dateigröße: 135 MB
Beschreibung: In diesem Video-Training zeige ich euch, wie ihr mittels der CSS3-@keyframes-Funktion einfache Animationen ganz ohne JavaScript bauen könnt. Die Beispiel-Datei aus dem Video ist ebenfalls als Arbeitsmaterial mit enthalten.
Das Material zu diesem Workshop gibt es zusammen mit dem HTML5 & CSS3 Video-Training.
Animationen mit CSS3 – Webdesign-Podcast.de from Pascal Bajorat on Vimeo.
Ähnliche Artikel:
jQuery simple FadeSlideShow – Content / Image Slider einbauen und verwenden Grundbegriffe und Erklärungen für Webdesigner HTML / CSS Grundkurs und Einführung
Das neue achtstündige HTML5 & CSS3 Video-Training ist nun das erste, dass ich als alleiniger Autor erstellt habe, daher möchte ich euch die DVD in diesem Artikel gerne kurz vorstellen und ein Training davon zum ausprobieren und antesten zeigen.
Als erstes fangen ich einmal damit an, was diese Lern-DVD / Video-Training von denen anderer unterscheidet. Ich selber mache mir bei solchen Projekten auch immer Gedanken, wie man bestimmte Sachen am Besten lernen kann. Letztendlich stand für mich fest, dass man am einfachsten lernen kann, wenn man den Einsatz von HTML5 und CSS3 nicht in Einzelnen kleinen Videos sieht, sondern in zusammenhängenden Praxis-Projekten.
Anzeige:
Entsprechend werden in dem Video-Training drei ganze Webseiten in komplett unterschiedlichen Stilrichtungen vom leeren HTML-Dokument bis hin zur fertigen Webseite mit SlideShow und JavaScript spielereien umgesetzt und das Beste daran ist: Es wird wirklich kein Schritt übersprungen. So können sowohl Anfänger direkt mit HTML5 & CSS3 durchstarten, als auch Umsteiger ihr entsprechendes Wissen auf den neusten Stand bringen.
Neben den drei Praxis-Projekten sind noch über 10+ weitere Einzel-Workshops enthalten, diese decken unter anderem noch folgende weitere Themengebiete ab:
Generelle Einleitung und Unterschiede zwischen XHTML / HTML4 gegenüber HTML5
HTML5-Boilerplate – die beste Vorlage für HTML- und CSS3-Webseiten
HTML5 Video Tag und eigene Video-Player mit JavaScript (video.js)
HTML5 Audio Tag
Formulare mit den neuen HTML5 Tags
Animationen mit CSS3 (die sind echt verdammt cool )
Typografie im Web mit CSS3, @font-face und Cufon
Effektvolle Navigation mit HTML5 und CSS3 ( z.B. Verläufe und Transitions mittels CSS3 )
Webseiten richtig testen / Browsertests ( damit es mit den neuen Standards auch keine bösen Überraschungen gibt )
Die richtige Entwicklungsumgebung zum Erstellen von Webseiten ( vor allem für Anfänger gedacht, die sich zum ersten mal mit dem Thema HTML & CSS auseinandersetzen )
Die besten Tools zum Erstellen von HTML5- und CSS3-Webseiten ( denn es kann nicht schaden, wenn man sich etwas Arbeit abnehmen lässt )
Ich denke mit dieser Aufstellung ist mir ein ausgeglichenes Lehrwerk zum Thema HTML5 & CSS3 gelungen, dass sowohl Anfänger, wie auch Umsteiger und Fortgeschrittene anspricht.
Da es für das Video-Training auch schon die ersten Käuferstimmen gibt und das Rating aktuell bei 5 von 5 Sternen liegt (was hoffentlich auch so bleibt) hier ein paar Kundenstimmen:
Hendrik Sommer – 5 von 5 Sterne vergeben
Ich habe mir bis jetzt erst die Einleitung angesehen und bin einfach nur begeistert! Ich habe schon lange keine so gute Lern-DVD mehr gesehen. Die Stimme ist sehr angenehm, das Tempo genau richtig und der gute Mann scheint wirklich Ahnung von dem zu haben, was er einem beibringen möchte. Insgesamt 5 von 5 Sternen!
mirrorme – 5 von 5 Sterne vergeben
Super! Ich bin wie immer von der Qualität eurer Produktionen begeistert.
Dagobert68 – 5 von 5 Sterne vergeben
Bereits nach kurzem Reinschauen war klar: das perfekte Tutorial! Anschaulich erklärt mit tollen Beispielen – einfach perfekt. Besonders gut gefällt mir auch die Auswahl der Einzelbeispiele. So wird an konkretem Beispiel ein schickes Menü erklärt, ein Formular mit clientseitiger Validierung und sogar auf Boilerplate wird ausführlich eingegangen. Genau so etwas hat mir gefehlt. Danke!
Hanspeter Vogt – 5 von 5 Sterne vergeben
Eine sehr gute und leicht verständliche Einführung, die ein breites Spektrum abdeckt.
Jürgen Hoffmann – 5 von 5 Sterne vergeben
Preis/Leistung super. Für ein Kursangebot für hunderte von Euro würde mir auch das Geld fehlen. So gibt es eine Menge Infos für 30 Euro – Danke.
Die Bewertungen entstammen dem Bewertungssystem vom PSD-Tutorials.de Shop.
Podcast Info:
Titel: Animationen mit CSS3
Autor: Pascal Bajorat
Länge: 18 Min
Dateigröße: 135 MB
Beschreibung: In diesem Video-Training zeige ich euch, wie ihr mittels der CSS3-@keyframes-Funktion einfache Animationen ganz ohne JavaScript bauen könnt. Die Beispiel-Datei aus dem Video ist ebenfalls als Arbeitsmaterial mit enthalten.
Das Material zu diesem Workshop gibt es zusammen mit dem HTML5 & CSS3 Video-Training.
Animationen mit CSS3 – Webdesign-Podcast.de from Pascal Bajorat on Vimeo.
Ähnliche Artikel:
jQuery simple FadeSlideShow – Content / Image Slider einbauen und verwenden Grundbegriffe und Erklärungen für Webdesigner HTML / CSS Grundkurs und Einführung
1 Stunde 20 Minuten
In diesem Video-Training zeige ich euch wie ihr eine komplette Webseite in HTML5 und CSS3 umsetzt. Dabei fange ich von grundauf mit der PSD-Datei an. Wenn wir die Webseite in HTML5 und CSS3 Programmiert haben, zeige ich euch wie ihr über die Tab-Navigation der Webseite neue Inhalte via AJAX einladen könnt ohne das die eigentliche Seite verlassen werden muss.
Neben dem AJAX Content Loader wird noch ein netter Animations-Effekt programmiert, der die neuen Inhalte ansprechend in die Seite lädt.
Als Basis für dieses Video-Training steht ein Design für eine Hebamme von Matthias Petri. Das Video Training stammt von der neuen PSD-Tutorials.de Webdesign Workshop DVD Vol. 2 und soll euch einen Einstieg in die Möglichkeiten von HTML5 und CSS3 bieten.
Wenn ihr weiteres Lernmaterial zu moderner Webentwicklung sucht, dann kommt ihr um die neue DVD kaum herum, also einfach einmal anschauen: PSD-Tutorials.de Webdesign Workshop DVD Vol. 2. Ich habe die DVD bereits vor ein paar Wochen in einem ausführlichen Artikel vorgestellt.
Podcast Info:
Titel: Komplette Webseite in HTML5 und CSS3 programmieren + AJAX Funktionen
Autor: Pascal Bajorat
Länge: 81 Min
Dateigröße: 360 MB
Beschreibung: In diesem Video-Training möchte ich euch zeigen, wie ihr eine komplette Webseite auf HTML5- und CSS3-Basis umsetzen könnt. Dabei verwenden wir natürlich nicht nur den neuen HTML5-Doctype, sondern auch einige der neuen HTML5-Tags und CSS3-Funktionen wie box-shadow, border-radius, text-shadow usw. Zusätzlich zeige ich euch, wie Ihr die Seite komplett auf AJAX-Basis aufbauen könnt. Das heißt: Content wird mittels AJAX geladen und nicht, indem man eine komplett neue HTML-Seite aufruft. Für die Umsetzung mit HTML5 und CSS3 verwende ich das HTML5Boilerplate: http://html5boilerplate.com/
Für alle HTML5 & CSS3 Interessierten gibt es hier einen weiteren Einblick in CSS3 und zwar: HTML5 & CSS3 Video-Training – Animationen mit CSS3. Ich wünsche euch viel Spaß mit den Video-Podcast Folgen und hoffentlich auch dem HTML5 & CSS3 Video-Training.
Alle Arbeitsdateien zu dem Video-Training gibt es auf der neuen PSD-Tutorials.de Webdesign Workshop DVD Vol. 2
Eine Video zur Design-Erstellung gibt es hier: Website im kinderfreundlichen Look & Feel
Ähnliche Artikel:
Hands-On-Session – Folgeveranstaltung zum CSS-Tag Entwicklung von mobilen Web-Anwendungen / WebApps und Webseiten – Teil 2 WordPress Artikel via AJAX nachladen, wie auf Facebook – Tutorial
Neben dem AJAX Content Loader wird noch ein netter Animations-Effekt programmiert, der die neuen Inhalte ansprechend in die Seite lädt.
Als Basis für dieses Video-Training steht ein Design für eine Hebamme von Matthias Petri. Das Video Training stammt von der neuen PSD-Tutorials.de Webdesign Workshop DVD Vol. 2 und soll euch einen Einstieg in die Möglichkeiten von HTML5 und CSS3 bieten.
Wenn ihr weiteres Lernmaterial zu moderner Webentwicklung sucht, dann kommt ihr um die neue DVD kaum herum, also einfach einmal anschauen: PSD-Tutorials.de Webdesign Workshop DVD Vol. 2. Ich habe die DVD bereits vor ein paar Wochen in einem ausführlichen Artikel vorgestellt.
Podcast Info:
Titel: Komplette Webseite in HTML5 und CSS3 programmieren + AJAX Funktionen
Autor: Pascal Bajorat
Länge: 81 Min
Dateigröße: 360 MB
Beschreibung: In diesem Video-Training möchte ich euch zeigen, wie ihr eine komplette Webseite auf HTML5- und CSS3-Basis umsetzen könnt. Dabei verwenden wir natürlich nicht nur den neuen HTML5-Doctype, sondern auch einige der neuen HTML5-Tags und CSS3-Funktionen wie box-shadow, border-radius, text-shadow usw. Zusätzlich zeige ich euch, wie Ihr die Seite komplett auf AJAX-Basis aufbauen könnt. Das heißt: Content wird mittels AJAX geladen und nicht, indem man eine komplett neue HTML-Seite aufruft. Für die Umsetzung mit HTML5 und CSS3 verwende ich das HTML5Boilerplate: http://html5boilerplate.com/
Für alle HTML5 & CSS3 Interessierten gibt es hier einen weiteren Einblick in CSS3 und zwar: HTML5 & CSS3 Video-Training – Animationen mit CSS3. Ich wünsche euch viel Spaß mit den Video-Podcast Folgen und hoffentlich auch dem HTML5 & CSS3 Video-Training.
Alle Arbeitsdateien zu dem Video-Training gibt es auf der neuen PSD-Tutorials.de Webdesign Workshop DVD Vol. 2
Eine Video zur Design-Erstellung gibt es hier: Website im kinderfreundlichen Look & Feel
Ähnliche Artikel:
Hands-On-Session – Folgeveranstaltung zum CSS-Tag Entwicklung von mobilen Web-Anwendungen / WebApps und Webseiten – Teil 2 WordPress Artikel via AJAX nachladen, wie auf Facebook – Tutorial
21 Minuten
Es ist nun genau ein Jahr her, dass Sascha und ich auf die Idee zum Webdesign-Podcast.de gekommen sind, diesen ersten Geburtstag möchten wir mit euch feiern und zwar mit einem großen Gewinnspiel, mit vielen Preisen in einem Gesamtwert von über 500€. Sascha und ich haben ein kleines Video aufgenommen in dem wir das vergangene Jahr noch einmal Revue passieren lassen.
Als erstes sollte natürlich die Frage geklärt werden was es zu gewinnen gibt:
Video2Brain
2x eine Power-Workshops: Webdesign mit Photoshop DVD – Produktseite
1x Online Training – WordPress – Websites mit WordPress umsetzen und pflegen – Produktseite
1x Online Training – Contao – Dynamische Websites mit dem Open Source CMS – Produktseite
1x Online Training – Die Website – Design und Programmierung lernen – Produktseite
1x Online Training – Dreamweaver CS5 – Produktseite
PSD-Tutorials.de
2x eine Photoshop-Workshop-DVD – Webdesign – Produktseite
2x eine CINEMA 4D-Workshop-DVD – Produktseite
Smashing Magazine
3x ein The Smashing Book #2 – Produktseite
Webstandards-Magazin
3x ein Jahres-Abos – Produktseite
An dieser Stelle noch einmal vielen Dank an die Sponsoren unseres Gewinnspiels.
Am Gewinnspiel teilnehmen
Die Teilnahme an dem Gewinnspiel ist relativ einfach, ihr habt zwei Möglichkeiten und dürft auch beide nutzen um eure Gewinnchance zu verdoppeln:
Via Facebook teilnehmen:
Werdert Fan unserer Facebook Fanpage und schreibt einen Eintrag auf die Pinnwand in dem ihr uns entweder Feedback zum Webdesign-Podcast.de direkt gebt oder sagt warum ihr einen der Preise haben möchtet. Dabei solltet ihr in jedem Fall anmerken welchen der Preise ihr gerne gewinnen möchtet, des Weiteren würden wir uns freuen wenn ihr noch den folgenden „gefällt mir“ Button anklickt.
Via Twitter teilnehmen:
Folgt uns auf Twitter @webdesigncast und schreibt einen kurzen Tweet mit einem Hinweis auf dieses Gewinnspiel, der Tweet sollte am Ende mit einem @webdesigncast versehen werden, damit wir eure Tweets sehen.
Für weitere Informationen einfach einmal das Video oben ansehen.
Das Gewinnspiel läuft bis zum 16.06.2011 23:59 Uhr.
Wir wünschen euch viel Spaß und Glück.
Anzeige:
Video2Brain
Jetzt video2brain-Abo bestellen und ein Jahr vollen Zugriff auf alle Trainings genießen
Das Trainingsabonnement von video2brain (www.video2brain.com), dem führenden Anbieter hochwertiger, video-basierter Seminare, eröffnet ein Jahr lang unbeschränkten Zugang zu allen Originaltrainings – in komplettem Umfang und mit vollständiger Funktionalität. Aktuell stehen Ihnen als Abonnent über 480 videobasierte Seminare zur Verfügung und es kommen mehrmals im Monat aktuelle Inhalte dazu. So können Abonnenten jederzeit und überall ihr Können bedarfsgerecht erweitern und aktuell halten – mit wertvollem Wissen zu einem günstigen Einführungspreis.
Die Trainingsabonnements präsentieren ausschließlich Originalinhalte in bewährter video2brain-Qualität – führend in Technologie und Methodik sowie bei der Kompetenz der Trainer. Das Themenspektrum wird ständig erweitert und bietet derzeit Praxiswissen und Expertentipps für Kreativanwender, Fotografen, Softwareentwickler, Büroanwender, IT-Fachleute und technische Berufe. Die Standardvariante des Abonnements umfasst uneingeschränkte Online-Nutzung, die Premiumvariante zusätzliche Downloadmöglichkeit und Begleitmaterialien.
Die Trainingsabonnements bieten auf mehrfache Weise Investitions- und Planungssicherheit, denn die uneingeschränkt zugängliche video2brain-Trainingsbibliothek macht fit für die Zukunft. Neue Anforderungen erfüllen oder Qualifikationen erhöhen? Innerhalb der Abonnementslaufzeit geht das ohne Zusatzkosten. Sollen mehr Mitarbeiter trainieren können? Dann bleiben die Kosten klar kalkulierbar und in einem günstigen Rahmen. Wer neue Software testen möchte ohne gleich in teure Originalprogramme zu investieren, kann vorab anhand der Kurse das Leistungsvermögen und die Praxisrelevanz bestimmter Anwendungen recherchieren.
Die Trainingsabonnements ermöglichen selbstbestimmtes Lernen ohne Grenzen. Die Lernenden können selbst entscheiden, was für sie in ihrer persönlichen Situation wichtig ist, auch wenn dieses Wissen über mehrere Kurse hinweg verteilt ist. So lassen sich persönliche Ambitionen in die Tat umsetzen, Wissensvorsprung erarbeiten und Wettbewerbsvorteile erzielen – und gleichzeitig kommt die Freude am Lernen nicht zu kurz.
Premium-Abo: Zugriff auf alle DVD- und Online-Trainings inkl. Download und Rohmaterial: 298,-
Standard-Abo: Zugriff auf alle DVD- und Online-Trainings: 198,-
EDU-Abo: Zugriff auf alle DVD- und Online-Trainings für Schüler, Studierende, Auszubildende, Lehrer oder Professoren: 98,-
Ähnliche Artikel:
Berliner Photoshop Treff am 12.03 Webdesign-Podcast.de jetzt auch auf Facebook Gewinner Photoshop Workshop DVD
Als erstes sollte natürlich die Frage geklärt werden was es zu gewinnen gibt:
Video2Brain
2x eine Power-Workshops: Webdesign mit Photoshop DVD – Produktseite
1x Online Training – WordPress – Websites mit WordPress umsetzen und pflegen – Produktseite
1x Online Training – Contao – Dynamische Websites mit dem Open Source CMS – Produktseite
1x Online Training – Die Website – Design und Programmierung lernen – Produktseite
1x Online Training – Dreamweaver CS5 – Produktseite
PSD-Tutorials.de
2x eine Photoshop-Workshop-DVD – Webdesign – Produktseite
2x eine CINEMA 4D-Workshop-DVD – Produktseite
Smashing Magazine
3x ein The Smashing Book #2 – Produktseite
Webstandards-Magazin
3x ein Jahres-Abos – Produktseite
An dieser Stelle noch einmal vielen Dank an die Sponsoren unseres Gewinnspiels.
Am Gewinnspiel teilnehmen
Die Teilnahme an dem Gewinnspiel ist relativ einfach, ihr habt zwei Möglichkeiten und dürft auch beide nutzen um eure Gewinnchance zu verdoppeln:
Via Facebook teilnehmen:
Werdert Fan unserer Facebook Fanpage und schreibt einen Eintrag auf die Pinnwand in dem ihr uns entweder Feedback zum Webdesign-Podcast.de direkt gebt oder sagt warum ihr einen der Preise haben möchtet. Dabei solltet ihr in jedem Fall anmerken welchen der Preise ihr gerne gewinnen möchtet, des Weiteren würden wir uns freuen wenn ihr noch den folgenden „gefällt mir“ Button anklickt.
Via Twitter teilnehmen:
Folgt uns auf Twitter @webdesigncast und schreibt einen kurzen Tweet mit einem Hinweis auf dieses Gewinnspiel, der Tweet sollte am Ende mit einem @webdesigncast versehen werden, damit wir eure Tweets sehen.
Für weitere Informationen einfach einmal das Video oben ansehen.
Das Gewinnspiel läuft bis zum 16.06.2011 23:59 Uhr.
Wir wünschen euch viel Spaß und Glück.
Anzeige:
Video2Brain
Jetzt video2brain-Abo bestellen und ein Jahr vollen Zugriff auf alle Trainings genießen
Das Trainingsabonnement von video2brain (www.video2brain.com), dem führenden Anbieter hochwertiger, video-basierter Seminare, eröffnet ein Jahr lang unbeschränkten Zugang zu allen Originaltrainings – in komplettem Umfang und mit vollständiger Funktionalität. Aktuell stehen Ihnen als Abonnent über 480 videobasierte Seminare zur Verfügung und es kommen mehrmals im Monat aktuelle Inhalte dazu. So können Abonnenten jederzeit und überall ihr Können bedarfsgerecht erweitern und aktuell halten – mit wertvollem Wissen zu einem günstigen Einführungspreis.
Die Trainingsabonnements präsentieren ausschließlich Originalinhalte in bewährter video2brain-Qualität – führend in Technologie und Methodik sowie bei der Kompetenz der Trainer. Das Themenspektrum wird ständig erweitert und bietet derzeit Praxiswissen und Expertentipps für Kreativanwender, Fotografen, Softwareentwickler, Büroanwender, IT-Fachleute und technische Berufe. Die Standardvariante des Abonnements umfasst uneingeschränkte Online-Nutzung, die Premiumvariante zusätzliche Downloadmöglichkeit und Begleitmaterialien.
Die Trainingsabonnements bieten auf mehrfache Weise Investitions- und Planungssicherheit, denn die uneingeschränkt zugängliche video2brain-Trainingsbibliothek macht fit für die Zukunft. Neue Anforderungen erfüllen oder Qualifikationen erhöhen? Innerhalb der Abonnementslaufzeit geht das ohne Zusatzkosten. Sollen mehr Mitarbeiter trainieren können? Dann bleiben die Kosten klar kalkulierbar und in einem günstigen Rahmen. Wer neue Software testen möchte ohne gleich in teure Originalprogramme zu investieren, kann vorab anhand der Kurse das Leistungsvermögen und die Praxisrelevanz bestimmter Anwendungen recherchieren.
Die Trainingsabonnements ermöglichen selbstbestimmtes Lernen ohne Grenzen. Die Lernenden können selbst entscheiden, was für sie in ihrer persönlichen Situation wichtig ist, auch wenn dieses Wissen über mehrere Kurse hinweg verteilt ist. So lassen sich persönliche Ambitionen in die Tat umsetzen, Wissensvorsprung erarbeiten und Wettbewerbsvorteile erzielen – und gleichzeitig kommt die Freude am Lernen nicht zu kurz.
Premium-Abo: Zugriff auf alle DVD- und Online-Trainings inkl. Download und Rohmaterial: 298,-
Standard-Abo: Zugriff auf alle DVD- und Online-Trainings: 198,-
EDU-Abo: Zugriff auf alle DVD- und Online-Trainings für Schüler, Studierende, Auszubildende, Lehrer oder Professoren: 98,-
Ähnliche Artikel:
Berliner Photoshop Treff am 12.03 Webdesign-Podcast.de jetzt auch auf Facebook Gewinner Photoshop Workshop DVD
6 Minuten
In dieser kurzen Video-Podcast Folge möchte ich euch gerne drei interessante Online-Tools für Webdesigner vorstellen. Zwei davon habe ich die vergangenen Wochen bereits im Blog selbst vorgestellt.
Bei dem einen Tool handelt es sich um das von mir entwickelte my code stock.com – Hier der Artikel: my code stock.com Public Beta – Code Verwaltung / Management und Sicherung
Das andere Tool ist prefixmycss.com, hier der entsprechende Artikel: Schneller CSS3 für alle Browser schreiben mit CSS3 Prefix Generator (Webservice)
Bei dem dritten Tool handelt es sich um einen netten Online-Generator für CSS3-Codes (css3generator.com)
Podcast Info:
Titel: Interessante Online-Tools für Webdesigner
Autor: Pascal Bajorat
Länge: 6 Min
Dateigröße: 60 MB
Ähnliche Artikel:
Eigenen Firefox Theme erstellen CSS Vererbung und Kaskadierung (Teil 2) Google bringt eigenen URL Shortener goo.gl
Bei dem einen Tool handelt es sich um das von mir entwickelte my code stock.com – Hier der Artikel: my code stock.com Public Beta – Code Verwaltung / Management und Sicherung
Das andere Tool ist prefixmycss.com, hier der entsprechende Artikel: Schneller CSS3 für alle Browser schreiben mit CSS3 Prefix Generator (Webservice)
Bei dem dritten Tool handelt es sich um einen netten Online-Generator für CSS3-Codes (css3generator.com)
Podcast Info:
Titel: Interessante Online-Tools für Webdesigner
Autor: Pascal Bajorat
Länge: 6 Min
Dateigröße: 60 MB
Ähnliche Artikel:
Eigenen Firefox Theme erstellen CSS Vererbung und Kaskadierung (Teil 2) Google bringt eigenen URL Shortener goo.gl
4 Minuten
Am gestrigen Dienstag hat Microsoft den neuen Internet Explorer 9 veröffentlicht. Der unter den Webentwicklern eher verpönte Browser macht in der neuen Version einige große Schritte nach vorne. Microsoft scheint begriffen zu haben, dass es sich bei einem Webbrowser um eine wichtige Komponente des Betriebssystems handelt, die nicht vernachlässigt werden darf.
Der IE 9 kommt mit einer deutlich schnelleren JavaScript Engine daher, einer besseren Unterstützung von modernen Webstandards in Form von HTML5 und CSS3 und einer Hardwarebeschleunigung für schnellere Seitendarstellung. Gerade die Unterstützung der aktuellen Webstandards ist ein interessantes Thema, denn Microsoft hat diese zu Ungunsten der Abwärtskompatibilität von älteren Webseiten integriert. Das ist für Webentwickler nun nicht wirklich ein schock, denn vom Standpunkt eines Entwicklers sollten Webseiten sowieso einer gewissen Modernität entsprechen, aber das ist nicht immer der Standpunkt von Microsoft gewesen. Bereits im Internet Explorer 7 und 8 gab es Tools um eine bessere Abwärtskompatibilität zu gewährleisten, die Kompatibilitätsansicht, auch im Internet Explorer 9 ist dieser Modus wieder vorhanden.
Anzeige:
Nichtsdestotrotz ist der Internet Explorer 9 ein wichtiger und meiner Meinung nach auch guter Schritt in die Zukunft im Browser-Markt, ich habe den IE 9 zum surfen getestet und muss zugeben, dass er sich bis jetzt ganz gut geschlagen hat.
Beim ACID 3 Test schafft der Internet Explorer 9 ein Ergebnis von 95 von 100 Punkten zum Vergleich Google Chrome und Opera bringen es auf 100. Der Internet Explorer 8 fiel bei dem Test gänzlich durch und erreichte nur 20 Punkte, aus dieser Sicht ein großer Fortschritt.
Hier ein kleines Video des Internet Explorer, er durchläuft die ACID 1-3 Tests und das SunSpider JavaScript Benchmarking:
Microsoft Internet Explorer 9 from Pascal Bajorat on Vimeo.
In dem zweiten Video gehe ich kurz auf ein paar Funktion des Internet Explorer 9 ein und stelle ihn euch vor:
Microsoft Internet Explorer 9 – Testbericht from Pascal Bajorat on Vimeo.
Weitere lesenswerte Testberichte, Videos und Bilder gibt es in dem Artikel von Golem.de
Ähnliche Artikel:
Must have AddOns für den Mozilla Firefox Piwik die OpenSource alternative zu Google Analytics W3C stellt das neue HTML5 Logo vor
Der IE 9 kommt mit einer deutlich schnelleren JavaScript Engine daher, einer besseren Unterstützung von modernen Webstandards in Form von HTML5 und CSS3 und einer Hardwarebeschleunigung für schnellere Seitendarstellung. Gerade die Unterstützung der aktuellen Webstandards ist ein interessantes Thema, denn Microsoft hat diese zu Ungunsten der Abwärtskompatibilität von älteren Webseiten integriert. Das ist für Webentwickler nun nicht wirklich ein schock, denn vom Standpunkt eines Entwicklers sollten Webseiten sowieso einer gewissen Modernität entsprechen, aber das ist nicht immer der Standpunkt von Microsoft gewesen. Bereits im Internet Explorer 7 und 8 gab es Tools um eine bessere Abwärtskompatibilität zu gewährleisten, die Kompatibilitätsansicht, auch im Internet Explorer 9 ist dieser Modus wieder vorhanden.
Anzeige:
Nichtsdestotrotz ist der Internet Explorer 9 ein wichtiger und meiner Meinung nach auch guter Schritt in die Zukunft im Browser-Markt, ich habe den IE 9 zum surfen getestet und muss zugeben, dass er sich bis jetzt ganz gut geschlagen hat.
Beim ACID 3 Test schafft der Internet Explorer 9 ein Ergebnis von 95 von 100 Punkten zum Vergleich Google Chrome und Opera bringen es auf 100. Der Internet Explorer 8 fiel bei dem Test gänzlich durch und erreichte nur 20 Punkte, aus dieser Sicht ein großer Fortschritt.
Hier ein kleines Video des Internet Explorer, er durchläuft die ACID 1-3 Tests und das SunSpider JavaScript Benchmarking:
Microsoft Internet Explorer 9 from Pascal Bajorat on Vimeo.
In dem zweiten Video gehe ich kurz auf ein paar Funktion des Internet Explorer 9 ein und stelle ihn euch vor:
Microsoft Internet Explorer 9 – Testbericht from Pascal Bajorat on Vimeo.
Weitere lesenswerte Testberichte, Videos und Bilder gibt es in dem Artikel von Golem.de
Ähnliche Artikel:
Must have AddOns für den Mozilla Firefox Piwik die OpenSource alternative zu Google Analytics W3C stellt das neue HTML5 Logo vor
15 Minuten
WordPress bietet einen MultiSite / Blognetzwerk Installations-Modus, dieser ermöglicht es mehrere Seiten mit nur einer WordPress Installation zu verwalten. Dabei hat jede Seite ein eigenes Dashboard und funktioniert auch an sich wie ein eigenständiger Blog. Dieser Modus erleichtert dabei die Wartung der entsprechenden Blogs ungemein, denn es muss nur noch eine WordPress Installation gepflegt werden, dass heißt:
Für viele Seiten nur noch ein WordPress Update
Plugins müssen nur noch einmal installiert und geupdatet werden und sind in allen Seiten verfügbar
Ein WordPress Backend für alle Seiten
In dieser Podcast-Folge möchte ich euch zeigen, wie ihr WordPress im MultiSite / Blognetzwerk Modus installiert.
Wer das ganze noch einmal nachlesen möchte findet den entsprechenden Artikel hier: WordPress Multisite (MU) installieren und konfigurieren
Du möchtest noch mehr über WordPress erfahren und lernen? Dann schau dir doch einmal mein achtstündiges WordPress-Video-Training an. Es behandelt die verschiedensten Themen rund um WordPress praxisnah und gut verständlich, wie z.B. Theme-Erstellung, MultiSite / Blognetzwerk, eigene Plugins, Custom-Post-Types, Suchmaschinenoptimierung und vieles mehr: WordPress-Video-Training von Pascal Bajorat
Dieser Podcast ist die 18 Folge vom Webdesign-Podcast.de und gleichzeitig auch das erste Video-Training auf WordPressTutorials.de
Podcast Info:
Titel: WordPress 3.1 MultiSite / Blognetzwerk Installation
Autor: Pascal Bajorat
Länge: 16 Min
Dateigröße: 107MB
WordPress 3.1 MultiSite Installation from Pascal Bajorat on Vimeo.
In diesem Video erkläre ich euch, wie ihr WordPress in der Version 3.1 im MultiSite Modus installieren und verwenden könnt.
Ähnliche Artikel:
SASS – CSS Tag WordPress erscheint in der Version 3.0.3 WordPress Erfinder Automattic bringt umfangreichen WordPress Backup Service – VaultPress Testbericht
Für viele Seiten nur noch ein WordPress Update
Plugins müssen nur noch einmal installiert und geupdatet werden und sind in allen Seiten verfügbar
Ein WordPress Backend für alle Seiten
In dieser Podcast-Folge möchte ich euch zeigen, wie ihr WordPress im MultiSite / Blognetzwerk Modus installiert.
Wer das ganze noch einmal nachlesen möchte findet den entsprechenden Artikel hier: WordPress Multisite (MU) installieren und konfigurieren
Du möchtest noch mehr über WordPress erfahren und lernen? Dann schau dir doch einmal mein achtstündiges WordPress-Video-Training an. Es behandelt die verschiedensten Themen rund um WordPress praxisnah und gut verständlich, wie z.B. Theme-Erstellung, MultiSite / Blognetzwerk, eigene Plugins, Custom-Post-Types, Suchmaschinenoptimierung und vieles mehr: WordPress-Video-Training von Pascal Bajorat
Dieser Podcast ist die 18 Folge vom Webdesign-Podcast.de und gleichzeitig auch das erste Video-Training auf WordPressTutorials.de
Podcast Info:
Titel: WordPress 3.1 MultiSite / Blognetzwerk Installation
Autor: Pascal Bajorat
Länge: 16 Min
Dateigröße: 107MB
WordPress 3.1 MultiSite Installation from Pascal Bajorat on Vimeo.
In diesem Video erkläre ich euch, wie ihr WordPress in der Version 3.1 im MultiSite Modus installieren und verwenden könnt.
Ähnliche Artikel:
SASS – CSS Tag WordPress erscheint in der Version 3.0.3 WordPress Erfinder Automattic bringt umfangreichen WordPress Backup Service – VaultPress Testbericht
24 Minuten
Hier ist ein netts Tutorial von Patrick Lohmann, der die folgende Podcast-Folge als Gastautor / Podcaster für uns aufgenommen hat: Schoko-Text mit Bisskante – Photoshop
Arbeitsdatei als PSD-File (205kb)
Podcast Info:
Titel: Schoko-Text mit Photoshop
Autor: Patrick Lohmann
Länge: 23 Min
Dateigröße: 90MB
Photoshop: Schoko-Text from Pascal Bajorat on Vimeo.
Über den Autor:
Mein Name ist Patrick Lohmann, bin 22 Jahre jung und im Bereich Print & Webmedien als Freelancer und Medienkünstler unterwegs.
Unter anderem erstelle ich Artworks oder gebe mein Wissen und die gesammelten Erfahrung an andere weiter. Ich bezeichne mich selber als Medienjongleur, da ich eigentlich vor nichts halt mache. Mit großem Interesse, Spaß und viel Energie gehe ich meiner Leidenschaft nach.
Text aus Steinen erstellen
Ähnliche Artikel:
Candy / Plastik Navigation Haare freistellen (Alpha-Kanal) Photoshop Logo aufbessern in Photoshop (Video)
Arbeitsdatei als PSD-File (205kb)
Podcast Info:
Titel: Schoko-Text mit Photoshop
Autor: Patrick Lohmann
Länge: 23 Min
Dateigröße: 90MB
Photoshop: Schoko-Text from Pascal Bajorat on Vimeo.
Über den Autor:
Mein Name ist Patrick Lohmann, bin 22 Jahre jung und im Bereich Print & Webmedien als Freelancer und Medienkünstler unterwegs.
Unter anderem erstelle ich Artworks oder gebe mein Wissen und die gesammelten Erfahrung an andere weiter. Ich bezeichne mich selber als Medienjongleur, da ich eigentlich vor nichts halt mache. Mit großem Interesse, Spaß und viel Energie gehe ich meiner Leidenschaft nach.
Text aus Steinen erstellen
Ähnliche Artikel:
Candy / Plastik Navigation Haare freistellen (Alpha-Kanal) Photoshop Logo aufbessern in Photoshop (Video)
20 Minuten
Die Integration von Sozialen Netzen in Webseiten zeigt sich stetig wachsender Beliebtheit und mittlerweile auch Notwendigkeit. Dies lässt sich alleine schon anhand dessen fest machen, dass die vier Artikel zur Integration von Social Networks auf dieser Webseite auch die meistgelesensten Artikel generell sind.
Mehr Kundenbindung und Kundenloyalität durch Social Media Marketing
Facebook gefällt mir / like Button in Webseite einbinden
Facebook “gefällt mir” / like und Open Graph
Twitter ReTweet Button in Webseite integrieren
Besonders die drei Artikel in denen es um die Integration direkt geht sind bei auch so beliebt, dass ich mich entschlossen habe, die wichtigsten Aspekte dieser drei Artikel in einem Podcast festzuhalten. Wer tiefergreifende Informationen möchte, der klickt sich zusätzlich einfach durch die Linkliste (oben).
Podcast Info:
Titel: Social Media Integration in Webseiten
Autor: Pascal Bajorat
Länge: 21 Min
Dateigröße: 200MB
Video-Podcast in HD 720p über Vimeo ansehen:
Social Media Integration in Webseiten from Pascal Bajorat on Vimeo.
Ähnliche Artikel:
Webdesign-Podcast.de jetzt auch auf Facebook Facebook gefällt mir / like Button in Webseite einbinden Twitter ReTweet Button in Webseite integrieren
Mehr Kundenbindung und Kundenloyalität durch Social Media Marketing
Facebook gefällt mir / like Button in Webseite einbinden
Facebook “gefällt mir” / like und Open Graph
Twitter ReTweet Button in Webseite integrieren
Besonders die drei Artikel in denen es um die Integration direkt geht sind bei auch so beliebt, dass ich mich entschlossen habe, die wichtigsten Aspekte dieser drei Artikel in einem Podcast festzuhalten. Wer tiefergreifende Informationen möchte, der klickt sich zusätzlich einfach durch die Linkliste (oben).
Podcast Info:
Titel: Social Media Integration in Webseiten
Autor: Pascal Bajorat
Länge: 21 Min
Dateigröße: 200MB
Video-Podcast in HD 720p über Vimeo ansehen:
Social Media Integration in Webseiten from Pascal Bajorat on Vimeo.
Ähnliche Artikel:
Webdesign-Podcast.de jetzt auch auf Facebook Facebook gefällt mir / like Button in Webseite einbinden Twitter ReTweet Button in Webseite integrieren
23 Minuten
In dieser Podcast-Folge möchte ich euch einige Techniken zur Optimierung der Ladezeit von Webseiten zeigen. Die Techniken sind einfach einzusetzen und effizient, des Weiteren erzähle ich euch ein paar Worte über das neue Apache Modul von Google: mod_pagespeed.
Nach unten springen, um das Video zu sehen.
Googles mod_pagespeed umfasst mehrere Anpassungen der Apache Konfiguration, die das Laden von Webseiten beschleunigen sollen. Dadurch werden Optimierungen umgesetzt, die Google seit geraumer Zeit im Rahmen seiner Pagespeed-Initiative propagiert. Das Apache Modul steht unter einer Open Source Lizenz und ist somit für jeden frei nutzbar. Jeder der über einen eigenen Root-Server verfügt, kann das Modul z.B. als rpm ganz einfach installieren. Wer seine Webseite auf einem Shared-Webspace hostet, hat es hier nicht ganz so einfach, denn in diesem Fall seid ihr auf euren Hoster angewiesen und das er dieses Modul installiert. mod_pagespeed Video auf YouTube
Kommen wir nun zu den Optimierungs-Möglichkeiten die ihr relativ einfach für eure eigene Webseite umsetzen könnt:
HTTP-Requests reduzieren
Ein HTTP-Request ist eine einfache Anfrage an den Webserver z.B. eine GET oder POST Methode. Anders gesagt, wenn ihr z.B. eine CSS oder JavaScript Datei via oder Tag einbindet wird damit ein HTTP-Request ausgelöst. Das selbe gilt auch für das einbinden von Bildern via Tag oder wenn Bilder in der CSS-Datei mit Hilfe von background-image eingebunden werden, hierbei wird ebenfalls jedesmal ein HTTP-Request ausgeführt.
Je mehr HTTP-Requests eine Webseite ausführt um komplett geladen zu werden, umso langsamer wird sie, daher macht es Sinn diese HTTP-Requests auf ein Minimum zu reduzieren. Welche Möglichkeiten es da gibt, zeige ich euch in den folgenden Beispielen:
Zusammenlegen von CSS und JavaScript Dateien:
Eine Möglichkeit um HTTP-Requests zu reduzieren ist z.B. wenn ihr mehrere CSS und / oder JavaScript Dateien habt die in einzelne Dateien aufgeteilt sind, aber trotzdem auf allen Seiten geladen werden, diese einfach zusammenzulegen.
Als konkretes Beispiel stellen wir uns vor, dass wir in unserer Webseite die normale CSS und JavaScript Datei und zusätzlich noch zwei JavaScript Dateien und eine CSS Datei von der Lightbox integriert haben. So könnten wir nun die zwei CSS Dateien zu einer Datei bündeln und auch die insgesamt drei JavaScript Dateien in einer einzigen Datei zusammenführen. Auf diese einfache Art und Weise hätten wir bei diesem Beispiel drei HTTP-Requests gespart.
CSS Media Types in einer Datei bündeln:
Wenn ihr auf eurer Webseite mehrere CSS-Dateien mit unterschiedlichen Media Types verwendet besteht die Möglichkeit diese in einer Datei zu bündeln (wie oben bereits erwähnt). Hier gilt allerdings Obacht, denn eine Handheld CSS wird normalerweise nur geladen, wenn die Webseite auch mit einem mobilen Endgerät aufgerufen wird. Werden diese Dateien nun gebündelt und die Handheld CSS enthält z.B. über 50-100 Zeilen Code extra für Mobilgeräte, so wird dieser Code jedes mal mitgeladen auch wenn die Seite gar nicht von einem mobilen Endgerät geöffnet wurde. Würde unsere Handheld CSS nun aber z.B. nur aus 5-10 Zeilen bestehen, so wäre es kein Probleme diese in die normale Screen CSS mit aufzunehmen.
Hier ein Beispiel wie eine CSS-Datei mit mehreren Media Types auszusehen hat:
/* Der allgemeine CSS Code */ body{font-weight:bold;} @media print { /* StyleSheet für den Druck der Webseite */ } @media handheld { /* StyleSheet für Mobilgeräte */ }
Grafiken zusammenfügen zu einer großen Grafik:
Bei einem sehr grafiklastigen Layout habt ihr in der Regel viele Bilder die in der CSS Datei via background eingebunden werden. Das verursacht nicht nur eine enorme Menge an HTTP-Requests, sonden bedeutet auch eine Erhöhung der Gesamtgröße aller Bilder zusammen, z.B. wenn in jeder Grafik das ICC-Profil mit eingebunden wird.
Abhilfe schafft hier folgende Methode: Ihr verfrachtet soweit wie möglich alle PNG Bilder in ein großes PNG, alle JPG Bilder in eine einzige große JPG Datei usw. Hierbei sollte natürlich beachtet werden, dass sinvoll aufgeteilt wird: Nur weil z.B. eine PNG 24-Datei vorhanden ist die Transparenzen benötigt, sollten nicht auch die restlichen JPG Bilder in eine große PNG Datei gebündelt werden, denn ein PNG ist von der Dateigröße später viel größer als ein JPG es mit allen Grafiken wäre. In so einem Fall bleibt die PNG dann einfach als Einzelgrafik weiter bestehen bzw. wird mit anderen PNG-24 Grafiken gebündelt, sowie alle JPG Bilder in einer JPG Datei zusammengefasst werden.
Wenn ihr dann später eine Grafik aus diesem großen Paket als Hintergrund für einen Div-Container verwenden wollt, so könnt ihr via CSS background-position die Hintergrundgrafik soweit verschieben, dass auch nur der gewünschte Bereich zu sehen ist.
Durch diese Methode spart ihr euch eine Menge HTTP-Requests und reduziert die Dateigröße der Grafiken, da nicht in jeder Grafik aufs neue (z.B.) das ICC-Profil eingebunden wird.
Beispiel für CSS Background-Position:
/* 200px 250px ( X / Y ) */ background:url(images/layout.jpg) no-repeat 200px 250px; Grafiken richtig komprimieren und speichern
Ihr solltet Grafiken im richtigen Format und mit entsprechend passender Kompression speichern. So sollte ein kleines Icon mit z.B. 64 Farben nicht als JPG gespeichert werden, sondern als GIF (bis zu 256 Farben möglich) Datei.
Des Weiteren bietet euch das JPG Format die Möglichkeit Bilder mit einem bestimmten Qualitätsfaktor (Kompression) zu speichern um die Dateigröße zu veringern.
Sehr hilfreich ist hier auch der Dialog „Für Web und Geräte speichern…“ in Photoshop, mehr dazu im Podcast.
Podcast Info:
Titel: Ladezeiten-Optimierung von Webseiten
Autor: Pascal Bajorat
Länge: 23 Min
Dateigröße: 120MB
Video-Podcast in HD 720p über Vimeo ansehen:
Ladezeiten-Optimierung von Webseiten from Pascal Bajorat on Vimeo.
Ähnliche Artikel:
Header-Collage Navigation in Photoshop Webdesign-Podcast hat ein neues Zuhause
Nach unten springen, um das Video zu sehen.
Googles mod_pagespeed umfasst mehrere Anpassungen der Apache Konfiguration, die das Laden von Webseiten beschleunigen sollen. Dadurch werden Optimierungen umgesetzt, die Google seit geraumer Zeit im Rahmen seiner Pagespeed-Initiative propagiert. Das Apache Modul steht unter einer Open Source Lizenz und ist somit für jeden frei nutzbar. Jeder der über einen eigenen Root-Server verfügt, kann das Modul z.B. als rpm ganz einfach installieren. Wer seine Webseite auf einem Shared-Webspace hostet, hat es hier nicht ganz so einfach, denn in diesem Fall seid ihr auf euren Hoster angewiesen und das er dieses Modul installiert. mod_pagespeed Video auf YouTube
Kommen wir nun zu den Optimierungs-Möglichkeiten die ihr relativ einfach für eure eigene Webseite umsetzen könnt:
HTTP-Requests reduzieren
Ein HTTP-Request ist eine einfache Anfrage an den Webserver z.B. eine GET oder POST Methode. Anders gesagt, wenn ihr z.B. eine CSS oder JavaScript Datei via oder Tag einbindet wird damit ein HTTP-Request ausgelöst. Das selbe gilt auch für das einbinden von Bildern via Tag oder wenn Bilder in der CSS-Datei mit Hilfe von background-image eingebunden werden, hierbei wird ebenfalls jedesmal ein HTTP-Request ausgeführt.
Je mehr HTTP-Requests eine Webseite ausführt um komplett geladen zu werden, umso langsamer wird sie, daher macht es Sinn diese HTTP-Requests auf ein Minimum zu reduzieren. Welche Möglichkeiten es da gibt, zeige ich euch in den folgenden Beispielen:
Zusammenlegen von CSS und JavaScript Dateien:
Eine Möglichkeit um HTTP-Requests zu reduzieren ist z.B. wenn ihr mehrere CSS und / oder JavaScript Dateien habt die in einzelne Dateien aufgeteilt sind, aber trotzdem auf allen Seiten geladen werden, diese einfach zusammenzulegen.
Als konkretes Beispiel stellen wir uns vor, dass wir in unserer Webseite die normale CSS und JavaScript Datei und zusätzlich noch zwei JavaScript Dateien und eine CSS Datei von der Lightbox integriert haben. So könnten wir nun die zwei CSS Dateien zu einer Datei bündeln und auch die insgesamt drei JavaScript Dateien in einer einzigen Datei zusammenführen. Auf diese einfache Art und Weise hätten wir bei diesem Beispiel drei HTTP-Requests gespart.
CSS Media Types in einer Datei bündeln:
Wenn ihr auf eurer Webseite mehrere CSS-Dateien mit unterschiedlichen Media Types verwendet besteht die Möglichkeit diese in einer Datei zu bündeln (wie oben bereits erwähnt). Hier gilt allerdings Obacht, denn eine Handheld CSS wird normalerweise nur geladen, wenn die Webseite auch mit einem mobilen Endgerät aufgerufen wird. Werden diese Dateien nun gebündelt und die Handheld CSS enthält z.B. über 50-100 Zeilen Code extra für Mobilgeräte, so wird dieser Code jedes mal mitgeladen auch wenn die Seite gar nicht von einem mobilen Endgerät geöffnet wurde. Würde unsere Handheld CSS nun aber z.B. nur aus 5-10 Zeilen bestehen, so wäre es kein Probleme diese in die normale Screen CSS mit aufzunehmen.
Hier ein Beispiel wie eine CSS-Datei mit mehreren Media Types auszusehen hat:
/* Der allgemeine CSS Code */ body{font-weight:bold;} @media print { /* StyleSheet für den Druck der Webseite */ } @media handheld { /* StyleSheet für Mobilgeräte */ }
Grafiken zusammenfügen zu einer großen Grafik:
Bei einem sehr grafiklastigen Layout habt ihr in der Regel viele Bilder die in der CSS Datei via background eingebunden werden. Das verursacht nicht nur eine enorme Menge an HTTP-Requests, sonden bedeutet auch eine Erhöhung der Gesamtgröße aller Bilder zusammen, z.B. wenn in jeder Grafik das ICC-Profil mit eingebunden wird.
Abhilfe schafft hier folgende Methode: Ihr verfrachtet soweit wie möglich alle PNG Bilder in ein großes PNG, alle JPG Bilder in eine einzige große JPG Datei usw. Hierbei sollte natürlich beachtet werden, dass sinvoll aufgeteilt wird: Nur weil z.B. eine PNG 24-Datei vorhanden ist die Transparenzen benötigt, sollten nicht auch die restlichen JPG Bilder in eine große PNG Datei gebündelt werden, denn ein PNG ist von der Dateigröße später viel größer als ein JPG es mit allen Grafiken wäre. In so einem Fall bleibt die PNG dann einfach als Einzelgrafik weiter bestehen bzw. wird mit anderen PNG-24 Grafiken gebündelt, sowie alle JPG Bilder in einer JPG Datei zusammengefasst werden.
Wenn ihr dann später eine Grafik aus diesem großen Paket als Hintergrund für einen Div-Container verwenden wollt, so könnt ihr via CSS background-position die Hintergrundgrafik soweit verschieben, dass auch nur der gewünschte Bereich zu sehen ist.
Durch diese Methode spart ihr euch eine Menge HTTP-Requests und reduziert die Dateigröße der Grafiken, da nicht in jeder Grafik aufs neue (z.B.) das ICC-Profil eingebunden wird.
Beispiel für CSS Background-Position:
/* 200px 250px ( X / Y ) */ background:url(images/layout.jpg) no-repeat 200px 250px; Grafiken richtig komprimieren und speichern
Ihr solltet Grafiken im richtigen Format und mit entsprechend passender Kompression speichern. So sollte ein kleines Icon mit z.B. 64 Farben nicht als JPG gespeichert werden, sondern als GIF (bis zu 256 Farben möglich) Datei.
Des Weiteren bietet euch das JPG Format die Möglichkeit Bilder mit einem bestimmten Qualitätsfaktor (Kompression) zu speichern um die Dateigröße zu veringern.
Sehr hilfreich ist hier auch der Dialog „Für Web und Geräte speichern…“ in Photoshop, mehr dazu im Podcast.
Podcast Info:
Titel: Ladezeiten-Optimierung von Webseiten
Autor: Pascal Bajorat
Länge: 23 Min
Dateigröße: 120MB
Video-Podcast in HD 720p über Vimeo ansehen:
Ladezeiten-Optimierung von Webseiten from Pascal Bajorat on Vimeo.
Ähnliche Artikel:
Header-Collage Navigation in Photoshop Webdesign-Podcast hat ein neues Zuhause
13 Minuten
Der erste Podcast von Tobias: In dieser Podcast-Folge möchte ich euch zeigen wie einfach ihr mit Photoshop einen Pastel-Look/Cross-Process Look erzeugen könnt.
Ich erkläre euch dabei 2 Methoden. Einmal die Erstellung über die Einstellungsebenen und zusätzlich mit fertigen Settings aus einem Filter von NIK-Software.
Das Video ist nicht das einzige was Ihr dazu bekommt, es gibt zusätzlich auch noch die Bearbeitung der Bilder als Aktion, sodass ihr ganz einfach die gezeigten Effekte nachmachen könnt und natürlich auch verändern könnt.
Die Aktion könnt ihr ganz einfach durch einen Doppelklick auf die Datei installieren und somit nutzen. Bei Fragen und Problemen meldet euch bitte in den Kommentaren:
Aktionen herunterladen (4Kb)
Podcast Info:
Titel: Pastel-Look/CrossProcess Look mit Photoshop, einfach und schnell
Autor: Tobias Bechtle
Länge: 14min
Dateigröße: 84MB
Video-Podcast in HD 720p über Vimeo ansehen:
Pastel-Look/Cross-Process Look from Pascal Bajorat on Vimeo.
Ähnliche Artikel:
Icon mit Adobe Photoshop Haare freistellen (Alpha-Kanal) Photoshop Rustikale Elemente in Photoshop
Ich erkläre euch dabei 2 Methoden. Einmal die Erstellung über die Einstellungsebenen und zusätzlich mit fertigen Settings aus einem Filter von NIK-Software.
Das Video ist nicht das einzige was Ihr dazu bekommt, es gibt zusätzlich auch noch die Bearbeitung der Bilder als Aktion, sodass ihr ganz einfach die gezeigten Effekte nachmachen könnt und natürlich auch verändern könnt.
Die Aktion könnt ihr ganz einfach durch einen Doppelklick auf die Datei installieren und somit nutzen. Bei Fragen und Problemen meldet euch bitte in den Kommentaren:
Aktionen herunterladen (4Kb)
Podcast Info:
Titel: Pastel-Look/CrossProcess Look mit Photoshop, einfach und schnell
Autor: Tobias Bechtle
Länge: 14min
Dateigröße: 84MB
Video-Podcast in HD 720p über Vimeo ansehen:
Pastel-Look/Cross-Process Look from Pascal Bajorat on Vimeo.
Ähnliche Artikel:
Icon mit Adobe Photoshop Haare freistellen (Alpha-Kanal) Photoshop Rustikale Elemente in Photoshop
19 Minuten
In diesem Tutorial möchte ich euch zeigen wie ihr eine einfache Navigation in Photoshop erstellen könnt. Die Navigation ist vom Stil her so angelegt, dass ihr relativ einfach auch mit anderen Farbkombinationen experimentieren könnt.
Hier könnt ihr die Beispieldateien herunterladen…
In Kooperation mit Terrashop präsentieren wir euch in dieser Podcast-Folge das Buch Little Boxes Teil 0 von Peter Müller erschienen im Verlag Markt und Technik.
Auszug aus dem Buch:
Webseiten bauen beginnt nicht erst mit HTML & CSS. Sondern mit dem Wissen um den richtigen Einsatz von Text und Bild. Mit dem Wissen um den richtigen Aufbau Ihrer Website, damit Besucher und Suchmaschinen gern vorbeischauen. Mit der passenden Auswahl von Technologie, Webhoster und Werkzeugen. Und mit einem guten Plan für die Umsetzung Ihres Vorhabens. Kurz: Webseiten bauen beginnt mit den Grundlagen. Bei Null. Wie dieses Buch. weitere Informationen…
Das Buch könnt ihr bei Terrashop im Rahmen einer Aktion für 4,95€ bekommen anstatt der üblichen 17,95€, da kann man also nicht viel falsch machen -> Little Boxes Teil 0 auf Terrashop.de ansehen
Ein Exemplar des Buches könnt ihr hier bei uns im Rahmen einer Verlosung gewinnen.
Podcast-Info:
Titel: Navigation für Webseiten
Autor: Sascha Rudolph
Länge: ca. 19 Min
Dateigröße: 85 MB
Video-Podcast in HD 720p über Vimeo ansehen:
Navigation erstellen in Photoshop from Pascal Bajorat on Vimeo.
Ähnliche Artikel:
Header-Collage Verlosung: 4x Photoshop Workshop DVD – Webdesign Panorama mit Photoshop erstellen
Hier könnt ihr die Beispieldateien herunterladen…
In Kooperation mit Terrashop präsentieren wir euch in dieser Podcast-Folge das Buch Little Boxes Teil 0 von Peter Müller erschienen im Verlag Markt und Technik.
Auszug aus dem Buch:
Webseiten bauen beginnt nicht erst mit HTML & CSS. Sondern mit dem Wissen um den richtigen Einsatz von Text und Bild. Mit dem Wissen um den richtigen Aufbau Ihrer Website, damit Besucher und Suchmaschinen gern vorbeischauen. Mit der passenden Auswahl von Technologie, Webhoster und Werkzeugen. Und mit einem guten Plan für die Umsetzung Ihres Vorhabens. Kurz: Webseiten bauen beginnt mit den Grundlagen. Bei Null. Wie dieses Buch. weitere Informationen…
Das Buch könnt ihr bei Terrashop im Rahmen einer Aktion für 4,95€ bekommen anstatt der üblichen 17,95€, da kann man also nicht viel falsch machen -> Little Boxes Teil 0 auf Terrashop.de ansehen
Ein Exemplar des Buches könnt ihr hier bei uns im Rahmen einer Verlosung gewinnen.
Podcast-Info:
Titel: Navigation für Webseiten
Autor: Sascha Rudolph
Länge: ca. 19 Min
Dateigröße: 85 MB
Video-Podcast in HD 720p über Vimeo ansehen:
Navigation erstellen in Photoshop from Pascal Bajorat on Vimeo.
Ähnliche Artikel:
Header-Collage Verlosung: 4x Photoshop Workshop DVD – Webdesign Panorama mit Photoshop erstellen
