Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

Transkrypt

1 Uniwersytet Warszawski Wydział Fizyki Marcin Mazurek Nr albumu: Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego Praca licencjacka na kierunku Fizyka w zakresie Metod Komputerowych Fizyki Praca wykonana pod kierunkiem prof. dr. hab. Michała Nawrockiego z Zakładu Fizyki Ciała Stałego Instytutu Fizyki Doświadczalnej UW Warszawa, lipiec 2006

2 Oświadczenie kierującego pracą Oświadczam, Ŝe niniejsza praca została przygotowana pod moim kierunkiem i stwierdzam, Ŝe spełnia ona warunki do przedstawienia jej w postępowaniu o nadanie tytułu zawodowego. Data Podpis kierującego pracą Oświadczenie autora (autorów) pracy Świadom odpowiedzialności prawnej oświadczam, Ŝe niniejsza praca dyplomowa została napisana przeze mnie samodzielnie i nie zawiera treści uzyskanych w sposób niezgodny z obowiązującymi przepisami. Oświadczam równieŝ, Ŝe przedstawiona praca nie była wcześniej przedmiotem procedur związanych z uzyskaniem tytułu zawodowego w wyŝszej uczelni. Oświadczam ponadto, Ŝe niniejsza wersja pracy jest identyczna z załączoną wersją elektroniczną. Data Podpis autora (autorów) pracy 2

3 Streszczenie Celem pracy jest stworzenie strony internetowej dla II Pracowni Fizycznej Wydziału Fizyki. Serwis przeznaczony jest głównie dla studentów Wydziału Fizyki UW oraz asystentów prowadzących ćwiczenia w II Pracowni. Zawiera niezbędne informacje dla osób uczęszczających na zajęcia: instrukcje do ćwiczeń, zdjęcia stanowisk pomiarowych, regulaminy, zasady zaliczeń, linki, ogłoszenia, itd. Strona ma być teŝ wizytówką Pracowni w wirtualnym świecie. Do realizacji projektu wykorzystany został język HTML Funkcjonująca strona II Pracowni Fizycznej została umieszczona pod adresem: Słowa kluczowe II Pracownia Fizyczna, fizyka, HTML, strona WWW, pomiary, fizyka subatomowa, optyka, fizyka ciała stałego Dziedzina pracy (kody wg programu Sokrates-Erasmus) fizyka Tytuł pracy w języku angielskim The study of WWW page for 2nd Physics Laboratory Faculty of Physics Warsaw University 3

4 Spis treści 1. Wstęp 5 2. Cel powstania strony dla II Pracowni Fizycznej 6 3. Realizacja projektu: Wstępna analiza zawartości serwisu na podstawie charakterystyki II PF i konsultacji z asystentami Lista zagadnień umieszczonych na stronie Konstrukcja strony Techniczna strona powstania serwisu internetowego dla II Pracowni Fizycznej: O języku HTML Znaczniki Szkielet Dokumentu HTML Ramki Kaskadowe arkusze stylów CSS Opis gotowej strony Podsumowanie Bibliografia i specyfikacje internetowe 26 DODATEK A: Wydruk kodu języka HTML DODATEK B: Funkcjonująca strona II Pracowni Fizycznej na płycie CD Zdjęcia stanowisk pomiarowych na płycie CD 4

5 1. Wstęp Stworzenie serwisu internetowego dla II Pracowni Fizycznej jest tematem niniejszej pracy licencjackiej. W dzisiejszych czasach Internet jest bardzo łatwo dostępny dla przeciętnego uŝytkownika. Firmy, urzędy, uczelnie a takŝe osoby prywatne wykorzystują go w celu łatwego dotarcia do odbiorcy, któremu przekazują róŝne informacje. W tym samym celu powstała równieŝ strona WWW II Pracowni Fizycznej. Za jej pośrednictwem studenci będą mieli lepszy i łatwiejszy dostęp do wszelakich spraw dotyczących II Pracowni Fizycznej. Nie wychodząc z domu moŝliwe będzie sprawdzenie aktualnych ogłoszeń, wydrukowanie instrukcji do zbliŝającego się doświadczenia bądź skontaktowanie się drogą elektroniczną z asystentem prowadzącym dane ćwiczenie. Obok opracowania projektu elementem pracy jest takŝe opis przedsięwzięcia, który zawiera: cele stworzenia strony internetowej, kolejne etapy powstawania serwisu, opis techniczny powstania witryny, charakterystykę gotowej strony II Pracowni Fizycznej. całego Do powstania projektu wykorzystany został bezpłatny program do edycji i tworzenia stron internetowych ezhtml 2.0 Alef. Całość napisano w języku HTML 4,01 (HyperText Markup Language). W edycji i obróbce zdjęć stanowisk pracy pomocna okazała się testowa wersja programu Paint Shop Pro9. 5

6 2. Cel powstania strony internetowej dla II Pracowni Fizycznej. W XXI wieku komputer i Internet to dla wszystkich jedne z głównych sposobów zdobywania wiedzy, szukania informacji, poznawania ciekawych zjawisk. Wychodząc naprzeciw oczekiwaniom, jakie stawia rzeczywistość i wykorzystując moŝliwości, jakie ona daje, przystąpiono do realizacji projektu stworzenia strony internetowej II Pracowni Fizycznej. Celem powstania strony o takiej tematyce jest przekazanie wszystkich waŝnych informacji dotyczących tej właśnie pracowni jej głównym odbiorcom, czyli studentom, którzy na te zajęcia będą uczęszczać. W tym teŝ celu na stronie muszą znaleźć się takie wiadomości, które: ułatwią kontakt z Pracownią i asystentami, pomogą w dobrym przygotowaniu się do ćwiczeń, wykonaniu opisów i ich późniejszym zaliczeniu, zapewnią dostęp do aktualnych informacji o zmianach terminów zajęć, dniach wolnych, w kompleksowy sposób zapoznają z II Pracownią. Serwis, przeznaczony ma być takŝe, dla asystentów prowadzących ćwiczenia. Za jego pośrednictwem będą w stanie szybko przekazać wszelkie uwagi i wskazówki dla swych podopiecznych. Strona, oprócz wymienionych celów, powinna być równieŝ wizytówką II Pracowni Fizycznej w wirtualnym świecie. 6

