- Registriert
- 3 Aug. 2014
- Beiträge
- 28.562
Ich habe aufgrund eines indirekten Requests ein kleines Browser Add-on geschrieben.
Allerdings bin ich mit dem Design aktuell nicht zufrieden und da das ganze auf HTML/CSS aufbaut - ich aber wenig Einblick in die Webgestaltung habe (von der Programmierung mal abgesehen) und mir das Feingefühl dazu fehlt, möchte ich hier um Hilfe bitten - wie man das ganze etwas geschickter präsentiert so das es modern und "gut strukturiert" ist.
Zunächst einmal, was zeigt das Add-on:
Ein "Popup"-Fenster über einen Toolbar Button (Firefox) (der Keks!)
Grundsätzlich gibt es bisher nur zwei "Modi"/"Views", die durch Listenelemente den Namen und den Wert von Cookies darstellen.
In Modus "All cookies" können Domain-Cookies an oder abgewählt werden, die dann gelöscht werden sollen beim Neuladen/Browsen/Schließen.
In Modus 2 ist bisher nur eine simple Auflistung, ähnliche wie in 1, die alle "geflaggten" Cookies anzeigt für die Domain, hier würde ich noch einplanen das man auch hier Cookies "abwählen" kann, da der Modus auch Cookies mit Namen (ohne Wert) auflistet, die dann wieder "unflagged" werden, also das diese, auch wenn sie nicht aktiv sind auf der (Unter)seite der Domain, gemanaged werden können.
So sieht es bisher aus:
Modus 1 ("all cookies):
Rot = "geflagged" (zum automatischen Löschen vermerkt)
Gelb = "unflagged" (werden behalten)
Modus 2 ("flagged cookies):
Wie ihr seht, es ist nicht unbedingt hübsch anzusehen.... - aber sollte auch mehr "funktional" sein. Wenn ich mir andere Add-ons ansehe, sind die einfach schöner umgesetzt.
Ich weiß nicht ob es grundsätzlich der Einsatz von Icons und Bildern ist (das wäre möglich) - oder einfach eine klarere Darstellung.
Es geht mir nicht direkt darum das jemand Grafiken designed, aber vielleicht wären freie Icons schon ein Anfang damit falls jemand da eine Idee hat, aber auch, wie man die Informationen und die Nutzung erleichtern kann mit dem was gegeben bzw. geplant ist. - Also das schnell ersichtlich ist, "was markiert" ist und was nicht, bzw. auch die Useability. - Funktionen hinzuzufügen wäre theoretisch kein Problem. Auch bin ich nicht auf das HTML und CSS festgenagelt und auch das Javascript zu erweitern, stellt kein Problem da.
Das Basis-HTML sieht so aus:
[src=html5]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="cookies.css"/>
</head>
<body>
<div class="panel">
<div class="panel-section panel-section-header">
<div id="header-title"></div>
<div id="tabs">
<button id="allCookies">All cookies</button>
<button id="flaggedCookies">Flagged cookies</button>
</div>
</div>
<ul id="cookie-list"></ul>
<ul class="hidden" id="cookie-list-flagged"></ul>
</div>
<script src="flagCookies.js"></script>
</body>
</html>[/src]
In "cookie-list" und "cookie-list-flagged" werden einfach LI-Elemente dynamisch erstellt, welche einen Button "Flag" und einen Paragraphen enthalten, der wiederum zwei "span"-Elemente enthält, mit je einer Klasse. "cookieKey" und "cookieValue" als Klassennamen.
Die finale Zeile sieht in etwa so aus:
[src=html5]<ul id="cookie-list">
<li><button data-name="cookieName" data-value="cookieValue">Flag</button><p><span class="cookieKey>Name/Key des Cookies</span><span class="cookieValue">Wert des Cookies</span></p></li>
<li><button class="flagged" data-name="cookieName" data-value="cookieValue">Flag</button><p><span class="cookieKey>Name/Key des Cookies</span><span class="cookieValue">Wert des Cookies</span></p></li>
</ul>[/src]
Für "cookie-list-flagged" entfällt lediglich der Button.
Ich hatte mir zum Beispiel überlegt, vielleicht sollte man mit "Input" arbeiten um den Wert eines Cookies zu listen bzw. schnell zu kopieren. Man könnte sogar soweit gehen, den Cookie Wert "on-the-fly" bearbeiten zu lassen, wäre vielleicht eine weitere Idee, wenn man Input Felder dafür nutzt. Oder Cookies mit "Zufallsdaten" füllen lassen.... aber das hilft natürlich nicht zwingend eine bessere Handhabung zu erzeugen oder die Optik aufzuwerten. Wollte nur sagen, das wäre theoretisch auch möglich. Oder eine Suche nach einem Cookie in Name und oder Wert....
Das CSS sieht so aus:
[src=css]html, body {
width: 800px;
max-height: 490px;
color: #335;
background-color: #337;
font-family: sans;
}
.panel {
overflow-y: scroll;
overflow-x: hidden;
}
.panel-section-header {
font-weight: bold;
font-size: 1.25em;
text-transform: uppercase;
position: sticky;
top: 0px;
z-index: 10;
background-color: #9e9ec7;
border-bottom: 1px solid #000;
border-top: 1px solid #cce;
}
ul {
clear: both;
padding: 8px 8px;
margin: 0px;
list-style: none;
}
li {
position: relative;
clear: left;
padding: 3px;
border-radius: 9px;
background-color: #aeaece;
margin-bottom: 4px;
display: block;
border-bottom: 1px solid #779;
border-top: 1px solid #eef;
}
li:nth-child(2n+1) {
background-color: #bebede;
}
.cookieKey {
font-size: 1.25em;
font-weight: bold;
margin-bottom: 0.3em;
margin-right: 15px;
display: block;
}
.cookieValue {
color: #557;
}
p {
position: relative;
word-wrap: break-word;
width: 85%;
left: 4%;
top: 0%;
display: inline-block;
}
button {
text-transform: uppercase;
text-align: center;
border-radius: 18px;
border: 1px solid #666;
font-weight: bold;
padding: 3px 9px;
}
#header-title {
max-width: 75%;
}
#tabs {
position: absolute;
top: 0.75em;
right: 1%;
}
#cookie-list button {
position: relative;
float: left;
top: 0.75em;
left: 0.75em;
max-width: 8%;
padding: 3px 9px;
background-color: #f0f020;
color: #447;
}
button::-moz-focus-inner {
border: none;
}
#cookie-list button.flagged {
background-color: #a00000;
color: #fff;
}
.hidden {
display: none;
}
[/src]
Hat jemand Ideen wie man das aktuelle Design aufwerten kann?
Mehr Details über die Code Parts finden sich hier: https://github.com/jrie/flagCookies
Allerdings bin ich mit dem Design aktuell nicht zufrieden und da das ganze auf HTML/CSS aufbaut - ich aber wenig Einblick in die Webgestaltung habe (von der Programmierung mal abgesehen) und mir das Feingefühl dazu fehlt, möchte ich hier um Hilfe bitten - wie man das ganze etwas geschickter präsentiert so das es modern und "gut strukturiert" ist.
Zunächst einmal, was zeigt das Add-on:
Ein "Popup"-Fenster über einen Toolbar Button (Firefox) (der Keks!)
Grundsätzlich gibt es bisher nur zwei "Modi"/"Views", die durch Listenelemente den Namen und den Wert von Cookies darstellen.
In Modus "All cookies" können Domain-Cookies an oder abgewählt werden, die dann gelöscht werden sollen beim Neuladen/Browsen/Schließen.
In Modus 2 ist bisher nur eine simple Auflistung, ähnliche wie in 1, die alle "geflaggten" Cookies anzeigt für die Domain, hier würde ich noch einplanen das man auch hier Cookies "abwählen" kann, da der Modus auch Cookies mit Namen (ohne Wert) auflistet, die dann wieder "unflagged" werden, also das diese, auch wenn sie nicht aktiv sind auf der (Unter)seite der Domain, gemanaged werden können.
So sieht es bisher aus:
Modus 1 ("all cookies):
Rot = "geflagged" (zum automatischen Löschen vermerkt)
Gelb = "unflagged" (werden behalten)
Modus 2 ("flagged cookies):
Wie ihr seht, es ist nicht unbedingt hübsch anzusehen.... - aber sollte auch mehr "funktional" sein. Wenn ich mir andere Add-ons ansehe, sind die einfach schöner umgesetzt.
Ich weiß nicht ob es grundsätzlich der Einsatz von Icons und Bildern ist (das wäre möglich) - oder einfach eine klarere Darstellung.
Es geht mir nicht direkt darum das jemand Grafiken designed, aber vielleicht wären freie Icons schon ein Anfang damit falls jemand da eine Idee hat, aber auch, wie man die Informationen und die Nutzung erleichtern kann mit dem was gegeben bzw. geplant ist. - Also das schnell ersichtlich ist, "was markiert" ist und was nicht, bzw. auch die Useability. - Funktionen hinzuzufügen wäre theoretisch kein Problem. Auch bin ich nicht auf das HTML und CSS festgenagelt und auch das Javascript zu erweitern, stellt kein Problem da.
Das Basis-HTML sieht so aus:
[src=html5]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="cookies.css"/>
</head>
<body>
<div class="panel">
<div class="panel-section panel-section-header">
<div id="header-title"></div>
<div id="tabs">
<button id="allCookies">All cookies</button>
<button id="flaggedCookies">Flagged cookies</button>
</div>
</div>
<ul id="cookie-list"></ul>
<ul class="hidden" id="cookie-list-flagged"></ul>
</div>
<script src="flagCookies.js"></script>
</body>
</html>[/src]
In "cookie-list" und "cookie-list-flagged" werden einfach LI-Elemente dynamisch erstellt, welche einen Button "Flag" und einen Paragraphen enthalten, der wiederum zwei "span"-Elemente enthält, mit je einer Klasse. "cookieKey" und "cookieValue" als Klassennamen.
Die finale Zeile sieht in etwa so aus:
[src=html5]<ul id="cookie-list">
<li><button data-name="cookieName" data-value="cookieValue">Flag</button><p><span class="cookieKey>Name/Key des Cookies</span><span class="cookieValue">Wert des Cookies</span></p></li>
<li><button class="flagged" data-name="cookieName" data-value="cookieValue">Flag</button><p><span class="cookieKey>Name/Key des Cookies</span><span class="cookieValue">Wert des Cookies</span></p></li>
</ul>[/src]
Für "cookie-list-flagged" entfällt lediglich der Button.
Ich hatte mir zum Beispiel überlegt, vielleicht sollte man mit "Input" arbeiten um den Wert eines Cookies zu listen bzw. schnell zu kopieren. Man könnte sogar soweit gehen, den Cookie Wert "on-the-fly" bearbeiten zu lassen, wäre vielleicht eine weitere Idee, wenn man Input Felder dafür nutzt. Oder Cookies mit "Zufallsdaten" füllen lassen.... aber das hilft natürlich nicht zwingend eine bessere Handhabung zu erzeugen oder die Optik aufzuwerten. Wollte nur sagen, das wäre theoretisch auch möglich. Oder eine Suche nach einem Cookie in Name und oder Wert....
Das CSS sieht so aus:
[src=css]html, body {
width: 800px;
max-height: 490px;
color: #335;
background-color: #337;
font-family: sans;
}
.panel {
overflow-y: scroll;
overflow-x: hidden;
}
.panel-section-header {
font-weight: bold;
font-size: 1.25em;
text-transform: uppercase;
position: sticky;
top: 0px;
z-index: 10;
background-color: #9e9ec7;
border-bottom: 1px solid #000;
border-top: 1px solid #cce;
}
ul {
clear: both;
padding: 8px 8px;
margin: 0px;
list-style: none;
}
li {
position: relative;
clear: left;
padding: 3px;
border-radius: 9px;
background-color: #aeaece;
margin-bottom: 4px;
display: block;
border-bottom: 1px solid #779;
border-top: 1px solid #eef;
}
li:nth-child(2n+1) {
background-color: #bebede;
}
.cookieKey {
font-size: 1.25em;
font-weight: bold;
margin-bottom: 0.3em;
margin-right: 15px;
display: block;
}
.cookieValue {
color: #557;
}
p {
position: relative;
word-wrap: break-word;
width: 85%;
left: 4%;
top: 0%;
display: inline-block;
}
button {
text-transform: uppercase;
text-align: center;
border-radius: 18px;
border: 1px solid #666;
font-weight: bold;
padding: 3px 9px;
}
#header-title {
max-width: 75%;
}
#tabs {
position: absolute;
top: 0.75em;
right: 1%;
}
#cookie-list button {
position: relative;
float: left;
top: 0.75em;
left: 0.75em;
max-width: 8%;
padding: 3px 9px;
background-color: #f0f020;
color: #447;
}
button::-moz-focus-inner {
border: none;
}
#cookie-list button.flagged {
background-color: #a00000;
color: #fff;
}
.hidden {
display: none;
}
[/src]
Hat jemand Ideen wie man das aktuelle Design aufwerten kann?
Mehr Details über die Code Parts finden sich hier: https://github.com/jrie/flagCookies
Zuletzt bearbeitet: