Ultraschall Frontend (Website)

Hi ihr lieben,

ich bin nun knapp ein Jahr am designen eines WP Framework + API für Podbe und lasse mich bei vielen Dingen inspirieren, das nimmt jedoch viel Raum für Experimente ein. Da ich viel unterwegs bin und jede Zeit (die mir nach der Arbeit noch bleibt) in die Ideen investiere, brauche ich auch mal einen anderen Blickwinkel. Daher stecke ich dann Idee und Zeit für Entwicklung in andere Projekte z.B. firtz, mongoPod, hmp …

Mir ist da zu Bilde/Ohren gekommen, das @rstockm beim ppw15b meinte, das Entwickler & Ideen willkommen sind.

Alllsooo: Jetzt nicht schief nehmen!

Ich finde ja die Website könnte vielleicht mehr clean und mehr “product style” vertragen und würde da vielleicht eine Website bauen wollen ∗hust∗.

Ich finde das die Funktionen von Ultraschall ein wenig besser zur Geltung kommen könnten und es am freien Raum mangelt. Es wirk alles erschlagen und man muss gezielt auch nach Informationssuche gehen.

Dann wieder, wird man erschlagen vom gesamten Kontext. Vielleicht kann man das, mit ein wenig Handarbeit, schöner ins rechte Licht führen.

Mir persönlich gefallen einige Ideen von Apple, wie Sie Ihre Produkte bewerben, finde ich immer recht interessant. Einiges könnte ich mir auch gut für eine Ultraschall-Seite vorstellen.

Aber was ist da eigentlich eure Idee?

Grüße M.C.


P.S.

Als Musiker und Tonstudio-Heini bin ich ja an so mancher Software gebunden und kann nicht, mal eben alles Updaten (leider auch die Macversion). Das immer wieder neu zu kaufen, würde mich mehrere tausend Euronen kosten.

Ich teste ja trotzdem heimlich mit und hatte auch schon an einer Cloud Idee herumgedoktert:

@rstockm habs jetzt läuft Reaper auch im Browser. Jedoch noch was unstabil. pic.twitter.com/ELMw4gSeLZ

— M.C. (@McCouman) 27. Juli 2014

Gebe zu ich habe Reaper bis jetzt nie wirklich für eine Podcastproduktion verwendet. Mit dem neuen Feature (Storyboard nennt ihr es?) hat mich Ralf dann aber doch noch rum bekommen :grinning:

Danke - vorab dafür!!!

1 „Gefällt mir“

Danke, hier würden mich wirklich mehrere Meinungen interessieren. Ich habe die Seite für die 2.0 ja neulich nochmal umgebaut, auch um gerade etwas mehr Product-Style reinzukriegen. Etwa die neue Sektion der Features mit knackigen Beschreibungen, nach Workflow gategorisiert.

1 „Gefällt mir“

Eine Website ist ja mehr als die Homepage. Die finde ich schon sehr gut, aber alles darüber hinaus ist ja aktuell mehr oder weniger “hier, auf diesen externen Sites gibt es auch noch was”. Gerade ein Getting Started Guide direkt auf der Website fände ich noch super. Nachdem man die Installationsanleitung abgefrühstückt hat, ist man als Anfänger wahrscheinlich aktuell etwas verloren. Die Videos helfen da, aber die sind eben nicht mehr alle auf dem aktuellen Stand.

2 „Gefällt mir“

Hallo ihr,

Ich würde das aktuelle Video vom 32c3 vielleicht verlinken…

Gruß fairsein

Ist direkt oben auf der Startseite…?

Ich hatte nicht nachgeguckt. Sorry.

Frohes Neues allen :slight_smile:

Habe mich entschlossen und werde einfach mal anfangen ein Theme zu bauen und unter MIT veröffentlichen.

Wenn es für Ultraschall interessant ist, ist es ok und kann man dann nutzen. Wenn es alle doof finden, haben die anderen ein clear Theme mehr zum rumbasteln.

Grüßchen

2 „Gefällt mir“

Ich bin gespannt! Sag bescheid, wenn du Feedback zu irgendwas brauchst.

Danke!

Das werde ich bestimmt brauchen :smile:

Ich bin noch nicht so recht mit den Ideen vertraut:

“wir machen jetzt alles english”

Ich gehe daher einfach davon aus, das die Seite möglichst in DE und ENG am Ende des Tages existieren soll?

