X auf Bild bei Hover

[Sophie]

Hallo,

aufm einer Übersichtsseite möchte ich gerne Bilder löschen können. Dazu möchte ich mit der Maus über das Bild fahren und es soll ein großes X (für Löschen) erscheinen. Durch einen klick, wird das Bild dann gelöscht

<section class="pictures">
	<a href=""><img src="bilder-2017/1.jpg" alt=""></a>
	<a href=""><img src="bilder-2017/2.jpg" alt=""></a>
	<a href=""><img src="bilder-2017/3.jpg" alt=""></a>
	<a href=""><img src="bilder-2017/4.jpg" alt=""></a>
	<a href=""><img src="bilder-2017/5.jpg" alt=""></a>
	<a href=""><img src="bilder-2017/6.jpg" alt=""></a>
</section>

.pictures {
    display: flex;
    flex-wrap: wrap;
}

Jedes Bild ist 366x263px breit/hoch. Wie würdet ihr das mit dem X machen?

[TS]

Hello,

Datenmanipulation sollte man nicht per GET vornehmen, sondern perPOST und möglichst auch mit TLS abgesichert..

Liebe Grüße
Tom S.

[Sophie]

Hallo @TS

das ist hier kein Problem, da nur ich in den Admin-Bereich komme. Außerdem kann ich kein Button über ein Bild legen um an POST Daten zu kommen?

[TS]

Hello,

wehret den Anfängen ...

Das Bild selber kann der Button sein.
Du könntest eine Checkbox darauf plazieren.
Du kannst selbstverständlich auch andere Bilder (als Buttons) über den Bildern positionieren, die per CSS :hover dann angezeigt werden.

Ich kann Dir auf dem Tablet jetzt leider kein Beispiel bauen

Liebe Grüße
Tom S.

[Rolf b]

Die Gefahr ist, dass dein Admin-Zugang ausgespäht werden könnte wenn kein HTTPS gefahren wird.

Das Thema GET/POST ist nicht ganz so unbedeutend und es geht hier auch nicht nur ums Prinzip.

Das HTTP-Verb GET ist für lesende Zugriffe gedacht, und Browser können das Caching bei GET-Requests anders steuern. Ein "Back" im Browser auf eine mit GET geholte Seite wird auch anders behandelt als auf eine gePOSTete (der Browser fragt bei einem "Zurück" auf eine gepostete Seite: Die Seite wird nochmal gesendet, wollen Sie das?)

Unter diesem Gesichtspunkt ist es wichtig, dass Du die Bilder nicht über ihre Position auf der Seite identifizierst, sondern über eine bildspezifische ID, sonst kann Dir ein "Zurück" zur Delete-Anforderung echten Ärger bereiten.

Zur Technik ist alles gesagt: Ein Button-Element kann ein <img> enthalten, und wenn dieser Button dann ein Submit-Button ist, geht der Rest von allein.

Ich möchte Dich aber noch kurz auf Usability hinweisen. DELETE ist eine gefährliche Operation. Willst Du nicht lieber eine Checkbox neben/über/unter die Bilder machen und einen separaten Button, der die angehakten Bilder löscht? Hier könnte man auch mit Checkbox-Hack und etwas CSS die Bilder selbst zur Checkbox machen (sprich: das <img> steckt im Label, die Checkbox selbst ist versteckt, und über CSS sorgt man dafür dass der checked-Zustand der Checkbox bspw. einen Rahmen um das Bild erzeugt).

Rolf

[Sophie]

Hallo @Rolf b

danke für deine Erklärung, nein ich möchte keine Checkboxen haben, denn damit habe ich ein weiterer Klick was ich nicht möchte. Es reicht wenn man auf das Bild klickt und weg ist es. Außerdem habe ich noch ein Sicherheitscheck eingebaut

<a href="del.php?delete=<?php echo $dateiinfo['basename']; ?>">
   <img src="<?php echo $dateiinfo['dirname']."/".$dateiinfo['basename'];?>" alt="" 
     onclick="return confirm('Soll das Bild wirklich gelöscht werden?')">
</a>

Und geklärt wie das mit dem Bild geht also dem Hover und dem X ist es leider noch nicht. Da bin ich noch kein Schritt weiter.

[Rolf b]

Red Alert - keine Realinformationen über deinen Server (Pfadangaben!) ins Web. Wer das hackt, löscht Dir mit einem verfingerten del.php Aufruf den halben Server. Dateinamen sind riskant genug. Das musst Du anders lösen.

Mit dem Hover bastel ich gleich mal. Und natürlich MÜSSTEST Du auch über Accessibility nachdenken, sprich Tastaturbedienung. Da gibt's keinen Hover. Sollte auch ein :focus ein rotes X auslösen? Das hat dann den kleinen Nachteil, dass es ggf. zwei X gibt (eins beim Fokus, eine beim Hover) - das ist eins der Grundprobleme bei gemischter Tastatur-/Mausbedienung.

Die Sache mit dem "1 Klick" ist aber nicht ganz richtig, du hast 2 Klicks, gelle? Bild und OK. Den Confirm kannst Du bei einem Form mit Checkbox-Bildern auch machen, und dann ggf. mehrere selektierte Bilder auf einmal Confirmen. Ich hab dazu mal gebastelt, das ist dann aber noch schlechter Tastaturbedienbar als Deins und darum möchte ich es eigentlich gar nicht zeigen...

Rolf

[Sophie]

Hallo,

Red Alert - keine Realinformationen über deinen Server (Pfadangaben!) ins Web. Wer das hackt, löscht Dir mit einem verfingerten del.php Aufruf den halben Server. Dateinamen sind riskant genug. Das musst Du anders lösen.

ich kann es anderes leider nicht lösen, denn die Bilder werden über ein externe Tool mir direkt auf den Server geladen. Ich habe keine Datenbank wo die Bilder vermerkt sind, also greife ich einfach auf den Bildnamen zu.

So lese ich meine Bilder aus

<?php
	$ordner = "bilder2017";
	$alledateien = scandir($ordner);           
	 
	foreach ($alledateien as $datei) {
	 
		$dateiinfo = pathinfo($ordner."/".$datei); 
		
		if ($datei != "." && $datei != ".."  && $datei != "_notes" && $bildinfo['basename'] != "Thumbs.db") { 
	 
		//Bildtypen sammeln
		$bildtypen= array("jpg", "jpeg", "png");
		
		//Dateien nach Typ prüfen, in dem Fall nach Endungen für Bilder filtern
		if(in_array($dateiinfo['extension'],$bildtypen))
	{
	?>
		<a href="picture.php?bild=<?php echo $dateiinfo['basename']; ?>">
			<img src="<?php echo $dateiinfo['dirname']."/".$dateiinfo['basename'];?>" alt="">
		</a>
	<?php } }} ?>

[Rolf b]

Ok, versuche zumindest den Ordnernamen irgendwie intern zu halten (in der Session speichern?), und lass um Himmels willen nicht zu, dass ein Slash oder Backslash verarbeitet wird, damit niemand aus dem Bilder-Ordner ausbrechen kann.

Für Hover hätte ich hier einen Vorschlag. Mangels Grafik-Vorrat habe ich einfach ein Text-X draufgehauen und das jsfiddle-Logo als Hintergrund, statt dessen nimmst Du in deiner Lösung ein Bild von Dir mit dem roten X und transparentem Drumherum, und einen leeren Content. Das ist reine Dekoration, die Funktion steckt im Button mit IMG drin. Statt Button kannst Du auch bei deinen <a> bleiben, das ist Deine Entscheidung. Gründe für einen Wechsel zu POST und Form hast Du nun genug gehört.

