Langsam in Physik und Mathematik eintauchen

Ich bin immer an Wissenschaft und Physik interessiert gewesen, so lange ich denken kann. Und ich habe immer viele Artikel und Bücher darüber gelesen.

Aber ich habe mich nie getraut tiefer in den mathematischen Teil der Materie einzusteigen. Das hat sich nun seit dem letzten Herbst geändert.

Ich habe nun angefangen, viele Physik-Bücher zu lesen, die die Dinge nicht nur in Textform beschreiben, sondern die sich auch mit den mathematischen Grundlagen beschäftigen.

Und langsam (sehr langsam) bekonmme ich einen weinzig kleinen Einblick in die Tiefe der Beziehung zwischen der mathematischen Beschreibung und unserer physikalischen Realität.

Das ist nur ein erster kleiner Schritt – aber es ist zutiefst befriedigend, das zu Lernen und darüber nachzudenken.

Das interressante daran ist für mich, dass der Impuls, sich damit zu beschäftigen, der gleiche ist, der mich auch motiviert mich mit Design und Programmierung zu beschäftigen.

Ästhetik — Ein tiefes Gefühl Schönheit und (bei aller Komplexität) der Klarheit.

Leonard Susskind und die "The theoretical minimum" Serie

Eines der ersten sehr viel mehe mathematischen Bücher, ist die Buchreihe "The Theoretical Minimum" von Leonard Susskind.

Ich kann mich nicht daran erinnern, wann Bücher von mir das letzte Mal so zerlesen aussahen. Es ist nicht wie bei den meisten anderen Büchern: Man liest sie in einem durch und ist dann "fertig" damit — ich arbeite mich Stück für Stück durch diese Bücher durch, lese Kapitel und Abschnitte immer und immer wieder über einen Zeitraum von mehreren Wochen, um jedesmal ein kleines bisschen besseres Verständnis zu erlangen.

Momentan gibt es drei Bücher aus dieser Reihe:

• Classical Mechanics (Klassische Mechanik)
  
• Quantum Mechanics (Quantenmechanik)
  
• Special Relativity and Classical Field Theory (Elektrodynamik und Relativität)
  

Diese Bücher basieren auf Kursen, die Leonard Susskind and der Stanford Universität für "normale" Menschen gegeben hat. Diese ganzen Kurse sind auf Youtube zu finden. Die Kurse umfassen sehr viel mehr  und tiefer gehende Themen als die drei Bücher.

Diese sind nicht unbedingt einfach, aber Leonard Susskind vermittelt die Inhalte interessant, pragmatisch, oft sehr lustig und sehr menschlich. In seinen eigenen Worten: Make it as simple as possible but not simpler.

Und ich schätze seine pragmatische und unklausulierte Art Physik Nicht-Physikern zu erklären sehr.

Roger Penrose

Eine Reihe anderer Bücher, durch die ich mich gerade arbeite sind von  Roger Penrose. Insbesondere spreche ich von:

• The Road to Reality (Der Weg zur Wirklichkeit)
  

Er ist ein großer Kopf, auf seine Art viel dröger als Susskind und er hat einen sehr viel mehr mathematisch formalen Weg, den Stoff zu präsentieren. (Er ist auch sehr viel englischer.)

Vieles von dem, worüber er schreibt ist für mich noch weit entfernt um alles im Detail zu verstehen. Aber es ist eine herausragende Herausforderung und ein gutes Training.

Und was mich an Roger Penrose insbesondere reizt, ist seine geometrische Art zu denken, und seine methematischen Ideen visuell zu illustrieren.

Ich empfinde diese Verbingung zwischen dem Visuellen Denken und Mathematik als etwas wunderbares!

Frank Wilczek, Physik und Ästhetik

Ein weiteres Buch, was in diese Verbindung zwischen Ästhetik und Physik passt, ist A Beautiful Question: Finding Nature's Deep Design von dem Nobelpreisträger Frank Wilczek. Ich habe dieses schon 2018 gelesen und es ist nicht so mathematisch wie die oben genannten Bücher.

Aber vielleicht wird es Dich auch in den Sog zwischen Schönheit und Physik hereinziehen, so dass Du ebenfalls lernst, einen tieferen Blick auf die Säulen unseren Universums zu werfen.

Physik ist Wahnsinn! ;-)

Ein paar weitere Leseempfehlungen

Falls Du keine Zeit hast, Bücher zu lesen oder Youtube Vorträge anzusehen, aber trotzdem an Wissenschaft interessiert bist:

Ich kann allerwärmstens das quantamagazine empfehlen.

Angular Prototyp

