AKTUALIZOWANIE STRONY INTERNETOWEJ SEBASTIAN KIERZKA ZESPÓŁ SZKÓŁ SZPITALNYCH AKTUALIZOWANIE STRONY INTERNETOWEJ

INFORMACJE OGÓLNE Co to jest WWW? WWW (ang. World Wide Web) jest hipertekstowym, multimedialnym, sieciowym (TCP/IP) systemem informacyjnym opartym na publicznie dostępnych, otwartych standardach (IETF, W3C i ISO). Pierwotnym i w chwili obecnej nadal podstawowym zadaniem WWW jest publikowanie informacji na stronach internetowych.

INFORMACJE OGÓLNE Co to jest HTML? HTML (ang. HyperText Markup Language) to język składający się ze znaczników stosowany do pisania stron WWW. Dzięki niemu możemy tworzyć strony WWW nie tylko z tekstem czy z obrazkami, ale także z dźwiękiem czy animacjami. Jego pierwsza wersja została opracowana przez Tima Berners-Lee w 1989 roku i od tej pory jest stale rozwijana by zwiększyć możliwości stron internetowych.

Co to jest przeglądarka internetowa? INFORMACJE OGÓLNE Co to jest przeglądarka internetowa? Jest to program komputerowy, który służy do pobierania i wyświetlania dokumentów HTML oraz XHTML i XML (czyli stron WWW) z serwerów internetowych, a także programów oraz plików multimedialnych (czasem z pomocą różnych wtyczek). Przeglądarki dekodują kod HTML i wyświetlają na ekranie już odszyfrowaną stronę WWW, zrozumiałą dla zwykłego odbiorcy.

Najpopularniejsze przeglądarki internetowe INFORMACJE OGÓLNE Najpopularniejsze przeglądarki internetowe Internet Explorer, Firefox, Opera, Konqueror, SeaMonkey, Safari, Flock, Netscape.

INFORMACJE OGÓLNE Co to jest FTP? FTP (File Transfer Protokol), czyli protokół transferu plików jest sposobem komunikowania się komputerów w celu wymiany plików. FTP jest często używany do ściągania plików z serwera lub wgrywania plików na serwer np. wgrywania strony internetowej.

NIEZBĘDNE PROGRAMY ZACZYNAMY  Do aktualizacji naszej strony WWW będziemy potrzebowali następujących programów: IrfanView (lub inny program graficzny) Notatnik (lub inny edytor tekstu) Internet Explorer (lub inną przeglądarkę) FileZilla (lub inny program FTP)

CO BĘDZIEMY ROBIĆ Kolejne kroki: Pomniejszenie, kompresja i zapisanie zdjęcia oraz jego miniaturki; Stworzenie podstrony dla zdjęcia z hiperłączem do niego; Aktualizacja kodu HTML głównej strony WWW; Wgranie zdjęć i zaktualizowanej strony oraz podstrony na serwer internetowy; Wpisane w przeglądarkę internetową adresu http://www.sszpitalne.edu.pl i sprawdzenie czy poprawnie wykonaliśmy naszą pracę.

OTWARCIE I POMNIEJSZANIE ZDJĘCIA Krok 1 Do pomniejszenia zdjęcia wcześniej ściągniętego z poczty internetowej użyjemy darmowego programu IrfanView: Otwieramy zdjęcie wskazujemy interesujące nas zdjęcie i klikamy na nie pojawia się podgląd zdjęcia klikamy „Otwórz” Otwieramy okno zmiany rozmiaru zdjęcia Zmieniamy rozmiar zdjęcia na 500x375 Klikamy na „OK.”

KOMPRESJA I ZAPISANIE ZDJĘCIA Krok 1 Zmieniliśmy już rozmiar zdjęcia, teraz trzeba je zapisać w którymś z formatów graficznych (na naszej stronie przyjęliśmy format JPG). Ponieważ zapisując zdjęcie w tym formacie mamy dowolną możliwość kompresji to skorzystamy z niej. Należy zatem wybrać stopień kompresji zdjęcia pamiętając o tym, że im bardziej poddamy zdjęcie kompresji, tym mniejszy będzie ono miało rozmiar i nasza strona szybciej będzie się wczytywać, ale z drugiej strony zdjęcie będzie bardziej zniekształcone i mniej czytelne. W naszym przypadku pójdziemy na kompromis rozmiaru względem jakości i zapiszemy zdjęcie w jakości 75 %

KOMPRESJA I ZAPISANIE ZDJĘCIA Krok 1 Dla przykładu pokażę jak wygląda zdjęcie w jakości 100 %, 75%, 50%, 25%, oraz 0% Teraz zobaczmy jaki wpływ ma zapisanie zdjęcia w konkretnej jakości na jego rozmiar: Jakość 100% - 114 KB Jakość 75% - 34 KB Jakość 50% - 27 KB Jakość 25% - 22 KB Jakość 0% - 14 KB 100 % 50 % 75 % 25 % 0 % To nam wyjaśniło, dlaczego wybraliśmy jakość 75% - zdjęcie w tej jakości jest niewiele zniekształcone a jednocześnie ma mały rozmiar

