Pomaluj stronę…

with 1 komentarz

Teraz przejdziemy do dopieszczania strony. Szkielet istnieje, ale jest … brzydki. Coś z tym trzeba zrobić. Dodać zdjęcia, kolor, czcionki, ikonki …

Możemy wyżyć się kreatywnie, wybrać jakąś znośną paletę barw. Mamy mnóstwo miejsc, gdzie można się zainspirować.

CSS.

Co to jest ten cały CSS? Są to kaskadowe arkusze stylu (z ang. Cascading Style Sheets), więcej na ten temat znajdziecie w Wiki. Tak w wielkim skrócie chodzi o poprawienie atrakcyjności strony www. W CSS-e tworzymy reguły, które kontrolują wygląd naszej strony. To właśnie tu ustalamy, jakie będzie tło poszczególnych elementów strony, jakie fonty (nie czcionki – bo to całkiem co innego wbrew pozorom – link). W arkuszach tych będziemy też deklarować właściwe pozycje, sposób wyświetlania elementów. Godna uwagi jest strona w3schools – zawiera podstawowe wiadomości oraz dobre praktyki stosowania i pisania deklaracji.

Istotne jest, aby style strony, czyli właśnie deklaracje dotyczące wyglądu, nie wpisywać w pliku .html. Według dobrych praktyk powinno się je wpisywać w oddzielnym pliku o rozszerzeniu .css. 

CSS jest o tyle fajną sprawą, że można za jego pomocą robić wiele bardzo nietypowych rzeczy. Na przykład animacje czy przejścia, podświetlenia, domniemany ruch… i wiele innych cudów.

Wiele bardziej zaawansowanych deklaracji znajdziecie na blogu CSS-Tricks. O właściwościach CSS poczytacie również na CSS Properties. Fonty znajdziecie na Google Fonts. Ikonki wstawiamy za pomocą strony Font Awesome.

Kod z Avocode.

Dzięki aplikacji Avocode możemy również wstawić od razu podstawowe deklaracje w pliku CSS. Wystarczy zaznaczyć właściwy element na projekcie, a w okienku po prawej pojawi się kod. Kopiujemy go tak jak zwykły tekst i wklejamy do swojego pliku Style.css. W ten sam sposób możemy zaimportować zdjęcia z projektu. 
Trzeba jednak pamiętać, że Avocode nie zakoduje za na strony. Wiele jeszcze musimy dopisać właściwych parametrów i wartości, aby strona prezentowała się tak jak w projekcie.

Paleta barw.

Zakładając bloga lub tworząc stronę www, zastanawiamy się skąd brać inspirację. Zwłaszcza jeśli nie czujemy się najsilniej w dopasowywaniu kolorów, stylów fontu i innych elementów.
Jest cały ogrom miejsc, które mogą nas zainspirować lub ugruntować własny styl. Gdzie szukać? Zacznijcie od Pinterest, Instagram i przykładowe strony mające w nazwie – design. Istnieją rankingi stron dotyczące właśnie ich wyglądu. Możecie poszperać w wyszukiwarce. Kilka stron dla Was:

Gdzie sprawdzić jakie barwy będą do siebie pasować?

Skąd zdjęcia?

Mamy dwie drogi w zależności, czy korzystamy z gotowego projektu i “tniemy” go, czy też projektujemy stronę od tzw. “zera”.

Pierwsze podejście pozwala nam za pomocą programu (Avocode) zaimportować wszystkie zdjęcia (jak również wszystkie kolory) do odpowiedniego folderu (np. Images) w naszym projekcie. I właśnie stamtąd będziemy podpinać odpowiednie zdjęcia do naszego pliku Style.css.

A co jeśli chcemy wszystko zrobić samemu? Nic skomplikowanego, lecz bardziej pracochłonne. Przede wszystkim musimy określić, co na tych zdjęciach chcemy, aby się znajdowało. Dlatego, jeśli robimy projekt strony sami, faza koncepcyjna jest bardzo istotna. Musimy mieć wszystko bardzo dobrze przemyślane, bo inaczej zagłębimy się w ogrom fajnych zdjęć, “mieszadeł” kolorów i innych narzędzi na bardzo długi czas. To wciąga i to bardzo. 😉 

Poniżej podaję kilka adresów, pod którymi znajdziecie zdjęcia do publicznego użytku (jeśli chcecie poczytać o licencjach zdjęć to tu).

Sass to las?

Słyszeliście kiedyś o Sass? To preprocesor CSS. OK. Nadal nic Wam to nie mówi. Prościej: to takie ustrojstwo, które ułatwia pracę z CSS, usprawnia ją i sprawia, że pracujemy wydajniej. Mniej zbędnego kodu w pliku to efekt działania Sass-a. Ten temat chciałabym zgłębić w osobnym poście. Dziś tylko wspomnę, że coś takiego istnieje, a poczytać o nim możecie o tu.  Strona domowe tego narzędzia to sass-lang.com. A tu jeszcze polska strona o Sass – link. 

Po co wspominam o tym preprocesorze? Pisząc (tworząc) stronę możemy zrobić wszystko “na piechotkę” i “od zera”. To jest jak najbardziej w porządku, bo uczymy się podstaw. Ale na późniejszym etapie warto poznawać narzędzia, dzięki którym pracujemy tak, aby mądrzej wykorzystywać własny czas. Czas również innych, którzy będą być może później pracować na waszym kodzie. Dlatego warto dbać o porządek i sprawność w pisaniu kodu. Jeśli od początku będziemy pilnować szczegółów i składni kodu, inni będą nam wdzięczni, a my nabędziemy dobrych nawyków.  

Jak się uczyć?

Tak jak przy HTML, skarbnicą wiedzy jest sam internet. Kilka stron już przytoczyłam powyżej. Gdzie jeszcze szukać informacji?
Skarbnicą wiedzy może być również developer.mozilla.org. 
Dobrym pomysłem jest też poszukanie darmowych ebooków wydawnictwa O’Reilly.
Wspomniany w poście o HTML-u Jon Duckett też daje radę. Mam wrażenie, że jego książki są pomału traktowane jak biblie web-devolopera.

Pamiętajcie też o kursach na Udemy (zdarzają się darmowe, warto polować na promocje), FreeCodeCamp, Strefa Kursów czy Codecademy.
Poza tym przeszukanie YouTuba też przyniesie nam wiele wyników. 

Najważniejsze mimo wszystko jest praktykowanie. Samo pochłanianie wiedzy z kursów, filmików czy książek nic nie da, jeśli nie będziemy sami powtórzyć wszystkich poznanych umiejętności i technik. Dlatego: ćwiczenie, ćwiczenie i ćwiczenie.

Dołącz do społeczności bloga

Signup now and receive an email once I publish new content.

Wyrażam zgodę na przekazywanie moich danych osobowych MailChimp ( more information )

Twój e-mail będzie chroniony. W każdym momencie będziesz mógł/mogła się wypisać.

Follow Danuta:

Blogująca mama dwóch chłopców. Ciągle ucząca się i poszukująca pomysłu na siebie. Obecnie pogłębiająca tajniki programowania.

Latest posts from

One Response

  1. […] będę ponownie podawać skąd brać zdjęcia do strony, gdyż cały spis proponowanych składów znajdziecie w tym wpisie. Pamiętaj, że każde zdjęcie objęte jest prawami autorskimi. Tu zajmiemy się kilkoma rzeczami, […]

Zostaw komentarz