• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Ocena strony internetowej

VPS Starter Arubacloud
0 głosów
382 wizyt
pytanie zadane 2 maja 2019 w HTML i CSS przez Jjjin Użytkownik (850 p.)

Witajcie jakiś miesiąc temu rozpocząłem budowę strony internetowej. Jej treść została skopiowana z książki Patrycji Zarawskiej pot tytułem "Atlas Grzybów". Zdjęcia grzybów zostały wzięte z różnych stron (w głównej mierze ze strony forum.nagrzyby.pl i Wikipedii). Zrobiłem tą stronę, żeby zobaczyć jak się robi duże strony atlasowe (i chciałem sprawdzić działanie usługi ADSense :) ), może atlas nie jest bardzo dużych rozmiarów no ale jakichś jest. Na początku zbudowałem strukturę strony i nie przejmowałem się zbytnio CSS, ale gdy skończyłem robić główną treść strony okazało się, że nie mam pomysłu na jej wygląd. Dlatego proszę o pomysły dla jej wyglądu strona ma adres https://mrmietek.pl/ możecie zobaczyć jej kod, ale uprzedzam, że zabezpieczyłem ją lekko przed kopiowaniem z niej treści (Nie oddam ich bez walki :D). Zabezpieczenia obejmują zablokowanie prawego przycisku myszy i kopiowanie najważniejszego tekstu, więc najlepiej używać skrótów klawiszowych.

Uwaga zdjęcia tej strony są zapisane w formacie .webp którego normalnie nie obsługują inne przeglądarki niż google chrome, ale nie sprawdzałem tego na operze.

 

5 odpowiedzi

+2 głosów
odpowiedź 2 maja 2019 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 2 maja 2019 przez Jjjin
 
Najlepsza

ale uprzedzam, że zabezpieczyłem ją lekko przed kopiowaniem z niej treści (Nie oddam ich bez walki :D)

tu jest cały html: view-source:https://mrmietek.pl/

a tu CSS, nawet bez minifikacji: https://mrmietek.pl/style.css

to by było tyle jeśli chodzi o zabezpieczanie danych w sieci :) Pamiętaj, że aby zobaczyć stronę user musi ją pobrać do siebie i w response http przesyłasz cały html i css, więc o jakim ukrywaniu mówimy :)

A co do oceny to moim zdaniem strona ma jedną, olbrzymią wadę - po co od razu ładujesz userowi 100% informacji? Już sama lista tych grzybków powinna być doczytywana wraz ze scrollem ale oki, to jeszcze można wybaczyć, ale już nie jest wybaczalne to, że na starcie ładujesz kontekst wszystkich grzybów... ich opisy... po co?

Załaduj listę, wyświetl ją, a po kliknięciu w jakiś grzyb pok prostu zrób strzał ajaxem i pobierz sobie dane o tym grzybku. W takiej najprostszej postaci to widziałbym to jako wystawienie jakiegoś małego endpointu typu GET, który przyjmowałby np. id grzybka i na tej podstawie z jakieś tabelki po prostu zwracał dane. W takim przypadku wydaje mi się też, że dobrze sprawdziłaby się najprostsza baza np. mongo gdzie od razu posługujesz się ładnie JSONem, a jak dodasz sobie endpoint w node to w ogóle nie musisz uczyć się dodatkowego języka.

Cała strona jaką wyrzucasz do klienta to 13,2mb... chyba nie obrobiłeś w ogóle obrazków :) Warto zawsze spojrzeć w zakładkę network i przebadać co faktycznie wysyłamy do clienta.

komentarz 2 maja 2019 przez Jjjin Użytkownik (850 p.)
Zabezpieczenie w głównej mierze miało chronić przed mniej doświadczonymi użytkownikami internetu, a obrazy skompresowałem do 35 % poprzedniej wielkości zapisując je w formacie .webp. Ogółem strona na początku była robiona w wielu podstronach, a potem wpadłem na pomysł, żeby zrobić ją w popupach. Raczej zoptymalizuje wczytywanie się strony a poza tym jak myślałeś ile może zajmować 210 zdjęć i 210 opisów. Ale tak czy siak dzięki za komentarz warto znać jak najwięcej opinii o stronie, którą się tworzy.

PS na początku strona ważyła ok 35 MB :D
komentarz 2 maja 2019 przez kompowiec2 Mądrala (6,380 p.)
"Zabezpieczenia obejmują zablokowanie prawego przycisku myszy i kopiowanie najważniejszego tekstu, więc najlepiej używać skrótów klawiszowych."
Czy ty jesteś poważny? Implementujesz jakieś zabezpieczenie i mówisz jak je obejść?
1
komentarz 2 maja 2019 przez Tomek Sochacki Ekspert (227,510 p.)