KOMPRESJA I ZAPISANIE ZDJĘCIA Krok 1 Wracamy do naszego zdjęcia, teraz je zapiszemy na dysku z wcześniej już wspomnianą jakością 75% patrzymy, jakiego numeru użyliśmy poprzednim razem jako nazwy zdjęcia w polu „NAZWA PLIKU” wpisujemy kolejny numer, w tym przypadku będzie to 492 w polu „ZAPISZ JAKO” zaznaczamy pozycję „JPG – JPEG pliki” 492 w polu „OPCJE ZAPISU PLIKÓW JPEG/GIF” ustawiamy suwak na pozycję 75 klikamy na przycisk „ZAPISZ”

Krok 1 MINIATURKA Mamy już przygotowane zdjęcie do zamieszczenia na naszej stronie internetowej, ale potrzebujemy jeszcze do niego miniaturkę ponieważ na stronie nie umieszczamy bezpośrednio zdjęć o wielkości 500 x 375, ale ich miniaturki o wielkości 150 x113. Dopiero po kliknięciu miniaturki hiperłącze przeniesie nas do właściwego zdjęcia. Aby więc zrobić miniaturkę zdjęcia powtarzamy dokładnie cały krok 1 tworząc obrazek o rozmiarach 150 x113 ale zapisując, za numerem „492” dodamy jeszcze bez spacji „_small” ponieważ nazwa miniaturki musi być inna niż obrazka

PODSTRONA DLA MINIATURKI ZDJĘCIA Krok 2 Najprostsze już za nami  Teraz rozpoczniemy zabawę z kodem HTML aby utworzyć podstronkę dla zdjęcia. Tworzenie podstronki nie jest niezbędne, można by zamiast do niej skierować hiperłącze bezpośrednio do naszego zdjęcia (500 x 375) i zaoszczędzić sobie pracy, ale wtedy zdjęcie będzie się otwierać w standardowym oknie przeglądarki, razem z wszystkimi paskami zadań, adresu, łączami, przyciskami standardowymi itp. Dzięki podstronce zdjęcie na naszej stronie będzie otwierać się bez zbędnych pasków, dzięki czemu będzie więcej miejsca na monitorze dla innych aplikacji.

TWORZENIE PODSTRONY DLA MINIATURKI ZDJĘCIA Krok 2 Otwieramy notatnik i wpisujemy kod HTML. Zapisujemy wynik naszej pracy. Nadajemy nazwę taką jak zdjęcie i dopisujemy „.html”. Klikamy na „ZAPISZ” <html> <head> <title>Aktualnosci</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <img src="/images/aktualnosci/492.jpg" width="500" height="375"> </body> </html>

AKTUALIZACJA KODU HTML GŁÓWNEJ STRONY WWW Krok 3 Kolejnym krokiem jest aktualizacja głównej strony WWW, czyli pliku, który na serwerze posiada nazwę „index.htm”. Jeżeli nie posiadamy tego pliku na dysku to bez problemu możemy go ściągnąć z serwera naszej strony WWW za pomocą darmowej aplikacji „FileZilla” lub każdej innej, która posiada dostęp do FTP, nawet popularnym programem „TotalCommander”. W naszej pracy użyjemy aplikacji „FileZilla”.

POBRANIE PLIKU „index.htm” Z SERWERA STRONY INTERNETOWEJ Krok 3 otwieramy porgram „FileZilla” otwieramy wcześniej skonfigurowany dostęp FTP Odpowiedź: 150 Opening ASCII mode data connection for file list Odpowiedź: 226 Transfer complete. Status: Wylistowanie katalogu powiodło się program łączy się z serwerem gdy już będziemy połączeni z serwerem, będziemy mieli wgląd we wszystkie pliki znajdujące się na nim najeżdżamy kursorem na plik „index.htm” klikamy prawym klawiszem myszki i wybieramy „POBIERZ” po chwili program powinien zaimportować plik na dysk naszego komputera

AKTUALIZACJA KODU HTML GŁÓWNEJ STRONY WWW Krok 3 Mamy już dostęp do kodu HTML naszej strony internetowej. Możemy zatem przystąpić do jej aktualizacji. Jest wiele programów wspomagających pracę webmastera (osoby zajmującej się stronami WWW) zarówno darmowych (np. Zajączek, Pajączek itp.) jak i płatnych (np. FrontPage). Jeżeli ktoś jednak zna dobrze język HTML jest w stanie tworzyć i aktualizować strony internetowe w zwykłym systemowym notatniku (ten sposób poznaliśmy w kroku 2). Ponieważ aktualizowanie strony internetowej za pomocą notatnika nie wymaga instalowania żadnego dodatkowego oprogramowania wybrałem ten właśnie sposób i opiszę go dokładnie w następnej części tej prezentacji.