7 3. Realizacja projektu. 3.1 Wstępna analiza zawartości serwisu na podstawie charakterystyki II PF i konsultacji z asystentami. Przed przystąpieniem do tworzenia strony WWW pierwszym waŝnym krokiem było zastanowienie się nad tym, co powinno się na niej znajdować. Punktem wyjścia w tych rozwaŝaniach było zapoznanie się z całą strukturą Pracowni, jej zasobami, tym, co oferuje studentom i jakie ma w stosunku do nich wymagania. NaleŜało się równieŝ zastanowić nad tym, jakich informacji odbiorca potrzebuje a jakie są mu zbędne. W tym celu przeprowadzona została krótka charakterystyka II Pracowni Fizycznej. Dzięki niej moŝna było stworzyć pierwszy zarys wyglądu strony internetowej i jej zawartości. II Pracownia Fizyczna to waŝna jednostka całej struktury organizacyjnej i naleŝy do grupy przedmiotów obowiązkowych, będących w programie kształcenia na Wydziale Fizyki Uniwersytetu Warszawskiego. Głównym jej celem jest zapoznanie studentów z technikami eksperymentalnymi stosowanymi w róŝnych działach fizyki. Zajęcia odbywają się tak w semestrze letnim jak i zimowym we wtorki (w godz ) i w czwartki (w godz. 9 14). Wszystkie ćwiczenia przeprowadzane są na trzecim piętrze i na parterze (ćwiczenia z Fizyki Jądrowej) w budynku przy ul. Pasteura 7 w Warszawie. To tutaj studenci nie tylko zapoznają się z technikami eksperymentalnymi stosowanymi w róŝnych działach fizyki, ale równieŝ swoją wiedzę teoretyczną mogą sprawdzić w praktyce wybierając interesujące ich ćwiczenia. Do dyspozycji przygotowanych jest kilkadziesiąt nowoczesnych, dobrze wyposaŝonych i skomputeryzowanych stanowisk (fotografie wszystkich stanowisk pomiarowych dostępne są w dodatku B, w katalogu zdjęcia ). 7

8 Fot. 3.1 Stanowisko pracy do ćwiczenia C2 - Pomiar drogi dyfuzji i czasu Ŝycia nośników mniejszościowych w germanie metodą Valdesa. / fot. M. Mazurek; 2006/ Pracownia moŝe pochwalić się teŝ tym, Ŝe posiada źródło neutronów termicznych. Jest ono wykorzystywane do pomiarów widma energetycznego fragmentów rozszczepienia uranu 236 U wywołanego neutronami termicznymi oraz do pomiaru energii wiązania deuteronu. 8

9 Fot. 3.2 Źródło neutronów termicznych /fot. M. Mazurek; 2006/ W celu zaliczenia II Pracowni studenci muszą wykonać trzy (wersja A), dwa (wersja B) lub cztery (wersja dla NKF) doświadczenia. Wybrać je mogą spośród trzech podstawowych działów: fizyka subatomowa (fizyka jądrowa + fizyka cząstek elementarnych) fizyka ciała stałego optyka. Ćwiczenia wykonywane są indywidualnie pod opieką asystentów. Czas trwania jednego doświadczenia to okres od dwóch do czterech tygodni. Uczestnicząc w zajęciach studenci zapoznawani są równieŝ z wszystkimi etapami eksperymentu fizycznego. KaŜde ćwiczenie składa się mianowicie z kilku, wykonywanych po kolei, części: przygotowania teoretycznego, kolokwium wstępnego, części doświadczalnej, sprawozdania na piśmie (opis), rozmowy końcowej. 9

10 Aby przystąpić do zajęć studenci powinni mieć zaliczoną całą I Pracownię Fizyczną (a i b). Pracownia ma takŝe za zadanie wpojenie studentom wszelkich zasad bezpiecznej pracy podczas wykonywania ćwiczeń, prawidłowego zachowania się na terenie pracowni oraz zapoznania się z instrukcjami dotyczącymi przyrządów. Przed przystąpieniem do zajęć studenci przechodzą szkolenie BHP i ochrony radiologicznej (w przypadku wykonywania ćwiczeń z zastosowaniem promieniowania jonizującego). Odbycie takiego szkolenia potwierdzane jest wpisem do odpowiedniej ewidencji. Wszystko to odbywa się pod opieką asystentów prowadzących ćwiczenia oraz inspektora ochrony radiologicznej. Po wstępnym ustaleniu zawartości strony, którą ułatwiła krótka charakterystyka II Pracowni przyszła kolej na wybór metody, pozwalającej wszystkie informacje umieścić na stronie (w tym przypadku skorzystano z języka HTML 4.0) oraz na opracowanie szkieletu całego serwisu, jego wyglądu, czyli wyborze kolorów tła i liter a takŝe, co jest waŝne, dobrym i czytelnym rozmieszczeniem całej zawartości. Gdy powstał juŝ szczegółowy zarys całego serwisu naleŝało zebrać wszystkie potrzebne materiały, których treść miała znaleźć się na stronie. Następnie prototypowa wersja strony trafiła w ręce asystentów prowadzących ćwiczenia na II Pracowni. Ich zadaniem było zapoznanie się z zawartością i wyglądem serwisu oraz zaproponowanie nowych rozwiązań i ciekawych pomysłów. Po konsultacjach z całym zespołem wybrane zostały zagadnienia, które następnie umieszczono na stronie. 3.2 Lista zagadnień umieszczonych na stronie. W wyniku przeanalizowania charakterystyki II Pracowni i konsultacji z asystentami powstała lista zagadnień, które powinny znaleźć się na stronie internetowej. Do listy dołączone zostały równieŝ wymagania dotyczące zawartości poszczególnych tematów. Oto one: Strona główna z danymi kontaktowymi, 10

