Kategorien
Design Illustrator Photoshop Webdesign

Variable Schriften: Einsatzbereit in Adobe und Chrome

Die Idee variabler Schriften gibt es schon länger. Statt mehrerer verschiedener Schriftschnitte sollten Strichstärke und Schriftweite einer Schrift zukünftig variabel in einer einzelnen Schriftdatei vereint werden. Mit der neuen Creative Cloud von Adobe und dem neuen Chrome von Google lassen sich variable Schriften nun auch in der Praxis anwenden.

Eine Schrift, aber beliebige Strichstärken und Schriftweiten

Bislang mussten unterschiedliche Strichstärken und Weiten einer Schrift in einzelne Schnitte aufgeteilt werden. Bei gut ausgebauten Schriften findet man Schnitte, deren Strichstärke von „thin“ bis „heavy“ geht. Dazu kommen Schnitte mit unterschiedlichen Schriftweiten wie „condensed“, „compressed“ oder „wide“. In Kombination entstehen nicht selten dutzende einzelne Schnitte pro Schrift – vor allem wenn man die kursiven Schnitte in verschiedenen Variationen auch noch dazu rechnet.

Bei den neuen variablen Schriften sind alle diese einzelnen Merkmale in einem einzelnen Schnitt vereint. Besser noch: Die Strichstärke und die Schriftweite können stufenlos angepasst werden. Bislang war man auf festgelegte Werte angewiesen. Mit variablen Schriften ist man wesentlich flexibler unterwegs und kann die Strichstärke passgenau für verschiedene Schriftgrößen anpassen.

Formal handelt es sich bei den neuen variablen Schriften um OpenType-Schriften der Version 1.8. Bei dem Format werden Eigenschaften für das Aussehen einer Schrift definiert – einschließlich der möglichen Strichstärken und Schriftweiten. Die jeweilige Darstellung der Schrift mit bestimmten Werten wird über die Anwendung – zum Beispiel Adobes Illustrator oder Googles Chrome – interpoliert.

Creative Cloud 2017 unterstützt variable Schriften

Dass es bislang kaum variable Schriften gibt, liegt natürlich auch daran, dass man sie bislang einfach nicht einsetzen konnte. Mit der neuen Version der Creative Cloud hingegen lassen sich die neuen Schriften endlich auch anwenden.

So unterstützen jetzt zum Beispiel Illustrator und Photoshop variable Schriften. Hat man eine solche Schrift ausgewählt, gibt es im „Zeichen“-Fenster ein zusätzliches Icon, welches ein Fenster mit drei Schieberegler öffnet. Dort kannst du dann die Stärke, Breite und Neigung der Schrift definieren.

Variable Schriften in Adobe Illustrator

Darüber hinaus besteht auch weiterhin die Möglichkeit, vordefinierte Schnitte wie “Bold Condensed Italic” auszuwählen, ohne die Einstellungen selbst vorzunehmen.

Natürlich liefert Adobe auch gleich erste variable Schriften mit. So sind die „Myriad“, „Minion“, „Acumin“, und „Source“ fortan als variable Schriften in der Creative Cloud enthalten.

Auch Chrome 62 unterstützt variable Schriften

Fast zeitgleich mit Adobe hat auch Google eine neue Version seines Browsers Chrome herausgebracht, der variable Schriften unterstützt. Denn variable Schriften lassen sich auch als Webfonts bereitstellen und in gewohnter Weise in ein Stylesheet einbinden.

So kannst du dir in Chrome 62 mit den bekannten CSS-Eigenschaften „font-weight“, „font-stretch“ und „font-style“ deinen eigenen Schnitt zusammenstellen, ohne per „@font-face“ mehrere Schriftdateien einbinden zu müssen.

h1 {
  font-family: "Source Sans Variable";
  font-size: 2em;
  font-weight: 700;
  font-stretch: 75;
}

Im Beispiel wird für ein „<h1>“-Element die Strichstärke auf 700 und die Schriftweite auf 75 gesetzt.

Die genannten CSS-Eigenschaften unterstützen allerdings nur gängige Werte. So kennt „font-weight“ neben den Schlüsselwörtern „normal“ und „bold“ auch Zahlen wie „100“ und “900”. Die Bandbreite der Möglichkeiten ist mitunter jedoch größer als die Werte, welche die Eigenschaften „font-weight“, „font-stretch“ und „font-style“ kennen.

Mit der der CSS-Eigenschaft „font-variation-settings“ hast du jedoch Zugriff auf alle Eigenschaften einer OpenType-Schrift. Je nach Schrift stehen dir also zusätzliche Werte zur Verfügung, welche die normalen „font-*“-Eigenschaften nicht unterstützen.

So definierst du zum Beispiel per „wght“ die Strichstärke und per „wdth“ die Schriftweite einer Schrift.

h1 {
  font-family: "Source Sans Variable";
  font-size: 2em;
  font-variation-settings: “wght” 700, “wdth” 75;
}

Das zweite Beispiel enthält die identischen Werte für die Stärke und Weite, allerdings über die „font-variation-settings“-Eigenschaft definiert.

Die Eigenschaft „font-variation-settings“ hat im Übrigen noch den Vorteil, dass sie animierbar ist. Zusammen mit der CSS-Eigenschaft „transition“ oder „animation“ lassen sich auf diese Weise auch schöne bewegliche Texteffekte realisieren.

Zur Hervorhebung eines Textes kann dann zum Beispiel die Strichstärke oder die Schriftweite per Animation verändert werden.

Wie variable Schriften im Einsatz aussehen, kannst du dir auf der Seite Axispraxis anschauen. Du wählst zwischen verschiedenen variablen Schriften aus und hast dann die Möglichkeit, anhand von Schiebereglern die Strichstärke und Schriftweite anzupassen.

Variable Schriften auf Axispraxis

Per JavaScript werden dabei die entsprechenden CSS-Eigenschaften dynamisch verändert.

Ein weiterer Vorteil variabler Schriften – vor allem im Webdesign – ist die geringere Dateigröße. Statt mehrere Schriftdateien ist fortan nur noch eine Datei nötig, in welcher die Schriftinformationen wesentlich kompakter untergebracht sind.

Weitere Browserunterstützung und Einsatzmöglichkeiten

Neben dem Chrome unterstützt auch Apples Safari bereits variable Schriften. Das ist insofern nicht verwunderlich, weil das neue Schriftformat von Adobe, Microsoft und Apple entwickelt wurde. Aber auch andere Browser werden in naher Zukunft nachziehen.

Neben Schriften lassen sich mit dem neuen Format im Übrigen auch Iconfonts realisieren, bei denen sich dann zum Beispiel die Strichstärke der Icons dynamisch anpassen lässt.

Das neue Format der variablen Schriften wird für Grafik- und Webdesigner also eine große Bereicherung sein.

Kategorien
E-Business SEO & Online-Marketing

Nanu? Google kauft Flutter, eine App zur Gestensteuerung

Flutter ist eine Software, die mittels Webcam in der Lage ist, Gesten zu interpretieren. Flutter begegnete mir vor knapp zwei Jahren das erste Mal und ließ mich einigermaßen ratlos zurück. Diese Tradition setzt jetzt Google fort. Der Suchmaschinenriese übernahm Flutter soeben komplett. Und erneut frage ich mich: wozu?

flutter-home

Flutter: Fragwürdiger Nutzen

Auch nach der Übernahme durch Google kann die Flutter-App noch gekauft werden. Es ist allerdings davon auszugehen, dass Google diese in Kürze entweder kostenlos zugänglich machen oder – noch wahrscheinlicher – komplett offline nehmen wird.

Wieso sollte denn letzteres wahrscheinlicher sein, fragt sich jetzt der deutsche Michel. Lassen Sie mich dazu zwei Gründe anführen. Einen kann man diskutieren, der andere ist eher indizienbasiert und als solcher schon ziemlich eindeutig.

Eins: Flutter hat, wie Sie gleich sehen werden, kaum nennenswerte Funktionalität und insofern keinen eigenständigen Wert, um als Google-Produkt so weiter zu existieren.

Zwei: Die eigentliche Website lautet nicht mehr auf die URL flutterapp.com, sondern wird auf flutterapp.com/home/ weitergeleitet. Die Übernahmemeldung hingegen, ein kurzer Text, der vermeldet, man sei gekauft worden, läuft direkt unter der Haupt-URL flutterapp.com. Honi soit qui mal y pense? Ich glaube nicht…

Für 4,49 Euro steht Flutter im Mac App Store zum Kauf bereit, die MSI für Windows kann direkt von der Produkt-Website geladen werden.. Für das Geld erhält man nicht weniger als die Möglichkeit, Musik und Videos auf Computern mit Webcam zu steuern. Steuern ist in diesem Zusammenhang allerdings ein großes Wort. Denn Flutter verfügt über lediglich drei Gesten.

Zeigt man der Webcam den Daumen nach links, wird der letztgespielte Song oder das nächste Video erneut angezeigt. Hält man selbigen Finger nach rechts, spult man zum nächsten Titel. Mit einer High-Five-Geste pausiert man die Wiedergabe oder startet sie erneut, je nach Status. Das war’s…

flutter-gesten

Als in Bälde verfügbar werden Gesten annonciert, die, wären sie verfügbar, dem Begriff “Steuern” etwas Substanz zu verleihen im Stande wären. Darunter etwa die essenzielle Funktion des Lauter und Leiser, aber auch nette Features, wie das Liken oder Stummschalten von Titeln. Gibt es aber, wie gesagt, mindestens noch nicht, und wenn man sich anschaut, dass die Volume-Steuerung bereits seit einem Jahr als Feature angekündigt ist, dann darf man sicherlich eine gewisse Skepsis an den Tag legen, wenn es um die Einschätzung des weiteren zeitlichen Horizonts geht.

In meinen Tests auf einem iMac kam noch hinzu, dass die Gestensteuerung eher nach dem Zufallsprinzip funktionierte. Ich will gern einräumen, dass es anderen Verwendern in dieser Hinsicht besser erging. Und zweifellos ist der Wow-Effekt, den man auf einer Party erzielen kann, wenn man mal eben den nächsten Song per Daumengeste anwählt, beachtlich. Da kann die tadellos funktionierende Bluetooth-Tastatur aus ähnlicher Entfernung zwar das gleiche Ergebnis zuverlässiger, aber nicht beeindruckender erzielen. In Anbetracht der eher zufallsbasierenden Funktionalität finde ich übrigens den Titel, Flutter, zu deutsch etwa “Wedeln” mehr als gelungen.

Flutter konzentrierte sich in den letzten beiden Jahren darauf, möglichst viele Apps zu unterstützen. So kann man sich heute rühmen, neben den essenziellen Playern wie iTunes, VLC und anderen auch Onlineservices wie YouTube und andere zu steuern. Onlinedienste können allerdings nur über die erhältliche Chrome-Extension angesprochen werden.

Neben dem eher rudimentären Feature-Set gibt es natürlich einen ganz offensichtlichen Pferdefuß an der Sache mit dem Wedeln. Wer errät es? Genau! Die Webcam ist ständig an, damit Flutter auch dann Gesten erkennen kann, wenn etwa iTunes nur im Hintergrund läuft. Und durch eine laufende Webcam können natürlich auch andere Dinge als Gesten gesehen werden.

Flutter verspricht entsprechend wortreich, man werde selbstredend nie und nimmer irgendwelche Aufzeichnungen tätigen oder Drittunternehmen die Möglichkeit eröffnen, auf die Daten zuzugreifen. Was solche Versprechen allerdings in Zeiten von Prism und Tempora wert sind, dürfte keinen Diskurs entzünden…

Was will Google mit Flutter?

Sicherlich gibt es bereits Produkte, wie etwa Microsofts Kinect, das deutlich ausgereifter ist und weit mehr Gesten erkennen kann. Man muss allerdings fairerweise berücksichtigen, dass es sich dabei um eine Kombination aus Software und Hardware handelt. Flutter arbeitet rein software-basiert, die konkrete Kamera-Hardware ist nicht von Bedeutung. Und einen modernen Computer, der ohne Webcam ausgeliefert wird, gibt es kaum noch. Kauft noch jemand Desktop-Rechner?

Hinzu kommt, dass die Webcams mit stetig steigenden Auflösungen versehen werden, was die Erkennung vereinfacht und stabiler macht. Es ist also im Grunde, vor allem perspektivisch, kein wirrer Gedanke, Gestensteuerung über Webcams als gangbaren Weg zu sehen und entsprechend in die Entwicklung zu investieren.

So betrachtet, will Google vermutlich nicht Flutter als Produkt, sondern lediglich das sechsköpfige Team, das hinter dem Projekt steht. Flutters Entwickler beschäftigen sich immerhin seit 2010 mit nichts anderem als Algorithmen zur Erkennung von Handbewegungen vor Webcams.

Die Akquisition ganzer Teams ist keine Neuheit, sondern fast schon gängige Realität. Dabei gibt es hinreichend viele Beispiele, in denen nach der Übernahme auch die Produkte vom Markt verschwunden sind. Eines der Beispiele, die mich am meisten getroffen haben, war die Google-Übernahme von Nik Software im letzten Jahr. Mit selbiger verschwand nämlich die grandiose Software Snapseed komplett vom Markt. Glücklicherweise hatte ich sie ein paar Wochen vorher noch gekauft…

video-glasses-98440_640

