doho13
Themenersteller
Beginner (20 Beiträge)

Fahrtkosten-Rechner: Spritkosten online berechnen

am 29.04.2013, 17:16 Uhr eröffnete doho13 folgenden Thread
Website vorstellen    5406 mal gelesen    11 Antwort(en).

Mein Fahrtkosten-Rechner wurde soeben gerelaunched.

Funktionen:
Anhand der Strecke, Benzinpreis, Durchschnittsverbrauch und Anzahl der Personen im Fahrzeug wird berechnet, wie hoch die Kosten pro Kopf sind. Über die optionalen Parameter Maut- und Parkgebühr kann das Ergebnis verfeinert werden.

Neu:
- komplett neuer Code
- HTML5-Einsatz erhöht die Usability bei der Eingabe der Daten
- Bug in der Statistik gefixt: berücksichtigt werden nur noch realistische Daten
- kleinere Änderungen am Design, weniger scrollen nötig
- Responsive: Usability an kleineren Bildschirmen erhöht

Das Tool ist eine Eigenentwicklung, umgesetzt wurde es mit PHP und einigen HTML5-Funktionen.

zum Fahrtkostenrechner

Über Feedback würde ich mich natürlich freuen!


hansen
Foren Moderator
Content Gott (1886 Beiträge)
am 29.04.2013, 18:04 Uhr schrieb hansen

Hallo doho13,

doho13 schrieb:
- Responsive: Usability an kleineren Bildschirmen erhöht
Über Feedback würde ich mich natürlich freuen!


finde die Idee gut und auch gut umgesetzt. Da gibt es nur wenig zu meckern.
Für das Smartphone könnte die Schrift etwas größer sein, zudem wird die Footerzeile bei "Bilder laden Aus" nicht angezeigt, wodurch das Impressum wegen der Farbe fff nicht zu lesen ist.
Zudem würde die Ladezeit ohne Leerzeichen und Leerzeilen noch etwas besser werden.
Bei CSS wäre noch marginal etwas möglich, aber nur wenn Dir langweilig ist:

