Modern WEB Technologies

Wykład przeznaczony jest dla studentów II roku I stopnia Informatyki na WPPT. Odbywa się w czwartki w godz. 18:55 - 20:30 w sali 1.31/C-13. Na stronie tej znajdziesz informacje o zasadach zaliczenia, realizowanym materiale, literaturze oraz listę zadań.

Literatura

1. Introducing HTML5, Bruce Lawson and Remy Sharp, New Riders 2011
2. JavaScript: The Definitive Guide, David Flanagan, Sixth Edition-O'Reilly Media, 201
3. Eloquent JavaScript A Modern Introduction to Programming, Marijn Haverbeke
4. Beginning PHP and MySQL: From Novice to Professional, Fourth Edition, W. Jason Gilmore, Springer, 2010
5. SASS and Compass in Action, Wynn Netherland, ..., Manning, 2013
6. W3Schools.com
7. Walidator WWW
8. Walidator CSS
9. Link do dobrego stylu "reset"
10. Koła kolorów: Adobe Color CC, Paletton - The Color Scheme Designer
11. Google closure compiler
12. JS lint
13. Strona do testowania dostępności: http://wave.webaim.org/
14. Pytania do mnie związane z kursem: Q&A

Materiały do nauczenia się

1. w3schools: CSS Box model: zróbcie wszystkie zadania z tej strony
2. w3schools: Selektory CSS
3. w3schools: Podstawy PHP
4. Obrazki na ćwiczenia images.zip

Do realizacji zadań związanych z budowanymi stronami WWW na razie nie stosujemy żadnych narzędzi ani bibliotek czy też frameworków (czyli - bez bootstrapa, bez jQuery itp). Korzystamy tylko z Notepad++ lub z Sublime Text.

Zadania

1. Silne składowe spójne:
   1. Na zbiorze $\ZZ$ określamy relację $(a\to b) \IFF (a|b)$. Wyznacz silne składowe spójne w grafie $(\ZZ,\to)$.
   2. Niech $U$ i $V$ będą silnymi składowymi spójnymi skierowanego grafu. Pokaż, że $U=V$ lub $U\cap V=\emptyset$.
   3. Wywnioskuj z poprzednich zadań, że każdy graf skierowany jest rozłączną sumą silnych składowych spójnych.
2. Zacznij samodzielnie przerabiać wszystkie przykłady ze strony www.w3schools.com/html/. Pod trzy tygodnie powinniście (czyli w okolicach 15 marca) znać wszystkie pokazane tam elementy.
3. [6-kolumnowa siatka]. Zbuduj samodzielnie "grid system" oparty na podział na 6 kolumn równych szerokości. Odstępy między kolumnami powinien wynosić 1% szerokości nadrzędnego obiektu. System powinien zawierać klasy o nazwach col-1-6, col-2-6, ... , col-6-6. Zapisz ten system w oddzielnym pliku css o nazwie grig.css. Przetestuj jego działanie na czymś podobnym do pierwszego zadania (przed pierwszym wykładem).
   Spróbuj rekurencyjnie zagłębić zbudowany system.
4. Zacznij samodzielnie przerabiać materiał ze stron www.w3schools.com/css/
5. Zaprojektuj swoję kartę informacyjną. Inspiracji możesz szukać na stronie w3schools.com.
6. Pierwszy projekt. Budujemy portal o nazwie "Moje przygody z edukacją". Ma on być złożony z kilku stron WWW. Strona główna zawierać ma linki do stron poświęconych poszczegółnym semestrom studiów oraz o Twoich aktywnych hobby (takich, które mają coś wspólnego z edukacją). Na tych stronach mają się znajdować informacje o wszystkich kursach w któych brałeś udział w danym semestrze. Każdy opis ma zawierać krótkie informacje o tym czego się nauczyłeś na nim oraz co zamierzasz samodzielnie uzupełnić (taka lista "my ToDo").
   Technologia: tylko HTML5 + CSS3; wszystko piszemy sami; nie stosujemy żadnych bibliotek. Na wykładzie omówimy szczegóły projektu i pokażę przykład.
   Termin: szkic ma być gotowy do dnia 16.03.2018, a całość do 30.03.2018 i oddane mają być prowadzącemu laboratoria w dniu ostatnich zajęć upływających przed tym terminem.
   UWAGA: (1) kody muszą być całkowicie poprawne. (2) zwróććie uwagę na poprawność stosowania znaczników semantycznych (3) spróbujcie stosować konsekwentnie zasadę CRAP.
