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

Portal dla fanów fantastyki - Ocena strony

Object Storage Arubacloud
+5 głosów
646 wizyt
pytanie zadane 4 czerwca 2016 w Nasze projekty przez Lukaspar Użytkownik (890 p.)

Witam,

/*
Napisałem to już raz bardzo formalnie, ale stwierdzam, że nie potrafię tak pisać i wychodzi zbyt sztywnie i schematycznie, więc napiszę to jeszcze raz już luźno na swój sposób. Także wszystkich strażników poprawności gramatycznej i językowej z góry przepraszam i proszę o wyrozumiałość. */


Chciałbym przedstawić wam mój mały projekt, który tworzę dokładnie od 1 maja, czyli odrobinę ponad miesiąc.
Jest to strona internetowa, a zasadniczo to jakby szablon strony, bo brakuje treści -  LINK   

(Strona nie jest jeszcze przystosowana pod tel.)

 

Na początek dwie ważne sprawy:


1. Jest to moja pierwsza "oficjalna" strona.
2. Oceniając stronę nie postrzegaj jej przez pryzmat punktu 1. Konstruktywna krytyka jest dla mnie najcienniejszą rzeczą jaką mogę dostać za czas poświęcony na pisanie tego posta.


Jeśli nie interesują cię moje odczucia, i skupiasz się wyłącznie na kodzie to przewiń niżej, tam jest więcej na ten temat.

 


O samej stronie


Myślę że domena jak i pomysł na stronę jest kiepski. W takim razie dlaczego to robię? Po pierwsze chce się uczyć, i od tego się to zaczęło. Postanowiłem, że od samego początku będę wykorzystywać wiedzę w jakimś projekcie, a taki całkiem rozbudowany portal myślę że daje sporo możliwości żeby się wykazać. Po drugie (choć może być i pierwsze po raz drugi, bo równie istotne) po prostu interesuję mnie tematyka, dzięki czemu przyjemniej mi się pracuję.


O tworzeniu strony


Tak jak już wspominałem, oficjalnie pierwszą cegłę postawiłem 1 maja. 


Nieoficjalnie - Rok temu w sierpniu, miesiąc przed rozpoczęciem studiów informatycznych postanowiłem ułatwić sobie start i pobawić się coś w "programowanie". Wykupiłem domenę (nie mam pojęcia po co) i uczyłem się pierwszy raz HTML oraz CSS. Projekt porzuciłem po miesiącu, gdy okazało się, że na studiach przez pierwszy rok będzie C++. Niestety nic z tego co zrobiłem w tamtym czasie, nie przydało się w obecnym projekcie, także wszystko pisałem od 0.

 

Kod strony


Generalnie staram się pisać w nowym standardzie HTML5 i CSS3, a nazwy klas itp wyłącznie w języku angielskim. Jakość kodu jest dla mnie ważna dlatego staram się dodawać dużo dobrych komentarzy, a kod ograniczać do jak najmniejszej liczby linijek.


Wszystkie pliki HTML oraz CSS sprawdzałem na validatorze w3 i poprawiałem błędy, które tam się pokazały. Na chwilę obecną każdy plik jest "czysty". 


Tutaj najbardziej liczę na was. Tutoriale są niesamowicie zdradliwe. Duża część informacji jest przestarzała, a często stosowane jest masę złych praktyk. Nie mając nad sobą starszego kolegi obeznanego w temacie, ciężko jest mi stwierdzić co powinienem poprawić, czego nie stosować i co napisać inaczej.


Jeśli chodzi o braki na stronie, to na pewno najbardziej bolesnym jest brak responsywności. Próbowałem się zagłębić w ten temat, jednak wydaję mi się, że przebudowa kodu na responsywny to jakiś koszmar. Dlatego rozważam napisanie strony od nowa pod tel, dla subdomeny m.swiat-fantasy.pl.
Poza tym jest kilka innych istotnych braków ( nie licząc ogólnej treści ) :
- Wyszukiwarka
- Forum
- Formularz kontaktowy


Te elementy planuję dodać w pierwszej kolejności zaraz po sesji letniej. ( na chwilę obecną stronie poświęcam bardzo mało czasu, i tak już pewnie w czerwcu pozostanie )


