Strona portfolio cz. 6 – HTML + CSS. Jak ustawić head, czcionki i RWD.

Dzisiaj opiszę jak ‘skonfigurować’ stronę aby wyświetlała się w pożądany sposób. Co przez to rozumiem? Chodzi mi o prawidłową interpretację kodu przez przeglądarkę oraz modyfikacje wyglądu strony wraz ze zmianą rozdzielczości czyli Responsive Web Design (RWD).

Seria strona portfolio.

Ten wpis jest częścią serii Portfolio. Dzisiaj dla odmiany omawiane zagadnienia będą miały charakter bardziej globalny. Wiedzę tą można więc zastosować przy wielu innych projektach.

W skład serii wchodzą:

  1. Część 1 – Jak stworzyć projekt graficzny. TUTAJ opisywałem jak się zabrać do tworzenia layoutu.
  2. Część 2 – HTML + CSS, part I – Hero.
  3. Część 3 – HTML + CSS, part II – Sekcja Home.
  4. Część 4 – HTML + CSS, part III –  Opiszę jak wykonałem sekcję What I do.
  5. Część 5 – HTML + CSS, part IV – Opiszę jak wykonałem sekcje About & Contact. HTML + CSS, part V.
  6. Część 6 – HTML + CSS, part V – czyli ten wpis 🙂 kwestie globalne strony np. head, linki, RWD.
  7. Część 7 – JavaScript – definiowanie zachowania poszczególnych elementów na stronie.

Pełny projekt dostępny do podglądu tutaj:

http://bartlomiejcis.eu/

Struktura HTML

Prawidłowo napisany kod HTML powinien mieć odpowiednią strukturę, gwarantuje to prawidłowe wyświetlenie strony. Jest to tzw. struktura DOM Document Object Model. Nie będę się o tym dzisiaj rozpisywał zachęcam jednak do zgłębienia tego zagadnienia gdyż jest to przydatna wiedza teoretyczna. Tak czy inaczej podstawowa struktura pliku HTML wygląda tak:

Co my tu mamy?

Linia 1 czyli znacznik <!DOCTYPE html> mówi przeglądarce, że ma do czynienia z plikiem HTML i ona potem sobie z tym radzi. W poprzednich wersjach HTML tych znaczników było więcej ale teraz w zasadzie ten jeden wystarcza.

Następnie jest znacznik <html></html>  który rozpoczyna i kończy kod. W środku są jeszcze <body></body> gdzie umieszczamy właściwą zawartość strony i <head></head> gdzie wstawiamy informacje dodatkowe.  Jakie informacje? Na tym się dzisiaj skupię.

<head></head>

Tak wygląda przykładowa zawartość znacznika <head>, zawiera on większość elementów które potrzebne są do prawidłowego funkcjonowania strony.

Opiszę tutaj po kolei co oznaczają poszczególne linie kodu.

<title>ABC</title>

To jest tytuł strony. Ten tekst będzie widoczny na zakładce (tabie, karcie) przeglądarki.

Teraz kilka elementów z kategorii meta-tagów. Kiedyś na ich podstawie wyszukiwarki indeksowały strony jednak współczesne algorytmy biorą pod uwagę więcej aspektów. Warto je dobrze ustawić bo definiują m.in. jak strona będzie wyglądała w przeglądarce.

<meta charset=“utf-8″>

Ustawiamy system kodowania Unicode.

<meta name=”description” content=“ABC”>

Opis strony widoczny w wyszukiwarce

<meta name=”keywords” content=“ABC”>

Słowa kluczowe lub frazy po których strona może być wyszukiwana w przeglądarce.

<meta name=”author” content=“ABC”>

Imię, Nazwisko lub inne informacje na temat autora strony.

<meta property=”og:image” content=”www.abc.pl/photo.png” />

Tak ustawia się grafikę która wyświetla się po wrzuceniu linka np. na facebooka. Bez tego jak wrzucisz link np. w komentarzu to wyświetli się tylko tekst. Ważne aby podać bezpośredni link zewnętrzny www do grafiki znajdującej na serwerze. W tym wypadku photo.png. Linki wewnętrzne nie działają.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

Ta formuła definiuje zachowanie się strony na urządzeniach mobilnych. Ważne np. przy użyciu Bootstrapa.

Kolejna kategoria elementów czyli <link>. Po prostu podłączamy do kodu oddzielne pliki.

<link rel=”shortcut icon” type=”image/ico” href=”./images/favi-min.png” />

Tak dodaje się favicon czyli małą grafikę wyświetlającą się przy opisie na karcie przeglądarki.

<link href=”./css/style.css” rel=”stylesheet” type=“text/css”>

Tutaj podłącza się plik ze stylami CSS z rozszerzeniem .css. Definiujemy rel i type, href czyli właściwy link zazwyczaj (nie próbowałem inaczej) ustawia się linkiem wewnętrznym.

<link href=”bootstrap/css/bootstrap.min.css” rel=“stylesheet”>

W ten sposób dodaje się Bootstrapa czyli framework bardzo ułatwiający (w wielu przypadkach) tworzenie stron. Tutaj plik .css czyli style poszczególnych elementów.

Kolejna kategoria to podłączanie skryptów JS za pomocą znaczników <script></script>

<script src=“bootstrap/js/bootstrap.min.js”></script>

Dodajemy plik .js do Bootstrapa o ile go używamy.  W tym wypadku link wewnętrzny.

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

O ile używamy to w ten sposób podłączamy bibliotekę jQuery. Jak widać link zewnętrzny.

Czego tu brakuje?

W powyższym <head>ie nie ma jeszcze dwóch ważnych elementów – pliku ze stylami JavaScript i czcionek. Jeśli chodzi o pliki JavaScript to dobrą praktyką jest umieszczenie ich pod całym kodem wewnątrz znacznika <body> przed samym </body>.

<head></head>

<body>

      <div class=“whatever1”></div>

      <div class=“whatever2”></div>

<script src=“./js/scripts.js”></script>

</body>

Dlaczego tak? W ten sposób dokument czeka na załadowanie wszystkich elementów HTML a potem dopiero definiuje ich zachowanie za pomocą JavaScriptu. Jeśli wrzuci się pliki stylów na początku do heada może się okazać, że strona nie będzie działała tak jak chcemy.

Podłączanie czcionek.

Jeśli chcemy nadać naszej stronie unikalny wygląd i dodać fajne czcionki należy je podpiąć do projektu. Są na to conajmniej 3 sposoby.

Metoda 1 – wrzucamy link zewnętrzny do <head>’a.

Robi się to np. tak:

<link href=”https://fonts.googleapis.com/css?family=Roboto” rel=“stylesheet”>

A potem do pliku CSS:

font-family: ‚Roboto’, sans-serif;

Powyżej dołączyliśmy do projektu czcionkę Roboto ale skąd wziąłem ten link? Po prostu użyłem biblioteki czcionek Google Fonts  (lub jakiegoś innego serwisu tego typu), znalazłem odpowiednią czcionkę, wybrałem ją a serwis mi wygenerował linki. Potem się je kopiuje i wrzuca do odpowiednich plików. Czcionki ładowane są online i jak jesteś w trybie offline to ich niestety nie widać.

Metoda 2 – wrzucamy link wewnętrzny do <head>’a.

Czyli taki:

<link href=”./fonts/Roboto.otf” rel=”stylesheet” type=”font”>

W CSS:

font-family: ‚Roboto’, sans-serif;

Tutaj mamy na dysku plik .otf z czcionką i wrzucamy do katalogu projektu. Czcionka ładuje się wtedy z naszego serwera. Skąd wziąć czcionkę? Po prostu ściągamy z Font Squirela albo 1001Fonts  lub skąd indziej 🙂

Ta metoda działa na Chromie i Safari lecz Firefox nie jest w stanie tej czcionki przeczytać. W sumie słabo…

Metoda 3 – używamy @font-face

W ten sposób czcionka będzie znajdowała się na naszym dysku i obsłuży ją też Firefox.

Na początku potrzebujemy naszego pliku czcionek np. w formacie .otf lub .ttf. Potem używamy narzędzia Webfont Generator. Ważne aby w ustawieniach zaawansowanych dodać obsługę znaków polskich bo inaczej się po polsku na stronce nie rozpiszesz 🙂

Po zakończeniu konwersji trzeba ściągnąć paczkę. W środku będzie kilka plików, nas interesują tylko font-name.woff i font-name.woff2. Do tego jest jeszcze plik stylesheet.css który otwieramy w edytorze tekstu. Pliki czcionek kopiujemy do naszego projektu a do naszego pliku styles.css kopiujemy następującą frazę z pliku stylesheet.css:

@font-face {

    font-family: ‚roboto;

    src: url(‚roboto.woff2’) format(‚woff2’),

         url(‚roboto.woff’) format(‚woff’);

    font-weight: normal;

    font-style: normal;

}

Jeśli chcemy użyć czcionki to wywołujemy:

font-family: ‚roboto’, sans-serif;

I gotowe 🙂

To co w końcu wybrać? Linki zewnętrzne czy wewnętrzne?

Linki wewnętrzne są szybsze więc jeśli zależy Ci na wydajności używaj linków wewnętrznych. Nasza strona (lub jej serwer) nie musi łączyć się z serwerem zewnętrznym i oszczędza czas. Używanie linków zewnętrzych jest zazwyczaj łatwiejsze jednak niesie ze sobą kolejne zagrożenie. Jeśli zewnętrzny serwer miałby awarię to tracimy dostęp do plików… I nasza strona traci funkcjonalność.

Jaki sposób podpinania plików wybierzesz? To już zależy od Ciebie 🙂 Obydwa działają.

Linki wewnętrzne.

Jeżeli zdecydujesz się na używanie linków wewnętrznych to należy mieć na uwadze jeszcze jedną rzecz – wewnętrzna struktura folderów w naszym projekcie. Otóż często okazuje się gdy podpinamy pliki to HTML ich po prostu nie widzi. Jak używać linków wewnętrznych aby uniknąć pomyłek?

Załóżmy taki przykład, nasz projekt wygląda następująco:

|- app/

      |- styles/

             |- style.css

      |- fonts/

      |- images/

            |- photo.png

      |- js/

            |- scripts.js

      |- scss/

|- index.html

Aby dostać się do pliku style.css z poziomu pliku index.html należy użyć następującego linku (chodzi o kropkę przed /app):

./app/styles/style.css

Pojedyncza kropka znaczy – startuję z równorzędnego poziomu (dla pliku index.html) i idę dalej tzn. /app/styles/style.css

Jeżeli chcemy np. do pliku style.css dodać plik photo.png należy cofnąć się o jeden folder i wtedy szukać ścieżki. Znaczy to tyle, że trzeba dodać drugą kropkę przed ścieżką np:

../images/photo.png

Każda kropka w linku to jeden poziom w strukturze folderów.

Generalnie rzecz biorąc linki bywają kapryśne, jednak mając na uwadze tą zasadę powinno udać się podpiąć każdy plik 🙂

Responsive Web Design RWD.

Metoda RWD sprawia, że strona wygląda dobrze na każdym urządzeniu. Z pozoru wydaje się to skomplikowane jednak w rzeczywistości jest inaczej. Dostosowanie się widoku do szerokości ekranu sprawdza się do użycia formuły media query w arkuszu styli .css.

Media query.

Wygląda to w ten sposób:

Na początku definiuje szerokość ekranu (“próg”) np. 1366px a potem styluje kolejno te selektory, klasy lub id które wymagają poprawki w danej rozdzielczości. W tym wypadku usuwam widok #portfolio i zmieniam ustawienia czcionki h4 w id=#stats. Możemy ustawić dowolną ilość takich “progów” i dopasowywać wygląd strony.

W praktyce jest to dość mozolna praca ( hehe w zasadzie jak i cała reszta 🙂 ). Jak używa się np. Bootstrapa to proces RWD jest nieco zautomatyzowany poprzez użycie specjalnych klas.

Istnieje też filozofia Mobile First która zakłada tworzenie widoków zaczynając od najmniejszych ekranów czyli smartfonów kończąc na rozdzielczościach full HD lub więcej.

Podsumownie.

Jak widać aby skonfigurować odpowiednio stronę internetową należy wziąć pod uwagę wiele aspektów. Trzeba sporo precyzji i cierpliwości aby zamienić zaprojektowany widok w funkcjonalną stronkę lub aplikację. No ale satysfakcja jest jak się skończy 🙂 Jak już wszystkie widoki są gotowe przechodzi się do następnego etapu projektu czyli definiowania skryptów JSem. O tym w następnych częściach.