Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

Werbeanzeige

Sacaldur

Community-Fossil

Beiträge: 2 301

Wohnort: Berlin

Beruf: FIAE

  • Private Nachricht senden

191

22.05.2015, 09:12

Es scheint mir so, als würde die Anordnung der Bilder gänzlich Clientseitig ablaufen. Würde der Server bereits bestimmen, welches Bild wie groß an welcher Stelle angezeigt werden soll, dann wären die Bilder (bzw. deren Platzhalter) von Anfang an an der richtigen Position. Wie fkrauthan schon sagte, hat das ui:repeat nichts damit zu tun, da es einfach nur den entsprechenden HTML-Code generiert.
Spieleentwickler in Berlin? (Thema in diesem Forum)
---
Es ist ja keine Schande etwas falsch zu machen, als Programmierer tu ich das täglich, [...].

192

22.05.2015, 09:15

@fkrauthan: Jau stimmt, habe auch schon ein paar Stellen gefunden wo ich noch keine feste Breite/Höhe vergeben habe, obwohl ich davon ausgegangen war das ich das getan hätte. Und auch das es durch das laden der vielen Bilder schlimmer wirkt als es ist stimmt. Wenn ich den Browser Cache aktiviere ist es schon deutlich entspannter. Werde die fehlenden angaben demnächst mal ergänzen dann sollte es besser sein.

Das es nicht wirklich an ui:repeat liegt stimmt auch, da ich an diversen anderen Stellen damit keine Probleme habe.

Stelle nur grade fest das ich mein CSS mal aufräumen und besser strukturieren sollte. Das sollte in Zukunft helfen sowas zu vermeiden ;)

EDIT:

@Sacaldur: Das würde würde zwar jetzt noch funktionieren, aber ich möchte die fixe Breite des Layouts demnächst aufheben und die Seite etwas mehr Responsive machen. Spätestens dann wird es nötig das sich die Bilder Clientseitig automatisch an einen geänderten Viewport anpassen. Momentan empfinde ich es auch als weniger schlimm das die Bilder nach dem Laden der Seite alle an die richtige Position fliegen. Ich möchte viel eher die Ladezeit reduzieren bis alle Bilder geladen sind. Momentan sind es 100 pro Seite. ich denke wenn man das etwas reduziert und vor allen die großen Bilder passender skaliert (Momentan werden die mit 950x534 geladen was für die angezeigte größe zu viel ist) sollte das performanter werden hoffe ich ;)

EDIT2:

@Sacaldur: Habe noch einmal drüber nachgedacht: Das Serverseitig zu berechnen um das HTML schon so zu erzeugen das die Bilder, bzw. Platzhalter sofort an der richtige Stelle erscheinen schließt ja nicht aus das es per JavaScript Clientseitig weiter nachjustiert wird wenn der ViewPort des Browsers sich ändert. Ich denke das hattest du auch so gemeint ;) Ja das ginge natürlich. Nur viel arbeit da ich im Prinzip die Arbeit die mir Masonry momentan abnimmt Serverseitig selbst noch einmal Umsetzen müsste ;)

grüße,
krazun
https://pewn.de - Eine Plattform für Hobby-/Indiespieleprogrammierer und Gamer

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »krazun« (22.05.2015, 09:33)


MitgliedXYZ

Alter Hase

Beiträge: 1 369

Wohnort: Bayern

  • Private Nachricht senden

193

22.05.2015, 10:49

Die neue Ansicht hast du ziemlich schnell umgesetzt. Bei mir werden allerdings die meisten Bilder einfach nur untereinander angezeigt, vielleicht solltest du die Bilder noch kleiner machen.
Eine Ansicht in diesem Design, mit dem der Text erscheint sobald der Cursor über den Bildern, ist wäre toll.

Wieso skaliert der Server die Bilder bei jedem Aufruf neu? Schneller wäre es doch, wenn diese schon in der richtigen Größe am Server vorhanden sind.

194

22.05.2015, 11:18

Vielleicht mal die Seite aktualisieren. Hört sich nach einem CSS-Cache-Problem an. Nach einmal F5 sollten da eigentlich nichts mehr einfach nur untereinander angezeigt werden hoffe ich.

Das Design von dem Link gefällt mir. Schön schlicht und trotzdem schick!

Die Bilder werden auch Serverseitig im Cache vorgehalten. Allerdings werden die Bilder ja mit einer definierten Größe abgerufen. Wenn ich eine Anfrage an das Image-Servlet Stelle muss ich ihm ja sagen wie groß das Bild sein soll was ich haben möchte. Meistens weiß ich Pixelgenau welche Größe ich benötige und frage das entsprechende Bild ab. Dieses wird dann aus dem Server-Cache geladen wenn es dort ist oder neu erzeugt und dann mit der Auflösung für das nächste mal in den Cache geladen.

