Das Erwachen der digitalen Revolution – ein Zeitverlauf

Das Erwachen der digitalen Revolution – ein Zeitverlauf

Ständig heißt es: „Wir leben in einem digitalen Zeitalter“ Internet, Smartphones und Apps sind im alltäglichen Leben längst angekommen, das Internet der Dinge weiter am Wachsen und künstliche Intelligenzen im Vormarsch. Dennoch scheint noch einiges zu tun zu sein. So betonte Bundeskanzlerin Angela Merkel erst kürzlich, dass Deutschland nicht im Technikmuseum enden dürfe. Das Land solle sich beim digitalen Fortschritt nicht abhängen lassen. Doch wie hat das mit dem digitalen Fortschritt angefangen? Ab wann begann die digitale Revolution? Heute nehmen wir euch mit auf eine kleine Zeitreise durch die Geschichte der Informatik, des PCs und Internets und wie es unser aller Leben in Deutschland und auf der Welt verändert und vorangebracht hat.

Computer – Computare – Rechnen

Der erste Programmierer der Welt war eine Frau. Ada Lovelace, eine britische Mathematikerin. Sie schrieb Mitte des 19.Jahrhunderts ein Programm für eine Rechenmaschine, die vier Grundrechenarten beherrschte. Rechenmaschinen gelten als Vorläufer des Computers, was übrigens lateinisch-englisch ist und so viel wie Rechenmaschine bedeutet, und wurden seit Mitte des 17. Jahrhunderts entwickelt. In den folgenden Jahrzehnten wurden viele solcher Gerätschaften entwickelt, eine serienmäßige Produktion blieb jedoch aus.

Gab es zunächst nur Rechenhilfen, wurde der Computer erstmals im 2.Weltkrieg als elektromechanische und vollelektronische Datenverarbeitungsmaschine entwickelt und benutzt. Diese Maschinen waren jedoch noch richtige Anlagen, die ständig gewartet werden mussten und nur einen Bruchteil der Rechenleistung besaßen, die ein heutiger PC besitzt. In den 1970ern gelang der Firma Intel dann die Überraschung mit ihrem Mikroprozessor – das Herz eines jeden modernen Computers und der ganze Reihen von Transistoren Platz sparend auf einem Stück Silizium unterbringen konnte. Der Grundstein zur Massenproduktion von Personal Computern wurde gelegt. Der Rest verlief fast wie im Zeitraffer.

Mehr als 40 Jahre Innovation

  • 1973 produziert Motorola das erste Handy.
  • 1976 bringt Apple sein erstes Produkt auf den Markt.
  • 1981 treibt IBM mit seinem Personal Computer die PC-Revolution voran.
  • 1985 veröffentlicht Microsoft Windows 1.0.
  • 1989 entwickelt Tim Berners-Lee die Programmiersprache HTML.
  • 1991 wird das World Wide Web geboren.

Tim Berners-Lee, Vater von HTML (HyperText Markup Language) und WWW, beginnt 1989 mit seinen Arbeiten rund um die Internet-Revolution. Das Internet als solches, eine Verbindung zwischen Computern, gab es bis dato schon. Berners-Lee, der zu dem Zeitpunkt im Schweizer Kernforschungszentrum, dem CERN, in der IT-Abteilung arbeitete, sollte eigentlich ein Programm schreiben, das die Kommunikation zwischen Computern in CERN vereinfachen sollte. Er aber denkt größer. Und entwickelt neben dem World Wide Web, das die Infrastruktur des Internets wie ein Auto nutzt, auch noch HTML, URL und http. 1991 stellt er seine Ergebnisse auf der ersten Website der Welt der Weltöffentlichkeit zur Verfügung.
2 Jahre später sind schon 130 Websites, 1997 schon eine Million. Aktuell zählt das World Wide Web mehr als 1,2 Milliarden Websites. And going.

Mit der Einführung des iPhone, des ersten Smartphones, veränderte sich die digitale Welt nochmal komplett.  Andere Hersteller ziehen mit eigenen Produkten nach. Die Verschmelzung von Telefon und Computer ist nun perfekt. Smartphones dominieren heute unser Leben und die Digitalisierung ist endgültig im Alltag angekommen. Der Mensch ist immer mobil, immer erreichbar.

Nächste Woche wird’s wieder spannend! Wir betrachten anlässlich der Deutschen Einheit die Digitalisierungs-Unterschiede in Ost und West und schauen, ob Deutschland wirklich im Technikmuseum landen könnte. Bis dahin!

Accelerated Mobile Pages

Accelerated Mobile Pages

Heute stellen wir euch eine der aktuellsten Entwicklungen im Bereich mobiler Internetnutzung vor:

