Inhaltsverzeichnis für 39/2018 in SCREENGUIDE

ANDROID THINGS 1.0 Nach einigen Developer Previews hat Google Anfang Mai sein Android Things 1.0 veröffentlicht – ein Betriebssystem für das Internet der Dinge. Es ist der Nachfolger des wenig erfolgreichen Brillo. Android Things wird seit eineinhalb Jahren entwickelt, dabei ist laut Google das Feedback von 10.000 Entwicklern eingeflossen. Die APIs standen bereits mit dem Release Candidate fest, aber bei den Hardwareplattformen gibt es einige Neuerungen. Zu den neuen System-on-Modules (SoM) gehören die Hardware- Plattformen: NXP i.MX8M, Qualcomm SDA212, Qualcomm SDA624 und Mediatek MT8516. Diese Module sind für den Produktions- Einsatz zertifiziert. Google verspricht einen Long-Term Support von drei Jahren, der mindestens Stabilitätskorrekturen und Sicherheitsupdates beinhaltet. Da die Sicherheit der Geräte über längere Zeit gewährleistet werden soll, sind automatische Updates bei diesen Geräten per Default eingeschaltet. Das Raspberry Pi 3…

Wer Mitte der 2000er-Jahre „Frontend-Entwicklung” im Web betrieben hat, war die meiste Zeit damit beschäftigt, browserspezifische Fehler zu finden und zu beheben. Der Begriff „Frontend-Entwicklung” war damals überhaupt noch nicht geläufig. Man sprach von Webdesign. Schaut man auch nur mal fünf Jahre zurück ins Jahr 2013, so waren viele Entwicklungen, die wir heute als De-facto-Standard ansehen, in diesem Bereich oft noch in den Kinderschuhen oder gar nicht erfunden. Im März 2013 veröffentlichte Facebook das von Jordan Walke geschriebene JavaScript Framework React; bereits im Juni 2011 wurde das heute so bekannte PHP-Framework Laravel veröffentlicht und entwickelte sich in der Zeit bis 2015 zur Nummer eins; das Machine Learning Framework TensorFlow wurde gar erst 2015 von Googles Brain Team veröffentlicht und ist heute die Grundlage vieler Projekte, in denen Künstliche Intelligenz zum…

Das CSS soll bitte möglichst modular geschrieben werden – und natürlich kompakt, komprimiert und ohne Redundanzen. Bei JavaScript möchten Sie die heißesten Features verwenden, aber trotzdem alte Browser bedienen. Und wenn Sie doch die HTMLDatei des Menüs nur einmal bearbeiten müssten und trotzdem alle Seiten aktualisiert würden! Doch nicht nur das: Oft ist eine Reihe an Vorgängen nötig, um das Resultat so auszuliefern, wie es allgemein als optimal gilt. Sie kompilieren Sass nach CSS, minifizieren, indem Sie unnötige Whitespaces und Longhand Properties löschen, und fügen noch dort Vendor Prefixes hinzu, wo es nötig ist. Vorher müssen Sie sich natürlich erst schlau machen, welche Prefixes Sie überhaupt für Ihre Zielplattform benötigen. Webworker kennen alle die mühevolle Hausarbeit, die selten manuell durchführbar ist. Die Lösung findet sich in einer Vielzahl an Werkzeugen.…

Viele Teams verfügen über einen eigenen Architekten oder Lead Developer. Wer aber „jetzt sofort” einen Tipp braucht, hilft sich besser selbst. Für die richtige Detail-Architektur nimmt Ihnen niemand die Kleinarbeit ab. Software hantiert mit Daten. Allerdings sind „reale” Daten komplexe Gebilde – Computer arbeiten aber letztlich mit einzelnen Bits. Folglich müssen die Daten irgendwie strukturiert abgebildet werden. Das klingt einfach, aber schon hier kann eine Menge schiefgehen. Deshalb stelle ich an den Anfang des Kapitels Überlegungen zu strukturierten Daten, bevor ich mir typische Fragen zu Entwurfsmustern und anderen Aspekten von Software-Architektur vornehme. Um zu illustrieren, wie Sie Daten strukturieren sollten (und wie nicht), zeige ich Ihnen zwei Beispiele. EINSTELLUNGEN IN DER DATENBANK In einem größeren Projekt lief mir vor längerer Zeit eine Anwendung über den Weg, die Konfigurationsdaten aus einer…

