nicht angemeldet
Wiki: Canvas
Matthias Scharwies
Wiki: Canvas
Matthias Scharwies
Gunnar Bittersmann
Matthias Apsel
JürgenB
Tabellenkalk
MudGuard
Der MartinServus!
Ich habe den bestehenden Artikel aktualisiert, erweitert und mit Live-Beispielen versehen:
Allerdings fehlen noch gute Anwendungsbeispiele. Einzelne Beispiele könnten in die Seiten integriert werden. Größere Artikel würden unter
JavaScript/Anwendung und Praxis
einen eigenen Artikel bekommen.
@Orlok, @1unitedpower @all, Habt ihr irgendwelche Vorschläge oder sogar schon fertige Beispiele, die man integrieren könnte?
dito, mir fehlt die Idee (und eigentlich auch die Zeit) für ein gutes Beispiel.
Herzliche Grüße
Matthias Scharwies
-
@@Matthias Scharwies
Allerdings fehlen noch gute Anwendungsbeispiele.
Da sehe ich die Schwierigkeit, Beispiele zu finden, die einerseits einfach sind und andererseits nicht Beispiele dafür sind, was man nicht mit Canvas machen sollte, weil andere Technologien (SVG, CSS-Animationen) dafür besser geeignet wären.
LLAP 🖖
--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Servus!
@@Matthias Scharwies
Allerdings fehlen noch gute Anwendungsbeispiele.
Da sehe ich die Schwierigkeit, Beispiele zu finden, die einerseits einfach sind und andererseits nicht Beispiele dafür sind, was man nicht mit Canvas machen sollte.
Ja, viele Beispiele aus den Jahren 2009-2012 sind eher klickibunti (30.000 Partikel springen durch die Luft, Schrift mit Schatten und 3D-Look, etc.) und nur als Ersatz für Flash zu sehen.
Deswegen auch meine Frage, wie ich eben auch nach 2 Monaten Suche nur wenige Sachen gefunden habe.
Weitere Möglichkeiten wären vielleicht:
-
Color-Picker (ich will einfach ausprobieren, wie ich den angeklickten Punkt finde.)
-
ein Konfigurator für T-Shirts, Autos, etc
-
ein Funktionsgraph
weil andere Technologien (SVG, CSS-Animationen) dafür besser geeignet wären.
Da sind wir auch schon dran: Wer baut einen Funktionsgraphen für lineare Gleichungen in SVG?
LLAP 🖖
Herzliche Grüße
Matthias Scharwies
-
Lieber Matthias,
Da sind wir auch schon dran: Wer baut einen Funktionsgraphen für lineare Gleichungen in SVG?
ich! [SELFHTML-Wiki: Funktionsgraphen für lineare Gleichungen]
Liebe Grüße,
Felix Riesterer.
-
Hallo Felix Riesterer,
ich! [SELFHTML-Wiki: Funktionsgraphen für lineare Gleichungen]
Cool.
Kannst du auch noch schicke Pfeilspitzen (nur nach rechts bzw. nach oben) sowie Bezeichnungen an die Achsen malen?
Bis demnächst
Matthias-
Lieber Matthias,
Kannst du auch noch schicke Pfeilspitzen (nur nach rechts bzw. nach oben) sowie Bezeichnungen an die Achsen malen?
[x] done
Aber im Artikel erwähne ich davon kein Wort - und vor allem nicht, wie ich die Darstellung der Beschriftung der Y-Achse im FF hinbekommen habe! Im Chromium tut sie dafür nicht. Da sollen sich jetzt andere die Zähne dran ausbeißen!
Liebe Grüße,
Felix Riesterer.
-
Im Chromium tut sie dafür nicht.
Hehe, so ein pöhser Hack aber auch... ;-)
Liebe Grüße,
Felix Riesterer.
-
Lieber Felix!
Kannst du auch noch schicke Pfeilspitzen (nur nach rechts bzw. nach oben) [...] malen?
[x] done
Aber im Artikel erwähne ich davon kein Wort
Vielen Dank für Deine schnellen Änderungen, wir waren jetzt nur kurz bei der Kinder-Olympiade und jetzt ist da ein tolles Beispiel vorhanden.
Die Pfeile werde ich morgen mit dem marker-Element in den Definitionsabschnitt, bzw. das CSS legen.
Liebe Grüße,
Felix Riesterer.
Herzliche Grüße
Matthias Scharwies
-
Servus!
Die Markierungen sind eingefügt.
Ich habe einen kurzen einleitenden Text geschrieben. Ist der mathematisch korrekt?
Herzliche Grüße
Matthias Scharwies
-
Hallo Matthias Scharwies,
Die Markierungen sind eingefügt.
Cool.
Ich habe einen kurzen einleitenden Text geschrieben. Ist der mathematisch korrekt?
Ich denke schon.
Bis demnächst
Matthias
-
-
-
-
-
-
-
-
Hallo Matthias,
ich antworte auch mal hier.
Wäre mein Funktionsplotter (in einer entrümpelten Version*) etwas für einen Wiki-Artikel?
Gruß
Jürgen-
Hallo JürgenB,
Wäre mein Funktionsplotter (in einer entrümpelten Version*) etwas für einen Wiki-Artikel?
Auf jeden Fall.
Bis demnächst
Matthias -
Servus!
Hallo Matthias,
ich antworte auch mal hier.
Wäre mein Funktionsplotter (in einer entrümpelten Version*) etwas für einen Wiki-Artikel?
Ja, vielen Dank!
Könntest Du die Überarbeitung/ Entrümpelung übernehmen? Vielen Dank im Voraus!
Gruß
JürgenHerzliche Grüße
Matthias Scharwies
-
Hallo,
ich habe den Funktionsplotter überarbeitet. Wie ist eure Meinung dazu, eignet er sich als Basis für einen Wiki-Artikel zum Thema Canvas-Anwendung?
Das select-Element hinter „Vordefinierte Funktionen:“ lässt sich nicht mit der Tastatur bedienen, hat hier jemand eine Idee, wie ich das verbessern kann?
Können die Linux-Nutzer die Seite bitte mal testen, auch das Verhalten auf Änderung der Viewportgröße?
Gruß
Jürgen-
Servus!
Hallo,
ich habe den Funktionsplotter überarbeitet. Wie ist eure Meinung dazu, eignet er sich als Basis für einen Wiki-Artikel zum Thema Canvas-Anwendung?
Auf jeden Fall, sieht gut aus und scheint eine der Anwendungsmöglichkeiten zu sein, wo Canvas seine Berechtigung hat! (In SVG wäre das auch möglich, aber das Argument der semantischen Auszeichnung einzelner Diagramm-Elemente scheint mir hier vernachlässigbar zu sein - wer lässt sich ein Diagramm / Kurve vorlesen?)
Können die Linux-Nutzer die Seite bitte mal testen, auch das Verhalten auf Änderung der Viewportgröße?
@Felix Riesterer was hältst du dvon?
Vielen Dank und herzliche Grüße
Matthias Scharwies
-
Hallo Matthias Scharwies,
(In SVG wäre das auch möglich, aber das Argument der semantischen Auszeichnung einzelner Diagramm-Elemente scheint mir hier vernachlässigbar zu sein - wer lässt sich ein Diagramm / Kurve vorlesen?)
Jeder, der wissen möchte, welche Wertepaare abgebildet werden und nicht gut genug sehen kann.
Bis demnächst
Matthias-
Servus!
Hallo Matthias Scharwies,
(In SVG wäre das auch möglich, aber das Argument der semantischen Auszeichnung einzelner Diagramm-Elemente scheint mir hier vernachlässigbar zu sein - wer lässt sich ein Diagramm / Kurve vorlesen?)
Jeder, der wissen möchte, welche Wertepaare abgebildet werden und nicht gut genug sehen kann.
ok, verstanden.
Würdest du in ein Tutorial aber wirklich eine Funktion einbauen, die diese Wertepaare dynamisch ins Fallback schreibt?
Herzliche Grüße
Matthias Scharwies
-
Hallo Matthias ,
(In SVG wäre das auch möglich, aber das Argument der semantischen Auszeichnung einzelner Diagramm-Elemente scheint mir hier vernachlässigbar zu sein - wer lässt sich ein Diagramm / Kurve vorlesen?)
Jeder, der wissen möchte, welche Wertepaare abgebildet werden und nicht gut genug sehen kann.
ok, die kleine Erweiterung übernimmst du dann, und die Verpflegung in der Zeit, in der drei mal 1000 Wertepaare vorgelesen werden, auch. :)
Aber ohne Spass:
Der Funktionsplotter besteht aus den Teilen:
Grafik-Schnittstelle: hier werden u.A. Funktionen für Text- und Linienausgabe angeboten. Hier sehe ich nicht, wie ich Barrierefreihet einbauen soll.
Plot-Schnittstelle: hier wird das Diagramm mit Achsen etc. berechnet und an die Grafikschnittstelle übergeben. Auch hier sehe ich nicht, wie ich Barrierefreihet einbauen soll.
Der Plotter: liest die Eingaben aus den UI-Elementen, berechnet die Werte und ruft plot auf.
HTML / CSS: definiert den Ausgabebereich für das Diagramm sowie die Dialogelemente. Erst hier oder im Plotter könnte mMn die Barrierefreihet eingebaut werden. Es könnte z.B. ermittelt werden, ob eine "Vorlesesoftware" läuft, der dann die Inhalte in alternativer Form angeboten werden. Aber hier muss ich passen, da fehlen mir das nötige Wissen, Erfahrung und Testmöglichkeiten.
Gruß
Jürgen -
Hallo,
Jeder, der wissen möchte, welche Wertepaare abgebildet werden und nicht gut genug sehen kann.
Ist das wirklich so? Wer das möchte, würde eher eine entsprechende Wertetabelle aufrufen wollen.
Für das Diagramm würde ich eher eine interpretative Kurvendiskussion erwarten. Z.B.: „Der Graf beginnt oben links, schneidet bei -2 die X-Achse, hat ein Minimum bei -1, geht durch den Nullpunkt und verschwindet im positiven Unendlichen“
Gruß
Kalk-
Hallo Tabellenkalk,
Ist das wirklich so? Wer das möchte, würde eher eine entsprechende Wertetabelle aufrufen wollen.
Wertetabelle und Funktionsgraph sind zwei Seiten derselben Medaille.
Bis demnächst
Matthias-
Hallo Matthias,
Ist das wirklich so? Wer das möchte, würde eher eine entsprechende Wertetabelle aufrufen wollen.
Wertetabelle und Funktionsgraph sind zwei Seiten derselben Medaille.
gibt es denn (JS-)Schnittstellen für „Vorlesebrowser“? Oder würde es reichen, eine ausgedünnte Wertetabelle in eine mit entsprechenden Aria-Attributen versehene versteckte Tabelle zu kopieren? Unterstützen „Vorlesebrowser“ Javascript?
Gruß
Jürgen-
Hallo JürgenB,
gibt es denn (JS-)Schnittstellen für „Vorlesebrowser“? Oder würde es reichen, eine ausgedünnte Wertetabelle in eine mit entsprechenden Aria-Attributen versehene versteckte Tabelle zu kopieren? Unterstützen „Vorlesebrowser“ Javascript?
Aus meiner Sicht würde eine stark ausgedünnte Wertetabelle reichen. Nur um zu zeigen, dass wir uns um die Zugänglichkeit Gedanken machen. Ich würde sogar das Risiko eingehen, nur die Werte von -20 bis +20 in Zweierschritten aufzuführen.
Ein möglichst vollumfänglich zugänglicher Funktionsplotter wäre schön, übersteigt aber imho das, was in einem Tutorial (zu Canvas!) stehen sollte. Wenn man sowas anstrebt, müsste man mal Kontakt zu Mathelehrern an Sehbehindertenschulen aufnehmen. Ich habe da leider keine Verbindungen.
Bis demnächst
Matthias-
Hallo Matthias,
Aus meiner Sicht würde eine stark ausgedünnte Wertetabelle reichen. Nur um zu zeigen, dass wir uns um die Zugänglichkeit Gedanken machen. Ich würde sogar das Risiko eingehen, nur die Werte von -20 bis +20 in Zweierschritten aufzuführen.
habe ich jetzt mal „hidden“ eingebaut.
Gruß
Jürgen-
Hallo JürgenB,
habe ich jetzt mal „hidden“ eingebaut.
Gefällt mir.
Obwohl
tablenur eintheadhaben darf, meckert der Validator nicht.Was bedeuten AM und PM?
Bis demnächst
Matthias-
Hallo Matthias,
Gefällt mir.
Dake.
Obwohl
tablenur eintheadhaben darf,die Hoffnung stirbt zuletzt.
das ist auch kein Wunder, da die Tabelle ja per Javascript angelegt wird. Zum Glück :) kann das der Validator noch nicht.
Ich werde das dann auf eine Tabelle pro Funktion umstellen.
Was bedeuten AM und PM?
Amplitudenmoduliert und Phasenmoduliert.
Gruß
Jürgen
-
-
-
-
-
Hallo,
Wertetabelle und Funktionsgraph sind zwei Seiten derselben Medaille.
Das hat niemand bestritten. Aber um sich die eine Seite vorlesen zu lassen, dreht man die Medaille ja nicht um.
Gruß
Kalk
-
-
Hallo,
Für das Diagramm würde ich eher eine interpretative Kurvendiskussion erwarten. Z.B.: „Der Graf beginnt oben links, schneidet bei -2 die X-Achse, hat ein Minimum bei -1, geht durch den Nullpunkt und verschwindet im positiven Unendlichen“
das wäre eine schöne Lösung, aber hier geht es um ein Anwendungsbeispiel für Canvas. Da programmiere ich keine Kurvendiskussion für beliebige Funktionen rein. ;)
Gruß
Jürgen-
Servus!
das wäre eine schöne Lösung, aber hier geht es um ein Anwendungsbeispiel für Canvas. Da programmiere ich keine Kurvendiskussion für beliebige Funktionen rein. ;)
Full ACK.
Das könnte in einen (Ab)-Satz am Ende mit Link auf den Zugänglichkleitsartikel.
Herzliche Grüße
Matthias Scharwies
-
-
-
-
Hallo Matthias,
… (In SVG wäre das auch möglich,
und sogar einfach umzusetzen. Wer Lust hat, muss nur die Methoden in der Grafikschnittstelle SW.gra von Canvas auf SVG umschreiben.
aber das Argument der semantischen Auszeichnung einzelner Diagramm-Elemente scheint mir hier vernachlässigbar zu sein …
ich werde das Select durch Buttons ersetzen, gefällt mir auch besser. Aber die uneingeschränkte Tastaturbedienung bekomme ich (noch) nicht hin.
Gruß
Jürgen-
Servus!
Hallo Matthias,
… (In SVG wäre das auch möglich,
und sogar einfach umzusetzen. Wer Lust hat, muss nur die Methoden in der Grafikschnittstelle SW.gra von Canvas auf SVG umschreiben.
Sehr gute Idee - das werde ich zu einem späteren Zeitpukt einmal versuchen!
Herzliche Grüße
Matthias Scharwies
-
-
Lieber Matthias,
Auf jeden Fall, sieht gut aus und scheint eine der Anwendungsmöglichkeiten zu sein, wo Canvas seine Berechtigung hat!
sehe ich auch so.
@Felix Riesterer was hältst du dvon?
Très chic!
Mir gefällt das Kapseln von Funktionalität in einer Art Klasse (SW-Objekt), aber die vielen Variablen im globalen Scope gefallen mir absolut nicht! Den Kram nach dem SW-Objekt hätte man für eine spezielle Anwendung ebenfalls kapseln können (habe ich auch so gemacht).
Liebe Grüße,
Felix Riesterer.
-
Hallo Felix,
Mir gefällt das Kapseln von Funktionalität in einer Art Klasse (SW-Objekt), aber die vielen Variablen im globalen Scope gefallen mir absolut nicht! Den Kram nach dem SW-Objekt hätte man für eine spezielle Anwendung ebenfalls kapseln können (habe ich auch so gemacht).
ich sehe den Funktionsplotter als eigenständige Anwendung, daher habe ich Konflikte durch globale Variablen garnicht auf dem Schirm gehabt. Ich werde mal drüber nachdenken. Ich glaube ich nehme einen IIFE zum Kapseln.
Gruß
Jürgen
-
-
-
Hallo,
Das select-Element hinter „Vordefinierte Funktionen:“ lässt sich nicht mit der Tastatur bedienen, hat hier jemand eine Idee, wie ich das verbessern kann?
ich habe das select jetzt durch Buttons ersetzt.
Gruß
Jürgen -
Lieber JürgenB,
Können die Linux-Nutzer die Seite bitte mal testen, auch das Verhalten auf Änderung der Viewportgröße?
wenn ich die Breite und/oder Höhe ändere, wird die Kurve auch breiter bzw. gestauchter. Es finden sich auf der X- bzw. Y-Skala auch mehr Zwischenwerte.
Liebe Grüße,
Felix Riesterer.
-
Hallo Felix,
wenn ich die Breite und/oder Höhe ändere, wird die Kurve auch breiter bzw. gestauchter. Es finden sich auf der X- bzw. Y-Skala auch mehr Zwischenwerte.
das ist so gewollt. Vielen Dank.
Gruß
Jürgen
-
-
-
Hallo,
ich habe eine erste Version des Artikels zum Funktionsplotter als Canvas-Anwendung fertig. Wie ist die Meinung dazu?
Gruß
Jürgen-
Hallo Jürgen,
ich habe eine erste Version des Artikels zum Funktionsplotter als Canvas-Anwendung fertig. Wie ist die Meinung dazu?
Super, ich bin beeindruckt!
Ich werde zu einem späteren Zeitpunkt mal versuchen, das Grafikobjekt für einen SVG-Plotter zu verwenden.
Ich habe in JavaScript/Anwendung und Praxis schon mal einen Link angelegt. Willst du es schon rüberziehen?
Herzliche Grüße
Matthias Scharwies
-
Hallo Matthias,
Super, ich bin beeindruckt!
danke.
Ich werde zu einem späteren Zeitpunkt mal versuchen, das Grafikobjekt für einen SVG-Plotter zu verwenden.
dazu müssen ja „nur“ die sechs Methoden in gra umgeschrieben werden :)
Ich habe in JavaScript/Anwendung und Praxis schon mal einen Link angelegt. Willst du es schon rüberziehen?
ich habe den Quelltext in die neue Seite kopiert.
Wie kann ich denn jetzt die Version im Userbereich löschen?
Und wie bekomme ich das Inhaltsverzeichnis auf die Seite?
Gruß
Jürgen-
Servus!
Hallo Matthias,
Super, ich bin beeindruckt!
danke.
Ich werde zu einem späteren Zeitpunkt mal versuchen, das Grafikobjekt für einen SVG-Plotter zu verwenden.
dazu müssen ja „nur“ die sechs Methoden in gra umgeschrieben werden :)
Ich weiß, doch die praktische Umsetzung dauert bei mir immer länger!
Ich habe in JavaScript/Anwendung und Praxis schon mal einen Link angelegt. Willst du es schon rüberziehen?
ich habe den Quelltext in die neue Seite kopiert.
Perfekt!
Wie kann ich denn jetzt die Version im Userbereich löschen?
einfach auf Seite löschen. (wenn Du die Seite verschoben hättest OHNE eine Weiterleitung anzulegen, hättest du sie nicht löschen brauchen.
Und wie bekomme ich das Inhaltsverzeichnis auf die Seite?
Das wird in MediaWiki erst ab mehr als 3 Überschriften dargestellt.
Entweder du verwendest FORCETOC (siehe: Hilfe:Inhaltsverzeichnis) oder wir schreiben noch ein kleines Kapitel mit Link auf alternative Inhalte für Canvas , um das schon thematisierte Problem mit der Zugänglichkeit anzusprechen.
Herzliche Grüße
Matthias Scharwies
-
Hallo Matthias,
dazu müssen ja „nur“ die sechs Methoden in gra umgeschrieben werden :)
Ich weiß, doch die praktische Umsetzung dauert bei mir immer länger!
ivh habe schon mal etwas gesucht, bin aber noch nicht fündig geworden. Hast du eine Quelle, wo ich nachlesen kann, wie ich svg komplett per Javascript erzeugen kann? Oder geht das per createElement?
einfach auf Seite löschen. (wenn Du die Seite verschoben hättest OHNE eine Weiterleitung anzulegen, hättest du sie nicht löschen brauchen.
da oben habe ich garnicht gesucht, ich habe diese Schaltflächen im Edit-Bereich erwartet.
Entweder du verwendest FORCETOC …
habe ich jetzt mal eingebaut. Danke.
Gruß
Jürgen -
Hallo Matthias,
Ich werde zu einem späteren Zeitpunkt mal versuchen, das Grafikobjekt für einen SVG-Plotter zu verwenden.
dazu müssen ja „nur“ die sechs Methoden in gra umgeschrieben werden :)
Ich weiß, doch die praktische Umsetzung dauert bei mir immer länger!
so, ich habe jetzt eine erste Versions des Funktionsploters mit SVG als Grafikbasis fertig. Ich habe die Canvas-Grafik erst mal direkt in SVG umgeschrieben. Z.Zt. ist noch alles pixelorientiert. Jetzt muss ich das noch skalierbar machen.
Soll der dann - wenn fertig - mit in den Canvas-Artikel?
Gruß
Jürgen-
Servus!
so, ich habe jetzt eine erste Versions des Funktionsploters mit SVG als Grafikbasis fertig. Ich habe die Canvas-Grafik erst mal direkt in SVG umgeschrieben.
Vielen, vielen Dank!
Z.Zt. ist noch alles pixelorientiert. Jetzt muss ich das noch skalierbar machen.
<figure style="position: absolute; margin: 0px; width: 1887px; height: 590px;"> <figure style="position: absolute; margin: 0px; left: 50px; top: 0px; width: 1837px; height: 555px;"> <svg width="1837" height="555">Meinst du damit, dass das svg-Element einfach nur ein ViewBox-Attribut
viewbox="0 0 1837 555"(oder was auch immer) erhält und figure dann nurwidth:100%benötigt?Soll der dann - wenn fertig - mit in den Canvas-Artikel?
Das wäre eine Möglichkeit, zusammen mit einer [[Kategorie:SVG]] am Schluss. Mein erster Gedanke war aber:
- SVG/Anwendung und Praxis/Funktionsplotter
- eine Einführung, dass das Grafikobjekt unter canvas beschrieben ist
- dort ein "Siehe auch" am Ende auf diesen neuen Artikel.
Gruß
JürgenHerzliche Grüße und nochmals vielen Dank!
Matthias Scharwies
PS: Kommst du auch zum Self-Treffen? Evtl. mit anderen Münsterländern in einer Fahrgemeinschaft? Das wäre nett, wenn wir uns wiedersehen könnten!
-
Hallo Matthias,
Z.Zt. ist noch alles pixelorientiert. Jetzt muss ich das noch skalierbar machen.
<figure style="position: absolute; margin: 0px; width: 1887px; height: 590px;"> <figure style="position: absolute; margin: 0px; left: 50px; top: 0px; width: 1837px; height: 555px;"> <svg width="1837" height="555">Meinst du damit, dass das svg-Element einfach nur ein ViewBox-Attribut
viewbox="0 0 1837 555"(oder was auch immer) erhält und figure dann nurwidth:100%benötigt?mit viewbox lege ich ja die „virtuelle“ Größe des SVG-Bereichs fest. Aber ich muss auch die Elemente drum herum noch von ihren Pixelgrößen befreien. Z.Zt. kann nur das äußere Figure-Element beliebige Größenangaben haben, z.B. in % oder vh. Die anderen vom Script erzeugten Elemente bekommen ihre berechnete Größe in Pixelangaben. Das Problem, über das ich im Moment nachdenke, ist: wie kann ich die Figure-Elemente, die das Script anlegt, an die Größe des äußeren im html angelegten Figure-Elements anpassen, ohne Pixelwerte für Größenangaben zu verwenden und ohne dem äußeren Figure-Element ein position:relativ geben zu müssen.
Oder denke ich (noch) zu kompliziert. Relative Größenangaben beziehen sich doch auf das nächste Element mit position ungleich static? (css ist nicht meine Stärke.)
Mein erster Gedanke war aber:
- SVG/Anwendung und Praxis/Funktionsplotter
- eine Einführung, dass das Grafikobjekt unter canvas beschrieben ist
- dort ein "Siehe auch" am Ende auf diesen neuen Artikel.
ich denke, so machen wir das.
PS: Kommst du auch zum Self-Treffen? Evtl. mit anderen Münsterländern in einer Fahrgemeinschaft? Das wäre nett, wenn wir uns wiedersehen könnten!
ich habe leider an diesem WE keine Zeit.
Gruß
Jürgen-
Hi,
Oder denke ich (noch) zu kompliziert. Relative Größenangaben beziehen sich doch auf das nächste Element mit position ungleich static? (css ist nicht meine Stärke.)
Absolute Positionierung richtet sich nach dem innersten Vorfahrenelement mit position ungleich static.
Relative Größenangaben beziehen sich m.W. auf das direkte Vorfahrenelement (a/k/a Elternelement), unabhängig von dessen position-Wert.
cu,
Andreas a/k/a MudGuard-
Hallo MudGuard,
Relative Größenangaben beziehen sich m.W. auf das direkte Vorfahrenelement (a/k/a Elternelement), unabhängig von dessen position-Wert.
Das gilt nur für die relativen Einheiten, die nicht explizit anders spezifiziert sind:
- rem, relativ zur Schriftgröße des HTML-Elements
- vh/vw/vmin/vmax (denkbar schlechte Wahl der Symbole, IMHO)
Und ich hab bestimmt noch welche vergessen.
LG,
CK-
Hallo,
Relative Größenangaben beziehen sich m.W. auf das direkte Vorfahrenelement (a/k/a Elternelement), unabhängig von dessen position-Wert.
Das gilt nur für die relativen Einheiten, die nicht explizit anders spezifiziert sind:
- rem, relativ zur Schriftgröße des HTML-Elements
- vh/vw/vmin/vmax (denkbar schlechte Wahl der Symbole, IMHO)
danke euch beiden. Dann sollten ja Größenangaben in % kein Problem sein.
Gruß
Jürgen-
Hallo JürgenB,
danke euch beiden. Dann sollten ja Größenangaben in % kein Problem sein.
Ja. Allerdings muss man aufpassen, dass die Vorfahrenelemente auch festgelegte Größenangaben haben, aber das weißt du sicher. Und bei padding-Angaben in Prozent muss man beachten, dass diese sich auf die Breite des Elternelements beziehen. Das gilt insbesondere für padding-top und -bottom.
Bis demnächst
Matthias
-
- SVG/Anwendung und Praxis/Funktionsplotter
-
Hallo Matthias,
Mein erster Gedanke war aber:
- SVG/Anwendung und Praxis/Funktionsplotter
- eine Einführung, dass das Grafikobjekt unter canvas beschrieben ist
- dort ein "Siehe auch" am Ende auf diesen neuen Artikel.
ich habe den Artikel dort online gestellt. Er ist in großen Teilen eine Kopie von Javascript/Anwendung und Praxis/Funktionsplotter. Es wird am Anfang auf den anderen Artikel verlinkt.
Setzt du bitte die Nötigen Links.
Gruß
Jürgen - SVG/Anwendung und Praxis/Funktionsplotter
- SVG/Anwendung und Praxis/Funktionsplotter
-
Hallo,
ich habe weiter an den Skripten gearbeitet. Hier die beiden Versionen:
Ich habe jetzt die Skripte in eigene JS-Dateien ausgelagert, da ja der Plotter und das Plot-Objekt bei der Canvas- und bei der SVG-Version gleich sind und nur das Grafik-Objekt in einer SVG- und einer Canvas-Version vorliegen. Kann das im Wiki so bleiben, oder macht das die Quelltexte zu unübersichtlich? Werden beim Frickln eingebundene Ressourcen angezeigt?
Gruß
Jürgen-
Servus!
Ich habe jetzt die Skripte in eigene JS-Dateien ausgelagert, da ja der Plotter und das Plot-Objekt bei der Canvas- und bei der SVG-Version gleich sind und nur das Grafik-Objekt in einer SVG- und einer Canvas-Version vorliegen. Kann das im Wiki so bleiben, oder macht das die Quelltexte zu unübersichtlich?
Das ist m.E. gar kein Problem, weil ich nicht glaube, dass eine so komplexe Anwendung durch ein bisschen Rumfrickln besser zu verstehen wäre. Wer sich dafür interessiert hat die Quelltexte.
Werden beim Frickln eingebundene Ressourcen angezeigt?
Da habe ich jetzt momentan kein passendes Beispiel parat. @Felix Riesterer ist zur Zeit im Urlaub.
Wichtig ist nur, dass du im Wiki leider nicht relativ verlinken kannst, sondern immer den Beispiel-Namnesraum miterwähnen musst:
href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css".Herzliche Grüße
Matthias Scharwies
-
Hallo Matthias,
Werden beim Frickln eingebundene Ressourcen angezeigt?
Felix hat mir den Tipp gegeben, die Scripte per Javascript einzubinden, so funktioniert es.
Gruß
Jürgen
-
-
-
-
-
@@JürgenB
dazu müssen ja „nur“ die sechs Methoden in gra umgeschrieben werden :)
Was ist ein gra? (Da gab’s doch einen blöden Witz.)
Da sind wir schon bei meinem Kritikpunkt: Sämtliche kryptischen Variablennamen sollten in sprechende umbenannt werden. Es macht keinen Sinn, da ein paar Zeichen sparen zu wollen; gerade in einem Tutorial nicht.
LLAP 🖖
--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Hallo,
Was ist ein gra? (Da gab’s doch einen blöden Witz.)
ich kann ihn mir etwa vorstellen.
Oder so wie gestern abend im Fernsehkrimi ...
Polizeichef: Wissen Sie, wie Andi mit Nachnamen heißt?
Kommissar: Ähm, wer? Andi?
Assistent: Arbeit!
Kommissar: Ah, jetzt. Arbeit. Andi Arbeit!
Polizeichef: (grinst)So long,
Martin--
Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
- Douglas Adams, The Hitchhiker's Guide To The Galaxy -
Hallo Gunnar,
Was ist ein gra? (Da gab’s doch einen blöden Witz.)
erzähl mal, den kenne ich noch nicht :)
Da sind wir schon bei meinem Kritikpunkt: Sämtliche kryptischen Variablennamen sollten in sprechende umbenannt werden. Es macht keinen Sinn, da ein paar Zeichen sparen zu wollen; gerade in einem Tutorial nicht.
wenn du wüsstest, wie „schnell“ ich tippen kann, würdest du das mit den „paar Zeichen sparen zu wollen“ anders sehen :)
Ich werde das mal in grafik erweitern.
Gruß
Jürgen-
@@JürgenB
Was ist ein gra? (Da gab’s doch einen blöden Witz.)
erzähl mal, den kenne ich noch nicht :)
„Machst’n du so?“
„Grafiker.“
„Hört sich toll an. Aber was ist ein Gra?“Ich sag doch, blöder Witz.
EDIT: Den ich mir wohl hätte sparen können. Hab den Smiley überlesen und bin drauf reingefallen.
Da sind wir schon bei meinem Kritikpunkt: Sämtliche kryptischen Variablennamen sollten in sprechende umbenannt werden. Es macht keinen Sinn, da ein paar Zeichen sparen zu wollen; gerade in einem Tutorial nicht.
Ich werde das mal in grafik erweitern.
Du hast aber nicht überlesen, dass ich sagte „sämtliche“, nicht „diesen“? Das betrifft (so gut wie) alle Variablenbezeichner.
LLAP 🖖
--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-
-
-
-
-
-