Die Bilder in diesem Grid haben allerdings alle keine festen Größen sondern nur Prozentwerte. Wenn ich die feste Breite aus der Seite nehmen würde, könnte man beim ändern der Größe des Browserfensters sehen wie sie von 50x30px bis 1920*1080px skalieren könnten (nur als Beispiel, hängt natürlich von Browserfenster/Deskto Auflösung ab).

Momentan werden die Bilder mit 950x534 (Die mit höherem Rating) und 480x270 (Kleineres Rating) abgerufen, obwohl die durchschnittliche Bildergröße in diesem auf 1000px eingeschränktem Layout 400x250, bzw. 200x125 ist. D.h. es sollte beim initialen Laden, wenn noch kein Bild im lokalen Browsercache ist einiges bringen die Größen noch mal zu reduzieren. Momentan sind sie ja fast doppelt so groß wie sie sein müssten.

Und wenn die Layout Grenzen fallen muss ich eh auf HTML5 <picture> und srcset umsteigen. Dann wird dynamisch je nach benötigter Größe in definierten Bereichen ein neues Bild vom Server geladen.
https://pewn.de - Eine Plattform für Hobby-/Indiespieleprogrammierer und Gamer

MitgliedXYZ

Alter Hase

Beiträge: 1 369

Wohnort: Bayern

  • Private Nachricht senden

195

22.05.2015, 18:35

Wäre es nicht trotzdem besser, wenn der Server nur eine Standardgröße versendet und dann eben auf kleineren Displays weniger Bilder nebeneinander angezeigt werden, auf größeren Monitoren dann mehr. Die Auflösung jedes einzelnen Bildes könnte doch dann auf jedem Client gleich sein und du sparst dir Speicherplatz und Rechenleistung.
Oder ist das neu skalieren von Bildern bei jeder Anfrage, je nach Anforderungen des Clienten mittlerweile so üblich?

Hab die Seite mal auf meinem Laptop aufgerufen, da werden die Bilder nebeneinander angezeigt. War wohl wirklich ein Browser-Cache-Problem.

Maggot

Frischling

Beiträge: 51

Wohnort: Wien

Beruf: Software Entwickler

  • Private Nachricht senden

196

22.05.2015, 23:28

Hallo. Wird es auch einmal eine Mobileoptimierte Seite geben?

Und einen Vorschlag habe ich auch noch: Wie wäre es wenn man bei seinem Projekt angeben kann in welcher Sprache (z.B.: Englisch Ton, Deutscher Untertitel, etc...) es ist.

197

23.05.2015, 17:37

Zitat

Wäre es nicht trotzdem besser, wenn der Server nur eine Standardgröße versendet und dann eben auf kleineren Displays weniger Bilder nebeneinander angezeigt werden, auf größeren Monitoren dann mehr. Die Auflösung jedes einzelnen Bildes könnte doch dann auf jedem Client gleich sein und du sparst dir Speicherplatz und Rechenleistung.


Natürlich könnte man auch alle Bilder gleich groß darstellen. Dann weiß man natürlich vorher schon das man nur eine Größe braucht. Wäre alles dann etwas geordneter, einfacher und strukturierter als jetzt. Werde ich auch mal testen und schauen was besser aussieht.

Zitat

Oder ist das neu skalieren von Bildern bei jeder Anfrage, je nach Anforderungen des Clienten mittlerweile so üblich?


Wenn man mit einem fixen Layout arbeitet weiß man meistens genau wie groß ein Bild an einer bestimmten Stelle sein muss. Beim Responsive Design aber ist es schon üblich das Bilder nicht nur in einer Auflösung vorgehalten werden, weil man dann ja das Browserfenster von 300px Breite bis 4000px Breite vergrößern kann und die Seite passt sich an. Bei 300px wäre es unnötiger Datenverkehr ein Full-HD Bild zu laden und dann nur 300px Breit anzuzeigen. Bei 4000px würde ein 300px Breites Bild natürlich furchtbar aussehen. Also lädt man in definierten Bereichen bestimmte Bilder, so das immer das perfekte Bild, passend zur aktuellen Seitengröße geladen wird. Vor HTML5 oder als Fallback nutzt man dafür JavaScript Bibliotheken. Seit HTML5 wird das von HTML unterstützt. (picture und srcset)

