#001 – Einführung in die Serie

Laufzeit: 4:02

Hallo zusammen! Willkommen zur vollständigen Serie über den Aufbau einer mobilen ersten Künstler-Website mit WordPress. Dies unterscheidet sich leicht von der letzten Serie, in der wir während des Aufbaus aufgezeichnet haben. In diesem Kurs ist die „endgültige“ Website bereits fertiggestellt: JeffCampana.com

Screencast ansehen

#002 – Ein Blick auf die alte Website

Laufzeit: 3:30

In diesem Screencast werfen wir einen Blick auf Jeffs bestehende Website. Diese Serie ist nicht so sehr auf „Redesign“ ausgerichtet wie die v10-Serie, aber es gibt eine bestehende Website, und wir werden einige bestehende Inhalte davon verwenden. …

Screencast ansehen

#003 – Erste Kundenkommunikation

Laufzeit: 8:52

In diesem Screencast spreche ich über die Kommunikation zwischen mir und Jeff, als er mir zum ersten Mal eine E-Mail schickte, dass er die Website neu gestalten möchte.

Die allgemeine Stimmung von Jeff war: „Es ist Zeit.“ Es ist Zeit, die Website neu zu gestalten. …

Screencast ansehen

#004 – Eine Photoshop-Leinwand

Laufzeit: 3:59

Aus dem letzten Video wissen wir, dass wir fünf Hauptpunkte zu beachten haben, wenn wir mit der Gestaltung dieser Website beginnen. Wir behalten diese im Hinterkopf, während wir weitermachen.

Wir beginnen natürlich „mobile first“, …

Screencast ansehen

#005 – Photoshop Mobile, Teil 1

Laufzeit: 10:54

Wir öffnen unsere Photoshop-Datei. Der eher albern aussehende „gestreckte“ iPhone-Screenshot, der uns einfach eine Leinwand im mobilen Kontext gibt.

Wir fangen so einfach wie möglich an: mit Jeffs Namen. Wir brauchen …

Screencast ansehen

#006 – Photoshop Mobile, Teil 2

Laufzeit: 10:24

Wir haben den „Header“ des Designs platziert, wir müssen nur noch den Rest der Seite gestalten. Wir haben eine Liste der wichtigsten Ziele, die wir erreichen wollen, das wird uns helfen, uns zu leiten. …

Screencast ansehen

#007 – Einrichten der lokalen Entwicklungsumgebung

Laufzeit: 6:40

Wir wollen lokal arbeiten, während wir an diesem Projekt arbeiten. Nur ein paar Gründe

  • Es ist schnell.
  • Wir können überall offline arbeiten.
  • Wir arbeiten an einem kompletten Redesign, das viele Tage dauern wird, wir können keine Live-Website hinterlassen
Screencast ansehen

#013 – Anpassen des Sliders

Laufzeit: 10:31

Der Slider ist implementiert und funktioniert, er sieht nur nicht so aus, wie wir ihn entworfen haben. Wir gehen den Prozess durch, HTML und CSS zu entfernen, die wir nicht brauchen. Wir schauen uns auch die Einstellungen für den RoyalSlider an …

Screencast ansehen

#014 – Positionieren des Sliders

Laufzeit: 11:06

Der Slider funktioniert! Aber er ist nicht genau so platziert, wie wir ihn in unserer Photoshop-Datei entworfen haben. Wir brauchen mehr Platz darunter, um mehr von der Hauptnavigation freizugeben.

In diesem Screencast tauchen wir in das CSS ein, das mitgeliefert wird …

Screencast ansehen

#015 – Homepage-Navigation, Teil 1

Laufzeit: 7:18

Wir haben einen Plan für die Homepage-Navigation, wir müssen sie nur noch in Code umsetzen. Homepage-Navigation, sage ich spezifisch, weil diese wahrscheinlich nur auf der Homepage verwendet wird. Es wäre ein …

Screencast ansehen

#016 – Home-Navigation, Teil 2

Laufzeit: 14:33

Wir haben einen guten Anfang für die Homepage-Navigation, aber es gibt noch einige Styling-Sachen, die erledigt werden müssen. Wir beginnen damit, den Inhalt selbst zu vervollständigen, fügen ein paar weitere Navigationslinks für insgesamt fünf hinzu. Dann …

