Grundgerüst für Website fertig!

Also habe soweit die ganzen HTML, CSS und JS gemacht. Zusatzfunktionen habe ich noch nicht programmiert wie z.B. Spielplan-Generator.

Bei Teams und Spielpläne wollte ich die Daten mit einer API anbinden aber habe es nicht geschafft (von https://svv.volleynet.at/Termine/32369).

Es fehlt noch alles im Bezug auf Responsive Webdesign. Habe mich da herumprobiert, aber bräuchte Hilfe wie ich das ganze angehen soll bzw. was ich alles berücksichtigen muss.

Bitte um Feedback auf das Projekt d.h. was ich bisher gemacht habe und wie ich das alles auf Responsive Webdesign anpassen könnte. Idealerweise mit einem kleinen Beispiel, wie ich die Flexbar anpassen könnte.

LG Khanh Do Duy WIN - 3.Semester

Vorab: Sehr beeindruckender Fortschritt in kurzer Zeit! Da bist du in jedem Fall ein gutes Stück voraus.

Bzgl. Spielpläne: Die Daten auf der verlinkten Seite (https://svv.volleynet.at/Termine/32369) werde nicht dynamisch eingebunden. Der beste Weg zur Anbindung dieser Daten dürfte ein einfacher Web Scraper sein. Rechtlich mit Vorsicht zu verwenden (für dieses Projekt sicherlich unproblematisch). In den Einheiten zur clientseitigen Programmierung (ab übernächstem Termin) werde ich darauf ein wenig eingehen. Alternativ kann ich schon früher Hilfestellung dazu geben.

Ein paar Anmerkungen zum Responsive Webdesign (allgemein war der letzte Termin nur der kurze Einblick zum Thema und wir werden am Mittwoch die ganzen Details besprechen - insofern bleibe ich hier vorab eher kurz und projektspezifisch): Bei der Flexbar wechselt man in der Regel die "Fließrichtung" ab einer gewissen Breite (wenn der Content nicht mehr sauber passt) von row zu column, z.B.:

@media only screen and (max-width: 1024px) {
    .nav-list {
        flex-direction: column;
    }
}

Ein paar zusätzliche Anpassungen (z.B. Erhöhung der line-height) und/oder dynamisches Ein- und Ausklappen der Navigationsinhalte ("Hamburger-Icon") machen das Ganze noch schöner.

Ansonsten würde ich als "schnellen Fix" für das Layouting die paddings von main, footer und wo es sonst noch verwendet wurde von den fixen Pixel-Angaben zu Prozent-Angaben zu ändern (z.B. padding-left: 15%) und ab einer gewissen Screenbreite mit dem @media-Selektor gänzlich zu entfernen (oder sehr klein zu setzen). Die sauberste Lösung wäre die Arbeit mit einem Raster-Layout wie in VO und LB kurz angeschnitten. Auch dazu mehr beim kommenden Termin.

Noch eine allgemeine Anmerkung: Die Referenzen auf lokale Bilder und andere interne URLs immer relativ setzen, damit sie überall korrekt laden, z.B. src="C:\Users\43677\Documents\FH-Dokumente\3.Semester\Web_Technologien\web_technologies_project_website\pictures\Herren_Khanh.png" ändern zu src="..\pictures\Herren_Khanh.png"

NoticeMyCat / web_technologien

Grundgerüst für Website fertig! #2