7. Zoptymalizuj kod CSS służący do wyświetlenia trójkąta skierowanego w prawą stronę (coś w tym stylu:▶, ale znacznie ładniej).
8. Zaprojektuj za pomocą css flagę polską. Pamiętaj, że studiujesz na uczelni technicznej
9. Zadania programistyczne I w języku JavaScript (robimy to na laboratoriach):
   1. Napisz funkcję suma, która oblicza sumę dwóch liczb
   2. Napisz wariant funkcji suma, którą możesz zastosować do dowolnej liczby argumentów, np. suma(2,3,22,14) (poczytaj o parametrze arguments funkcji).
   3. [Fizz Buzz Test] Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.
   4. Oprogramuj GCD
   5. Oprogramuj Extended GCD
10. Przepuść swoje kody przez jslint oraz google closure compliler
11. Pokaż poprawność omówionej na wykładzie konstrukcji złotego podziału za pomocą liniki i cyrkla.
12. Przenalizuj pod kątem zasady C.R.A.P i "Negative Spaces" strony osoby prowadzącej laboratorium do tego wykładu na które jesteś zapisany.
13. Zapisz kod ze strony JSHideShow05.html do pliku o nazwie accordion.js (pamiętaj o kodowaniu utf-8) w podkatalogu o nazwie js, podłącz go do strony testowej za pomocą polecenie <script src='js/accordion.js'></script> (w sekcji head) i przetestuj na elemencie typu accordion.
14. Napisz skrypt służący do wyrównywania wysokości elementów na stronie. Do pobrania wysokości elementu el posłuż się funkcją el.offsetHeight, a do ustawienia wysokości może się posłużyć konstrukcją el.style.height = h + "px";, gdzie h jest wyliczoną wysokością w pixelach.
15. Oprogramuj dwa przyciski służące do zmiany rozmiaru fontu elementów strony. Wskazówka:
    1. rozmiar fontu elementu body można oczytywać i zapisywać za pomocą document.body.style.fontSize
    2. przydać Ci się może funkcja parseInt()
    3. sprawdź jaką wartość mają wyrażenia ""||16 oraz 24||16 (uwaga: 16px to domyślny rozmiar fontu większości przeglądarek).
16. Drugi Projekt. Projekt realizujemy w oparciu o Projekt 1, czyli nadal budujemy portal "Moje przygody z edukacją".

    1. Realizujemy strony w technologii PHP. Opieramy go o generator stron, który realizujemy za pomocą obiektu PHP. Początek każdej strony ma wyglądac mniej więcej tak:

       <?php
       require_once(__DIR__."/PHP/MyPage.php");
       $P =  new myPage("Jan Kowalski: edukacja");
       $P->SetDescription("Główna strona witryny Jana " . 
           "Kowalskiego poświęconej przygodom edukacyjnym.");
       echo $P->Begin();
       ?>
       <header id="main-header">
       ....
       </header>
       

       a koniec mniej więcej tak

       <?php echo $P->End();?>
       

    2. Pliki css rozpoczynamy od reset.css. Następnie dodajemy, w miarę potrzeby, pliki grid.css i mojstyl.css
    3. Tym razem generujemy wszystkie strony. Uzupełniamy o swoje teksty, nie stosujemy "lorem ipsum..."
    4. Eliminujemy wszystkie usterki z Projektu 1.

    Termin: szkic ma być gotowy do dnia 27.04.2018, a całość do 11.05.2018 i oddane mają być prowadzącemu laboratoria w dniu ostatnich zajęć upływających przed tym terminem.
    UWAGA: Obowiązują te same zasady poprawności co w projekcie 1.
    Szczegóły i używaną technologię omówimy sobie na wykładzie w dniu 5.04.2018.
    UWAGA: oczywiście możecie stosować javascript.
    UWAGA: oszczędzisz masę czasu, jeśli posłużysz się językiem SASS