a poza tym jak myślałeś ile może zajmować 210 zdjęć i 210 opisów

dużo, i właśnie dlatego napisałem, że ładowanie klientowi tego wszystkiego od razu jak dla mnie jest dużym błędem :)

Jeśli czujesz, że danych jest za dużo to po prostu serwuj je dynamicznie wtedy, gdy faktycznie są potrzebne. Nie ma tu znaczenia czy robisz to w formie modali czy na osobnych podstronach. Jeśli modale to po prostu zrób strzał ajaxem i pobierz potrzebne dane, jeśli osobne strony to w urlu przekaż np. id grzybka jako path lub query param i na tej podstawie zaserwuj odpowiedni kontekst.

Warto od początku uczyć się dobrych praktyk bo inaczej później ciężko będzie Ci nagle wejść w większą apkę.

Zabezpieczenie w głównej mierze miało chronić przed mniej doświadczonymi użytkownikami internetu

pytanie po co? Na stronie nie ma w sumie nic co trzeba by ukrywać, a tylko w ten sposób zniechęcasz userów do swojej strony. Szczerze to jeszcze ani razu nie spotkałem się z potrzebą blokowania PPM dla usera i raczej wątpię, aby dobry UX designer zgodził się na takie zabiegi...  Pamiętaj, że userzy są przyzwyczajeni do pewnych zachowań w necie, a może ktoś zechce kliknąć sobie PPM żeby wydrukować opis grzybka, a tu zonk... jeśli nie masz faktycznie sensownego powodu to nie blokuj takich rzeczy, a uwierz mi, powód jaki podałeś nie ma żadnego sensu :)

komentarz 2 maja 2019 przez Jjjin Użytkownik (850 p.)
Widzisz ja nie mam żadnych praw do opisów grzybków na stronie, ale przepisanie tego było bardzo czasochłonne i może faktycznie blokowanie prawego przycisku myszy jest głupie i raczej to poprawie, ale najważniejszym jest to żeby nie można było tak po prostu skopiować tej treści wolę, żeby ludzie po prostu korzystali z tej strony. Po za tym ufam użytkownikom tego forum, bo oni przecież mają ją ocenić i powiedzieć jej wady (jak na przykład ty).

PS zawsze musi być ten pierwszy raz, żeby zobaczyć stronę na której są ustawione (słabe) blokady treści :D Nie mniej dzięki za rady.
1
komentarz 2 maja 2019 przez Tomek Sochacki Ekspert (227,510 p.)

wolę, żeby ludzie po prostu korzystali z tej strony

No i ja właśnie o tym mówię :) Uwierz mi, 99% użytkowników internetu w ogóle nie wie co to źródło strony, devtoolsy, css, html itp. itd. Oni po prostu wchodzą na stronę i chcą z niej korzystać. Chcę wydrukować? Toi klikam PPM i... kurde ej no gościu, daj no mi printa :) a jak ktoś będzie się znał i zechce podejrzeć źródło to zrobi to, bo tego nie ukryjesz. Tak naprawdę w wielu aplikacjach w zupełności wystarczy po prostu minifikacja kodu ale to też nie robi się ze względu na ukrywanie co na objętość. Logikę, wymagającą ukrycia po prostu obrabia się server-side.

komentarz 2 maja 2019 przez reaktywny Nałogowiec (40,650 p.)

Chciałem coś napisać, ale @Tomek Sochacki świetnie wszystko opisał.

 

Problemem tej strony jest też kulawy design strony, mało estetyczny, mało nowoczesny jak na dzisiejsze standardy. Możesz być dobrym backendowcem, ale frontend czasami lepiej powierzyć specjalistom (szczególnie sprawy grafiki / UI / UX).

 