Merkwürdigerweise ist der article um 4 Pixel zu hoch, deshalb hängt im Fiddle das Bild über die rote Fläche hinaus. Bei Dir wird das nicht auffallen, vermutlich hast Du ein besser passendes X Bild.

Rolf

[Gunnar Bittersmann]

@@Rolf b

Für Hover hätte ich hier einen Vorschlag.

Und warum nicht für :focus? Denselben Effekt will man doch auch bei Tastaturbedienung haben.

Merke: Wann immer :hover im Stylesheet auftaucht, sollte :focus nicht weit sein.

In dem Fall wäre button:focus::after zu ergänzen. (Der Button, nicht das article-Element wird fokussiert.) Ich würde den Hovereffekt auch auf den Button legen, also article:hover::after ersetzen durch button:hover::after, button:focus::after.

Apropos article-Element: Weder article noch section sind hier richtig. Da es sich um eine Liste handelt, bieten sich ul (ol) und li an.

Statt Button kannst Du auch bei deinen <a> bleiben

Falsch. Für Aktionen auf einer Seite sind Buttons richtig und a falsch. a-Elemente sind für Links zu anderen Seiten (bzw. anderen Stellen auf der Seite).

LLAP 🖖

[Gunnar Bittersmann]

@@Rolf b

die Funktion steckt im Button mit IMG drin.

Und nicht vergessen, die Funktion auch mitzuteilen, d.h. der alt-Text wäre hier nicht einfach $Bildbeschreibung, sondern sowas wie alt="Bild „$Bildbeschreibung“ löschen"

LLAP 🖖

[TS]

Hello,

ich kann es anderes leider nicht lösen, denn die Bilder werden über ein externe Tool mir direkt auf den Server geladen. Ich habe keine Datenbank wo die Bilder vermerkt sind, also greife ich einfach auf den Bildnamen zu.

Du wirst doch aber mit einer Sessiondatei arbeiten?

Dann lege in der Sessiondatei die Liste der Pfade zu den Bildern an (Array), würfele einen Hash dafür aus, den du dann als ID für den Postbutton oder auch als Parameter für den Löschlink (der ja auch wie ein Button gestylt werden kann) benutzen kannst.

So können nur User, die berechtigt sind, Bilder anzeigen zu lassen, diese auch löschen. Man muss dazu den Hash kennen und er muss noch in der Sessiondatei vermerkt sein. Jeder andere Delete-Request wird einfach ignoriert.

Und bitte wirklich einen Hash benutzen und nicht einfach durchnumerieren. Das löst zwei Probleme:

• nicht iterierbar / grabbar
• Sicherheit wegen des Repost-Problems

Liebe Grüße
Tom S.

[TS]

Hello,

deine Scan-Routine macht eventuell einen zirkulären Verlauf, wenn ein symbolischer Link dazwischen ist. Und Schau dir mal glob() an.

Morgen früh mehr dazu von mir ...

Liebe Grüße
Tom S.

[Robert B.]

Hallo Sophie,

in deinem Code fehlt noch die Behandlung des Kontextwechsels nach HTML. Die Zeichen < und > sind zwar unter Windows nicht in Dateinamen erlaubt, aber unter Unix schon, genauso wie & und " ← und zumindest letzteres geht auch unter Windows.

Viele Grüße
Robert

[Matthias Apsel]

Hallo Sophie,

Warum stecken die Bilder in a-Elementen?

Wie würdet ihr das mit dem X machen?

<img src="" alt=""><button>löschen</button>

img + button { display: none; }

img:hover + button { display: block; }

Außerdem die Buttons absolut positionieren und sie so gestalten, wie ich das möchte.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

<img src="" alt=""><button>löschen</button>

img + button { display: none; }

img:hover + button { display: block; }

Nein, so nicht. Mit Tastatur geht da gar nichts.

LLAP 🖖

[Henry]

Hallo,

Besser wäre es die Bilder nicht wirklich zu löschen, sondern umzubennen/verschieben um versehentlich gelöschte wieder herstellen zu können. Außerdem ersparst Du dir den Alert-klick. Ich habe da eben mal was gebastelt. Ist das so in etwa was du suchst?

Gruss Henry

[Sophie]

Guten Morgen @Henry

jaaaaaaa, genau so etwas suche ist dazu schaut deine Version noch richtig toll aus.

[Henry]

Hallo Sophie,

Das Ganze System ist nur eine einzige Datei, mache noch ein paar Anmerkungen darin und poste es dann hier, damit vielleicht noch jemand was verbessert oder kommentiert, denn es ist ziemlich simple gestrickt und entspricht nicht den Anforderungen hier, was nicht nur an meiner Faulheit liegt, sondern auch den Vorteil hat, dass es so leicht nachvollziehbar ist und damit schnell anpassbar.

Gruss
Henry

[Henry]

Hallo,

wenn du die folgende Datei neben einem Bilder-Verzeichnis/Dir mit Namen "img" legst, dürfte es ohne Änderungen funktionieren.

<?php

error_reporting(E_ALL);


$mess= $rescue = ''; // nicht wirklich notwendig aber verhindert error notice(nicht deklarierte Variable)

// diese Datei
$fl = basename($_SERVER['PHP_SELF']);

// $path = pathinfo($_SERVER['PHP_SELF'],PATHINFO_DIRNAME).'/';

// Bilderverzeichnis festlegen
$verz = 'img/';    // in dem Fall slash am ende, wenn im gleichen Ordner wie bilder dann natürlich nicht

// Schlüsselwort/Präfix für gelöschte Dateien
$delkey = 'GARB_';





// Hier die Löschoperation, wenn aufgerufen
// ########################

// Die Datei wird nicht wirklich gelöscht, sondern nur umbenannt um versehentliches Löschen rückgängig zu machen.

if(isset($_POST['del_post']) && file_exists($verz.$_POST['del_post']))
{
$fl2del = $verz.$_POST['del_post'];
$delfl = $verz.$delkey.$_POST['del_post'];

if(rename($fl2del,$delfl) ){$mess = '<h3">Datei: '.$_POST['del_post'].' wurde gelöscht</h3>';}
else{$mess = ('<h3 style="color:red;">ERROR: Fehler im System1</h3>');}
}
// ########################



// Hier die Wiederherstellung, wenn aufgerufen
// ########################
if(isset($_POST['del_rescue']) && file_exists($verz.$_POST['del_rescue']))
{
$fl2resc = $verz.$_POST['del_rescue'];
if(rename($fl2resc,$verz.str_replace($delkey,'',$_POST['del_rescue'])) ){$mess =  '<h3">Datei: '.$_POST['del_rescue'].' wurde wiederhergestellt</h3>';}
else{$mess = ('<h3 style="color:red;">ERROR: Fehler im System</h3>');}
}
// ########################




function bildausgabe($mod='')
{

$verz =  $GLOBALS['verz'];
$fl =  $GLOBALS['fl'];
$delkey =  $GLOBALS['delkey'];



//erlaubte Endungen (nach Bedarf anpassen)
$ext = array('jpg','png','gif','ico');

// Endungen funktionstauglich (glob) machen
$ext_pat = '*.'.implode(',*.',$ext);



 // Kompletter Funktionspattern
$ext_pat = $verz.'{'.$ext_pat.'}';


// Verzeichnis auslesen als Array
$img_ar = glob($ext_pat, GLOB_BRACE);



// Jetzt Verzeichnis einlesen und HTML erzeugen

$outp = ''; // nicht wirklich notwendig aber verhindert error notice
$outp_del = ''; // nicht wirklich notwendig aber verhindert error notice

foreach( $img_ar as $img)
{

// Gelöscht markierte Bilder finden, seperat auflisten und schleife überspringen damit diese Dateien nicht in der eigentlichen Liste erscheinen
if(strpos($img,$delkey)){
$outp_del .= '<div><button name="del_rescue" value="'.basename($img).'" type="submit" class="imgdel">HERSTELLEN</button><img src="'.$img.'" alt=""></div>'."\r\n";
continue;
}

$outp .= '<div><button name="del_post" value="'.basename($img).'" type="submit" class="imgdel">LÖSCHEN</button><img src="'.$img.'" alt=""></div>'."\r\n";

} // end foreach



// Das Ganze als Formular
$outp = '<form method="post" action="'.$fl.'">'.$outp.'</form>';
$outp_del = '<form  method="post" action="'.$fl.'">'.$outp_del.'</form>';

// Ausgabeweiche
if(!$mod){echo $outp;}
elseif($mod == 'showdel'){echo $outp_del;}


} // end func. Bildausgabe



 ?><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kleine Bilderverwaltung</title>