17. Zbuduj okno z elementem <frame> zawierającym jeden element typu textarea, z dwoma przyciskami button. Po naciścięciu pierwszego przycisku okno ma wyliczyć liczbę liter we wprowadzonym tekście do textarea zaś drugi ma służyć do oczyszczenia textarea oraz starych wyliczeń.
18. Zbuduj podobne okno do okna z poprzedniego zadania. Po naciśnięciu pierwszego przycisku wszystkie znaki we wprowadzonym tekście z pierwszej kolumny poniższej tabeli mają być zastąpione znakami z drugiej kolumny.

    &	&
    <	&lt;
    >	&gt;
    "	&quot;
    '	&#x27;
    /	&#x2F;

    Możesz posłuzyć się następującym wyrażeniem regularnym języka javascript: /[&<>"'\/]/g. Drugi przycisk ma służyć do kopiowania tekstu do schowka. To narzędzie może Ci się przydac do wyświetlania fragmentów kodu html na stronach html.
19. Rozważmy następujący styl:

    html { box-sizing: border-box;}
    *, *:before, *:after { box-sizing: inherit;}
    .row:after{ content: ""; clear: both; display: table;}
    .col{ float: left; width: 50%;} 
    

    Napisz kod w języku PHP, który wygeneruje grid złożony $n$ wierszy oraz $2^k$ kolumnami z losowymi kolorami tła. Kolumny mają być generowanie rekurencyjnie. Tam ma, mniej wiecej wyglądać wygenerowany wiersz dla $k=2$:

    <div class="row">
      <div class="col">
         <div class="row">
            <div class="col" style="background: #3a2b3d">&nbsp</div>
            <div class="col" style="background: #b4d273">&nbsp</div>    
         </div>
      </div> 
      <div class="col">
         <div class="row">
            <div class="col" style="background: #665d32">&nbsp</div>
            <div class="col" style="background: #076da3">&nbsp</div>    
         </div>
      </div> 
    </div>
    

    Przetestuj zachowanie przeglądarek dla $n=20$ i $k=1,\ldots,9$. Możesz posłużyć się następującym kodem do wygenerowania losowych kolorów:

    $rand = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
    function RandomColor(){
      global $rand;
      return '#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];
    }
    

20. Zainstaluj kontroler gulp w środowisku node oraz gulp-sass. Przydać ci się mogą wskazówki umieszczone na stronie wykładu.
21. Zastosuj gulp-sass'a do skompilowania następującego kodu języka SASS:

    $topmenu-bg : #33b5e5;
    #topmenu{
      background: lighten($topmenu-bg, 20%);
      color: #222;
      ul {
        list-style: none;
        li {
          display: block;
          &.active {
            color: #12d232;
          }
          a {
            color: 10ea30;
            &:hover{
              color: #ce1211;
              }
          }
        }
      }
    }
    

    Przenalizuj wynik, pomyśl o uproszczeniu struktury css, popraw scss i ponownie skompiluj.
22. Zrób podobny ekspryment z następującym kodem:

    %light-element{
      background: lighten($topmenu-bg, 20%);
      color : #333;
      padding: .5em 1em;
    }
    .jasny-element{
      @extend %light-element;
      border : 1px solid red;
    }
    table.jasny-element{
      @extend %light-element;
      td {
        padding: 0.25em;
      }
    }
    

    Przenalizuj wynik.