Accelerated Mobile Pages (AMPs) sind auf mobile Nutzung spezialisierte Websites, die sich durch stark verringerte Ladezeiten auszeichnen. Es handelt sich dabei um ein von Google unterstütztes Open Source Projekt, das die Benutzerfreundlichkeit von mobilen Websites deutlich steigern soll. Sie sollen außerdem unabhängig von der Art des verwendeten Smartphones, Tablets, etc. sein.

Deutlicher Trend zur Nutzung mobiler Websites
In den letzten Jahren zeichnet sich ein deutlicher Trend zur Nutzung von Websites über mobile Endgeräte ab. Vor allem zum Lesen von Nachrichten oder für Online-Shopping werden vermehrt Smartphones oder Tablets verwendet. Durch lange Ladezeiten von Websites erhöht sich jedoch die Absprungrate der Nutzer – je länger eine Seite lädt, desto mehr Nutzer und potentielle Kunden brechen den Ladevorgang ab. Dadurch verringert sich zum Beispiel für Publisher die Anzahl ihrer Leser und die Höhe der Werbeeinahmen. Da die Zukunft des Internets in vielen Bereichen mobil ist, muss sich also an die veränderte Nutzung des Internets angepasst werden.

Aufruf von Websites in Sekundenbruchteilen
AMPs ermöglichen dies, indem sie die Gesamtgröße einer Website größtmöglich reduzieren. Da die Ladegeschwindigkeit von der Größe der Website abhängt, können AMPs Inhalte in einem Bruchteil der Ladezeit gegenüber herkömmlichen mobiloptimierten Websites darstellen. Die Darstellung von AMPs soll bis zu vier Mal schneller bei einem Zehntel des Datenvolumens erfolgen. Dies wird zum einen dadurch ermöglicht, dass zunächst nur die Inhalte geladen werden, die unmittelbar nach Öffnen der Seite sichtbar sein müssen. Die restlichen Inhalte werden dann nachgeladen. Dadurch ist das Lesen der Website bereits während des Ladevorgangs möglich.

Anpassung des Codes zur schnelleren Darstellung
Realisiert werden AMPs zum einen durch eine speziell angepasste Form von HTML – AMP-HTML genannt.  Zudem wird ein Content Delivery Network genutzt. Außerdem kommt eine Reduktion von CSS und Javascript zur Anwendung. Da Letzteres den Nachteil hat, dass es den Aufbau einer Seite stark verlangsamen kann, darf nur asynchrones Javascript verwendet werden. Auch CSS darf nur inline und mit maximal 50 Kilobytes implementiert werden.

Unterstützung durch Google Cache Server
Um schnelle Ladezeiten zu ermöglichen stellt Google außerdem Cache Server zur Verfügung. Validierte AMPs werden im Cache Server von Google gespeichert, auf einem Proxyserver bereitgestellt und über ein Content Delivery Network an den Nutzer ausgeliefert. Der Quellcode von AMPs kann von allen Servern interpretiert werden. Die AMP sollte idealerweise unter einer URL gehostet werden, die für den Nutzer nachvollziehbar ist, also zum Beispiel: amp.websiteurl.de/inhalt oder websiteurl.de/inhalt/amp.

Implementierung auf immer mehr Plattformen
Unterstützt werden AMPs mittlerweile durch viele Plattformen, wie zum Beispiel Twitter, Pinterest, und natürlich Google. So können Mobilgerätenutzer beispielsweise von Google zu einer im Cache gespeicherten AMP weitergeleitet werden, sofern in den Suchergebnissen eine Website mit einer gültigen AMP-Version vorhanden ist. Diese wird dann oberhalb der regulären Suchergebnisse angezeigt. Außerdem haben auch viele Medienhäuser mittlerweile AMPs implementiert und damit auf den Trend zum Nachrichtenkonsum über mobile Endgeräte reagiert. Dem ein oder anderen ist vielleicht schon aufgefallen, dass AMPs zum Beispiel in der Google News App integriert wurden und man dadurch bequem in Sekundenschnelle durch die Artikel swipen kann. Das schnellere Laden der Seiten betrifft übrigens auch Werbeanzeigen, sodass Schaltung von Werbung sich im Gegensatz zu herkömmlichen Websites nicht negativ auf die Nutzererfahrung und auswirkt. AMPs stellen also eine äußerst zukunftsorientierte Entwicklung dar, die Nutzerfreundlichkeit in den Vordergrund stellt.

Wer noch mehr über AMPs erfahren will und an Beispielen des AMP-HTML-Codes interessiert ist, sollte sich diesen Wiki-Eintrag ansehen.

Frontend Frameworks – Teil 3

Frontend Frameworks – Teil 3