<meta charset="UTF-8">
<style>

body{
font-family: helvetica, arial, "sans-serif";
width:80%;
padding:2%;
margin:auto;
}

ul{
    list-style: none;
}
li{
display:inline-block;
padding:1%;
}

.pictures div{
display:inline-block;
margin:1%;
min-height: 2%;
min-width: 2%;
}


.pictures img{width:100%;height:auto;max-width:100%;}
.pictures div:hover .imgdel {display:block;}

.imgdel{
display:none;
background-color:#7DCC06;
opacity:0.7;
position:absolute;
margin:2%;
padding:1%;
font-size: 100%;
font-weight: bold;
z-index: 20;
border:0;
}
.imgdel:hover{background-color:#FF0000;color:#E6E6E6;}


</style>


<script>
// warum Javascript und nicht über PHP? Geschmackssache, für mich: schneller und harmonischer
function showgarb(){
document.querySelector('.nodel').style.display='none';
document.querySelector('.delpics').style.display='block';
}
</script>

</head>

<body>
<h1>Kleine Bilderverwaltung</h1>

<ul>
<li><a href="<?php echo $fl; ?>">Aktuelle Bilder</a></li>
<li><a href="#" onclick="showgarb();">Gelöschte Bilder</a></li>
</ul>

 <?php echo $mess; ?>


<section class="pictures nodel">
<h2>Aktuelle Bilder</h2>
<?php bildausgabe(); ?>
</section>


<section class="pictures delpics" style="display:none;">
<h2>Gelöschte Bilder</h2>
<?php bildausgabe('showdel'); ?>
</section>

<h3>Bitte ausgiebig testen, geht nichts kapputt.</h3>

</body>
</html>

[TS]

Hello,

innen drin gefällt es mir nicht mehr so gut (noch nicht).

Vorab der Hinweos, dass auch basename($img) kontextbehandelt werden muss. Es gibt wirklich gemeine Dateinamen, die man per FTP zwar verwenden kann, die aber im HTML- und PHP-Umfeld eklige Nebenwirkungen entwickeln können.

Mehr dazu später vom Desktop.

Liebe Grüße
Tom S.

[Robert B.]

Hallo Henry,

als Ansatz nicht schlecht, aber einiges geht eleganter und vor allem sicherer.

$mess= $rescue = ''; // nicht wirklich notwendig aber verhindert error notice(nicht deklarierte Variable)

Doch, notwendig, damit man sich richtiges Programmieren gleich angewöhnt. Irgendwann fällt einem das nämlich sonst auf die Füße.

Die folgenden Variablen könnten auch Konstanten sein, das erspart dir später die Verwendung mit $_GLOBALS:

$fl = basename($_SERVER['PHP_SELF']);

$verz = 'img/';    // in dem Fall slash am ende, wenn im gleichen Ordner wie bilder dann natürlich nicht

$delkey = 'GARB_';

Also z.B. define('VERZ', 'img/');

if(isset($_POST['del_post']) && file_exists($verz.$_POST['del_post']))
{
$fl2del = $verz.$_POST['del_post'];
$delfl = $verz.$delkey.$_POST['del_post'];

if(rename($fl2del,$delfl) ){$mess = '<h3">Datei: '.$_POST['del_post'].' wurde gelöscht</h3>';}
else{$mess = ('<h3 style="color:red;">ERROR: Fehler im System1</h3>');}
}

Diese Teil ↑ ist gefährlich! Mit den Entwickler-Tools des Browsers (oder oldschool mit curl) kann ich auch einen POST-Request beliebig manipulieren. An der Stelle oben wird nicht geprüft, ob $_POST['del_post'] Slashes enthält, sprich, ob dieser Code nicht Dateien außerhalb des Verzeichnisses umbenennt.

Dieses Problem besteht bei der Wiederherstellung natürlich ebenfalls.

function bildausgabe($mod='')
{
    // lokale Variablen Dank Konstanten nicht nötig …

//erlaubte Endungen (nach Bedarf anpassen)
$ext = array('jpg','png','gif','ico');

Dieses Array ↑ und die daraus resultierenden lokalen Variablen sind IMHO besser außerhalb der Funktion aufgehoben, weil sie dann nur einmal angelegt werden und nicht bei jedem Funktionsaufruf.

// Verzeichnis auslesen als Array
$img_ar = glob($ext_pat, GLOB_BRACE);

$outp = ''; // nicht wirklich notwendig aber verhindert error notice
$outp_del = ''; // nicht wirklich notwendig aber verhindert error notice

foreach( $img_ar as $img)
{

// Gelöscht markierte Bilder finden, seperat auflisten und schleife überspringen damit diese Dateien nicht in der eigentlichen Liste erscheinen
if(strpos($img,$delkey)){
$outp_del .= '<div><button name="del_rescue" value="'.basename($img).'" type="submit" class="imgdel">HERSTELLEN</button><img src="'.$img.'" alt=""></div>'."\r\n";
continue;
}

Hier fehlt oben und unten jeweils die Behandlung des Kontextwechsels nach HTML. Wie ich schon schrieb, sind die „htmlspecialchars“ gültige Zeichen in Dateinamen.

$outp .= '<div><button name="del_post" value="'.basename($img).'" type="submit" class="imgdel">LÖSCHEN</button><img src="'.$img.'" alt=""></div>'."\r\n";

} // end foreach

Solche Kommentare ↑ kannst du dir sparen, indem du deinen Code nach Verschachtelungstiefe einrückst. Das erleichtert das Lesen ungemein.

Viele Grüße
Robert

[Gunnar Bittersmann]

@@Sophie

jaaaaaaa, genau so etwas suche ist dazu schaut deine Version noch richtig toll aus.

Sieht toll aus, funktioniert nur leider nicht.

LLAP 🖖

[TS]

Hello,

fein gemacht. Gefällt mir.
Funktioniert auch auf dem Tablet.
Wie sieht es innen aus?

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@Henry

Ich habe da eben mal was gebastelt.

„Bitte ausgiebig testen, geht nichts kapputt.“ Stimmt. Weil: geht nicht. Nicht mit Tastatur.

Ist das so in etwa was du suchst?

Hoffentlich nicht.

LLAP 🖖

[Sophie]

Hallo @Gunnar Bittersmann

entschuldige bitte, aber warum musst du immer alles schlecht reden was nicht von dir kommt? Das ist mir schon öfters aufgefallen. Andere Leute versuchen zu helfen und du machst alles immer wieder nieder.

Und doch, genau so etwas suche ich. Ob man dieses mit der Tastatur steuern kann, interessiert mich persönlich nicht.

Wer es anders haben möchte kann sich ja etwas selber basteln. Ich bin jedenfalls Dankbar für die Hilfe die ich bekomme.

[Gunnar Bittersmann]

@@Sophie

entschuldige bitte, aber warum musst du immer alles schlecht reden

Ich rede nicht alles schlecht. Ich rede bei allem Schlechten.

was nicht von dir kommt?

Das ist Unsinn. Ich verweise oft genug auf gute Lösungen anderer. Bspw. auf die von Heydon Pickering: Inclusive Components und Practical ARIA examples

LLAP 🖖

[Sophie]

Hallo @Gunnar Bittersmann

wie ich eine Seite bediene und wir reden jetzt nur vom Admin-Bereich muss man doch mir selber überlassen? Natürlich kann mir jemand die beiden Hände abhacken aber dann wird es auch schwer mit der Maus etwas zu erledigen. Daher sehe ich die Aussage "Hoffentlich nicht" doch etwas übertrieben?

[Henry]

Hallo Gunnar,

„Bitte ausgiebig testen, geht nichts kapputt.“ Stimmt. Weil: geht nicht. Nicht mit Tastatur.

du weißt schon, dass sie das nur für den Eigengebrauch nutzen will?

Gruss
Henry

[Sophie]

Hallo @Henry

richtig, es geht nur um einen kleinen Admin-Bereich. Da kommt kein User rein (hoffe ich zumindest). Wie ich meine Seite bediene sollte man mir selber überlassen. Noch kann ich eine Maus bedienen.

[Gunnar Bittersmann]

@@Henry

„Bitte ausgiebig testen, geht nichts kapputt.“ Stimmt. Weil: geht nicht. Nicht mit Tastatur.

du weißt schon, dass sie das nur für den Eigengebrauch nutzen will?

Schon wenn man anfängt, dort zu unterscheiden, macht man etwas falsch.

Durch Krankheit oder Unfall kann Sophie morgen auf Tastaturbedienung angewiesen sein.

Außerdem:

LLAP 🖖

[Tabellenkalk]

Hallo,

Außerdem:

“Everybody is a keyboard user when eating lunch with their mouse hand.” —Adrian Roselli

Das ist doch völlig daneben, in der Mittagspause auch noch zu arbeiten. Das prangere ich arbeitsschutz-ergonomisch aber mal sowas von an!

Gruß
Kalk

[TS]

Hello,

„Bitte ausgiebig testen, geht nichts kapputt.“ Stimmt. Weil: geht nicht. Nicht mit Tastatur.

du weißt schon, dass sie das nur für den Eigengebrauch nutzen will?

Außerdem ist es doch wohl erst ein Entwurf und jeder hier ist eingeladen, diesen konstruktiv verbessern zu helfen, auch Gunnar!

Liebe Grüße
Tom S.

[Henry]

Hallo Tom,

Außerdem ist es doch wohl erst ein Entwurf und jeder hier ist eingeladen, diesen konstruktiv verbessern zu helfen, auch Gunnar!

so ist es.

Gruss
Henry

[Gunnar Bittersmann]

@@TS

Außerdem ist es doch wohl erst ein Entwurf

Das Argument ist unsinnig.

“Accessibility is like a blueberry muffin—you can’t push the berries in there afterward.” —Cordelia McGee-Tubb

Barrierefreiheit sollte man von Anfang an bedenken. Barrierefreiheit ist nichts, was man mal so eben nachträglich hinzufügt. Ansonsten wird’s teuer.

und jeder hier ist eingeladen, diesen konstruktiv verbessern zu helfen, auch Gunnar!

Die Einladung nehme ich gerne an – wenn ich Zeit dazu finde. Bis gerade in Rudolstadt auf dem Festival.

LLAP 🖖

[dedlfix]

Tach!

Außerdem ist es doch wohl erst ein Entwurf

Das Argument ist unsinnig.

“Accessibility is like a blueberry muffin—you can’t push the berries in there afterward.” —Cordelia McGee-Tubb

Der Vergleich aber auch. Code kann jederzeit geändert werden, da gibt es keinen Back-Prozess, der die Bestandteile so verändert, dass da nichts mehr geht.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

“Accessibility is like a blueberry muffin—you can’t push the berries in there afterward.” —Cordelia McGee-Tubb

Der Vergleich aber auch.

Dir ist beim Zitieren ein Fehler unterlaufen. Du hast einen wichtigen Teil unterschlagen.

Code kann jederzeit geändert werden, da gibt es keinen Back-Prozess, der die Bestandteile so verändert, dass da nichts mehr geht.

„Barrierefreiheit sollte man von Anfang an bedenken. Barrierefreiheit ist nichts, was man mal so eben nachträglich hinzufügt. Ansonsten wird’s teuer.“

LLAP 🖖

[dedlfix]

Tach!

“Accessibility is like a blueberry muffin—you can’t push the berries in there afterward.” —Cordelia McGee-Tubb

Der Vergleich aber auch.

Dir ist beim Zitieren ein Fehler unterlaufen. Du hast einen wichtigen Teil unterschlagen.

Nein, denn der macht die Unsinnigkeit des Vergleiches nicht wett.

Code kann jederzeit geändert werden, da gibt es keinen Back-Prozess, der die Bestandteile so verändert, dass da nichts mehr geht.

„Barrierefreiheit sollte man von Anfang an bedenken. Barrierefreiheit ist nichts, was man mal so eben nachträglich hinzufügt. Ansonsten wird’s teuer.“

Kann sein, dass es teuer wird. Kann aber auch sein, dass partielle Änderungen reichen. Es ist keine Gesetzmäßigkeit, dass es teuer wird. Den Muffin musst du in jedem Fall wegwerfen und einen neuen erstellen, wenn die Blaubeeren fehlen. Den Code kann man hingegen wiederverwenden und ändern. Ob es wirtschaftlich sinnvoll ist, ist eine Einzelfallbetrachtung.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

„Barrierefreiheit sollte man von Anfang an bedenken. Barrierefreiheit ist nichts, was man mal so eben nachträglich hinzufügt. Ansonsten wird’s teuer.“

Kann sein, dass es teuer wird. Kann aber auch sein, dass partielle Änderungen reichen. Es ist keine Gesetzmäßigkeit, dass es teuer wird.

Diejenigen, die sich damit auskennen, sagen etwas anderes. Ich sehe keinen Grund, denen zu misstrauen.

LLAP 🖖

[Tabellenkalk]

Hallo,

Der Vergleich aber auch. Code kann jederzeit geändert werden, da gibt es keinen Back-Prozess, der die Bestandteile so verändert, dass da nichts mehr geht.

Soll das heißen, ich hab den Backofen jetzt ganz umsonst vorgeheizt? 😉

Gruß
Kalk

[TS]

Hello,

Der Vergleich aber auch. Code kann jederzeit geändert werden, da gibt es keinen Back-Prozess, der die Bestandteile so verändert, dass da nichts mehr geht.

Soll das heißen, ich hab den Backofen jetzt ganz umsonst vorgeheizt? 😉

das sollte wohl bedeuten dass der Prozess "back open" ist. Typos gehören zur Entwicklung immer dazu ;-P

Liebe Grüße
Tom S.

[TS]

Hello @Gunnar Bittersmann ,

Außerdem ist es doch wohl erst ein Entwurf

Das Argument ist unsinnig.

Ist es kein Entwurf?
MMn ging es hier um eine erste Skizze des Zusammenspiels zwischen HTML, CSS und PHP.
Dass dieser Entwurf verbesserungswürdig ist, wird nicht bestritten, auch nicht von @Henry selbst.

“Accessibility is like a blueberry muffin—you can’t push the berries in there afterward.” —Cordelia McGee-Tubb

Barrierefreiheit sollte man von Anfang an bedenken. Barrierefreiheit ist nichts, was man mal so eben nachträglich hinzufügt. Ansonsten wird’s teuer.

und jeder hier ist eingeladen, diesen konstruktiv verbessern zu helfen, auch Gunnar!

Die Einladung nehme ich gerne an – wenn ich Zeit dazu finde.

Das finde ich sehr löblich. Außerdem erachte ich dieses Beispiel als so fundamental und gleichzeitig noch überschaubar, dass man es benutzen könnte, es mal ausführlich durchzudiskutieren und die unterschiedlichen Entwicklungsstufen darzustellen. Das wäre mMn ein gutes Objekt für eine gemeinsame Darstellung im Wiki (mit den Zwischenstufen). Und am Ende kommt ein Modul dabei heraus, was fast jeder fortgeschrittenere Hompagebauer gebrauchen kann.

Bis gerade in Rudolstadt auf dem Festival.

Da beneide ich Dich jetzt! :-)

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Außerdem ist es doch wohl erst ein Entwurf

Das Argument ist unsinnig.

Ist es kein Entwurf?

Mag sein. Dein Argument war aber: Es ist doch nur ein Entwurf, also muss es noch nicht barrierefrei sein.

Dass diese Denke äußerst fragwürdig ist, hatte ich gesagt.

LLAP 🖖

[TS]

Hello @Gunnar Bittersmann ,

Außerdem ist es doch wohl erst ein Entwurf

Das Argument ist unsinnig.

Ist es kein Entwurf?

Mag sein. Dein Argument war aber: Es ist doch nur ein Entwurf, also muss es noch nicht barrierefrei sein.

WO steht das so? Habe ich nie behauptet. Schließlich sind die Barrieren (und die Handycaps) meistens zuerst da und dann erst die Ideen, wie man sie beseitigen kann. Wo keine Barriere erkennbar ist, kann man auch keine beseitigen. Also gehört in jeden guten Entwurf auch eine Analyse, wo Barrieren entstehen würden, wenn man auch nur eine Kleinigkeit ändert und wo sie durch eine kleine Änderung (hoffentlich) beseitigt werden können - was selbstverständlich noch zu überprüfen wäre.

Dass diese Denke äußerst fragwürdig ist, hatte ich gesagt.

Ich habe nie behauptet, das es nichts ausmacht, Barrieren aufzubauen (wo sie vermeindbar sind).

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Mag sein. Dein Argument war aber: Es ist doch nur ein Entwurf, also muss es noch nicht barrierefrei sein.

WO steht das so? Habe ich nie behauptet.

Das liest sich aber so:

Ich:

Weil: geht nicht. Nicht mit Tastatur.

Henry:

du weißt schon, dass sie das nur für den Eigengebrauch nutzen will?

Du:

Außerdem ist es doch wohl erst ein Entwurf

LLAP 🖖

[TS]

Hello,

Jeder liest, was er lesen will :-(

Den zweiten Teil des Satzes "da muss man sich noch um Barrierefreiheit kümmern" oder "mavht doch nichts, ich hab doch alle Sinne" hast Du Dir jetzt frei ausgedacht und Du warst dabei vielleicht nicht ergebnisoffen?

Liebe Grüße
Tom S.

[Henry]

Hallo Tom,

MMn ging es hier um eine erste Skizze des Zusammenspiels zwischen HTML, CSS und PHP.
Dass dieser Entwurf verbesserungswürdig ist, wird nicht bestritten, auch nicht von @Henry selbst.

Genau so ist es. Und dass Gunnar nach kurzem Test, direkt zwei mal (09:05 und 09:06) nichts Besseres zu tun hat wie "ich weiß was, ich weiß was... Geht nicht mit Tastatur" zu posten, finde ich kindisch und ... na ja kann man sich denken. Ein "normaler" Mensch hätte (mit Sicherheit nur einmal) höflich erwähnt, dass die Tastaturnutzung nicht beachtet wurde und man das ändern sollte, aber wäre bestimmt nicht schreiend in den Wald gerannt.

Das finde ich sehr löblich. Außerdem erachte ich dieses Beispiel als so fundamental und gleichzeitig noch überschaubar, dass man es benutzen könnte, es mal ausführlich durchzudiskutieren und die unterschiedlichen Entwicklungsstufen darzustellen. Das wäre mMn ein gutes Objekt für eine gemeinsame Darstellung im Wiki (mit den Zwischenstufen). Und am Ende kommt ein Modul dabei heraus, was fast jeder fortgeschrittene Hompagebauer gebrauchen kann.

Ich fände es gut, wenn es tatsächlich solche Gemeinschaftsprojekte hier gäbe ( Es gibt's hier ja schon einige, wenn auch wenige, gute Tutorials mit Beispielscripten aber diese sind natürlich nicht diskutiert oder öffentlich gemeinschaftlich entstanden). Dieses Beispiel hier eignet sich aber nicht dazu, weil am Ende etwas völlig anderes rauskommen würde. Selbst ich würde es jetzt komplett neu strukturieren. Es ist das was es sein sollte, eine kleine Spielerei die einerseits Sophies funktionalem Wunschergebnis entspricht und andererseits Gedankenanregungen bieten soll, wie man Teile/Strukturen daraus für andere Projekte oder Ideen nutzen kann. Daher habe ich auch extra auf überflüssigen Ballast verzichtet, z.B. habe ich eine umfangreiche Funktion, die sämtliche REQUESTS in nahezu jeder Hinsicht flexibel vor Angriffen schützt. Nur, das einzusetzen wäre dann auch wieder zu umfangreich zu analysieren gewesen und hätte eher abgeschreckt und das Erkennen des Grundprinzips erschwert.

Aber um zurück auf ein Wiki-Tutorial zu kommen. Da müsste das Ganze schon von vornerein anders angelegt werden, so dass am Ende schon fast automatisch ein Gallery-CMS (oder sowas inkl. Uploads/Thumbnails/TAGS/etc.) dabei herauskommt (was ich dann gut finden würde). Und da es davon schon etliche im Netz gibt (obwohl mir keines richtig zusagt), wäre das Ganze eine Motivationsfrage der Mitarbeitenden. Hinzu kommt ja noch der gemeinsame Konsens (viele Köche usw...). Dabei wäre gerade so ein Projekt ideal zum Lernen, eben (wie du schon selbst sagst) aus der Zusammenarbeit von HTML/PHP/JS und simpler Routinen. Dann könnte man gerade den Neulingen auch mal zeigen, dass vieles sehr viel simpler geht als gedacht und man nicht für jeden Mist direkt externe Scripts, die man selber nicht versteht (jquery, Bootstrap, etc.) nutzen muss.

Doch wie gesagt, glaube nicht, dass sowas hier realisierbar wäre. Alleine schon, wenn ich jetzt sehe, dass sich (danke dafür) hier einige wirklich gut und konstruktiv beteiligt haben und(außer von dir) nicht mal mit einem Punkt gewürdigt werden. Und dass du @Gunnar, obwohl du doch angeblich genau da auch die Zukunft von Selfhtml siehst (ausnahmsweise sind wir da mal einer Meinung), auch kein wirkliches Interesse hast mitzuhelfen (deine Worte), sondern eher demotivierend rüberkommst, verstehe ich auch nicht.

Gruss
Henry

[TS]

Hello,

[...] wir könnten schon, wenn wir es nur wollen!

Und @Gunnar Bittersmann macht sich schon lang für das Forum. Ernsthaft!

Nur manchmal sollte er sich dann eben lieber nur beim Konzert amüsieren und erholen und hier einfach mal nichts tun. Zwei Tage Pause sind manchmal ziemlich hilfreich für das eigene Wohlbefinden und für die grenzenlose Empathie, die man manchen Fragestellern hier entegegen bringen muss :-O

Das Forum und das Wiki zu einem "selbstlernenden System" zu machen, wäre sicherlich mein Traum, aber leider kann man das @Christian Kruse auch nicht zumuten, jede Idee gleich nachhaltig umzusetzen. Allerdings ist er bei den kleinen praktischen Verbesserungen wirklich manchmal extrem schnell ;-)

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@Henry

Und dass Gunnar nach kurzem Test, direkt zwei mal (09:05 und 09:06) nichts Besseres zu tun hat wie "ich weiß was, ich weiß was... Geht nicht mit Tastatur" zu posten, finde ich kindisch

Zu nicht funktionierendem Zeug zu sagen, dass es nicht funktioniert, finde ich normal. Lieber einmal zu viel als einmal zu wenig. Du findest das kindisch‽ YMMV.

Gründe, warum ich hier nicht sofort eine funktionierende Lösung präsentieren konnte, hatte ich genannt. Warum es wichtig ist, etwas, das nicht funktioniert, trotzdem sofort als solches zu benennen, auch.

Alleine schon, wenn ich jetzt sehe, dass sich (danke dafür) hier einige wirklich gut und konstruktiv beteiligt haben und(außer von dir) nicht mal mit einem Punkt gewürdigt werden. Und dass du @Gunnar, obwohl du doch angeblich genau da auch die Zukunft von Selfhtml siehst (ausnahmsweise sind wir da mal einer Meinung), auch kein wirkliches Interesse hast mitzuhelfen

Dir ist wohl entgangen, dass ich hier eine funktionierende Lösung präsentiert habe. Die übrigens nicht mal mit einem Punkt gewürdigt wurde.

LLAP 🖖

[Henry]

Hallo Gunnar,

Dir ist wohl entgangen, dass ich hier eine funktionierende Lösung präsentiert habe. Die übrigens nicht mal mit einem Punkt gewürdigt wurde.

hmmm... auch nach nochmaliger Durchsicht, finde ich dies nicht mal ansatzweise. Es gibt einige, die informative Hilfen geleistet haben und dann noch Robert und Martl mit ausgezeichneter praktischer und informativer Hilfe, doch dich finde ich keine dieser Rubriken. Wo denn?

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Dir ist wohl entgangen, dass ich hier eine funktionierende Lösung präsentiert habe. hmmm... auch nach nochmaliger Durchsicht, finde ich dies nicht mal ansatzweise.

Dann muss ich dich wohl mit der Nase drauf stoßen: 2017-07-07 12:14

Es gibt einige, die informative Hilfen geleistet haben und dann noch Robert und Martl mit ausgezeichneter praktischer und informativer Hilfe

Bei Martls Lösung hatte ich schon Bedenken angemeldet. Ich bin noch nicht dazu gekommen, sie mir genau anzusehen; möglicherweise kommen weitere hinzu.

Meine Lösung ist einfach und robust: Die Buttons können mit JavaScript-Funktionen belegt werden oder auch in einem HTML-Formular verwendet werden.

LLAP 🖖

[Henry]

Hallo Gunnar,

Dann muss ich dich wohl mit der Nase drauf stoßen: 2017-07-07 12:14

echt jetzt, das meinst Du wirklich? Dann wird mir langsam auch dein sonderbares, selbst für dich untypisches, Verhalten hier im Thread klar.

Meine Lösung ist einfach und robust: Die Buttons können mit JavaScript-Funktionen belegt werden oder auch in einem HTML-Formular verwendet werden.

Und bestimmt nicht was der Fragesteller sich vorgestellt hatte. Da wäre es noch sinnvoller einfach das Bild selbst als Löschwerkzeug zu nutzen. Und ich vermute, meine persönliche Meinung, wenn Jemand anderes genau deine "angebliche" Lösung gepostet hätte, hättest du diese, in deiner ganz speziellen eigenen Art, kritisiert.

Das zeigt zwei Dinge:

1. Dir fehlt es (wie auch andere dir schon gesagt haben) tatsächlich an der notwendigen Empathie sich in den Fragesteller hineinzuversetzen (wenn du schon seine Posts nicht liest). Wäre schön wenn du das (gepaart mit ein wenig Selbstkritik) zumindest zukünftig versuchen würdest, denn andere, gute und auch andere negative, Eigenschaften von dir machen dich zu einem interessanten Unikat, das hoffentlich nicht irgendwann ein alter verbitterter Griesgram wird.

2. Mal Hand aufs Herz. Dass deine "Lösung" nicht akzeptiert wurde, machte dich sauer und somit war mein Entwurf ein gefundenes Fressen für dich. Denn nur so wäre dein sonderbares Verhalten erklärbar.

Gruss
Henry

[Gunnar Bittersmann]

@@Henry

Dann muss ich dich wohl mit der Nase drauf stoßen: 2017-07-07 12:14

echt jetzt, das meinst Du wirklich?

Natürlich. Wenn du an der Lösung etwas auszusetzen hast, darfst du das gerne tun.

Dann wird mir langsam auch dein sonderbares, selbst für dich untypisches, Verhalten hier im Thread klar.

Da gibt’s nichts Sonderbares oder Untypisches. Ich habe schon in der Vergangenheit „Lösungen“, die Nutzer ausschließen, als fürs Web untauglich dargestellt. Und ich werde das in Zukunft weiterhin tun.

Meine Lösung ist einfach und robust: Die Buttons können mit JavaScript-Funktionen belegt werden oder auch in einem HTML-Formular verwendet werden.

Und bestimmt nicht was der Fragesteller sich vorgestellt hatte

Nicht? Gefragt waren Buttons, die beim Hovern übers Bild erscheinen. Das ist bei meiner Lösung der Fall.

Nur dass meine Lösung auch Nutzer berücksichtigt, die keine Maus schubsten, sondern per Tastatur navigieren.

Da wäre es noch sinnvoller einfach das Bild selbst als Löschwerkzeug zu nutzen.

Wie stellst du dir das vor? Nichts im UI, was auf die Löschen hindeutet, aber beim Click aufs Bild wird es gelöscht?

Damit man auf Bilder clicken kann, wären auch dann Buttons vorzusehen: <button …><img …/> …</button>

wenn Jemand anderes genau deine "angebliche" Lösung gepostet hätte,

Wie ich schon sagte: Wenn du an der Lösung etwas auszusetzen hast, darfst du das gerne tun. Ansonsten schickt es sich nicht, dass du meine Lösung ohne Angabe von Gründen als „angebliche“ abwertest.

Das zeigt zwei Dinge:

1. Dir fehlt es (wie auch andere dir schon gesagt haben) tatsächlich an der notwendigen Empathie sich in den Fragesteller hineinzuversetzen

Aus dem Threadverlauf geht wohl eindeutig hervor, dass ich zunächst einmal das von dir und das von Matthias Gepostete als fürs Web untauglich dargestellt hatte, weil das Nutzer ausschließt.

Und auch wenn ich entgegen einiger anderer hier nicht der Meinung bin, man sollte anderes nicht kritisieren, wenn man selbst keine Lösung beizusteuern hat, hab ich meine Lösung noch nachgeschoben.

(wenn du schon seine Posts nicht liest).

Na, mit dem Lesen hast du es auch nicht gerade. Bei Sophie sollte es doch „ihre“ heißen‽

Wäre schön wenn du das (gepaart mit ein wenig Selbstkritik) zumindest zukünftig versuchen würdest,

Ich glaube, du unterliegst hier dem Irrtum, man würde hier ausschließlich dem ursprünglichen Fragesteller antworten und hätte sich nur auf sie zu beziehen.

Dem ist nicht so. Hier lesen auch andere mit. Und das auch noch später; Threads werden archiviert. Andere finden und kopieren Code. Deshalb sollte hier jede Lösung auch für alle Nutzer zugänglich sein und nicht wegen mangelhafter technischer Umsetzung Nutzer aussperren.

2. Mal Hand aufs Herz. Dass deine "Lösung" nicht akzeptiert wurde, machte dich sauer

Dass die Bewertungen hier desöfteren Zufall oder Witz sind, ist so alt wie die Bewertungsfunktion selbst.

und somit war mein Entwurf ein gefundenes Fressen für dich.

Du erzählst Unsinn weitab der Realität. Ich hatte dein Zeugs kritisiert lange bevor ich meine Lösung vorgestellt habe.

LLAP 🖖

[Henry]

Hallo Gunnar,

Und bestimmt nicht was der Fragesteller sich vorgestellt hatte

Nicht? Gefragt waren Buttons, die beim Hovern übers Bild erscheinen. Das ist bei meiner Lösung der Fall.

ist das so? Da muss ich den Screenshot wohl doch nochmal posten:

Beim Hovern übers Bild...?

Nur dass meine Lösung auch Nutzer berücksichtigt, die keine Maus schubsten, sondern per Tastatur navigieren.

Wie gesagt, Bild als Button, wäre da meiner Meinung nach sinnvoller gewesen, wenn man nicht sowieso erkennt, dass der Fragesteller andere Ambitionen hat.

wenn Jemand anderes genau deine "angebliche" Lösung gepostet hätte,

Wie ich schon sagte: Wenn du an der Lösung etwas auszusetzen hast, darfst du das gerne tun. Ansonsten schickt es sich nicht, dass du meine Lösung ohne Angabe von Gründen als „angebliche“ abwertest.

Dachte, das wäre selbsterklärend, aber habe ich ja nun getan.

Na, mit dem Lesen hast du es auch nicht gerade. Bei Sophie sollte es doch „ihre“ heißen‽

Nicht in dem Fall, schließlich bezog sich "seine" auf Fragesteller (allgemein), nicht "Sophie", oder?

...Dir fehlt es (wie auch andere dir schon gesagt haben) tatsächlich an der notwendigen Empathie sich in den Fragesteller hineinzuversetzen (wenn du schon seine Posts nicht liest)....

.

Dass die Bewertungen hier desöfteren Zufall oder Witz sind, ist so alt wie die Bewertungsfunktion selbst.

Gebe ich dir uneingeschränkt recht.

und somit war mein Entwurf ein gefundenes Fressen für dich.

Du erzählst Unsinn weitab der Realität. Ich hatte dein Zeugs kritisiert lange bevor ich meine Lösung vorgestellt habe.

Auch hier gebe ich dir recht, mein Fehler, sorry. Habs gar nicht kontrolliert, weil mir das als einzig logisch erschien. Umso weniger verstehe ich dein Verhalten, was war denn da nur (in den Wald schreien)mit dir los?

Gruss
Henry

[Henry]

Nachtrag:

Beim Hovern übers Bild...?

Da es vielleicht nicht klar verständlich ist, X/Button/sonswas über dem Bild, so wie es Rolf in seinem Beispiel bereits gezeigt hatte.

[Rolf b]

Es war übrigens nicht gefragt, dass der Button beim Hovern sicherbar wird. Beim Hovern sollte ein optischer Hinweis auf die Löschfunktion sichtbar werden. Ob der optische Hinweis mit dem Button identisch sein muss, war nicht spezifiziert 😉

Deswegen finde ich den Image-Button mit einem Hover/Focus Effekt durchaus sinnvoll.

Rolf

[Gunnar Bittersmann]

@@Henry

ist das so? Da muss ich den Screenshot wohl doch nochmal posten:

Ich weiß immer noch nicht, was du mir damit sagen willst.

Beim Hovern übers Bild...?

Genau gemommen übers li-Element. Mit CSS kann man aber dafür sorgen, dass die Box des li-Elements genauso groß wie das Bild ist.

Stört es dich, dass die Buttons nicht auf dem jeweiligen Bild liegen? Mit CSS kann man dafür sorgen, dass sie das tun. Ich hatte doch geschrieben, dass es gar nicht meine Absicht war, die Buttons zu stylen/positionieren. Das hattest du doch schon gemacht.

Meine Absicht war, deinen (und Matthias’) Fehler zu korrigieren und das Ganze tastaturbedienbar zu machen. Genau das sollte mein CodePen demonstrieren.

Oder meinstest du mit dem Screenshot, dass bei Touchscreens bei Tap ein Hover simuliert wird? Das ist auch gut so, sonst würden die Buttons ja dort nicht angezeigt werden.

Wie gesagt, Bild als Button, wäre da meiner Meinung nach sinnvoller gewesen

Tja, die Konversation hätte ja auch so verlaufen können:

„Ich habe da eben mal was gebastelt.“
„Geht nicht. Nicht mit Tastatur.“
„Oh. Aber wie geht’s mit Tastatur?“
„Die Buttons nur visuell verstecken (also nicht per display: none). Die Buttons werden angezeigt, wenn sie den Fokus haben oder wenn über das Vorfahrenelement gehovert wird.“
„Ah, verstehe. Aber hömmal, wäre es nicht sinnvoll, das Bild mit in den Button zu packen? Dann muss man mit der Maus nicht auf das X (Kreuz ×, ✖︎, ❌) zielen.“

Da hätte ich kaum widersprechen können.

LLAP 🖖

[TS]

Hello Gunnar,

hier warten immer noch etliche Leute auf deinen konkreten Verbesserungsvorschlag bzw. deine hilfreichen Links, wie man es besser macht. ;-P

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

hier warten immer noch etliche Leute auf deinen konkreten Verbesserungsvorschlag bzw. deine hilfreichen Links, wie man es besser macht. ;-P

Warum ich gerade keinen 24/7-Support leisten kann – auch wenn das von mir verlangt wird –, hatte ich gerade gesagt.

LLAP 🖖

[TS]

Hello @Gunnar Bittersmann ,

hier warten immer noch etliche Leute auf deinen konkreten Verbesserungsvorschlag bzw. deine hilfreichen Links, wie man es besser macht. ;-P

Warum ich gerade keinen 24/7-Support leisten kann – auch wenn das von mir verlangt wird –, hatte ich gerade gesagt.

Darum beneide ich Dich auch. So würde ich auch gerne verhindert sein. :-)

Aber wäre es dann nicht besser, sich erst einmal mit destruktiven Äußerungen zurückzuhalten, wenn Du absehen kannst, dass Du nicht innerhalb 24 Stunden die konstruktiven (für die Dich alle schätzen und lieben) nachzuliefern?

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Aber wäre es dann nicht besser, sich erst einmal mit destruktiven Äußerungen zurückzuhalten, wenn Du absehen kannst, dass Du nicht innerhalb 24 Stunden die konstruktiven (für die Dich alle schätzen und lieben) nachzuliefern?

Nein. Der Hinweis, dass schon gepostete „Lösungen“ problematisch sind, muss ASAP erfolgen; ansonsten setzen sie sich noch fest.

Und ich sehe darin auch nichts Destruktives.

LLAP 🖖

[TS]

Hello @Gunnar Bittersmann ,

Nein. Der Hinweis, dass schon gepostete „Lösungen“ problematisch sind, muss ASAP erfolgen; ansonsten setzen sie sich noch fest.

Und ich sehe darin auch nichts Destruktives.

Du sollst dich jetzt amüsieren und erholen, damit Du dann nächste Woche wieder voll gegen die Barrieren anrennen kannst ;-)

