Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

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

Podobne prezentacje


Prezentacja na temat: "AKTUALIZOWANIE STRONY INTERNETOWEJ SEBASTIAN KIERZKA ZESPÓŁ SZKÓŁ SZPITALNYCH."— Zapis prezentacji:

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

2 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.

3 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.

4 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.

5 Najpopularniejsze przeglądarki internetowe Internet Explorer, Firefox, Opera, Konqueror, SeaMonkey, Safari, Flock, Netscape.

6 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.

7 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)

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

9 OTWARCIE I POMNIEJSZANIE ZDJĘCIA Krok 1 Do pomniejszenia zdjęcia wcześniej ściągniętego z poczty internetowej użyjemy darmowego programu IrfanView: O t w i e r a m y z d j ę c i e w s k a z u j e m y i n t e r e s u j ą c e n a s z d j ę c i e i k l i k a m y n a n i e p o j a w i a s i ę p o d g l ą d z d j ę c i a k l i k a m y O t w ó r z O t w i e r a m y o k n o z m i a n y r o z m i a r u z d j ę c i a Z m i e n i a m y r o z m i a r z d j ę c i a n a x K l i k a m y n a O K.

10 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 %

11 Krok 1 Dla przykładu pokażę jak wygląda zdjęcie w jakości 100 %, 75%, 50%, 25%, oraz 0% 100 %75 %50 %25 %0 % Teraz zobaczmy jaki wpływ ma zapisanie zdjęcia w konkretnej jakości na jego rozmiar: Jakość 100% KB Jakość 75% - 34 KB Jakość 50% - 27 KB Jakość 25% - 22 KB Jakość 0% - 14 KB 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

12 Krok 1 Wracamy do naszego zdjęcia, teraz je zapiszemy na dysku z wcześniej już wspomnianą jakością 75% p a t r z y m y, j a k i e g o n u m e r u u ż y l i ś m y p o p r z e d n i m r a z e m j a k o n a z w y z d j ę c i a w p o l u N A Z W A P L I K U w p i s u j e m y k o l e j n y n u m e r, w t y m p r z y p a d k u b ę d z i e t o w p o l u Z A P I S Z J A K O z a z n a c z a m y p o z y c j ę J P G – J P E G p l i k i w p o l u O P C J E Z A P I S U P L I K Ó W J P E G / G I F u s t a w i a m y s u w a k n a p o z y c j ę 7 5 k l i k a m y n a p r z y c i s k Z A P I S Z

13 MINIATURKA Krok 1 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

14 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.

15 TWORZENIE PODSTRONY DLA MINIATURKI ZDJĘCIA Krok 2 Otwieramy notatnik i wpisujemy kod HTML. Aktualnosci Zapisujemy wynik naszej pracy. Nadajemy nazwę taką jak zdjęcie i dopisujemy.html. Klikamy na ZAPISZ

16 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.

17 POBRANIE PLIKU index.htm Z SERWERA STRONY INTERNETOWEJ Krok 3 o t w i e r a m y w c z e ś n i e j s k o n f i g u r o w a n y d o s t ę p F T P o t w i e r a m y p o r g r a m F i l e Z i l l a Odpowiedź: 150 Opening ASCII mode data connection for file list Odpowiedź:226 Transfer complete. Status:Wylistowanie katalogu powiodło się p r o g r a m ł ą c z y s i ę z s e r w e r e m g d y j u ż b ę d z i e m y p o ł ą c z e n i z s e r w e r e m, b ę d z i e m y m i e l i w g l ą d w e w s z y s t k i e p l i k i z n a j d u j ą c e s i ę n a n i m n a j e ż d ż a m y k u r s o r e m n a p l i k i n d e x. h t m k l i k a m y p r a w y m k l a w i s z e m m y s z k i i w y b i e r a m y P O B I E R Z p o c h w i l i p r o g r a m p o w i n i e n z a i m p o r t o w a ć p l i k n a d y s k n a s z e g o k o m p u t e r a