Zusammen mit Hesse Design betreuen wir schon seit mehreren Jahren die Basisstile der Benutzeroberflächen für PSI. Die klassischen PSI Produkte sind Java Anwendungen, die einen PSI spezifischen Stil haben.

Zukünftig sollen aber mehr Applikationen auch mobil bzw. online im Webbrowser verfügbar sein, weshalb die PSI Stile für die Touch- und die mobile Benutzung neu angepasst werden mussten.

Um diese Entwicklung möglich zu machen, haben wir einen neuen Prototypen auf Basis von Angular entwickelt, der sowohl mobil wie auch am Desktop und am Tablet funktioniert, aber für die Bedienung per Touch optimiert ist:

Der PSI Angular Prototype

Helles und dunkles Farbschema

Wie auch schon die Desktop Applikation davor, gibt es jeweils ein helles und ein dunkles Farbschema, dass für den jeweiligen Anwendungsfalls optimiert ist.

Und im Zuge der Optimierung für Touch wurden auch die Stile der Komponenten modernisiert und deren Benutzung vereinfacht und für bestimmte Anwendungsfälle neue Komponenten erstellt.

Um die Fortentwicklung zu vereinfachen und zu vereinheitlichen, basieren die Styles für JavaFX wie auch HTML und den Angular Prototypen auf einem gemeinsamen SASS Source.

Ein Beispiel für Formularkomponenten im hellen Farbschema

Ein Beispiel für Formularkomponenten im dunklen Farbschema

Tabellen und tabellenartige Daten

Ein zweiter wichtiger Punkt, war die Optimierung von Tabellen und tabellenartigen Daten, in den verschiedensten Anwendungsfällen.

Die Kombinationsmöglichkeiten sind sehr ausgeprägt:

• Die Selection Column dient dazu eine Anzahl von Datensätzen auszuwählen, um dann eine spezifische Aktion daran auszuführen (siehe Screenshot).
  
• Die Drag&Drop Column ermöglicht die Reihenfolge von Datensätzen leicht zu verändern.
  
• Die Details Column ermöglicht es, die Details eines Datensatzen einzusehen, ohne die Tabelle zu verlassen.
  
• Die Action Column bietet einen Schnellzugriff auf datensatzbezogene Aktionen.
  
• Die Detail Summary bietet die Möglichkeit eine Zusammenfassung eines Datensatzes anzuzeigen, wenn nicht genug horizontaler Platz ist, um die kompletten Daten tabellarisch aufzulisten (siehe Screenshot). Tabellen schalten automatisch zwischen Detail Summary and der normalen Tabellenansicht um.
  

Scrollable List Komponente

Die Scrollable List wurde speziell dazu entwickelt eine großere Anzahl von Datensätzen schnell per Touch durchzuscrollen und deren Details anzeigen zu können, ohne diese erst einzeln öffnen zu müssen.

Die Darstellung der einzelnen Datensätze besteht aus sich übereinanderschiebenen Karten, die schnell und einfach per Touch bedient werden können.

PSI Mobile Prototype und Styleguide

Endlich!

Es war lange Zeit, und endlich ist der Relaunch der Website der Sängerin Efrat Alony online:

Die neue Hauptseite mit Blog

Teil des Konzeptes war, jeweils projektspezifische Unterseiten zu haben, die sich nur auf eine Band oder Bandprojekt konzentrieren.

Insesonders da Efrat Alonys musikalischen Projekte sehr unterschiedlich klingen können und daher für manche Hörer nur schwer unter ein Dach zu passen scheinen.

Sie erfindet sich immer wieder neu!

So wie ihre Website... ;-)

Händel Fast Forward / Projektseite für Efrat Alony, die Händels Musik ins 21. Jahrhundert bringt

Projektseite für das Duo Efrat Alony mit Susanne Paul am Cello

Das Elektro Trio mit Efrat Alony, Oliver Leicht und Frank Wingold

Efrat Alony's "Pop" album: Dismantling Dreams

Alony Relaunch

Die neue Version ist fertig!

Wir sind stolz, die nächste Version von depage-cms präsentieren zu  dürfen.

Einige der neuen Features

• Verbessertes Dashboard
  
• Vollständig neues Editier Interface
  
• Vollständig überarbeiteter Text Editor
  
• Neuer Projektschnellzugriff, um schnell neue News- oder Blog-Einträge hinzuzufügen
  
• Neue Dateibibliothek
  
• Neues Interface zur Bearbeitung der Farbschemata
  
• Verbesserung der Vorschau, so dass diese automatisch in der gerade bearbeiteten Sprache angezeigt wird
  
• Verbesserung der Vorschau, um das gerade aktivierte Element hervorzuheben
  

Und ebenfalls:

Es gibt ein neues online Benutzerhandbuch.

depage-cms v2.0 released

ScriptDock sticht in See

ScriptDock ist ein Netzwerk für Drehbuchautoren.

Die Er­zähl­kul­tur geht den nächs­ten Schritt: Im di­gi­ta­len Zeit­al­ter bie­tet scriptDOCK Au­to­ren die Mög­lich­keit zur ge­mein­sa­men Be­wäl­ti­gung von Hin­der­nis­sen.

Wie in an­de­ren Be­rei­chen gibt es auch beim Film den Wunsch nach ei­nem trans­pa­ren­te­ren Wett­be­werb. Da­mit viel­fäl­ti­ge Ide­en und gut aus­ge­ar­bei­te­te Stof­fe ih­ren Weg zur Ent­de­ckung und Rea­li­sie­rung fin­den, knüpft scriptDOCK ein Netz­werk, das Au­to­ren mit Dreh­buch­ver­wer­tern ver­bin­det.

ScriptDock bietet Autoren einen Heimathafen, um sich zu präsentieren, zu vernetzen und ihre Arbeiten gezielt zu vermarkten.

Das Soziale Netzwerk für Drehbuchautoren

Paula und ich haben uns mit der Gründung von ScriptDock aus zwei unterschiedlichen Perspektiven aber mit dem Gleichen Ziel zusammengeschlossen.

Paula als Drehbuchautorin und ich als Designer, Programmierer und Filmliebhaber.

Denn:

Wie kann man als Au­tor das In­ter­net nut­zen, um sich so­wohl mit Kol­le­gen zu ver­net­zen und in­halt­lich zu ar­bei­ten, als auch Stof­fe in best­mög­li­cher Form vor Dreh­buch­ver­wer­tern zu prä­sen­tie­ren?  

Wir wol­len Euch bei scriptDock die Platt­form dazu bie­ten. 

Paula Redlefsen und Frank Hellenkamp

Wir freuen uns auf Euch!

Der best architects Award zählt zu den renommiertesten Architekturauszeichnungen

Somit braucht es eine Website, die einfach zu bedienen ist, leicht wachsen kann und nicht mit den präsentierten ausgezeichneten Arbeiten in Konflikt gerät.

Die Architektur steht im Vordergrund.

Der best architects Award zählt zu den renommiertesten Architekturauszeichnungen

Anmeldeprozess

Teil der Implementierung ist auch ein neuer Anmeldeprozess, bei dem die Architekten ihre Arbeiten komplett online hochladen können, inklusive der Projekttafeln, die später durch die Jury gesichtet werden.

Und die besten der Besten werden zum Schluss in diesen wundervollen Büchern präsentiert, die von zinnobergruen gestaltet und produziert werden.

best architects award relaunch

Die Spit­zen­ver­bände der deut­schen Sozi­al­ver­si­che­rung haben sich mit Blick auf ihre gemein­sa­men euro­pa­po­li­ti­schen Inter­es­sen zur „Deut­schen Sozi­al­ver­si­che­rung Arbeits­ge­mein­schaft Europa e.V.“ zusam­men­ge­schlos­sen.

Wir hatten die Ehre, die Website umzusetzen und ihnen dafür unser Content Managament System zur Verfügung zu stellen.

Website für die Spit­zen­ver­bände der deut­schen Sozi­al­ver­si­che­rung zur Vertretung ihrer gemein­sa­men euro­pa­po­li­ti­schen Inter­es­sen

Eine Auswahl der speziellen Features

• Individueller Newsletter basierend auf den veröffentlichten News Artikeln
  
• Integration des Magazins "Themenletter ed*"
  
• Individuelle Twitter Integration
  
• Neue Volltext Suche
  
• Datenschutz bewusstes Daten-Handling
  

Launching dsv-europa.de

Die (fast) gleiche Entwicklungsumgebung über Jahre hegen und pflegen

VIM für Profis

Ich war letztend sehr überrascht, als ich meine altes PowerBook G4 (noch mit Mac OS X Tiger) gebootet habe und mir plötzlich klar geworden ist, wie lange ich schon eine mehr oder weniger konstante (aber nicht genau gleiche) Entwicklungsumgebung benutze:

• Mac OS X (jetzt MacOS) plus Linux für Hosting und Services
  
• QuickSilver (jetzt OpenSource)
  
• tmux (davor screen) und natürlich
  
• vim
  

Ich benutze immer noch OS X mit einer sehr ähnlichen Ordnerstruktur (Ich habe immer alle Daten auf neue Rechner übertragen).