Eigentlich hätte ich Dich auch eher in Hamburg vermutet, aber DA geht es wohl im Moment wirklich destruktiv zu. Kaum einer will das, aber alle wählen doch immer wieder dieselbe Scheiße!

Liebe Grüße
Tom S.

[Martl]

Hallo Henry,

ändere in HTML

<div><button name="del_post" value="*.jpg" type="submit" class="imgdel">LÖSCHEN</button><img src="img/*.jpg" alt=""></div>

in

<input type="image" src="*.jpg" alt=""><button name="del_post" value="*.jpg" type="submit" class="imgdel">LÖSCHEN</button>

und in CSS

.pictures div:hover .imgdel {display:block;}

in

input[type=image]:hover + .imgdel, input[type=image]:focus + .imgdel {display:block;}

Dann gehts auch mit der Tastatur.

Grüße, Martl

[TS]

Hello @Martl,

ändere in HTML

<div><button name="del_post" value="*.jpg" type="submit" class="imgdel">LÖSCHEN</button><img src="img/*.jpg" alt=""></div>

in

<input type="image" src="*.jpg" alt=""><button name="del_post" value="*.jpg" type="submit" class="imgdel">LÖSCHEN</button>

und in CSS

.pictures div:hover .imgdel {display:block;}

in

input[type=image]:hover + .imgdel, input[type=image]:focus + .imgdel {display:block;}