11 Ogłoszenia, Wykaz i instrukcje do ćwiczeń z dostępnymi instrukcjami w formacie.doc i zdjęciami stanowisk wraz z opisem wybranych przyrządów, Rozkład zajęć z planem zajęć II Pracowni i organizacją roku akademickiego na Uniwersytecie Warszawskim, Lista osób prowadzących ćwiczenia z miejscem na przekazanie informacji dla studentów oraz adresem owym, Wskazówki dla studentów dotyczące opisów i prezentacji ustnych, Regulamin pracowni zawierający zasady wykonywania i zaliczania ćwiczeń i pracowni oraz regulamin porządkowy, Zasady bezpiecznej pracy, Instrukcje BHP przy pracy z laserami, Klasyfikacja laserów, Stałe fizycznej, Linki. 3.3 Konstrukcja strony. W związku z duŝą liczbą zagadnień oraz obszerną ilością zawartych w serwisie treści, konstrukcja strony powinna być tak pomyślana, aby ułatwić poruszanie się po całym projekcie. W związku z tym wykorzystano następujące elementy poprawiające czytelność i obsługę serwisu: Ramki sprawiają, Ŝe spis treści jest zawsze widoczny, co pozwala na szybkie przechodzenie między stronami serwisu (patrz więcej rozdział 4.4) Odsyłacze odsyłają uŝytkownika do stron w obrębie serwisu oraz do innych stron bez konieczności wpisywania ich adresów. Podczas tworzenia projektu wykorzystano następujące typy odsyłaczy: o do podstrony - serwis internetowy II Pracowni składa się z pewnej liczby podstron, zapisanych w osobnych plikach HTML. Aby umoŝliwić w nich nawigację, naleŝy uŝyć 11

12 odsyłacza do podstron, który przeniesie uŝytkownika do wszystkich podstron, ale tylko w obrębie serwisu. Jest to pomocne przy tworzeniu spisu treści, chociaŝ hiperłącza mogą znajdować się równieŝ w zwykłym tekście, odsyłając uŝytkownika do miejsca, gdzie dany temat jest szerzej opisany. o do etykiety - dzięki nim nawigacja w serwisie staje się duŝo łatwiejsza. Po kliknięciu odsyłacza do etykiety, przeglądarka internetowa przeniesie uŝytkownika bezpośrednio do podrozdziału, a nie na początek strony, przez co nie jest on zmuszony do samodzielnego odszukania wybranego tematu (szczególnie w przypadku dokumentów o duŝych rozmiarach trwa to długo). Etykietę moŝna zdefiniować w dowolnym miejscu strony, takŝe wewnątrz zwykłego tekstu o do adresu internetowego uŝyty został w dziale Linki i jest przydatny, jeśli chcemy umieścić w swoim serwisie tzw. linki do dowolnych stron w obrębie całego Internetu. Adres kaŝdej ciekawej strony moŝna skopiować (z paska adresu przeglądarki) i umieścić w odsyłaczu. Dzięki temu wszyscy uŝytkownicy odwiedzający witrynę II Pracowni Fizycznej będą mogli przenieść się bezpośrednio do wskazanej strony, bez potrzeby wpisywania jej adresu. Podczas projektowania strony internetowej waŝną sprawą było takie jej skonstruowanie, aby poszczególne dokumenty HTML, z których składa się serwis miały moŝliwie najmniejszy rozmiar. MoŜe się zdarzyć, Ŝe osoba, która odwiedzi stronę II Pracowni będzie korzystała z wolnego łącza telefonicznego lub radiowego. Długie ładowanie się serwisu mogłoby utrudnić potencjalnemu odbiorcy korzystanie z jego zasobów. W tym celu strona pozbawiona jest zbędnych elementów i ozdób graficznych zwiększających rozmiar pliku HTML. Zdjęcia stanowisk są dostępne dopiero po kliknięciu odsyłaczy w postaci miniaturek oryginalnych fotografii. Zatem ładowane są przez przeglądarkę tylko obrazy o bardzo małych rozmiarach nie wydłuŝając tym samym czasu otwierania się strony. 12

