Tworzenie stron WWW Podstawowe wiadomości Wojciech Sobieski Olsztyn 2005 Programowanie Stron WWW Tworzenie stron = PROGRAMOWANIE Translatory JZYKI PROGRAMOWANIA Kompilowane Interpretowane
Pascal Logo
Basic Python
C / C++ HTML Plik wykonywalny Brak plik wykonywalnego Potrzebny Interpreter Translatory JZYKI PROGRAMOWANIA Kompilowane Interpretowane KOD yRÓDAOWY Translatory Przeglądarka = Multitranslator Struktura Serwer - Klient Serwer Klient Część programów (skryptów) Część programów (skryptów) wykonywana jest po stronie wykonywana jest bezpośrednio swerwera WWW (o ile serwe po stronie klienta odbywa się ma obsługę danego języka), to najczęściej w przeglądarce a do klienta dostarczany jest internetowej. jedynie wynik działania skryptu. Przykłady: PHP, MySQL Przykłady: HTML, JavvaScript. Technologie Technologie Tworzenia Stron WWW Inne Podstawowe (Flash ActiveX ASP (HTML, CSS, JavaScript) XHTML VRML SVG) Bazodanowe Systemy (PHP, MySQL, CGI, Zarządzania Treścią APS) Technologie HTML (Hypertext Markup Language) Język definiowania i formatowania dokumentów cyfrowych, opracowany w latach 1989-91 przez T. Bernersa-Lee dla organizacji CERN na podstawie standardu SGML. HTML definiuje wygląd dokumentów za pomocą znaczników (tags) i opiera się na systemie odnośników (links) do innych stron. Kod HTML-a interpretowany jest po stronie klienta. Technologie CSS (Cascading Style Sheets) Mechanizm pozwalający przypisywać style elementom definiowanym przy pomocy języków opisu dokumentu - przede wszystkim HTML i XML. Styl opisuje sposób prezentacji elementu przez przeglądarkę. Z pomocą arkuszy można w łatwy sposób nadawać rozbudowanym serwisom jednolity układ i wygląd. Ogromną zaletą CSS jest możliwość łatwej modyfikacji wszystkich stron korzystających z tego samego arkusza stylów. Zmiana wyglądu sprowadza się wówczas do modyfikacji pojedynczego wzorca. Kod CSS-a interpretowany jest po stronie klienta. Technologie JavaScript Jest to język pozwalający na dodawanie dynamicznych elementów do strony www. Znaczną wadą języka jest brak jedneg ostandardu rozwijał się on niezależnie dla przeglądarek Internet Explorer (liczne niestandardowe rozszerzenia) oraz dla przeglądarek z grupy Netscape/Mozilla (standardy W3C). Kod JavaScritp wykonywany jest przez przeglądarkę internetową po stronie klienta. Technologie PHP (Personal Home Page Tools) Język skryptowy służący do tworzenia programów oraz interpreter wykonujący je po stronie serwera (server-side scripting). Bloki kodu PHP umieszczane są bezpośrednio w dokumencie HTML. Przed wysłaniem do przeglądarki serwer przekazuje dokument HTML interpreterowi PHP, który tłumaczy komendy PHP oraz wykonuje odpowiadające im operacje. PHP jest techniką analogiczną do ASP (Active Server Pages), jednak w przeciwieństwie do produktu Microsoft działać może na dowolnej platformie (choć obecnie najczęściej stosuje się go w połączeniu z serwerami linuksowymi). Jest produktem udostępnianym na licencji open source - bezpłatnie razem z kodem zródłowym. Technologie MySQL Najpopularniejszy serwer bazodanowy, wyprodukowany przez firmę T.c.X DattaKonsultAB. Udostępniany wraz z kodem zródłowym, na zasadach określonych w licencji GNU. Główne cechy:
baza danych zdolna pomieścić nawet kilkadziesiąt milionów rekordów (wielkość ta zależy jedynie od fizycznych możliwości komputera)
interfejsy API dla najważniejszych języków programowania
wykorzystanie mocy komputerów wieloprocesorowych
nieograniczona liczba użytkowników mogących jednocześnie korzystać z bazy danych
duża szybkość działania Kod MySQL-a wykonywany jest po stronie serwera. Technologie CGI (Common Gateway Interface) Standard interfejsu służącego wymianie informacji między serwerami a zewnętrznymi programami. CGI definiuje komunikację pomiędzy graficznym interfejsem użytkownika (np. stroną WWW), programem CGI uruchomionym na odległym komputerze i zasobami informacyjnymi (np. bazami danych) odległego komputera. Z kolei zaimplementowana w serwerze obsługa standardu CGI pozwala mu nadzorować wszystkie operacje - serwer staje się wówczas bramą (gatewayem) do danego zródła informacji. Skrypty CGI wykonywane są po stronie serwera. Technologie ASP (Active Server Pages) ASP to technologia pozwalająca dynamicznie tworzyć strony internetowe przez serwer WWW na podstawie skryptów. Jest to podobna technika do PHP ale dla serwerów windows'owych (IIS lub PWS). Skrypty ASP wykonywane są po stronie serwera. Technologie Macromedia Flash Jest to technologia tworzenia animacji wektorowych na zasadzie klatek kluczowych. Powstałe pliki, zwane często "plikami flash" można odtwarzać na stronie za pomocą przeglądarki internetowej lub w oddzielnym programie do tego przeznaczonym. Pliki Flash są najczęściej wykorzystywane do reklam internetowych. Pliki wykonywane po stronie klienta. Technologie ActiveX ActiveX to otwarty, wieloplatformowy zestaw technik łączenia komponentów w Internecie i sieciach intranet. Komponenty ActiveX mogą działać po stronie serwera i stamtąd modyfikować stronę WWW widzianą przez klienta. Technika ta pozwala na łatwe tworzenie, scalanie i udostępnianie komponentów oprogramowania. Używając ActiveX, programista może utworzyć komponent w dowolnym języku programowania, zintegrować go z dowolnym skryptem, zaś całość uruchomić z wnętrza dowolnej aplikacji, na przykład przeglądarki WWW czy jednej z wielu powszechnie używanych aplikacji biurowych. ActiveX ma zastosowanie w systemach Windows, Unix i Macintosh. Komponenty ActiveX mogą być wykonywane po stronie serwera lub klienta. Technologie XHTML (Extensible Hypertext Markup Language) Język znaczników będący bezpośrednim kontynuatorem HTML, mającym ten sam potencjał, ale bardziej rygorystyczną składnię. XHTML 1.0 stał się oficjalną rekomendacją World Wide Web Consortium 26 stycznia 2000 r. Zmiany zawarte w XHTML w stosunku do HTML są niewielkie i mają na celu zwiększenie zgodności z XML. Najważniejszą zmianą jest wymóg absolutnej poprawności znaczników HTML. Dodatkowo, w XHTML wszystkie znaczniki muszą być pisane małymi literami. W XHTML wszystkie atrybuty, nawet numeryczne, muszą być objęte cudzysłowami. Wszystkie elementy muszą być także domknięte, łącznie z pustymi, np. i . Kod XHTML-a wykonywany jest po stronie klienta. Technologie SVG (Scalable Vector Graphics) SVG to stworzona w 1999 roku przez W3C aplikacja XML opisująca dwuwymiarową (2D) statyczną i animowaną grafikę wektorową na stronach WWW. Technologie VRML (Virtual Reality Modeling Language) Język modelowania rzeczywistości wirtualnej VRML przeznaczony do opisu trójwymiarowych, wirtualnych światów graficznych, generowanych dla użytkowników przeglądarek WWW. Język VRML jest oparty na plikach w formacie ASCII i na środowiskach modelowania trójwymiarowego, opracowanych przez firmę Silicon Graphics. Główną cechą VRML jest to, że do użytkownika jest przesyłany opis obiektów w trójwymiarowym świecie, a nie rzeczywista grafika. Takie rozwiązanie pozwala na znaczną redukcję wymagań dotyczących szerokości pasma przenoszenia i umożliwia praktyczne wykorzystanie wirtualnej rzeczywistości w sieci WWW. Kod VRML wykonywany jest po stronie klienta. Technologie CMS (Content Management System) System Zarządzania Treścią - jest to jedna lub zestaw aplikacji internetowych pozwalających na łatwą aktualizację i rozbudowę serwisu WWW przez personel nietechniczny. Modyfikacja i dodawanie nowych materiałów do serwisu odbywa się za pomocą prostych w obsłudze interfejsów użytkownika, zazwyczaj w postaci stron WWW zawierających rozbudowane formularze. Przykłady systemów CSM:
PHP-nuke
Postnuke
Mamboo
Geeklog
eZ Publish Podstawy HTML 1. Struktura kodu HTML HEAD sekcja nagłówka (zawiera ogólne ustawienia oraz informacje stronie) BODY sekcja treści (zawiera treść strony: tekst, grafikę, odnośniki, itd.) Podstawy HTML 1. Struktura kodu HTML
wnętrze nagłówka... Obszar kodu zródłowego treść strony...
Podstawy HTML 2. Znaczniki HTML Znacznik otwierający ... Obszar ... obowiązywania ... znacznika Znacznik zamykający Podstawy HTML 2. Znaczniki HTML ..................................... Obszar Znacznik Znacznik obowiązywania otwierający zamykający znacznika Podstawy HTML 2. Znaczniki HTML Tu będzie pogrubione słowo.
Kod Tu będzie słowo pisane kursywą .
zródłowy Tu będzie podkreślone słowo.
Wynik Tu będzie pogrubione słowo. działania: Tu będzie słowo pisane kursywą. Tu będzie podkreślone słowo. Podstawy HTML 3. Opcje znaczników HTML
To jest typowy akapit bez specjalnych opcji. Jeżeli Kod chcemy coś zmienić, to należy po znaczniku otwierającym zródłowy P (w nawiasie) umieścić dodatkowe opcje.
Wynik To jest typowy akapit bez specjalnych opcji. Jeżeli działania: chcemy coś zmienić, to należy po znaczniku otwierającym P (w nawiasie) umieścić dodatkowe opcje. Podstawy HTML 3. Opcje znaczników HTML
To jest akapit wyjustowany. Sposób wyrównania definiuje Kod opcja align. Może ona zawierać : left (domyślny), zródłowy right , center lub justify .
Wynik To jest akapit wyjustowany. Sposób wyrównania definiuje działania: opcja align. Może ona zawierać : left (domyślny), right , center lub justify . Kodowanie znaków Aby uzyskać polskie znaki narodowe w przeglądarce, należy zdefiniować typ kodowania znaków tekstowych. Polskie strony kodowe to: ISO-8859-2 - strona kodowa zalecana przez W3C windows-1250 - strona kodowa typowa dla systemów Windows Definicja strony kodowej znajduje się w sekcji HEAD:
lub
Sekcja META Przykład sekcji META:
Projekt FreeCD
...... Algorytm tworzenia serwisu 1. Planowanie merytoryczne:
główna tematyka strony
cel budowy serwisu (odbiorcy)
struktura logiczna serwisu (podział na podstrony)
rodzaje udostępnianych informacji (tekst, grafika, dokumenty, prezentacje, ...) Algorytm tworzenia serwisu 2. Planowanie techniczne:
rodzaj strony (ramkowa, tabelkowa, mieszana)
układ strony (rozplanowanie ramek i tabelek)
układ menu (położenie, orientacja)
technologie (HTML, CSS, JavaScript, ...)
wymagania dotyczące serwera WWW Algorytm tworzenia serwisu 3. Zebranie materiałów:
rodzaj i układ systemu menu (odnośników do podstron)
kolorystyka i styl strony (zalecany mechanizm CSS)
banner, logo, nagłówek
walidacja szablonu Algorytm tworzenia serwisu 5. Wstawianie treści:
teksty
grafika informacyjna
grafik ozdobna
odnośniki zewnętrzne
materiały do pobrania Algorytm tworzenia serwisu 6. Test strony:
walidacja kodu
różne przeglądarki internetowe
różne systemy operacyjne
różne rozdzielczośći ekranu Algorytm tworzenia serwisu 7. Publikacja strony:
serwer WWW (zależny od użytych technologii)
domena (opcjonalnie)
transfer plików na serwer - FTP
test działania Algorytm tworzenia serwisu 8. Tworzenie dodatków:
licznik odwiedzin
statystyki strony
księga gości
forum internetowe
inne... Algorytm tworzenia serwisu 9. Promocja strony:
katalogi WWW
zgłaszanie do serwisów tematycznych
zgłaszanie informacji (news) na portalach internetowych
reklama indywidualna (np. wizytówki) Algorytm tworzenia serwisu 10. Konserwacja serwisu:
poprawianie błędów
aktualizacja treści
aktualizacja materiałów do pobrania
aktualizacja odnośników zewnętrznych Zasady tworzenia stron WWW 1. Projekt najważniejsza część pracy:
materiał należy podzielić na logicznie bloki
bloki tematyczne powinny być zgodne z budową menu
wszędzie należy stosować taką samą szatę graficzną
szata graficzna powinna być dobrze odpowiednia do tematyki
stronę główną należy tak przygotować, aby łatwo można było się zorientować w termatyce serwisu
należy dobrze przemyśleć nazwę domeny
należy dobrze przemyśleć kwestę adresu do kontaktu
należy dobrze zaplanować technologie
nie powinno publikować się treści obrazliwych, antyrasowych lub innych, niezgodnych z ogólnie przyjętymi zasadami dobrego tonu
należy publikować wyłącznie informacje sprawdzone i zgodne z ogólną wiedzą Zasady tworzenia stron WWW 2. Materiały do pobrania powinny być przygotowane w ogólnie dostępnych formatach:
filmy - avi, mpeg (legalne kodeki i aplikacje) Należy unikać materiałów wymagających posiadania specjalistycznego lub komercyjnego oprogramowania - chyba, że tego dotyczy nasz serwis. Zasady tworzenia stron WWW 3. Prawa autorskie - bezwzględnie należy przestrzegać praw autorskich, a w szczególności:
nie należy publikować zdjęć pobranych z Internetu o ile nie mamy zgody autora lub nie pozwala na to licencja (np. OpenClipart Gallery, zdjęcia NASA)
podobnie nie należy zamieszczać do pobrania programów, prezentacji, wykładów i innych elementow
najlepiej jest umieszczać materiały wykonane samodzielnie (grafika, muzyka, filmy, wykłady, prezentacje, itp.)
wszelkie materiały należy przygotowywać i obrabiać przy pomocy legalnego oprogramowania (informacje o programie są zazwyczaj zaszyte w plikach wynikowych!)
nie powinno się publikować treści pobranych z innych stron www (chyba, że robimy zbiorcze opracowanie na jakiś temat) Zasady tworzenia stron WWW 4. Standardy układu strony - strony internetowe (ogóne - nie portale) budowane są zazwyczaj według pewnych standardów:
na górze znajduje się zazwyczaj nagłówek - baner, tytuł strony bądz logo
na dole znajduje się zazwyczaj stopka z informacją o autorze strony, roku wykonania czy dacie ostatniej modyfikacji
menu znajduje się zazwyczaj po lewej stronie lub na górze (przeważnie pod nagłówkiem)
w przypadku długich stron menu można powtórzyć na dole (w układzie poziomym)
na stronie głównej znajduje się zazwyczaj odsyłacz do strony początkowej, informacja o autorze i kontakt
umieszczone na stronie głównej menu powinno zawierać odnośniki do wszystkich głównych elementów serwisu Zasady tworzenia stron WWW 5. Układu strony - istnieją trzy podstawowe rodzaje stron: A. Strony ramkowe:
jednorazowe ładowanie ramki z menu (guziczki) czy ramki nagłówka (logo, baner)
przejrzystsza struktura kodu
utrudnione dodawanie odnośników do konkretnej podstrony
reklamy wyskakujące w ramce (jeżeli używamy usług takich jak statystyki, księgi gości, itp.)
utrudniony jest wydruk strony Zasady tworzenia stron WWW 5. Układu strony - istnieją trzy podstawowe rodzaje stron: B. Strony tabelkowe:
łatwiejsze dodawanie odnośników do konkretnej podstrony
łatwiejszy wydruk strony
dłuższe ładowanie się strony
mniej przejrzysta struktura kodu (dużo znaczników TR i TD) Zasady tworzenia stron WWW 5. Układu strony - istnieją trzy podstawowe rodzaje stron: C. Strony mieszane (ramki pływające):
jednorazowe ładowanie elementów z menu (guziczki) czy nagłówka (logo, baner)
dokładnie określony obszar okna z treścią serwisu
pojawianie się poziomego paska przewijania
utrudnione dodawanie odnośników do konkretnej podstrony
reklamy wyskakujące w ramce (jeżeli używamy usług takich jak statystyki, księgi gości, itp.)
czasami blednie działają odnośniki (np. księga gości)
utrudniony jest wydruk strony. Zasady tworzenia stron WWW 6. Testowanie serwisu Tworzony serwis należy od samego początku testować w różnych przeglądarkach (IE, Mozilla, Opera) i o ile jest to możliwe w różnych systemach operacyjnych (LINUX, UNIX - można wykorzystać do tego celu dystrubucje LiveCD). Zasady tworzenia stron WWW 7. Zabezpieczenie prywatności Zabezpieczenie dotyczy zwłaszcza adresów pocztowych (autorów i gości). Powinny one być zabezpieczone przed robotami spamowymi, należy więc używać:
adresów w postaci znaków ASCII (średnio skuteczne)
adresów w postaci: jas [dot] fasola [at] ogrodek [dot] pl (niewygodne)
adresów w postaci skryptów jawy (najbardziej skuteczne i wygodne) Zasady tworzenia stron WWW 8. Ułatwienia dla niepełnosprawnych Dotyczy to szczególnie serwisów publicznych (szkoły, urzędy). Koniecznie należy stosować:
opisy ALT dla grafiki
opisy TITLE dla odnośników Teksty opisów odczytywane są przez specjalne przeglądarki przeznaczone dla osób niewidomych. Zasady tworzenia stron WWW 9. Under construction Nigdy nie należy "wieszać" pustego serwisu (lub zawierającego tylko część elementów). Lepiej będzie jeżeli serwis będzie skromny (wiadomo, że z czasem będzie się rozbudowywał), ale działający. Link do miejsca gdzie jest jedynie napis 'under constrution' może zniechęcić gości do dalszego zwiedzania. Zasady tworzenia stron WWW 10. Linki Należy tak je zdefiniować, aby nie myliły się z innymi elementami strony. Linki powinny być pogrupowane według logicznych zasad (szczególnie jak jest ich dużo). Nie należy dawać odnośników do ogólnie znanych serwisów. Zasady tworzenia stron WWW 11. Kolory i tła Kolory powinny być kontrastowe, np. czary-biały, granatowy-biały, nie utrudniające odczytywania treści strony. Nie powinno się stosować kolorów jaskrawych (silna zieleń, żółć, fiolet, itp.). Powinno się stosować jednolite tło strony dobrze kontrastujące z treścią. Jako tło można zastosować obrazek, ale powinien on mieć delikatny deseń. Zasady tworzenia stron WWW 12. Migające i przesuwające się napisy Lepiej ich nie stosować. Męczą oko, rozpraszają uwagę i w praktyce rzadko kiedy ktoś interesuje się jaka jest ich treść. Lepiej jest użyć podkreślenia (innego niż link), pogrubienia czy powiększenia czcionki. Zasady tworzenia stron WWW 13. Dzwięki Bardzo niewielki odsetek internautów ma włączone odgrywanie dzwięku. Zmuszanie wszystkich do dodatkowego czekania na załadowanie się plików dzwiękowych, których i tak nie usłyszą tylko irytuje. Jeżeli chcemy zapoznać gości ze swoją ulubioną piosenką, lepiej umieść ją jako plik do ściągnięcia. Zasady tworzenia stron WWW 14. Animacje Jeżeli tematyka strony tego nie wymaga (np. cele dydaktyczne) należy ich unikać: spowalniają ładowanie się strony i mogą utrudniać nawigację. Sekwencyjne odtwarzanie animacji powoduje wrażenie ciągłego ładowania się strony, gdyż nie gaśnie sygnalizacja pobierania plików. Ze względów estetycznych można dodać jakiś element typu baner lub ruchome logo - może to być animowany gif lub element JavaScript, flash-a czy SVG. Zasady tworzenia stron WWW 15. Technologie Należy stosować ogólnie uznane technologie tworzenia stron WWW, zatwierdzone przez organizację W3C. Niezbędne umiejętności...
podstawy HTML i CSS
obsługa edytorów kodu HTML
instalacja programów komputerowych w środowisku Windows
korzystanie z kursów i materiałów dodatkowych
rozwiązywanie problemów przez Internet
wyszukiwanie w Internecie darmowych szablonów stron
wyszukiwanie w Internecie tekstów i grafiki
znajomość praw autorskich
obsługa przeglądarek internetowych
obsługa poczty elektronicznej
obsługa FTP
podstawy obróbki grafiki
zakładanie kont www (rejestracja domen)
korzystanie z usług dodatkowych (liczniki, księgi gości, ...) Dziękuję za uwagę Wojciech Sobieski Olsztyn 2005