Dann gehts auch mit der Tastatur.

Dann steht Dir jetzt nicht der Gummipunkt sondern der Gunnarpunkt zusätzlich zu. Leider konnte ich nur ein PLUS geben :-)

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@Martl

Dann gehts auch mit der Tastatur.

Das Bild als Button und den Löschen-Button als Submit-Button ist aber auch eher ein Hack als eine saubere Lösung, oder?

LLAP 🖖

[Martl]

Hallo Gunnar,

als Submit-Button

im Kontext des vorhandenen Entwurfes, ansonsten auch gerne type="button" oder was auch immer passt.

...eher ein Hack...

Ist tastaturbedienbar und HTML-konform; Deine (guten) Gründe für die Behauptung?

Grüße, Martl

[Gunnar Bittersmann]

@@Martl

als Submit-Button

im Kontext des vorhandenen Entwurfes, ansonsten auch gerne type="button" oder was auch immer passt.

AFAIS funktioniert das nur, weil bei [Enter] das Formular abgeschickt wird; an den Button selbst kommt man mit der Tastatur ja gar nicht ran.

...eher ein Hack...

Ist tastaturbedienbar und HTML-konform; Deine (guten) Gründe für die Behauptung?

Verwendung von HTML-Elementen entgegen ihrer eigentlichen Bestimmung. Nicht HTML-konform, IMHO.

