Unter die Haube von Webseiten blicken

Unter die Haube von Webseiten blicken

Wer schon immer mal einen Blick unter die Haube einer Internet-Seite riskieren wollte, ist mit den Entwickler-Tools des Chrome-Browsers bestens bedient. Damit lassen sich das HTML, CSS und weitere Details über die momentan geladene Webseite anzeigen.

Damit sind die Entwickler-Tools der schnellste Weg, die Quelle eines Bildes oder Videos auf einer Seite zu finden. Mit den Entwickler-Tools kann man Seiten sogar dynamisch im Speicher des Browsers ändern, etwa, um dadurch Fehler zu untersuchen und zu beseitigen.

Die Entwickler-Tools werden geöffnet, indem man auf ein beliebiges Element einer Webseite mit der rechten Maustaste klickt und dann Prüfen wählt. Alternativ dazu im Chrome-Menü auf Werkzeuge, Entwicklertools klicken oder [Strg]+[Umschalt]+[I] (Windows) oder [Umschalt]+[Cmd]+[I] (Mac) drücken.

Hat man schon einmal die Erweiterung Firebug für den Firefox-Browser getestet, wird man sich gleich zuhause fühlen. Und vielleicht ein wenig neidisch sein…

chrome-entwickler-tools

HTML-Dokument in ein Bild umwandeln

HTML-Dokument in ein Bild umwandeln

Mit Standard-Mitteln lässt sich eine HTML-Datei oder Webseite nicht in ein Bild konvertieren. Dabei könnte man das manchmal ganz gut gebrauchen – etwa, um eine Internetseite in eine PowerPoint-Präsentation einzubinden. Besonders einfach gelingt die Umwandlung mit dem Universal Document Converter.

Nach der Installation des kostenlosen Tools wird die Website im Browser geöffnet. Anschließend zum Drucken-Fenster wechseln, indem auf [Strg]+[P] gedrückt wird. Hier entfernt man die Optionen zum Drucken von Hintergrundfarben, -bildern und Kopfzeilen.

Anschließend als Drucker den „Universal Document Converter“ wählen und dessen Eigenschaften aufrufen. Nach einem Klick auf „Load Properties“ wählt man die Vor-Einstellungen für „Web page to PDF.xml“ und bestätigt mit „OK“. Nach dem „Ausdrucken“ der Webseite findet sich die erzeugte Bild-Datei im Ordner „Dokumente\UDC Output Files“ wieder, von wo sie per Doppelklick im Standard-Programm für Bilder geöffnet werden kann.

html-als-bild-universal-document-converter

Google-Dokumente und Tabellen im Web veröffentlichen

Google-Dokumente und Tabellen im Web veröffentlichen

Google Docs lässt sich nicht nur für firmeninterne Dokumente nutzen, sondern auch für Dateien, um sie per Link für andere freizugeben oder direkt in eine Website einzubetten. Die nötigen Funktionen sind direkt in die Web-Oberfläche von Google Docs integriert.

Um ein Google-Dokument im Web zu veröffentlichen, wird das gewünschte Dokument zunächst im Browser geladen. Anschließend folgen Klicks auf „Datei, Im Web veröffentlichen“.

Hier hat man jetzt die Wahl zwischen dem Erstellen eines Links, mit dem das Dokument abgerufen werden kann, oder dem Abrufen eines Einbettungs-Codes, den man in HTML-Form in eine Website oder ein WordPress-HTML-Widget einfügen kann.

google-docs-im-web-veroeffentlichen

Edge-Browser: Favoriten-Leiste aktivieren und Favoriten importieren

Edge-Browser: Favoriten-Leiste aktivieren und Favoriten importieren

In Windows 10 ist Edge der Standardbrowser. Wer seine Lesezeichen aus anderen Browsern in Edge sehen will, muss sie zuerst importieren. Hier steht Schritt für Schritt, wie das geht.

  1. Als Erstes startet man den Edge-Browser per Klick auf das blaue e-Symbol in der Taskleiste von Windows 10.
  2. Jetzt oben rechts auf den Button mit den drei Punkten und dann im Menü ganz unten auf „Einstellungen“ klicken.
  3. Unterhalb des Klappfeldes „Design auswählen“ wird der Schalter „Favoritenleiste anzeigen“ eingeschaltet.
  4. Um Lesezeichen aus einem anderen Browser zu importieren, folgt ein Klick auf „Favoriten aus anderem Browser importieren“.
  5. Jetzt einfach die Browser per Haken auswählen, von denen Daten importiert werden sollen.