Na stronie stworzyłem pojemniki w którym "teoretycznie" mają być reklamy, jednak głęboko rozważam tą opcje. Nie mam pomysłu czym mógłbym zastąpić miejsce reklam, ale też myślę że wykorzystywanie ich nie jest najlepszym rozwiązaniem. Zdecydowanie lepszą opcją byłaby informacja o datkach, może dzięki temu udało by się opłacać chociażby domenę i hosting. 

 

Współpraca


Nie mam pieniędzy.


Okey, to jak już 80% osób zainteresowanych współpracą sobie poszło to teraz do tych 20%. Nie mogę od siebie wiele zaoferować. Mam 20 lat, studiuję, nie mam stałego dochodu. Jednak niesamowicie zależy mi na współpracy. Nie jestem w stanie samemu poprowadzić portalu, zwłaszcza że jestem ograniczony przez studia i dojazdy (1.5h do Warszawy na uczelnie). Jednak jeśli też jesteś pasjonatem fantastyki, lub masz dla mnie jakąś ciekawą propozycje to zapraszam do kontaktu.


Co do kontaktu, to proszę pisać na maila: biuro@swiat-fantasy.pl . Postaram odpisać na każdą wiadomość, czy to w sprawie współpracy, czy zwyklej rozmowy na temat stronki.

Jeśli chodzi o moje plany, to na pewno muszę podszkolić JavaScript + jQuery. Na stronę głównie wgrywałem gotowce, nie do końca rozumiejąc cały kod. Dodatkowo planuję zabrać się wreszcie za SASS. Fajną motywacją byłoby zatrudnienie się na wakacje(lub dłużej) jako junior, ale na to raczej jeszcze za wcześnie.

To by było tyle. Mam nadzieję, że znajdą się tacy szaleńcy co przeczytają całą wiadomość. W każdym razie dziękuję każdemu, który poświęci trochę swojego czasu, żeby mi pomóc.


Ten post zamierzam zamieścić na kilku forach.

Poniżej zamieszczam jeszcze parę zdjęć jak wyglądała stronka w trakcie tworzenia.

OBRAZEK1      OBRAZEK2

OBRAZEK3      OBRAZEK4

OBRAZEK5      

2 odpowiedzi

+5 głosów
odpowiedź 4 czerwca 2016 przez niezalogowany
wybrane 4 czerwca 2016 przez Lukaspar
 