LLAP 🖖

[Martl]

Hallo Gunnar,

da irrt das Genie: "The input element represents either an image ... The element is a button, specifically a Submit Button".

Es funktioniert also auch ohne zusätzlichen wie-auch-immer-Button.

entgegen ihrer eigentlichen Bestimmung

Und woraus ergibt sich, daß Funktion und Repräsentanz eine Objektes nicht in einem Element zusammengefasst werden dürfen?

Grüße, Martl

[Gunnar Bittersmann]

@@Henry

Ich habe da eben mal was gebastelt.

BTW: Was bei der Bastelei außerdem nicht stimmt: die missbräuchliche Verwendung des h3-Elements. Das ist keine Überschrift. Für Hervorhebungen gibt es em bzw. strong.

LLAP 🖖

[Gunnar Bittersmann]

@@Henry

Ich habe da eben mal was gebastelt.

Noch ein BTW zur Bastelei: Aktuelle Bilder | Gelöschte Bilder

Das sind der Funktion nach Tabs – auch wenn sie nicht als Reiter gestylt sind.

Wie man ein Simple ARIA tab interface barrierefrei umsetzt, hat Heydon Pickering gezeigt.

LLAP 🖖

[Gunnar Bittersmann]

@@Sophie

Wie würdet ihr das mit dem X machen?