Im dritten Teil unserer Frontend Framework Reihe kommen wir zu den etwas anspruchsvolleren Frameworks, die eher für Leute mit Berufserfahrung als Developer angemessen sind.

Da hätten wir zum einen Foundation, welches von Großunternehmen wie eBay, Facebook oder Mozilla benutzt wird. Dieses Framework unterstützt GPU Beschleunigungen, was gleichmäßige und blitzschnelle Animationen ermöglicht. Ebenso hat es keine Lock-In bei Styles, sodass man flexibler arbeiten kann. Zudem benutzt es REMS statt Pixel. Das hat den Nutzen, dass man sich nicht an bestimmte Höhen oder Breiten bei jedem Endgerät richten muss.

Foundation gilt als Framework für Entwickler mit einem gewissen Erfahrungspensum, die vor Allem schnelle, reaktionsfähige Webseiten programmieren.

 

Sucht ihr nach einem Framework, mit dem ihr simpel Google’s Material Design Richtlinien befolgt, dann macht ihr mit Material UI nichts falsch, denn es ist das am besten ausgearbeitete Framework, um die Richtlinien umzusetzen. Aber: es ist kein geeigneter Ansatzpunkt, um ein neues Webdesign Projekt aufzusetzen.

Mit gebrauchsfertigen CSS- und Materialdesign-kompatiblen Klassen beladen, wird Material UI auf dem LESS Preprocessor aufgebaut. Weil es React-Komponenten verwendet, ist ein gewisses Verständnis von React hilfreich.

Absolut bezeichnend für dieses Framework ist, dass es individuell anpassbare Stile enthält, die in einzelne Dateien getrennt sind. So können Sie LESS CSS-Variablen überschreiben, ohne Framework-Komponenten zu beeinflussen.

Insgesamt ist es daher für Entwickler geeignet, die Erfahrung mit React.js haben und einen einfachen Weg einschlagen wollen, um die Material Design Richtlinien umzusetzen.

 

Entwickelt von Yahoo Developern ist Pure ein Framework, mit dem man so gut wie jedes Projekt angehen kann. Mit einem Array an CSS Modulen kann man mit Pure reaktionsfähige Buttons, Menüs, Grids, Tabellen und anderen interessanten Features kreieren. Dennoch ist hierbei zu beachten, dass momentan noch keine jQuery oder JavaScript PlugIns dafür vorhanden sind, da das Framework Pure ausschließlich .css Dateien umfasst.

Wenn es mit Gzip minimiert und komprimiert wird, verkleinert sich die Dateigröße bereits auf 4,75 kB, was es zu einem der schnellsten, platzsparendsten und geschicktesten Frameworks macht. Das ist der Grund, weshalb gerade so viele Mobile Developer so begeistert von Pure sind.

Folglich ideal für Entwickler, die sich mit Responsive Development beschäftigen.

 

UIKit ist ein höchst modulares Framework, welches sich von anderen Frontend Frameworks hervorhebt. Einer der vielen Gründe hierbei ist wohl, dass es sich SASS CSS preprocessors und LESS gleichsam bedient.
Mit einer Anordnung von leichten, reaktionsfähigen Klassen mit den gleichbleibend, gleichnamigen conventions wurde UIKit zu einem der beliebtesten Frontend Frameworks.
Durch die 30 modularen und erweiterbaren Komponenten kann es kombiniert werden, um noch mehr Einsatzflexibilität zu bieten.

Es enthält Navigationskomponenten wie side navigation bars, Elemente wie HTML-Formulare und Tabellen, JavaScript-Komponenten wie Off-Canvas-Bars und modale Dialoge; verbreitete Elemente wie Buttons, Abzeichen, Overlays und Layoutkomponenten, einschließlich eines flüssigen, vollständig ansprechenden Grids.

Das Framework hat zwar unglaublich viel an Angebot zu bieten, ist jedoch durch seinen relativ neuen Status für Beginner nicht zwingend geeignet, da es dementsprechend wenige Entwickler gibt, die damit schon repräsentative Projekte oder Tutorials dazu angefertigt haben.
Daher stehen hier Möglichkeiten gegen die Schwierigkeit des Neuheitsgrades. Folglich ist es besser, wenn sich Entwickler mit einer ansehnlichen Erfahrung an Programmierung daran versuchen. Letzten Endes ist es ein sagenhaftes Framework für simple sowie für komplexe Projekte und eine echte Alternative mit viel Nutzungspotential.

 