13 4. Techniczna strona powstania serwisu internetowego dla II Pracowni Fizycznej. Rozdział 4 przedstawia opis serwisu internetowego II Pracowni Fizycznej od strony technicznej. Wszystkie przykłady, o których będzie mowa zamieszczone są w DODATKU A umieszczonym na końcu pracy. Przy odwoływaniu się do tych przykładów podana będzie linia kodu oraz skrót nazwy odpowiedniego z dodatków, np.: /p. L10 ; DA1/ - patrz linia 10 dodatek A O języku HTML Serwis II Pracowni Fizycznej został napisany przy uŝyciu języka HTML 4.01, czyli Hyper Text Markup Language HTML to język hipertekstowego znakowania, którego twórcą jest Tim Berners-Lee. Nad standardem HTML-a czuwa Konsorcjum W3C (World Wide Web Consorcium) między innymi poprzez rozwój technologii i zatwierdzanie specyfikacji. Język HTML pozwala na umieszczanie w Internecie dokumentów, w treści których występować mogą tabele, nagłówki, tekst, zdjęcia, itp. śeby stworzyć stronę WWW potrzebny jest dowolny edytor teksu (WordPad). Aby ułatwić sobie pracę moŝna skorzystać ze specjalnie przygotowanych do tego celu edytorów (Pajączek, ked). Przy pisaniu strony internetowej posłuŝyłem się edytorem ezhtml 2.0 Alef. 4.2 Znaczniki Stworzone dokumenty mają oprócz nazwy rozszerzenie htm lub html, np. ogłoszenia.html. Gdy otworzymy taki dokument zauwaŝymy, Ŝe oprócz zwykłego tekstu jest takŝe szereg ostrych nawiasów, między którymi wpisane są litery bądź całe wyrazy. To znaczniki, które są częścią składni języka HTML. PrzewaŜnie 13

14 stosowane są w parach (patrz przykład 4.2.1). Wyjątkami są między innymi: <HR> - znacznik umieszczający poziomą linię /p. L17 ; DA3/, <BR> - znacznik nowego wiersza, które występują samotnie. Dzięki nim moŝemy ustalać wielkość liter, kolor tła, pogrubić lub pochylić tekst, np.: tak wygląda to w edytorze: <b>tekst, który ma się znaleźć na stronie.</b> a tak na stronie internetowej: Tekst, który ma się znaleźć na stronie. /przykład 4.2.1/ W tym przykładzie <b> to znacznik otwierający, a </b> zamykający. Ich zadaniem jest pogrubienie tekstu. Bardzo waŝnym elementem w składni języka HTML jest paragraf <p>, który wykorzystując atrybuty znacznika pozwala sformatować tekst ukazujący się na ekranie. Atrybuty te naleŝy wpisać wewnątrz znacznika otwierającego, np.: tak wygląda to w edytorze: <p align= left > Tekst, który ma być równany do lewej.</p><br> <p> Tekst, który nie ma być wyrównany do lewej</p> a tak na stronie internetowej: Tekst, który ma być wyrównany do lewej. Tekst, który nie ma być wyrównany do lewej /przykład 4.2.2/ Wykorzystany w przykładzie atrybut znacznika align= left sprawił, Ŝe tekst pierwszej linii został wyrównany do lewej. Analizując kody języka HTML moŝna zauwaŝyć, Ŝe znaczniki pisane są wielkimi bądź małymi literami. Nie ma to jednak Ŝadnego znaczenia, znacznik <i> oraz <I> przeglądarka odczyta poprawnie i za kaŝdym razem pochyli tekst (kursywa). 14

15 4.3 Szkielet Dokumentu HTML Pewne znaczniki oraz odpowiadające im atrybuty pełnią szczególną funkcję, tworzą mianowicie cały szkielet dokumentu HTML. Na przykładzie kodu zawartego w pliku home.html /p. DA2/ opisane zostana cechy poszczególnych elementów kodu: Linia pierwsza mówi o wersji, która przekazuje przeglądarce informacje o zestawie reguł, jakich powinna uŝywać podczas edytowania strony. W projekcie zastosowana została wersja najbardziej elastyczna, zawierająca ramki (punkt 4.4), oraz elementy wersji przejściowej. Pierwszym elementem w omawianym przykładzie jest znacznik otwierający <HTML> /p L2/ a ostatnim zamykający </HTML> /p L46/. Ich zadaniem jest informowanie przeglądarki internetowe odpowiednio o początku i końcu dokumentu HTML oraz o tym, Ŝe wszystko, co jest zawarte między nimi naleŝy do tego dokumentu. Kolejne znaczniki to <HEAD> /p.l3/ i </HEAD> /p.l10/. Ich obecność wyznacza element strony, jakim jest nagłówek. Między tymi znacznikami znajduje się znacznik <META>. Zawarte są tutaj wszystkie informacje przydatne przeglądarkom, jednak nie są one wyświetlane na stronie internetowej: Linia 4 definiuje stronę kodową ISO (polskie znaki), Lina 5 definiuje opis strony. Z informacji tutaj zawartych korzystają wyszukiwarki sieciowe. Opis powinien być krótki i zawierać najistotniejsze wiadomości dotyczące strony, Lina 6 to słowa kluczowe, charakteryzujące zawartość serwisu (naleŝy rozdzielać je przecinkami), Linia 7 w tym miejscu umieszcza się informacji o twórcy strony (imię i nazwisko lub nazwa firmy), Linia 8 Dzięki niej przeglądarka rozpoznaje język, w jakim będzie wyświetlana zawartość strony, Linia 9 zawiera tytułu bieŝącej strony. 15