Da bei dem X (was wohl eher ein Kreuz ×, ✖︎, ❌ sein sollte) eine Aktion ausgelöst werden soll, wäre das ein Button. Die Beschriftung (das was assitive Technologien wie Screenreader als Buttontitel ansehen) sollte sowas wie „Bild löschen“ sein. Das kann visuell versteckt werden und durch visuell durch ein Icon repräsentiert werden (wenn der Zielgruppe die Bedeutung des Icons klar ist).

Diese Buttons müssen mit Tastatur erreichbar sein; bei display: none ist das nicht gegeben. Man kann die Buttons auch nicht per :focus eines Vorfahrenelements (welches per tabindex="0" fokussierbar gemacht werden müsste) wieder einblenden, da man zum Auslösen des Buttons diesen fokussieren müsste, wodurch die Fokussierung des Vorfahrenelements verloren ginge und der Button wieder verschwindet, bevor er den Fokus erhält.

Also die Buttons nur visuell verstecken. Ich habe da die Buttons werder gestylt noch platziert; das Funktionsprinzip sollte aber deutlich werden: Die Buttons werden angezeigt, wenn sie den Fokus haben oder wenn über das Vorfahrenelement gehovert wird.

LLAP 🖖

[pl]

Jedes Bild ist 366x263px breit/hoch. Wie würdet ihr das mit dem X machen?