18 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.

19 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

20 AKTUALIZACJA KODU HTML GŁÓWNEJ STRONY WWW Krok 3 Obecnie nasza strona wygląda tak: Zatem będziemy wstawiać informację w tym miejscu, nad notatką z 28 marca 2007 Ostatnia informacja na stronie nosi datę 28 marca 2007, a my chcemy zamieścić notatkę z dnia 29 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 !!!

21 Krok 3 28 marca 2007 w szpitalu przy ul. ¶w. Wojciecha odbyło się rozstrzygnięcie konkursu plastycznego pt. "Na pokładzie żaglowca". W imprezie uczestniczył sternik jachtowy pan Wacław Jefimowicz. o t w i e r a m y n o t a t n i k O t w i e r a m y n a s z ą s t r o n ę : P L I K - > O T W Ó R Z a n a s t ę p n i e w s k a z u j e m y p l i k i n d e x. h t m i k l i k a m y n a O T W Ó R Z o d n a j d u j e m y i n t e r e s u j ą c y n a s f r a g m e n t k o d u H T M L j u ż w i e m y, ż e m u s i m y n a s z ą i n f o r m a c j ę u m i e ś c i ć n a d d a t ą 2 8 m a r c a p o n i e w a ż u m i e s z c z a m y n o t a t k ę z d n i a 2 9 m a r c a n a s z a i n g e r e n c j a w k o d H T M L b ę d z i e m i a ł a m i e j s c e d o k ł a d n i e w l i n i k o d u

22 AKTUALIZACJA KODU HTML GŁÓWNEJ STRONY WWW Krok 3 29 marca 2007 W Szpitalu na Pomorzanach odbył sie mini konkurs pt. "Wielkanocna Pisanka". Wszyscy uczestnicy konkursu otrzymali pami±tkowe dyplomy. w m i e j s c e p r z e r y w a n e j l i n i i z p o p r z e d n i e g o s l a j d u d o d a j e m y n a s t ę p u j ą c y k o d H T M L : p o d o d a n i u t e g o f r a g m e n t u H T M L - a n a s z a s t r o n a l i c z y j u ż l i n i j e k k o d u i z a w i e r a z n a k ó w ! ! ! t e r a z m u s i m y z a p i s a ć w y n i k n a s z e j p r a c y. R o b i m y t o k l i k a j ą c n a P L I K a n a s t ę p n i e p o r o z w i n i ę c i u s i ę m e n u k l i k a m y n a Z A P I S Z

23 WGRANIE ZAKTUALIZOWANEJ STRONY I ZDJĘĆ NA SERWER Krok 4 z a k t u a l i z o w a n y p l i k i n d e x. h t m w y s y ł a m y n a s e r w e r w p o d o b n y s p o s ó b w y s y ł a m y n a s e r w e r d o o d p o w i e d n i e g o k a t a l o g u n a s z e z d j ę c i e, j e g o m i n i a t u r k ę o r a z p o d s t r o n k ę

24 SPRAWDZAMY CZY POPRAWNIE PRZEPROWADZILIŚMY AKTUALIZACJĘ Krok 5 w c h o d z i m y n a s t r o n ę w w w. s s z p i t a l n e. e d u. p l s p r a w d z a m y c z y n a s z a i n f o r m a c j a z o s t a ł a p o p r a w n i e z a m i e s z c z o n a s p r a w d z a m y c z y l i n k w m i n i a t u r c e d z i a ł a p o p r a w n i e i p o k l i k n i ę c i u o t w i e r a s i ę w ł a ś c i w e z d j ę c i e s t r o n a z o s t a ł a p o p r a w n i e z a k t u a l i z o w a n a

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


Pobierz ppt "AKTUALIZOWANIE STRONY INTERNETOWEJ SEBASTIAN KIERZKA ZESPÓŁ SZKÓŁ SZPITALNYCH."

Podobne prezentacje


Reklamy Google