Wenn Sie zu
Postcrossing gehen, erkennen Sie, wie viele Leute für eine einfache Idee verrückt werden können. Es war die faszinierende Einfachheit der Idee, die zum Hauptgrund wurde, warum ich die Implementierung einer bestimmten Kreuzung mit meinen
Damen und bevorzugten Objekten des Austauschs und zusätzlicher Funktionalität aufnahm.
Idee
Es war Januar 2017. Einmal erwähnte eine Person in einem Gespräch mit mir, dass sie die Idee des Austauschs von
Kugeln (die sogenannten „Freundschaftsbänder“) nach dem Prinzip des Postcrossing verwirklichen möchte: Der Benutzer besucht die Website, drückt den Knopf und erhält die Adresse, an die er die Kugel senden muss Danach beginnt er selbst, Kugeln von anderen Benutzern als Antwort zu erhalten (und so weiter im Kreis). Es ist wünschenswert, dass der Austausch zwischen verschiedenen Ländern möglich ist.
Dann hatte ich bereits ungefähr 5 Jahre Erfahrung in der Entwicklung von Webanwendungen in Java und ein bisschen in PHP. Als sie die Funktionalität beschrieben, die erforderlich ist, damit die gewünschte Frequenzweiche funktioniert, dachte ich daran, meine alten Arbeiten in PHP zu verwenden und ein Projekt in etwa zwei Wochen oder maximal in einem Monat zu erstellen. Aber wie so oft waren meine Schätzungen zu optimistisch. Bereits beim erneuten Lesen des Quellcodes meiner Template-Engine in PHP hatte ich
Angst vor dem, was ich
geschrieben habe . Mir wurde klar, dass diese alten
Handarbeiten der Universität
sofort gesendet werden müssen, zumindest eine gute Optimierung.
Je mehr ich mich in meine alten PHP-Quellen vertiefte, desto mehr wurde mir klar, dass mich mit diesem Kenntnisstand dieser Sprache und dem Stand der Quellen selbst dieses kleine Projekt verletzen wird. Aus diesem Grund habe ich mich immer noch für das Spring Framework entschieden, das für mich im Laufe der Jahre der Arbeit mit dem Java Web zu einem warmen und weichen Moos geworden ist. Ich wollte dies zunächst nicht tun, da der Plan scheinbar klein war. Natürlich habe ich mich geirrt, daher hat die Entscheidung, die vertraute Java-Sprache zu verwenden, einen potenziellen Schmerz zu einem späteren Vergnügen gemacht.
Design
Da die Idee nicht meine war, habe ich den Autor der Idee während des Designprozesses oft gewichst, um sicherzugehen, dass meine Vision des Projekts der Idee des Autors entspricht. Während langwieriger Diskussionen wurde ich von dem Projekt inspiriert und begann bereits, verschiedene praktische und nützliche Brötchen für Benutzer und Administratoren vorzustellen. Dem Design wurde gebührende Aufmerksamkeit geschenkt: Wir diskutierten jedes Detail der Funktionalität, zeichneten Layouts für fast alle Seiten und führten eine Dokumentation, in der die Logik der Anwendung und die Benutzerfunktionalität beschrieben wurden.
Layouts und Dokumentationen werden ständig weiterentwickelt, mit Details und neuen Funktionen bewachsen. In der Folge wurden die Layouts zu einem der Dinge, die zeigten, wie falsch ich bei der Beurteilung der Komplexität des Projekts war.
Beispiel für die Entwicklung des Seitenlayouts des UnterrichtseditorsNatürlich bin ich selbst für die spätere Komplikation der Funktionalität verantwortlich, wodurch sich die Entwicklungszeit verlängert. Ich wollte jedoch nicht, dass eine andere
Regierung im Internet erscheint
, von der es Tausende von Websites
mit schlechter Qualität gibt. Ich wollte die Website für Benutzer sowohl in Bezug auf Benutzerfreundlichkeit als auch visuell angenehm gestalten. Darüber hinaus erlaubte mir der Perfektionismus in mir einfach nicht, die Methode „Herak-Herak - und in der Produktion“ anzuwenden. Aus diesem Grund haben wir sogar Seitenlayouts mit Sorgfalt ausgearbeitet (und Sie werden sehen, dass dies weit von der Grenze der Verwirrung über die Ausarbeitung von Details entfernt war).
Seitenlayout der BenutzerprofileinstellungenNachdem ich die optionale Funktionalität erreicht hatte, die ich dann alleine verwenden wollte, begann ich, Modelle von Hand auf ein Grafiktablett zu zeichnen.
Das Layout der Seite "Benutzer" im Admin-BereichWährend des Designprozesses haben wir versucht, das System so zu überdenken, dass wir nach dem Start nur noch minimal am Leben der Site beteiligt waren. Wir wollten den von den Benutzern auf der Website veröffentlichten Inhalt wirklich nicht moderieren und vor allem Moderatoren einstellen. Wir wollten, dass die Community entscheidet, welche Lektion veröffentlicht werden soll, welche Spielerei von der Öffentlichkeit ferngehalten werden soll, welcher Benutzer für ein obszönes Profil oder Kommentare gesperrt werden soll. Natürlich war es nicht möglich, dies vollständig loszuwerden, aber am Ende haben wir es geschafft, uns zumindest von der möglichen Routine zu entladen.
Am Ende der Entwurfsphase stellte ich fest, dass wir mindestens sechs Monate lang arbeiteten. Zusätzlich zu der Möglichkeit, Kugeln auszutauschen, haben wir beschlossen, die Möglichkeit hinzuzufügen, Artikel über das Weben von Kugeln (und später über Handarbeiten im Allgemeinen) zu schreiben und diese Artikel von der Community selbst zu überprüfen (später stellte sich heraus, dass diese Funktion noch schwieriger und langwieriger zu implementieren ist als das Austauschsystem). . Aber im Allgemeinen gefiel mir, wie es "auf Papier" funktionierte, und ich sah mir Modelle an, also begann ich mit der Implementierung und beschloss, es zu Ende zu bringen.
Nach unserer Vorstellung sollte die Anwendung daher die folgenden
grundlegenden Funktionen haben :
- Registrierung auf der Website und Kontoeinrichtung;
- Organisation des Spielaustauschs mit Menschen auf der ganzen Welt;
- Schreiben von Lektionen, Überprüfen und Genehmigen der Site-Community;
- Seiten mit einer bestimmten Lektion und einer Spielerei;
- Seiten mit einer Liste von Lektionen und Kugeln;
- Kommentieren von Lektionen und Kugeln;
- Ereignisbenachrichtigungssystem;
- System von Beschwerden, Verboten und Quoten;
- Chat zwischen Benutzern;
- Standortstatistik;
- admin.
Darüber hinaus sollte sich die Site zunächst an ein
internationales Publikum richten : Der Austausch kann auf der ganzen Welt durchgeführt werden, der Unterricht kann in jeder Sprache verfasst werden und die Site kann in jeder Sprache lokalisiert werden (natürlich, wenn es Übersetzer gibt, die dies tun möchten; später ich hat sogar eine kleine Anwendung geschrieben, mit der Sie die Site bequem in eine Carrier-Sprache übersetzen können).
Es wurde beschlossen, eine Website mit
minimalen finanziellen Investitionen zu erstellen: keine Käufe oder Abonnements von Diensten Dritter, keine Investitionen in Werbung, Einstellung von Übersetzern und Bezahlung eines SSL-Zertifikats. Wir durften nur einen
Domainnamen und
VDS ausgeben. Und ein bisschen Zahnseide, aber dazu später mehr.
In Erwartung der zukünftigen Freude an der Entwicklung des Projekts ging ich direkt zur Implementierungsphase über. Und ich habe mich entschieden, Vollzeit zu arbeiten (ja, das passiert auch bei nichtkommerziellen Projekten).
Implementierung
In meinem Zwei-Personen-Team war ich der einzige Programmierer, daher wird der größte Teil der Implementierungserzählung in meinem Namen sein.
Als erstes habe ich ein Datenbankmodell entworfen. Nach den ersten Iterationen bekam ich ungefähr 30 Tabellen. In der endgültigen Version gab es bereits 43 von ihnen. Als ORM entschied ich mich für den Ruhezustand, da ich eine kleine, aber recht angenehme Erfahrung damit hatte. Ich habe MySQL als Basis gewählt.
Datenbankmodell, Ansicht aus der FerneGanz am Anfang habe ich darüber nachgedacht, wie ich die Datenbank mit Rohdaten füllen würde. Und diese Daten waren ziemlich viel: Sprachen, Länder, statische Inhalte, Unterrichtskategorien und vieles mehr. Ich wollte die Daten nicht im SQL-Format speichern und noch mehr unterstützen, deshalb habe ich beschlossen, mein System für den Import und Export von Daten in einem CSV-ähnlichen Format zu schreiben. Und in Zukunft habe ich es nicht bereut, da diese Systeme den Entwicklungsprozess mehrmals beschleunigten und es bequem machten, mit Produktionsdaten zu arbeiten. Ich habe das
System Inida genannt (aus "Initial Data", obwohl dieser Name nicht mehr sehr gut geeignet ist).
Mehr über InidaHier ist ein Beispiel für Inida-Daten:
i Country;isocode;name ;by;Belarus ;gb;United Kingdom ;ru;Russia
Die erste Zeile hier ist die Überschrift, die die Operation (i - Einfügen), den Datentyp (Name der Entität in der Datenbank) und die Felder beschreibt. Zeilen, die mit einem Semikolon beginnen, sind die Daten selbst. Wenn der obige Text (Inida-Daten) dem Inida-Importeur zugeführt wird, werden der Datenbank drei Einträge hinzugefügt (in diesem Beispiel drei Länder). Inida-Daten können mehrere Header haben, sodass Sie mit mehreren Datenbankentitäten gleichzeitig arbeiten können.
Inida unterstützt die folgenden Aufzeichnungsvorgänge:
i - einfügen : neuen Datensatz hinzufügen;
u - update : Aktualisiere einen vorhandenen Datensatz (durch Schlüssel, die die Werte der Felder sind, die mit einem "+" gekennzeichnet sind);
m - merge : Im Wesentlichen handelt es sich um Einfügen + Aktualisieren (wenn kein Datensatz mit den angegebenen Schlüsselwerten vorhanden ist, wird er erstellt; andernfalls wird der Datensatz aktualisiert).
d - Löschen :
Löscht Daten für die angegebenen Schlüssel.
Inida hat auch die folgenden Funktionen:
- Konvertierung von Feldwerten durch benutzerdefinierte Transformatoren (z. B. Konvertieren von Daten von einem Format in ein anderes, Dekorieren von Daten, Bereinigen usw.);
- Datensatz-Aliase für die Verwendung dieser Datensätze in nachfolgenden Inida-Daten;
- Batch-Modus : Aktualisieren, Zusammenführen oder Löschen von Datensätzen, die nur einen Teil des Schlüssels erfüllen (im normalen Modus wird eine Ausnahme ausgelöst, wenn Sie versuchen, mehrere Datensätze zu aktualisieren, die denselben Schlüssel gleichzeitig erfüllen).
- Substitutionen (Sie können auch verschachtelt sein ): eine Art analoges Definieren in C ++ (nützlich, wenn eine lange Phrase mehr als einmal verwendet wird);
- Standardwerte (praktisch, wenn Sie denselben Wert eines Felds für eine große Anzahl von Datensätzen duplizieren müssen);
- Unterstützung für Listenwerte (wenn der Feldwert eine Listensammlung ist);
- Unterstützung für Objektfelder (eine Verschachtelungsebene).
Und auch einige andere weniger wichtige, aber auch nützliche Funktionen.
Inida kann auch Daten exportieren. Dies erfolgt durch Schreiben des gleichen Headers, der beim Import verwendet wird, nur ohne Angabe der Operation:
Country;isocode;name
Im obigen Beispiel entlädt der Exporteur alle Länder im Inida-Format. Das Entladevolumen kann begrenzt werden, indem die Schlüsselwerte angegeben werden, die die hochgeladenen Datensätze erfüllen:
Country;isocode=ru;name
Eine der Funktionen der Site ist die Anzeige der Stadt des Benutzers auf der Karte im Profil. Da ich wollte, dass unsere Website in Bezug auf die Abhängigkeit von externen Diensten so autark wie möglich ist, war ich wegen dieser kleinen Funktion ziemlich verwirrt und verbrachte viel Zeit damit, nach Lösungen zu suchen und zusätzliche Anwendungen zu entwickeln.
Suche nach der Implementierung von Funktionen mit KartenErstens war es notwendig, die Karten selbst von irgendwoher zu nehmen, oder vielmehr die Kacheln der Erdkarte mit verschiedenen Detaillierungsgraden (damit die Karte näher gebracht werden konnte). Die Suche führte mich zum ESRI-Kartendienst, der die Kacheln enthielt, die ich im öffentlichen Bereich benötigte. Das Problem war jedoch, dass sie keine Links zu den Kachelarchiven hatten (oder ich konnte sie einfach nicht finden). Jede Kachel kann jedoch über eine URL eines bestimmten Formats heruntergeladen werden. Ich schrieb schnell eine Anwendung, die Kacheln für die erforderliche Anzahl von Detailebenen entlud und sie in den entsprechenden Ordnern auslegte. Ich hatte nur 8 Level (0-7) mit einer Gesamtkapazität von ca. 138 MB.
Zweitens war es notwendig, die heruntergeladenen Karten irgendwie anzuzeigen. Glücklicherweise wurde dieses Problem ganz einfach behoben: Ich habe das
Leaflet JavaScript-Plugin gefunden, mit dem Kartenkacheln unter einer bestimmten URL hervorragend angezeigt werden können.
Drittens war es schließlich notwendig, von irgendwoher Geolokalisierungen (Koordinaten und Namen von Siedlungen) und vorzugsweise in verschiedenen Sprachen zu erhalten. Dieser Teil der Aufgabe war der umfangreichste und schwierigste, da ich es nicht sofort geschafft habe, eine mehr oder weniger vollständige Liste von Siedlungen für verschiedene Länder zu finden. Infolgedessen fand ich immer noch eine solche Liste, aber den Namen, der darin enthalten war, nur in einer Sprache; Ich wollte, dass jedes Land die Möglichkeit bietet, nach Siedlungen in den in diesem Land offiziellen Sprachen (zum Beispiel in Russisch und Weißrussisch für Weißrussland) sowie de facto international (leider ist dies Englisch) und Esperanto (einfach weil) zu suchen Die Idee dieser Sprache gefällt mir sehr gut.
Infolgedessen erschien eine weitere Unteraufgabe: Suche und Erstellung von Listen der Amtssprachen für jedes Land. Glücklicherweise hat jemand diese Informationen bereits vor mir gesammelt, sodass ich sie nur dem Programm zuführen musste, das ich in den folgenden Abschnitten beschreiben werde.
Die Quelle für lokalisierte Community-Namen ist
Nominatim . Da wir keine lokalisierten Namen über einen einzelnen Link erhalten konnten, musste ich dies in zwei Durchgängen tun:
- Informationen über die Siedlung unter Verwendung ihres Namens (in einer zugänglichen Sprache) und ihres Landes anfordern; Diese Informationen kamen im JSON-Format.
- Fordern Sie anhand des Werts des Felds "place_id" aus dem empfangenen JSON eine Seite mit Informationen über das Dorf und seine Namen in verschiedenen Sprachen an (in Form einer regulären Webseite).
Da bei weitem nicht alle HTTP-Anfragen erfolgreich beantwortet wurden (aus verschiedenen Gründen, unter denen eine banale „Internetverbindung unterbrochen wurde“), mussten auch erfolglose Versuche zur Lokalisierung von Siedlungen protokolliert werden, um die nächste Iteration erneut zu versuchen. Eine weitere Schwierigkeit bestand darin, dass Nominatim offiziell verboten war, zu oft zu verwenden.
Um nicht gebannt zu werden, musste ich eine Verzögerung zwischen den Anfragen einführen, wodurch deren Anzahl in einer Sekunde auf das maximal zulässige Maß begrenzt wurde.
Aus diesem Grund habe ich unter Berücksichtigung aller oben genannten Punkte ein Programm geschrieben, das sich mit der Lokalisierung von Siedlungen in den offiziellen Sprachen des Landes befasst, zu dem die lokalisierte Siedlung gehört (sowie in Englisch und Esperanto, wie oben erwähnt). Es war möglich, in 4 Iterationen zu lokalisieren, und das Programm arbeitete tagelang für etwa 1,5 Monate an einem Netbook, das dieser Aufgabe gewidmet war.
Die nächste von mir erfundene Aufgabe war die Erstellung von Flaggensymbolen. Die Probleme betrafen Flaggen sowohl für Länder als auch für Sprachen. Auch nachdem ich ein großes frei verteiltes
Archiv guter Icons in Auflösungen für jeden Geschmack heruntergeladen hatte. Ich musste in Wikipedia nachsehen und Photoshop machen.
Suche nach Symbolen für FlaggenDas erste Problem war, wie einige vielleicht vermutet haben, das banale Fehlen von Flaggen für einige Länder. Tatsache ist, dass ich versucht habe, alle offiziell zugewiesenen Ländercodes von
ISO 3166-1 alpha-2 beizubehalten. Ich fand die Flaggen der Länder, die ich hauptsächlich auf Wikipedia brauchte, und bereitete sie dann in Photoshop in der von mir benötigten Auflösung und mit dem Lautstärkeeffekt vor. Mir fehlten ungefähr ein Dutzend Flaggen, also löste ich diesen Teil der Aufgabe ziemlich schnell.
Die Situation mit Kontrollkästchen für Sprachen erwies sich als komplizierter. Tatsache ist, dass auf vielen Websites gesagt wurde, dass es nicht sehr rational ist, die Flagge für die Sprache zu verwenden, da dies häufig bedeutet, die Sprache mit einem bestimmten Land zu verknüpfen. Welche Flagge sollte zum Beispiel für Englisch sein: Amerikanisch, Britisch oder Australisch? Oder vielleicht Neuseeland? Und für Spanisch: Mexikanisch oder Spanisch? Die Argumente, die Verwendung von Flaggen für Sprachen zu vermeiden, waren für mich überzeugend, aber ich wollte wirklich visuelle Repräsentativität, deshalb habe ich mich trotzdem entschlossen, sie auf unserer Website zu verwenden (wenn auch ein wenig "durch mich selbst").
Die Hauptschwierigkeit war, dass ich nur Flaggen für Länder hatte. Für Sprachen konnte ich sie nicht einfach verwenden, weil sich die ISO-Codes der Länder und die ISO-Codes der ihnen entsprechenden Sprachen (in bestimmten Fällen) im Allgemeinen unterschieden (zum Beispiel: BE - Weißrussisch, BY - Weißrussland; UK - Ukrainisch, UA - Ukraine). Da ich daran denke, dass ich bereits Listen mit Sprachen nach Ländern habe, habe ich beschlossen, ein kleines Programm zu schreiben, das auf der Grundlage dieser Daten Listen mit Ländern nach Sprachen erstellt (dh eine umgekehrte Zuordnung ausgibt).
Nachdem das Programm geschrieben und die Listen der benötigten Sprachen empfangen worden waren, begann ich, Bilder mit Flaggen für Sprachen vorzubereiten (ich benannte die Flaggen einfach in Länder um). Wie im Fall der Länder habe ich im Fall der Sprachen versucht, alle
ISO-639-1 zu unterstützen . Ja, es gab nicht genügend Flaggen für Sprachen, aber diesmal gab es mehrmals mehr Engpässe. Lange Zeit habe ich herausgefunden, welche Sprache in welcher Region verwendet wird, aber als Ergebnis wurde für jede von ihnen eine entsprechende Flagge vorbereitet (oder nicht, ich weiß nicht; zumindest hat sich niemand beschwert).
Einer der Teile der Funktionalität der Website, der die Regulierung durch die Community selbst sicherstellt, ist zu einem System von Beschwerden und Verboten geworden. Benutzer können sich über Profilinformationen (Name, Avatar, Benutzerinformationen), Kommentare, Tipps, eine Postanschrift und hochgeladene Bilder beschweren. Bei einer ausreichenden Anzahl von Beschwerden wird die entsprechende Funktionalität für den beanstandeten Benutzer gesperrt. Die erste Sperre wird nach einer Woche entfernt und die Dauer jeder nachfolgenden Sperre verdoppelt. Einige Sperren (z. B. Benutzername) sind unbefristet. Dies ist einer der Fälle, in denen die Aufmerksamkeit von Administratoren noch erforderlich ist.
Schon während des Designprozesses wurde mir klar, dass Bots auf der Site gesetzt werden können. Natürlich ist ein solches Szenario angesichts der geringen Beliebtheit der Website und ihrer Zielgruppe unwahrscheinlich, aber der Wunsch, alles „in gutem Glauben“ zu tun, setzte sich durch. Um potenziellen Spam vorzubeugen, habe ich ein System von Quoten für Benutzeraktionen eingeführt, die auf die eine oder andere Weise mit der Generierung von Inhalten auf der Website verbunden sind: Kommentieren, Schreiben von Chat-Nachrichten, Schreiben von Lektionen, Anfordern von Adressen, Registrieren von Konten (sowohl von einer IP-Adresse als auch insgesamt pro Tag ) und einige andere.
Eine interessante Aufgabe war die Implementierung einer der Administratorfunktionen, nämlich die Suche nach ähnlichen Adressen. Ich habe den Ansatz in einem der Artikel über Habré entdeckt (leider konnte ich diesen Artikel nicht finden, daher werde ich das Wesentliche des Ansatzes unten kurz beschreiben). Ehrlich gesagt bin ich mit dem Ergebnis der Implementierung dieser Funktionen aufgrund der relativ großen Anzahl von Fehlalarmen nicht sehr zufrieden.
Wie eine ähnliche Adressüberprüfung funktioniertZunächst wird eine Mail-Signatur-Signaturdatenbank gebildet. In diesem Fall ist eine Signatur eine Liste von Zeichen und die Anzahl der Vorkommen jedes Zeichens. Es wird so gemacht:
0) Nehmen Sie die Postanschrift in Form eines Textes;
1) Wir entfernen unnötige Informationen aus der Adresse (Leerzeichen, Satzzeichen) und übersetzen alle Zeichen in den gleichen Fall.
2) Berechnen Sie die Unterschrift des verbleibenden Textes.
Wenn ein neuer Benutzer registriert ist oder wenn ein bestehender Benutzer eine seiner Adressen ändert (regulär oder transliteriert), wird diese neue (oder aktualisierte) Adresse dem obigen Verfahren unterzogen, wonach die Signaturdifferenz berechnet wird (die Summe der Differenzen zwischen den Nummern der entsprechenden Buchstaben). Wenn der Unterschied unter einem bestimmten Schwellenwert liegt, werden die Adressen als ähnlich angesehen.
Während ich hart an der Serverseite der Anwendung gearbeitet habe, saß mein Co-Autor nicht mit verschränkten Armen da, sondern arbeitete daran, die Site mithilfe der Bootstrap-Bibliothek zu markieren, da er wirklich wollte, dass die Site auch auf mobilen Geräten bequem zu verwenden ist.
Die hier vorbereiteten Seitenlayouts sind sehr nützlich.
Design
Ich mag es nicht, wenn das Markup schwebt, die Site schlecht aussieht und die Skripte nur dann korrekt funktionieren, wenn die vom Benutzer erwarteten Aktionen ausgeführt werden. Auch während der Entwicklung. Aus diesem Grund habe ich immer versucht, die Genauigkeit des Erscheinungsbilds der Website beizubehalten, damit ich gerne damit arbeiten, neue Funktionen in diesem Design sehen und neue Seiten dafür erstellen konnte. Ich erlaubte mir, Zeit damit zu verbringen, Kleinigkeiten zu lecken, obwohl ich wusste, dass sie immer noch nicht in die endgültige Version gelangen. Nur weil die Seite auf eine komplette Neugestaltung wartete.
So sah die Site vor Beginn des Redesigns ausBei der Überlegung, wie die endgültige Version der Website aussehen soll, habe ich folgende Faktoren und meine eigenen Wünsche berücksichtigt:
- Das Design sollte zum Thema der Website passen (Kugeln, Handarbeiten).
- Das Design sollte eine warme Röhrenatmosphäre schaffen.
- Das Design sollte die Website verständlich und benutzerfreundlich machen.
Ich habe nicht einmal über die Wahl des Ansatzes für die Gestaltung der Website nachgedacht, da dies für mich eindeutig war: Skeuomorphismus. Die oben genannten Punkte haben mich noch mehr von der Richtigkeit meiner Wahl überzeugt. Ich verstand vollkommen, wie mühsam dieser Ansatz war, aber ich war bereit, Zeit damit zu verbringen, weil ich ein angenehmes Ergebnis für das Auge wollte. Darüber hinaus haben jahrelange Erfahrung in Photoshop diesen Prozess einfacher und stressfreier gemacht.
Warum ich modernes Design hasseDie Entscheidung für ein skeuomorphes Design wurde auch aufgrund meiner Abneigung gegen modernes flaches Design getroffen. Für mich persönlich ist ein skeuomorphes Design eine Referenz in Bezug auf visuelle Klarheit und Repräsentativität. Das Design der Instrumente in
Guitar Rig 5 , viele Plug-Ins für
FL Studio und
Kontakt , das Erscheinungsbild der Benutzeroberfläche im
Hearthstone- Spiel - all dies gefällt mir sehr gut und macht die Kommunikation mit der Anwendung oder dem Spiel sehr angenehm. Ein solches Design lässt keine Fragen darüber offen, wo sich welches Schnittstellenelement befindet und wie es verwendet wird.
Die aktuellen Trends haben Anwendungen und Websites völlig gleich und gesichtslos gemacht. Wenn frühere Webdesigner versucht haben, der Site eine Individualität zu verleihen, sieht jetzt jede zweite Site zu stereotyp aus:
- großes Bild oder sogar Video als Hintergrund;
- abstrakter Slogan in großer Schrift geschrieben;
- zu breite feste Überschriften;
- eine riesige Vollbild-Fußzeile (und manchmal mehr);
- Text in dünnen Schriftarten und sogar grau auf weißem Hintergrund;
- pferdegroße Einrückungen auf der Seite;
- schreiende und völlig inkompatible Farben;
- Seite im Stil von "nach unten scrollen und nicht verstehen, was die Bedeutung der hier beworbenen Dienste ist."
Und natürlich
die Lieben aller- ein Popup-Fenster mit Informationen zu Cookies;
- Popup-Fenster mit Informationen zu Änderungen in der Benutzervereinbarung;
- ein Popup-Fenster, in dem Sie zum Abonnieren aufgefordert werden (und ein ähnliches Popup-Fenster im Browser selbst);
- ganze gelbe Werbeblöcke alle zwei Textabschnitte.
Moderne Websites sind voller schmutziger Tricks, die nutzlose und aufdringliche Inhalte direkt ins Gesicht des Benutzers werfen. Darüber hinaus ist all dies so ekelhaft gerahmt, dass es manchmal schwierig ist, den gewünschten Abschnitt zu finden. Wenn
ich auf solche Websites zugreife,
drücken die Finger instinktiv Strg + W, ich möchte sofort vor ihnen davonlaufen und nie wieder zurückkommen.
Ein weiteres bemerkenswertes Beispiel für mich war das Design von Microsoft Office, das von voluminös (in Version 2010) zu flach (in Version 2013) geändert wurde. Viele Elemente sahen gleich aus (zum Beispiel Eingabefelder und Schaltflächen), was ihre visuelle Wahrnehmung stark beeinträchtigte, da das Gehirn nun härter arbeiten musste, um zu verstehen, wo sich welches Element befand. Im Fall des volumetrischen Designs waren die Elemente leicht zu unterscheiden, was es ermöglichte, sich auf die Arbeit zu konzentrieren, anstatt das richtige Element der Benutzeroberfläche unter Dutzenden derselben Elemente zu finden.
Ich wollte wirklich nicht, dass das von uns entwickelte Projekt wie die überwiegende Mehrheit der modernen Websites aussieht und sowohl beim ersten Aufruf als auch während seiner Nutzung Ekel hervorruft. Anstelle von abstrakten flachen und unbegrenzten Blöcken habe ich das Bild eines echten Desktops einer Person verwendet, die mit Handarbeiten beschäftigt ist. Damit das Site-Design wie ein Stück der realen Welt aussieht, habe ich viel Zeit damit verbracht, nach geeigneten Bildern zu suchen.
Außerdem wurde viel von uns persönlich fotografiert oder gescannt und dann in Photoshop verarbeitet.
Kumihimo und PerlenHier sind einige Beispiele für reale Objekte, die im Design verwendet wurden:
- ein Geschenkband, das um mich herum lag, fungierte als Heder;
- Das Menü ist ein Blatt aus meinem Notizbuch (das ursprünglich in der Schachtel war).
- Die Kopfzeile vor dem Seiteninhalt ist ein Element des Deckblatts zum Lesen elektronischer Bücher.
- ein Popup-Fenster und ein Patch in der Fußzeile - ein Element eines Jeansrucksacks;
- Popup-Taste - Taste mit Shorts;
- Logo auf der Hauptseite - Freihandzeichnung;
- Alle Kugeln und viele Perlen, die vor der Fußzeile und auf der rechten Seite zu sehen sind, stammen ebenfalls aus der realen Welt (einige der Kugeln wurden während der Entwicklung des Projekts gewebt).
Hauptseite
FußzeileWeitere Screenshots
Benutzerprofilseite
Lektionslistenseite
Sprach-Popup Eine der zeitaufwändigsten Aufgaben war die Vorbereitung von Bildern für die Verwendung mit dem CSS-Attribut für Rahmenbilder. Die ganze Schwierigkeit bestand darin, dass bestimmte Teile des Bildes bei Wiederholung nahtlos aussehen sollten. Es ist wie das Zeichnen sich wiederholender (nahtloser) Texturen, nur schwieriger. Die meiste Zeit wurde mit dem Bild verbracht, das für die Gestaltung von Popup-Fenstern (und dem Patch in der Fußzeile) verwendet wurde, da sich die Größe der Elemente, die dieses Bild „gestreckt“ wurde, sowohl vertikal als auch horizontal frei ändern konnte.
Wahrscheinlich wurden wir beim Design mehr als bei allem anderen verwechselt. Darüber hinaus waren sie so verwirrt, dass viele Umgebungselemente (z. B. Perlen und Perlen) und einige Symbole in Blender modelliert und gerendert wurden (etwas wurde sogar in Substance Painter strukturiert). Ja, wegen Symbolen mit einer Größe von 32 x 32 Pixel waren wir so verwirrt.
Ergebnisse rendernWie Designelemente erstellt wurden
Modellieren von Perlen (als Element der Umgebung verwendet)
Modellieren von Perlen (als Element der Umgebung verwendet)
Schaltflächenmodellierung (als Umgebungselement verwendet)
Schlüsselmodellierung (wird als "Administrator" -Symbol verwendet)
Bleistiftmodellierung (wird als Symbol „Lektion bearbeiten“ auf der Schaltfläche verwendet)
Texturieren von Perlen in Substance Painter Ich mochte die Idee von automatisch generierten Benutzeravataren, die ich auf verschiedenen Websites gesehen habe. Ihr Problem war jedoch, dass sie oft eher primitive und einheitliche Muster waren. Die Leute in JIRA sahen interessanter aus, aber immer noch recht einfach und flach, was nicht in unser Design passte. Bis zu dem Moment, als mein Co-Autor mir eine Seite aus einem alten Buch über Vögel in Großbritannien zeigte, fiel mir nichts Wertvolles ein. Und dann wurde mir klar, dass ich eine ausgezeichnete Sammlung fertiger Avatare vor Augen hatte. Ich bat darum, alle Seiten mit den Vögeln zu scannen. Danach saß ich zwei Tage in Photoshop und schnitt diese Vögel in Avatare, wobei ich unterwegs Artefakte aus dem Buchpapier entfernte. Nach der Registrierung erhielt der Benutzer zufällig einen von 267 Avatarok-Vögeln
Nachdem die Arbeit an dem neuen (skeuomorphen) Design abgeschlossen war und wir die Integration in das von meinem Co-Autor erstellte Layout auf Bootstrap abgeschlossen hatten, begann ich, das neue Design zu integrieren. Ich dachte, dass dies das Unangenehmste ist, was ich im Rahmen dieses Projekts mache. Tatsächlich war es nur eine routinemäßige Entwicklungsarbeit, und die Hölle selbst wartete immer noch auf mich.Bereitstellung
Also wurden alle geplanten Funktionen entwickelt, alle kritischen und größeren Probleme wurden beseitigt, das neue Design wurde verschärft, die Website wurde vom Co-Autor ins Englische übersetzt, es ist Zeit, das Projekt auf einem externen Server zu testen. Wir haben beschlossen, das Projekt sofort bereitzustellen, den Zugriff jedoch mit einem Kennwort zu schließen, damit ein zufälliger Gast die verbleibenden Fehler nicht sehen und sich im Voraus über das Projekt informieren kann. Zu Beginn fehlte uns jedoch eine Kleinigkeit - der Name der Site, den wir uns einfach noch nicht ausgedacht haben.Während der Entwicklung habe ich den Namen "Fenker" verwendet, der im Wesentlichen sein Codename war. Ich schlug vor, es als Namen der Site zu verwenden, aber anschließend wurde diese Option verworfen, weil sie zu russisch klang. Lange haben wir uns die Namen angesehen: Fenkexchange, Friendship Pigeon, Flossy Hearts, Silky Hearts, .... Ja, die Namen waren alle zu lang, dann zu russisch. Bis mir die Idee einfiel, das Thema der Website (Freundschaftsbänder) mit einem ihrer Merkmale (Vögel: eine Taube auf dem Logo und Avatar-Vögel) zu kombinieren. Und so stellte sich heraus, dass es sich um einen Vogelfreund handelte - FriendBird.Während der Co-Autor gerade dabei war, einen Domainnamen zu registrieren und einen akzeptablen VDS zu finden, habe ich Debian Linux auf VirtualBox installiert, um die Entwicklung unseres Projekts zu üben. Früher habe ich mit Linux gearbeitet und für einen Zeitraum (ungefähr ein Jahr) nur dieses Betriebssystem verwendet, es aber später aufgegeben, weil es "nicht zusammengewachsen" ist. Infolgedessen bin ich zu Windows zurückgekehrt (hauptsächlich aufgrund des Mangels an leistungsfähiger Software für die Arbeit mit 2D und 3D-Grafik); Danach hatte ich im Rahmen meines Universitätsstudiums auch Erfahrung mit der Einrichtung des Apache-Webservers für Linux. Im Allgemeinen hatte ich bei der Arbeit mit Linux keine ernsthaften Probleme, daher erwartete ich, dass die Bereitstellung eines frisch gebackenen Projekts schnell und einfach sein würde. Aber am Ende wurde diese Aktivität die unangenehmste Sache, die ich im Rahmen dieses Projekts gemacht habe.Die unangenehmste Erfahrung in meinem Leben mit Linux, , — . , , , . , -, , , , . — , , - - Linux. , Windows , . , .
: MariaDB. URL' . MariaDB , MySQL Oracle, . , MySQL Oracle.
. , . - , , . , , -.
SSL-. , , , . ( Let's Encrypt) . , , Tomcat'. , , , . , , - ( fullchain- ( private key) pkcs12, JKS (Java Key Store), Tomcat'). , , , .
, «» — , . , , « », , .
Nach der Rückkehr aus der Unterwelt Nachdem wir unsere schwierige Suche nach einer Webanwendung für Linux abgeschlossen hatten und dasselbe getan hatten, aber bereits auf VDS, suchten wir unter unseren Freunden, Kollegen und Bekannten nach freiwilligen Testern. Nur ein paar Leute waren sich einig, die später nicht aktiv am Testen teilnahmen, also mussten wir unser Projekt selbst testen. Ungefähr zwei Wochen lang haben wir die Funktionalität der Site getestet, Fehler gefunden, die ich in meiner Fehlerliste aufgefüllt und anschließend korrigiert habe. Im Laufe der Zeit blieben nur geringfügige Probleme in der Fehlerliste, deren triviale Lösung mir nicht in den Sinn kam. Die Phase des Testens und Behebens von Fehlern neigte sich dem Ende zu und brachte uns dem feierlichen Moment näher, in dem wir beide so lange waren.Produktion
In der Nacht vom 25. Januar 2018 habe ich alles gelöscht, was wir während des Tests in der Datenbank generiert haben, und den Initialisierungsprozess erneut gestartet. Als der Vorgang abgeschlossen war, entfernte ich das Kennwort für die Site und startete den Webserver neu. Jetzt ist die Seite für die Öffentlichkeit zugänglich.Da der Co-Autor des Projekts selbst einmal mit Handarbeiten beschäftigt war, eine eigene Website zu diesem Thema unterhielt und seine VKontakte-Gruppe verwaltete, hatten wir keine Frage, woher das ursprüngliche Publikum kommen sollte. Die Nachricht wurde in der Gruppe veröffentlicht - und wir haben die ersten registrierten Benutzer gesehen. In den ersten Wochen betrug die Anzahl der Seitenaufrufe mehr als tausend pro Tag. ein wenig, aber auch das haben wir uns gefreut. Vor allem aber freuten wir uns, als die ersten Ergebnisse des Börsenaustauschs auf der Website erschienen, die im Laufe der Zeit immer mehr wurden.Und Benutzer haben keine Lektionen geschrieben. Um sie irgendwie zu erregen, veröffentlichte der Co-Autor als erster die Lektion, woraufhin andere Benutzer begannen, ihre eigene zu veröffentlichen. Vor allem in dieser Hinsicht stachen die Jungs aus der Ukraine heraus, die bereitwillig Unterricht schrieben und ins Ukrainische übersetzten, wofür sie sich besonders bedankten.Der erste Monat der Website sah folgendermaßen aus:- 131 registrierte Benutzer;
- 14 erhaltene Kugeln;
- 15 schriftliche Lektionen (einschließlich Übersetzung von Lektionen in andere Sprachen).
Natürlich gab es während der Produktion Probleme, die ich schnell zu lösen versuchte und die Site ständig aktualisierte. Aber im Laufe der Zeit wurde die Anwendung stabil, woraufhin ich mich nur noch mit Datensicherung befasste. Insgesamt wurden während des Betriebs der Website (vom 25.01.2018 bis zum 08.07.2018 und einschließlich der Testphase) 29 Aktualisierungen vorgenommen. Es gab einige kritische Updates, als ich nachts Fehler behoben und das Update am Morgen angewendet habe.Nicht allen Benutzern gefiel alles auf einmal, aber es fehlte etwas völlig. Bereits während der Produktion wurde eine Seite mit einer Liste von Benutzern, einer Seite mit einem Feedback-Formular und der Möglichkeit, Kugeln nur innerhalb ihres eigenen Landes auszutauschen, hinzugefügt. Nach dem Börsengang der Website engagierte sich der Co-Autor des Projekts in sozialen Netzwerken und sammelte Feedback und Vorschläge. Wir haben versucht, der auf der Website versammelten Community zuzuhören, wodurch einige Fehler behoben und Änderungen an der Funktionalität der Website vorgenommen wurden. Vielen Dank dafür.Das wahrscheinlich größte Problem für die Benutzer der Website war das Herunterladen von Fotos. Um zu vermeiden, dass Bilder mit zu großer Größe, übermäßiger Qualität und einem für unser Markup nicht geeigneten Format geladen werden, legen wir die entsprechenden Einschränkungen fest (minimal und maximal zulässige Dateigröße, Höhe, Breite und Seitenverhältnis). Den Protokollen nach zu urteilen, ist es für Benutzer jedoch oft sehr schwierig, diese Einschränkungen einzuhalten, obwohl bei jedem Versuch, sie herunterzuladen, eine Meldung angezeigt wird, die auf das Problem hinweist. Ich hatte erwartet, dass dies zu einem Problem werden würde, aber ich hatte nicht erwartet, dass das Problem so weit verbreitet sein würde (so dass einige Benutzer schließlich verzerrte oder minderwertige Fotos hochgeladen haben, da das System sie daran hindert, Fotos in normaler Qualität hochzuladen). VielleichtIn Zukunft werde ich nicht faul sein und den Bildtrimmer direkt zur Site hinzufügen, oder ich werde das Bild automatisch auf die gewünschte Größe anpassen.Anwesend
Zum Zeitpunkt des Schreibens dieser Zeilen lebte die Site 5 Monate und 1,5 Wochen, und die Ergebnisse ihrer Arbeit lauten wie folgt:
Statistiken für 2018.07.05Für diesen Zeitraum sind dies natürlich sehr bescheidene Zahlen; Der Zustrom von Benutzern war zu diesem Zeitpunkt stark geschwächt, und die Aktivität des Schreibunterrichts endete so abrupt wie sie begann. Wir freuen uns jedoch, dass der Austausch von Kugeln andauert und nicht russischsprachige Ausländer daran teilnehmen.
Statistiken über die Anzahl der BenutzerIch verstehe sehr gut, dass die Website durch Werbung populärer gemacht werden könnte, aber wie gesagt, eine unserer Aufgaben war es, die minimalen finanziellen Kosten zu halten. Mit dem Start dieses Projekts haben wir nicht auf einen signifikanten Gewinn gehofft (aufgrund seines nichtkommerziellen Charakters und der Spezifität der Zielgruppe). Derzeit deckt der Gewinn aus dem Projekt (Werbung und Spenden) nicht einmal die Kosten für die Wartung (Domainname, VDS und ein Teil unserer Supportzeit). Aber wie einer meiner australischen Freunde sagte, wenn das Projekt mindestens ein paar Menschen glücklich machte, wurden die Bemühungen, es zu entwickeln, nicht verschwendet.Trotz des sehr geringen Interesses der Öffentlichkeit und einiger Mängel der Website selbst (zum Beispiel das Fehlen von CDN und Zwei-Faktor-Authentifizierung) gefällt mir der Verlauf unseres Projekts. Ungefähr ein Jahr lang habe ich großartige Arbeit geleistet, große Freude daran gehabt, eine Vielzahl von Problemen zu lösen und zu versuchen, alles zu tun, was im Rahmen meiner intellektuellen Fähigkeiten lag. Während des Entwicklungsprozesses war ich auch erfreut darüber, dass keine Kunden über mir stehen, die Fristen für den Abschluss des Projekts nicht zu mir passen und der Stil des Schreibens des Codes nicht durch extern auferlegte Vereinbarungen eingeschränkt wird. Die völlige Freiheit der Entscheidungen, die ich treffe, gab der Freude, an diesem Projekt zu arbeiten, einen besonderen Geschmack.