Projektentwicklung
Projektentwicklung
Grafische Oberfläche mit HTML und CSS erstellen
Zuerst erstellte ich das Grundgerüst in HTML und vergab grobe Positionierungen mittels CSS. Dieses enthält verschachtelte Div-Elemente, welche die einzelnen Elemente für die Erstellung der Buttons
und Darstellung des zu bearbeitenden Bildes beinhalten. Auch der Bereich für den Drag and Drop-Upload wurde angelegt. Für Beschreibungen der einzelnen Elemente wurden Paragraph- und Span-
Tags genutzt. Jeder Einzelne Button hat zudem ein title-Attribut erhalten, welches beim darüberfahren mit dem Mauszeiger die Funktionalität des Buttons als sog. Tooltiptext anzeigt. Die Buttons selbst wurden in Listenelementen mit SVG angelegt. Jedes Element erhält zudem eine Klasse, welche für die CSS-Bearbeitung und die Funktionen genutzt werden. Bei Erstellung der verschachtelten Div-Elemente wurde mittels CSS die Positionierung und das Design festgelegt. Grafische Elemente wie Linien und Umrandungen wurden über die CSS-Borderfunktion verwirklicht.
Datenbank
Da in der Firma die Daten der Kundenwebsites auf einem Webserver hinterlegt sind wird auch auf diesem die Datenbank erstellt. Diese ist nur dafür zuständig, die Dateinamen der hochgeladenen Bilder zu speichern. Dementsprechend klein fällt diese in Bezug auf die Spaltenanzahl aus.
Speichern der Bilder auf dem Webserver
Jedes Bild das ein Kunde hochlädt, wird in einem für jeden jeweiligen Kunden angelegten Ordner gespeichert.
Benutzerfreundlichkeit
Um die Benutzerfreundlichkeit zu erhöhen habe ich zusätzlich zu den Tooltips einen Hovereffekt eingefügt der die Schaltfläche mit auf die der Cursor zeigt etwas vergrößert und weiß färbt. Im Sinne der Barrierefreiheit habe ich auf stark kontrastierende oder für Menschen mit Farbenblindheit unkenntliche Farben verzichtet. Zudem wählte ich eine simple Schriftart um die Lesbarkeit zu erhöhen. Auch auf Fachbegriffe wurde bewusst verzichtet.
Entwicklung der Funktionen mit JavaScript und PHP
Zur Erklärung der einzelnen Funktionen gibt es eine detailierte Beschreibung mit Codebeispielen in den untenstehenden Links:
weiter zu: Erstellen der Drag and Drop Funktion
weiter zu: Erstellen der Bildbearbeitung