AKTUALIZACJA KODU HTML GŁÓWNEJ STRONY WWW Krok 3 Aby otworzyć naszą stronę (plik „index.htm”) w notatniku należy kliknąć na nim prawym klawiszem myszy i z rozwiniętego w ten sposób menu wybrać „OTWÓRZ ZA POMOCĄ” a następnie „NOTATNIK”

AKTUALIZACJA KODU HTML GŁÓWNEJ STRONY WWW Krok 3 Obecnie nasza strona wygląda tak: Ostatnia informacja na stronie nosi datę 28 marca 2007, a my chcemy zamieścić notatkę z dnia 29 marca 2007 Zatem będziemy wstawiać informację w tym miejscu, nad notatką z 28 marca 2007 Musimy więc odnaleźć te miejsce w kodzie HTML naszej strony. Nie jest to takie proste ponieważ nasza strona zawiera już 2983 linijek kodu !!!

AKTUALIZACJA KODU HTML GŁÓWNEJ STRONY WWW Krok 3 otwieramy notatnik <hr> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="table807"> <tr> <td width="60"> </td> </tr> </table> <p style="margin-top: 0; margin-bottom: 0" align="left"> <span class="news"><strong>28 marca 2007</strong></span><br> w szpitalu przy ul. ¶w. Wojciecha odbyło się rozstrzygnięcie konkursu plastycznego </p> pt. "Na pokładzie żaglowca". W imprezie uczestniczył sternik jachtowy pan </p> Wacław Jefimowicz.</p> <p style="margin-top: 0; margin-bottom: 0" align="justify"> <br> </p> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="table808"> <td width="201" valign="top"> <a onMouseDown="noweokno('images/aktualnosci/480.htm','Proauto','500','375')" href="#"> <img src="images/aktualnosci/480_small.jpg" width="150" height="113" border="0"></a></td> <td width="260"><div align="center"> <a onMouseDown="noweokno('images/aktualnosci/481.htm','Proauto','500','375')" href="#"> <img src="images/aktualnosci/481_small.jpg" width="150" height="113" border="0"></a></div></td> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="table811"> Otwieramy naszą stronę: „PLIK -> OTWÓRZ” a następnie wskazujemy plik „index.htm” i klikamy na „OTWÓRZ” odnajdujemy interesujący nas fragment kodu HTML już wiemy, że musimy naszą informację umieścić nad datą 28 marca 2007 ponieważ umieszczamy notatkę z dnia 29 marca 2007 nasza ingerencja w kod HTML będzie miała miejsce dokładnie w 230 lini kodu

AKTUALIZACJA KODU HTML GŁÓWNEJ STRONY WWW Krok 3 <table width="100%" border="0" cellspacing="0" cellpadding="0" id="table814"> <tr> <td width="60"> </td> <td width="186" valign="top"> <p style="margin-top: 0; margin-bottom: 0"> <a onMouseDown="noweokno('images/aktualnosci/492.htm','Proauto','500','375')" href="#"> <img src="images/aktualnosci/492_small.jpg" width="150" height="113" border="0"></a></td> <td width="275"><div align="center"> <p style="margin-top: 0; margin-bottom: 0" align="left"> <span class="news"><strong>29 marca 2007</strong></span></p> W Szpitalu na Pomorzanach odbył </p> sie mini konkurs pt. "Wielkanocna Pisanka". Wszyscy uczestnicy konkursu </p> otrzymali pami±tkowe dyplomy. </p></div></td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="table817"> <hr> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="table845"> w miejsce przerywanej linii z poprzedniego slajdu dodajemy następujący kod HTML: po dodaniu tego fragmentu HTML-a nasza strona liczy już 3020 linijek kodu i zawiera 105964 znaków!!! teraz musimy zapisać wynik naszej pracy. Robimy to klikając na „PLIK” a następnie po rozwinięciu się menu klikamy na „ZAPISZ”

WGRANIE ZAKTUALIZOWANEJ STRONY I ZDJĘĆ NA SERWER Krok 4 zaktualizowany plik „index.htm” wysyłamy na serwer w podobny sposób wysyłamy na serwer do odpowiedniego katalogu nasze zdjęcie, jego miniaturkę oraz podstronkę

SPRAWDZAMY CZY POPRAWNIE PRZEPROWADZILIŚMY AKTUALIZACJĘ Krok 5 wchodzimy na stronę www.sszpitalne.edu.pl sprawdzamy czy nasza informacja została poprawnie zamieszczona sprawdzamy czy link w miniaturce działa poprawnie i po kliknięciu otwiera się właściwe zdjęcie strona została poprawnie zaktualizowana 

DZIĘKUJĘ ZA WYTRWAŁOŚĆ KONIEC DZIĘKUJĘ ZA WYTRWAŁOŚĆ Prezentację przygotował: Sebastian Kierzka ZESPÓŁ SZKÓŁ SZPITALNYCH W SZCZECINIE - SZKOŁA INNA NIŻ WSZYSTKIE… www.sszpitalne.edu.pl Wszelkie uwagi proszę wysyłać na adres: tigersoft@wp.pl