Für das Flutter-Team gibt es im Hause Google einen sehr naheliegenden Einsatzbereich, nämlich die Fortentwicklung des Google Glass. Dieses ist bekanntlich eher von rudimentärer Funktionalität und in seiner jetzigen Inkarnation nicht viel mehr als ein Addon für Android-Phones, dafür allerdings deutlich zu teuer. Insofern ist es kein Wunder, dass mit einer flächendeckenden Markteinführung wohl erst in einigen Jahren zu rechnen ist.

Ich lehne mich vermutlich nicht allzu weit aus dem Fenster, wenn ich mutmaße, dass das Flutter-Team künftig weniger im Bereich der Gestensteuerung, sondern viel mehr im Bereich der Gesten-Erkennung auf Glass-Devices unterwegs sein wird. Sollte ich damit richtig liegen, ergibt die Übernahme einen Sinn.

Sollte es Google indes tatsächlich um das Produkt Flutter gegangen sein, reicht meine Fantasie nicht für einen plausiblen Erklärungsansatz aus. Was meinen Sie?

Links zum Beitrag

Kategorien
Essentials Freebies, Tools und Templates

Google Chrome per Shortcut: Alle Tastenkürzel in deutscher Sprache

Tastenkombinationen können dafür sorgen, dass Sie Ihren Browser weitaus schneller bedienen lernen. Bei Google Chrome etwa können Sie mit Strg+Tabulatortaste zum nächsten Tab springen, mit Strg+K ein Fragezeichen in die Adressleiste einfügen für die Standardsuche und mit Strg+Umschalttaste+G den vorherigen Treffer für Ihre Eingabe in der Suchleiste anzeigen lassen. Es gibt natürlich noch weitere Shortcuts zu entdecken, weshalb wir alle Tastenkürzel in einer übersichtlichen Liste gesammelt haben.

chrome