Das war’s auch schon! Die Favoriten werden sofort eingelesen und angezeigt.

microsoft-edge-logo

URLs in Text-Dateien öffnen

URLs in Text-Dateien öffnen

Textdateien unterstützen im Gegensatz zu HTML-, Word- oder PDF-Dokumenten bekanntlich keinerlei Formatierung – etwa für Fett, Kursiv oder auch für anklickbare Website-Links. Mac-Nutzer haben es trotzdem einfach. Denn hier lassen sich URLs aus Textdateien ohne manuelles Kopieren und Einfügen aufrufen.

Um eine URL in einem Textdokument direkt im Browser zu laden und die zugehörige Webseite anzuzeigen, wird die entsprechende Textdatei zunächst per Doppelklick geöffnet. Wir gehen in diesem Tipp davon aus, dass die Datei daraufhin mit dem Standard-Editor „TextEdit“ angezeigt wird.

Jetzt klickt man direkt mit der rechten Maustaste irgendwo in eine Internetadresse, die in der Textdatei steht. Sie wird daraufhin komplett markiert, und das Kontextmenü erscheint. Nun genügt ein Klick auf „URL öffnen“, und die entsprechende Webseite wird im Standardbrowser des Systems geladen. Normalerweise ist das Safari.

osx-textedit-url-oeffnen

Responsive eMails gestalten

Responsive eMails gestalten

Wer eine ansprechend gestaltete E-Mail erstellen möchte, kann mit einem neuen Onlinedienst das Layout bestimmen und bekommt die nötige technische Hilfe an die Hand.

(mehr …)

Lese-Zeichen beim Be-enden von Firefox automatisch sichern

Lese-Zeichen beim Be-enden von Firefox automatisch sichern

Fast alle Browser können Back-Ups der Lese-Zeichen automatisch in der Cloud sichern. Wer sie lieber in Text-Form auf der Festplatte hat, aktiviert in Firefox das automatische Exportieren als HTML-Datei. Die Lese-Zeichen werden dann bei jedem Be-enden des Browsers exportiert.

Wer seine Firefox-Lesezeichen immer automatisch als HTML-Datei speichern will, geht wie folgt vor:

  1. Firefox starten, in die Adress-Zeile die besondere Adresse about:config
  2. Den Warn-Hinweis bestätigen.
  3. Jetzt nach der Option „browser.bookmarks.autoExportHTML“ suchen.
  4. Die Einstellung wird dann per Doppel-Klick von „false“ auf „true“ geändert.

Die erzeugte Bookmark-Datei findet sich ab sofort immer aktuell im Firefox-Profil-Ordner, der Datei-Name heißt „bookmarks.html“.

firefox-config-export-bookmarks

Wird eine Web-Funktion von allen Browsern unterstützt?

Wird eine Web-Funktion von allen Browsern unterstützt?

Als Webdesigner steht man oft vor dem Problem, die neusten HTML-, CSS- oder JavaScript-Techniken nutzen zu wollen, aber nicht zu können. Denn meist surft ein Anteil der Besucher mit veralteten Browsern, die die fraglichen Technologien eben (noch) nicht verstehen. Wer wissen will, ob eine bestimmte Technik „gefahrlos“ einsetzbar ist, kann dies nachschlagen.

Um festzustellen, ob eine Web-Funktion von allen wichtigen Internet-Programmen korrekt unterstützt wird, surft zur Adresse www.caniuse.com. Oben auf der Seite findet sich an prominenter Stelle ein Suchfeld. Hier einfach ein passendes Schlagwort eintippen – wie zum Beispiel Video.

Die Datenbank der Browser-Unterstützung wird daraufhin sofort live durchsucht. Die Ergebnisse erscheinen dann in einem praktischen Diagramm, mit dem sich nicht nur die aktuellen Browser-Versionen miteinander vergleichen lassen, sondern auch frühere und kommende Ausgaben der Internet-Programme.

www.caniuse.com

caniuse