TECHNIKI WWW (WFAIS.IF-C125) (zajęcia 12.10.2016 r.) Zajęcia: grupa 2: środa 12:00-13:30 Prowadzący: Dr inż. Marcin Zieliński marcin.zielinski@uj.edu.pl pokój: B-2-33 (Zakład Fizyki Jądrowej) konsultacje: każdy środa 9:30-10:30 (+ po umówieniu się przez email). strona: http://koza.if.uj.edu.pl/~marcin - Wykład jest podstawowym źródłem informacji. Ćwiczenia mają charakter pracowni w której będziemy praktycznie wykorzystywać zagadnienia przedstawione na wykładzie, ale może się zdarzyć że ćwiczenia wyporzedzą wykład. - Literatura na stronie w USOS. Tematyka zajęć: A. STRONY STATYCZNE: 1) Statyczny HTML (5) język znaczników: ogólna budowa strony internetowej, głowne sekcje - układ strony, formatowanie tekstu, tworzeni list, osadzanie obrazków, osadzanie treści, tworzenie odnośników, tabele, proste formularze, multimedia,. 2) Wprowadzenie do CSS (3) (Cascading Style Sheets) - kaskadowe arkusze stylów: umiejetnośc stylizacji stron i jej elementów, opis definiowania reguł CSS: selektor + deklaracja. B. STRONY DYNAMICZNE: 1) Wprowadzenie do języka skryptowego JavaScript: składnia języka, zmienne, tworzenie funkcji, instrukcje sterujące i warunkowe, pętle, tablice, oprogramowanie formularzy, klasy, obiekty, integracja HTML i JavaScript, wyrażenia regularne, obsługa zdarzeń. 2) Biblioteka jquery - podstawy i metody wykorzystania. 3) Tworzenie wzorców projektowych MVC (model-view-controller) do organizacji struktury aplikacji internetowej. 4) Node.js - wprowadzenie do środowiska, tworzenie aplikacji w node.js, podejście zdarzeniowe do tworzenia aplikacji, wykorzystanie wzorca MVC do stworzenia pełnodziałejącej aplikacji internetowej. Zasady zaliczenia i projekty zaliczeniowe: Do zaliczenia ćwiczeń (oraz całego kursu) wymagane będzi przygotowanie 3 mini projektów dotyczących poznawanych technologii: 1. HTML5 i CSS3 (strona domowa/wizytówkowa) 2. Pkt. 1 plus Javascript (jquery). (strona tematyczna) 3. Pkt1. 1 plus pkt. 2 plus Node.js + Express + MySQL. (strona tematyczna) Projekty będą stanowić 60% wagi do oceny z egzaminu.
1) Podstawowa struktura dokumentu hipertekstowego HTML ( Hiper Text Markap Language) Znacznik służy do kwalifikacji obszaru tekstu (w ogołności dowolnej informacji). Kwalifikacjia polega na umieszczeniu tekstu pomiędzy znacznikiem otwierającym i znacznikiem zamykajacym: <znacznik> Tekst </znacznik> W ogólności znaczniki mogą również posiadac atrubuty któzwalają wpływać i manipluować własnościami znaczników lub przenosić dodatkowe informacje: <znacznik atrybut= " wartość " > Tekst </znacznik> Podstawowa struktura dokumentu HTML (5) wygląda następująco: <!DOCTYPE html> <html lang="pl"> <head> <title> Witamy w HTML 5 </title> <meta charset="utf-8" /> <script src="js_file.js"></script> <link rel="stylesheet" href="css_file.css" /> </head> <body> <!-- Tutaj będą m.in. nowe elementy HTML 5 --> <h1> Witamy w HTML 5 </h1> </body> </html> Elementy zaznaczone na czerwono nie są obowiązkowe, ale obecnie bez nich nie da się stworzyć nowoczesnej witryny internetowej.
2) Kodowanie na stronach WWW W celu poprawnego wyświetlania treści dokumentu hipertekstowego należy w nagłówku strony zadeklarować kodowanie czyli. według jakiego schematu komputer ma zapisywać znaki w pamięci. W polsce obowiązującym schematem kodowania jest ten zgodny ze standardem ISO-8859-2. Do prawidłowej deklaracji kodowania używamy tzw. meta-tagów (meta-znaczników): <meta>. W przypadku kodowania znacznik ten ma postać: <meta charset=iso-8859-2"/> Natomiast obecnie bardzo dobrze sprawdzającym się standardem kodowania jest UTF-8 oparty o system UNICODE. Aby go zadeklarować w dokumencie hipertekstowym należy wpisać: <meta charset=utf-8"/> Aby znaki były poprawnie wyświetlane w dokumencie hipertekstowym używany do jego edycji program musi obsługiwać dany system kodowania!!! 3) Meta-znaczniki (meta-tagi): Meta - Znaczniki pozwalaja na umieszczenie w nagłowku stronu kilku dodatkowych informacji np. o zawartości strony, słowach kluczowych, autorach strony. Informacje te mogą być przydatne np. dla wyszukiwarek. Chociaż obecnie wyszukiwarki poza przeszukiwaniem zawartośc meta-tagów skupiają się również na zawartości samej strony i prawidłowym osadzeniu np. znaczników <h1>. Dla porządku podajemy jak powinny wyglądać trzy najważniejsze meta-znaczniki: <meta name="description" content="ta strona zawiera informacje o HTML" /> <meta name="keywords" content="html, XHTML, JavaScript, PHP, MySQL" /> <meta name="author" content="jan Kowalski"> 4) Znaki specjalne na stronie internetowej Gdy bezpośrednio w treści elementu <body> wpisać znak większości lub mniejszości przeglądarka nie zwróci błędu, a nawet wyświtli wpisany znak. Jednak jest to nieprawidłowe z punktu widzenia składni HTML. Dla prawidłowego wyświetlania znaków zarezerwowanych dla składni jezyka HTML używa się tzw. encji. Encje reprezentują odpowiedni znak. Postać ogólna encji jest następująca: & tekst ; gdzie tekst jest odpowiedni dla reprezentacji danego znaku. Encji można używać w dowolnym tekście na stronie gdzie zachodzi potrzeba wstawienia znaku specjalnego. Przykłądy najczęściej uzywanych encji: - twarda spacja " - cudzysłów informatyczny < - znak mniejszości > - znak większości - prawa autorskie - znak towarowy & - ampersand & - pałza - długa pauza
5) Podstawowe znaczniki: Podstawowe nowe znaczniki ułatwiajace tworzenie struktury / konspektu strony: <header> - do wyodrębnienia nagłowka strony <nav>, - do wyodrębnienia nawigacji strony <article> - do wyodrębnienia części strony - np post na blogu <section>, - też do grupowania treści <footer>, - do tworzenia stopki <aside> - do tworzenia treści dodatkowej (np. prawa kolumna) <span> - Element liniowy o wymiarze X. <div> - Element blokowy na stronie o wymiarach X-Y <h1> - Tytuł paragrafu/artykułu sekcji, występują również <h2> <h3> <hn> - różnią się wielkością czcionki. <center > - wyśrodkowanie <hr> - linia pozioma na całej szerokości elementu Formatowanie tekstu: <b> - pogrubienie tekstu <i> - pochylenie tekstu <u> - podkreślenie tekstu <p> - obszar akapitu (paragrafu) <br> - znak przejścia do nowej linii (obecnie uzywanie tych znaczników nie jest zalecane, jednak na początek i dla szybkiego sprawdzenia można się nimi posugiwać) Tworzenie list uporządkowanych (nienumerowane): <ul> <li> Pozycja 1 </li> <li> Pozycja 2 </li> </ul> Przy listach uporządkowanych nie numerowanych można zdecydować jaki typ symbolu ma być widoczny przy danej pozycji listy np. <ul type="disc"> - pełne koło (domyslny), <ul type="circle"> - puste koło, <ul type="square"> - kwadrat. Listy numerowane indeksem naturalnym (1.N): <ol> <li> Pozycja 1 </li> <li> Pozycja 2 </li> </ol> Osadzanie na stronie grafiki: <img alt= " tekst " src= " obrazek.png " /> Gdzie nazwa " obrazek.png " jest odnośnikiem wskazującym na plik z grafiką - to może być to wskazanie na zasób lokalny lub zdalny (link url). 6) Odnośniki na stronach (hiperłącza): Hiperłączą są jednym z najważniejszych elementów każdej strony internetowej, pozwalają na łaczenie ze sobą odpowiednich elementów i tworzenie struktury powiązanych ze soba
treści. Znacznikiem który pozwala na tworzenie hiperłącz jest: <a href="link.html"> Tekst odnośnika (lub obrazek) </a> Ścieżki w atrybucie href mogą być względne lub bezwzględne. Jeśli odnośimy się do łącza zewnętrznego to podajemy ścieżkę bezwzględną np. href= http://www.onet.pl Natomiast jeśli odnosimy się do treści we własnej witrynie (domenie) to używamy ścieżek względnych (podobnie jak w systemie linux): np href=../doc/plik.pdf. Odnośnik może poza kierowaniem do innej witryny za pomoca adresu URL, może również kierować do usługi ftp, lub poczty elektronicznej. Odpowiednie postacie takich odnośników to: <a href=" http://www.uj.edu.pl "> Link do strony UJ </a> <a href="ftp://serwerftp.pl"> Link do serwera FTP </a> <a href=" mailto:m.zielinski@uj.edu.pl "> m.zielinski@uj.edu.pl <a> Hiperłącza pozwalają również na poruszanie się wewnątrz danej witryny za pomocą tzw. Etykiet (często też nazywanych kotwicami). Służą do przechodzenia pomiędzy treściemi w ramach tej samej strony lub tej samej domeny. W celu użycia etykiety należy nią oznaczyć dany obszar witryny do którego chcemy kierować. Następnie w innej części witryny musimy umieścić łącze do tej etykiety. Takie zastosowanie przejść pomiędzy elementami danej witryny pozwala nam np. na uniknięcie zbędnego przewijania tekstu. Użycie kotwicy jest następujące: <a name="nazwaetykiety"> Obszar do zaznaczenia etykietą </a> Odnośnik do kotwicy w ramach tej samej strony tworzymy przez: <a href="#nazwaetykiety"> Hiperłącze do etykiety </a> Natomiast w obszarze tej samej witryny ale innej strony używamy: <a href="strona1.html#nazwaetykiety"> Etykieta na innej podstronie </a> 7) Rozszerzona struktura strony w HTML5 wraz z elementami nawigacji: <!DOCTYPE html> <html lang="pl"> <head> <title> Witamy w HTML 5 </title> <meta charset="utf-8" /> <style rel="stylesheet"> article, aside, nav {display: block;} article, aside {float: left;} article {width: 500px;} nav {width: 200px;} </style> </head> <body> <!-- Tutaj będą m.in. nowe elementy HTML 5 --> <article> <header> <img alt="html 5" src="logo-small.gif" width="200" height="40" /> <h1> Witamy w HTML 5 </h1> </header>
<p style="font-family: Arial;"> <span class="html"> HTML 5 </span> oferuje wiele nowych możliwości. Jednak minie trochę czasu, zanim możliwości te będą w pełni dostępne. </p> <footer> <small> Projekt HTML 5 </small> </footer> </article> <aside> <h2> Polecane linki </h2> <nav> <ul> <li><a href="#"> Strona główna </a></li> <li><a href="#"> O witrynie </a></li> <li><a href="#"> Projekt </a></li> <li><a href="#"> Wiadomości </a></li> <li><a href="#"> Kontakt </a></li> </ul> </nav> </aside> </body> </html>