Ich habe eine Virtual Machine mit Gentoo Linux, weclhe ziemlich alt ist, da ich sie zuerst in 2004 aufgesetzt habe, und einfach über Jahre beständig aktualisiert habe. Die erste Installation lief "on bare metal", nun läuft sie aber seit Jahren als Virtual Machine unter VMWare Fusion unter Mac OS auf einem Mac Mini.

Eine zweite beständig laufende Virtual Machine ist eine Debian Installation, in der unser normales Hosting Environment läuft und dort vorab getestet werden kann.

Wenn ich nun das altes Powerbook G4 starte, funktionieren im Prinzip alle Shortcuts immer noch so, wie ich sie auch heute täglich benutze:

• Ctrl-Alt-C -> Terminal App öffnen
  
• Ctrl-Alt-V -> MacVim öffnen
  
• Ctrl-Alt-F -> Development Web Browser öffnen
  
• Ctrl-Alt-S -> Normal Web Browser öffnen
  
• Ctrl-Alt-M -> Mail Program öffnen (Apple Mail oder bevorzugt Thunderbird)
  
• Ctrl-Alt-N -> Neue Email schreiben
  
• Ctrl-Alt-I -> Kalender öffnen
  
• Ctrl-Alt-Y -> iTunes öffnen
  
• Ctrl-Alt-X -> Finder im Home Verzeichnis öffnen
  

• Command-Alt-1 - Command-Alt-9 -> Zwischen den normalen Arbeitsoberflächen wechseln
  

Das Dock habe ich immer versteckt  und auch (seit es mit Mac OS X 10.11 möglich ist) auch die Menübar, da ich sie nur sehr selten benutze.

Diese Konfiguration hält mich produktiv, und macht die Arbeitsabläufe sehr vorhersagbar und mich sehr sehr schnell.

Ich benutze auch LiveReload schon seit Jahren.

Es gitb natürlich auch reichlich Optimerungen und Ergänzungen (z.B. in meiner VIM Konfiguration und den benutzen Addins) und manch große Änderungen wie z.B. die Benutzung von Docker Container zum Testen und Hosting von Services.

Mal sehen, was die nächsten 15 Jahre bringen werden

Werde ich immer noch vim benutzen (was älter ist, als ich selbst) - sehr wahrscheinlich ja.

Und werde ich immer noch Linix und Docker Container benutzen? Linux - da bin ich mir sehr sicher. Docker - wer weiß, aber ich bin mir sicher, das uns die ein oder andere Containerlösung erhalten bleiben wird.

depage-forms: Validierung von html5 Formularen (Part II)

Validierung von HTML Formularen

Dank des neuen HTML Standards und der WHATWG Group ist es einfacher als jemals zuvor Benutzer innerhalb des Browsers anzuzeigen, wenn er keine validen Daten in ein Eingabefeld eingegeben hat. Leider funktioniert dies allerdings nur in neueren Browsern, und nicht in älteren wie z.B. dem Internet Explorer 8.

Um es für Entwickler einfacherzu machen, stellt depage-forms einen einfachen Weg zur Verfügung, die an allen drei Stellen automatisch funktionert:

auf dem Server

im Browser, basierend auf den neuen Standards

im Browser, per Javascript

Dies ist ein Teil der laufenden Reihe über depage-forms

depage-forms: html5 Formulare leicht gemacht (Part I)

depage-forms: Validierung von html5 Formularen (Part II)

depage-forms: Unterteilung der Forms in Steps (Part III) / Coming soon

depage-forms: Formulare durch Vererbung der htmlform-Klasse (Part IV) / Coming soon

Standardeingabefelder

Documentation

Fork us/Source-Code

Es gibt verschiedene Standardeingabefelder, die direkt in HTML zur Verfügung stehen und direkt durch den Browser validiert werden. Dazu gehören beispielsweise input[type=email], input[type=url]. Andere wiederum zeigen ein etwas anderes User-Interface wie input[type=number], input[type=range] oder input[type=date].

depage-forms benutzt diese Felder, erweitert und verbessert das Verhalten des Browsers aber an einigen Stellen.

Pflichtfelder

Der einfachste Fall ist der, wenn man ein Feld als required markiert.

/*
 * The most simple validation: 
 * Setting 'required' so that a user has to input *something*
 */
$form->addText('username', array(
    'label' => 'User name', 
    'required' => true,
));
$form->addBoolean('accept', array(
    'label' => 'Accept terms and conditions.', 
    'required' => true,
));

Validierung basierend auf dem Typ

Eine erweiterete Validierung findet auf Basis des Eingabetype statt. Für jeden Element kann optional auch eine Fehlermeldung angegeben werden, wenn der Benutzer das Feld nicht korrekt ausgefüllt hat.

/*
 * Validation based on type:
 * The user has to provide a valid email/url for these
 * fields. If the reuqired flag is not set, the user
 * can leave the field empty, but when he fills in 
 * something, it has to be a valid email/url.
 */
$form->addEmail('email', array(
    'label' => 'Email address',
    'required' => true,
    'errorMessage' => "Please enter a valid Email",
));
$form->addUrl('website', array(
    'label' => 'Website',
    'required' => true,
    'errorMessage' => "Please enter a valid Website address",
));

Zahlen mit Minimum und Maximum validieren

Für Zahlen gibt es spezielle Minimum und Maximum Werte:

/*
 * Number input element:
 * By default, min, max, step values aren't set 
 * (Depend on browser, step is usually 1). 
 * Returns float value.
 */
$form->addNumber('Number', array(
    'min'   => 0,
    'max'   => 10,
    'step'  => 2,
));

/*
 * Range input element:
 * Same as number input element but with a slider interface.
 */
$form->addRange('Range', array(
    'min'   => 0,
    'max'   => 10,
));

Validierung auf der Basis von Regular Expressions

Die nächste Möglichkeit ist eine Validierung basierend auf Regular Expression. Diese Felder werden auf dem Server und in neuereren Browsern, die das pattern-Attribut unterstützen, auch auf dem Client getestet.

/*
 * The validator pattern has to match the complete string (HTML5 spec). Here
 * are some examples:
 */
$form->addText('singleLetter', array(
    'label' => 'Single letter', 
    'required' => true, 
    'validator' => '/[a-zA-Z]/',
));
$form->addText('lettersAndNumbers', array(
    'label' =>'One ore more letters or numbers', 
    'required' => true,
    'validator' => '/[a-zA-Z0-9]+/',
));

Validierung durch Closures

Anstatt die Validierung durch eine Regular Expression durchzuführen kann auch eine Validierungsfunktion an das entsprechende Eingabefeld gehängt werden. Die Closure-Funktion wird allerdings nur auf dem Server getestet und nicht auf dem Client ausgeführt.

/*
 * adds a closure validator:
 * attach a function to the input.
 * In this case you must enter "2" oder a string
 * containing "yes" to pass validation.
 */
$form->addText('closure', array(
    'label' => 'closure validated', 
    'required' => true,
    'validator' => function($value) {
        if ($value == 2) {
            return true;
        } else {
            return strpos($value, "yes") !== false;
        }
    },
));

Abweichung vom HTML Standard

Es gibt einen Fall, in dem die depage-forms sich signifikant anders Verhalten als normale html-Eingabefelder: Checkboxen.

In HTML5 muss der Benutzer jede Checkbox innerhalb einer Gruppe selektieren, damit das Formular validiert werden kann. Innerhalb der depage-forms verhält sich das boolean-element in der gleichen Weise.

Wenn man aber das input-multiple Element mit dem checkbox skin benutzt, muss der Benutzer nur eine Checkbox innerhald der Gruppe selektieren. Damit verhält es sich dann wie mit den Radio-Buttons/input-single.

Validierung mit Javascript

Für Browser die noch keine Validierung der Input erlauben oder zur direkten Anzeige der Fehlermeldungen kann auch die Client-seite Validierung aktiviert werden. Dazu muss jQuery, die jquery-tools und die effects.js eingebettet werden.

Hier ein komplettes Beispiel:

<?php
/*
 * Load the library...
 */
require_once('../../htmlform.php');

/*
 * Create the example form 'jsExample'
 */
$form = new depage\htmlform\htmlform('jsExample');

/*
 * Add the various input elements to the form by calling the '"add" + element
 * type' method.
 */
$form->addText('username', array('label' => 'User name', 'required' => true));
$form->addEmail('email', array('label' => 'Email address'));
$form->addBoolean('accept', array('label' => 'Accept terms and conditions.', 'required' => true));

/*
 * The validator pattern has to match the complete string (HTML5 spec). Here
 * are some examples:
 */
$form->addText('singleLetter', array('label' => 'Single letter', 'required' => true, 'validator' => '/[a-zA-Z]/'));
$form->addText('letters', array('label' =>'One ore more letters', 'required' => true, 'validator' => '/[a-zA-Z]+/'));

/*
 * The process method is essential to the functionality of the form. It serves
 * various purposes:
 *  - it validates submitted data if there is any
 *  - it redirects to the success page if all the data is valid
 *  - it stores the data in the session and redirects to the form to circumvent
 *    the form resubmission problem
 */
$form->process();

/*
 * Finally, if the form is valid, dump the data (for demonstration). If it's
 * not valid (or if it hasn't been submitted yet) display the form.
 */