[CSS]
header{background-image:url(../img/bg.gif);color:#fff;height:80px;}
header{background:url(../img/bg.gif);color:#fff;height:80px}

noch ein weiterer background-image vorhanden

+ alle ; vor der Klammer entfernen
[/CSS]

Gruß
hansen


Nepal Rundreisen

winelady
Kauffrau
Content Halbgott (862 Beiträge)
am 29.04.2013, 18:08 Uhr schrieb winelady

Hallo doho13,

Dein Text dürfte an der linken Kante etwas Abstand zum Rand bekommen; momentan klebt er direkt an der Kante. Vielleicht kannst Du ihn bündig zum Formular ausrichten?

Im Datenschutz ist die Voreinstellung "wird von Piwik erfaßt" – insofern solltest Du auch darüber informieren, welche Daten Du damit sammelst und was Du damit machst.

Auf der Impressumseite sitzt man quasi fest; es fehlt die Navi, um wieder zurückzukommen.

Die Twitter/FB etc Logos hast Du gestaltet, als ob hier die 2-Klick-Lösung installiert ist. Allein vom Mouseover ohne Klick aktivieren sie sich anscheinend… ist das so gewollt?

Gruß
winelady


Weinvielfalt aus dem Weingut Fuchs
Fremdsprachensatz

hansen
Foren Moderator
Content Gott (1886 Beiträge)
am 29.04.2013, 18:22 Uhr schrieb hansen

...zudem wird die Footerzeile bei "Bilder laden Aus" nicht angezeigt, wodurch das Impressum wegen der Farbe fff nicht zu


aus welchen Gründen auch immer - jetzt wird die Footerleiste angezeigt, auch mit "Bilder laden Aus".

Gruß
hansen


Nepal Rundreisen

joerg
Avatar joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
am 29.04.2013, 18:27 Uhr schrieb joerg

Hallo

Nett wenn ich auch Buchstaben angeben kann. Abhilfe Pattern Attribut oder auch Type number damit die HTML Validierung etwas besser ist.

HTML5 Funktionen. Okay required und placeholder und autofocus Attribut das dürfte das dann aber auch gewesen sein.

Bei der Umsetzung würde ich eher dazu neigen die Berechnung komplett auf Javascript mit Einsatz des output Elementes umzustellen.

Wenn hier schon PHP eingesetzt wird sollten die Eingaben dann auch PHP seitig geprüft werden. Eher scheint es mir so zu sein das wenn der Code auf einen Fehler läuft das dann nur abgefangen wird.

Gruß
Jörg


Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools

doho13
Beginner (20 Beiträge)
am 29.04.2013, 18:54 Uhr schrieb doho13

@hansen
Oja, du hast Recht, weiße Schrift auf weißem Grund liest sich nicht gut. Wird geändert, danke für den Hinweis!
PS: Warum es bei dir jetzt auch ohne funktioniert weiß ich nicht. Das dürfte eigentlich nicht sein und sich so verhalten, wie du zuerst geschrieben hast. Ich habe den Code noch nicht angepasst.

Die Optimierungen am Code muss ich mir nochmal anschauen. Will mir den (HTML)Code nicht komplett unlesbar machen. Aber ist natürlich ein berechtigter Einwand (und von mir ein schwacher gegenpunkt :p)

@winelady
Welchen browser benutzt du? Der text sollte eigentlich bündig mit dem Formular anfangen, sprich jeweils nach links und rechts den gleichen Abstand haben.

Datenschutz: Guter Punkt, wird ergänzt, danke dir!

fehlende Navi im Impressum: Auch das kann ich leider nicht nachvollziehen.

Social Media Buttons: Jap, das ist so gewollt, dass die beim Mouseover aktiv werden. Ist benutzerfreundlicher und trotzdem datenschutzkonform. Ich nutze nicht die 2-Klickvariante von heise, sondern verfolge den Ansatz von Torben Leuschner: www.torbenleuschner.de/blog/790/pagespeed-social-buttons-nachladen-lassen/


Ist btw auch VIEL schlanker und kommt ohne jQuery aus.

@joerg
Ja, es können Buchstaben eingegeben werden. Warum auch immer das jemand tun sollte, die werden von PHP abgefangen. Eine Berechnung gibt es dann natürlich nicht. Was genau meinst du da im letzten Punkt mit "nur abgefangen"? Was soll da geprüft werden?

Bezüglich JavaScript: Habe ich bewusst drauf verzichtet um die größtmögliche Barrierefreiheit zu ermöglichen. Ja, ich verwende JS an anderer Stelle, aber da ist es für die Funktionalität nicht tragisch, wenn es deaktiviert ist.


hansen
Foren Moderator
Content Gott (1886 Beiträge)
am 29.04.2013, 19:16 Uhr schrieb hansen

doho13 schrieb:

PS: Warum es bei dir jetzt auch ohne funktioniert weiß ich nicht. Das dürfte eigentlich nicht sein und sich so verhalten, wie du zuerst geschrieben hast. Ich habe den Code noch nicht angepasst.


Lag am Opera-Mobile, der hat trotz Aktualisierung noch den Cache verwendet. Nach Ausschalten/Einschalten Footerleiste nun nicht mehr sichtbar.

Gruß
hansen


Nepal Rundreisen

joerg
Avatar joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
am 30.04.2013, 00:03 Uhr schrieb joerg

doho13 schrieb:

Ja, es können Buchstaben eingegeben werden. Warum auch immer das jemand tun sollte, die werden von PHP abgefangen. Eine Berechnung gibt es dann natürlich nicht. Was genau meinst du da im letzten Punkt mit "nur abgefangen"? Was soll da geprüft werden?



Hallo

Der Preis pro Person beträgt für die angegebene Strecke 0,00 Euro.

Das bekomme ich wenn ich auch eine Zahl mit Leerzeichen beispielsweise bei der KM Zahl eingebe. Okay genauso gut kann ich Buchstaben eingeben.

Ich habe jetzt auch keine Ahnung ob das sogar zu einem Datenbankeintrag führt.

Nur warum nicht bereits an der Stelle prüfen, ob die Eingaben den Erwartungen entsprechen.

Ob jetzt besonders böse Leute da eine SQL Injection vornehmen können, will ich gar nicht wissen. Für mich von aussen kommt an der Stelle bereits ein ganz grosses Fragezeichen auf von wegen Sicherheit der Anwendung. Denn hinter der Statistik muss eine Datenbank stecken.

Dabei kann man verschiedene Möglichkeiten von PHP nutzen die Eingaben bereits soweit zu checken.

Mich erstaunt auch nicht das wenn ich eine 0 bei der Personenanzahl eine Fehlermeldung kommt.
Ein Fehler ist aufgetreten:
Bitte füllen Sie alle Felder mit numerischen Werten aus.

Sieht für mich so aus Division durch 0 führte zu einem PHP Fehler der abgefangen wurde und mit einer echt nichtssagenden Fehlermeldung quittiert wurde.

Also mich würde echt nicht wundern, wenn in dem Code die eine oder andere Exception stecken würde anstatt den Code schon vorher so zu überprüfen das man darauf gar nicht angewiesen ist.

Gruß
Jörg


Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools

winelady
Kauffrau
Content Halbgott (862 Beiträge)
am 30.04.2013, 07:49 Uhr schrieb winelady

Hallo doho13,

Welchen browser benutzt du? Der text sollte eigentlich bündig mit dem Formular anfangen, sprich jeweils nach links und rechts den gleichen Abstand haben.


Firefox auf MacOS. Auf Safari steht der Rand korrekt

fehlende Navi im Impressum: Auch das kann ich leider nicht nachvollziehen.


Jetzt ist der Link da…

Social Media Buttons: Jap, das ist so gewollt, dass die beim Mouseover aktiv werden. Ist benutzerfreundlicher und trotzdem datenschutzkonform. Ich nutze nicht die 2-Klickvariante von heise, sondern verfolge den Ansatz von Torben Leuschner: www.torbenleuschner.de/blog/790/pagespeed-social-buttons-nachladen-lassen/


Ist btw auch VIEL schlanker und kommt ohne jQuery aus.


Hat was, weist den Nutzer aber nicht darauf hin, was passieren wird. Da die Lösung wie bei der schon recht verbreiteten Heiselösung aussieht, erwartet man beim Mouseover einen Hinweis, statt direkt verbunden zu werden. Ich habe meine Zweifel, wie die Super-Datenschützer das sehen, denn der Nutzer stimmt nicht durch Klick der Anbindung zu. Schau dazu auch mal in den Kommentaren bei Deinem Link.

Gruß
winelady


Weinvielfalt aus dem Weingut Fuchs
Fremdsprachensatz

doho13
Beginner (20 Beiträge)
am 30.04.2013, 11:50 Uhr schrieb doho13

Was jetzt geändert wurde:
1) Hintergrundfarbe im Header und Footer auf schwarz gesetzt: Schrift ist auch bei deaktivierten Grafiken lesbar (und der Link zum Impressum klickbar)
2) Datenschutzerklärung wurde neu erstellt und zeigt jetzt alle Infos zu den Sharing-Buttons sowie den von Piwik erfassten Daten auf
3) Auf der Statistik-Seite hatte ich noch zwei Schreibfehler, das ist auch gefixt.