Najlepsza
  • Wyszukiwarki od dłuższego czasu nie zwracają uwagi na keywordsy w metatagach. Linijkę z nimi można usunąć.
  • Fonty od Googla - tutaj wystarczy jeden request - multiple font families
  • Cały JS powinien być na końcu body. Nie spowalnia wtedy parsowania -> renderowania strony
  • "Główny pojemnik opakowujący wszystko" jest niepotrzebny, on de facto nic nie robi.
  • "Przycisk do rollowania na górę strony" - to pierwsza rzecz, którą "zobaczy" osoba korzystająca z czytnika ekranowego. Tego typu implementacje umieszcza się na samym dole strony. Druga sprawa - link jest pusty. Powinien posiadać tekst, z informacją do czego się on odnosi. Oczywiście nie pasuje to do designu strony, ale co komu po designie jeśli korzysta z technologii asystujących? - Umieść tam tekst ukryty dla "zwykłych" użytkowników - How to hide content - a11y
  • Zamiast przycisku do scrollowania na samej górze, świetnie sprawdziłby się link typu "przejdź do treści" - Skip nav links - a11y
  • Cały div o id "top" wrzuciłbym do znacznika header,
  • Ikona koperty przy adresie mailowym jest ozdobnikiem, co za tym idzie - powinna mieć pusty atrybut alt, a najlepiej jeszcze żeby posiadała atrybut aria-hidden z wartością true.
  • Style Inline wprowadzają dużo zamieszania w kodzie. Wszystko co jest CSSem, powinno być w plikach CSSa. Dobra lektura - Progressive Enhancement
  • Lista ikon w górnym panelu mogłaby być listą. <ul>
  • alt="lupa" - obrazki użytkowe, powinny mieć w alt opis ich funkcjonalności, w tym wypadku "szukaj" / "wyszukiwarka".
  • Nie zaleca się stosowania target blank - When to use target="_blank"Bezcelowy target.
  • Tekst alternatywny dla obrazków służących jako linki ("ikonka twitter, facebook .. ) powinien odnosić się do zawartości danego linka - na przykład "Fanpage Świat Fantasy na Facebooku" / "Świat Fantazy na Twitterze"
  • Brakuje nagłówka najwyższego poziomu na stronie. Odeślę Cię tam, gdzie zapewne zrobiłaby to większość osób na tym forum - http://www.webkrytyk.pl/krytyka/lexy.com.pl/#naglowki
  • Mam wrażenie, że strona trochę popada w divitis. Divy z id "logo-menu" oraz "menu" są zbyteczne.
  • Nie jest dobrą praktyką używanie ID do stylizowania elementów - ID czy class?
  • Slider... czy on tam musi być? Cała masa problemów z dostępnością pojawia się wraz z nim. Od tekstu, który nie jest tam tekstem, przez użyteczność, RWD, aż po moje nerwy : ) A jak już tam musi być - wpakuj go w znacznik header i zadbaj o accessibility.
  • Czarne nagłówki mają za mały kontrast względem zdjęcia w tle - są nieczytelne.
  • <div id="game"></div> <!-- tu siedzi obrazek --> ? Ale gdzie? Albo daj go w znaczniku img, albo wrzuć jako psudoelement w CSSsie.
  • Zrezygnowałbym z tworzenia linku,w którym jest cały akapit tekstu. Link powinien być zwięzły i traktować o tym, do czego się odnosi. "Więcej o grach" zdecydowanie wystarczy.
  • Mam wrażenie, że pod koniec strony, zacząłeś używać nagłówków, aby manipulować rozmiarem fonta - nigdy tego nie rób, od tego jest CSS. Poziomy nagłówków służą wyłącznie do przedstawienia struktury dokumentu. (Swoją drogą nie powinno być więcej nagłówków najwyższego poziomu niż 1 - html5 document outline).
  • Strona dostępna jest z dwóch adresów - www i bez www - co ja będę tutaj pisał : ) im więcej przeczytasz tym lepiej dla Ciebie - polecam szczególnie "Część 1" - O optymalizacji SEO stron internetowych - Racy Mind
  • Warto również zainteresować się projektem normalize - zawsze krok do przodu jeśli chodzi o cross-browser.
  • Na przyszłość - przy tworzeniu formularzy, nie zapomnij o poprawnym stosowaniu label.
  • RWD tylko poprzez Media Queries w CSSsie - nawet nie próbuj kombinować z subdomeną m. - strzelisz sobie w kolano podczas pozycjonowania - a i poprawki / treści* będziesz musiał wprowadzać na obu witrynach jednocześnie. (*o ile nie zaopatrzysz się w jakiś CMS / lub już go tam masz : ))
  • Co do angielskiego w kodzie, objąłbym nim też komentarze.
  • Jeszcze podrzucę linka - Główne zasady stosowania nagłówków
  • Ogólnie ładna strona, może ten trawiasty zielony trochę psuje klimat (no i czarne nagłówki), tak to super!

Najdłuższa ocena jaką napisałem, ale "kupiłeś" mnie opisem : )

komentarz 4 czerwca 2016 przez Lukaspar Użytkownik (890 p.)
Muszę przyznać, że jestem pod ogromnym wrażeniem. Naprawdę dziękuję Ci, że poświęciłeś tyle czasu żeby tak dokładnie to rozpisać. Teraz mam już co robić przez najbliższe kilka miesięcy. Przeanalizuje każdy podpunkt i postaram się wszystko poprawić. Dzięki !
+1 głos
odpowiedź 4 czerwca 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

Resposywność nie jest taka trudna (cóż, do pewnego stopnia, dopóki nie bawimy zmianę układu szablonu HTML), Na początek wystarczy, ustawić  w głównych sekcjach wielkośći  na skalowalne (czyli przejść na np: na procenty (na początku). emy, vw, lub vh). Następnie pobawić, narzędziami do badania resposywność i sprawdzić jak zachowują się np: dzieci. Jeżeli jest nie ok, to i dziećmi, jeżeli dalej jest nie ok, reguły media-queries, jeżeli dalej nie... no to zostały nam sztuczki z CSS-sem. Zanim, przejdzie się do właściwego kodu, warto pobawić w opcji np: ff zbadaj element i samemu pobawić się skalowalnośćią, sprawdzają czy width:50% jest ok , czy jest za mało, czy czcionka font-weight:2 em jest ok, czy za mała etc. Ta opcja działa jak edyktor WYSIWIG (co napisze, to odrazu dostaje w czasie rzeczywistym). Warto się nią zainteresować, tymbardziej że można wyesksportować reguły. To jest jedynie wstęp, na temat resposywnośći, bo ten temat jest jak rzeka. Na początku warto wiedzieć, co to jest RWD, AWD i pewne podejście do architektury szablonu Mobile First. Tyle tematem wstępu, przejdżmy do oceny kodu.

  • UX:

- Wygląd strony jest OK. Nie straszy natychmiastowym bólem oczu.

-Przyczepię się do tego , że cała strona jest taka jednakowa, nie ma elementów, którego mnie jako użytwkownika ,mają zwrócić moją uwagę.

  • Zajrzyjmy do środka. (HTML)

<a style="display: block;" href="" id="up"></a>

Osobiście bym to opakował w aside, Ale to taka moja mała dygresja. Co ciekawe raz pokazuje style w display: inline, raz w display: block.  Ciekawe po co.

<div id="top">
				<div id="fortop"> 
				
					<span class="span-top"> Współpraca  | <a class="contact" href="mailto:biuro@swiat-fantasy.pl">
					<img src="img/mail.png" alt="kontakt mailowy" title="mail" style="position: relative; top: 5px;" height="20" width="20"> biuro@swiat-fantasy.pl</a></span>
		
		
					<div class="icons">
						<a href="https://plus.google.com/b/108803329672496494280/108803329672496494280/posts" target="_blank" rel="nofollow"><img src="img/gp.png" alt="ikonka google plus" title="google plus" height="20" width="20"></a>
					</div>
			
					<div class="icons">
						<a href="https://twitter.com/SwiatFantasy" target="_blank" rel="nofollow"><img src="img/twitter.png" alt="ikonka twitter" title="twitter" height="20" width="20"></a>
					</div>
		
					<div class="icons">
						<a href="https://www.facebook.com/Swiat-Fantasypl-1676208619279695/timeline" target="_blank" rel="nofollow"><img src="img/fb.png" alt="ikonka facebook" title="facebook" height="20" width="20"></a>
					</div>
			
				</div>
			</div>

Osobiście bym zamiast div, użyłbym section i zamknął w headerze. A dla ikonek nav i lista  O style, nie wspomnę, bo pewnie jQuery (bo kto normalny używa $(#top).addClass()...). Bo tak było co nie?

<div class="sy-box">

Osobiście to jest dziwny slider. (podmienia klasę i pokazuje który jest na wierzchu?). Ale to nie jest temat tej rozmowy, Zamiast div wpakowałbym to w section.

<div id="three"></div> 

Tutaj to samo i wszędzie gdzie masz id container coś tam.

To chyba na tyle :).

Osobiście zastanowiłbym się nad architekturą szablonu CSS, gdyż jest spora zależność między klasami i indentyfikatorów. Zainteresuj się tematem budowy architektury szablonu CSS oraz preprocesorami CSS

Jeżeli chcesz budować stronę typu portal, zainteresuj się systemami CMS ( np: wordpress na początku), oraz modelem AJAX.

 

komentarz 4 czerwca 2016 przez Lukaspar Użytkownik (890 p.)
Dziękuję bardzo za tak dokładne przeanalizowanie strony :) Jak znajdę troszkę czasu, na pewno usiądę dokładnie to przeanalizuję i postaram się poprawić wszystko o czym pisałeś. Dzięki! :)

Podobne pytania

0 głosów
2 odpowiedzi 340 wizyt
pytanie zadane 5 lipca 2017 w Nasze projekty przez Matiss Nowicjusz (160 p.)
0 głosów
3 odpowiedzi 262 wizyt
pytanie zadane 30 maja 2017 w Nasze projekty przez Radekol Bywalec (2,880 p.)
0 głosów
2 odpowiedzi 384 wizyt
pytanie zadane 7 maja 2017 w Nasze projekty przez czmyk Obywatel (1,100 p.)

92,565 zapytań

141,418 odpowiedzi

319,602 komentarzy

61,951 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...