if ($form->validate()) {
    /*
     * Success, do something useful with the data and clear the session.
     * The getValues method returns an array of the form element values.
     */
    echo('<a href="">back</a>');
    echo('<pre>');
    var_dump($form->getValues());
    echo('</pre>');

    $form->clearSession();
} else {
    /*
     * Load the necessary scripts. jQuery, jQuery Tools and the depage-forms
     * customization.
     */
?>
<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="../../lib/css/depage-forms.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="../../lib/js/jquery.tools.min.js"></script>
    <script src="../../lib/js/effect.min.js"></script>
</head>
<body>
<?php
    /*
     * Display the form.
     */
    echo ($form);
?>
</body>
<?php
}

Die Validierung wird on-blue ausgeführt, d.h. jedes Mal wenn ein Eingabefeld verlassen wird. Das Formular kann in diesem Fall nur abgeschickt werden, wenn alle Felder valide Daten enthalten.

Hier das Live-Beispiel:

<iframe class="example" src="https://docs.depage.net/depage-forms/Docs/examples/js-validation.php" seamless="seamless" style="height: 45em;"></iframe>

http://docs.depage.net/depage-forms/documentation/html/js-validation_8php-example.html

Komplexere Validierung mit Abhängigkeiten

Komplexere Validierungen mit Abhängigkeiten zwischen verschiedenen Eingabefeldern sind möglich. Diese sollten aber über die Vererbung der htmlform auf eine Unterklasse gelöst werden. Das wird der Inhalt eines weiteren Posts werden.

Die nächsten Schritte

In den nächsten Posts über depage-forms werden wir uns dann den erweiterten Features der depage-forms zuwenden, wie beispielsweise:

die Unterteilung der Forms in Subforms (Steps)

Formulare durch Vererbung der htmlform-Klasse

Getting things done without getting the word out

Arbeit

Es ist sehr sehr lange her, dass ich es geschafft habe, hier einen Artikel zu veröffentlichen. Der Grund ist nicht, dass es nichts zu erzählen gäbe. Aber wir arbeiten so viel, dass in der Regel leider einfach keine Zeit bleibt, darüber zu schreiben. Weshalb? Nun. Es wartet immer schon das nächste Projekt, das so schnell wie möglich fertig werden möchte.

Ich bin mir auch sicher, dass wir nicht die einzigen sind, denen es so geht: Eine Menge Freelancer und kleinere Agenturen, die ich kenne, schaffen es nicht regelmäßig zu kommunizieren, an was sie gerade arbeiten. Manche schreien statt dessen einfach auf Twitter oder Facebook. Ich muss aber zugeben, dass ich ungern prahle. Nichtsdestotrotz denke ich, das manche Dinge es aber auf jeden Fall wert sind, gesehen zu werden.

Ich wollte darüber schon vor... nun... vor mehr als einem Jahr schreiben.

Das soll sich ändern – Ab heute!

Woran arbeiten wir denn nun?

Als erstes, Screen Pitch:

Screen-Pitch ist eine Online Plattform, die es Drehbuchautoren ermöglicht, Produzenten ihre Ideen als Video-Pitche vorzustellen. Von Linus Foerster gegründet, haben Ben und ich screen-pitch.com auf der Basis von depage-cms umgesetzt.

Hier könnt ihr Euch den Pitch für Screen Pitch ansehen.

Was sonst?

Eine Menge von Webseiten.

Beispielsweise die dritte Generation von pop-up-my-bathroom. Dieses Mal in Purple mit einem neuen Responsiven Layout:

Oder eine Webseite für die SPD Baden-Württemberg zu ihrem 150 jährigen Bestehen zusammen mit IFK Berlin. Hierfür haben wir speziell eine Tablet-optimierte Zeitleiste gestaltet, mit der man mit einem Swipe von einem Jahr zum nächsten durch die Zeit reisen kann.

Eine neue CD

Ich habe zudem das Design für die neue CD »A Kit for Mending Thoughts« für die Sängerin Efrat Alony gemacht. Es hat wahnsinnig Spass gemacht, die kleinen Puppen aus Papier zu bauen und damit dann kleine Geschichten zu erzählen. Ich werde später darüber noch genauer schreiben.

Ihr könnt Euch einige der Songs auf der alony Website anhören. Noch besser wäre es aber, wenn ihr direkt das Album kauft... ;-)

Opensource

Während wir an all diesen Dingen gearbeitet haben, haben wir es auch geschafft, manch übergreifende Dinge zu implementieren, die wieder als Opensource veröffentlicht werden sollen. Dazu gehören eine Reihe von jQuery Plugins:

depage-magaziner, ein Plugin für einen Touch basierte Seitennavigation

depage-player, ein HTML5-Flash Video Player den wir auf screen-pitch.com einsetzen

depage-shy-dialogue, ein unaufdringlicher Dialog

depage-growl, eine Benachrichtigungsbibliothek, die native Browser-Benachrichtigungen benutzt, wo verfügbar, und ein schönes HTML-Fallback für alle anderen Browser hat

Und zu guter Letzt:

Ich habe im Februar und Mai zwei Workshops an der hfg Offenbach gegeben (einen zum Thema Tablet-Magazine und einen zweiten zum Thema Responsive Design).

Und morgen werde ich zur CSSConf.eu gehen, um dort hoffentlich ein paar sehr gute Leute von Angesicht zu Angesicht treffen.

Stay tuned!

Die Ideenkonserve

So sicherst Du Deine Ideen vor dem Verlust.

Zinnobergruen hat das wunderbar gestaltete Notizbuch "Ideenkonserve" für Chromolux gemacht. Man kann es kostenlos auf ideenkonserve.de bestellen.

Wir haben die Website umgesetzt, die mit Hilfe der kommenden Version von depage-cms und den neuen depage-forms implementiert wurde.

Es gibt sechs wunderschöne Kategorien für Deine Ideen:

Revolutionäre Ideen

Profitable Ideen

Epochale Ideen

Grüne Ideen

Erleuchtende Ideen

Kleine Ideen

Die Ideenkonserve

Revolutionäre Ideen

Profitable Ideen

Epochale Ideen

Grüne Ideen

Erleuchtende Ideen

Kleine Ideen

Und bald wird es auch eine iPhone-App der Ideenkonserve geben, die wir entwickeln.

Du möchtest wissen, wenn sie erhältlich sein wird?

Einfach hier registrieren!

depage-forms: html5 Formulare leicht gemacht (Part I)

HTML Formulare: Leicht und schwer zugleich

HTML-Formulare sind leicht zu erstellen – aber sie wirklich gut und benutzerfreundlich zu machen, das ist keine einfache Aufgabe.

Es gibt dabei eine Reihe von Dingen, die man immer wieder und wieder machen muss:

Den HTML-Source für die Form schreiben

Die Stylesheets dafür festlegen

Die eingegeben Daten im Browser validieren (optional)

Die eigegebenen Daten auf dem Server validieren (niemals optional – das bitte nie vergessen!)

Und zusätzlich noch dafür sorgen, dass der Benutzer nicht mit dem Browser kämpfen muss: Beispielsweise bei unverständlichen Meldungen über das erneute Senden von Daten immer dann, wenn die Seite neu geladen wird oder der Benutzer den Vor- oder Zurück-Button benutzt.

Dies ist ein Teil der laufenden Reihe über depage-forms

depage-forms: html5 Formulare leicht gemacht (Part I)

depage-forms: Validierung von html5 Formularen (Part II)

depage-forms: Unterteilung der Forms in Steps (Part III) / Coming soon

depage-forms: Formulare durch Vererbung der htmlform-Klasse (Part IV) / Coming soon

Nicht mehr ständig kämpfen müssen!

Weil wir es satt waren immer wieder den gleichen Kampf zu führen, präsentieren wir heute:

depage-forms – HTML5-Formulare einfach gemacht!

Documentation

Fork us/Source-Code

depage-forms ist eine PHP Bibliothek um einfach und schnell HTML-Formulare zu erzeugen, die es einfacher für Entwickler aber auch einfacher für Benutzer macht.

Sie ist Teil der nächsten Version von depage-cms, kann aber auch unabhängig als PHP Library benutzt werden. Indem sie HTML abstrahiert, verschiedene Browser-Flaws behebt (u.a. doppelte Form-Submissions) und die Validierung der Daten vereinfacht, ermöglicht sie auf einfache Weise verlässliche und validierte Daten von den Benutzern zu bekommen.

Wir sind (bei weitem) nicht die ersten, die sich dieser Probleme annehmen. Für PHP gibt es beispielsweise Zend-Forms und Phorms. Aber wir denken, das wir einen eigenen und guten Weg gefunden haben, um uns diese Probleme vom Leib zu halten.

Wie funktioniert das ganze nun?

Zuerst laden wir die Bibliothek und initialisieren eine Instanz der htmlform-Klasse. Fast alle Prozeduraufrufe erfolgen durch die htmlform-Klasse. Nur Fieldsets und Steps werden ebenfalls explizit vom Developer angesprochen. Dazu aber später noch mehr.

<?php
require_once('path/to/htmlform.php');

$form = new depage\htmlform\htmlform('simpleForm');

