Kategorien
Essentials Freebies, Tools und Templates

Opera-Browser per Shortcut: Alle Tastenkürzel in deutscher Sprache

Bedienen Sie Ihren Browser bequem über Tastenkombinationen, statt mit der Maus. Beim Opera-Browser können Sie etwa mit der Strg-Taste + Leertaste die Startseite aufrufen, über Strg-Taste + Alt + Umschalttaste + U den Quelltext der aktiven Seite überprüfen lassen oder mit der Strg-Taste + Umschalttaste + C einen markierten Text in das Notiz-Panel kopieren. Es gibt natürlich noch weitere Tastenkürzel zu entdecken, weshalb wir alle Shortcuts in einer übersichtlichen Liste gesammelt haben.

opera

Aktion Windows Mac OS
Eine Zeile nach oben Pfeil rauf Pfeil rauf
Eine Zeile nach unten Pfeil runter Pfeil runter
Ein Zeichen nach rechts Pfeil rechts Pfeil rechts
Ein Zeichen nach links Pfeil links Pfeil links
Eine Bildschirmseite nach oben Bild hoch bzw. Umschalttaste + Leertaste Bild hoch bzw. Umschalttaste + Leertaste
Eine Bildschirmseite nach unten Bild runter bzw. Leertaste Bild runter bzw. Leertaste
Eine Bildschirmseite nach links Strg-Taste + Bild hoch Befehlstaste (cmd) + Bild hoch
Eine Bildschirmseite nach rechts Strg-Taste + Bild runter Befehlstaste (cmd) + Bild runter
Zum Seitenanfang Pos1 Anfang
Zum Seitenende Ende Ende
Datei öffnen Strg-Taste + O Befehlstaste (cmd) + O
Kopie der Seite speichern Strg-Taste + S Befehlstaste (cmd) + S
Seite drucken Strg-Taste + P Befehlstaste (cmd) + P
Opera beenden Strg-Taste + Q Befehlstaste (cmd) + Q
Opera verstecken Strg-Taste + Alt + Umschalttaste + H Befehlstaste (cmd) + H
Opera im Dock ablegen Befehlstaste (cmd) + M
Letzte Änderungen rückgängig machen Strg-Taste + Z Befehlstaste (cmd) + Z
Letzte Änderungen wiederherstellen Strg-Taste + Y bzw. Strg-Taste + Umschalttaste + Z Befehlstaste (cmd) + Y bzw. Befehlstaste (cmd) + Umschalttaste + Z
Markiertes in die Zwischenablage kopieren Strg-Taste + C bzw. Strg-Taste + Einfg Befehlstaste (cmd) + C
Markiertes in die Zwischenablage verschieben Strg-Taste + X bzw. Umschalttaste + Entfernen Befehlstaste (cmd) + X
Inhalt der Zwischenablage einfügen Strg-Taste + V bzw. Umschalttaste + Einfg Befehlstaste (cmd) + V
Markierten Text in das Notiz-Panel kopieren Strg-Taste + Umschalttaste + C Befehlstaste (cmd) + Wahltaste (Alt) + C
Alles markieren Strg-Taste + A Befehlstaste (cmd) + A
Markiertes (oder Zeichen rechts vom Cursor) löschen Entfernen (Entf) Entf
Markiertes (oder Zeichen links vom Cursor) löschen Rücktaste Rücktaste
Text-Formatierung dick Strg-Taste + B ctrl + B
Text-Formatierung kursiv Strg-Taste + I ctrl + I
Text-Formatierung unterstreichen Strg-Taste + U ctrl + U
HEX nach Unicode konvertieren Strg-Taste + Umschalttaste + X ctrl + Umschalttaste + X
Text suchen Strg-Taste + F Befehlstaste (cmd) + F
Nächstes Vorkommen des Texts suchen Strg-Taste + G bzw. F3 Befehlstaste (cmd) + G
Vorhergehendes Vorkommen des Texts suchen Strg-Taste + Umschalttaste + G bzw. Umschalttaste + F3 Befehlstaste (cmd) + Umschalttaste + G
Nach Text in der Seite suchen (Zuerst F9 drücken, um den Fokus in die Seite zu setzen.) (Ziffernblock) / . (Punkt) (Zuerst Wahltaste (Alt) + F9 drücken, um den Fokus in die Seite zu setzen.) (Ziffernblock) / . (Punkt)
Nach einem Text in Links in der Seite suchen (Zuerst F9 drücken, um den Fokus in die Seite zu setzen.) Umschalttaste + (Ziffernblock) / , (Komma) (Zuerst Wahltaste (Alt) + F9 drücken, um den Fokus in die Seite zu setzen.) Umschalttaste + (Ziffernblock) / , (Komma)
Startseite aufrufen Strg-Taste + Leertaste bzw. Alt + Pos1 ctrl + Leertaste bzw. Wahltaste (Alt) + Anfang
Eine Webadresse eingeben F2 F2
Als URL einfügen und im aktuellen oder neuen Tab aufrufen Strg-Taste + Umschalttaste + V Befehlstaste (cmd) + Umschalttaste + V
Eine Schnellwahltaste aufrufen Strg-Taste + 0-9 Befehlstaste (cmd) + 0-9
Kürzel eingeben, um ein Lesezeichen per Schnellzugriff aufzurufen Umschalttaste + F2 Umschalttaste + F2
Seite als neues Lesezeichen speichern Strg-Taste + D Befehlstaste (cmd) + D
Seite als neues Lesezeichen im aktiven Lesezeichen-Ordner sichern Strg-Taste + Umschalttaste + D Befehlstaste (cmd) + Umschalttaste + D
Aktive Seite neu laden (aktualisieren) Strg-Taste + R Befehlstaste (cmd) + R bzw. F5
Aktiven Frame neu laden Alt + F5 Wahltaste (Alt) + F5 bzw. Befehlstaste (cmd) + Umschalttaste + R
Laden der Seite anhalten Esc Esc bzw. Befehlstaste (cmd) + .
Nächste Seite im Verlauf aufrufen Alt + Pfeil rechts bzw. Strg-Taste + Pfeil rechts bzw. Umschalttaste + Rücktaste bzw. Umschalttaste + Mausrad vor Befehlstaste (cmd) + Pfeil rechts bzw. ctrl + Pfeil rechts bzw. Umschalttaste + Rücktaste bzw. Umschalttaste + Mausrad vor bzw. Befehlstaste (cmd) + ]
Vorhergehende Seite im Verlauf aufrufen Alt + Pfeil links bzw. Strg-Taste + Pfeil links bzw. Rücktaste bzw. Umschalttaste + Mausrad zurück Befehlstaste (cmd) + Pfeil links bzw. ctrl + Pfeil links bzw. Rücktaste bzw. Umschalttaste + Mausrad zurück bzw. Befehlstaste (cmd) + [
Vorlauf Umschalttaste + Rücktaste bzw. Leertaste Umschalttaste + Rücktaste bzw. Leertaste
Druckvorschau der Seite (Ein-/Ausschalten) Strg-Taste + Umschalttaste + P Befehlstaste (cmd) + Umschalttaste + P
Vollbildmodus F11 Wahltaste (Alt) + F11
An Breite anpassen Strg-Taste + F11 Befehlstaste (cmd) + F11
Quelltext anzeigen Strg-Taste + U Befehlstaste (cmd) + U
Quelltext der aktiven Seite oder des gewählten Frames überprüfen lassen Strg-Taste + Alt + Umschalttaste + U Befehlstaste (cmd) + Wahltaste (Alt) + Umschalttaste + U
Skalierung um +10% vergrößern Plus-Zeichen bzw. Strg-Taste + Plus Plus-Zeichen bzw. Befehlstaste (cmd) + Plus
Skalierung um -10% verkleinern Minus-Zeichen bzw. Strg-Taste + Minus Minus-Zeichen bzw. Befehlstaste (cmd) + Minus
Skalierung auf 100% zurücksetzen Ziffernblock * bzw. Strg-Taste + 0 Ziffernblock * bzw. Befehlstaste (cmd) + 0
Nächsten Link in der Seite auswählen Strg-Taste + Pfeil runter Befehlstaste (cmd) + Pfeil runter
Vorhergehenden Link in der Seite auswählen Strg-Taste + Pfeil rauf Befehlstaste (cmd) + Pfeil rauf
Ausgewähltem Link folgen Eingabetaste Eingabetaste
Ausgewählten Link in neuem Tab öffnen Umschalttaste + Eingabetaste Befehlstaste (cmd) + Eingabetaste
Ausgewählten Link im Hintergrund-Tab öffnen Strg-Taste + Umschalttaste + Eingabetaste Befehlstaste (cmd) + Umschalttaste + Eingabetaste
Link-Ziel sichern (z. B. ein Dokument oder ein Bild) Strg-Taste + Umschalttaste + S Befehlstaste (cmd) + Umschalttaste + S
Neuen Tab öffnen Strg-Taste + T Befehlstaste (cmd) + T
Aktiven Tab schließen Strg-Taste + W bzw. Strg-Taste + F4 Befehlstaste (cmd) + W
Wiederherstellen eines geschlossenen Tabs Strg-Taste + Umschalttaste + T Befehlstaste (cmd) + Umschalttaste + T
Neues Programmfenster öffnen Strg-Taste + N Befehlstaste (cmd) + N
Neues privates Programmfenster öffnen Strg-Taste + Umschalttaste + N Befehlstaste (cmd) + Umschalttaste + N
Programmfenster schließen Befehlstaste (cmd) + Umschalttaste + W
Zum nächsten Tab wechseln (standardmäßig die zuletzt benutzte Reihenfolge) Strg-Taste + Tab Wahltaste (Alt) + Tab
Zum vorhergehenden Tab wechseln (standardmäßig die zuletzt benutzte Reihenfolge) Strg-Taste + Umschalttaste + Tab Wahltaste (Alt) + Umschalttaste + Tab
Zum vorherigen Tab in der Tableiste wechseln Strg-Taste + Umschalttaste + F6 Befehlstaste (cmd) + { bzw. Befehlstaste (cmd) + Wahltaste (Alt) + Pfeil links
Zum nächsten Tab in der Tableiste wechseln Strg-Taste + F6 Befehlstaste (cmd) + } bzw. Befehlstaste (cmd) + Wahltaste (Alt) + Pfeil links

(dpe)

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
Design HTML/CSS

CSS3: Native Feature-Detection mit @supports

Wer mit CSS3 arbeitet, läuft immer Gefahr, dass ein Browser bestimmte CSS-Eigenschaften nicht interpretieren kann. Das betrifft nicht nur ältere Browser, wie der aktuelle Internet Explorer beweist. Dienste wie Modernizer erkennen, welche Eigenschaften ein Browser versteht und welche nicht. Mit der „@supports“-Regel gibt es jedoch auch eine native Feature-Detection – derzeit allerdings nur für Opera.

CSS-Eigenschaften mit „@supports“ definieren

Mit der „@supports“-Regel ist es möglich festzustellen, ob ein Browser eine bestimmte CSS-Eigenschaft beherrscht. Nur wenn dies der Fall ist, werden die CSS-Regeln, die innerhalb von„@supports“ definiert sind, auch ausgeführt:

@supports (box-shadow: 5px 5px 10px 10px black) {
  div {
    box-shaow: 5px 5px 10px 10px black;
  }
}

Die Eigenschaft in der runden Klammer gibt die zu prüfende Eigenschaft an. Alles, was in der geschwungenen Klammer steht, wird ausgeführt, wenn der Browser die zu prüfende Eigenschaft versteht. Interessant wird die Funktion natürlich erst, wenn man auch eine Alternative ausgeben kann – für den Fall, dass der Browser die Eigenschaft eben gerade nicht unterstützt:

@supports not (box-shadow: 5px 5px 10px 10px black) {
  div {
    border: 1px black;
  }
}

Im Beispiel wird für den Fall, dass ein Browser die Eigenschaft „box-shadow“ nicht unterstützt, ein einfacher schwarzer Rahmen gezeichnet.

Komplexe Abfragen mit AND und OR

Mit der „@supports“-Regel sind auch Abfragen mehrerer Eigenschaften gleichzeitig möglich. Dazu gibt es die beiden Operatoren AND und OR, die sich beliebig kombinieren lassen, um komplexe Abfragen realisieren zu können:

@supports (text-shadow: 5px 5px 5px black) and (box-shadow: 5px 5px 10px 10px black) {
  div {
    text-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 10px 10px black;
  }
}

@supports (text-shadow: 5px 5px 5px black) and not (box-shadow: 5px 5px 10px 10px black) {
  div {
    border: 1px black;
    box-shadow: 5px 5px 10px 10px black;
  }
}

Wie man es aus Programmiersprachen kennt, ist es möglich, mehrere AND- und OR-Abfragen zu verschachteln, indem man sie in runde Klammern setzt.

Browser-Unterstützung

Derzeit unterstützt nur Opera ab Version 12.10 die „@supports“-Regeln. Mozillas Firefox soll mit der Version 17 folgen. Da beide Browser bereits einen Großteil aktueller CSS-Eigenschaften unterstützen, wird man die „@supports“-Regel erst zukünftig sinnvoll einsetzen können – wenn es mit CSS4 wieder neue Eigenschaften gibt.

(dpe)

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)