Bei Bildern die von Usern hochgeladen werden funktioniert das allerdings nur so halb. Wenn ein Bild im Original nur in kleiner Auflösung vorliegt bringt natürlich auch hochskalieren nix. Allerdings spart das verkleinern natürlich, besonders auf Smartphones, wertvolles Datenvolumen.


Zitat

Hallo. Wird es auch einmal eine Mobileoptimierte Seite geben?

Und einen Vorschlag habe ich auch noch: Wie wäre es wenn man bei seinem Projekt angeben kann in welcher Sprache (z.B.: Englisch Ton, Deutscher Untertitel, etc...) es ist.


Definitiv! Optimierung für Smartphones ist auf jeden Fall geplant und wird irgendwann kommen. Auch die Anzeige der Sprache/Ton etc. steht schon auf der ToDo-Liste. Werde mich da an der Oberfläche-Ton-Untertitel Tabelle von Steam orientieren.



@Bambi: Werde den Bilder Upload noch einmal durchtesten, besonders was das hochladen von Bildern mit gleichen Namen angeht um dieses Duplizieren zu fixen, danke fürs Melden!

Aktuell sieht das bei dem Spiel für mich aber gut aus. Alle Bilder werden richtig angezeigt. Wobei ich nicht weiß ob das jetzt die Bildern sind die du oben haben willst. Allerdings scheint es auch ein bisschen ein Browser-Caching Problem zu sein. Als ich auf das Profil gegangen bin und F5 gedrückt habe wurden einige Bilder gegen neue aktualisiert, weil erst die alten ausm Browsercache angezeigt wurden. Wahrscheinlich wegen dem gleichen Namen. Werde da noch mal das Caching-System anpassen. Man kann anhand der Zeit der letzten Modifikation eines Bildes prüfen ob es aktualisiert wurde und dann den Browser anweisen es neu zu laden, das fehlt teilweise noch.

Aber einmal auf dem Profil die Seite zu aktualisieren sollte bewirken das die neuen Bilder richtig angezeigt werden. Alternativ passiert das nach einer gewissen Weile auch automatisch.

viele Grüße,
krazun
https://pewn.de - Eine Plattform für Hobby-/Indiespieleprogrammierer und Gamer

GlowDragon

Frischling

Beiträge: 66

Wohnort: Bayern

Beruf: Informatikstudent

  • Private Nachricht senden

198

24.05.2015, 11:52

@Bambi: Je nach Browser gibt es eine Tastenkombination, um die aktuelle Seite mit allen Ressourcen komplett neuzuladen, also ohne auf den Cache zurückzugreifen. In den gängigen Browsern wäre es Strg + F5.

199

10.07.2015, 02:20

Moin zusammen,

heute mal einen kleinen Teaser auf die Übersichtsseite des Indie-Szene-News Bereich, der demnächst kommen wird:

Das aktuelle Konzept der Übersichtsseite gibt es hier

Tipp: Falls Ihr nur eine Text-Wand ohne Grafiken seht einmal F5 drücken, dann müssen die neuen CSS Dateien in den Browsercache gezwungen werden ;)

viele Grüße,
krazun
https://pewn.de - Eine Plattform für Hobby-/Indiespieleprogrammierer und Gamer

200

22.07.2015, 01:44

Heyho,

Ich habe grade ein Update aufgespielt und unter anderem wurde die Darstellung der Thumbnails überall auf der Seite überarbeitet. Anstatt die Bilder so zu skalieren das sie immer komplett dargestellt werden, werden sie nun so skaliert das sie den verfügbaren Platz komplett ausfüllen, unter Beibehaltung des originalen Seitenverhältnisses. Dies führt natürlich dazu das die Bilder auch mal etwas abgeschnitten werden müssen. Dafür sieht alles meiner Meinung nach nun viel aufgeräumter und ordentlicher aus und nicht mehr so chaotisch ;)

Desweiteren gibt es nun keine Slideshow in den Thumbnails mehr, sondern es wird bei jeden Seitenaufruf eines der einem Spiel zugeordneten Bilder zufällig ausgewählt. So wird pro Seitenaufruf und Spiel nur noch ein Bild geladen anstatt 5-10 pro Spiel oder mehr.

Findet Ihr die neue Darstellung auch brauchbar oder fandet ihr es besser wie es vorher war?

Außerdem wurde das Nachrichten-System komplett modernisiert. Anstatt der Tabellen und E-Mail ähnlichen Nachrichten gibt es jetzt ein Konversations-System wie man es aus Messengern kennt.

viele Grüße,
krazun
https://pewn.de - Eine Plattform für Hobby-/Indiespieleprogrammierer und Gamer

Werbeanzeige