[home]
techniki internetowe[home] 18/X
[top]
[Terence Parr]

No matter how carefully you phrase something, someone will misinterpret it and be upset.

Terence Parr, Little Nybbles of Development Wisdom

Zadania

HTML

Zadanie 1. Przygotować walidującą się stronę w HTML 4.01 strict. Strona powinna zawierać następujące elementy: a, blockquote, img, h1, h2, h3, ol, p, ul.

Zadanie 2. Do przygotowanej strony dodać jeden z szablonów ze strony Free CSS Templates. Strona powinna zawierać menu z linkami do kilku innych stron.

Zadanie 3. Zainstalować dodatek FullerScreen — really full screen with slideshow support. Przygotować slideshow korzystający z możliwości oferowanych przez to rozszerzenie. Tutaj jest przykład (f11 — toggle slideshow, shift+f11 — toggle slide manager).

Zadanie 4. Przygotować dwie tabelki z planem zajęć — pionową i poziomą. W tabelce pionowej dni tygodnia należy umieścić w główce tabeli, a w tabelce poziomej — w pierwszej kolumnie.

Zadanie 5. Przygotować jeszcze tabelkę pionową i tabelkę poziomą, z tym samym, aktualnym programem TV dowolnej wybranej przez siebie stacji.

Uwaga: każda tabelka powinna zawierać następujące elementy: table, tr, td, caption, thead, tbody, tfoot, colgroup, col. Skorzystać z atrybutów: colspan i rowspan.

CSS

Zaczynamy od przeanalizowania różnych stylizacji prostej tabelki z CSS Table Gallery. Inne stylizacje ogladamy przez RSS Feed, albo wpisując URL: http://icant.co.uk/csstablegallery/index.php?css=mała liczba całkowita.

Zadanie 1. Zaprojektować jedną tabelkę do obowiązującego planu zajęć dla pierwszego, drugiego i trzeciego roku. Tabelkę umieścić w pliku plan_zajec.html. Elementy tabelki nie powinny zawierać żadnych atrybutów za wyjątkiem cellspacing. (Uwaga: w specyfikacji CSS2 zapisano, że marginesów nie można stosować do komórek tabeli; zamiast cellspacing/marginesów można użyć własności border-spacing). Tabelkę należy wystylizować wyłącznie za pomocą zewnętrznego arkusza stylów o nazwie plan_zajec.css.

Zadanie 2. Zaprojektować tabelkę do własności i wartości CSS dotyczących tekstu. Tak jak poprzedni do wystylizowania tabelkę należy użyć zewnętrznego arkusza stylów. Tabelkę umieścić w pliku text.html, a arkusz stylu — text.css.

Zadanie 3. Wystylizować program telewizyjny ze strony TELEwizji

Zadanie 4. Przygotować w oparciu o arkusz stylu CSS galerię zdjęć. Tutaj, tutaj, tutaj i tutaj można znaleźć interesujące projekty. A tutaj jest lista wszystkich projektów umieszczonych na CSS play.

Zadanie 5. Przygotować własną stronę WWW. Strona powinna mieć menu i co najmniej 2 podstrony.

[© James Duncan Davidson/O'Reilly Media]

Now you’ve made two mistakes.

Number one, you fell for that old overconfidence trick of your mind. “Oh, yeah, we totally know how to do this! It’s all totally clear to us. No need to spec it out. Just write the code.”

Number two, you hired programmers before you designed the thing. Because the only thing harder than trying to design software is trying to design software as a team.

J. Spolsky, The Big Picture

Javascript 1

Zadanie 1. Napisać program, który dla wczytanej liczby całkowitej wypisuje, czy jest ona parzysta czy nieparzysta.

Zadanie 2. Napisać program, który po wczytaniu dwóch liczb całkowitych odpowiada, czy jedna jest wielokrotnością drugiej.

Zadanie 3. Napisać program, który dla trzech wczytanych liczb całkowitych odpowiada, czy mogą być one długościami boków trójkąta (a) prostokątnego, (b) równoramiennego, (c) równobocznego.

Zadanie 4. Napisać program obliczający silnię dla liczb od 0 do 10. Wynik powinien być przedstawiony w formie tabeli HTML.

Zadanie 5. Napisz funkcję integerPower(podstawa, wykładnik), która zwraca podstawę podniesioną do potęgi wykładnik. Zakładamy, że wykładnik jest dodatnią liczbą całkowitą, a podstawa jest liczbą całkowitą. Kod funkcji nie powinien korzystać z funkcji matematycznych (należy użyć pętli FOR lub WHILE). Użyj tej funkcję w formularzu w którym po wpisaniu liczb w dwóch polach tekstowych i po naciśnięciu przycisku POTĘGA w trzecim polu tekstowym wyświetli się wynik.

Zadanie 6. Napisz program, który oblicza rekurencyjnie silnię dla losowo wybranej liczby z zakresu od 0 do 16.

Zadanie 7. Napisz program rozwiązujący następujący problem: Firma płaci każdemu sprzedawcy 200 zł tygodniowo plus 9% prowizji od sprzedaży. W tabeli są podane wyniki sprzedaży 20 pracowników. Policzyć im prowizje, pensje, a następnie zrobić histogram ilu pracowników znajduje się w każdej z grup: 200-299, 300-399, 400-499, 500-599, 600-699, 700-799, 800 zł i więcej. Dane powinny znajdować się na stronie WWW. Wyniki powinny zostać wypisane po naciśnięciu przycisku oblicz znajdującego się na stronie z danymi.
Extra: skorzystać z biblioteki implementującej protokół AJAX.

Zadanie 8. Plik html tego arkusza kontaktowego został automatycznie wygenerowany przez program napisany w C (zob. Makefile jakie wykorzystano programy i biblioteki) i wystylizowany za pomocą CSS. Zaprojektować i zaprogramować w JavaScripcie bardziej przyjazny interfejs do tego arkusza. Dodać `przycisk' inicjalizujący pokaz slajdów (trudniejsze).

Javascript 2

Zadanie 1. Ciasteczka, albo cookies są przesyłane między serwerem a przeglądarką. Możemy je obejrzeć w nagłówku HTTP (LiveHTTP Headers, Firebug). Dane w cookies są przesyłane w postaci par: nazwa1=wartość1; nazwa2=wartość2; .... Ciasteczka odczytujemy i ustawiamy za pomocą document.cookie.

Przekazać dane podane przez użytkownika pomiędzy stronami wykorzystujac w tym celu cookies.

Zadanie 2. Napisz kalkulator WWW umożliwiający wykonywanie podstawowych działań arytmetycznych. Sam kalkulator powinien wyglądać tak (obejrzyj źródło):

.........
.........
... ......

Wykorzystaj zdarzenie onClick. Kalkulator umieść w formularzu: <form name="kalkulator"> kalkulator </form>. Zaprogramuj w języku JavaScript funkcje: wprowadz(wartość), dzialanie(napis), oblicz(), zeruj()

Dane wypisywane w menu należy umieścić w kodzie Javascript na przykład w takim (tablica obiektów):

var menu = [ { "d": "języki programowania", "u": "http://inf.univ.gda.pl:8000/jp" }, ... ];

Zadanie 4. Korzystając z gotowców utworzyć menu ze spisem treści strony, na przykład tak, jak jest to zrobione przez Petera-Paula Kocha Table of Contents script.

Zadanie K. Katas (kilka ekstra przykładów ekstra).

[top]