Aktion Windows Mac OS
Ein neues Fenster öffnen Strg+N Befehlstaste (cmd)+N
Ein neues Tab öffnen Strg+T Befehlstaste (cmd)+T
Öffnet ein neues Fenster im Inkognito-Modus Strg+Umschalt+N Befehlstaste (cmd)+Umschalttaste+N
Eine Datei öffnen Strg+O Befehlstaste (cmd)-O drücken
Link im neuen Tab öffnen Strg drücken und auf einen Link klicken Befehlstaste (cmd) drücken und auf einen Link klicken
Link im neuen Tab öffnen und anzeigen Strg+Umschalttaste drücken und auf einen Link klicken Befehlstaste (cmd)+Umschalttaste drücken und auf einen Link klicken
Öffnet den zuletzt geschlossenen Tab erneut Strg+Umschalt+T Befehlstaste (cmd)+Umschalttaste+T
Wechselt zum Tab mit der angegebenen Positionsnummer Strg+1 bis Strg+8 -/-
Wechselt zum nächsten Tab Strg+Tabulatortaste Befehlstaste (cmd)+Wahltaste (Alt) zusammen mit dem Rechtspfeil drücken
Wechselt zum vorherigen Tab Strg+Umschalttaste+Tabulatortaste Befehlstaste (cmd)+Wahltaste (Alt) zusammen mit dem Linkspfeil drücken
Schließt das aktuelle Fenster Alt+F4 Befehlstaste (cmd)+Umschalt-W
Schließt den aktuellen Tab oder das aktuelle Pop-up Strg+W Befehlstaste (cmd)+W
Zeigt den Browserverlauf des Tabs an Auf einen der Pfeile in der Browser-Symbolleiste mit der rechten Maustaste klicken Mit der rechten Maustaste auf einen der Pfeile in der Browser-Symbolleiste klicken und die Maustaste gedrückt halten
Wechselt im Browserverlauf des Tabs zur vorherigen Seite Rücktaste oder Alt und Linkspfeiltaste drücken Löschen oder Befehlstaste (cmd)+[ drücken
Wechselt im Browserverlauf des Tabs zur nächsten Seite Umschalttaste+Rücktaste Umschalttaste-Löschen
Fenster maximieren Doppelklick auf den leeren Bereich der Tableiste Bei gedrückter Umschalttaste auf das Pluszeichen links oben im Fenster klicken
Fenster minimieren Doppelklick auf den leeren Bereich der Tableiste Befehlstaste (cmd)+M
Blendet die Lesezeichenleiste ein oder aus Strg+Umschalttaste+B Befehlstaste (cmd)+Umschalttaste+B
Öffnet die Download-Seite Strg+J Befehlstaste (cmd)+Umschalttaste+J
Öffnet die Verlaufsseite Strg+H{1 Befehlstaste (cmd)+Y
Öffnet das Dialog „Internetdaten löschen“ Strg+Umschalt+Entf Befehlstaste (cmd)+Umschalttaste+Löschen
Öffnet das Dialogfeld „Einstellungen“ Alt+F Befehlstaste (cmd)+,
Schaltet zwischen mehreren Nutzern um Strg+Umschalt+M Befehlstaste (cmd)+Umschalttaste+M
Öffnet den Lesezeichen-Manager Strg+H{1 Befehlstaste (cmd)+Optionstaste+B
Hilfe F1 F1
Öffnet die URL in einem neuen Tab URL eingeben, dann Alt+Eingabetaste drücken URL eingeben, dann Befehlstaste (cmd)+Eingabetaste drücken
Markiert die URL Strg+L Befehlstaste (cmd)+L
Fügt ein Fragezeichen in die Adressleiste ein für die Standardsuche Strg+K Befehlstaste (cmd)+Optionstasten+F
Verschiebt den Cursor zum vorangehenden Wort in der Adressleiste Strg+Linkspfeil Optionstaste (Alt)+Linkspfeil
Verschiebt den Cursor zum nächsten Wort in der Adressleiste Strg+Rechtspfeil Optionstaste (Alt)+Rechtspfeil
Löscht den Begriff, der in der Adressleiste vor dem Mauszeiger steht Strg+Rücktaste Befehlstaste (cmd)+Löschen
Löscht den Eintrag falls möglich aus Ihrem Browserverlauf Eintrag auswählen und Umschalttaste+Entf drücken Eintrag auswählen und Umschalttaste+Fn+Löschen drücken
Druckt die aktuelle Seite Strg+P Befehlstaste (cmd)+P
Speichert die aktuelle Seite Strg+S Befehlstaste (cmd)+S
Lädt die aktuelle Seite erneut Strg+R Befehlstaste (cmd)+R
Beendet das Laden der aktuellen Seite ESC Befehlstaste (cmd)+,
Öffnet die Suchleiste Strg+F Befehlstaste (cmd)+F
Zeigt den nächsten Treffer für Ihre Eingabe in der Suchleiste an Strg+G Befehlstaste (cmd)+G
Zeigt den vorherigen Treffer für Ihre Eingabe in der Suchleiste an Strg+Umschalttaste+G Befehlstaste (cmd)+Umschalttaste+G
Lädt das Linkziel herunter Alt+Link klicken Optionstaste (Alt)+Link klicken
Zeigt die Quelle der aktuellen Seite an Strg+U Befehlstaste (cmd)+Optionstaste (Alt)+U
Speichert Ihre aktuelle Webseite als Lesezeichen Strg+D Befehlstaste (cmd)+D
Speichert alle geöffneten Webseiten als Lesezeichen in einem neuen Ordner Strg+Umschalttaste+D Befehlstaste (cmd)+Umschalttaste+D
Vergrößert/Verkleinert alles auf der Seite. Strg++/Strg+- Befehlstaste (cmd)++/Befehlstaste (cmd)+-
Stellt die normale Größe des Seiteninhalts wieder her Strg+0 Befehlstaste (cmd)+0
Scrollt auf der Webseite nach unten Leertaste Leertaste
Öffnet die Entwicklertools Strg+Umschalt+J Befehlstaste (cmd)+Optionstaste+I
Öffnet die JavaScript-Konsole -/- Befehlstaste (cmd)+Optionstaste+J
Kopiert den markierten Inhalt in die Zwischenablage Strg+C Befehlstaste (cmd)+C
Fügt den Inhalt aus der Zwischenablage ein Strg+V Befehlstaste (cmd)+Optionstaste+C
Fügt den Inhalt als unformatierten Text aus Zwischenablage ein Strg+Umschalt+V Befehlstaste (cmd)+Umschalttaste+Optionstaste (Alt)+V
Schneidet den markierten Inhalt aus und speichert ihn in der Zwischenablage Strg+X Befehlstaste (cmd)+X

(dpe)

Kategorien
Fortbildung Inspiration Programmierung Tutorials

Pflichtprogramm für Web-Developer: Kostenloser Online-Lehrgang zu Chromes DevTools von Code School

Welcher Web-Developer kennt die Chrome DevTools nicht? Fest in den Browser integriert, liefern sie Werkzeuge, die bei der Entwicklung von Web-Apps, vor allem deren Debugging, helfen. Dabei ist der Einstieg nicht unbedingt kompliziert. Aber, wie stets, eine fundierte Einleitung hat noch niemandem geschadet und senkt die Hemmschwelle für den Nachwuchs. Genau einen solchen Einstieg liefert Code School mit dem kostenlosen Video-Tutorial “Explore and Master Chrome DevTools”.

codeschool-devtools-01
Explore and Master DevTools: Code School, sponsored by Google

Code School: Immer für einen professionellen Online-Lehrgang gut

Aufmerksame Dr. Web Leserinnen und Leser haben bereits im Januar Bekanntschaft mit Code School gemacht. Gemeinsam mit dem Anbieter konnten wir einen kompletten Sass-Kurs kostenlos anbieten. Nach Aussage der Betreiber der Code School wurde davon reichlich Gebrauch gemacht.

Sie haben den Beitrag damals nicht gelesen? Nicht schlimm, hier die wichtigsten Infos: Code School ist eine Online-Schulungseinrichtung. In der vertrauten Umgebung des eigenen Lieblingsbrowsers lernt man grundlegende, aber auch fortgeschrittene Web-Technologien in seiner individuellen Geschwindigkeit. Jeder Kursus besteht aus einer unterschiedlichen Zahl von Einheiten in der Form von Schulungsvideos. Nach jeder Einheit kann man das erworbene Wissen im Rahmen sogenannter Challenges interaktiv überprüfen und gleichzeitig vertiefen. Im Erfolgsfalle werden einem sogenannte Badges verliehen, die den erfolgreichen Abschluss dokumentieren.

codeschool-welcome

Die Onlinekurse bei Code School sind grundsätzlich kostenpflichtig. Dabei können einzelne Schulungen gebucht werden, Code School setzt allerdings stärker auf das Prinzip des “Einschreibens”. Bei dieser Variante schreibt man sich bei Code School als Student ein, wie man das von der Uni kennt, zahlt einen Obolus von monatlich 25 USD als Flatrate und kann dann alle verfügbaren und später verfügbar werdenden Kurse konsumieren. Bindungsfristen gibt es nicht, man kann monatlich aussteigen.

Was an den Video-Tutorials und den diese begleitenden Challenges, also den Vertiefungsübungen, auffällt, ist der hohe Grad der Professionalität nicht nur der “Professoren”, sondern der Produktion insgesamt. Diesem Standard wird auch “Explore and Master Chrome DevTools” absolut gerecht.

“Explore and Master Chrome DevTools” von Code School, gesponsort durch Google

“Explore and Master Chrome DevTools” ist komplett kostenlos, dabei jedoch auf dem gleichen hohen Niveau, wie die übrigen Produkte des Hauses. Kostenlos ist der Lehrgang durch die Übernahme der Sponsorschaft durch Google. An dieser Stelle darf man als Web-Developer ruhig mal kurz “Danke, Google” sagen, denn der Kurs ist tatsächlich schon fast als Pflichtprogramm für jeden Entwickler zu bezeichnen.

codeschool-devtools-04

17 Videos mit Laufzeiten zwischen etwas mehr als einer Minute und knapp fünf Minuten kumulieren sich zu einer Gesamtdauer von knapp 51 Minuten. Im Schnitt ist jedes Video-Tutorial demnach drei Minuten lang und eignet sich daher auch für den schnellen Konsum zwischendurch. 75 der sogenannten Challenges begleiten die Tutorials. Diese sind durchweg praxisnah und orientieren sich tatsächlich sehr nah an den Inhalten der vorangegangenen Videos, was ich nicht bei allen Code School-Produkten, deren Videos übrigens zumeist zwischen fünf und 15 Minuten lang sind, in dieser Klarheit feststellen konnte.

codeschool-devtools-06

Um auf “Explore and Master Chrome DevTools” zugreifen zu können, bedarf es keiner Registrierung. Diese ist natürlich nützlich, wenn man den Kurs nicht am Stück durchlaufen will, denn mit einem Account ausgestattet, lassen sich Bearbeitungsstände auch zu späteren Zeitpunkten wieder abrufen. Anders als in den sonstigen Kursen des Anbieters, können Sie sich in “Explore and Master Chrome DevTools” frei bewegen. Eine Reihenfolge im didaktischen Sinne ist zwar gegeben, aber nicht zwingend zu durchlaufen. Auf diese Weise greifen Sie direkt auf die Bereiche zu, die sie interessieren oder bei denen Sie noch Schwächen sehen und lassen die bekannten Grundlagen links liegen.

Sämtliche Videos stehen als MP4 in SD, wie auch HD zum Download zur Verfügung, so dass Sie sie nach dem Herunterladen schauen können, wo, wie und so oft Sie das wollen. Eine Straßenbahnfahrt zur Arbeit kann so zu einem produktiven Ereignis werden. Auch der Toilettengang erfährt neben dem Offensichtlichen zusätzlichen Nutzwert.

codeschool-devtools-05

“Explore and Master Chrome DevTools” besteht aus sieben Lektionen, die sich mit den verschiedenen Aspekten des Web-Development auseinandersetzen. Im Einzelnen wird geboten:

  • Level 1: Getting Started & Basic DOM and Styles
  • Level 2: Advanced DOM and Styles
  • Level 3: Working With the Console
  • Level 4: Debugging JavaScript
  • Level 5: Improving Network Performance
  • Level 6: Improving Performance
  • Level 7: Memory Profiling

Mir persönlich haben die Level 5 und 6 am meisten gegeben. Insbesondere die Tipps zur Reduzierung der Netzwerklast durch weniger Requests haben sich im Hinterstübchen verankert. “Explore and Master Chrome DevTools” ist ein Angebot, das man nicht nicht empfehlen kann. Und das nicht nur, wie zuweilen gern getan, weil es kostenlos ist, sondern weil es so gut ist, dass man sogar damit zufrieden würde, wenn man dafür bezahlte.

Web-Developer, die zwei bis drei Stunden (inkl. Challenges) ihrer Zeit für den Lehrgang erübrigen, werden sicherlich nicht enttäuscht und vor allem hinterher nicht weniger schlau als zuvor sein. Wer rein auf Bewegtbild steht, kommt sogar mit unter einer Stunde Aufwand weg. Los geht’s!

Links zum Beitrag:

  • Explore and Master Chrome DevTools – Code School
  • Code School + Dr. Web bieten eine komplette Sass-Schulung kostenlos – Dr. Web Magazin

Kategorien
JavaScript & jQuery Programmierung

Peer.js: Peer-to-Peer mit WebRTC und JavaScript im Browser

WebRTC ist eine mächtige Idee. Echtzeitkommunikation im Browser will sie ermöglichen. Google, Mozilla und Opera unterstützen das Projekt, die API wird derzeit von Chrome und den Nightlies von Firefox unterstützt. Das ist ja schon eingeschränkt genug. Das JavaScript-Projekt Peer.js ist noch eingeschränkter. Es läuft derzeit nur in Chrome Dev und Canary. Interessant ist es allemal.

peer
Ähm. Nein, um den hier geht es nicht… (Credits am Ende des Beitrags)

Peer.js – Clientside mit Server-Komponente

Peer.js setzt auf WebRTC auf und ermöglicht Peer-Verbindungen zwischen zwei Clients auf der Basis eindeutiger IDs. Das System wird sowohl auf der Server-Seite (mittels node.js), wie auch auf der Client-Seite als Library installiert. Der PeerServer dient dabei nur der Herstellung der Verbindung. Ist diese Verbindung einmal stabil, findet jeglicher Datentransfer lediglich zwischen den Clients statt.

peerjs-homepage

Aufgrund der miesen Implementation von WebRTC auch im Chrome kann Peer.js nur als Experiment bezeichnet werden. Allerdings ist es eines, dessen Erfolg nur eine Frage der Zeit ist.

Aktuell kann das Projekt nur eine Demo eines Chats vorweisen. Dieser wiederum funktioniert so, dass man eine ID eines Users eingeben muss, um die Verbindung herzustellen. Grundsätzlich ist die Thematik der ID-Übergabe natürlich mittels Programmierung zu regeln. Da es aber derzeit lediglich Demos gibt und das Projekt erst seit kurzem verfügbar ist, sollten wir die Geringfügigkeit der Belege verzeihen.

Peer.js – das Grundprinzip

Die Einbindung der Peer.js-Lösung ist einfach. Das größere Problem stellt der PeerServer dar. Auf der Client-Seite funktioniert das Grundprinzip so. Zunächst wird das Script eingebunden:

Der Peer wird so definiert:


Ein Peer mit Verbindungswunsch definiert sich so:


Wer sich erst einmal sanft dem Thema nähern möchte, will sicherlich nicht direkt Aufwand in die Errichtung eines eigenen PeerServers stecken. Da kommt es gerade recht, dass die Entwickler einen entsprechenden Cloud Service, kostenlos für Entwickler, im Angebot haben.

Wer nun glaubt, er könne so einen schicken eMule-Ersatz bauen, wird enttäuscht. Die maximale Größe aktuell tauschbarer Daten liegt bei ungefähr 1 Kilobyte, was wiederum im Wesentlichen an der Browserimplementierung von WebRTC liegt. Zudem wird bei „großen“ Dateien, also um 1 kB, die Zuverlässigkeit der Übertragung zum Glücksspiel.

Peer.js wird programmiert von zwei Studenten der Berkeley Universität in Kalifornien, Michelle Bu und Eric Zhang. Zhang war Mitgründer des Startups Flotype, welches mittlerweile anders heißt. Zhang ist dort nicht mehr Teil des Teams. Natürlich ist er dennoch immer noch ein fähiger JavaScript-Entwickler.

Links zum Beitrag:

(Bildquelle für das Artikelbild: dirk@vorderstrasse.de via photopin cc)

Kategorien
Webdesign

Die besten Browsererweiterungen für die Webentwicklung

Bei der Entwicklung von Webseiten ist der Browser ein wichtiges Hilfsmittel geworden. Früher waren Browser ausschließlich reine Seitenbetrachter, was sich über die Jahre stark geändert hat. Heutzutage gibt es für fast jeden Vertreter seiner Gattung tausende mehr oder weniger nützliche Erweiterungen, die nicht nur dem Developer das Leben leichter machen wollen. In dieser Masse verliert man schnell die Übersicht. Vor allem, wenn man mit mehr als einem Weltnetz-Blätterer arbeitet. Deswegen haben wir die Sammlungen der drei beliebtesten Browser durchforstet und für jeden ein paar Highlights heraus gesucht.

Firebug (Firefox), Developer Tools (Chrome), Dragonfly (Opera)
Firebug ist das Urgestein der Entwickler-Tools und wurde zum Vorbild für andere Browserhersteller, die ähnliche Tools fest in den Browser integrierten. Im Chrome heißen sie schlicht Developer Tools. Diese machen ihrem Namen alle Ehre und bieten – wie Firebug – ein gutes Set an Werkzeugen. Bei Opera heißt das ähnlich funktionsreiche Pendant Dragonfly.

 

Web Developer (Firefox, Chrome),  Developer Briefcase (Opera)
Hier erhalten Sie eine Erweiterung, die nahezu alles bietet, was man bei der Erstellung brauchen kann. Eine einfache Farbpipette, ein Bildschirmlineal und weitere Tools sind vorhanden. Die Opera-Version des Web Developers bietet zwar etwas weniger Werkzeuge, aber immer noch genug Funktionen, den Alltag zu erleichtern.

 

Pendule (Chrome)
Pendule ähnelt Web Developer, bietet allerdings einen etwas kleineren Umfang. Dadurch wirkt die Erweiterung etwas aufgeräumter und übersichtlicher.

 

YSlow (Firefox, Chrome, Opera)
Manchmal ist die eigene Webseite relativ langsam und es ist nicht immer leicht, die Bremsen zu finden. Hier kommt Yslow ins Spiel. Das Tool erstellt eine kleine Analyse und zeigt in einer Liste ein paar Tipps zu weiteren Optimierungsmöglichkeiten.

 

Colorzilla (Firefox, Chrome)
Anfangs war Colorzilla eine einfache Farbpipette. Mittlerweile hat es sich zu einem praktischem Allround-Farbwerkzeug entwickelt. So lassen sich jetzt auch CSS3-Verläufe generieren.

 

Dust-me Selectors (Firefox, Opera)
Bei der Entwicklung bleiben öfters nicht benötigte CSS-Selektoren übrig. Duster durchsucht alle verlinkten Stylesheets nach Selektoren, vergleicht sie mit den auf der aktuellen Seite verwendeten und zeigt, welche nicht benötigt werden. Leider gilt das Ergebnis nur für die aktuelle Seite und nicht das ganze Projekt.

 

CSScan (Chrome)
Einmal aktiviert, liefert CSScan die relevanten Informationen zu jedem Element, das mit der Maus berührt wird.

 

IE Tab (Chrome, Firefox)
Will oder muss man testen, ob die frisch entwickelte Seite im Internet Explorer korrekt dargestellt wird, eignet sich diese Erweiterung. Sie lädt die gewünschte Seite mit der Engine des Internet Exploders ( IE7 – IE9 ) in einem neuen Tab.

 

FireFTP (Firefox)
Ein schlichter FTP-Client, der direkt im Browser integriert ist und optional direkt mit allen ftp:// links verknüpft werden kann.
Für kleinere Aufgaben ist das Tool durchaus nützlich, jedoch würde ich für die Arbeit einen vollwertigen FTP-Client empfehlen.

 

Tilt 3D (Firefox)
Tilt ist eine einzigartige Erweiterung, die mit WebGL eine topografische 3D-Darstellung liefert, die sich frei drehen und zoomen lässt und die einzelnen Elementarten farblich kennzeichnet. Kollege Dieter Petereit schrieb schon mal ausführlicher für das T3N Magazin darüber.

(dpe)