16 Całą, właściwą treść strony, w której zawierają się wszystkie inne znaczniki, dotyczące formatowania, oraz sam tekst naleŝy umieścić między znacznikami <BODY> /p.l11/ i </BODY> /p. L45/. Podając ich dodatkowe atrybuty, moŝna określić wygląd strony, czyli kolor tła /p.l11/ i tekstu, szerokość marginesów, akapity, czcionkę. W jednym dokumencie nie moŝe być więcej niŝ jeden znacznik <BODY>. A oto elementy i ich atrybuty, które zostały wykorzystane podczas tworzenia strony głównej (home.html): <body BGCOLOR="#90C8F8 > </body> - określa kolor tła, /p. L11/ <font size=2 face="arial" color="black"> </font> - określa rozmiar czcionki i jej typ oraz kolor (czarny), /p.l28/ <IMG SRC="Obrazek.gif" border="0"> - pozwala umieścić na stronie obrazek/zdjęcie, w tym przypadku bez obramowania, /p.l14/ <hr width="60%" align="center" color="white"> - umieszcza na środku strony linię koloru białego, która zajmuje 60% całej szerokości strony /p.l17/ <table width="100%"> </table> - tworzy tabelę /p. L12-19/ <tr> </tr> - tworzy wiersz /p.l13-15/ <td>...</td> - tworzy kolumnę /p.l14/. Przy konstruowaniu lewej części serwisu, czyli spisu treści (spis.html) /p.da3/ między znacznikami <body> zastosowano następujące elementy (opisane zostaną te, o których nie było jeszcze mowy): <BODY LINK="#ffffff" VLINK="#ffffff" ALINK="#ffffff"> - określa kolor odnośników, przy czym: /p.l14/ o LINK oznacza te, które jeszcze nie zostały uŝyte, o VLINK oznacza te, które zostały juŝ uŝyte, o ALINK oznacza aktywne, czyli te, które właśnie zostały uŝyte. <a TARGET="_blank" href= - odnośnik do strony Wydziału Fizyki; znacznik <Target> i jego atrybut sprawiają, Ŝe strona zostanie otwarta w nowym oknie, 16

17 <A TARGET="strona" HREF="plan-zajec.html"><b>Rozkład zajęć</b></a> - odnośnik do podstrony, która otworzy się w prawej części serwisu. Decyduje o tym znacznik <Target>, którego atrybutem jest nazwa prawej ramki /p.l20/. 4.4 Ramki Przy tworzeniu konstrukcji strony dla II Pracowni Fizycznej wykorzystane zostały tzw. ramki, które pozwalają wyświetlić w oknie przeglądarki więcej niŝ jeden dokument HTML. Rysunek prezentuje układ ramek jaki został zastosowany przy tworzeniu strony: Część statyczna, wyposaŝona w system nawigacji, w tym przypadku spis treści strony. Plik o nazwie spis.html Tutaj jest część informacyjna, strona główna serwisu Plik o nazwie home.html Rys Układ ramek, jaki został zastosowany podczas tworzenia strony II Pracowni Fizycznej. To jak w przeglądarce wygląda strona, w której zastosowano ramki moŝna zobaczyć na fotografii 5.1. Podstawowym elementem przy tworzeniu ramek jest utworzenie dokumentu HTML o nazwie index.html, który zawiera specjalny kod /p.da1/ i odpowiada za konstrukcję ramek. Jest to teŝ jedyny taki plik, w którym element <BODY> zastąpiony jest przez znacznik <FRAMESET> /p.l11;da1/. O wyglądzie ramek decyduje umieszczony między element <FRAMESET>, znacznik <FRAME> /p.l12-13;da1/ oraz jego atrybuty: 17

18 Cols określa liczbę kolumn (pionowych ramek) i ich szerokość podawaną w pikselach lub procentach, /p.l11;da1/ Rows określa liczbę wierszy (poziomych ramek) i ich wysokość, Framespacing określa wielkość odstępu między ramkami, /p.l11;da1/ Frameborder określa czy obramowanie dzielące ramki ma być schowane ( 0 ) czy pokazane ( 1 ), /p.l11-13;da1/, Border określa szerokość obramowania. /p.l11;da1/ Noresize sprawia, Ŝe nie będzie moŝliwa zmiana rozmiarów ramki /p.l12-13;da1/ Jak juŝ wcześniej wspomniano ramki pozwalają na wyświetlenie więcej niŝ jednego dokumentu w oknie przeglądarki. Aby tak się stało przeglądarka musi wiedzieć jak się odwołać do tych dokumentów. SłuŜą do tego kolejne atrybuty znacznika <FRAME>: Name wskazuje nazwę kojarzoną z odpowiednią ramką, /p.l12-13;da1/ Src odwołuje się do dokumentu HTML, który powinien być wczytany przez przeglądarki /p.l12-13;da1/. Strona internetowa stworzona w układzie ramek nie jest obsługiwana przez starsze przeglądarki. Aby te przeglądarki wczytywały stronę trzeba w kodzie języka HTML uŝyć elementu <NOFRAMES> /p.l14;da1/. Między znacznikiem <NOFRAMES> i </NOFRAMES> umieszcza się polecenia, które wykonywane są wtedy, gdy strona będzie otwierana przez starsze przeglądarki. Tworząc serwis dla II Pracowni między znacznikami zamieszczony został odsyłacz do pliku spis.html, który zawiera odsyłacze do wszystkich stron serwisu /p.l14;da1/. Pełny, określający ramki kod języka HTML, który uŝyty został przy tworzeniu tego serwisu, przedstawiony jest w DODATKU A1 18

19 4.5 Kaskadowe Arkusze Stylów CSS W tworzeniu strony dla II Pracowni Fizycznej oprócz języka HTML pomocne okazały się style, narzędzie do formatowania stron internetowych, które pozwala na zrobienie tego, czego język HTML nie jest w stanie wykonać. Arkusze stylów przydatne okazały się w kilku przypadkach. Pierwszy raz wykorzystane zostały przy usunięciu podkreślenia w odsyłaczach do innych stron serwisu /p.l9-13;da3/. Ponadto kod języka HTML nie ma moŝliwości utworzenia w tekście akapitu oraz odstępu między linijkami. Aby poprawić wygląd strony głównej naleŝało posłuŝyć się znowu arkuszem stylów, który taką moŝliwość posiada /p.l.36;da2/ 19

