{"id":1751,"date":"2011-01-28T03:52:09","date_gmt":"2011-01-28T01:52:09","guid":{"rendered":"http:\/\/vizZzion.org\/blog\/?p=1751"},"modified":"2011-01-28T12:49:28","modified_gmt":"2011-01-28T11:49:28","slug":"das-web-scheibchenweise","status":"publish","type":"post","link":"https:\/\/vizZzion.org\/blog\/2011\/01\/das-web-scheibchenweise\/","title":{"rendered":"Das Web, scheibchenweise"},"content":{"rendered":"<p>Das Web-Scheibchen Widget ist in Plasma (in kdeplasma-addons, noch bis zum Git-Umzug am Wochenende) seit 4.4 enthalten. Ein Web-Scheibchen ist ein Teil einer Website auf dem Desktop. Das kann hilfreich sein, wenn man einen Ausschnitt einer Website im Auge behalten will, allerdings daf\u00fcr aber keinen kompletten Browser starten will.<\/p>\n<p>Richard Moore und ich haben das Webslice Applet auf der Akademy 2009 in Akademy geplant, richmoore hat dann einen Prototypen geschrieben, den ich in ein einfaches Plasma Widget umgesetzt habe. Seit dem ersten Release zusammen mit 4.4 hat sich allerdings wenig dran getan. Es funktioniert im Prinzip recht einfach: Wir laden eine Website in einem Webkit Widget (auf der Plasma Canvas), blenden die Scrollbalken aus, scrollen an die richtige Stelle (zur Geometrie einzelner Element kann man Webkit befragen) und zoomen soweit ein oder aus, dass der Ausschnitt in&#8217;s Widget passt. Das funktionierte so recht gut, allerdings blieben zwei Probleme: Das Vergr\u00f6ssern bzw. Verkleinern des Widgets war viel zu langsam, und dadurch nicht fl\u00fcssig genug, und die Auswahl des Ausschnitts war alles andere als intuitiv &#8212; man musste den richtigen CSS2 Selector eingeben, diesen also erst aus dem Quellcode der Website puhlen.<\/p>\n<p>Gestern abend habe ich eine Reihe \u00c4nderungen eingepflegt, die hier deutliche Verbesserung bringen. Nach Review auf der plasma-devel Mailingliste habe ich diese \u00c4nderungen auch in den 4.6 Zweig committet, d.h. dass sie mit 4.6.1 in ca. einem Monat zur Verf\u00fcgung stehen werden. (Oder ihr besorgt euch den Code aus KDE&#8217;s SVN bzw. Git, unter kdeplasma-addons\/applets\/webslice.) Schau&#8217;n wir mal, was ich so ge\u00e4ndert habe&#8230;<\/p>\n<h3>Performance<\/h3>\n<p><a href=\"http:\/\/vizzzion.org\/blog\/wp-content\/uploads\/2011\/01\/webslice-3-slices.png\"> <\/a><\/p>\n<p><a href=\"http:\/\/vizzzion.org\/blog\/wp-content\/uploads\/2011\/01\/webslice-3-slices.png\"> <img decoding=\"async\" title=\"3 Web-Scheibchen mit verschiedenen Ausschnitten von mehreren Seiten\" src=\"http:\/\/vizzzion.org\/blog\/wp-content\/uploads\/2011\/01\/webslice-3-slices-268x300.png\" alt=\"3 Web-Scheibchen mit verschiedenen Ausschnitten von mehreren Seiten\" \/><\/a> Vor allem das Vergr\u00f6ssern und Verkleinern des Widgets machte eigentlich kaum Spass. Das Web-Scheibchen Widget benutzt eine Webkit View, und zeigt die Seite an einer bestimmten Position an, mit einem zur Plasmoidgr\u00f6sse passendem Zoomfaktor. Soweit, so gut. Dem Performanceproblem lag zugrunde, dass das Widget w\u00e4hrend dem Andern seiner Gr\u00f6sse so viele Resize Events abfing, dass es mit dem Zoomen und Positionieren nicht nachkam, und diese sich aufstauten. Dem habe ich Abhilfe verschafft erstmal die Codepfade, die zum diesen &#8220;resize events&#8221; f\u00fchren aufger\u00e4umt habe, sodass dieser Vorgang nur stattfindet, wenn es wirklich n\u00f6tig ist. Dann habe ich mittels eines QTimers verschiedene, schnell aufeinanderfolgende Events zusammengefasst. Beim Zoomen des Widgets war auch noch so Einiges drin, wenn man die Backingstore zeitweise einfriert, und das komplette Neurendern der Seite dann um einige Millisekunden verz\u00f6gert. Zusammen damit habe ich auch die Seitenverh\u00e4ltnisse flexibler gemacht, diese waren vorher fest eingestellt. (Man kann in Plasma immmer noch unabh\u00e4ngig von den Seitenverh\u00e4ltnissen verkleinern\/vergr\u00f6ssern, indem man die CTRL Taste gedr\u00fcckt h\u00e4lt.) Das erste Problem ist also gr\u00fcndlich gefixt.<\/p>\n<h3>Verbesserte Anwenderfreundlichkeit<\/h3>\n<p><a href=\"http:\/\/vizzzion.org\/blog\/wp-content\/uploads\/2011\/01\/webslice-config-preview.png\"><img decoding=\"async\" title=\"W\u00e4hrend der Konfiguration schaltet das Web-Scheibchen Widget in den \u00dcbersichtsmodus\" src=\"http:\/\/vizzzion.org\/blog\/wp-content\/uploads\/2011\/01\/webslice-config-preview-300x154.png\" alt=\"W\u00e4hrend der Konfiguration schaltet das Web-Scheibchen Widget in den \u00dcbersichtsmodus\" \/><\/a> N\u00e4chster Punkt: Ergonomie. Wie schon erw\u00e4hnt, schr\u00e4nkt das notwendige extrahieren von CSS2 Selektoren aus Webseiten-Quellcode die Zielgruppe des Widgets gelinde gesagt etwas ein. (Eigentlich sind die recht einfach, was aber nicht heisst, dass ich es auch meinem &#8220;Resident non-Geek&#8221; zumuten w\u00fcrde &#8212; ich hab&#8217;s probiert und empfing einen recht leeren Blick als Dank). Ich habe einige Zeit dr\u00fcber nachgedacht, wie man sowas elegant umsetzen kann. Erstmal wollen wir Quellcode-lesen w\u00e4hrend des Setup vermeiden, es sollte einfach sein, den gew\u00fcnschten Ausschnitt auszuw\u00e4hlen, und das Feedback f\u00fcr den Anwender sollte so direkt wie m\u00f6glich sein. Erster Streich: Die Eingabezeile f\u00fcr das CSS Element hat sich verwandelt in eine editierbare Combobox, \u00fcber deren Dropdown-Men\u00fc man jetzt Elemente ausw\u00e4hlen kann. Zweiter Streich: Die URL Eingabezeile hat einen Reload-Knopf zum Nachbarn bekommen, mit dem man eine neue Seite in die Voransicht laden kann (damit werden auch die Elemente in der Combobox erneuert). Dritter Streich: Das Widget zeigt jetzt w\u00e4hrend der Konfiguration eine \u00dcbersicht der ganzen Seite an, und markiert das gerade ausgew\u00e4hlte Element. (Mann kan, wie in allen Comboboxen dann auch mit Maus bzw. Pfeiltasten durch die Liste navigieren, gleichzeitig sieht man im Widget welcher Ausschnitt sich hinter dem kryptischen Namen des Elements (#myid, zum Beispiel) verbirgt. Sobald man best\u00e4tigt, zeigt das Widget dann den Ausschnitt passend gezoomt an.<\/p>\n<p>Alles in allem nicht ganz so triviale \u00c4nderungen. Da das Widget allerdings bisher kaum benutzbar war, die \u00c4nderungen sich recht einfach ohne \u00c4nderungen an den \u00dcbersetzungen vornehmen liessen, und das Risiko auf Regressions in anderen Teilen sehr gering war, habe ich die \u00c4nderungen auch in den 4.6 Zweig eingepflegt. Damit werden sie mit 4.6.1 n\u00e4chten Monat, und mit openSUSE im M\u00e4rz mitgeliefert, und wir somit vielleicht dem ein oder anderen Anwender eine Freude bereiten k\u00f6nnen.<\/p>\n<p>Hier und da gibt&#8217;s nat\u00fcrlich noch Verbesserungsm\u00f6glichkeiten. So kann ein erkl\u00e4render Tooltip hier und da sicherlich nicht schaden, flexiblere Gr\u00f6ssenoptionen, wie Proportion, Originalgr\u00f6sse der Seite (interessant f\u00fcr &#8220;fl\u00fcssige Layouts&#8221;), zum Beispiel. Ich habe daf\u00fcr erstmal sinnvolle Voreinstellungen gew\u00e4hlt, abh\u00e4ngig vom Feedback auf&#8217;s jetzige Featureset sehen wir dann mal weiter.<\/p>\n<h3>4 Minuten Hobbychirurgie<\/h3>\n<p>Abschliessend noch unsere Mitmach-Runde im Mitmach-Web 2.0! Wir haben einen netten Mechanismus, mit dem man kinderleicht eigene Web-Scheibchen-Widgets erstellen kann. Dazu kopiert ihr einfach eine bereits existierende <a href=\"http:\/\/websvn.kde.org\/*checkout*\/trunk\/KDE\/kdeplasma-addons\/applets\/webslice\/plasma\/plasma-applet-webslice.desktop\">Web-Scheibchen .desktop Datei<\/a>. Dateinamen \u00e4ndern (wir wollen ja nichts anderes \u00fcberschreiben), Namen, Kommentar, ev. auch \u00dcbersetzungen updaten (oder einfach l\u00f6schen, falls nicht n\u00f6tig), Autor, etc, Eintr\u00e4ge die man nicht versteht, einfach drin lassen, auf jeden Fall aber die Plasma Library und Mimetype Eintr\u00e4ge. F\u00fcgt dann eine Zeile wie diese hinzu, um das Web-Scheibchen auf das Element mit id=&#8221;myid&#8221; im Tag von der Frontpage von mysite.org l\u00e4d:<\/p>\n<pre> X-Plasma-Args=http:\/\/mysite.org,#myid<\/pre>\n<p>Diese Datei muss man dann nur noch nach ~\/.kde(4)\/share\/kde4\/services\/, <em>kbuildsycoca4<\/em> ausf\u00fchren, um die Plugins und Metadaten auf den neusten Stand zu bringen, und das Widget \u00fcber den Widget Explorer zur Plasma Arbeitsfl\u00e4che oder dem Netbook hinzuf\u00fcgen.<\/p>\n<p>Eine m\u00f6gliche Entwicklungsrichtung f\u00fcr die Zukunft w\u00e4re dann, diese selbsterstellten Web-Scheibchen \u00fcber opendesktop.org mit anderen zu teilen, quasi &#8220;<em>Social Desktop f\u00fcr Web-Metzger<\/em>&#8220;&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das Web-Scheibchen Widget ist in Plasma (in kdeplasma-addons, noch bis zum Git-Umzug am Wochenende) seit 4.4 enthalten. Ein Web-Scheibchen ist ein Teil einer Website auf dem Desktop. Das kann hilfreich sein, wenn man einen Ausschnitt einer Website im Auge behalten will, allerdings daf\u00fcr aber keinen kompletten Browser starten will. Richard Moore und ich haben das&hellip; <a class=\"more-link\" href=\"https:\/\/vizZzion.org\/blog\/2011\/01\/das-web-scheibchenweise\/\">Continue reading <span class=\"screen-reader-text\">Das Web, scheibchenweise<\/span> <span class=\"meta-nav\" aria-hidden=\"true\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,29,13,32,35,31],"tags":[],"class_list":["post-1751","post","type-post","status-publish","format-standard","hentry","category-german","category-kde","category-opensuse","category-plasma","category-qt","category-silk"],"_links":{"self":[{"href":"https:\/\/vizZzion.org\/blog\/wp-json\/wp\/v2\/posts\/1751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vizZzion.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vizZzion.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vizZzion.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vizZzion.org\/blog\/wp-json\/wp\/v2\/comments?post=1751"}],"version-history":[{"count":3,"href":"https:\/\/vizZzion.org\/blog\/wp-json\/wp\/v2\/posts\/1751\/revisions"}],"predecessor-version":[{"id":1754,"href":"https:\/\/vizZzion.org\/blog\/wp-json\/wp\/v2\/posts\/1751\/revisions\/1754"}],"wp:attachment":[{"href":"https:\/\/vizZzion.org\/blog\/wp-json\/wp\/v2\/media?parent=1751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vizZzion.org\/blog\/wp-json\/wp\/v2\/categories?post=1751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vizZzion.org\/blog\/wp-json\/wp\/v2\/tags?post=1751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}