Webdesign-Podcast
von Pascal Bajorat
Um sich einen Audio-Podcast anzuhören, fahren Sie mit der Maus über den Titel und klicken auf "Wiedergabe". Öffnen Sie iTunes, um Podcasts zu laden und zu abonnieren.
Podcast-Beschreibung
Webdesign-Podcast.de ist der Podcast fuer Webdesigner und Grafiker. Wir bieten stetig neue und interessante News zu relevanten Themen rund ums Web. Auf unserer Webseite erscheinen woechentlich neue Artikel, Tutorials und News. Weitere Informationen, Text / Bild Tutorials und die Downloads zu den Podcast-Folgen findest du auf unserer Webseite www.webdesign-podcast.de
| Name | Beschreibung | Erschienen | Preis | ||
|---|---|---|---|---|---|
| 1 | VideoCustom-Post-Types in WordPress mit eigener Taxonomie – mit Video-Training | 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. 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 Produktv | 19.3.12 | Kostenlos | In iTunes ansehen |
| 2 | VideosimpleCE (mini CMS) Workshop – so werden statische Webseiten schnell und einfach bearbeitbar | 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: http://simplece.com http://www.pascal-bajorat.com/simplece-mini-cms/874/ http://www.webdesign-podcast.de/2012/01/31/simplece-mini-cms-jetzt-auf-codecanyon/ http://www.webdesign-podcast.de/2012/01/31/simplece-mini-cms-jetzt-auf-codecanyon/ | 6.3.12 | Kostenlos | In iTunes ansehen |
| 3 | VideoHTML5 & CSS3 Video-Training – Animationen mit CSS3 | 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. 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 Kursangebo[...] | 13.1.12 | Kostenlos | In iTunes ansehen |
| 4 | VideoKomplette Webseite in HTML5 und CSS3 programmieren + AJAX Funktionen – Tutorial | 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 | 4.7.11 | Kostenlos | In iTunes ansehen |
| 5 | VideoGroßes Gewinnspiel – 1 Jahr Webdesign Podcast – Wir feiern Geburtstag | Es ist nun genau ein Jahr her, dass Sascha und ich auf die Idee zum Webdesign-Podcast.de gekommen sind, diesen ersten Geburtstag moechten wir mit euch feiern und zwar mit einem grossen Gewinnspiel, mit vielen Preisen in einem Gesamtwert von ueber 500 Euro. | 15.5.11 | Kostenlos | In iTunes ansehen |
| 6 | VideoInteressante Online-Tools für Webdesigner | 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 | 10.5.11 | Kostenlos | In iTunes ansehen |
| 7 | VideoMicrosoft Internet Explorer 9 ist da | 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. 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 | 16.3.11 | Kostenlos | In iTunes ansehen |
| 8 | VideoWordPress 3.1 MultiSite / Blognetzwerk Installation | 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. | 16.3.11 | Kostenlos | In iTunes ansehen |
| 9 | VideoSchoko-Text mit Photoshop | 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. | 5.2.11 | Kostenlos | In iTunes ansehen |
| 10 | VideoSocial Media Integration in Webseiten (Facebook / Twitter) | 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. | 31.1.11 | Kostenlos | In iTunes ansehen |
| 11 | VideoLadezeiten-Optimierung von Webseiten | 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 s[...] | 10.11.10 | Kostenlos | In iTunes ansehen |
| 12 | VideoPastel-Look/Cross-Process Look | 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. | 4.11.10 | Kostenlos | In iTunes ansehen |
| 13 | VideoNavigation in Photoshop | 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. | 27.10.10 | Kostenlos | In iTunes ansehen |
| 14 | VideoHeader-Collage | In diesem Tutorial möchte ich euch erklären, wie ihr eine Collage für den Header eurer Webseite erstellt. Es handelt sich dabei um einen Header, den ihr z.B. für eine Reise- / Urlaubsseite verwenden könnt bzw. durch die in dem Tutorial verwendete Burg eher für ein mystisch wirkendes Portfolio. Natürlich könnt ihr statt der Bug auch etwas anderes nehmen und für euren Zweck anpassen. Ich werde euch zeigen wie ihr einen Wasser-Hintergrund anlegt und eine Insel mit Felsen die aus dem Meer ragen erstellt. Für das Tutorial verwende ich folgende Stockgrafiken aus dem Bildarchiv von StockXchange – sxc.hu: http://www.sxc.hu/photo/1253789 http://www.sxc.hu/photo/1310577 http://www.sxc.hu/photo/1287251 Die Dateien zum Nachbauen findet ihr hier als *.zip Datei (64MB). Es sind zwei *.psd Dateien enthalten, die eine die ich zur Vorschau erstellt habe und die andere die ich während der Podcast-Folge erstellt habe. Tutorial Dateien 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: Header-Collage für Webseite Autor: Sascha Rudolph Länge: ca. 27 Min Dateigröße: 160 MB Video-Podcast in HD 720p über Vimeo ansehen: Header-Collage für Webseite from Pascal Bajorat on Vimeo. | 21.10.10 | Kostenlos | In iTunes ansehen |
| 15 | VideoPanorama mit Photoshop erstellen | In diesem Tutorial möchte ich euch zeigen, wie ihr in Adobe Photoshop mehrere Einzelbilder zu einem großen Panorama zusammenfügen könnt. Danach gehe ich noch einmal auf die Nachbearbeitung der Bilder ein um ein perfektes Panorama zu schaffen. 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 Podcast-Info: Titel: Panorama mit Photoshop erstellen Autor: Sascha Rudolph Länge: ca. 11 Min Dateigröße: 76 MB Video-Podcast in HD 720p über Vimeo ansehen: Panorama erstellen in Photoshop from Pascal Bajorat on Vimeo. | 14.10.10 | Kostenlos | In iTunes ansehen |
| 16 | VideoHaare freistellen (Alpha-Kanal) Photoshop | In diesem Tutorial zeige ich euch, wie Ihr Haare in Photoshop mit Hilfe von Alpha Kanälen freistellen könnt. Wenn man erst einmal weiß, wie das ganze funktioniert es ist schnell gemacht, daher auch nur gut 6 Min Podcast. Zur Demonstrationszwecken verwende ich Stockbilder von sxc.hu Das Download-Paket mit den Beispieldateien folgt heute Abend, bis dahin viel Spaß mit dem Video. Rohmaterial / Stockmaterial von sxc.hu sowie die überarbeitete PSD-Datei Outtakes: Da wir natürlich auch jede Menge Spaß bei der Produktion unserer Podcast-Folgen haben, gibt es in dieser Folge zum ersten Mal ein paar Outtakes. Die Outtakes befinden sich wie gewohnt ganz am Ende der Folge, viel Spaß. Podcast-Info: Titel: Haare freistellen mit Alpha-Kanälen Autor: Sascha Rudolph Länge: ca. 6 Min Dateigröße: 46 MB Video-Podcast in HD 720p über Vimeo ansehen: Haare freistellen mit Photoshop from Pascal Bajorat on Vimeo. | 30.9.10 | Kostenlos | In iTunes ansehen |
| 17 | VideoCandy / Plastik Navigation | In diesem Tutorial möchte ich euch zeigen, wie ihr mit einfachen Mitteln eine Candy bzw. plastische Navigation erstellen könnt. Dieser Effekt lässt sich natürlich auch auf Buttons oder andere Elemente anwenden. Die Navigation habe ich mit Adobe Photoshop CS 4 erstellt. Das Tutorial zum nachlesen versteckt sich hinter diesem Link, Video gibt es in diesem Artikel Die PSD-Datei zum Tutorial: candy-plastik-navigation.psd Podcast-Info: Titel: Candy / Plastik Navigation mit Photoshop Autor: Pascal Bajorat Länge: ca. 10 Min Dateigröße: 59 MB Video-Podcast in HD 720p über Vimeo ansehen: Candy / Plastik Navigation mit Photoshop from Pascal Bajorat on Vimeo. | 23.9.10 | Kostenlos | In iTunes ansehen |
| 18 | VideoRustikale Elemente in Photoshop | In diesem Tutorial beschreibe ich, wie ihr in Photoshop rustikale Elemente schaffen könnt. Diese kann für Kopfbereiche (Header), oder als Seitenelemente für Webseiten verwendet werden. Auch in diesem Tutorial werden einige Basics erklärt, die für andere Effekte sehr nützlich sein können. Das Tutorial wurde in Photoshop CS3 erstellt. Alle Dateien, die Ihr zum Nachbauen benötigt, findet ihr hier als *.zip Datei. Sollten ihr dazu noch Fragen haben, könnt ihr uns einfach über unser Kontaktformular oder in der Kommentarfunktion anschreiben. Viel spaß! Das komplette Tutorial zum durchlesen findet ihr hier. Photoshop Dateien und Grundelemente als .zip Datei zum Nachbauen herunterladen 21MB Efeu Stock von sxc.hu Podcast-Info: Titel: Rustikale Elemente in Photoshop Autor: Sascha Rudolph Länge: ca. 25 Min Dateigröße: 76 MB Video-Podcast in HD 720p über Vimeo ansehen: Rustikale Elemente in Photoshop erstellen from Sascha Rudolph on Vimeo. | 7.9.10 | Kostenlos | In iTunes ansehen |
| 19 | VideoPiwik Analytics | In dieser Podcast-Folge möchte ich euch die Open-Source (GPL lizenzierte) Echtzeit-Webanalyse-Software Piwik vorstellen. Welche Möglichkeiten bietet die Software und worin bestehen die Vor- bzw. Nachteile zu Google Analytics. Wer weitere Informationen zu Piwik sucht, der kann sich durch den unten verlinkten Artikel lesen. Google Analytics ist eine sehr mächte Analyse Software um die Statistiken einer Webseite auszuwerten. Doch seit einigen Tagen gibt es eine mindestens genau so gute OpenSource Lösung namens Piwik. Piwik ist eine Open-Source (GPL lizenzierte) Echtzeit-Webanalyse-Software, die heruntergeladen werden und auf den eigenen Servern betrieben werden kann. Piwik bietet detaillierte Echtzeit-Berichte über die Besucher Ihrer Website, die genutzten Suchmaschinen und Suchbegriffe, die Sprache, Ihre beliebten Seiten, Herkunftsländer, SEO Ränge, und vieles mehr. Piwik lässt sich komfortable über ein Installations-Script innerhalb von 5-Minuten installieren… Den Artikel zu Piwik weiterlesen Podcast-Info: Titel: Piwik Analytics Autor: Pascal Bajorat Länge: ca. 9 Min Dateigröße: 76 MB Video-Podcast in HD 720p über Vimeo ansehen: Piwik Analytics, die OpenSource alternative zu Google Analytics from Pascal Bajorat on Vimeo. | 2.9.10 | Kostenlos | In iTunes ansehen |
| 20 | VideoSASS – CSS Tag | Wie schon im vorherigen Beitrag (CSS Vererbung und Kaskadierung) beschrieben, haben wir euch ein wenig über den CSS Tag von Tschitschereengreen am 7. August 2010 in Dresden berichtet. In diesem Artikel geht es um den zweiten Teil – Syntactically Awesome Stylesheets (SASS) von Christian Kaula. Ein Paar Informationen zum Autor gibt es natürlich wieder vorweg: Christian Kaula ist Diplom-Informatiker und bezeichnet sich selbst als “Lazy (Fauler) Coder”. Dies ist aber nicht als Nachteil zu sehen, ganz im Gegenteil, denn dadurch entdeckt er immer wieder interessante Tools, die Ihm, und auch Programmierern das Leben einfacher machen. Nach diesem kurzen Einstieg fangen wir jetzt an. Viel Spaß! Wir suchen für unseren Blog und Podcast Projekt Webdesign-Podcast.de Redakteure für den Blogbereich, wie auch für den Screencast Du bist begeisterter Webdesigner und kennst dich mit Layout-Programmen oder mit der Programmierung von Webseiten gut aus und möchtest dein Wissen nicht nur im dunklen Kämmerchen hüten? Dann bist du genau der richtige um uns bei unserem Webdesign-Podcast.de Projekt zu unterstützen. Wir möchten mit unserem Projekt Anfänger wie auch Profis in Sachen Webdesign immer wieder neue und interessante Themen liefern und kostenlose Weiterbildungs- und Lernmöglichkeiten schaffen. Hier erfährst du alles weitere… Den Artikel zu dieser Podcast Folge findet ihr hier. Du kannst die Präsentation auch im Original Vortrags PDF mit verfolgen. PDF hier downloaden! Podcast-Info: Titel: Syntactically Awesome Stylesheets (SASS) Autor: Pascal Bajorat Vortrag von: Christian Kaula Länge: ca. 61 Min Dateigröße: 154 MB Video-Podcast in HD 720p über Vimeo ansehen: Syntactically Awesome Stylesheets (SASS) from Pascal Bajorat on Vimeo. | 26.8.10 | Kostenlos | In iTunes ansehen |
| 21 | VideoCSS Vererbung und Kaskadierung | Am 07.08.2010 waren wir zu Gast zum CSS Tag von Tschitschereengreen in Dresden. Es standen zwei Vorträge auf dem Programm. Der Erste behandelte die Thematik der Vererbung und Kaskadierung in CSS, der zweite das CSS-Framework SASS. In dieser Podcast-Folge möchten wir euch die Aufnahmen aus dem ersten CSS-Vortrag Vererbung und Kaskadierung bereitstellen. Gehalten wurde dieser von: Regine Heidorn Ausbildung: SAE Berlin Multimedia Creative Diploma Abschlussarbeit: CSS und Barrierefreiheit Seit 2006 selbständig Ihr findet alle Informationen zu diesem Vortrag auch noch einmal in schriftlicher Form in unserem Blog: http://www.webdesign-podcast.de/2010/08/18/css-vererbung-und-kaskadierung-2/ Leider ist die Ton-Qualität vom Vortrag nicht die Beste, dafür möchten wir uns im voraus bei euch entschuldigen. Du kannst die Präsentation auch im Original Vortrags PDF mit verfolgen. PDF hier downloaden! Podcast-Info: Titel: Icon mit Adobe Photoshop Autor: Pascal Bajorat Vortrag von: Regine Heidorn Länge: ca. 48 Min Dateigröße: 125 MB Video-Podcast in HD 720p über Vimeo ansehen: CSS-Tag in Dresden (Vererbung & Kaskadierung) from Pascal Bajorat on Vimeo. | 18.8.10 | Kostenlos | In iTunes ansehen |
| 22 | VideoIcon mit Adobe Photoshop | In diesem Podcast erkläre ich euch, wie man in Adobe Photoshop ganz schnell und einfach, ein Icon im 3D Look erstellt. Dafür benutze ich unterschiedliche Verläufe, Abwedler und Nachbelichter. Datein zum Podcast 4 (PSD-Datei) Podcast-Info: Titel: Icon mit Adobe Photoshop Autor: Sascha Rudolph Länge: ca. 11 Min Dateigröße: 45 MB Video-Podcast in HD 720p über Vimeo ansehen: Icon in Adobe Photoshop from Sascha Rudolph on Vimeo. | 27.7.10 | Kostenlos | In iTunes ansehen |
| 23 | VideoAccordion mit jQuery | Die jQuery Library ist eine der beliebtesten JavaScript Frameworks der Webwelt. Ich möchte euch im Laufe der Zeit langsam in die Funktionen des jQuery Frameworks einführen. Wir fangen mit einer der einfachsten Funktionen an die oft überschätzt wird. Das Accordion ist eine beliebte Möglichkeit um Content aufzugliedern und zu kategorisieren, oft werden hierzu schwere Geschütze in Form von 50-100kb großen Scripten aufgefahren. Doch dies ist in der Regel gar nicht nötig, denn wer sich sein kleines Accordion selber baut benötigt dazu nur ca. 8 Zeilen JavaScript bzw. jQuery Code. Wie genau das funktioniert erkläre ich euch in dieser Podcast Folge. Hier findet Ihr die ganze Prozedur noch einmal als Text Tutorial. JavaScript Daten zum Podcast 3 Podcast-Info: Titel: Accordion mit jQuery Autor: Pascal Bajorat Länge: ca. 19 Min Dateigröße: 89 MB Podcast als *.m4v (QuickTime Player) Datei laden Video-Podcast in HD 720p über Vimeo ansehen: Accordion mit jQuery from Pascal Bajorat on Vimeo. | 20.7.10 | Kostenlos | In iTunes ansehen |
| 24 | VideoLogo aufbessern in Photoshop | In diesem kleinen Tutorial erkläre ich euch, wie es moeglich ist, mit einfachen Mitteln ein Logo in Photoshop aufzuwerten. Durch Verläufe, Ebeneneffekte / Stile oder Pinselspitzen wird aus einem simplen Logo ein auffälliger Hingucker. Hier findet Ihr die ganze Prozedur noch einmal als Text / Bild Tutorial. Podcast-Info: Titel: Logo aufbessern in Photoshop Autor: Sascha Rudolph Länge: ca. 12 Min Dateigröße: 50 MB Podcast als *.m4v (QuickTime Player) Datei laden Video-Podcast in HD 720p über Vimeo ansehen: Logo aufbessern in Photoshop from Sascha Rudolph on Vimeo. | 6.7.10 | Kostenlos | In iTunes ansehen |
| 25 | VideoFonts in Webseiten einbinden | In dieser Podcast-Folge zeige ich euch, wie ihr Fonts, die nicht zur Standardauswahl der meisten Computer gehören, in Webseiten einbinden könnt. Dabei demonstriere ich euch folgende Möglichkeiten: Google Font Directory – http://code.google.com/webfonts Den Blog Artikel zum Font Directory findet ihr hier. Cufón – http://cufon.shoqolate.com Den Blog Artikel zu Cufón findet ihr hier. Podcast-Info: Titel: Fonts in Webseiten einbinden Autor: Pascal Bajorat Länge: ca. 12 Min Dateigröße: 70 MB Beispieldateien, die ich im Podcast erstellt habe. Podcast als *.m4v (QuickTime Player) Datei laden Video-Podcast in HD 720p über Vimeo ansehen: Fonts in Webseiten einbinden from Pascal Bajorat on Vimeo. | 2.7.10 | Kostenlos | In iTunes ansehen |
| Insgesamt: 25 Folgen |
Kundenrezensionen
Sehr informativ
Ich verfolge den Webdesign-Podcast nun seit erster Stunde und bin sehr beeindruckt, dass endlich mal wieder ein Blog ins Leben gerufen wurde, der den Anschein macht nach mehr zu streben. Informative Beiträge in voller Bandbreite sind zum Standart geworden. Die Videos sind auch echt Top, wenn auch teilweise zu wenig Informationen in zu lange Videos gepackt wird. ;)
Trotzdem bin ich weiterhin treuer Podcast-Abonnent, sowohl von auf der Webseite, als auch über iTunes.
Weiter so Jungs!
Toller Video-Podcast
Ich finde sowohl den Video-Podcast als auch den Blog sehr informativ, was nicht zuletzt daran liegt, dass die Themen immer variieren. Auf die Art und Weise bleibt es immer interessant. Macht weiter so.
Wunderbarer Podcast
Ich finde den Podcast informativ und interessant. Die Tonprobleme der ersten Episode sind behoben. Übung macht den Meister und die Jungs (und Mädels?) hier werden immer besser.
Zuschauer haben auch abonniert
- HTMLCAST - HTML per Video lernen
- Torben Toepper
- In iTunes ansehen
- Der wöchentliche OpenSource Video-Podcast 2008
- Opensource Podcast
- In iTunes ansehen
- TechnikLOAD HD
- t3n Magazin
- In iTunes ansehen
- Kostenlos
- Kategorie: Software-Tipps
- Sprache: Deutsch
- Copyright © Webdesign-Podcast.de - Der Podcast für Webdesigner und Grafiker http://www.webdesign-podcast.de/impressum/
