HTML a XHTML

Wprowadzenie do języka HTML zgodności z XML

Aby język HTML był zgodny z XML i stał się językiem modułowym, konieczne jest respektowanie szeregu zasad składni. Najważniejszą z nich jest zasada prawidłowego zarządzania znacznikami. Przeglądarki dość swobodnie obsługują HTML. Kwestia zamknięcia znaczników (takich jak na przykład <H1>) nie zawsze jest istotna, czego przykładem jest też znacznik <p>. Oto kod HTML, który zostanie poprawnie zinterpretowany przez każdą przeglądarkę:

<html>

<body bgcolor=?#FFFFFF? text=?#000000?>

<p><font face=?Arial? size=?4?>Ten tekst będzie poprawnie wyświetlany.

<p>Nawet jeśli niektóre znaczniki nie zostaną prawidłowo zamknięte.

Przeglądarka trzymająca się ściśle definicji XHTML-Strict nie wyświetliłaby tekstu reprezentowanego w tym kodzie. Przede wszystkim znaczniki <p> i <font> nie mają znaczników zamykających. Obowiązujący w obrębie XML ścisły sposób zarządzania znacznikami wymaga, aby wszystkie znaczniki zostały prawidłowo zamknięte. Ponadto znacznik <font> nie jest obsługiwany w XHTML. Formatowanie wprowadzane jest tylko poprzez kaskadowe arkusze stylów. W przedstawionym dokumencie brakuje także deklaracji typu dokumentu. Deklaracja taka powinna otwierać kod i identyfikować dokument jako dokument XML oraz podawać ulokowanie pliku DTD, który pomaga zinterpretować znaczniki XML.

Aby podany w przykładzie kod działał poprawnie jako XHTML, musi mieć następującą postać:

<?xml version=?1.0??>

<!DOCTYPE html PUBLIC ?-//W3C//DTD XHTML 1.0 Strict//EN?

?http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd?> <html xmlns=?http://www.w3.org/1999/xhtml?> <head> <title>XHTML Page</title> <style type=?text/css? xml:space=?preserve?>

