docProjektowanie i konstrukcja systemów rozproszonych (SUM)
download 
Reklamacja Transkrypt
Projektowanie i konstrukcja systemów rozproszonych (SUM)
Projektowanie i konstrukcja systemów rozproszonych (SUM) Skrypt do ćwiczeń laboratoryjnych Cezary Sobaniec v2.2 2013-10-25 Politechnika Poznańska Instytut Informatyki Spis treści Wstęp 2 1 HTML 3 2 CSS 8 2.1 Zadania podstawowe . . . . . . . . . . . . . . . . . . . . . . . 8 2.2 Zadania zaawansowane . . . . . . . . . . . . . . . . . . . . . . 9 2.3 Projekt I . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Wstęp Niniejszy skrypt przeznaczony jest do ćwiczeń laboratoryjnych z przedmiotu Projektowanie i konstrukcja systemów rozproszonych dla studentów studiów uzupełniających magisterskich. Jest on dostępny w sieci w postaci dokumentu PDF: http://www.cs.put.poznan.pl/csobaniec/edu/piksr/sum/piksr.pdf Uwagi ogólne 1. Przykłady zamieszczone w skrypcie mogą być kopiowane do edytorów tekstowych. Podczas kopiowania z niektóre znaki mogą zostać wklejone w niepoprawny sposób — są zastępowane innymi znakami Unicode. Dotyczy to m.in. apostrofów, cudzysłowów i myślników. Należy je po skopiowaniu usunąć i wstawić ponownie korzystając z klawiatury. 2. Do zapisu poleceń wydawanych w środowisku unix przyjęto następującą konwencję. Znak „#” na początku linii symbolizuje znak zachęty interpretera poleceń. Pogrubiona czcionka oznacza komendy/tekst wprowadzany przez użytkownika. Poniższy przykład: # echo przykład przykład oznacza wpisanie komendy echo przykład, która powoduje wypisanie napisu „przykład” na ekranie. 3. Do testów można wykorzystać serwer unixlab. Logujemy się do niego protokołem SSH na swoje konto (infXXXXXX). W systemach uniksowych można to uzyskać komendą ssh: # ssh [email protected] W systemach Windows można do zdalnej pracy zastosować program PuTTY. Kopiowanie plików między systemem lokalnym a zdalnym serwerem unixlab można zrealizować w systemach uniksowych komendą scp, np.: # scp index.html [email protected]:public_html/ W systemach Windows można wykorzystać darmowy program WinSCP. 1 HTML 1. Zaloguj się do serwera Unix. Przejdź do podkatalogu public_html i utwórz tam plik index. html z dowolną zawartością. Następnie uruchom lokalnie przeglądarkę i wpisz adres URL: http://sirius.cs.put.poznan.pl/~infXXXXX/ Uwaga: Uzyskanie dostępu do plików z katalogu public_html poprzez serwer WWW wymaga następujących praw dostępu: a) prawo x dla pozostałych (other) użytkowników do katalogu domowego, b) prawa rx dla pozostałych użytkowników do katalogu public_html, c) prawo r dla pozostałych użytkowników do pliku index.html. 2. Utwórz poprawny dokument HTML w pliku index.html, np.: <html> <head> </head> <body> <h1>Hello </body> </html> world!</h1> 3. Korzystając z serwisu http://validator.w3.org dokonaj walidacji poprawności dokumentu HTML. a) Dodaj deklarację typu dokumentu na początku pliku: <!DOCTYPE html PUBLIC ”-//W3C//DTD HTML 4.01//EN” ”http://www.w3.org/TR/html4/strict.dtd”> <!DOCTYPE html PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”> b) Dodaj tytuł dokumentu: <head> ... <title>Tytul dokumentu</title> ... </head> 4 1 HTML 4. Wstaw do dokumentu następujące elementy blokowe: a) akapity tekstowe: <p>...</p> z przełamaniem linii znacznikiem <br>. b) listy nienumerowane: <ul> <li>Element pierwszy</li> <li>Element drugi</li> </ul> c) listy numerowane: <ol> <li>Element pierwszy</li> <li>Element drugi</li> </ol> d) listy de nicyjne: <dl> <dt>Rower</dt> <dd>Pojazd jednosladowy</dd> <dt>Samochod</dt> <dd>Pojazd wielosladowy</dd> </dl> e) nagłówki: <h1>...</h1> <h2>...</h2> <h3>...</h3> f) teksty preformatowane: <pre> ... </pre> 5. Sformatuj fragmenty tekstów znacznikami wierszowymi: <b>...</b> <i>...</i> <strong>...</strong> <em>...</em> <tt>...</tt> <code>...</code> 6. Przećwicz zagnieżdżanie list. 7. Wstaw tabelkę do dokumentu: <table border=”1”> <tr> <td> A </td> <td> B </td> </tr> <tr> 5 1 HTML <td> C </td> <td> D </td> </tr> </table> 8. Przećwicz łączenie komórek za pomocą atrybutów colspan i rowspan: <table border=”1”> <tr> <td colspan=”2”> A </td> </tr> <tr> <td> C </td> <td> D </td> </tr> </table> Do układania tekstu w komórkach wykorzystaj atrybuty znacznika <td>: align (left, right, center) i valign (top, bottom, middle). 9. Stwórz drugi dokument HTML i dodaj do pierwszego odnośnik: <a href=”inny.html”>Odnosnik do drugiego dokumentu</a> 10. Utwórz odnośnik do miejsca w bieżącym dokumencie: <p id=”etykieta”>...</p> ... <p>Idz do <a href=”#etykieta”>poczatku</a>.</p> 11. Dodaj rysunek do dokumentu: <img src=”globe.png” alt=”Kula ziemska” align=”left”> 12. Zde niuj standard kodowania dla dokumentu w stylu HTML4: <head> ... <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> ... </head> lub w stylu HTML5: <meta charset=utf-8”> 13. Dodaj komentarz do dokumentu: <!-- To jest komentarz --> 14. Przetestuj działanie następujących encji nazwanych, wstawiając je do dokumentu: © & € " > ± • ™ “ < ½ † Ø ” ° × ‰ ÷ „ Sprawdź również poniższe encje nienazwane: — ― 6 1 HTML 15. Przetestuj działanie programu tidy sprawdzającego poprawność dokumentu HTML: # tidy -q -e -utf8 index.html line 4 column 3 - Warning: inserting missing ’title’ element line 26 column 7 - Warning: <table> lacks ”summary” attribute Zastosuj program tidy do uporządkowania zawartości dokumentu HTML: # tidy -i -utf8 index.html 2> /dev/null <!DOCTYPE html PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN”> <html> <head> ... 16. Obejrzyj zawartość dokumentu w różnych przeglądarkach porównując sposób prezentacji. Wykorzystaj Firefox, Google Chrome, Opera, Konqueror. 17. Przygotuj stronę WWW, która będzie prezentować się jak przykład z Rys. 1.1. Materiały Kurs HTML http://webmaster.helion.pl/kurshtml/. Kurs jest dostępny również w postaci gotowej do pobrania w całości z adresu http://webmaster.helion.pl/kurshtml/kurshtml.zip. Rys. 1.1: Pierwszy dokument HTML 2 CSS Ćwiczenia poniższe najlepiej wykonać korzystając jednocześnie z kilku przeglądarek internetowych i porównując sposoby interpretacji odpowiednich zapisów. Można w tym celu wykorzystać przeglądarki: Google Chrome, Mozilla Firefox, Opera, w systemie Windows Internet Explorer, a w systemie Linux — Konqueror. 2.1 Zadania podstawowe 1. Przećwicz różne metody łączenia stylu z dokumentem HTML (wewnątrz dokumentu, zewnętrzny plik CSS, atrybut style) wykorzystując regułę mody kującą kolor tekstu, np.: H1 { color: red } Docelowo styl powinien być zapisywany w zewnętrznym pliku CSS. 2. Zmody kuj formę prezentacji wybranych fragmentów tekstów mody kując krój czcionki (własność font-family), jej wielkość (font-size), kolor (color), styl (font-style), wariant (font-variant), grubość (font-weight) i podkreślenie (text-decoration). De niując wielkość czcionki użyj różnych jednostek: logicznych (small, medium), punktowych (np. 12pt), bezwzględnych (np. 12px). Oto przykład reguły CSS: p { color: #00FF00; font-size: 14pt; font-style: italic; font-variant: small-caps; font-weight: bold; text-decoration: underline; } /* lub oblique */ /* inne: overline, line-through */ 3. Zwery kuj zgodność przygotowywanego stylu ze specy kacją korzystając z usługi wery kacyjnej pod adresem http://jigsaw.w3.org/css-validator/. Jako parametr należy podać adres URL pliku ze specy kacją stylu CSS. 4. Zde niuj styl dla formatowania znacznikiem <span class=”big”> powodując zwiększenie czcionki bazowej o 20%. Przećwicz działanie znacznika wewnątrz akapitów tekstowych i nagłówków różnego poziomu (<h1>, <h2> itd.), np. dla następującego fragmentu dokumentu HTML: <h1>Wprowadzenie do <span class=”big”>Informatyki</span></h1> 2.2 Zadania zaawansowane 9 <p>Pierwszy akapit <span class=”big”>tekstowy</span>. </p> 5. Przetestuj wyrównywanie tekstu w poziomie (własność text-align). 6. Określ kolory wypełnienia (background-color) dla elementów <ol> i <li>, a następnie przetestuj działanie własności modelu blokowego dotyczących wypełnienia (padding), ramek (border) i marginesów (margin), np.: li { background-color: #FF8080; padding: 2ex 1em; border: 1pt solid blue; margin: 1ex 0.5em; } Przetestuj de niowanie własności modelu blokowego niezależnie dla każdej krawędzi (własności z su ksami -top, -bottom, -left, -right). 7. Zde niuj sposób prezentacji wybranych akapitów tekstowych w ramkach o ustalonej szerokości (własności width, min-width i max-width), z tłem i pustym obramowaniem. Akapity tego typu powinny być oblewane tekstem z lewej strony (własność float). 8. Przetestuj pozostałe własności prezentacyjne dla tekstów: odstępy między znakami (letterspacing), odstępy między słowami (word-spacing), transformacje do dużych i małych liter (text-transform). 9. Zde niuj tło dla wybranego elementu blokowego w postaci wielokrotnie powtarzanego rysunku. 10. Zaprezentuj wewnątrz zwykłego akapitu tekstowego fragment programu w języku C, formatując go tak, jak w pliku źródłowym i wytłuszczając słowa kluczowe. 11. Przećwicz importowanie ustawień z zewnętrznych źródeł korzystając z dyrektywy @import, np.: @import url(inny.css); 2.2 Zadania zaawansowane 1. Napisz reguły formatujące dla następujących fragmentów kodu HTML: a) <h1 id=”wstep”>...</h1> b) <p lang=”en”>...</p> 2. Uzupełnij rozwiązanie zadania 4 z grupy zadań podstawowych tak, aby wielokrotne (zagnieżdżone) użycie znacznika <span class=”big”> nie powodowało dalszego zwiększania rozmiaru czcionki. 3. Napisz regułę zmieniającą czcionkę wewnątrz akapitów i list występujących w tabelach na czcionkę bezszeryfową, mniejszą o 20% od czcionki bazowej i z mniejszą interlinią (lineheight). 4. Napisz reguły dodające wcięcie w pierwszej linii akapitów tekstowych (text-indent) we wszystkich akapitach tekstowych oprócz tych, które następują zaraz za nagłówkiem dowolnego poziomu. 2.2 Zadania zaawansowane 10 5. Wykorzystując pseudoklasę :hover stwórz odnośniki do innych dokumentów zmieniające swój wygląd po najechaniu myszką. Utwórz formularz, którego pola będą wyróżniane po wybraniu. 6. Stosując znacznik <div> zmody kuj prezentację kilku kolejnych akapitów tekstowych. Przykładowy fragment kodu HTML: <div> <p>Akapit pierwszy... </p> <p>Akapit drugi... </p> <p>Akapit trzeci... </p> </div> 7. Utwórz regułę powiększającą pierwszą literę (pseudoklasa :first-letter) w pierwszym akapicie tekstowym każdego rozdziału. Litera ta powinna rozciągać się na 3 kolejne wiersze tekstu i powinna być oblewana tym tekstem z prawej strony. 8. Dodaj przed każdym akapitem tekstowym klasy notatka napis „Uwaga” w kolorze czerwonym. 9. Przećwicz pozycjonowanie elementów (position). Dodaj do dokumentu menu wyświetlane zawsze w prawym górnym rogu okna przeglądarki. 10. Zde niuj złożony układ strony (nagłówek, stopka, margines) bez stosowania tabel, np.: <html> <head> <title>Układ strony z wykorzystaniem elementów DIV</title> <style> div.header { background-color: #C0C0C0; } div.menu { background-color: #E0E0E0; width: 15%; min-height: 30em; float: left; } div.main { width: 85%; float: right; } div.footer { background-color: #C0C0C0; clear: both; } </style> </head> <body> <div class=”header”> To jest nagłówek strony. </div> <div class=”menu”> To jest menu. </div> <div class=”main”> To jest główna treść dokumentu. </div> 11 2.3 Projekt I <div class=”footer”> To jest stopka strony. </div> </body> </html> 11. Zde niuj odrębne reguły dla wydruku strony, rede niując krój i wielkość czcionki bazowej, oraz wyłączając na wydruku prezentację wybranych elementów dokumentu (display). @media print { body { font-size: 10pt; } div.footer { display: none; } } 2.3 Projekt I Przygotuj dokument HTML w standardzie HTML 4.01 wersja strict, korzystający ze styli kaskadowych CSS w celu opisania prezentacji dokumentu. Dokument powinien spełniać następujące wymagania: 1. Styl dla dokumentu powinien być zapisany w zewnętrznym pliku. 2. Układ dokumentu powinien być taki jak zaznaczono na Rys. 2.1 za pomocą linii przerywanych. Układ ten należy uzyskać de niując pojedynczą tabelkę obejmującą cały dokument lub pozycjonując kilka elementów <div>. 3. Menu po lewej stronie dokumentu powinno zawierać odnośniki do wybranych zewnętrznych stron WWW. Treść tej komórki powinna być wyrównana w pionie do góry. 4. Treść stopki na dole strony powinna być wyśrodkowana przez całą szerokość okna. Należy użyć mniejszej czcionki, bezszeryfowej o kolorze szarym. 5. Cały dokument powinien mieć ustawione tło jednolitego koloru. 6. Tytuł dokumentu powinien znajdować się na górze, wyśrodkowany, z odstępami od góry i od dołu, oddzielony od reszty tekstu linią, wypisany czcionką szeryfową, pogrubioną w kolorze brązowym. 7. W treści dokumentu powinny się znaleźć 2 rysunki. Jeden z nich powinien być oblewany tekstem z prawej strony, a drugi wyśrodkowany. 8. W tekście powinien znaleźć się akapit tekstowy klasy „uwaga”, prezentowany w czarnej ramce o grubości 1pt, oddalonej od tekstu pionowo o 1ex i poziomo o 2em, wypełnionej kolorem błękitnym, z tekstem w kolorze czerwonym. Ramka powinna zajmować 70% szerokości okna i być wyśrodkowana. Czcionka wewnątrz ramki powinna być bezszeryfowa i pochylona. 9. Wewnątrz dokumentu powinny znajdować się 2 rozdziały, których tytuły powinny być umieszczone w znaczniku <h1>. Wewnątrz rozdziałów powinny się znajdować po 2 sekcje oznaczone przez <h2>. 10. Zwykłe akapity tekstowe powinny mieć wcięcie w pierwszej linii tekstu. Nie dotyczy to akapitów występujących zaraz po tytułach rozdziałów i podrozdziałów. W dokumencie HTML 12 2.3 Projekt I akapity powinny być umieszczone w zwykłych znacznikach <p> bez użycia atrybutu class. 11. W jednym z rozdziałów należy umieścić poniższy program w języku C, zaprezentowany w ramce, z wytłuszczonymi słowami kluczowymi, prezentowany czcionką o stałej szerokości. #include <stdio.h> #include <string.h> int main() { int i, x=0; char buf[] = ”Przykład”; char *ptr = buf; for(i=0; i<strlen(buf); i++) { ptr = &buf[i]; if (*ptr > 0) x += *ptr; } printf(”%d\n”, x); return 0; } 12. W prawym górnym rogu okna przeglądarki powinna się znaleźć mała ramka pozycjonowana w sposób ustalony (fixed), zawierająca dowolny tekst (np. reklama). Ramka powinna znajdować się w odległości 10px od górnej i 10px od prawej krawędzi okna przeglądarki. Materiały Specy kacja CSS2 Specy kacja standardu CSS2 jest dostępna pod adresem: http://www.w3.org/TR/CSS2/. Specy kacja zawiera wygodny w użyciu indeks wszystkich własności zde niowanych w CSS2. Jest on dostępny pod adresem http://www.w3.org/TR/CSS2/propidx.html. Kurs HTML Wspomniany w poprzednim rozdziale kurs HTML w języku polskim zawiera rozdział poświęcony standardowi CSS: http://webmaster.helion.pl/kurshtml/css2/index.htm. Rozdział ten dostępny jest w postaci gotowej do pobrania pod adresem http://webmaster.helion.pl/kurshtml/ css2/css2guid.zip. Tytul dokumentu MENU <img> Uwaga: Rozdzial 1 Sekcja 1.1 <img> Rys. 2.1: Projekt HTML + CSS Reklama
