HTML - CSS - Sass

Tu jesteś

Tu jesteś

Start

4 JPA - Hibernate 5 REST 6 Spring 7 Aplikacja Webowa

[BACKEND]

8 Mikroserwisy

Webserwisy

[BACKEND]

Tworzenia backendu mikroserwisów można
uczyć się już gdy tylko opanujemy Springa,
albo też dopiero po zdobyciu
nieco prostszej umiejętności tworzenia
backendu aplikacji webowej.
Mówimy prostszej, ponieważ najczęściej
frontend aplikacji webowej tworzy
z backendem relacje 1:1.
Natomiast mikroserwisy to zwykle
środowisko rozproszone, co często
prowadzi do sytuacji,
w której występuje kilka "frontendów"
komunikujących się z kilkoma "backendami".

9 HTML, CSS, Sass

Po opanowaniu backendu można
rozwijać się w stronę pozycji fullstack
dewelopera. W tym celu wymagane
jest nauczenie się kolejnych rozwiązań
frontendowych. Oczywiście nic nie stoi na
przeszkodzie, by rozwijać się w kierunku
frontendu już w trakcie nauki backendu.

10 Bootstrap

Material

Przystanek Backend

Programista fullstack nie tylko buduje backendowe fundamenty aplikacji, ale również tworzy przeglądarkową część kodu, czyli tak zwany frontend. Pierwszy krok w kierunku pozycji fullstack dewelopera kierujemy w stronę absolutnych podstaw, jakimi są technologie umożliwiające tworzenie prostych widoków - HTML i CSS.

HTML - Hypertext Markup Language

HTML to standardowy język znaczników dla dokumentów, które są wyświetlane w przeglądarce internetowej. Nie jest to zatem język programowania, a jedynie zbiór elementów (tagów) rozumianych przez przeglądarkę. Wynikiem przetwarzania dokumentu zawierającego takie znaczniki jest strona pokazywana użytkownikowi. Strona taka najczęściej zawiera tekst, obrazki oraz inne składowe i jest odpowiednio sformatowana (ma określony wygląd). Co więcej posiada ona elementy hypertekstowe, a więc linki, które umożliwiają przechodzenie do kolejnych stron zarówno w ramach tej samej domeny jak i do zupełnie innych domen i stron znajdujących sie w sieci (na przykład w internecie, ale może to być też sieć lokalna - intranetowa).

Aby dokument był poprawnym dokumentem HTML musi zawierać określoną strukturę tagów (znaczników):

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Dokładnie taką strukturę przedstawia portal, który doskonale opisuje podstawowe zagadnienia związane z HTML-em. Zawiera on dokładny opis kolejnych tagów wraz z przykładami - www.w3schools.com/html. Dla zainteresowanych historią oraz szerszą użytecznością HTML-a polecamy Wikipedię - Wikipedia - HTML.

CSS - Cascade Style Sheet

W poprzednim paragrafie napisaliśmy, że strona internetowa posiada określony wygląd. Samym HTML-em można wypracować wiele ciekawych form wizualnych, ale w dalszym ciągu nie osiągniemy maksymalnych możliwości przeglądarek internetowych. W tym celu bardzo przydatny jest CSS-a, a więc język opisujący styl dokumentu HTML. Innymi słowy, opisuje on sposób wyświetlania elementów HTML. Wyróżniamy kilka sposobów, których możemy użyć by "ostylować" nasz dokument:

Style możemy zdefiniować dodając nowy znacznik style do sekcji head:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>
h1 {
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>

</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Style możemy zgromadzić w konkretnym pliku z rozszerzeniem css, by następnie podlinkować go do naszego dokumentu HTML:
```
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
```
W podobny sposób możemy również podpiąć plik ze stylami, który znajduje się "gdzieś w sieci". Nie jest to jednak najlepsze rozwiązanie, gdyż wtedy uzależniamy się od dostawcy styli (a ten może je na przykład usunąć), a dodatkowo spowalniamy proces wczytywania strony (musi ona oczekiwać na zdalne podlinkowanie zasobu).
```
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

</head>
...
```

Style możemy również wpisywać w ramach znacznika HTML dodając przy tym atrybut style:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>
<body>

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Wszystkie metody są opisywane w ramach materiału na stronie www.w3schools.com/css.

Ze wszystkich wyżej wymienionych propozycji najbardziej zgodne z dobrymi praktykami jest wydzielenie osobnego pliku, w którym przechowamy style, a następnie podlinkujemy je do naszej strony. Wrzucanie styli bezpośrednio do kodu powoduje gromadzenie się duplikatów, a do tego jest mało czytelne. Natomiast wydzielanie osobnych klas w ramach sekcji head staje się problematyczne gdy chcemy ich reużyć w innych plikach. Do tego nagromadzenie dużej ilości styli w jednym dokumencie również nie wygląda najlepiej.

Sass - Syntactically Awesome Style Sheets

W profesjonalnych, dużych systemach, ręczne tworzenie styli w pliku css też jest dosyć uciążliwe, ze względu na ograniczone możliwości samego css-a. Z tego powodu stosuje się tak zwane preprocesory CSS. Doskonałym przykładem takiego rozwiązania jest Sass, czyli Syntactically Awesome Style Sheets.

Sass, zresztą podobnie jak inne preprocesory, umożliwia pisanie kodu, a przez to używanie funkcji i innych ciekawych rozwiązań daleko wybiegających poza standardowe możliwości samego css-a. Jeśli dodamy do tego, że finalnie pliki sass (bądź scss) są kompilowane do rozumianych przez przeglądarkę plików css, to jest to coś co z pewnością musi nas zainteresować. Co nam daje Sass, a czego nie ma CSS?

zagnieżdżoną składnię - układamy elementy tak jak są faktycznie ustawione w dokumencie
zmienne - definiujemy coś jako zmienną, na przykład kolor czerwony i używamy gdzie chcemy
operatory i funkcje matematyczne - dodawanie, mnożenie, dzielenie, round, ceil, percentage itp.
funkcje operacyjne - na przykład takie działające na kolorach jak lighten, darken, saturate itp.
interpolacje stringów - wprowadzanie zmiennych do stringów
@extends - rozszerzanie stylu dodatkowymi właściwościami i przez to tworzenie nowego stylu
@function - umożliwia stworzenie reużywalnych funkcji, któych rezultat może stać się wartością własności css
@mixin - podobne do funkcji ale kompilowane są do stylu css, posiadają parametry oraz mogą być przeciążane
@import - importowanie innych plików do pliku bieżącego
dyrektywy kontrolne - @if, @for, @each, @while

Appa Notka. Tematy poruszone w tej sekcji są bardzo rozbudowane. Będziemy starali się dorzucać tutaj kolejne zagadnienia z biegiem czasu. Na tę chwilę polecamy linki:
HTML Tutorial
CSS Tutorial
Sass Tutorial
Sass - Podstawy

Mapa umiejętności programisty Java

Nie jesteś biegły w Javie?

Zobacz nasz kurs programowania Java

Interesuje Cię szerszy zakres wiedzy?

Zerknij na Java board

Zapisz się do newslettera :

Stale się rozwijamy, a więc bądź na bieżąco!
Na ten adres będziemy przesyłać informacje o ważniejszych aktualizacjach, a także o nowych materiałach pojawiających się na stronie.

Polub nas na Facebooku:

Nasi partnerzy:

stackshare

Javappa to również profesjonalne usługi programistyczne oparte o technologie JAVA. Jeśli chesz nawiązać z nami kontakt w celu uzyskania doradztwa bądź stworzenia aplikacji webowej powinieneś poznać nasze doświadczenia.
Kliknij O nas .

Starter Jak to działa Aplikacja

Obserwuj nas Polityka Cookies Regulamin Licencja Ochrona prywatności

Pozycjonowanie stron: Grupa TENSE