Überlege Dir, was an einem solchen Backend zum Content-Management alles dran sein sollte. Da sind doch bestimmt nicht nur Bilder sondern auch weitere Informationen zu jedem Bild wie ein Titel, eine Beschreibung, mindestens eine Referenz zu welcher Seite das jeweilige Bild gehört und darüber hinaus sollte es auch eine Eingabemöglichkeit geben für das alt-Attribut. Idealerweise ist da noch ein Slider zum Änderen der Abmessungen eines Bildes und eine Möglichkeit zum Hochladen neuer Bilder sollte es schließlich auch geben.

Das hört sich sehr nach "Formular" an, nicht wahr? Also ist die Frage nach einem X auf dem Bild schonmal gar keine Frage mehr. Also ich habe da zum Löschen eine Checkbox, wenn checked wird, wird das ganze Formular mitsamt aller Bild-Metadaten erst einmal ausgegraut und der eigentliche Löschvorgang läuft erst ab wenn die ganze Seite aktualisiert wird. Jedes Bild hat also ein Formular und ein Uploadformular gibt es auch.

MfG

[Malcolm Beck`s]

Mit AJAX könntest du es auch lösen. Also ich erledige so Kleinigkeiten gern mit AJAX, da es einem viel Arbeit und Zeit erspart. Und Spaß macht es obendrein auch, weil AJAX nicht so sperrig ist, wie „echte“ POSTs 😉

[Sophie]

Hallo Ajax hat aber das Problem dass ich keine URL übergeben kann um dem User sagen zu können, auf Seite 3 befindet sich dein Bild und er direkt auf der Seite landet?

Außerdem hätte ich auf Anhieb keine Idee wie ich das ganze ohne Datenbank mit Ajax lösen kann. Hast du vielleicht ein kleines Bespiel?

[Rolf b]

Man kann einem Ajax-Request Parameter mitgeben. Sieht technisch etwas anders aus, aber deshalb ist es nicht unmöglich.

Problem ist nur, dass eins er Bilder auf der Seite 3 dann serverseitig nicht mehr existiert. Du müsstest Dir überlegen, wie Du damit umgehst.

• Gelöschtes Bild weiter anzeigen, aber "ausgegraut" oder "durchgestrichen"
• Gelöschtes Bild aus der angezeigten Liste entfernen
  • dabei in Kauf nehmen, dass nicht mehr (beispielsweise) 20, sondern nur noch 19 Bilder angezeigt werden
  • oder aus dem Ajax-Request die nötigen Daten mitliefern, um nach Löschen des Bildes aus der Liste gleich hinten ein neues Bild anzuhängen.
• Deine eigene, selbst ausgedachte Strategie

Sicher ist noch etwas Arbeit dafür nötig, ist aber letztlich trivial zu programmieren und bleibt als einfache Übung dem Studenten überlassen (zur Übersetzung des Satzes hier nachlesen).

Viel Glück 😉

Rolf