20 5. Opis gotowej strony. Stworzenie serwisu II Pracowni Fizycznej wymagało, oprócz odpowiedniego przygotowania zagadnień, równieŝ zebrania materiałów, których treść została później zamieszczona na stronie. Ze zbiorów II Pracowni udostępnione zostały instrukcje do ćwiczeń w postaci plików Word, lista osób prowadzących ćwiczenia, regulamin porządkowy, zasady zaliczeń pracowni i ćwiczeń oraz wskazówki do opisów i prezentacji ustnych. Inspektor ochrony radiologicznej przekazał instrukcję dotyczącą zasady bezpiecznej pracy ze źródłami promieniotwórczymi, a asystenci prowadzący ćwiczenia z wykorzystanie laserów udostępnili materiały dotyczące klasyfikacji tych laserów oraz materiały mówiące o tym jak bezpiecznie ich uŝywać. Najwięcej czasu poświęcono jednak na wykonanie fotografii. W tym celu naleŝało zapoznać się ze wszystkimi stanowiskami pomiarowymi i z pomocą opiekunów poszczególnych doświadczeń przygotować je do sesji zdjęciowej. Następnie wykonane zdjęcia pozostało juŝ tylko opisać, tzn. podpisać wybrane urządzenia i przyrządy pomiarowe. Wykonano to we współpracy z asystentami. Tak przygotowane materiały były juŝ gotowe do zamieszczenia ich na stronie internetowej. Dysponując pełną wiedzą dotyczącą wyglądy i zawartości strony moŝna było przystąpić do realizacji projektu. PoniŜej znajduje się szczegółowy opis gotowej strony II Pracowni Fizycznej, natomiast funkcjonujący serwis moŝna zobaczyć w Dodatku B, który jest w formie płyty CD. Znajduje się tam katalog o nazwie Strona internetowa II Pracowni Fizycznej. Są w nim zamieszczone wszystkie pliki, które składają się na całą stronę Pracowni oraz dwa katalogi Opisy do ćwiczeń oraz Zdjęcia. W pierwszym z nich znajdują się opisy (pliki Word) do wszystkich ćwiczeń w drugim natomiast zdjęcia (pliki z rozszerzeniem JPG) stanowisk pracy z podpisanym przyrządami. Aby wyświetlić stronę II Pracowni Fizycznej naleŝy uruchomić plik o nazwie index.html. 20

21 Pierwszym elementem, który wyświetli się odbiorcom przeglądającym serwis będzie strona główna (patrz fot. 5.1), która jako wizytówka całej pracowni powinna wyglądać estetycznie i czytelnie, aby zachęcić potencjalnego czytelnika. Po lewej stronie znajduje się spis wszystkich odnośników do szczegółowej zawartości pracy oraz linki do stron Wydziału Fizyki i Uniwersytetu Warszawskiego. Menu dostępne jest we wszystkich podstronach, w celu ułatwienia poruszania się po całym projekcie. W części głównej zamieszczona jest krótka charakterystyka II Pracowni Fizycznej, fotografia jednego ze stanowisk pracy, dane kontaktowe, oraz cytat o treści: 1 U podstaw wszystkich nauk przyrodniczych leŝy zasada, którą moŝna nieledwie uwaŝać za ich definicję: sprawdzianem wszelkiej wiedzy jest doświadczenie. Doświadczenie jest jedyną miarą prawdy naukowej. Fot. 5.1 Wygląd strony głównej w przeglądarce Mozilla Firefox 1 Feynman, Leighton and Sands 1963, p. 1-1 (tłum. R.Gajewski) 21

22 Poruszając się po menu znajdującym się po lewej stronie serwisu widać, Ŝe kolejnym elementem projektu są Ogłoszenia. Tutaj studenci będą mogli znaleźć zawsze aktualne wiadomości dotyczące pracowni, np. informacje o dniu wolnym, o dodatkowych terminach zapisów na ćwiczenia. Dział ten będzie cały czas uaktualniany przez administratora strony. Najbardziej rozbudowaną podstroną jest trzecia z kolei, tzn. Wykaz i instrukcje do ćwiczeń. Jak sama nazwa wskazuje na stronie tej znajduje się lista wszystkich 33 dostępnych na II Pracowni doświadczeń. Zostały one podzielone na trzy działy: Fizykę Ciała Stałego, Fizykę Subatomową oraz Optykę. Przy nazwie ćwiczenia umieszczony jest jego symbol, np.: J5 Badanie Efektu Comptona, L6 - Światłowody. KaŜde z tych oznaczeń znajduje się na drzwiach sali, w której odbywają się dane ćwiczenia. Instrukcje do doświadczeń dostępne są po kliknięciu lewym klawiszem myszy na nazwę wybranego ćwiczenia. Aby je odczytać uŝytkownik powinien posiadać zainstalowany na komputerze program Word firmy Microsoft. Przy kaŝdej nazwie ćwiczenia umieszczone są imiona i nazwiska osób je prowadzących. Kolejnym bardzo waŝnym elementem, który znajduje się na tej stronie jest galeria zdjęć, na którą składają się fotografie stanowisk pracy (patrz fot. 5.2). Podpisane są na nich przyrządy wykorzystywane podczas doświadczeń. Student przeglądając zdjęcia juŝ w domu będzie mógł się zapoznać ze stanowiskiem, przy którym przyjdzie mu pracować. 22

