01Przegląd projektu
ostohlo.com jest własną stroną studia i znajduje się na tej liście z tego samego powodu co inne: została zaprojektowana, zbudowana i jest utrzymywana w sposób, w jaki budujemy dla klientów. Strony żyją w bazie danych i są renderowane przez nasz własny silnik; szablony pozostają w plikach; interfejs to system projektowania napisany od podstaw, a nie motyw kupiony gdzie indziej.
To również jest produkt roboczy, a nie wizytówka. Są darmowe narzędzia, które nie wymagają rejestracji, szacownik projektu, program partnerski na trzech poziomach z własnym panelem, oraz blog, który sam się zapełnia z naszej platformy w trzech językach.
02Dlaczego strona studia jest trudna
Strona studia nie ma właściciela, który narzeka. Jest pisana pomiędzy projektami klientów, a każdy skrót w niej przetrwa przez lata: język, który został w tyle, strona, której nikt nie odważy się edytować, ponieważ jest napisana ręcznie w HTML, galeria prac, która przestała pasować do wykonanej pracy.
Mieliśmy dokładnie taką historię. Strona zaczęła jako statyczne pliki, a pierwsza migracja do bazy danych pokazała jej koszt: porównując widoczny tekst, wszystko wydawało się pasować, podczas gdy setki stron cicho straciły swój zestaw stylów. Od tego czasu zasada tutaj jest taka, że zmiana jest udowodniona przez pomiar, a nie przez to, że strona wygląda dobrze.
03Cele projektu
- treść w bazie danych i szablony w plikach, więc zmiana tekstu nie wymaga dewelopera;
- trzy języki, które nigdy się nie rozdzielają: klucz dodany do jednego jest dodawany do wszystkich trzech w tym samym zadaniu;
- system projektowy własny — ruch, sceny WebGL i typografia, które należą do tej marki;
- narzędzia, które są naprawdę użyteczne i naprawdę darmowe, bez niczego przechowywanego po stronie serwera;
- program partnerski z rzeczywistymi danymi w panelu, a nie obietnicą na stronie docelowej;
- mierzalna jakość: układ do 320 px, czyste dane strukturalne, brak uszkodzonych linków.
04Silnik: strony w bazie danych
Każda strona — usługa, studium przypadku, artykuł, tekst prawny — to wiersz: ścieżka, język, tytuł, opis, treść, dane strukturalne, flagi publikacji. Jeden punkt wejścia renderuje go z szablonem wybranym według rodzaju, a wspólna nagłówek i stopka pochodzą z plików, które pisze generator, więc wygląd trzystu stron zmienia się w jednym miejscu.
Subtelność tkwi w systemie plików, a nie w kodzie: serwer WWW wydaje każdy plik, który istnieje na dysku, a dopiero potem przechodzi do aplikacji. Umieszczenie pliku o nazwie starej strony w katalogu publicznym cicho wyłączy tę stronę z bazy danych — co jest dokładnie takim rodzajem awarii, która nie pozostawia żadnego błędu nigdzie.
05Trzy języki, angielski jako główny
Angielski znajduje się w katalogu głównym, rosyjski pod /ru/, ukraiński pod /uk/. Język, który znajduje się w katalogu głównym, jest zapisany dokładnie w jednym miejscu w kodzie, a front-end zna ten sam fakt z jednej stałej — sprawdzenie porównuje je, ponieważ dwa odpowiedzi na to pytanie to sposób, w jaki powstają półprzetłumaczone strony.
Interfejsy są słownikiem z pakietami dla każdego języka, a zasada jest absolutna: klucz dodany do jednego języka jest dodawany do wszystkich trzech w tym samym zadaniu. Brakujący klucz nie generuje błędu, pokazuje niewłaściwy język czytelnikowi — najdroższy rodzaj ciszy.
06Własny system projektowania
Aktualny interfejs to czwarta generacja tej strony, napisana od podstaw: tokeny, typografia, komponenty, ruch i zestaw scen WebGL, które znajdują się za blokami głównymi. Źródła żyją w jednym miejscu i są kompilowane do haszowanych pakietów; ręczna edycja skompilowanego pliku po prostu zniknie przy następnym budowaniu, więc nie ma o co się spierać.
Ruch jest zawsze włączony — brak bramy redukcji ruchu — co jest świadomą decyzją właściciela, a wiąże się z obowiązkiem: wszystko musi być nadal czytelne i dostępne przy 320 px, a każda animacja pojawiania się musi faktycznie się zakończyć. Oba te aspekty są sprawdzane przez sondę, która przewija stronę dwa razy i czeka na ujawnienie, ponieważ blok, który nigdy się nie pojawia, jest niewidoczny dla zrzutu ekranu zrobionego zbyt wcześnie.
07Darmowe narzędzia, które nic nie przechowują
Siedem małych narzędzi: generator haseł i sprawdzanie wycieków, generator QR, budowniczy UTM, twórca slugów, licznik znaków i sprawdzacz telefonów. Brak rejestracji, brak konta, a — to, co ma znaczenie — brak przechowywania po stronie serwera. To, co narzędzie zapamiętuje, zapamiętuje w przeglądarce odwiedzającego, a tylko ustawienia, nigdy treść.
Sprawdzanie wycieków to najjaśniejszy przykład: nigdy nie wysyła hasła. Tylko krótki prefiks jego hasha opuszcza przeglądarkę, a odpowiedź jest składana lokalnie, co stanowi różnicę między użytecznym narzędziem a pięknie zaprojektowanym sposobem zbierania haseł.
08Program partnerski z prawdziwym panelem
Trzy poziomy poleceń: partner zarabia na klientach, których przyprowadza, na partnerach, których przyprowadzają ci klienci, oraz na poziomie poniżej tego. Panel pokazuje, co się naprawdę wydarzyło — kliknięcia według kampanii, rejestracje, naliczenia — i jest dostępny za pomocą linku z tokenem, a nie hasła, którego nikt by nie zapamiętał.
Token jest usuwany z adresu przed wysłaniem pierwszego żądania, żądania nie zawierają żadnych poświadczeń ani referenta, a tryb demonstracyjny nigdy nie dotyka serwera. Kabinet partnera to miejsce, w którym pokazane są pieniądze; nie powinno to być miejsce, w którym link wycieka konto.
09Blog, który się sam wypełnia
Artykuły przychodzą z Astrina — naszej własnej platformy — przez podpisany punkt końcowy: jeden materiał, trzy wersje językowe, każda ląduje w swoim własnym drzewie językowym z wzajemnymi alternatywami. Obrazy są pobierane i przechowywane lokalnie, a nie linkowane na gorąco, a karta indeksu bloga dla tego artykułu jest pisana w tym samym przejściu.
Automatyzacja tego typu to miejsce, w którym dochodzi do cichych szkód, więc przyjęcie normalizuje to, co otrzymuje: linki wewnętrzne są przepisywane na język artykułu, a linki pozostawione jako surowy markdown są przekształcane w prawdziwe. Zasada jest prosta — czytelnik wersji rosyjskiej nigdy nie powinien być wysyłany na stronę angielską za pomocą linku, który wygląda dobrze w źródle.
10SEO, GEO i czytniki maszynowe
Każda strona ma jeden tytuł, jeden opis, kanoniczny adres, wzajemne alternatywy dla wszystkich trzech języków oraz domyślny, Open Graph i dane strukturalne — a wszystko to jest drukowane z jednego miejsca, ponieważ strony, które są odpowiedzialne za swoje własne meta tagi, to strony, które je zapominają.
Dla czytników maszynowych istnieje plik podsumowujący, który wymienia sekcje, produkty i języki, zebrane z bazy danych, a nie napisane ręcznie: wersja ręczna przez miesiące podawała błędną liczbę produktów. Mapy witryn — strony i obrazy — są odbudowywane co noc, a wszystko, co się zmieniło, jest ogłaszane wyszukiwarkom w tym samym cyklu.
11Formularze, poczta i świat zewnętrzny
Krótki formularz to jedyne miejsce na stronie, gdzie zaczyna się pieniądz, więc jest to najbardziej strzeżone miejsce: metoda listy dozwolonych, pułapka na miód, limity stawki na adres i globalne, kontrole rozmiaru na każdym polu oraz załącznik, który jest akceptowany na podstawie rzeczywistego typu zawartości, a nie nazwy. Żądanie jest zapisywane w bazie danych zanim cokolwiek zostanie wysłane, ponieważ zagubiony list nie może oznaczać zagubionego klienta.
Wszystko, co strona wysyła na zewnątrz — maile, powiadomienia, zewnętrzne połączenia — przechodzi przez proxy i zamyka się, jeśli to proxy jest niedostępne. Adres serwera nie dociera do osób trzecich, a listy są wysyłane z skrzynki pocztowej, którą rzeczywiście autoryzują rekordy domeny.
12Stos technologiczny
- PHP 8.4 i MariaDB: strony w bazie danych, szablony w plikach, jeden punkt wejścia;
- system projektowania stworzony przez nas — tokeny, komponenty, ruch, sceny WebGL, skompilowane w haszowane pakiety;
- trzy języki z pakietami słowników dla każdego języka i kontrolą parytetu;
- darmowe narzędzia pisane w przeglądarce, bez niczego przechowywanego po stronie serwera;
- silnik partnerski z trzema poziomami poleceń i pulpit nawigacyjny oparty na tokenach;
- podpisany formularz przyjęcia artykułów z Astrina, nasze własne analizy, nasza własna sieć reklamowa tylko w blogu.
13Wynik
Strona, na której zmiana tekstu to edycja w panelu, a nie wdrożenie; gdzie trzy języki pozostają na tym samym poziomie, ponieważ zasada jest egzekwowana w tym samym zadaniu; gdzie sekcja robocza jest generowana z jednego rejestru, więc dodanie przypadku nie może pozostawić połowy strony z przestarzałym wynikiem.
I strona, która jest mierzona jak projekt klienta: każdy opublikowany adres odpowiada, wewnętrzne linki bez przekierowań lub błędów, jeden tytuł i jeden opis na stronę, obrazy zadeklarowane w swoim własnym mapie witryny, a układ sprawdzany do 320 px we wszystkich trzech językach.
14Wnioski
Robienie własnej strony na standardzie, który sprzedajesz, jest niewygodne, i o to chodzi: każdy skrót, który byś tutaj wziął, to taki, który możesz wziąć dla klienta. Nasza nauczyła nas trzech rzeczy.Umieść treść tam, gdzie mogą ją osiągnąć osoby, które ją piszą. Uczyń języki zasadą, a nie intencją — cokolwiek innego dryfuje w ciągu miesiąca. Udowodnij zmiany za pomocą pomiarów: ta strona kiedyś przeszła wizualne porównanie, podczas gdy setki jej stron straciły swoje style.
Jeśli chcesz strony, która jest produktem, a nie broszurą — z narzędziami, panelem sterowania, kilkoma językami i interfejsem, który należy do Ciebie — to dokładnie tym się zajmujemy.