Screencast ansehen

#017 – Home-Navigation, Teil 3

Laufzeit: 11:16

Wir sind fast fertig mit der Homepage-Navigation, aber es gibt etwas seltsamen Platz unter unserem Slider und über der Navigation selbst. Wir versuchen herauszufinden, warum.

Für diejenigen unter Ihnen, die sich exakte Lösungen ansehen möchten, ist dies nicht für …

Screencast ansehen

#018 – Fußzeile

Laufzeit: 3:17

Dies wird die einfachste Fußzeile auf einer Website sein. Sie besteht aus einem Copyright-Symbol mit Jeffs Namen (Es ist meiner Meinung nach immer schön, den Namen der Website in der Fußzeile in Klartext zu haben, um ihn leicht …

Screencast ansehen

#019 – Der Blog, Teil 1

Laufzeit: 10:25

Wir beginnen mit der Arbeit am Blog-Bereich der Website. Wir möchten, dass der Blog-Bereich der Website unter /blog/ liegt – also erstellen wir eine Seitenvorlage dafür namens page-blog.php und verwenden die Einstellungen …

Screencast ansehen

#020 – Der Blog, Teil 2

Laufzeit: 12:34

Der Blog gibt aus, was wir wollen, aber die Typografie und das Layout stimmen noch nicht ganz. Wir fügen hier und da nach Bedarf etwas Markup hinzu, um eine bessere Semantik und Elemente zu erhalten, die nur für …

Screencast ansehen

#021 – Der Blog, Teil 3

Laufzeit: 9:06

Die Typografie stimmt immer noch nicht ganz, also verbringen wir etwas mehr Zeit damit, Anpassungen vorzunehmen. Das lohnt sich hier, denn die Typografie von Überschriften und Fliesstext wird praktisch überall auf der Website gut funktionieren.…

Screencast ansehen

#022 – Blog-Archive

Laufzeit: 12:10

Es gibt nur einen Weg, vom Homepage zum Blog-Bereich der Website zu gelangen, und das ist durch Klicken auf „Neueste Beiträge“. Aber das führt zum neuesten Blogbeitrag. Wir brauchen auch eine Möglichkeit, …

Screencast ansehen

#023 – Seitenvorlage

Laufzeit: 7:17

In so gut wie allen WordPress-Themes gibt es eine Datei namens page.php. Dies ist die Vorlage, die „Seiten“ steuert – einer der Standard-Inhaltstypen, die alle WordPress-Websites haben. Seiten unterscheiden sich von Beiträgen darin, dass sie nicht …

Screencast ansehen

#024 – Unterseiten-Navigation

Laufzeit: 9:33

Die Homepage-Navigation erfüllt unsere Bedürfnisse gut, aber diese riesige Navigationsleiste auf jeder Seite der Website ist nicht praktikabel. Wir brauchen etwas Dezenteres für die Unterseiten der Website.

In diesem Screencast erstellen wir …

Screencast ansehen

#026 – Super CMS, Plugin-Setup

Laufzeit: 12:40

Mit unseren beiden leistungsstarken CMS-erweiternden Plugins installiert, verbringen wir etwas Zeit mit deren Einrichtung.

„Events“ auf Jeffs Website ist ein perfektes Beispiel. Ein „Event“ sollte einen Titel und eine Beschreibung haben, daher sind diese Standardfelder in Ordnung, aber es …

Screencast ansehen

#027 – Admin-Steuerung für Homepage-Slides

Laufzeit: 13:58

Wir haben einen weiteren Beitragstyp, der die richtigen benutzerdefinierten Felder benötigt: die Homepage-Slides. Dies ist eine Art von Sache, die einfach und verlockend wäre, direkt in die Vorlage zu kodieren, aber wir werden die Extrameile gehen …

Screencast ansehen

#028 – Events, Admin und UI

Laufzeit: 9:19

Im letzten Video haben wir gelernt, wie man einen benutzerdefinierten Loop erstellt und benutzerdefinierte Daten aus unseren benutzerdefinierten Beitragstypen und benutzerdefinierten Feldern ausgibt. Diesmal müssen wir es wieder tun, nur für den etwas komplexeren Events-Bereich. …

Screencast ansehen

#029 – Events Abschluss

Laufzeit: 6:17

Ich dachte, wir könnten Events schnell abhaken, wie wir es im letzten Video besprochen haben, aber als ich den Events-Bereich ausarbeitete, musste so viel Code geschrieben werden, dass ich dachte, es wäre ein Abschlussvideo wert.

In einigen …

Screencast ansehen

#030 – Das Kontaktformular

Laufzeit: 4:13

Einer der fünf Hauptbereiche der Website ist die Kontaktseite. Sie erfordert aber kaum Abdeckung, da wir sie einfach in Wufoo erstellt und den Code als Seite eingebettet und veröffentlicht haben.…

Screencast ansehen

#032 – Verschieben der Home-Nav, Media Queries

Laufzeit: 7:50

Wir arbeiten daran, die Website so zu reparieren, dass sie auf „Desktop“-Bildschirmen (d. h. größeren) immer noch gut aussieht. Die Homepage-Navigation ist eine weitere Sache, die auf Desktops etwas lächerlich groß wird. Anstatt das zu tun, verschieben wir stattdessen …

Screencast ansehen

#033 – Media Queries in JavaScript

Laufzeit: 14:41

Als wir die Website für Desktops anpassten, haben wir die Homepage-Navigation auf die rechte Seite der Seite verschoben, um auf der linken Seite Platz für mehr Inhalt zu schaffen. Wir möchten diesen Inhalt nur hinzufügen, wenn …

Screencast ansehen

#034 – Ajax-Integration eines Blogbeitrags

Laufzeit: 11:03

Wir landen bei einem sehr einfachen Test, der einen Artikel aus dem Blog lädt, um ihn anzuzeigen, wenn Platz vorhanden ist.

// Load additional content if enough room
enquire
  .register("(min-width: 700px)", {
    match: function() {
      $("#home-article").load("/blog/ #main-article");
    }
  })
  
Screencast ansehen

#035 – Desktop-Hover-Zustände

Laufzeit: 7:47

Nur weil dies eine mobile erste Serie ist, bedeutet das nicht, dass wir die Interaktionen von Desktop-/Laptop-Computern ignorieren können. Wir verbringen etwas Zeit damit, sicherzustellen, dass es :hover/:focus/:active Zustände für „klickbare“ Elemente wie Links gibt. Wir nutzen die Sass-Fähigkeit, um …

Screencast ansehen

#037 – Farbmanipulation

Laufzeit: 23:50

Als wir uns mit der Verleihung von CMS-Fähigkeiten an den Homepage-Slider beschäftigten, haben wir jedem Homepage-Slide ein benutzerdefiniertes Feld mit einem Farbwähler gegeben. Das gibt uns Zugriff auf diese Farbe, wo immer wir sie brauchen. In der Vorlage werden wir …

Screencast ansehen

#038 – Kommentare bereinigen

Laufzeit: 13:00

WordPress treibt den Kommentarbereich von Jeffs Website an. Dies wird mit unseren CSS-Superkräften super einfach zu bereinigen sein. Wir erstellen eine .scss-Datei nur für Kommentare (das perfekte Beispiel dafür, wo eine Sass-Teildatei angemessen ist). Wir fügen …

Screencast ansehen

#039 – Testen über verschiedene Geräte hinweg

Laufzeit: 5:53

Zum größten Teil haben wir bisher den iOS-Simulator verwendet, um die mobile Version unserer Website zu testen. Das ist ziemlich gut, viel besser als das Testen eines schmalen Browserfensters, aber es ist auch bei weitem nicht umfassend.

Wir benutzen …

Screencast ansehen

#040 – Serienabschluss

Laufzeit: 10:08

Es ist Zeit, diese Serie abzuschließen. Es war eine unterhaltsame Reise!

Es gibt einige Unterschiede zwischen dem, was wir behandelt haben, und dem, was tatsächlich auf JeffCampana.com ist. Wie üblich ist einiges besser geworden, das …

Screencast ansehen