23 Fot. 5.2 Stanowisko pracy wraz z podpisanymi przyrządami do ćwiczenia L4 Laser barwnikowy. /fot. M. Mazurek; 2006/ Rozkład zajęć to kolejny element całego projektu. Osoby odwiedzające stronę i klikające na ten link, dowiedzą się, w jakie dni i w jakich godzinach otwarta jest II Pracownia Fizyczna. Umieszczona jest tutaj równieŝ organizacja bieŝącego roku akademickiego na Uniwersytecie Warszawskim. Następna podstrona to Lista osób prowadzących ćwiczenia. Przy kaŝdym imieniu i nazwisku znajduje się informacja o tym, jakie oraz z jakiego działu doświadczenie prowadzi dana osoba. WaŜnym elementem na tej stronie jest kolumna zatytułowana Uwagi. W sytuacji, gdy asystent będzie miał do przekazania studentom pilne informacje dotyczące ćwiczeń, które prowadzi, będzie mógł je umieścić właśnie w tym miejscu. Aby zapewnić osobom korzystającym z serwisu i uczęszczającym na Pracownię kontakt z opiekunami, na stronie umieszczony został link do listy wszystkich 23

24 pracowników Wydziału Fizyki. Są tam podane numery telefonów i pokoi oraz adresy owe. Dalszymi elementami, które zawiera strona internetowa II pracowni Fizycznej są warunki zaliczeń, wskazówki do opisów, regulaminy oraz instrukcje BHP. W tym celu umieszczone zostały następujący odnośniki: Wskazówki dla studentów są tutaj podpowiedzi dla studentów przygotowujących opisy oraz ustne prezentacje. Regulamin pracowni student znajdzie tutaj wszelkie potrzebne informacje dotyczące wykonywania i zaliczania ćwiczeń i pracowni. Umieszczony jest tutaj równieŝ Regulamin porządkowy mówiący o prawidłowym zachowaniu się na zajęciach. Zasady bezpiecznej pracy kontakt ze źródłami promieniotwórczymi wymusza na pracownikach i studentach znajomość podstawowych, ale jakŝe waŝnych zasad. Instrukcje BHP przy pracy z laserami są tu podstawowe wiadomości dotyczące bezpiecznego obchodzenia się z laserami. Klasyfikacja laserów umieszczone są tu definicje klas laserów. Znajomość pełnych treści w/w podpunktów ułatwi bezpieczne wykonywanie ćwiczeń i zaliczenie pracowni. Śledząc stronę WWW II Pracowni moŝna zauwaŝyć, Ŝe studenci uczęszczający na zajęcia z tego przedmiotu muszą w celu zaliczenia ćwiczeń sporządzać opisy, w których wykonują wiele obliczeń, stosując przy tym duŝą liczbę wzorów. W tym celu na stronie umieszczone zostały wybrane stałe fizyczne (równieŝ w wersji do druku), które w wielu wzorach występują, a których znajomość jest nieobowiązkowa. Dzięki temu student nie będzie musiał szukać za kaŝdym razem wartości poszczególnych stałych. Kolejnym elementem całego projektu są Linki. Tutaj znajdują się odnośniki do ciekawych stron poświęconych nie tylko fizyce. Wraz z upływającym czasem podstrona ta będzie zwiększać swoją zawartość. KaŜda interesująca strona zostanie tutaj umieszczona. 24

25 6. Podsumowanie Wykorzystując moŝliwości języka HTML oraz dostępne materiały udało się stworzyć stronę internetową, która w kompleksowy sposób zapoznaje uŝytkowników strony z II Pracownią Fizyczną. MoŜna mieć nadzieję, Ŝe skompletowane w jednym miejscu i udostępnione instrukcje do ćwiczeń, zdjęcia poszczególnych stanowisk pracy stałe fizyczne oraz warunki zaliczeń będą, patrząc z perspektywy osób uczęszczających na pracownie, bardzo pomocne podczas przygotowywania się do zajęć. Funkcjonująca strona II Pracowni Fizycznej została umieszczona pod adresem 25

26 7. Bibliografia i specyfikacje internetowe 1) Karow B., Pfaffenberg B., HTML 4, Biblia. Gliwice: Helion, ) Owczarz A., Paint Shop Pro 9 - Zostań mistrzem. Gliwice: Helion, ) Sokół M., ABC języka HTML. Gliwice: Helion, ) strona internetowa zawierająca kurs html 26

27 DODATEK A WYDRUK KODÓW JĘZYKA HTML 27

28 0 index.html DODATEK A1 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> 2 <HTML> 3 <HEAD> 4 <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso "> 5 <META NAME="Description" CONTENT="Strona zawiera informacje dotyczące II Pracowni Fizycznej na Wydziale Fizyki Uniwersytetu Warszawskiego"> 6 <META NAME="Keywords" CONTENT="II pracownia fizyczna, fizyka, Wydział Fizyki, Uniwersytet Warszawski, pracownia"> 7 <META NAME="Author" CONTENT="Marcin Mazurek"> 8 <META HTTP-EQUIV="Content-Language" CONTENT="pl"> 9 <TITLE>II Pracownia Fizyczna</TITLE> 10 </HEAD> 11 <FRAMESET COLS="210,*" BORDER="1" FRAMEBORDER="1" FRAMESPACING="1"> 12 <FRAME NAME="spis" NORESIZE FRAMEBORDER="1" SRC="spis.html"> 13 <FRAME NAME="strona" NORESIZE FRAMEBORDER="1" SRC="home.html"> 14 <NOFRAMES><A HREF="spis.html">Spis treści</a></noframes> 15 </FRAMESET> 16 </HTML> 28