body {

background-color: #FFFFFF;

color: #000000; }

P {

Font-Family: Arial;

Font_size: 14pt; } </style> </head> <body> <p>Ten tekst będzie poprawnie wyświetlany.</p> </html>

W dokumencie pojawiły się pewne nowe elementy. Natychmiastowa zmiana, widoczna na pierwszy rzut oka, to deklaracja XML, umieszczona na początku kodu. Typ dokumentu to: html PUBLIC ?-//W3C//DTD XHTML 1.0 Strict//EN, jest to wersja Strict języka XHTML.

Istnieją trzy typy języka XHTML: Strict, Transitional i Frames. XHTML-Strict jest implementacją języka XHTML zgodną ze standardem XHTML 1.0. XHTML-Transitional to definicja XHTML, która dopuszcza stosowanie w składni znaczników specyfikacji HTML 4.0 w celu umożliwienia przejścia z jednego języka do drugiego. XHTML-Frames to wersja języka, która akceptuje stosowanie ramek Netscape na stronach XHTML.

Kolejny wiersz kodu: http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd, skierowuje przeglądarkę do miejsca, z którego może ściągnąć odpowiedni plik DTD niezbędny do interpretacji dokumentu.

Przestrzeń nazw jest zdefiniowana w znaczniku <HTML>. Podany jest w nim adres określający lokalizację przestrzeni nazw w Internecie.

XHTML nie dopuszcza formatowania tekstu za pomocą znaczników <font> i <body>. Formatowanie wprowadzają więc w przykładowym dokumencie kaskadowe arkusze stylów. Kolor tła został zdefiniowany jako biały (#FFFFFF), a kolor tekstu jako czarny (#000000). Styl zawartości znacznika <P> został określony jako Arial o rozmiarze 14pt.

Pozostała część dokumentu ma postać taką samą jak w HTML-u, aczkolwiek nie zawiera znaczników formatujących.

Są to tylko nieliczne ze zmian, które trzeba wprowadzić, by dokument uczynić zgodnym z formatem XHTML. Konieczna jest rezygnacja z wielu znaczników HTML stosowanych przez twórców stron. Jak już wspomniano, znacznik <FONT> trzeba zastąpić arkuszem CSS. To samo dotyczy znacznika <CENTER>. Funkcje tego znacznika powinien przejąć arkusz CSS. Znacznik <I> wymaga zastąpienia równoważnym znacznikiem <EM>, a znacznik <B> należy zamienić na znacznik <STRONG>.

Nie stosuj znacznika <FONT>. Aby unikać tego znacznika, nie wprowadzaj formatowania tekstu z poziomu inspektora Text Properties, lecz stosuj kaskadowe arkusze stylów.

Znacznik <HTML> musi zostać zmodyfikowany w widoku kodu do takiej oto postaci:

<?xml version=?1.0??>

<!DOCTYPE html PUBLIC ?-//W3C//DTD XHTML 1.0 Strict//EN?

?http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd?>

<html xmlns=?http://www.w3.org/1999/xhtml?>

Nie zapominaj o znacznikach zamykających. Na przykład wszystkie znaczniki <P> powinny mieć swoje znaczniki zamykające </P>.

Jeśli będziesz trzymał się tych trzech zasad, nie ma powodu, aby utworzone  dokumenty HTML nie dały się przekonwertować do postaci XHTML.

Pełny opis procedury dostosowywania dokumentu do standardu XHTML znajdziesz w witrynie W3C, pod adresem www.w3.org/MarkUp. Jest tam także dostępna wyczerpująca dokumentacja nowego standardu oraz połączenia do narzędzi konwersji stron napisanych w języku HTML 4 do postaci XHTML.

W3C dostarcza zestaw narzędzi do przekształcania stron w postać XHTML. Narzędzia te znajdziesz na stronach witryny W3C HTML Validation Service, pod adresem http://validator.w3.org. Jedno z nich, HTML Tidy, pozwala konwertowaćźle napisane dokumenty HTML, na przykład takie jak dokumenty generowane przez edytor Microsoft Word, do postaci zgodnej ze standardem XHTML.

XHTML a HTML 4

HTML 4 wykazuje dużo podobieństw do języka XHTML. W obu językach formatowanie wymaga stosowania kaskadowych arkuszy stylów i niezbędne jest zamykanie znaczników akapitu. Pod wieloma względami XMTML stanowi po prostu odmianę języka HTML 4, spełniającą zasady składni języka XML. Dzięki stworzeniu wersji języka HTML 4 będącej pochodną języka XML, szereg rozszerzeń, dodawanych w przyszłości do XHTML-a, będzie mogło mieć postać modułową.

XHTML 1.0 pozwala nowym urządzeniom internetowym ? pomocnikom cyfrowym PDA, konsolom do gier i interaktywnym odbiornikom TV ? korzystać z najnowszych standardów WW. Wszystko, co jest potrzebne, to przeglądarka, która potrafi zinterpretować XML i definicje typu dokumentu. Projektant nadal może używać edytorów tekstowych, aby w nich tworzyć swoje strony.

Wobec gwałtownie zmieniającego się oblicza Internetu, dodanie modułowego i rozszerzalnego języka jakim jest XHTML, to naturalne dopasowanie się.

Programiści i twórcy korzystający z nowych, dopiero kształtujących się technologii, zawsze staną wobec następującego problemu: Czy powinno się korzystać z nowej opcji obsługiwanej tylko przez wersje przeglądarek najnowszej generacji, mając pełnąświadomość, że niewielu odbiorców korzysta z takiego oprogramowania? Czy nie należałoby w takim razie skupić się na szerszej grupie użytkowników i przyjąć kryterium zgodności ze starszymi wersjami przeglądarek?

Tworzenie stron internetowych jest zajęciem dla programisty, który zawsze musi wiedzieć, jakie przeglądarki są aktualnie najpopularniejsze. Kod źródłowy to samo serce strony WWW. Umiejętność samodzielnego pisania kodu stron jest niezbędna, aby w pełni zrozumieć strony WWW jutra.

Kategoria: Tworzenie stron dnia 2 grudnia 2010 Komentarze są wyłączone Tagi: ,

Zdarzenia JavaScript

Często stosowane zdarzenia

Jak wspomniano, zdarzenie to czynność, która wyzwala akcję. Możesz więc zdarzenie określić mianem aktywatora. Różne przeglądarki obsługują różne zdarzenia. Poniżej znajdziesz opisy najczęściej stosowanych zdarzeń, wraz z informacją odnośnie ich obsługi.

  • onAbort. Zachodzi, gdy użytkownik przerywa ładowanie obrazu, klikając połączenie lub naciskając przycisk Stop przeglądarki.
  • onBlur. Zachodzi, gdy okno, ramka lub element formularza przestają być zaznaczone.
  • onChange Zachodzi, gdy użytkownik zmienia wybór, tekst lub elementy obszaru tekstowego w formularzu.
  • onClick. Zachodzi, gdy użytkownik klika połączenie lub element formularza.
  • onDblClick. Zachodzi, gdy użytkownik dwukrotnie klika dokument, obszar lub połączenie.
  • onError. Zachodzi, gdy w trakcie ładowania dokumentu lub obrazu wystąpi błąd..
  • onFocus. Zachodzi, gdy użytkownik aktywuje okno, ramkę lub element formularza.
  • onHelp. Zachodzi, gdy użytkownik klika przycisk wywoływania pomocy przeglądarki lub wybiera odpowiednią pozycję w jej menu.
  • onKeyDown. Zachodzi, gdy użytkownik naciska klawisz przy zaznaczonym dokumencie, obszarze tekstowym lub połączeniu.
  • onKeyPress. Zachodzi, gdy użytkownik wciska i przytrzymuje klawisz.
  • onKeyUp. Zachodzi, gdy użytkownik zwalnia klawisz przy zaznaczonym dokumencie, obszarze tekstowym lub połączeniu.
  • onLoad. Zachodzi, gdy zakończy sięładowanie dokumentu do okna przeglądarki.
  • onMouseDown. Zachodzi, gdy użytkownik naciska klawisz myszki wskazując przycisk, dokument lub połączenie.
  • onMouseMove. Zachodzi, gdy użytkownik przesuwa wskaźnik myszki wskazując określony element.
  • onMouseOut. Zachodzi, gdy użytkownik przesuwa wskaźnik myszki poza określony obszar (na przykład obrazu lub połączenia tekstowego).
  • onMouseOver. Zachodzi, gdy użytkownik przesuwa wskaźnik myszki nad określony obszar (na przykład obrazu lub połączenia tekstowego).
  • onMouseUp. Zachodzi, gdy użytkownik zwalnia klawisz myszki wskazując przycisk, dokument lub połączenie.
  • onMove. Zachodzi, gdy użytkownik lub skrypt przesuwają okno lub ramkę.
  • onreadyStateChange. Zachodzi, gdy zmienia się właściwość ReadyState. Pozwala monitorować stan pobierania danych, bez ciągłego sprawdzania wartości właściwości ReadyState.
  • onReset. Zachodzi, gdy polom formularza przywracane są domyślne wartości.
  • onResize. Zachodzi, gdy użytkownik lub skrypt zmieniają rozmiary okna lub ramki.
  • onScroll. Zachodzi, gdy użytkownik lub skrypt przewijają dokument.
  • onSelect. Zachodzi, gdy użytkownik zaznacza fragment tekstu w polu edycyjnym formularza.
  • onSubmit. Zachodzi, gdy użytkownik przesyła formularz.
  • onUnload. Zachodzi, gdy użytkownik zamyka okno lub przystępuje do załadowania innej strony.

Kategoria: Tworzenie stron dnia 25 listopada 2010 Komentarze są wyłączone Tagi: ,

Dodatki do stron

Jednym z największych wyzwań przy tworzeniu treści multimedialnych jest stwierdzenie, która z dostępnych technologii najlepiej nadaje się do osiągnięcia założonego celu i wybranie takiej drogi jego realizacji, aby wszyscy byli zadowoleni. W tym rozdziale tym właśnie się zajmiemy. Flash pozwala na stworzenie bogatej multimedialnie zawartości. Teraz czas, abyś dowiedział się czegoś o aplikacjach Shockwave, QuickTime, RealSystem, Java i innych, które rozszerzają możliwości przeglądarek ponad HTML.

Przeglądarki to przede wszystkim interpretery kodu HTML. Ich działanie polega na tłumaczeniu instrukcji zawartych w znacznikach i zapisanych w pliku HTML na postać ekranową, użyteczną dla użytkownika. Dołączenie do kodu HTML skryptów JavaScript pozwala na wprowadzenie na strony WWW interaktywności. Jako takie przeglądarki jednak nie są w stanie obsługiwać takiej różnorodności plików multimedialnych, jaką chętnie widziałbyś na swoich stronach. Nie mogą wyświetlić sekwencji wideo, nie potrafią obsługiwać i prezentować dźwięku, nie umieją wyświetlić zawartości w formacie PDF, ani też obsłużyć skomplikowanej interaktywności i animacji, bez których nie obejdą się dziśżadne gry.

Całe szczęście przeglądarki są rozszerzalne. O wykonanie tego, czego same nie potrafią, mogą zwrócić się do oprogramowania zewnętrznego. I tak się często dzieje w czasie Twojego surfowania po Internecie, choć nie zawsze masz tego świadomość.

Ilekroć przeglądarka napotyka na plik, musi określić jego rodzaj i wybrać sposób obsługi. Odbywa się to poprzez analizę typu MIME (Multipurpose Internet Mail Extension). Typ MIME to informacja, jaką serwer sieciowy wysyła wraz z plikiem przy pobieraniu strony na komputer użytkownika. Informacja ta zawiera opis kategorii pliku i instrukcje pozwalające przeglądarce wybrać sposób potraktowania pliku. W celu zabezpieczenia, na wypadek gdyby serwer sieciowy nie przesłał ze ściąganym plikiem danych MIME, przeglądarka analizuje także sufiks lub inaczej rozszerzenie nazwy pliku.

Jeśli typ MIME lub rozszerzenie nazwy wskazują, że przeglądarka nie będzie w stanie obsłużyć pliku, sięga ona po pomoc zewnętrzną ? a stanowi ją aplikacja pomocnicza lub moduł dodatkowy.

Aplikacja pomocnicza to program, który obsługuje dany typ plików. Może nią być dowolny program na Twoim komputerze. Stuffit Expander i WinZip to przykłady aplikacji pomocniczych. Ilekroć przeglądarka natrafi na plik o rozszerzeniu nazwy .zip lub typ MIME application/zip, najpewniej odszuka i uruchomi jeden z tych programów. Każdy z tych programów może być także uruchamiany przez przeglądarkę niezależnie.

Moduł dodatkowy (ang. plug-in), tak jak aplikacja pomocnicza, dysponuje możliwościami, których brak przeglądarce, lecz nie jest samodzielną aplikacją. Moduły nie mogą być uruchamiane i nie mogą działać samodzielnie. W zamian rozbudowują możliwości przeglądarki. Moduły muszą rezydować w folderze Plug-Ins, który jest folderem podrzędnym foldera zawierającego oprogramowanie przeglądarki. Przykładem tego typu wsparcia jest moduł dodatkowy Flash, o którym wspominaliśmy. Jeśli przeglądarka znajdzie plik o rozszerzeniu nazwy .swf lub o typie MIME application/x-shockwave-flash, przystąpi prawdopodobnie do szukania i uruchamiania tego modułu (terminu ?moduł dodatkowy? używamy tu dla określenia wbudowanego rozszerzenia przeglądarki. Implementacjami tej technologii w przypadku dwóch najpopularniejszych przeglądarek, Firefox i Microsoft Internet Explorer, są moduły dodatkowe Netscape oraz kontrolki ActiveX.

Dlaczego twierdzimy, że przeglądarka prawdopodobnie zareaguje w określony sposób na dany typ MIME? Ponieważ każda przeglądarka musi najpierw zostać skonfigurowana, aby potrafiła zinterpretować pewne typy MIME, a dowolne dwie przeglądarki, nawet tej samej wersji i działające w takim samym środowisku, mogą byś skonfigurowane odmiennie. Przeglądarka jest skonfigurowana natychmiast po instalacji, lecz w zależności od źródła, z którego pochodzi (promocyjne lub pełne oprogramowanie z dysku CD, instalacja przy zakupie komputera, pobranie z witryn Microsoft lub Netscape, itp.), konfiguracje poszczególnych kopii tej samej wersji oprogramowania mogą się różnić. Ponadto, co oczywiste, także sami użytkownicy mogą zmienić ustawienia przeglądarki, dostosowując ją do własnych potrzeb.

Autorzy stron WWW nie mogą kontrolować sposobu obsługi różnych typów plików przez przeglądarki. Starają się jedynie przewidzieć sposób skonfigurowania przeglądarek użytkowników i przygotowują strony tak, aby radziły sobie w sposób elegancki z ewentualnym niepowodzeniem w tym względzie.

Wiele lat temu, aby umożliwić twórcom umieszczanie na stronach HTML zawartości multimedialnej, Netscape wprowadził technologię modułów dodatkowych rozbudowujących możliwości jego własnej przeglądarki. Firma wprowadziła także znacznik <EMBED>, którego zadaniem jest wskazanie przeglądarce modułu obsługującego dany typ zawartości multimedialnej. Chociaż znacznik ten nigdy nie został uwzględniony w oficjalnej specyfikacji języka HTML tworzonej przez W3C, cieszył się dużym wzięciem u użytkowników. Internet Explorer zaadoptował znacznik <EMBED> i system modułów dodatkowych, i jest on obecnie uważany za bezpieczny i pewny sposób umieszczania zawartości multimedialnej na stronach WWW. Chociaż mędrcy nadal mówią o modułach dodatkowych Netscape, nie jest to już technologia typowa dla Netscape.

W międzyczasie Microsoft rozwijał własny zestaw technologii wspomagających współużytkowanie informacji i kooperację różnych typów aplikacji. Technologia łączenia i osadzania obiektów (OLE; Object Linking and Embedding) i technologia COM (Component Object Model) określająca zasady komunikacji między obiektami znajdującymi się na tym samym komputerze, rozwinęły się ostatecznie w technologię ActiveX. Na potrzeby zastosowań sieciowych Microsoft przystosował swoją przeglądarkę do obsługi mini-programów zwanych kontrolkami ActiveX, które kontrolują umieszczone na stronie WWW obiekty ActiveX i pośredniczą w przekazywaniu do nich informacji za pośrednictwem znacznika <OBJECT>. Kontrolkę ActiveX można zaprojektować pod kątem współpracy z dowolną aplikacją, w tym także z Internet Explorerem. Komunikacja między kontrolką ActiveX a przeglądarką może odbywać się w języku skryptowym VBScript, stworzonym przez Microsoft, a sam system komunikacji przypomina komunikację między przeglądarką a modułami dodatkowymi Netscape, w której stosowany jest JavaScript, język skryptowy rozwinięty przez Netscape.

W rezultacie dostępne są dwa sposoby umieszczania zawartości multimedialnej w oknie przeglądarki: jako obiekty wspierane przez moduły dodatkowe oraz jako obiekty ActiveX. O ile obie przeglądarki obsługują moduły dodatkowe, to technologię ActiveX jedynie Internet Explorer. Sieć powiązań technologii ActiveX z innymi technologiami firmy Microsoft, ogranicza zakres jej działania tylko do platformy Windows. Ponieważ Internet Explorer bazuje przede wszystkim na ActiveX, obsługa obiektów wymagających modułów dodatkowych jest gorsza niż w przypadku Navigatora Netscape. W przeglądarce Netscape komunikacja z obiektami wspieranymi przez moduły dodatkowe odbywa się za pośrednictwem języka JavaScript. Internet Explorer nie zezwala na dostęp do obiektów korzystających z modułów i ActiveX przy użyciu tego języka; języka VBScript można z kolei użyć wyłącznie do komunikacji z obiektami ActiveX, lecz już nie do komunikacji z obiektami korzystających z modułów. Internet Explorer dla systemu Macintosh także nie obsługuje ActiveX, a wszystko to razem znacznie ogranicza zakres Twojej kontroli nad obsługą zawartości multimedialnej w różnych przeglądarkach i na różnych platformach.

Jako twórcy stron WWW codziennie musimy stąpać po tym polu minowym. Przy tworzeniu stron trzeba zawsze zadbać, aby strony były dostępne jak najszerszej szerzy odbiorców. Staraj się więc oszczędnie korzystać z zawartości multimedialnej i starannie testować swoje strony w wielu przeglądarkach i na różnych platformach. Pomyśl także o tym, aby zaprojektować strony tak, że nawet w przypadku braku obsługi multimediów, zachowana zostanie ich funkcjonalność.

Shockwave

Shockwave jest modułem dodatkowym i pokrewnym formatem plików, który umożliwia wyświetlenie w przeglądarce pliku utworzonego w programie Macromedia Director. Przez długie lata Director stanowił standard przemysłowy oprogramowania do produkcji profesjonalnych prezentacji na płytach CD-ROM. Director umożliwia łączenie grafiki, animacji, tekstów, dźwięku oraz obrazów wideo w spójną całość. Jego wewnętrzny język skryptowy, Lingo, pozwala na uzyskiwanie bardzo rozbudowanej interaktywności. Stosując oprogramowanie Director Multiuser Server sekwencje wideo Directora można wykorzystać przy tworzeniu gier sieciowych, pogawędek sieciowych i innych aplikacji sieciowych. Przeznaczone dla programu Director rozszerzenia (tworzone przez Integration Media) umożliwiają połączenie sekwencji wideo tego programu z bazami danych i plikami PDF (V12 i PDF Xtras).

Przy tworzeniu prezentacji umieszczanych na płytach CD, sekwencje wideo Directora zapisuje się jako samodzielne aplikacje. Natomiast prezentacje sieciowe zawierają sekwencje wideo zapisane w specjalnym formacie o rozszerzeniu nazwy .dcr i typie MIME application/x-director. Aby zobaczyć tego typu zawartość w oknie przeglądarki, użytkownicy muszą mieć moduł dodatkowy Shockwave, który jest dostępny pod adresem www.macromedia.com.

Technologia bazująca na chmurkach

Director, a tym samym i Shockwave, korzysta z technologii chmur (ang. Sprite Technology), co oznacza, że poszczególne elementy prezentacji, takie jak obrazy, dźwięki i tekst muszą być ładowane do pamięci tylko raz, po czym, w trakcie odtwarzania sekwencji wideo, mogą być wielokrotnie wykorzystywane. Skrypty opisujące ich zachowanie pozwalają osiągnąć wysoką efektywność animacji. Technologia ta efektywnie wykorzystuje zasoby pamięci i pozwala tworzyć względnie niewielkie pliki, które nie obciążają bardzo sieci.

Przesył strumieniowy

Shockwave to także technologia pozwalająca na strumieniowy przesył danych, co w praktyce oznacza, że sekwencja wideo jest odtwarzana już w trakcie ściągania. Dzięki temu nawet długie i skomplikowane prezentacje mogą być przesyłane przez sieć, bez ryzyka długiego oczekiwania na ich odtworzenie. Podobnie jak w przypadku programu Flash, w programie Shockwave strumieniowy przesył informacji jest realizowany po stronie klienta, co oznacza, że nie jest wymagana specjalna konfiguracja serwera.

QuickTime

Nie daj się okpić. To, że QuickTime jest produktem Apple, nie oznacza wcale, że jest on przeznaczony tylko dla komputerów Macintosh. QuickTime to zgodne z wieloma platformami rozszerzenie systemowe i moduł dodatkowy rozbudowujący możliwości przeglądarki, a umożliwia on synchronizację mediów i realizację interaktywności podobnej do serwowanej przez aplikacje Shockwave i Flash. Sekwencje wideo QuickTime tworzone są przez zsynchronizowane ścieżki ? ścieżki zawierające obraz wideo, dźwięk, duszki (dla interaktywnych i animowanych elementów), dane 3D (na potrzeby modelowania trójwymiarowego), dane VR (umożliwiające realizację wirtualnej rzeczywistości), tekst, a nawet animacje Flash (w swojej pełnej postaci).

Pliki multimedialne RealSystems

RealNetworks od dawna jest podstawowym dostawcą oprogramowania do obsługi mediów strumieniowych w sieci. Składowe systemu RealSystem ? RealAudio, RealVideo, RealPix, RealText i RealFlash ? umożliwiają autorom umieszczanie na stronach WWW przesyłanych strumieniowo multimedialnych treści różnego typu. Poszczególne elementy standardu RealMedia można łączyć w multimedialne prezentacje korzystając z wywodzącego się z XML języka SMIL (Synchronized Multimedia Integration Language). Aby umożliwić strumieniowy przesył danych, strony WWW zawierające treści RealMedia muszą być umieszczone na serwerze wyposażonym w oprogramowanie RealServer. Przeglądarki przy obsłudze mediów różnego typu korzystają z aplikacji RealPlayer oraz modułu Real G2 i kontrolki ActiveX.

Technologie RealSystem są zgodne z wieloma platformami i typami przeglądarek. Chociaż klipy RealMedia zazwyczaj odtwarzane są w odrębnym oknie programu RealPlayer, to możliwe jest także osadzenie ich na stronie WWW. Moduł RealG2 i kontrolka ActiveX RealG2 są dostępne dla obu typów przeglądarek.

Rozbudowywanie możliwości przeglądarki za pomocą Javy

Jeśli męczy Cię ta żonglerka modułami dodatkowymi, możesz sięgnąć po całkowicie inne rozwiązanie, także służące rozszerzeniu możliwości przeglądarki ? a jest nim Java. Animacje Javy nie są tak płynne jak animacje Shockwave lub Flash. Java nie obsługuje także strumieniowego przesyłu danych, ani po stronie klienta, ani po stronie serwera. Nie jest też tak prosta jak technologia modułów dodatkowych, o której wcześniej czytałeś. To, co stanowi, że Java bywa czasami lepszym rozwiązaniem niż Shockwave, QuickTime, czy cokolwiek innego, to fakt, że nie wymaga ona, by przeglądarka użytkownika była wyposażona w różnorodne moduły dodatkowe i kontrolki ActiveX.

Co to jest Java?

Java to wprowadzony w 1995 roku przez Sun Microsystems, obiektowy język programowania niezależny od platformy sprzętowej i systemowej (mimo podobieństwa nazwy, Java nie ma nic wspólnego z językiem JavaScript).

Java umożliwia tworzenie w pełni funkcjonalnych i samodzielnych aplikacji oraz mini-aplikacji, zwanych apletami, uruchamianych przez wbudowaną w przeglądarkę WWW wirtualną maszynę Javy. Ponieważ Java to pełny język programowania, o konstrukcji zbliżonej do konstrukcji języka C++, jego aplety mogą mieć bardzo rozbudowane możliwości. Stosowane są one powszechnie, począwszy od gier sieciowych, po animacje i efekty specjalne, liczniki odwiedzin, zegary, kalkulatory i narzędzia nawigacji.

Jak działa Java

Aby zrozumieć, co czyni Javę językiem sieci, najpierw musisz poznać różnice między nią, a innymi językami programowania.

Komputery nie ?rozumieją? ani C++, ani Javy, ani innych języków programowania, a przynajmniej nie bezpośrednio. Językiem rozumianym przez komputery jest ?język liczb? zwany kodem maszynowym. Program napisany w dowolnym języku programowania musi najpierw zostać skompilowany lub inaczej mówiąc ?przetłumaczony? na język maszynowy. Postać języka maszynowego jest specyficzna dla danej platformy ? z tej właśnie przyczyny Twoja kopia programu Dreamweaver będzie działać tylko na komputerach typu PC lub tylko na komputerach Mac. Programy muszą być kompilowane dla danego typu komputera i będą wówczas działały tylko na tym typie komputerów.

Java jest inna. Java jest kompilowana tak, by działała na fikcyjnym komputerze zwanym wirtualną maszyną. Wirtualna maszyna to w rzeczywistości program, skompilowany dla konkretnej platformy. Na komputerach działających pod kontrolą systemu Windows wirtualna maszyna to Microsoft VM, na komputerach Macintosh ? jest to Mac OS Run-Time for Java (MRJ). Gdy

aplikacja lub aplet Javy są uruchamiane na wirtualnej maszynie, dokonuje ona przetłumaczenia kodu na typowy dla danej platformy kod maszynowy. Tak więc sam aplet jest niezależny od platformy.

Uwagi na temat Javy

Mam dla Ciebie jeszcze jedną dobrą wiadomość. Javę cechuje nie tylko przenośność między platformami, lecz także niezależność od typu przeglądarki. Przeglądarka, natrafiając na umieszczony na stronie WWW aplet Javy, uruchamia wirtualną maszynę i usuwa się jej z drogi. Nie musisz martwić się o brak modułów. Do uruchomienia apletu potrzebna Ci tylko wirtualna maszyna (która jest zainstalowana na większości komputerów) i przeglądarka z uaktywnioną obsługą Javy (tę możliwość mają niemal wszystkie przeglądarki).

Oprócz dobrej wieści, mam też złą ? nic nie jest doskonałe. Niektóre wirtualne maszyny są wolniejsze niż inne, a ponadto mają błędy. Uruchomienie wirtualnej maszyny zabiera trochę czasu, co sprawiać wrażenie wydłużonego czasu ładowania strony ? a to z reguły irytuje użytkownika. Ponadto, ponieważ wirtualna maszyna jest wbudowana w przeglądarkę, zawierające błędy aplety, mogą doprowadzić do zawieszenia się przeglądarki.

Z Javą wiążą się także kwestie bezpieczeństwa. Tak zwane ?wrogie? aplety projektowane są tak, aby zachowywały się jak wirusy. Inne mogą spowodować przypadkowe uszkodzenie systemu. Wirtualne maszyny starają się chronić system przed niebezpieczeństwami tego typu, lecz same nie mogą być w pełni odporne. W efekcie w wielu instytucjach, w których obraca się cennymi informacjami, instalowane są firewalle nie dopuszczające Javy. Także użytkownicy mogą wyłączyć obsługę Javy na swoich komputerach.

Java i media

Aplety Javy mogą zwierać obrazy i dźwięk. Obrazy muszą być w formatach GIF lub JPEG. Jeśli aplet korzysta z dźwięku, nie ma znaczenia jaki moduł dodatkowy przeglądarka zazwyczaj stosuje do obsługi plików dźwiękowych, ponieważ to nie przeglądarka będzie plik tym razem obsługiwać, lecz wirtualna maszyna. Pliki dźwiękowe w apletach Javy są w formacie AU (o rozszerzeniu nazwy .au). Java nie potrafi obsługiwać sekwencji wideo, choć potrafi tworzyć animacje lub ?fałszywe sekwencje wideo? z szeregu nieruchomych obrazów. Animacje Javy nie są tak płynne i szybkie jak animacje Shockwave, Flash i QuickTime.

Dźwięk na stronach WWW

Obecnie jednym z popularniejszych zastosowań mediów na stronach WWW jest dźwięk. Efekty dźwiękowe, tła dźwiękowe, muzyka demonstracyjna ? co tylko wymienisz, twórcy stron to robią. Wszystkie opcje, o których będziemy mówili w tej części rozdziału dotyczą w jakimś stopniu dźwięku. Lecz jaki jest najlepszy sposób na umieszczanie go na stronie WWW? I co powinniśmy wiedzieć o dźwięku, aby uzyskać najlepsze z możliwych efekty?

Dźwięk próbkowany a syntezowany

Istnieją dwa podstawowe rodzaje dźwięku cyfrowego: próbkowany i syntezowany. Dźwięk próbkowany powstaje w realnym (nie-cyfrowym) świecie ? są to głosy, koncerty, nagrania studyjne i pospolite dźwięki słyszane w domu, przekształcone w efekty dźwiękowe ? a następnie jest przetwarzany do postaci cyfrowej, co przypomina skanowanie fotografii. I tak jak przy skanowaniu fotografii, w procesie cyfrowego próbkowania dźwięku można zgromadzić więcej lub mniej danych. Im więcej danych, tym lepsza jakość dźwięku, lecz większy rozmiar pliku. Pliki zawierające próbkowany dźwięk są zazwyczaj duże, zbyt duże dla standardowych modemów. W efekcie, na większości stron WWW stosowane są krótkie dźwięki o niskiej jakości lub wyłącznie pętle dźwiękowe (krótkie motywy muzyczne odtwarzane w kółko).

Dźwięk syntezowany tworzony jest na komputerze i odtwarzany przy pomocy syntetyzowanych instrumentów muzycznych. Plik zawierający dźwięk syntezowany nie zawiera dźwięku próbkowanego, lecz przechowuje zapis nutowy wraz z dodatkowymi informacjami na temat instrumentów, które pozwalają odtworzyć go komputerze. Pliki tego typu są niewielkie, szczególnie w porównaniu z plikami dźwięku próbkowanego. Muzyka trwająca 5 minut zajmuje w pliku mniej niż 20K. Ten sam fragment zakodowany jako dźwięk próbkowany zająłby kilka megabajtów. Jedyną wadą dźwięku syntetyzowanego jest to, że nie brzmi on naturalnie. Gdybyś chciał posłuchać piosenki Beatlesów ?Yesterday?, dźwięk musiałby być próbkowany. Jeśli Twojemu uchu nie przeszkadza brzmienie syntetyzowanych instrumentów, możesz korzystać z dźwięku syntezowanego i w takiej postaci wysłuchać ?Yesterday?.

Najpopularniejsze formaty plików dźwiękowych w Internecie to WAV, AIF, AU i MP3.

  • Format WAV to format własny systemu Windows. Pliki w tym formacie są chyba na stronach WWW najpopularniejsze. Moduły dodatkowe przeglądarek nie mają zazwyczaj problemów z ich obsługą.
  • Pliki AIF są w formacie własnym systemy Macintosh. Są rzadsze niż pliki WAV, lecz równie dobrze obsługiwane w przeglądarkach.
  • Format AU jest formatem systemu UNIX. Pliki AU nie kompresują się najlepiej i są w sieci coraz rzadsze. Jest to jedyny format plików dźwiękowych stosowany w apletach Javy.
  • Pliki MP3 są dobrze znane dzięki wysokiej jakości dźwięku i zadziwiająco niewielkim rozmiarom. Aby odtworzyć plik MP3 musisz mieć odtwarzacz MP3. Wiele przeglądarek nie jest skonfigurowanych pod kątem obsługi tych plików, dlatego rzadko osadza się je na stronach WWW. Znacznie częściej pliki MP3 sąściągane, a następnie odtwarzane offline.

Standardowy format plików zawierających dźwięk syntezowany to MIDI. Pliki MIDI są dobrze obsługiwane przez moduły dodatkowe przeglądarek, a na stronach WWW pojawiają się najczęściej jako muzyczne tło.

Problem modułów dodatkowych

Na wstępie tego rozdziału dowiedzieliśmy się, w jaki sposób przeglądarki korzystają z typów MIME i rozszerzeń nazw plików, aby określić rodzaj modułu dodatkowego, który powinien zostać

użyty do obsługi danego obiektu. Dotychczas zajmowaliśmy się w tym rozdziale obiektami multimedialnymi, których obsługa wymaga tylko jednego modułu dodatkowego ? na przykład jest tylko jeden moduł Shockwave i wszystkie pliki .dcr będą obsługiwane przez ten moduł lub nie będą wcale.

W przypadku dźwięku sprawy się nieco komplikują. Istnieje wiele modułów dodatkowych i aplikacji pomocniczych, które są w stanie obsłużyć każdy z wymienionych formatów plików dźwiękowych, o których przed chwilą wspominaliśmy. Moduł LiveAudio firmy Netscape, Media Player systemu Windows, WinAmp, odtwarzacze QuickTime i RealPlayer ? wszystkie mogą odtworzyć plik dźwiękowy. To, do którego z nich odwoła się przeglądarka, zależy tylko od jej ustawień. Jak wiesz, nie ma standardowej konfiguracji przeglądarki.

Czy ma znaczenie, który z modułów obsługuje plik dźwiękowy, jeśli robi to dobrze? Poszczególne moduły dodatkowe przyjmują różne parametry i oferują różne możliwości kontroli, jednak dopóki nie wiesz, który z modułów zostanie użyty, nie możesz wykorzystać jego opcji. Każdy z modułów ma ponadto własny panel kontrolny, który pozwala użytkownikowi włączyć odtwarzanie, zatrzymać je, przewinąć sekwencję muzyczną, itd. Niektóre panele sterujące są duże, niektóre małe, a jeszcze inne mają postać samodzielnych, pływających okien. Jeśli projektujesz stronę WWW zawierającą taki panel sterujący, czyż nie byłoby dobrze wiedzieć, ile miejsca trzeba dla niego zostawić?

Kategoria: Tworzenie stron dnia 21 listopada 2010 Komentarze są wyłączone Tagi: , , ,

JavaScript

Dla większości z nas podstawowe doświadczenie z surfowania po Internecie kojarzy się przede wszystkim z jednym ? z interaktywnością. Jak wiesz, zawartość Internetu jest wytworem wielu różnych technologii. Niektóre, jak na przykład Flash, pozwalają umieszczać na stronach WWW animacje i dźwięki. Inne dają możliwość oglądania sekwencji filmowych, prezentacji panoramicznych czy nawet korzystania z gier sieciowych. Od tych wszystkich elementów multimedialnych razem ważniejsza jest możliwość zaangażowania użytkownika w prezentacje, które udostępniasz w sieci. U podstaw tej interaktywności znajduje się JavaScript.

Jako taki, HTML należy do tych języków programowania, których możliwości tworzenia zaawansowanej zawartości multimedialnej są raczej ograniczone. Wynika to z faktu, że HTML opisuje głównie elementy statyczne. Tak więc, nie daje możliwości ich zmiany w czasie, nie pozwala także, by zmiany takie wprowadzał klient czyli użytkownik. Te braki języka HTML uzupełnia JavaScript. Ponieważ HTML to narzędzie statyczne (co znaczy, że coś raz wyświetlone, takie pozostaje), tworzenie interaktywnych stron WWW wymaga sięgnięcia po inne języki programowania.

Niektóre z tych języków, na przykład Pearl czy PHP, działają na serwerach sieciowych, więc należą do grupy języków do tworzenia aplikacji działających po stronie serwera. Języki te dają bardzo szerokie możliwości, lecz wymagają jednego: pobrania od użytkownika danych, które dopiero zostaną poddane obróbce. Pociąga to za sobą oczywistą negatywną konsekwencję ? spowolnienie pracy. Skorzystanie przez użytkownika z interaktywności wymaga tu wysłania danych do serwera sieciowego, odczekania, pobrania odpowiedzi z serwera i, zazwyczaj, wyświetlenia innej strony.

Inna grupa języków stosowanych szeroko w sieci to języki służące do tworzenia aplikacji działających po stronie klienta. Znaczy to, że napisane w nich programy są wysyłane do użytkownika, aby mogły być wykonywane w czasie, gdy oglądana jest strona. Daje to zdecydowaną przewagę nad aplikacjami działającymi po stronie serwera, bowiem eliminuje opóźnienie. Musisz jednak zdawać sobie sprawę, że skrypty działające po stronie klienta nie są tak odporne jak ich odpowiedniki działające po stronie serwera, a więc jak na razie oba elementy są konieczne.

JavaScript działa głównie po stronie klienta. W swojej najpopularniejszej formie język ten stosowany jest w połączeniu z językiem HTML w celu zwiększenia funkcjonalności strony WWW. Ponieważ skrypty JavaScript można umieszczać bezpośrednio w kodzie HTML strony, technologia ta jest najlepiej dostosowana do sieci ? skrypty mogą powstać znacznie wcześniej niż strona WWW. Dlatego jeśli widzisz stronę, oznacza to, że jest ona już działająca.

Podstawą technologii JavaScript jest technologia popularnie określania mianem programowania zorientowanego obiektowo. Zastanów się nad określeniem: ?zorientowany obiektowo?. Obiekt, tak jak osoba, miejsce lub rzecz to coś namacalnego, coś, co może wykonać działanie lub coś, co można opisać. Zorientowanie kojarzy się natomiast z ukierunkowaniem. W przypadku języka JavaScript obiekty, na które się ukierunkowujemy są elementami hierarchii, na szczycie której znajduje się okno przeglądarki.

Być może brzmi to dla Ciebie jak rzecz oczywista lub wprost przeciwnie, wydaje się nieco zawiłe. Niezależnie od wszystkiego, jesteś w odpowiednim miejscu, aby zanurzyć się w samo serce języka JavaScript. Jako nowicjusz nie napiszesz na początku bardzo skomplikowanych programów, lecz przy swojej znajomości języka HTML już umiesz więcej niż Ci się wydaje.

Elementy

W języku JavaScript można wydzielić dwa odrębne obszary. Pierwszy z nich obejmuje to, co wbudowane, a więc to, co wiąże się z kwestiami programistycznymi i składnią języka. Na drugi obszar składa się to, co tworzysz ? są to na przykład funkcje użytkownika (pod tym określeniem kryje się zestaw instrukcji, które wykonują cały szereg zadań) oraz dane, które chcesz zgromadzić w pamięci.

W swej najprostszej postaci zmienne to środek przechowywania informacji w pamięci w celu dalszego wykorzystania. Postać informacji może być różna: są to łańcuchy alfanumeryczne, dane liczbowe lub wartości boolowskie. Zmienną definiuje wyraz var. Chyba najwięcej problemów stwarza początkującym użytkownikom zrozumienie różnicy między łańcuchem znaków a zmienną numeryczną. W uproszczeniu zmienna łańcuchowa przenosi dane, natomiast zmienna numeryczna przechowuje wartości w celu dalszego ich zbadania za pomocą testu lub obliczenia.

Aby dokładniej to zrozumieć, oprzyjmy się na praktycznym przykładzie. Jeśli chcesz zapamiętać czyjeś dane personalne i numer telefonu, zapisujesz wszystko na kawałku papieru. Później sięgasz po niego, odczytujesz co napisałeś i postanawiasz umieścić dane w książce adresowej. Ten proces odpowiada zapisywaniu łańcucha. Tworzą go dane, do których chcesz mieć dostęp później. Można by to zapisać w postaci takiego oto wyrażenia:

var nameAddress = ? Joe 555-5555?.

Jeśli jednak zapisałeś tylko numer, na przykład 25, numer ten może Ci później posłużyć do określenia nowej wartości. Powiedzmy, że w każdej skrzynce masz 25 jabłek, a skrzynki są trzy. Liczbę jabłek w skrzynce można wyrazić w następujący sposób:

var boxApples = 25

Liczbę skrzynek natomiast opisuje zmienna:

var boxTotal = 3

Wartość odkreślającą liczbę jabłek (25) i wielokrotność tej wartości (3) odpowiadającą liczbie skrzynek można wykorzystać do obliczenia całkowitej liczby jabłek:

var totApples = boxApples*boxTotal

Jeśli zapytasz JavaScript, ile wynosi totApples, zwrócona Ci odpowiedź wyniesie 75. Jest to niewątpliwie wartość numeryczna.

Tworząc zmienną, określasz po prostu, że:

var nazwa_zmienej = wartość

W tym wyrażeniu var to deklaracja zmiennej, nazwa_zmiennej jest nazwą, którą nadajesz zmiennej, a wartość to informacja, którą chcesz przechować w zmiennej i z nią stowarzyszyć.

Jeśli informacja ma być łańcuchem znaków ? co oznacza, że nie chcesz, aby była ona interpretowana ? umieszczasz wartość w cudzysłowie:

var nazwa = ?Blaine?

Jeśli informacja jest liczbą i będzie później wykorzystana w obliczeniach, podajesz ją po prostu bez cudzysłowu:

var total = 8

W końcu, jeśli informacja jest prawdziwa lub fałszywa, określasz wartość jako true lub false, nie stosując cudzysłowu:

var customer = true

Podsumowując: jeśli chcesz tylko przechować informację, stosujesz cudzysłów, co zapobiega jej interpretowaniu; natomiast jeśli chcesz, aby informacja została wykorzystana w obliczeniach lub do określenia prawdziwości warunku, nie stosujesz cudzysłowu.

Elementy: obiekty i właściwości

JavaScript to język zorientowany obiektowo, co oznacza, że w swoich operacjach odwołuje się do elementów zwanych obiektami. Sięgnąć tu możemy po analogię z rzeczywistymi obiektami trójwymiarowymi, takimi jak na przykład pudło lub balon.

Co więcej, obiekty te można opisać i rozróżnić za pomocą właściwości. I tak na przykład można zapisać box.color = ?blue?, gdzie box to obiekt, color to jego właściwość, a blue jest wartością właściwości.

Elementy: metody

Metody pozwalają przypisać obiektowi behawior. Metoda to akcja, którą obiekt ma przeprowadzić (ważne jest, aby zdać sobie sprawę, że to nie użytkownik, lecz obiekt jest tym, do którego akcje należą). Wracając do wcześniejszej analogii, można napisać:

box.enclose()

Tutaj boxjest obiektem, a enclose to metoda. Jak pewno zauważyłeś, za metodą pojawiają się nawiasy. W tych nawiasach możesz umieścić argument. Argument to wiadomość, która ma być przekazana obiektowi. Oto przykład:

box.enclose(?stapler?)

Nie wszystkie metody wymagają argumentów.

Elementy: funkcje

Funkcje pozwalają zapisać wyrażenie (lub zestaw wyrażeń), z którego potem można korzystać wywołując tylko nazwę. Rzuć okiem na następujący przykład:

function Package(){ box.enclose(?stapler?) };

Jeśli później wywołasz tę funkcję, wykonane zostanie wyrażenie box.enclose(?zszywacz?). Nie musisz więc przepisywać wyrażenia, ilekroć chcesz go użyć. Zauważ, że wyrażenie zawarte jest w nawiasach klamrowych, {}. Wywołanie funkcji pociąga za sobą wykonanie wszystkich wyrażeń umieszczonych w tych nawiasach.

Wreszcie, jeśli chcesz, aby funkcja była wykorzystywana w różnorodnych sytuacjach, zastosuj ją ze zmienną:

var itemname = ?stapler?

function Package(itemname){

box.enclose(itemname)

};

Poprzez utworzenie zmiennej itemname, wszystko, do czego ją przyrównasz, zostanie przekazane do funkcji i metody enclose.

Elementy: procedury obsługi zdarzeń

Procedury obsługi zdarzeń ułatwiają interakcję użytkownika i stworzonego przez Ciebie skryptu. Gdy użytkownik na przykład przesuwa wskaźnik myszki nad określonym elementem graficznym lub klika, możesz za pomocą procedury obsługi zdarzenia uruchomić funkcję:

onclick = ?Package()?

Tutaj onClick to procedura obsługi zdarzenia, a ?Package? jest funkcją, która ma być wykonana.

Kategoria: Tworzenie stron dnia 10 listopada 2010 Komentarze są wyłączone Tagi: ,