Bin mir noch mit dem Slug bauen unsicher. Da ich so einiges an “automation” / “machts einfach” vorhabe. Sprich wie umsetzen, um nicht 2x so eine Seite zu bauen.

Aber mal vorab - ich schreibe hier meine Gedanken dazu auf:

Grüße M.C.

Ja, der Gedanke ist das alle Inhalte der Seite sowohl in EN als auch DE vorgehalten werden.

Kurze Frage, sollen die Changelog auch auf eng/de sein? Macht wenig Sinn?

Ich gehe aber davon aus, das Ihr die Installationsanleitung auf jeden Falle auf Eng und DE haben wollt oder?

Haben wir beides bereits zweisprachig. https://github.com/Ultraschall/REAPER.

1 „Gefällt mir“

Thx - dann ändere ich das mit ab und baue auch da noch eine Translation ein. Danke!

Update: Nur kurz als Infos

Leider war ich 3 Wochen krank, da hatte ich noch nicht die Zeit weiter zu machen :frowning:

Zur Zeit gibt:

  • automatische Erkennung (win/mac) für Bilder, Download Link und Changelog/Download Page
  • features box: für Content und Bilder im “full grid”, “2/2 Grid” (in de/eng)
  • team infos: bilder, description, social icon + links
  • Version content (de/eng)
  • Home Informations (de/eng)
6 „Gefällt mir“

Oha!
Wie die Briten sagen würden: not too shabby :sunglasses:

1 „Gefällt mir“

Kurze Rückfrage:

Wie habt Ihr euch das eigentlich erdacht mit der Translation?

Habt Ihr vor subdomains einzusetzen?

z.B.: de.ultraschall.fm oder eng.ultraschall.fm

Zur Zeit habe Ich eine Funktion die es ermöglicht, die Seite über einen Cookie in de oder eng anzusehen. Das gefällt mir jedoch nicht, da ich eigentlich gerne ohne so etwas auskommen mag.

Weshalb ich jetzt eine feste Struktur etabliert habe die ich wie folgt aufsetzen würde:

  • welcome
  • de
    | - version
    | - features
    | - install & changelog
    | - compatibility
    | - screencast (youtube)
    | - references
    | - community
  • eng
    | - version
    | - features
    | - install & changelog
    | - compatibility
    | - screencast (youtube)
    | - references
    | - community
  • blog
  • impressum
  • … another …

Hier ein erster Aufbau in WP:

Die Startseiten sind damit:

  • ultraschall.fm/de/ - (Homeseite der deutschen Version)
    bzw
  • ultraschall.fm/eng/ - (Homeseite der englischen Version)

Damit das System weis um welche Translation es sich auch handelt, gibt es im Template eine einfache Auswahlbox zum festlegen des Sprachausgabe:

Es muss nur einmal bei der Erstellung der Seite so eingestellt werden! Mehr Infos beschreibe ich im Konzept unter “System functions”.

Das Konzept:

Ich habe etwas länger über das eine oder andere nachgedacht und habe ein einfaches Konzept erstellt um die Seiten (sind Sie einmal eingerichtet) schnell zu bearbeiten und upzudaten.

###Linker Pages:

  • Page: YouTube
    Ich mag es nicht, wenn man direkt zu YouTube kommt. Man sollte so etwas ankündigen. Daher habe ich vor, eine YouTube Page für den Umtraschall Screencast zu bauen. Der Schaut in den Feed von Ultraschall hinein und zeigt die neusten Episoden an. Wie bei Apple würde ich ein Modal einsetzen um die Seiten zu starten. Ein kleine Übersicht zeigt ältere Episoden, wo bei die erste Episode, die neuste ist und mittig auf der Seite erscheint. Ein red Button linkt dabei zu YT.

  • Page: Community
    Wie bei der YouTube Site würde ich hier ein kurze Übersicht bevorzugen und ein paar Infos, was einem auf der Community Seite (Sendegate) erwartet und warum es dies überhaupt gibt (kurz halten!) Ein Bild und/oder Einbindung (wenn es geht) gibt Auskunft was einem auf Sendegate (Ultraschall) alles erwartet.

  • Page: References
    Ein Übersicht der Testimonials durch storify, wie jetzt auch schon auf Ultraschall.fm zu sehen ist.