komentarz 2 maja 2019 przez Jjjin Użytkownik (850 p.)
Właśnie na tym polega problem zwróciłem się tu, bo nie mam pomysłu na design strony :(
komentarz 2 maja 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Właśnie na tym polega problem zwróciłem się tu, bo nie mam pomysłu na design strony :(

spoko, ja też, ja jestem lewy jeśli chodzi o grafikę, layout itp., mimo, że pracuję jako front-end :) ale nie martw się, od takich spraw są ux designerzy a nie developerzy więc spoko. A co do layoutu to spróbuj się wzorować na innych stronkach, np. pooglądaj sobie https://www.thebestdesigns.com/ i inne tego typu strony, myslę że coś uda Ci się fajnego poskładać.

0 głosów
odpowiedź 2 maja 2019 przez Spectro Użytkownik (620 p.)
szkoda ze żadne odnośniki na górze nie działają
0 głosów
odpowiedź 2 maja 2019 przez Spectro Użytkownik (620 p.)
moja propozycja to zmiana napisów na czarne, tło na zrobione w adobe illustratorze albo innym programie graficznym przedstawiające lasy polany itd a zamiast zielonego tła na górnym pasku to równierz zrobiony w illustratorze obraz gór
komentarz 2 maja 2019 przez Jjjin Użytkownik (850 p.)
Dzięki spróbuje wykorzystać twoją wizje ;) A odnośniki nie działają bo wole najpierw skończyć główną stronę.
0 głosów
odpowiedź 2 maja 2019 przez Akiro Bywalec (2,910 p.)
Nie będę oceniał stylu bo każdy ma inne gusta i każda grupa potencjalnych odbiorców również oczekuje czego innego (mi się osobiście nie podoba).

Mogę się przyczepić do rzeczy technicznych, zaczynając od nava gdzie aż się prosi o inny rodzaj kursora + przyciski nie działają. Strona nie jest zbyt responsywna, przy małych rozmiarach okna tekst się rozlatuje. Przy wejściu na danego grzyba i zmniejszeniu strony to zdjęcie robi się większe niż background, powinieneś je trochę zmniejszyć proporcjonalnie do zmniejszającego się okna.

Na koniec dodam jeszcze, że tekstury bardzo długo się wczytują, prawdopodobnie wrzucasz wszystko jednocześnie przez co przeglądarka dostaje wylewu ;p
komentarz 2 maja 2019 przez Jjjin Użytkownik (850 p.)
Zgadłeś wrzucam wszystko jednocześnie, ale to raczej poprawię. Pro po responsywności na razie nie została dodana, ale myślę że za tydzień już będzie.

PS ja nie skończyłem strony zrobiłem główny content, więc nav nie jest nawet podlinkowany.
0 głosów
odpowiedź 2 maja 2019 przez Danrox Bywalec (2,370 p.)

Jak mam ocenić Twoją stronę jeżeli nie mogę zobaczyć kodu ? ( ͡° ͜ʖ ͡°)

  1. Strona wizualnie nie wygląda ani źle ani dobrze. Średnio według mnie.
  2. Nadajesz nazwy klas oraz id po polsku, a czasami po angielsku. Staraj się nadawać nazwy klas oraz id w języku angielskim.
  3. Klasa typu "bo", "ba" nic nie mówi. Staraj się nadawać bardziej zrozumiałem klasy np. dla tekstu article-text. Zainteresuj się jakąś metodologią np. BEM
  4. Warto by było napisać ten atlas jeszcze raz, ale przy pomocy znaczników HTML5
  5. Nie centruj zdjęcia przy pomocy tagu <center>. Od centrowania elementów na stronie masz CSS. (Oddziela strukturę strony od jej wyglądu. Tak samo z JS)
  6. Raz używasz tag <img> poprawnie, a raz używasz go tak <img></img> (zosatń przy tym <img src="" alt="" />
  7. Większość to jest kopiuj, wklej, edytuj i przez to masz czasami błędy ze źle domkniętymi divami oraz atrybutami. 
  8. Spróbuj nauczyć się Flex w CSS. Zamiast używać cały czas float: left
  9. Po co Ci tyle zabezpieczeń na stronie, jak i tak nic Ci one nie dają. Są bezużyteczne.
  10. Jeżeli chcesz się zabawić w projektowanie stron ściągnij sobie Adobe XD

Przeanalizuj sobie wszystkie opinie na forum i spróbuj podejść do tego od nowa. Może zamiast korzystać z jquery spróbujesz napisać cały skrypt w czystym JS  smiley  

Powodzenia (^ ^)/

komentarz 2 maja 2019 przez Jjjin Użytkownik (850 p.)
Dzięki za opinię zabezpieczenia mam właśnie usunąć wszystkie zabezpieczenia, ponieważ uświadomiono mi, że są one bez sensu i raczej przebuduje stronę według waszych zaleceń :D

Podobne pytania

0 głosów
2 odpowiedzi 415 wizyt
pytanie zadane 18 lipca 2018 w Nasze projekty przez mgita Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 363 wizyt
+1 głos
7 odpowiedzi 877 wizyt

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...