Was noch aussteht:
1) Fehlersuche: Warum fehlt der Abstand zum linken Seitenrand unter Firefox auf Mac?
2) Die Frage, ob die Einbindung der Social Media Buttons so okay ist, habe ich an einen Anwalt weitergegeben. Ich werde über die Antwort berichten.

@jörg
In die DB werden nur Einträge vorgenommen, die realistische Werte enthalten. Generell passiert überhaupt nichts, wenn die Werte nicht meinen Vorgaben entsprechen. Die erste Hürde bevor in PHP irgendetwas gemacht wird, ist ein Check aller Eingaben via is_numeric. Weitere Checks folgen dann. Die Fehlerausgabe könnte da in der Tat besser sein, gebe ich dir recht.

"Also mich würde echt nicht wundern, wenn in dem Code die eine oder andere Exception stecken würde anstatt den Code schon vorher so zu überprüfen das man darauf gar nicht angewiesen ist."
Was genau meinst du damit? Inwiefern vorher prüfen? Meinst du eine Ausgabe im Stil von "In Feld xyz ist ein Fehler aufgetreten: Hier bitte nur Werte zwischen A und B eingeben"?

Danke dir für die technische Hinterfragung!


joerg
Avatar joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
am 30.04.2013, 19:07 Uhr schrieb joerg

Hallo

Zumindest würde ich wenn schon HTML5 vorliegt mir echt überlegen ob nicht das pattern Attribut vielen Fällen fehlerhafte Eingaben abfangen sollte.

Genauso gut könnte man in die Überlegungen die Input Typen range oder number einbeziehen. Auch wenn damit die unter Umständen eine Trennung der nicht ganzzahligen Werte notwendig ist.

Am besten schalte ich Javascript ab dann brauche ich auch nicht 1 Sekunde zu warten.

Okay maximal 10 Personen und 3000 km führen wohl zu einem Datenbankeintrag.

20 l Verbrauch darf ich auch noch eingeben. Bei 25 ist definitiv Ende. Weiter eingrenzen möchte ich das jetzt nicht.

Also Busunternehmen werden von der Datenbank ausgenommen.

So gesehen kann die Statistik getrost entfallen.

Ja ich würde echt eine benutzerfreundlichere Fehlerausgabe bevorzugen.

Zum Thema Benutzerfreundlichkeit und Javascript.

PHP als Fallbacklösung wenn Javascript abgeschaltet ist.
Dann kann man wunderbar diese Miniberechnung per Javascript vornehmen lassen.
Absenden Button mit Javascript verschwinden lassen und nur wenn die Eingaben vorgenommen worden sind eine Ausgabe vornehmen.

Abgesehen davon würde ich das Ganze unabhängig von einer bestimmten Währung machen, denn dieses Prinzip funktioniert mit jeder Währung.

Und dann kann man die Seite auch in anderen Sprachen senden, wenn man auf die Statistik verzichtet.

Gruß
Jörg


Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools



« zurück zu: Website vorstellen

Das Seitenreport Forum hat aktuell 5276 Themen und 36111 Beiträge.
Insgesamt sind 48364 Mitglieder registriert.