Für Diejenigen unter uns, die besondere Layout Bedürfnisse haben, ist Susy ein geeignetes Tool. Der Begriff Tool fällt hier deshalb, weil viele Susy als Grid Maker klassifizieren. Dennoch rüstet dieses Layout Tool einen unabdingbar für individuelle, anspruchsvolle und kreative Layout Wünsche auf. Es übernimmt alle Kalkulationen für den Benutzer, sodass man viel an Zeit und Energie spart.

 

 

Alles in Einem sollte die Entscheidung, welches Framework man verwenden möchte, nicht auf ihrer Beliebtheit beruhen, sondern vielmehr darauf, was für den Bedarf der Entwicklung am besten passt.

 

 

Frontend Frameworks – Teil 2

Frontend Frameworks – Teil 2

In Teil 1 unseres „Frontend Frameworks“ haben wir euch schon einmal in die Materie eingeführt, wie ihr das richtige Framework für euch speziell ermittelt und was man dabei beachten sollte. Da hieß es, dass man nicht immer die gängigen Frameworks nutzen muss, um ein großartige Webseite zu programmieren. Es gibt so viele neue, alternative Möglichkeiten, die euch – je nach eurem Kenntnis-Stand – besser dienen können.

Unsere Einführung ist angelehnt an die Top 10 Frontend Frameworks aus 2016.
Nach jeder Kurzbeschreibung der Frameworks, wird eingestuft, für welche Entwickler welchen Kenntnisstandes diese geeignet sind. Teil 2 wird sich vorerst mit Coding-Beginnern und Berufseinsteigern in der Entwicklung beschäftigen. Im dritten Teil unserer Beitragsreihe kommen dann die Frameworks für Fortgeschrittene mit mehrjähriger Berufserfahrung. Dran bleiben lohnt sich!

 

Der Korrektheit halber führen wir erst einmal Bootstrap an, das allgemein als gängig gilt und oft verwendet wird. Das von den Twitter-Entwicklern programmierte Framework beinhaltet einige der vebreitetsten Programmiersprachen: HTML, JavaScript und CSS. Bootstrap beinhaltet reaktionsfähige Webdesign Standards, die es dir erlauben Webseiten in jeglicher Komplexität und Größe zu entwickeln. Weil das Framework regelmäßig geupdatet wird, kann es in kürzester Zeit auf neue Features reagieren und sie einbinden.

Das Rundum-Paket ist für Beginner und Diejenigen, die ein robusteres Framework bevorzugen, recht ideal, enthält jedoch den Nachteil, dass durch die für das Web unübliche Größe lange Ladezeiten entstehen können. Das kommt durch die Masse an Klassen zustande, wovon nur ein Bruchteil genutzt wird.

 


Ein absoluter Newcomer mit Potential ist Semantic-UI. Ein Framework, welches sich durch seine Einfachheit auszeichnet und für Beginner sowie für Jene, die ein flinkes und leichtes Framework bevorzugen, geeignet ist.

Man sagt, dass Jene, die ein komplexeres Design und komplexeres Development fordern, dieses Framework Schwachstellen aufweisen kann. Dennoch birgt es den Vorteil von kleinen Dateigrößen, kurzen Ladezeiten und unglaublicher Aufstellung an Bibliotheken, sodass man eigentlich keine anderen Bibliotheken mehr braucht.

 

Materialize beinhaltet Design Besonderheiten von Google und stellt ready-to-use buttons bereit, icons, Karten, Formen und anderen Komponenten. Diese Elemente werden in einer Standardversion und in der Version, die mit SASS läuft, angeboten.

Außerdem umfasst Materialize einen praktischen IZ column grid feature, was man für Website Layouts verwenden kann. Mit Materialize kann man Typographien, Schatten, Farben und andere prägnante Animationen verwenden. Der Vorteil der immensen Auswahl an Klassen ist hierbei definitiv als Vorteil zu nennen. Konträr dazu stehen die großen Dateigrößen, die ebenso lange laden müssen wie bei Bootstrap. Somit ist das Framework ein etwas sperriges.

Als geeignet eingestuft wird es für Entwickler, die noch etwas Orientierung und Anleitung brauchen bezüglich Google’s Material Design Spezifiken.

 

Diejenigen, die kleine Projekte umsetzen wollen, für welche nicht alle Style-Klassen eines großen Frameworks erforderlich sind, ist Skeleton eine nennenswerte Alternative, die nicht jedem geläufig ist.
Skeleton ist ein reaktionsfähiger Textbaustein mit einem 400 Zeilen Code. Dieses Framework ist lediglich dazu gedacht mit der Entwicklung eines Web Projektes anzufangen und bietet daher nur das Minimum an Voraussetzungen wie z.B. Tabellen, Formen, Listen, Buttons, etc. Daher für Berufseinsteiger ideal, die sich mit ersten Projekten profilieren wollen und neu in die Praxis- und Projektwelt eintreten.