23. Przetestuj następujący kod SASS'a:

    @mixin setBgColPad($bg, $col, $pad){
      background: $bg;
      color     : $col;
      padding   : (0.5)*$pad $pad;
    }
    
    .myDarkElement{
      @include setBgColPad(#222, #eee, 1em);
      font-size: 2em;
      p {
        padding: 1em;
      }
    }
    
    .myLightElement{
      @include setBgColPad(#eee, #222, 1.5em);
      border: solid 2px red;
      header {
        color : #000;
      }
    }
    

24. Zbuduj samodzielnie stronę na której zanurzysz jakieś zdjęcie lub film w technologii 360 deg. Jak nie masz pomysłu, to możesz skorzystać ze strony frames.html
25. Zabezpiecz systemem samodzielnie opracowanej CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) stronę zbudowaną w poprzednim punkcie. Ta Captch'a ma z bardzo dużym prawdopodobieństwe eliminować tych ludzi, którzy nie mają odpowiedniej wiedzy. Przykład: swoją stronę Q&A zabezpieczyłem kodem sprawdzającym czy użytkownik umie mnożyć liczby zespolone (co mi wyeliminowało całkowicie ataki spamerskie). Wymyśl coś nietrywialnego - przez Twój test powiniem przejść student drugiego roku informatyki na WPPT.
26. Włącz protokoł https w swoim lokalnym serwerze WWW. Jeśli korzystasz z xampp, to wskazówki możesz znaleźć na stronie adnan360/https-on-localhost.md. Jeśli używasz Chrom'a i denerwują Cię komunikaty o próbie wyświetlenia niebezpiecznej strony, to odwiedź chrome://flags/#allow-insecure-localhost.
27. Wyjaśnij działanie następującego kodu:

    imie = "Jola";
    var osoba = {
      imie  : "Anna",
      hello : function(){console.log(this.imie)}
    }
    osoba.hello();
    function wywolaj(f) {f()}
    wywolaj(osoba.hello);
    

    Uwaga: jeśli testujesz ten kod w środowisku Node, to pierwsza linijkę zmień na global.imie="Jola";
28. Na stronie test04.php znajduje się prosty licznik odwiedzin. Ma on dosyć poważną wadę - po każdym odświeżeniu strony strony licznik ten zwiększa się o 1. Użyj mechanizmu cookies do wyeliminowania tego błędu. [Autorem tego zadania jest dr M. Gębala.]
29. Przeanalizuj kod z pliku Lista.js. Zbudowana tam jest lista z którą w linijce 49 zrobiliśmy coś dziwnego: zapętliliśmy ją. Narysuj graf zbudowanej struktury. A taraz coś poważniejszego: załóżmy, że znamy ograniczenie górne n na liczbę elementów listy. Zbuduj algorytm działający w czasie O(n) wykorzystujący O(1) pamięci, który sprawdza, czy dana lista jest zapętlona, czy też nie jest.
30. Użyj technologii localStorage i promises oraz dwóch wersji tego samego obrazka (jeden niskiej jakości, drugi bardzo dobrej jakości) do wyświetlenia obrazka wysokiej jakości na stronie.
31. Trzeci projekt. Rozbudowujemy dotychczas budowany portal o funkcję opinii od użytkowników oraz kilku innych dodatków.

    1. Opinie te mają być zbierane w prostej (może to być baza złożona z pojedynczej tabeli) bazie danych.
    2. Dodawanie wpisów ma być chronione samodzielnie napisaną chaptcha, specyficzną dla naszego kierunku studiów (patrz Zadanie 25)
    3. Stosując mathjax dodaj do opisów wykładów teoretycznych przenajmniej po jednym z najważniejszych wzorów które poznałeś na wykładzie
    4. Kody CSS mają być napisane w języku SASS i skompilowane do jednego pliku. Przygotuj dwie wersje tych plików: deweloperską (porządnie sformatowaną) oraz produkcyjną (skompresowaną). Prowadzącemu laboratorium przekazać będziecie mieli również kody SASS'a.
    5. Do swojego zdjęcia zastosuj technologię localStorage. Jeśli używasz zdjęcia o rozmiarze większym niż 1Mb, to użyj obietnic do jego załadowania.

    Projekt ma być oddany na ostatnim laboratorium.
    Oceniane będą następujące składniki:

    1. Poprawność kodów HTML, CSS i PHP. Nie może być ani jednego błędu.
    2. Jakość kodu: w szczególności zasady DRY, KISS, SRP; optymalizacja css; poprawne stosowanie znaczników semantycznych;
    3. Estetyka: w szczególności spełnienie wszystkich wymagań CRAP; poprawny dobór kolorów; właściwy kontrast; rozsądny dobór fontów.
    4. Ergonomia: zasada "Don't Let Me Think"; "Keep the noise down to a dull roar"

    To jaką bazę danych zastosujecie - ustalcie z prowadzącym; ale jeśli zastosujecie jakąś namiastkę tekstową, to na ocenę 5.5 nie możecie liczyć. Ja preferuję do takich prostych projektów bazę MariaDB.
32. Zrozum kod ze strony jQuery2.html i przerób go na "Vanilla JavaScript"
33. Poświęć jeden wieczór na przeczytanie i przerobienie wszystkich przykładów z książki Jacka Franklina, Russa Fergusona, Beginning jQuery. From the Basics of jQuery toWriting your Own Plug-ins, Second Edition.

Materiał omówiony na wykładzie

01.03.2018: CSS

1. Podstawowe składniki: elementy, klasy, pseudo-elementy, pseudo-klasy
2. Składnia i selektory: CSS.html
3. SPECYFICZNOŚĆ !!!!!
4. Budowanie menu z bazowego obiektu <ul>

A to jest szkic możliwej realizacji pierwszego projektu:

Uwaga: jeszcze sporo trzeba popracować nad szatą graficzna, aby projekt ten spełniał podstawowe zasady poprawnych stron.