###Static Pages:

  • Page: Welcome
    Die Welcome Page ist so gesehen die Index von Ultraschall.fm. Als zusätzliche Option kann eine Ladesequenz (Loader Page) mit Ultraschall Symbol angezeigt werden.
    In den Einstellungen kann diese dann fest definiert und jederzeit geändert werden als:
  • eine Weiterleitung auf ein der “Home Seiten” (de oder eng)
  • eine Werkelseite: “Wir bauen gerade um”
  • eine Startseite als Auswahlmenü der Sprache (als Sprach Flaggen, verlinken auf die de/eng Home-Seiten)
  • Page: Home (de/eng)
    Dies ist eine Translation Page und ist die direkte Startseite von Ultraschall in einer festen Sprache: ultraschall.fm/de/ oder ultraschall.fm/eng/
    Sie enthält eine kurze Einführung zum Projekt und der Ultraschall Funktionen. Sie sollte so aufgebaut werden, das sie einfach verständlich ist und die ausführlichen Informationen eher auf Unterseiten verlinkt. Damit wird eine klare Struktur und Übersicht gewährleistet.

  • Page: Version (de/eng)
    Die Seite Version wird in der Navigation als “Ultraschall” bezeichnet und gibt eine Übersicht von Ultraschall. Sie Zeigt dabei kurz die “neusten” Funktionen und wie das Design aufgebaut ist kann mit zusätzlichen Seiteninhalten wie "Collapsed, Bildern, Flex, Slideshows, Parallax effects… " ausgebaut werden.

  • Page: Features (de/eng)
    Die Feature Seite zeigt die Ebenen, Icons, Styles von Ultraschall und erklärt kurz den Aufbau und Funktionsweise. Sie wird ebenfalls mit Seiteninhalten wie "Collapsed, Bildern, Flex, Slideshows, Parallax effects… " aufgebaut, um die einen “clean effect” zu erzeugen und die Informationen des Contents so leichter und verständlicher auf der Seite zu verteilen.

  • Page: Download (de/eng)
    Die Download Seite kann direkt über den “green button” in der Navigation aufgerufen werden. Sie enthält die Installationsanleitungen für Mac und Windows + Download Buttons je System. Gibt es ein YT-Video das die Installation erklärt, kann dies durch anklicken auf eine Bildervorschau als Modal aufgerufen und angeschaut werden. Über einen Tab, kann die Update und Installationsanleitung jeweils für das Betriebsystem angezeigt werden. Die Changlogs werden automatisch am Ende angehangen.

  • Page: Blog (de)
    Gibt den Blogroll der Beiträge wieder.

Vom Konzept her ließe sich auch eine translation umsetzten. Dies würde beim Schreiben jedoch viel Zeit beanspruchen und habe ich daher erst einmal nicht umgesetzt…

###Dynamic Pages:

  • Bloge: (de)
    Dies sind die einzelnen Blogbeiträge, noch sind diese nicht direkt spezialisiert und umgesetzt.

##System functions:
Hier kommt eine kurze Beschreibung der wichtigsten Funktionen die ich für den Aufbau erdacht habe.

###User Agent:
Mittels dieser Funktion findet Ultraschall heraus um welches Betriebssystem es sich handelt um Bilder, den grünen Download-Button mit Windows/Mac-Icon (siehe Navigation) und weitere Designelement gezielt, für das jeweilige Betriebssystem anzuzeigen.

Ich habe diese Idee gewählt da ich davon überzeugt bin, dass man sich besser mit einer Seite identifiziert, wenn man Bilder so anzeigt, das sie zum eigenen Betriebssystem auch passen. Dies schaft automatisch mehr Vertrauen…

###Designaufbau:
Das Design unterstützt die responsive Ansicht. Da responsive Designs auf eine Grid basieren, wird der Seitenaufbau über Content-Boxen geregelt. Diese lassen sich selber in Höhe und Breite, wie auch Ihre “Style-Funktionen” und dessen Grid anpassen.

Um den Bilder- & Text-Content der Seiten funktionaler und flexibler anzupassen, verzichte ich jedoch komplett auf einen separaten Editor oder erweiterte Shortcodes, die die meisten Themes mit vielen Funktionen gerne mal benötigen.

Hier setze ich ganz auf eine “Template” Funktion. Mittels der, festgelegten Grids und Funktionen genutzt werden können, um die Seite interessanter zu machen.

