Projekt i implementacja systemów webowych

mgr inż. Maciej Małecki

Plan zajęć

1. Architektura aplikacji webowej. Języki HTML5 i CSS3.
2. Wprowadzenie do języków JavaScript oraz TypeScript.
3. Architektura, backend i Spring.
4. Techniki utrwalania danych, ORM.
5. Wprowadzenie do frameworku Angular.
6. Programowanie asynchroniczne i reaktywne.
7. Cloud computing.
8. Testowanie

Zasady zaliczeń

Materiały

Strona z informacjami na temat kursu:

https://pwr-piisw.github.io/materialy/

Kurs ma własną organizację na GitHubie:

https://github.com/pwr-piisw

Slajdy z wykładów dostępne są on-line:

https://pwr-piisw.github.io/materialy/#_harmonogram

Aplikacje webowe

Źródło: https://www.pinterest.com/buccus3/women-and-retro-computers/

Architektura klient-serwer

Architektura klient-serwer

Aplikacja webowa

Historia aplikacji webowych

W praktyce struktura adresu strony odzwierciedlała położenie pliku na serwerze.

Statyczna zawartość nie zawsze wystarczy...

Aplikacje webowe - kalendarium

Klasyczna aplikacja webowa

→

A gdyby tak każda aplikacja webowa składała się z jednego dokumentu HTML,

a komunikacja z serwerem odbywała się wyłącznie z użyciem podejścia AJAX?

Języki HTML i CSS

HTML

HTML to język bazujący na znacznikach służący to tworzenia stron sieci Web.

Przykład dokumentu HTML:

Struktura dokumentu HTML

• Dokument HTML składa się ze elementów oraz z tekstu.
• Każdy element zbudowany jest ze znaczników (ang. tags), w szczególności ze znacznika otwierającego i zamykającego.
• Struktura znaczników musi tworzyć drzewo.
• W szczególnych przypadkach znacznik zamykający może być pominięty (<img>, <br>, <hr>, itp).

Atrybuty elementów HTML

• Atrybuty dostarczają dodatkowej informacji dla elementu.
• Atrybuty muszą być umieszczone w znaczniku otwierającym.

Elementy semantyczne HTML

CSS

• Umożliwia opis formy prezentacji dokumentu HTML.
• Aspekty prezentacyjne są odseparowane od treści dokumentu.
• Bardzo duże możliwości formatowania i pozycjonowania treści.
• CSS3: eliminacja konieczności używania JavaScript do bardziej zaawansowanych efektów wizualnych.

CSS: Stylowanie dokumentu

CSS: Stylowanie dokumentu

          header {
            font-size: large;
            font-weight: bold;
            font-family: courier;
            text-align: center;
            background-color: lightgreen;
          }
          h1 {
            font-family: tahoma;
            font-style: italic;
          }
          p {
            text-align: justify;
          }
          footer {
            text-align: right;
            color: darkblue;
            font-weight: bold;
          }
        

Block vs inline

        .bordered {
          border-style: solid;
          border-color: black;
          border-width: 1px;
        }
      

Model pudełkowy

Model pudełkowy

        p {
            padding: 10px 15px 20px 25px;
            border-width: 7px 5px 3px 1px;
            border-style: solid;
            border-color: navy;
            border-radius: 5px 10px 20px 30px;
            background-color: #f0f0f0;
            margin: 10px 20px
        }
        span {
          border-width: 2px;
          border-style: dotted;
          border-color: brown;
        }
      

Zarządzanie układem dokumentu HTML

        div {
          padding: 20px;
        }
        div#first {
          background-color: yellow;
        }
        div#second {
          background-color: green;
        }
        div.col {
          width: 40%;
        }
        div.left {
          float: left;
        }
        div.right {
          float: right
        }
      

FLEX layout & Media query

        .flex-container {
          display: flex;
          flex-direction: row;
        }

        @media (max-width: 800px) {
          .flex-container {
            flex-direction: column;
          }
        }
        

to wszystko na dzisiaj!