- Strona tytułowa
- Zdefiniowanie problemu do realizacji
- Propozycja rozwiązania problemu
- Testowanie responsywności i walidacja
- Komentarze kodu i dokumentacja KSS
- Linki do źródeł
- Raport SEO
Tytuł projektu: Wzorcowy serwis internetowy – Responsywna strona HTML/CSS
Projekt obejmuje zestaw stron internetowych składających się z różnorodnych sekcji, takich jak strona główna, galeria, produkty, usługi, kontakt, FAQ, i polityka prywatności, z których każda została zdefiniowana przy użyciu HTML i stylizowana za pomocą dedykowanych plików CSS. Strony są zaprojektowane z myślą o dostarczeniu użytkownikowi intuicyjnego i angażującego doświadczenia, umożliwiającego łatwe nawigowanie i dostęp do potrzebnych informacji.
Szczegóły dotyczące plików:
ourProducts.html,pay.html,productFirst.html,productSecond.html,productThird.html: Strony te opisują oferowane produkty, umożliwiają zapoznanie się z ofertą oraz dokonywanie zakupów. Ich stylizacja została zdefiniowana w plikach CSS odpowiadających nazwami produktom.services.html,privacy.html,aboutUs.html,contact.html,faq.html,gallery.html,home.html: Każda z tych stron pełni specyficzne zadanie, od przedstawienia usług, przez informowanie o polityce prywatności, aż po zapewnienie kontaktu z właścicielami serwisu. Strony te są zaprojektowane w taki sposób, aby użytkownik mógł łatwo znaleźć potrzebne informacje.- Pliki CSS: Dla każdej strony HTML przygotowano odpowiedni plik CSS, który odpowiada za wizualną prezentację treści. Każdy z tych plików zawiera selektory i reguły stylów specyficzne dla elementów strony, które regulują aspekty takie jak layout, kolory, czcionki, oraz responsywność.
Cel dokumentacji:
Dokumentacja została stworzona w celu zapewnienia szczegółowego przeglądu każdego z aspektów projektu, włącznie z jego strukturą, używanymi technologiami, oraz metodami implementacji. Ma ona na celu ułatwić zrozumienie projektu przez osoby trzecie, zapewnić wsparcie w dalszym rozwoju, oraz służyć jako dokumentacja techniczna dla użytkowników końcowych.
Projekt zakłada stworzenie szablonu strony internetowej, który będzie służył jako uniwersalna baza dla różnych typów przedsiębiorstw lub osobistych projektów. Szablon musi być elastyczny i łatwy do dostosowania, umożliwiając przyszłym użytkownikom modyfikację zgodnie z własnymi potrzebami — od prostych blogów po skomplikowane witryny e-commerce.
Problem do realizacji:
Problemem jest stworzenie szablonu strony internetowej, który:
- Uniwersalność i Adaptacyjność:
- Jest dostatecznie elastyczny, aby mógł być używany przez szerokie spektrum użytkowników, od blogerów po małe i średnie przedsiębiorstwa.
- Może być łatwo dostosowany do specyficznych potrzeb i wymagań użytkownika, np. zmiana schematu kolorów, layoutu, czy dodawanie nowych funkcji.
- Intuicyjność i Użyteczność:
- Jest intuicyjny i łatwy w użyciu dla osób o różnym poziomie umiejętności technicznych, umożliwiając łatwe zarządzanie treścią i strukturą strony.
- Posiada przejrzystą dokumentację, ułatwiającą zrozumienie i wykorzystanie wszystkich funkcji szablonu.
- Responsywność i Dostępność:
- Jest w pełni responsywny i zapewnia poprawne wyświetlanie na wszystkich typach urządzeń (komputery, tablety, smartfony).
- Spełnia podstawowe standardy dostępności, umożliwiając korzystanie ze strony osobom z różnymi potrzebami.
- Optymalizacja i Wydajność:
- Jest zoptymalizowany pod kątem szybkości ładowania i SEO, aby zapewnić wysoką pozycję w wyszukiwarkach internetowych i lepsze doświadczenie użytkownika.
- Zapewnia łatwość integracji z różnymi systemami zarządzania treścią (CMS) lub technologiami backendowymi.
Zaproponowane rozwiązanie problemu:
W celu rozwiązania powyższych problemów, proponowane są następujące kroki:
- Uniwersalność i Adaptacyjność:
- Zastosowanie modularnej architektury CSS i HTML, umożliwiającej łatwą zmianę komponentów i layoutów.
- Przygotowanie zestawu predefiniowanych schematów kolorów i komponentów UI, które mogą być łatwo zmieniane lub rozszerzane.
- Intuicyjność i Użyteczność:
- Opracowanie szczegółowej dokumentacji użytkownika, zawierającej instrukcje dotyczące personalizacji i zarządzania szablonem.
- Wprowadzenie przykładowych stron i komponentów, które mogą służyć jako punkt wyjścia dla dalszych modyfikacji.
- Responsywność i Dostępność:
- Zastosowanie technik responsywnego web designu, takich jak media queries i elastyczne siatki (grids).
- Przestrzeganie zasad dostępności, np. odpowiednie etykietowanie dla technologii asystujących, kontrastowe schematy kolorów.
- Optymalizacja i Wydajność:
- Optymalizacja grafik i skryptów dla szybszego ładowania.
- Użycie technik SEO-friendly, takich jak semantyczne znaczniki HTML, optymalne wykorzystanie nagłówków i meta tagów.
Cel projektu:
Celem projektu jest dostarczenie studentom i innym użytkownikom gotowego, łatwego do adaptacji szablonu strony internetowej, który może być wykorzystany do różnorodnych celów edukacyjnych, osobistych, lub biznesowych. Szablon ma stanowić solidną podstawę do dalszego rozwoju i personalizacji, zachęcając użytkowników do nauki i eksperymentowania z web designem i technologiami internetowymi.
Założenia projektowe:
- Szablon będzie rozwijany z myślą o najlepszych praktykach w projektowaniu i programowaniu stron internetowych.
- Będzie dostępny i użyteczny dla osób o różnym stopniu zaawansowania, od początkujących po zaawansowanych użytkowników.
- Zostanie zaprojektowany w taki sposób, aby ułatwić studentom zrozumienie podstawowych i zaawansowanych koncepcji związanych z tworzeniem stron internetowych.
Tak zdefiniowany problem do realizacji wraz z zaproponowanymi rozwiązaniami zapewnia solidne fundamenty dla projektu szablonu strony internetowej, który ma służyć edukacyjnym i praktycznym celom dla szerokiej grupy użytkowników.
Opierając się na analizie dostarczonych kodów HTML/CSS, takich jak home.html, faq.html, productFirst.html i innych, oto zaproponowane metody rozwiązania problemu tworzenia uniwersalnego i efektywnego szablonu strony internetowej na potrzeby projektu studenckiego.
Cel: Ułatwienie zarządzania i rozwijania szablonu.
Rozwiązanie: Zastosowanie semantycznego HTML i modularnego CSS, gdzie każda strona (np. home, faq, product) jest budowana z wielokrotnie używanych komponentów. Ułatwi to późniejsze modyfikacje i utrzymanie kodu, a także pozwoli na łatwą personalizację szablonu.
Przykład: W home.html, zastosowanie nagłówków, sekcji i artykułów z semantycznego HTML do strukturyzacji treści; w faq.html, użycie list dla pytań i odpowiedzi.
Cel: Zapewnienie atrakcyjnego i funkcjonalnego wyświetlania na wszystkich urządzeniach.
Rozwiązanie: Wykorzystanie responsywnych technik, takich jak media queries w CSS, flexbox i grid, aby szablon był dostosowany do różnych rozmiarów ekranów. Stylizacja i layout każdej strony (home, faq, product) powinny automatycznie dostosowywać się do kontekstu urządzenia.
Przykład: W CSS dla każdej strony, zastosowanie reguł mediów dla popularnych punktów przerwania, takich jak tablety i smartfony.
Cel: Poprawa doświadczenia użytkownika przez interaktywne i intuicyjne elementy.
Rozwiązanie: Dodanie elementów interaktywnych takich jak menu rozwijane, karuzele czy akordeony, szczególnie w miejscach gdzie użytkownik może oczekiwać większej interaktywności (np. sekcja produktów, FAQ). Ułatwi to nawigację i uczyni stronę bardziej angażującą.
Przykład: W produktach, możliwość przeglądania zdjęć produktów za pomocą slidera; w FAQ, zastosowanie akordeonów do wyświetlania i ukrywania odpowiedzi.
-
Struktura i Organizacja Kodu:
- Kod będzie zorganizowany wokół jasno zdefiniowanych komponentów i sekcji.
- Każda strona HTML i plik CSS będzie mieć konsekwentne i przemyślane nazewnictwo klas i identyfikatorów, ułatwiające orientację w kodzie.
-
Responsywność i Wygląd:
- Każdy element strony zostanie zaprojektowany z myślą o elastyczności i adaptacji do różnych rozdzielczości ekranu.
- Stylizacja będzie wykorzystywać nowoczesne techniki CSS, w tym zmienne CSS, dla łatwej zmiany tematów kolorystycznych lub fontów.
-
Interaktywność i Użytkowość:
- Dodane zostaną skrypty JS dla dodatkowej interaktywności tam, gdzie to potrzebne, z uwzględnieniem prostoty i wydajności.
- Przy każdym interaktywnym elemencie zostanie zapewnione, że jest on dostępny i łatwy w obsłudze także dla użytkowników korzystających z czytników ekranu lub klawiatury.
Rozwiązanie problemu tworzenia uniwersalnego szablonu strony internetowej na potrzeby projektu studenckiego wymaga zastosowania czystego, modularnego kodu, responsywnych technik projektowania oraz dodania elementów interaktywnych, które zwiększają zaangażowanie użytkowników. Przyjęte podejście ma na celu zapewnienie, że szablon będzie łatwy do adaptacji i rozwoju, niezależnie od specyficznych potrzeb projektu, na który zostanie wykorzystany.
- Na górze strony pokazuje się pasek nawigacyjny, który podczas przewijania strony w dół jest cały czas widoczny, niezależnie od responsywności.
- Jest on podzielony na dwie części, pierwsza część to „logo strony”, a druga to linki główne całej strony. Po kliknięciu w ikony nawigacyjne, jak i również logo zostajemy przekierowani na adresy podstron.
- Po załadowaniu strony widoczne jest tło, które jest zablurowane, a na nim logo z efektem, który ukazuje się po najechaniu na logo. Pod nim znajduje się słowo „klucz” strony i link do podstrony, w której są przedstawione nasze „oferty”.
- Jako pierwsza sekcja na stronie głównej znajduje się galeria z widocznymi trzema zdjęciami, a pod nimi jest przycisk, który po kliknięciu rozwija kolejne kilka zdjęć. Każde zdjęcie ma swoją animację, która jest pokazywana po najechaniu na nie myszką.
- Kolejna sekcja to opis z alertem/popup'em, który ujawnia się po kliknięciu. Są tam również box'y, w których znajdują się informacje i przyciski do przeniesienia na podstronę produktów.
- Sekcja slideru, została oparta na przedstawieniu produktów w ułożeniu poziomym. Po kliknięciu w daną opcję na sliderze, przenosi nas do danego produktu, gdzie mamy przedstawione zdjęcie, jak i również cenę.
-
Ta część kontenera, to sekcja która jest widoczna tylko na wersji desktopowej, przedstawia ona produkty z ich nazwą, ceną, jak i również oceną w postaci gwiazdek.
-
Przedstawione są również tam dwa przyciski, na pierwszym i ostatnim zdjęciu. Służą one do przenoszenia do podstrony produktów, gdzie dalej możemy obserwować produkty, którymi jesteśmy zainteresowani.
- Przedstawiona sekcja, jest wykonana w łatwy i kompleksowy sposób. Ukazane są trzy produkty z nazwą, zdjęciem i przyciskiem do pokazania więcej produktów na podstronie.
- Ta część, to sekcja kolekcji. Ukazuje ona ofertę specjalną z opisem o % promocji oraz przyciskiem przenoszenia na podstronę ukazującą promocję.
- Poniżej jest również 3 sposoby na szybką i tanią realizację zakupów, z możliwością zwrotu.
- To sekcja ukazująca możliwość zasubskrybowania newslettera strony, który będzie wysyłał na podany maila, informację o nowościach i promocjach.
- Ostatnim elementem widocznym na stronie jest stopka, przedstawiająca informacje o prawach strony, oraz linku do polityki prywatności strony.
- Jest na niej również informacja, że jest w pełni poprawna semantycznie, ponieważ przeszła walidację.
- Na stopce są social media strony takie jak Facebook, Instagram, YouTube, Twitter.
- Ukazana sekcja przedstawia przykładowy wzór strony, oraz relatywnie ułożone elementy wraz z małym „formularzem”.
- Krótki opis opisujący naszą firmę i zapraszający do przejrzenia produktów.
- Mała i przejrzysta galeria, po której jeśli najedziemy na zdjęcie to ma ono swoją animację.
- Przedstawione są przykładowe produkty z ich opisem i nazwą oraz przyciskiem do przenoszenia na podstronę produktów.
- Przyciski pozwalają na przełączenie między danymi strefami produktów. Możliwe jest wyświetlenie produktów tylko dla jednego grona osób, jak i dla wszystkich.
- Sekcja składająca się z trzech kółek, gdzie to o najwyższym z-index’ie ma swój mały formularz przenoszący do podstrony produktów.
- Sekcja zdjęć ułożonych według rozdzielności, sekcja ta jest zrobiona na grid’zie, więc automatycznie niezależnie od urządzenia zdjęcia się układają.
-
Ta podstrona zawiera tylko jedną sekcję, mianowicie formularz kontaktowego, gdzie jest uzupełniony ten formularz o walidację.
-
Po poprawnym wprowadzeniu danych wyświetla się nam popup/alert i wiadomość zostaje wysłana.
- Sekcja ta za pomocą details po kliknięciu na zapytanie wyświetla odpowiedź.
- Ta sekcja przedstawia produkty dodane do koszyka z nazwą ilością oraz ceną całkowitą.
- Istnieje możliwość powrotu do podstrony produktów.
- Formularz ten zwraca komunikaty jeśli podamy złe dane. Po podaniu dobrych wyświetla się komunikat o udanych zakupach i przejrzeniu maila w sprawie dalszej wysyłki.
-
Ukazuje się tu krótki opis produktu w box’ach
-
Zdjęcia produktu po których najechaniu mają swoją animację
-
Widoczny jest przycisk umożliwiający dodanie produktu do koszyka. Po kliknięciu produkt zostaje dodany do koszyka i przenosi nas do koszyka.
-
Tabela przedstawia przykładowe wartości o produkcie, takie jak opis, czas dostawy, wymiary czy kolor.
- Przedstawiony jest opis polityki prywatności po którego najechaniu test ma animację.
Strona główna wygląda w wersji desktopowej dobrze, nie ma nigdzie zagięć, wystających krawędzi. Pasek nawigacyjny wygląda przejrzyście, jest opisany i dodatkowo działa na wyobraźnię poprzez ikony.
Sekcja galerii i detali jest w wersji desktopowej w miarę przejrzysta, widać równe odstępy od krawędzi i równe odstępy między zdjęciami. Wszystko wygląda czytelnie i nie sprawia kłopotów z odczytaniem.
Slider oraz sekcje produktów mają równe wcięcia i dobre ułożenie, są w pełni czytelne i spełniają wymogi, dotyczące założeń.
Elementy są dopasowane w taki sposób, aby nie raziły w oczy i nakłaniały do kliknięcia w dany produkt. Z pewnością ich ilość nie przytłacza i działa w sposób naturalny na wyobraźnię.
Strona zakańcza się na sekcji stopki która w sposób minimalistyczny nie psuje całości wykonania strony i w pełni dopasowuje się do wybranych urządzeń.
Podstrony też mają poprawne ułożenie i są czytelne dla oka, realizując wizję kompleksowej firmy.
Formularze kontaktowe i płatnicze są ułożone centralnie na środku ekranu co w pewności jest przyjemne dla oka i odpowiednie dla użytkownika.
Produkty i ich opisy są dopasowane do siebie co pokazuje, iż pasują do siebie i nie psują wizji łączenia całości.
Pasek nawigacyjny wygląda dobrze, ikona koszyka jest oddzielnie, aby odznaczała się od całości zakładek. Logo jest stale umieszczone w rogu ekranu, aby wbijało się w pamięć. Odznacza się i nie nakłada na inne elementy.
Zdjęcia jak widać zmieniły swoją pozycję i nadal są w równych odstępach od siebie co spełnia wizję responsywnej strony.
Slider jest teraz gotowy do przewijania slajd by slajd, poprzez co można w czytelny sposób nadal oglądać produkty w nim przedstawione.
Promocję, newsletter i pasek stopki również w czytelny i responsywny sposób się ułożyły. Pokazuje to, że strona jest w pełni responsywna i dobrze dopasowana.
Podstrony, jak widać też są w pełni responsywne i spełniają założenia projektu. Odstępy są równe, co robi stronę dobrą dla oka i przyciągającą klientów. Pasek nawigacyjny nie zasłania zbyt dużego pola i spełnia założenie, mówiące o polu dotyku (40px x 40px).
Formularze kontaktowe, płatnicze są idealnie dopasowane do urządzeń mobilnych, dodatkowo są czytelne i spełniają warunki strony responsywnej.
Podsumowując można zauważyć, że strona w wersji mobilnej i desktopowej jest zrobiona w sposób dobry. Nie ma nigdzie wcięć, ucinania krawędzi czy pasków do scrolowania. Strona spełnia założenia i została w pełni przetestowana responsywnie. Poniżej znajdują się testy uzupełniające takie jak wyniki walidacji czy testy szybkości załadowania strony.
- Wykorzystanie narzędzi takich jak Google PageSpeed Insights lub Lighthouse do analizy czasu ładowania strony i zidentyfikowania elementów, które mogą go spowalniać.
- Sprawdzenie, czy obrazy, skrypty i arkusze stylów są zoptymalizowane pod kątem szybkiego ładowania (np. kompresja, minifikacja).
- Testowanie strony na najnowszych wersjach popularnych przeglądarek (Chrome, Firefox, Safari, Edge), aby upewnić się, że wygląd i funkcje działają jednolicie.
- Sprawdzenie działania strony na przeglądarkach mobilnych, szczególnie na systemach Android i iOS.
- Wykorzystanie narzędzi takich jak WAVE lub AXE do sprawdzenia, czy strona jest dostępna dla użytkowników z ograniczeniami, np. dla osób korzystających z czytników ekranowych.
- Ocena, czy kontrast tekstu na tle jest wystarczający dla osób z zaburzeniami widzenia, oraz czy fonty i ich rozmiary są czytelne.
Strona została sprawdzona przez powyższe standardy, nie znaleziono błędów, które wynikałyby z złego napisania kodu, albo nie doprecyzowania jakiegoś z jego składników. Strona jest responsywna dla każdej z zakładek tak samo, wszystkie jej funkcje działają i spełniają swoją funkcję. Strona niezależnie od przeglądarek działa poprawnie oraz ma wysokie wyniki w różnych testach.
Zgodnie z dokumentacją, strona została poddana rygorystycznym testom funkcjonalności, responsywności, wydajności, kompatybilności przeglądarek oraz dostępności, które przyniosły bardzo dobre wyniki. Zarówno HTML, jak i CSS strony przeszły walidację bez błędów, co świadczy o wysokiej jakości kodu i jego zgodności ze standardami. Strona wykazuje optymalną responsywność na różnych urządzeniach, a jej funkcje działają bez zarzutu. Dzięki przeprowadzonym testom i walidacjom, strona uzyskała wysokie oceny w narzędziu Lighthouse, w tym maksymalną wydajność 100/100, co świadczy o optymalizacji szybkości ładowania. Dostępność strony również została pozytywnie oceniona, choć wskazano pole do poprawy dla jeszcze lepszej dostępności dla osób z niepełnosprawnościami. Wyniki te potwierdzają, że strona jest bezbłędna i spełnia swoje założenia, dostarczając użytkownikom funkcjonalne, responsywne i profesjonalnie wykonane doświadczenie.
-
Wydajność: Na zrzucie ekranu widać wynik 100/100, co oznacza, że strona jest wysoce optymalizowana pod kątem szybkości ładowania. Taki wynik jest wynikiem stosowania dobrych praktyk programistycznych, takich jak optymalizacja obrazów i skryptów, co przekłada się na krótki czas ładowania i pozytywne doświadczenia użytkownika.
-
Dostępność: Osiągnięto wynik 86/100, co świadczy o wysokiej dostępności strony, ale wciąż istnieje pole do poprawy, zwłaszcza w kontekście ułatwień dostępu dla osób z niepełnosprawnościami.
-
Najlepsze praktyki: Wynik 95/100 sugeruje, że strona przestrzega większości zalecanych praktyk, takich jak bezpieczne protokoły i nowoczesne funkcje API.
-
SEO: Perfekcyjny wynik 100/100 wskazuje na to, że strona została zbudowana zgodnie z zasadami SEO, co przyczynia się do jej widoczności w wynikach wyszukiwania.
- Walidacja CSS zakończyła się sukcesem - nie znaleziono żadnych błędów. Jest to oznaka, że arkusz stylów CSS został napisany czysto i zgodnie z obowiązującymi standardami, co zapewnia jego kompatybilność między przeglądarkami i ułatwia dalsze utrzymanie oraz rozwijanie kodu.
- Podobnie jak CSS, HTML strony również przeszedł walidację bez błędów. To świadczy o wysokiej jakości kodu, jego zgodności ze standardami oraz o tym, że prawdopodobnie będzie dobrze interpretowany przez różnorodne przeglądarki i urządzenia.
Każdy z tych testów odgrywa kluczową rolę w zapewnieniu jakości i profesjonalizmu w projektowaniu stron internetowych. Dobre wyniki w testach wydajności i SEO są szczególnie ważne dla użytkowników końcowych oraz dla pozycjonowania strony w wyszukiwarkach. Natomiast wyniki walidacji CSS i HTML są ważne z perspektywy deweloperskiej, ponieważ potwierdzają, że kod jest dobrze napisany i będzie łatwiejszy w dalszym utrzymaniu i rozwijaniu. Dostępność jest istotna dla zapewnienia, że wszyscy użytkownicy, niezależnie od swoich możliwości, będą mogli korzystać ze strony. Osiągnięte wyniki wskazują, że szablon jest już na wysokim poziomie, ale wskazują również na obszary, które mogą zostać dodatkowo poprawione w przyszłości.
Kod jest komentowany w ten sposób, aby dostarczyć jasnych i czytelnych informacji na temat każdej sekcji kodu. Komentarze są używane, aby opisać, do czego służy każdy blok kodu oraz jakie są jego główne cele i funkcje. To pomaga programistom zrozumieć strukturę i działanie kodu oraz ułatwia utrzymanie i ewentualne modyfikacje w przyszłości.
Komentarze są także używane do spełnienia wymogu tego punktu:
- Komentarze są używane do opisania zmiennych korzeniowych, keyframes oraz stylów dla ciała strony, nagłówka i innych sekcji kodu.
- Komentarze są napisane w jasny i zrozumiały sposób, co pomaga innym programistom szybko zrozumieć kod.
- Komentarze zawierają informacje o tym, co dany fragment kodu robi, jakie są jego efekty wizualne oraz jakie są używane techniki (np. flexbox) w projekcie.
Dzięki temu podejściu, kod jest czytelny i łatwy do zarządzania, a programiści mogą bezproblemowo pracować nad projektem i wprowadzać ewentualne zmiany lub ulepszenia.
Wszystkie zdjęcia wykorzystane w projekcie zostały wygenerowane przy użyciu sztucznej inteligencji DALL-E. Nie jestem w stanie dostarczyć bezpośrednich linków do źródeł, ponieważ te obrazy są wynikiem procesu generacji modelu DALL-E, a nie pochodzą z konkretnych źródeł zewnętrznych.
W części dokumentacji poświęconej kodowi źródłowemu, szczególną uwagę zwrócono na szczegółowe dokumentowanie najważniejszych funkcji CSS. Dokumentacja została przygotowana przy użyciu metodologii KSS (Knyle Style Sheets), co pozwoliło na stworzenie czytelnej, spójnej i łatwo dostępnej dokumentacji dla wszystkich członków zespołu. Metodologia ta umożliwia zarówno opisywanie stylów bezpośrednio w kodzie, jak i automatyczne generowanie przewodników stylów, co znacząco ułatwia zarządzanie kodem CSS i jego późniejsze utrzymanie.
Dokumentacja KSS dla najważniejszych funkcji CSS obejmuje nie tylko same selektory i właściwości, ale również ich zastosowanie, możliwe modyfikacje oraz przykłady użycia, co znacznie ułatwia zrozumienie i wykorzystanie kodu przez innych programistów.
Dzięki temu podejściu, kod źródłowy projektu jest nie tylko dobrze zorganizowany, ale również transparentny i dostosowany do współpracy i ciągłego rozwoju.
Przykładowe zdjęcia przedstawiające dokumentację KSS (Knyle Style Sheets):
Całość dokumentacji dostępna również pod linkiem tutaj.
Co do ikon użytych w nawigacji, zostały one pozyskane z serwisu Flaticon.
Treści graficzne i ikony z serwisu Flaticon są dostępne na licencji Creative Commons BY 3.0, co oznacza, że można je używać w projektach, pod warunkiem zachowania informacji o autorze (atrybucja). Dlatego też, autor projektu powinien uwzględnić odpowiednie atrybucje do tych ikon, informując o ich źródle i autorze.
Jeśli chodzi o dokumentację, z jakiej korzystałem, to było to tylko i wyłącznie korzystanie z prezentacji z zajęć oraz stron w3schools.
Całość projektu znajduje się również w repozytorium prywatnym pod linkiem - https://github.com/dawidolko/Responsive-Website-Design-HTML-CSS.git
Dodatkowo jest załączona na Github-Pages, więc możliwa jest indywidualna ocena strony - https://projekt1.dawidolko.pl/
Historia commit'ów:
Historia Commitów - Spis commit'ów
- Ocena SEO: Ogólna ocena SEO wynosi 72%, co jest przedstawione na wykresie kołowym. Ta ocena jest podsumowaniem wydajności strony we wszystkich mierzonych aspektach.
- Informacje Meta: Bardzo dobra ocena na poziomie 98%, co wskazuje, że tagi meta, takie jak tytuł i opis, są dobrze zoptymalizowane.
- Jakość Strony: Ocena wynosi 48%, co sugeruje, że istnieje sporo miejsca na poprawę jakości stron internetowych, możliwe obszary do poprawy to m.in. treść, czytelność lub wydajność strony.
- Struktura Strony: Strona otrzymała ocenę 58%, co wskazuje, że struktura strony, która może obejmować nagłówki i wykorzystanie elementów strukturalnych HTML5, jest umiarkowanie zoptymalizowana.
- Struktura Linków: Strona ma wysoką ocenę struktury linków, wynoszącą 95%, co sugeruje, że strategie linkowania wewnętrznego i zewnętrznego są silne.
- Serwer: Konfiguracja serwera jest doskonała z oceną 100%, co może wskazywać na dobrze skonfigurowany serwer, dobre czasy odpowiedzi i brak poważnych problemów związanych z serwerem.
- Czynniki Zewnętrzne: Ocena wynosi 23%, co jest dość niską wartością. Może to odnosić się do takich czynników jak linki zwrotne, obecność w mediach społecznościowych i inne czynniki zewnętrzne, które leżą poza samą stroną.
- Czas Reakcji: Czas odpowiedzi serwera jest bardzo dobry, wynosi 0,14 sekundy.
- Rozmiar Pliku: Całkowity rozmiar pliku strony to 29,00 kB, co jest lekkie i zazwyczaj korzystne dla czasów ładowania.
- Słowa: Na stronie znajduje się 253 słów. W zależności od kontekstu, może to być uznane za małą ilość pod kątem SEO, ponieważ dłuższe treści czasami mogą być lepiej pozycjonowane.
- Pliki Multimedialne: Jest 84 plików multimedialnych, mogą to być obrazy lub wideo. Jest to stosunkowo duża liczba, która może potencjalnie spowolnić ładowanie się strony, jeśli nie są odpowiednio zoptymalizowane.
- Liczba Linków: Jest 22 wewnętrznych linków i 5 zewnętrznych. Dobre wyważenie linków wewnętrznych i zewnętrznych może pomóc w SEO, ale jakość i trafność tych linków są również ważnymi czynnikami.
Podsumowując, raport wskazuje, że chociaż strona internetowa działa dobrze w pewnych aspektach, takich jak wydajność serwera i struktura linków, istnieją obszary takie jak jakość strony i czynniki zewnętrzne, które mogłyby być znacznie ulepszone, aby zwiększyć ogólną wydajność SEO.
- Performance (Wydajność): 100/100 - To oznacza, że strona jest bardzo dobrze zoptymalizowana pod kątem szybkości i wydajności. Wysoka ocena w tej kategorii wskazuje na krótki czas ładowania, efektywne wykorzystanie zasobów i dobrą reakcję na interakcje użytkowników.
- Accessibility (Dostępność): 66/100 - Ta ocena sugeruje, że strona ma pewne problemy z dostępnością, co może oznaczać, że niektóre elementy strony nie są łatwo dostępne dla osób z niepełnosprawnościami, na przykład mogą występować problemy z kontrastem, etykietami formularzy lub strukturą nagłówków.
- Best Practices (Najlepsze Praktyki): 85/100 - Ten wynik wskazuje na stosowanie większości najlepszych praktyk w zakresie tworzenia stron internetowych, ale nadal istnieje miejsce na drobne poprawki.
- SEO: 90/100 - Ocena SEO jest wysoka, co wskazuje, że strona jest dobrze zoptymalizowana pod kątem wyszukiwarek, ale jak każdy wynik poniżej 100%, istnieje jeszcze potencjał do dalszej optymalizacji.
- PWA: 100/100 - Maksymalna ocena w tej kategorii oznacza, że strona spełnia kryteria aplikacji webowej postępującej, w tym aspekty takie jak szybkość, niezawodność i niezależność od połączenia sieciowego.
Podsumowując, raport Lighthouse pokazuje, że strona w dużej mierze spełnia standardy wydajności i PWA, jednak są pewne obszary, szczególnie dostępność, które wymagają uwagi i potencjalnej poprawy.