Da auf einer Produktseite meist “Features” also die Grundfunktionen einer Software erklärt werden, habe ich einen Post-Type mit diesen Namen erstellt. Nur dieser, enthält die Template Funktionen.

###Post Types:

Versionen:
Dieser post_type ist der Dreh- und Angelpunkt zum erzeugen der folgenden “statischen” Übersichtsseiten:

  • de/eng (Homeseite von Ultraschall in de/eng)
  • Version (Neuste Funktionen und Änderungen in de/eng)
  • Features (Allgemeine Ultraschall-Funktionen in de/eng)
  • Download (Installationsanleitungen in de/eng für mac+win)

Hier werden im einzelnen erstellte “templates” eingebunden. Diese werden mittels des Post_Types: “Features” erzeugt. Dieses Vorgehen ermöglicht vor allem das Weiterverwenden bestehender Content-Bausteine.

Changelogs:
Hier können die Änderungen der einzelnen Versionen in de/eng erfasst werden. Diese werden automatisch auf der Seite: Downloads am Ende angehangen.

Features:
Hier werden alle Boxen abgespeichert, die über die Versions-Seite später eingebunden werden können. Über die Template Funktion lassen sich CSS-, JS-, Grid- und viele weitere Events auf die Ultraschall Seiten einbinden. Sie enthalten letztlich den Hauptcontent der Ultraschall-Seiten.

Team:
Mit diesem Post_Type können die Team-Members mit Name, Bild, Beschreibung und Netzwerk-Links abgespeichert werden.

“Diesen CPT werde ich vielleicht eher in die Global Settings verfrachten, da es den zusätzlichen Post_Type einspart.”

References:
Mit diesem Post_Type können Podcasts mit Namen, Logo und Link zum Blog abgespeichert werden. Dies kann für ein Widget mit rand Funktion und/oder einem Slider genutzt werden.

“Dieser CPT ist noch nicht erstellt und werde ich eher in die Global Settings verfrachten, da es einen zusätzlichen Post_Type oder Funktion einspart”

Global: Ultraschall Settings
Hier werden die Grunddaten zur Version und weiteres festgelegt:

  • YouTube Accountname:
  • YouTube Channel:
  • Windows Download link
  • Mac Download link
  • Version
  • Version Name
  • Release Date
  • Welcome Page Settings

Hier wird wohl auch noch Input zum Team und der References dazu kommen

Erste Ansicht des Teams:

Ich habe vor sie einmal auf der Download/Installation anzuzeigen und einmal bei den Changelog.

Für die Changelog Site habe ich mich für ein dunkles Design entschieden, da es mehr abhebt und die Übersicht etwas interessanter gestaltet.

2 „Gefällt mir“

Das macht alles schon einen sehr durchdachten, guten Eindruck. Zur Mehrsprachigkeit: es spricht m.E. nichts dagegen, das als /en dranzuhängen, subdomains müssen nicht.

Ein Wort nochmal den Texten unter Install und Changelog: die werden jetzt schon beide direkt aus dem markdown File aus dem GitHub Repo gezogen, das sollte gern so bleiben da man dann nur eine Edit-Stelle hat.

hm…

warum habe ich so was nur befürchtet^^

Da muss ich das Konzept noch mal komplett überarbeiten.

Ich habe da ein wenig zusammengefasst:

Siehe content-type (als Infos in Form eines collapsed) der einzelnen Steps im Frontend:

Als Idee hatte ich eigentlich ein Admin Menü zu bauen, wo man das als:

  • changelog-de.md
  • changelog-eng.md

herunterladen kann, um es auf Github veröffentlichen zu können. Der Weg wäre also eher anderes herum.

Habt Ihr da Code für mich? Sprich, wie macht Ihr das parsing von github ins WP?

Derzeit über dieses Plugin: https://wordpress.org/plugins/mytory-markdown/
Das ist eigentlich ein schicker Workflow. Ich würde für dinge wie install und changelog auch immer eine reine .md Datei bevorzugen, die ich außerhalb von WordPress in einem beliebigen Editor verarbeiten kann. Von der Formatierung her finde ich da auch MarkDown ausreichend, ich würde da nicht zuviel overengineering betreiben mit eigen definierten Feldern etc.

btw: das Header-Bild ist cool!