29 0 home.html DODATEK A2 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> 2<HTML> 3<HEAD> 4 <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso "> 5 <META NAME="Description" CONTENT="Strona zawiera informacje dotyczące II Pracowni Fizycznej na Wydziale Fizyki Uniwersytetu Warszawskiego"> 6 <META NAME="Keywords" CONTENT="II pracownia fizyczna, fizyka, Wydział Fizyki, Uniwersytet Warszawski, pracownia"> 7 <META NAME="Author" CONTENT="Marcin Mazurek"> 8 <META HTTP-EQUIV="Content-Language" CONTENT="pl"> 9 <TITLE>Strona główna</title> 10</HEAD> 11<BODY BGCOLOR="#90C8F8"> 12<table align="center" border=0 width="90%"> 13 <tr> 14 <td align="center"><img SRC="Obrazek.gif" border="0"></td> 15 </tr> 16 <tr> 17 <td align="center" bgcolor="#5080b0"><font size=2 face="verdana" color="ffffff"><b>ul. Pasteura 7, Warszawa ; tel.: (0-22) </b></font></td> 18 </tr> 19 </table> 20<hr width="60%" align="center" color="white"><br> 21<table border=0 width="90%"> 22<tr> 23<td><p align="left" style="{margin-left:2cm}"><font size=3 face="arial" color="black"><i> 24U podstaw wszystkich nauk przyrodniczych leŝy zasada,<br> 25którą moŝną nieledwie uwaŝać za ich definicję:<br> 26sprawdzianem wszelkiej wiedzy jest doświadczenie...<br> 27Doświadczenie jest jedyną miarą "prawdy" naukowej.</i></font><br> 28<font size=2 face="arial" color="black">(feynman, Leighton and Sands 1963, p. 1-1;tłum. R.Gajewski)</font> 29</font></p></td> 30<td><p align="center"><img src="t3.jpg" border="1"></p></td> 31</tr> 32</table> 33<table align="center" border=0 width="90%"> 34<tr> 35<td> 29

30 36<i><p align="justify" style="{ text-indent:1cm}" style="{line-height:1cm}"><font size=4 face="times new roman" color="black" > 37Głównym celem Pracowni jest zapoznanie studentów z technikami eksperymentalnymi stosowanymi w róŝnych działach fizyki poprzez umoŝliwienie im samodzielnego wykonania pomiarów, opracowania i zinterpretowania wyników. 38</font></p> 39<p align="justify" style="{ text-indent:1cm}" style="{line-height:1cm}"><font size=4 face="times new roman" color="black" > 40Studenci wykonują pod opieką asystentów doświadczenia z czterech podstawowych działów: optyki, fizyki ciała stałego, fizyki jądrowej i fizyki cząstek elementarnych. Ćwiczenia wykonywane są indywidualnie. Czas wykonania ćwiczenia wynosi od dwóch do czterech tygodni. Na zakończenie ćwiczenia studenci przygotowują opisy, które mają formę doniesienia naukowego. Ocena końcowa uwzględnia wszystkie elementy ćwiczenia - kolokwium wstępne, część doświadczalną, opis i rozmowę końcową. <br> 41</font></p></i> 42</td> 43</tr> 44</table> 45</BODY> 46</HTML> 30

31 0 spis.html DODATEK A3 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> 2<HTML> 3<HEAD> 4 <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso "> 5 <META NAME="Author" CONTENT="Marcin Mazurek"> 6 <META HTTP-EQUIV="Content-Language" CONTENT="pl"> 7 <TITLE>Spis treści</title> 8</HEAD> 9<STYLE TYPE="text/css"> 10<!-- 11A:link, A:visited { text-decoration: none } 12--> 13</STYLE> 14<BODY BGCOLOR="#5080b0" LINK="#ffffff" VLINK="ffffff" ALINK="ffffff"> 15<p align="center"><a TARGET="_blank" href=" SRC="fizyka.gif" border="0" ALT="Strona Wydziału Fizyki"></A></p> 16<hr width="80%" align="center" color="ffffff"><font size=2 face="verdana"><br> 17<A TARGET="strona" HREF="home.html"><b>Strona główna</b></a><br><br> 18<A TARGET="strona" HREF="ogloszenia.html"><b>Ogłoszenia</b></A><br><br> 19<A TARGET="strona" HREF="wykaz-cwiczen.html"><b>Wykaz i instrukcje do ćwiczeń</b></a><br><br> 20<A TARGET="strona" HREF="plan-zajec.html"><b>Rozkład zajęć</b></a><br><br> 21<A TARGET="strona" HREF="lista-pracownikow.html"><b>Lista osób prowadzących ćwiczenia</b></a><br><br> 22<A TARGET="strona" HREF="wskazowki-opis.html"><b>Wskazówki dla studentów</b></a><br><br> 23<A TARGET="strona" HREF="regulamin-pracowni.html"><b>Regulamin pracowni</b></a><br><br> 24<A TARGET="strona" HREF="zasady.html"><b>Zasady bezpiecznej pracy</b></a><br><br> 25<A TARGET="strona" HREF="lasery-BHP.html"><b>Instrukcja BHP przy pracy z laserami</b></a><br><br> 26<A TARGET="strona" HREF="lasery.html"><b>Klasyfikacja laserów</b></a><br><br> 27<A TARGET="strona" HREF="stale-fizyczne.html"><b>Stałe fizyczne</b></a><br><br> 28<A TARGET="strona" HREF="linki.html"><b>Linki</b></A><BR><br> 29</font> 30<hr width="80%" align="center" color="ffffff"><font size=2 face="verdana"> 31

32 31<p align="center"><a TARGET="_blank" href=" SRC="uniwerek.gif" border="0" ALT="Uniwersytet Warszawski"></A></p> 32<p align="left"><font size=2 face="verdana" color="001000">autor:<a TARGET="_blank" HREF=" Marcin Mazurek</A> </font></p> 33</BODY> 34</HTML> 32