Danach fügen wir unsere Input-Elemente und andere Formfelder zu unserem Formular hinzu.

Man macht dies indem man die '"add" + Elementname'-Methode aufruft. Der erste Parameter ist dabei der Name des Elements, der auf jeden Fall eindeutig sein muss. Der zweite Parameter ist ein optionaler Array mit verschiedenen Optionen. Jede dieser Einstellungen ist optional und hat eine in dem meisten Fällen passende Standardeinstellung.

Wenn beispielsweise kein Parameter "label" übergeben wird, dann wird der Input-Name als Label verwendet. Zu jedem Input kann man zudem eine "required"-Eigenschaft hinzufügen, so dass der Benutzer die Dateneingabe nur beenden kann, wenn er dieses Formfeld auch ausfüllt.

$form->addText('username', array(
	'label' => 'User name', 
	'required' => true,
));
$form->addEmail('email', array(
	'label' => 'Email address',
));

Als nächstes kommt dann die "process"-Methode – Diese ist ein essentieller Teil der htmlform-Klasse.

Sie validiert die eingegebenen Daten, wenn das Forumlar schon abgeschickt wurde.

Sie leitet den Browser zu der "Success"-Seite weiter, wenn alle eingegebenen Daten korrekt validiert werden konnten und wenn alle benötigten Formfelder (required) ausgefüllt wurden.

Sie speichert die eingegeben Daten in einer Session ab und leitet das Forumlar zu sich selbst weiter um das Problem der erneuten Sendung der Daten (resubmission) zu umgehen. D.h. das zunächst die Formulardaten über POST-Request gesendet werden und dann das Formular erneut über einen GET-Request angezeigt wird. Mehr Informationen hierzu: PRG-Pattern auf Wikipedia

(Hinweise: Man sollte sicher stellen, das die process-Methode vor jeglichem anderen Output ausgeführt wird, so dass sich die Form selbst weiterleiten kann.)

$form->process();

Nachdem das Formular nun korrekt bearbeitet wurde, wissen wir ob alle eingegebenen Daten korrekt validiert werden konnten:

Bei "korrekten" Daten, könne wir nun alles damit machen, was wir wollen. Hier geben wir die Daten einfach mit var_dump aus.

Die eingegebenen Daten werden so lange in einer Session abgespeichert, bis wir entweder die clear-Methode der htmlform aufrufen, oder bis die Session von selbst abgelaufen ist.

Wenn die Form noch leer ist, oder der Benutzer noch keine kompletten Daten eingegeben hat, dann können wir das Formular einfach mit "echo" ausgeben.

if ($form->validate()) {
    var_dump($form->getValues());

    $form->clearSession();
} else {
    echo ($form);
}

Live-Beispiel

Und hier das live-Beispiel:

<iframe class="example" src="https://docs.depage.net/depage-forms/Docs/examples/simple.php" seamless="seamless" style="height: 30em;"></iframe>

http://docs.depage.net/depage-forms/documentation/html/simple_8php-example.html

Die nächsten Schritte

In den nächsten Posts über depage-forms werden wir uns dann den erweiterten Features der depage-forms zuwenden, wie beispielsweise:

Validierung der Daten, die automatische Typkonvertierung der eingegebenen Daten und

die Unterteilung der Form in Subforms (Steps)

Formulare durch Vererbung der htmlform-Klasse

schwarz auf weiß: uebele.com

Das büro uebele ist mit depage::cms online

Die Website des in Stuttgart ansässigen büro uebele wurde nun auf der Basis von depage::cms umgesetzt. Die Gestaltung der Seite entspricht weitesgehend der Variante, die auch schon vorher online war. Konzept und Design sind von Andreas Uebele und Tristan Schmitz.

Wir haben die Seite aber technisch überarbeitet:

Das HTML-Markup wurde optimiert und bildet die Seite semantisch besser ab.

Die Seite hat einen Atom-Feed für ihre News bekommen, der unter feeds.feedburner.com/uebele/de abonniert werden kann.

Die Bildnavigation auf den Projektseiten wurde überarbeitet, so dass die Bilder per Javascript ineinander übergeblendet werden. Wenn kein Javascript zur Verfügung steht, werden alle Bilder barrierefrei untereinander dargestellt.

Das Logo ist in zwei Versionen eingebunden: Als Bitmap (png) und als Vektordatei (svg) auf Browsern, die SVG unterstützen.

Zudem wurde die Seite etwas besser für Suchmaschienen überarbeitet — dies wird aber noch weiter optimiert werden.

In Kürze wird es auch noch einen eigenen Videoplayer für die Website geben, die in die Bildnavigation integriert ist.