Wpływ arkuszy CSS na prezentację witryn internetowych

Wstęp

W roku szkolnym 2018/19 skorzystałem ze stypendium zawodowego w ramach programu “Mazowsze – stypendia dla uczniów szkół zawodowych”. Głównym celem mojego stypendium zawodowego był rozwój wiedzy i umiejętności w kierunku tworzenia stron internetowych.


Na podstawie 3 arkuszy stylów dołączonych do jednego delikatnie zmienianego, w zależności od potrzeb wzorca HTML5 chciałbym pokazać wpływ użytych stylów css na wygląd witryny internetowej. Wszystkie 3 przykłady są owocem pracy podczas realizowania stypendium zawodowego. Treść witryn zapisałem w języku angielskim.

 

 

 

Przykład Pierwszy

Analizując przykład pierwszy, możemy zobaczyć, iż jest to bardzo minimalistyczny projekt wizualny. Nie dzieje się tutaj za wiele, lecz mimo to strona wygląda schludnie oraz czysto. Jest czytelna oraz przejrzysta a treść przekazana jest w prosty sposób w języku angielskim. Zastosowałem tutaj zasadę kontrastu, wykorzystując ciemne tło dla sekcji witryny, oraz jasny kolor dla nagłówków oraz paragrafów. Wykorzystane czcionki Nunito oraz Lato sprawiają że tekst jest przyjemny dla oka. Podsumowując jest to rewelacyjny przykład minimalistycznej, ale przejrzystej oraz czytelnej witryny internetowej.

https://fxtemplarii.github.io/Soul-Linux-Responsive/

1 

Przykład Drugi

W przypadku arkusza stylów zastosowanego w przykładzie drugim od razu widać że coś się dzieje. W nagłówku strony mamy wstawione zdjęcie w tle, cała strona ma tak zwany efekt “fade-to-black” czyli wyłania się z białego koloru dzięki zastosowaniu animacji, oraz tekst nagłówka “wjeżdża” z lewego boku strony.
Kolorystyka strony jest jaśniejsza, ale również przyjemna dla oka. Widać więcej pracy włożonej w samo planowanie ułożenia strony, jak również w zastosowane elementy. Pierwszy raz pojawiają się formularze do kontaktowania się z właścicielem strony, oraz ikony, między innymi ikona w sekcji pobierania działa jak przycisk pobrania. Sekcje strony oddzielone są od siebie za pomocą tak zwanych “separatorów” w kolorze kontrastującym do kolorów teł sekcji. Reasumując jest to projekt bardziej zaawansowany głównie poprzez zastosowane elementy na stronie internetowej jak również poprzez wykorzystane przeze mnie style css, wprowadzające animacje czy inne sposoby na układanie elementów na stronie.

https://fxtemplarii.github.io/Soul-Linux-2-Responsive/

2

Przykład Trzeci

Strona oparta o trzeci styl css jest najbardziej zaawansowaną ze stron przedstawionych przeze mnie. Pokazuje ona umiejętności, które zdobyłem podczas realizowania stypendium zawodowego.
Strona posiada elementy, które nie pojawiły się we wcześniejszych stronach. Na uwagę zasługuje górne menu nawigacyjne, które po kliknięciu przenosi nas do odpowiedniej sekcji strony. Owe menu jest zamieszczone za pomocą frameworka o nazwie Bootstrap.
Cała strona przedstawiona jest w odcieniach szarości, do których dopasowane są odpowiadające im kolory czcionek.
W sekcjach załączone są ikony prezentujące przedstawiane elementy. Między sekcjami mamy dużo “światła” dzięki czemu strona jest jeszcze bardziej czytelna i przejrzysta, a wszystko to dzięki zastosowaniu zdecydowanie większych marginesów wewnętrznych sekcji.

https://fxtemplarii.github.io/Soul-Linux-3-Responsive/

3

Podsumowanie

Jak widać na zamieszczonych tu przykładach style css bardzo wpływają na wygląd i odbiór witryn internetowych, dają nam bardzo dużo możliwości pod kątem tworzenia wizualnej części stron internetowych. Dzięki temu każda strona w internecie może wyglądać inaczej, być unikatowa I wyróżniać się na tle innych. Wszystko zależy od kreatywności I pomysłu twórcy.
Wszystkie 3 przykłady arkuszy stylów css pokazują moją drogę od tworzenia prostych, minimalistycznych witryn, aż do rozbudowanych mogących służyć firmie/sklepowi. Dzięki stypendium w ramach projektu “Mazowsze - stypendia dla uczniów szkół zawodowych” pozyskałem środki, dzięki którym mogłem rozwijać umiejętności i wiadomości, przydatne mi w przyszłości na rynku pracy. Jestem zadowolony z przebiegu całego stypendium oraz z możliwości rozwoju w mojej ulubionej dziedzinie informatycznej. Wsparcie finansowe pozwoliło mi zainwestować w kursy, książki oraz sprzęt który pozwoli mi się rozwijać dalej, dzięki czemu nie będę stał w miejscu i będę konkurencyjny na rozwijającym się rynku pracy.

Opiekun: Bogumiła Bogucka

 

Maciej Kazimierski 2019

0
0
0
s2smodern
powered by social2s