Ursprünglich als Nachfolger des bekannten TYPO3-CMS gestartet, ist Neos seit 2015 ein eigenständiges Open-Source-Projekt mit äußerst lebendiger Community. Es liegt mittlerweile in Version 4.0 vor und bildet eine moderne Grundlage für Websites und Content-basierte Webanwendungen – die Entwickler sprechen von einer „Content Application Platform”. Eine Übersicht der Benutzeroberfläche von Neos gibt es als offizielles Video [goo.gl/1e2JHF]. INLINE EDITING ALS GRUNDPRINZIP Anstelle von Formularfeldern oder Textboxen bearbeiten Autoren in Neos direkt die echten Website-Inhalte – und zwar im gleichen Layout, das auch die Besucher der Website zu sehen bekommen. Dieses „Inline Editing” genannte Bearbeitungsprinzip macht den Content für die Autoren schon bei der Erstellung greifbar und wurde mittlerweile auch von anderen CMS aufgegriffen. Zur Bearbeitung von strukturierten Daten, wie beispielsweise Metainhalten oder Bildern, können Autoren zusätzlich auf einen Oberflächenbereich mit frei…

Bald vier Jahre ist es nun her, dass ich mich hier in dieser Kolumne schon einmal der Thematik der Web-Apps gewidmet habe (Screenguide #24). Bereits damals standen Begriffe wie das Web Manifest und Service Worker im Raum, wenngleich sie noch ganz in den Anfängen steckten. In dieser Kolumne habe ich mich mit der Frage befasst, wie sehr es uns Webentwickler im Wettlauf mit nativen Apps voranbringt, wenn wir unsere Websites mit einem Installationsmechanismus ausrüsten. Ziehen wir dann mit nativen Apps gleich? Mein Fazit war, dass das alleine nicht reicht. Denn was bei all den Debatten über neue Web-APIs oft weggelassen wurde, waren Gedanken zum entsprechenden User Flow. Und das ist heute immer noch so. Schön, dass wir technisch in der Lage sind, Webseiten dauerhaft auf einen Homescreen zu installieren, doch…

NETZPOLITIK Urheberrechtsrichtlinie: Der EU-Rat hat sich auf einen gemeinsamen Kurs für eine neue Urheberrechtsrichtlinie verständigt. Wichtig sind dabei zwei Punkte: Zum einen sollen künftig alle Uploads auf großen Internet-Plattformen wie Youtube gefiltert werden, um Urheberrechtsverletzungen zu verhindern. Zum anderen soll das umstrittene und verlegerfreundliche Leistungsschutzrecht eingeführt werden. [bit.ly/2GUpbh1] Vorratsdatenspeicherung: Eigentlich sieht das Gesetz zur Vorratsdatenspeicherung vor, dass Informationen über Telefon- und Internetverbindungen seit Juli letzten Jahres gesichert werden. Im April hat das Verwaltungsgericht Köln geurteilt, dass dies aber nicht mit europäischem Recht vereinbar sei. Ebenso hatte im letzten Jahr das Oberverwaltungsgericht Nordrhein-Westfalen im Eilverfahren entschieden. [bit.ly/2KZ9FCJ] WEBSTANDARDS/W3C CSS Layout API: Im April hat das W3C den First Public Working Draft der CSS Layout API Level 1 veröffentlicht. Dieser ist Teil einer großen Vision der W3C Task Force „Houdini”. Zusammen mit…

1 SUPER ANTHONY In den 1960er-Jahren kamen die „Rock ’Em Sock ’Em Robots” auf den Markt. Zwei Spieler konnten dabei mit einem roten und einem blauen Box-Roboter solange gegeneinander kämpfen, bis ein Roboter „den Kopf verlor”. Heutzutage braucht es etwas mehr, um die Massen zu begeistern. Der Super Anthony ist ein kleiner, moderner Kampfroboter, der sich über einen Spiele-Controller oder ein Smartphone steuern lässt. Er ist etwa 38 cm groß und wiegt 2 kg. Mit seinen 15 Servomotoren schafft Super Anthony eine ganze Reihe von beachtlichen Moves wie Straight Punch, Uppercut, Side Kick, Split Kick, Backward und Forward Roll. Darüber hinaus können Sie auch eigene Moves programmieren – oder noch weiter gehen und Ihren Roboter mit GPS oder Sprachsteuerung ausrüsten. So ein kleiner Kampfzwerg hat allerdings seinen Preis. In der…

Lange Zeit wurde sie nur wenig beachtet, obwohl es sie schon seit 2016 gibt und obwohl denjenigen, die sie zum 25. Mai 2018 nicht umgesetzt haben, empfindliche Strafen drohen: die Datenschutz-Grundverordnung (DSGVO). Sie führt zu weitreichenden Verpflichtungen für Unterneh men und Website-Betreiber, um Kunden- und Nutzerdaten besser zu schützen. Trotz der langen Übergangszeit und des Presserummels in den letzten Monaten erklärten aber in einer repräsentativen Forsa-Umfrage im Auftrag des Gesamtverbandes der Deutschen Versicherungswirtschaft einen Monat vor dem Start noch 36 Prozent der kleinen und mittleren Unternehmen, nie etwas von den neuen Regeln gehört zu haben. Ein Fünftel wusste davon, hatte aber noch keine Maßnahmen ergriffen. Es ist also anzunehmen, dass auch jetzt noch zahlreiche Firmen, Selbstständige und Vereine entweder nur teilweise oder überhaupt nicht gehandelt haben. EINZUG INS INTERNET ZEITALTER…

Für gewöhnlich bedeutet Refactoring, dass bei gleichbleibendem Verhalten einer Software für den Nutzer die darunterliegende Code-Architektur verbessert wird. Das Ziel ist dabei, die Lesbarkeit, Verständlichkeit, Wartbarkeit und Erweiterbarkeit des Codes zu verbessern. Anders herum betrachtet geht es darum, technische Schuld abzubauen. Technische Schuld ist ein unkonkreter Begriff, aber im Grunde ist damit technisch schlecht umgesetzte Software gemeint. Das kann viele Gründe haben. Zum Beispiel soll die erste Version einer Website möglichst schnell online gehen. Verschiedene Entwickler haben parallel gearbeitet, ohne sich abzustimmen. So kann es zum Beispiel passieren, dass gleiche Elemente wie etwa Buttons oder Teaser mehrmals gebaut wurden. Jeweils mit unterschiedlichem Code. In diesem Fall muss bestenfalls entschieden werden, welcher Code verwendet wird. Schlimmstenfalls wird es notwendig, die einzelnen Code-Teile zur Zusammenführung zu überarbeiten. EINMAL ERSTELLT UND FERTIG? Die…

Die Programmierung eingebetteter Systeme, also von Systemen zur Steuerung oder Regelung technischer Prozesse, war bis vor wenigen Jahren eine Welt für sich. Wollten Sie Software für eine Steuerung oder Regelung entwickeln, die mit den stark beschränkten Ressourcen eines Mikrocontrollers lauffähig war, so kamen Sie um das Studium oft mehrerer Hundert Seiten langer Datenblätter und Referenz-Handbücher nicht herum. Am Ende eines solchen Prozesses stand dann häufig eine lange Sequenz von Befehlen, üblicherweise in der Programmiersprache C verfasst, die den Mikrocontroller und eventuell daran angeschlossene Peripherie- Bausteine in den korrekten Betriebsmodus versetzten. Diesen Code konnten Sie anschließend mit teuren, herstellerspezifischen Compilern übersetzen und mithilfe mindestens ebenso teurer Programmierwerkzeuge auf den Mikrocontroller übertragen. In den meisten Fällen geschah dann erst einmal: nichts! Zu diesem Zeitpunkt kam dann oft, wie auch später bei der…

Hybride Apps stellen eine besondere Art von Apps dar, die einige Vorteile, aber auch Nachteile mit sich bringen. Die Vorteile sind geringere Kosten und eine kürzere Entwicklungsdauer, da der Code für eine hybride App plattformübergreifend geschrieben werden kann. Bei nativen Apps muss der Code hingegen für jede Plattform (iOS, Android) gesondert entwickelt werden. Die größten Nachteile hybrider Apps können eine langsamere Geschwindigkeit und ein eingeschränkter Zugriff auf die Hardware des jeweiligen Endgeräts sein. Beides hängt allerdings stark von der Art der App ab. Handelt es sich eher um ein reines Informationssystem, fallen die Nachteile kaum ins Gewicht. Das Hauptaugenmerk von Framework7 liegt in der Bereitstellung von UI-Komponenten, die exakt so aussehen und sich verhalten wie native Elemente von iOS oder Android. Für Android wird Googles Material Design eingesetzt. INSTALLATION Nach…

Facebook hat Begriffe wie „Walled Gardens” oder „Closed Silos” geprägt und ist immer noch der Inbegriff des „geschlossenen Netzwerks”. Dabei hat Mark Zuckerberg sehr viel investiert, um dieses Image loszuwerden. Facebooks Graph API ist die umfassendste API in dieser Größenordnung, sie gibt Zugriff (schreibend und lesend) auf die eigenen Daten und die Daten der Freunde [goo.gl/nrsGii]. Facebook Connect hat das Thema „SingleSignon” revolutioniert und David Recordon (damals Engineering Director bei Facebook) hat gemeinsam mit der OpenID Foundation versucht, diesen Prozess zu standardisieren [goo.gl/1giQMN]. Facebook stellte, als eines der ersten sozialen Netzwerke, einen kompletten Datenexport bereit [goo.gl/27iVPs], entwickelte das Open Graph Protocol [ogp.me] und experimentierte mit Microformats [goo.gl/YhBGmM]. Ich könnte die Liste noch weiterführen, aber ich glaube, mein Punkt sollte klar sein: Facebook hat in den letzten zehn Jahren viel investiert,…

VIDEO Progressive Web AMPs: the Story so Far. Eric Lindley, Produkt Manager für Googles AMP, spricht über die Vorteile einer Kombination von PWA und AMP. [bit.ly/2IP1nAX] OfflineFirst Apps with PouchDB and CouchDB. Lorna Mitchell demonstriert, wie OfflineFirst-Applikationen auch ohne Verbindung zum Web funktionieren können. [bit.ly/2krE7KF] Build Anything With React. Jani Evakallio zeigt, wie Sie mit React und React Native Applikationen für viele verschiedene Plattformen entwickeln können. [bit.ly/2Lznw43] Web Annotation: The Web’s Conversation Layer. Lyza Danger Gardner erklärt den neuen Web-Standard „Web Annotation” und die möglichen Probleme der Technik. [vimeo.com/268382478] Pop, rights?! Zwischen Netz und Politik. Markus Beckedahl gab auf der letzten re:publica wieder seinen jährlichen netzpolitischen Überblick. [bit.ly/2JcgBza] Nicolai Schwarz, Autoreninfos auf Seite 3 Twitter-Account: @textformer…

Das bisherige Angebot von Invision ist als Webservice konzipiert und ermöglicht es, fertigen Grafikdesigns Leben einzuhauchen [invisionapp.com]. Mithilfe der Weboberfläche können Sie zuvor hochgeladene Layouts in eine Reihenfolge bringen, mit klickbaren Bereichen versehen, animierte Übergänge erstellen und das Ergebnis vor Kunden oder Mitarbeitern präsentieren. So wird aus einem statischen Layout eine rudimentäre Bedienoberfläche, welche die Idee des Produkts und seiner Benutzerführung besser verdeutlicht als eine starre Grafik und wortreiche Erklärungen. Die Erstellung der Screendesigns selbst muss in diesem Fall allerdings durch ein separates Grafikprogramm wie Sketch oder Photoshop erfolgen. Deshalb ist Invision vor allem Sketch-Anwendern schon länger ein Begriff. Während Sketch aus dem Hause Bohemian an Beliebtheit gewann, ergänzte der Invision-Webservice die native Layoutsoftware um Funktionen, die Sketch lange vermissen ließ: Präsentation und Prototyping. Im vergangenen Jahr erweiterte Invision sein…

Social Media ist dafür prädestiniert, als Marketing-Tool genutzt zu werden. Das gilt insbesondere für Solo-Unternehmer, die sich dadurch kostengünstig selbst vermarkten können und zielgenau ihre Qualitäten und Fähigkeiten darstellen. Einige dieser Selbstvermarkter haben es zu einer beachtlichen Bekanntheit gebracht: Sie sind selbst zur Marke geworden. Doch sollten ihre Berichte Trollen in die Quere kommen, werden sie zum Zielobjekt für Hass und werden angegriffen. Und die bestehenden Gesetze verschärfen die Lage zum Teil noch. ALS INFLUENCER ZUR MARKE WERDEN Der Diplom-Journalist Richard Gutjahr hat die Schattenseite der Web-Prominenz schmerzlich erfahren müssen. Er ist ständig auf der Suche nach neuen Herausforderungen und setzt innovative Methoden und Technologien scheinbar spielerisch ein. Und er kommuniziert auf allen Kanälen darüber: vom Blog gutjahr. biz über Social Media bis zu Live-Auftritten vor großem Publikum. Damit hat…

Gerrit van Aaken Webdesigner, whitespace GmbH @gerritvanaaken Es ist kein Geheimnis, dass HTML ursprünglich für wissenschaftliche Dokumente entwickelt wurde. Die sechs Überschrift-Ebenen <h1> bis <h6> zeugen sehr deutlich davon. Die Transformation zu einer reichhaltigeren Semantik, mit der sich auch Zeitungsund Magazin-Inhalte sinnvoll abbilden lassen, ist im Zuge von HTML5 inzwischen fast abgeschlossen – mit <figure> und <figcaption> haben wir beispielsweise handhabbare Bildunterschriften bekommen. Doch ein Detail fehlt noch immer: Ergänzungen zur Headline eines Artikels, die entweder darüber (als Dachzeile) oder darunter (als Subheadline) platziert werden. Es fehlen Elemente wie <prehead> und/oder <subhead>, und tatsächlich wurde deren Spezifikation vor fünf Jahren im W3C einmal ernsthaft angedacht. Es wäre die pragmatischere Variante zur aktuellen „Best Practice”, nämlich dem Umschließen des gesamten Konstruktes mit einem <header>-Element und dem Auszeichnen der Subheadline mit einem…

Komplette Neuimplementierungen sind immer mit Risiken verbunden. Selbst große Softwareunternehmen scheuen den Aufwand. Der Abbau technischer Schulden und die Nutzung moderner Tools rechtfertigen oft nicht die hohen Kosten. Das ist insbesondere dann der Fall, wenn die betreffenden Entwickler nur in ihrer Freizeit und unbezahlt tätig sind. Das Core Team des Content-Management-Systems Neos hat sich trotzdem getraut, die Benutzeroberfläche seines CMS in React und Redux vollständig neu zu schreiben. React ist eine JavaScript-Library für komponentenbasierte Frontend-Entwicklung. In Verbindung mit dem Zustands-Store Redux bildet es den Kern vieler moderner Webanwendungen. Es zahlte sich aus: Selbst React-Erfinder Dan Abramov lobte das Team für seine Entscheidung (Abb. 1). KOMPLEXE OBERFLÄCHE FÜR INLINE EDITING Warum braucht ein CMS überhaupt eine JavaScript-UI? Beliebte CMS wie etwa Wordpress kommen mit einer Reihe von Textfeldern mit Rich-Text-Funktionalität aus.…

Es war schon erstaunlich, zu sehen, was Kunden in den letzten Jahren in Aufruhr versetzt hat. Eine kritische Sicherheitslücke in einem der großen CMS? Nun ja, nicht ideal, aber muss so ein dummes Update denn nun wirklich sein? Ein neues Datenschutzgesetz hingegen? Hui, da muss man nun aber mal ran! Alarmstufe Rot! Endzeitstimmung! Ein Kollege erzählte neulich, er habe einen seiner Kunden darauf hingewiesen, dass normale DSGVO-Maßnahmen nichts nützten, da das CMS der Website hoffnungslos veraltet sei und die User-Daten aufgrund der bekannten Sicherheitslücken schlicht nicht sicher sein könnten. Antwort des Kunden: „Wir nehmen Ihre Bedenken zu Kenntnis, würden aufgrund des zu erwartenden erheblichen Mehraufwands trotzdem auf das Update verzichten.” Hauptsache es steht Datenschutz drauf. Weil aber niemand so genau weiß, was denn nun genau auf der Seite für den…