Projektowanie aplikacji internetowych

Projektowanie aplikacji internetowych dr inż. Agnieszka Bołtud Wykład 1 Plan wykładu Standardy sieciowe Przeglądarki Elementy standardów sieciowych Przykłady praktycznych zastosowao Cechy XHTML, różnice w stosunku do HTML Reguły XHTML W3C W3C Założone w 1994 roku konsorcjum World Wide Web (W3C) tworzy specyfikacje oraz wytyczne, których celem jest promowanie ewolucji sieci WWW i zapewnienie prawidłowego współ działania różnych technologii sieciowych. Do konsorcjum należy około 500 organizacji. Jego dyrektor, Tim Berners-Lee, wynalazł sied WWW w 1989 roku. W3C stworzyło między innymi następujące specyfikacje: HTML, CSS, XML, XHTML i standardowy model obiektowy dokumentu (ang. DOM Document Object Model). Przez lata konsorcjum określało te specyfikacje rekomendacjami", co mogło nieumyślnie zachęcad firmy członkowskie, takie jak Microso ft czy Netscape, do implementowania specyfikacji W3C nie do kooca rygorystycznie. Kiedy w 1998 rolni wystartował projekt standardów sieciowych, termin rekomendacje W3C" zo stał zastąpiony standardami sieciowymi". Do organizacji zajmujących się standaryzacją zalicza się również Europejskie Stowarzyszenie Producentów Komputerów (ang. ECMA - European Computer Manufacturers Association), które odpowiada za język o nazwie ECMAScript. 1

Co oznaczają standardy sieciowe to znaczy języki strukturalne (takie jak XHTML i XML), języki warstwy prezentacji (takie jak CSS), modele obiektowe (takie jak W3C DOM) oraz języki skryptowe (takie jak ECMAScript), technologie te zostały zaprojektowane tak, aby dostarczyd jak największych korzyści jak największej liczbie użytkowników sieci; tworzą razem swoistą mapę drogową" dla racjonalnego, ułatwiającego dostęp, zaawansowanego i efektywnego pod względem kosztów budowania projektów w sieci WWW, Przeglądarki zgodne ze standardami to takie, które w znaczącym stopniu rozumieją i poprawnie obsługują XHTML, CSS, ECMAScript i model DOM, Przeglądarki Nowoczesne przeglądarki nie są jedynie nowszymi wersjami tej samej starszej wersji, w wielu przypadkach zostały przebudowane od podstaw, Wszystkie zostały zbudowane na bazie nowego kodu w celu realizacji nowego zadania, a mianowicie zachowania jak największej zgodności ze standardami sieciowymi, Przeglądarki lat dziewięddziesiątych skupiały się na firmowych technologiach i nie zwracały uwagi na standardy, a nawet je ignorowały, Nie traktowano jednak tego poważnie, gdy np. przeglądarka nie obsługiwała standardu PNG to projektanci nie używali obrazków w tym formacie. Przeglądarki Wg J. Zeldmana w roku 2006 wciąż 99.9% przeglądarek jest przestarzałych, Tworzenie wielu wersji niestandardowego kodu (każdej dostosowanej do niestandardowych dziwactw przeglądarki) jest jednym z powodów tzw. starzenia się stron, Tworzenie skryptów mających na celu detekcję wersji przeglądarki i dodawanie elementów charakterystycznych jedynie dla niej, Niestety im większy kod tym większe koszty utrzymania serwisu, mówi się że jeśli witryna zredukuje swój kod o 35% o tyle samo spadną koszty jej utrzymania, Oszczędność Strona zbudowana według starych zasad zajmuje 60 kb, Zastąpienie znaczników oraz innych przestarzałych znacz ników czystym kodem z kilkoma regułami CSS zmniejsza rozmiar strony do 30 kb (w praktyce możliwe jest zredukowanie 60-kilobajtowej strony do 22 kb lub nawet mniej), Redukcja: kosztów dzierżawy łącza, nakładów na sprzęt komputerowy, im prostszy jest kod strony, tym szybciej jest ona dostarczana do użytkownika, tym mniej obciąża serwer, tak więc trzeba kupid, serwisowad i modyfikowad miej serwerów (ważne w przypadku serwerów, które muszą generowad dynamiczną, sterowaną bazami danych zawartośd). 2

Kod skompresowany a skondensowany kondensowanie kodu - pisanie go w sposób przejrzysty i zwięzły, skompresowanie kodu - w niektórych systemach serwerowych istnieje możliwośd kompresji kodu (np. Apache oferuje moduł mod_zip kompresujący pliki HTML po stronie serwera, rozpakowywany po stronie klienta), Rzadko stosowane w komercyjnych produktach ze względu na dodatkowy koszt kompresji, Po drugie im mniejszy plik tym lepiej zostanie skompresowany, Zgodność wstecz Według twórców: zapewnienie obsługi wszystkim użytkownikom, W praktyce: używanie niestandardowych, niepraktycznych znaczników oraz kodu po to aby każdy użytkownik mógł zobaczyd to samo niezależnie od przeglądarki, Niestety im bardziej zaczynają obowiązywad standardy sieciowe tym bardziej też obowiązuje zasada wkładasz śmieci otrzymujesz śmieci, Lekarstwo Stworzone przez członków konsorcjum W3C i inne organizacje zajmujące się ustanawianiem standardów oraz obsługiwane przez wszystkie przeglądarki powstałe po roku 2000, technologie takie jak CSS, XHTML, ECMAScript i W3C DOM pozwalają projektantom: bardziej precyzyjnie kontrolowad układ, położenie i typografię w przeglądarkach graficznych z możliwością zmiany prezentacji strony według potrzeb użytkownika, projektowad zaawansowane funkcje interaktywne witryn działające w różnych przeglądarkach i na różnych platformach, przestrzegad praw i wytycznych dotyczących funkcji ułatwiania nawigacji bez pogarszania wyglądu, wydajności lub stopnia skomplikowania, Lekarstwo zmienid projekt witryny w ciągu godzin, a nie tygodni, i tym samym zredukowad koszty pracy, obsługiwad wiele przeglądarek bez konieczności tworzenia wielu wersji witryny i z bardzo małą ilością lub brakiem rozwidlonego kodu, obsługiwad niestandardowe i nowo powstające urządzenia, poczynając od bezprzewodowych gadżetów i telefonów komórkowych z dostępem do sieci, aż po czytniki kodu Braille'a oraz czytniki zawartości ekranu stosowane przez osoby niepełnosprawne ponownie bez konieczności ponoszenia dodatkowych kosztów i tworzenia wielu wersji witryny, oferowad wersje stron do wydruku", często bez konieczności tworzenia oddzielnych stron przeznaczonych specjalnie do wydruku lub bazowania na drogich systemach do tworzenia dokumentacji drukowanej, 3

Lekarstwo Oddzielad styl od struktury i zachowania, Przejśd z HTML-a do XML-a, Zagwarantowad, iż dobrze zaprojektowane strony będą się poprawnie wyświetlad w przeglądarkach zgodnych ze standardami, jak i tych starszych, Zapewnid, iż dobrze zaprojektowane witryny będą się prawidłowo wyświetlad w nowych przeglądarkach oraz urządzeniach których jeszcze nie wymyślono, jest to tzw. zgodnośd w przód, Elementy standardów sieciowych Struktura HTML XHTML XML Strona jest rozbita na trzy niezależne komponenty Prezentacja CSS Zachowanie ECMAScript DOM Struktura Język znaczników (XHTML) - zawiera dane tekstowe sformatowane zgodnie z ich strukturalnym (semantycznym) znaczeniem: nagłówek, drugorzędny nagłówek, akapit, lista numerowana, etc., XML udostępnia znacznie więcej opcji niż XHTML, ale w chwili obecnej jest bieżącą rekomendacją W3C, która działa dokładnie tak jak HTML w nie mal każdej przeglądarce i urządzeniu internetowym, tworzony poprawnie (bez błędów, niedozwolonych znaczników i atrybutów) jest całkowicie przenośny (w przeglądarkach internetowych, programach odczytujących zawartośd ekranu, przeglądarkach tekstowych, urządzeniach bezprzewodowych itp.), Poprawny lub semantyczny układ znaczników Układ znaczników jest poprawny, gdy nie zawiera błędów typu niezamknięty znacznik, niedozwolony atrybut, etc., poprawnośd można testowad za pomocą darmowych narzędzi dostępnych w Internecie, http://validator.w3.org/ Układ znaczników jest semantyczny, gdy wszystkie znaczniki są stosowane zgodnie z ich przeznaczeniem, Układy mogą byd poprawne, ale nie semantyczne i odwrotnie, jednak dążąc do zachowania standardów, dążymy do tego aby były i poprawne i semantyczne, 4

Prezentacja Zachowanie Jeżyki prezentacyjne CSS formatują stronę WWW, kontrolując jej typografię, ułożenie, kolor itp., W większości przypadków CSS jest w stanie zastąpid stosowane wcześniej układy bazujące na tabelach HTML, Ponieważ prezentacja jest odseparowana od struktury, można modyfikowad dowolny z tych elementów bez negatywnego wpływu na drugi (globalizacja styli, style do wydruku), Dzięki wprowadzeniu styli CSS, wszystkie polecenia dotyczące formatowania można umieścid w jednym miejscu (tzw. arkuszu) i powiązad je z konkretnymi elementami, wstawionymi za pomocą czystego XHTML. Taka koncepcja sprawia, że modyfikacja wyglądu stron może przebiegad dużo sprawniej. Standardowy model obiektów W3C DOM współpracuje z CSS, XHTML i ECMAScript umożliwiając tworzenie zaawansowanych funkcji witryny oraz efektów działających w różnych przeglądarkach i na różnych platformach, Standard W3C DOM definiuje zespół klas i interfejsów, pozwalających na dostęp do struktury dokumentów oraz jej modyfikację poprzez tworzenie, usuwanie i modyfikację tzw. węzłów, Pierwotnie nie istniał standardowy model DOM. Twórcy najpopularniejszych przeglądarek internetowych tworzyli własne niezgodne ze sobą modele o interfejsie programistycznym opartym na kolekcjach, Organizacja W3C przygotowała ujednolicony standard obiektowego modelu dokumentu, wewnętrznie podobny do wersji Microsoftu, chod o innym interfejsie programistycznym (dostęp do elementów dokumentu możliwy jest tu poprzez wywołanie odpowiedniej metody), Stosowanie standardów w praktyce Strona www.webstandards.org Stosowanie standardów w praktyce Rok 2002 - przeglądarka Camino (Mozilla) dla systemu Mac OS X źródło: J. Zeldman, Projektowanie serwisów 5

Stosowanie standardów w praktyce Rok 2002, przeglądarka Netscape 4 Stosowanie standardów w praktyce Urządzenie Palm Pilot oraz PocketPC Microsoftu i w Newtonie - dawno zarzuconym produkcie Apple źródło: J. Zeldman, Projektowanie serwisów źródło: J. Zeldman, Projektowanie serwisów Inny przykład Witryna magazyny A List Apart, rok 2001, układ zgodny ze standardami Inny przykład Przeglądarka Netscape 4, brak obsługi CSS, treśd sformatowana zgodnie ze strukturą dokumentu źródło: J. Zeldman, Projektowanie serwisów źródło: J. Zeldman, Projektowanie serwisów 6

Inny przykład Do wydruku, bez innej wersji strony, tylko CSS Zalety wynikające ze stosowania standardów Brak konieczności tworzenia stron dla konkretnych producentów przeglądarek, Brak konieczności tworzenia uproszczonych stron dla starszych przeglądarek, W wielu przypadkach brak konieczności tworzenia wersji dla urządzeo mobilnych, Brak konieczności tworzenia wersji do wydruku, Ułatwienia dostępu dla osób niepełnosprawnych, gdyż strona będzie działad w urządzeniach odczytywania zawartości ekranu, źródło: J. Zeldman, Projektowanie serwisów Przejściowa zgodność w przód Składniki: Poprawny kod XHTML (zastosowany może byd również HTML 4.01). Poprawne arkusze CSS do kontrolowania typografii, koloru, marginesów itp., Sporadyczne użycie tabel XHTML do układu, unikanie głębokich zagnieżdżeo przez przerzucenie części pracy na CSS, Opcjonalnie: zastosowanie etykiet strukturalnych do znaczących komórek tabel, Zaadresowanie i przetestowanie funkcji ułatwieo dostępu. Przejściowa zgodność w przód Kiedy stosowad: zalecane w przypadku witryn odwiedzanych przez duży odsetek przeglądarek, które zwyczaj nie nie są w stanie poprawnie obsługiwad CSS i modelu DOM, Korzyści: Racjonalna zgodnośd wstecz: witryny mogą byd budowane w taki sposób, aby wyglądały przyzwoicie nawet w najstarszych przeglądarkach, Zgodnośd w przód: witryny będą funkcjonowały w przeglądarkach i urządzeniach, które dopiero się pojawią, Działania w kierunku ostatecznej modyfikacji witryny są rozpoczęte, 7

Przejściowa zgodność w przód Mniej problemów z utrzymaniem wersji dla bieżących przeglądarek i z usuwaniem niepotrzebnego i przestarzałego kodu znaczników, Większa dostępnośd, redukcja rozmiarów i kosztów, Częściowe oddzielenie zawartości od struktury, Wady: Struktura i prezentacja nadal częściowo powiązane co utrudnia uaktualnianie i utrzymywanie strony, zwiększa koszt oraz utrudnione przejście do formy zarządzania zawartością bazującą na XML, Całkowita zgodność w przód Składniki: Pełne odseparowanie struktury od prezentacji i zachowania, Poprawny CSS, Kod znaczników zbudowany w oparciu o poprawny XHTML, Nacisk na strukturę i odpowiednie strukturalne nazewnictwo projektowanych elementów, Zachowanie implementowane przy użyciu modelu DOM, Zaadresowanie i przetestowanie funkcji ułatwieo dostępu. Kiedy stosowad: Polecany gdy mały procent użytkowników to posiadacze niezgodnych przeglądarek, Całkowita zgodność w przód Zalety: Zgodnośd w przód: zwiększona przenośnośd w istniejących i przyszłych przeglądarkach oraz urządzeniach, Silniejsza transformacja w kierunku hardziej zaawansowanych form języka znaczników bazujących na XML-u, Dotarcie do większej liczby użytkowników przy zmniejszonych nakładach pracy, Brak konieczności tworzenia wielu wersji witryny, Brak lub mniejszy problem z dostępnością, Elegancka, prosta i logiczna składnia znaczników, Szybsza, łatwiejsza i mniej kosztowna produkcja oraz utrzymanie, Całkowita zgodność w przód Wady: Tendencja do przeciętnego wyglądu w starszych przeglądarkach, Obsługa CSS przez przeglądarki nie jest doskonała (specjalne style pod IE, IE6), Niektóre przeglądarki uznawane za zgodne ze standardami mogą nie obsługiwad wybranych zachowao opartych na modelu DOM. 8

Złe przeglądarki Główne wady przeglądarek niezgodnych ze standardami: Przeglądarki niezgodne ze standardami powodowały np. przykrywanie założeo podanych za pomocą CSS na swoje własne, Brak dziedziczenia, koniecznośd definiowania styli dla różnych elementów strony, co powoduje redundancję i obciążenie łączy, XML a HTML Pomimo że bazuje na tej samej technologii, która dala początek HTML-owi XML jest całkowicie różny od niego, HTML jest prostym językiem służącym do tworzenia stron internetowych, posiadającym ustaloną liczbę znaczników i zestaw niekonsekwentnych reguł, HTML jest jedynie językiem formatowania, nie zawiera żadnej informacji na temat formatowania treści, XML to zbiór znaczników o określonych spójnych regułach i może wykraczad daleko poza sied na każde środowisko, które jest w stanie go zrozumied, Zalety XML jest samodzielnym, uniwersalnym standardem plików doskonale współpracującym z innymi, jest formatem inteligentnym świadomym swojej zawartości, bo może przechowywad także metadane, jest językiem rozszerzalnym może byd dostosowany do dowolnych potrzeb biznesowych bądź akademickich oraz może posłużyd do stworzenia innych bazujących na nim języków, bazuje na regułach, które wymuszają spójnośd podczas przenoszenia danych do innej bazy danych, przekształcania danych na inny format lub manipulowania nimi przy użyciu innych aplikacji XML, Może byd automatycznie transformowany do innych formatów, Czerpanie styli kilka witryn opublikowało układy CSS do darmowego wykorzystania przez wszystkich: http://www.freecsstemplates.org/ http://meyerweb.com/eric/css/edge/index.html http://www.free-css-templates.com/ http://www.templatemo.com/page/1 9

Wersje XHTML XHTML 1.0 Strict odmiana ścisła, zalecana przez W3C, przeznaczona do tworzenia dokumentów z oddzieloną warstwą semantyki od prezentacji; nie zawiera prawie żadnych elementów prezentacyjnych Transitional odmiana przejściowa, obok elementów odmiany ścisłej zawiera wiele elementów prezentacyjnych Frameset zawiera wszystkie elementy wersji przejściowej, a dodatkowo także elementy przeznaczone do wyświetlania ramek XHTML 1.1 jak dotąd rzadko stosowany XHTML 2.0 - zarzucony Dlaczego warto wybrać XHTML jest aktualnym standardem znaczników zastępującym HTML 4, jest zaprojektowany do współpracy z innymi językami skryptowymi, aplikacjami i protokołami bazującymi na XML, jest bardziej spójny niż HTML, XHTML 1.0 jest pomostem do przyszłych wersji XHTML. Kiedy XHTML 2 osiągnie status koocowej rekomendacji, łatwiej będzie przejśd na tę specyfikację z XHTML 1.0 niż z HTML-a. Stare przeglądarki radzą sobie z XHTML-em równie dobrze jak z HTML-em, Nowe przeglądarki kochają" XHTML, a wiele z nich traktuje tę specyfikację znacznie lepiej w porównaniu z HTML 4, Dlaczego warto wybrać XHTML XHTML działa równie dobrze w urządzeniach bezprzewodowych i programach do odczytywania zawartości ekranu i innych wyspecjalizowanych klientach użytkownika jak w tradycyjnych przeglądarkach komputerowych, XHTML jest częścią rodziny standardów sieciowych, Tworzenie w języku XHTML pozwala na wyzbycie się przyzwyczajenia do pisania prezentacyjnego kodu znaczników, a to z kolei może pomóc w uniknięciu problemów z dostępnością i niezgodnością przy wyświetlaniu stron w przeglądarkach różnych producentów, Tworząc w języku XHTML, możesz wyrobid w sobie nawyk sprawdzanie własnej pracy przy użyciu usług walidacji kodu Walidacja kodu i inne narzędzia wspomagające http://validator.w3.org/ Web Developer - jest rozszerzeniem, dodatkiem do programu Firefox, dodaje ono menu oraz pasek narzędzi z wieloma narzędziami przydatnymi podczas tworzenia strony, walidacją XHTML, HTML, CSS, etc., Firebug dodatek do Firefox, daje szereg narzędzi programistycznych dostępnych błyskawicznie podczas używania przeglądarki, można edytowad, analizowad kod oraz monitorowad CSS, HTML i JavaScript bezpośrednio na dowolnej stronie internetowej, Yslow - wtyczka dla Firebug, która analizuje stronę pod względem kilku czynników wpływających na czas ładowania strony i przedstawia wyniki tej analizy. Dodatkowo wyświetla informacje na temat załadowanych plików i czasu ich ładowania. Bardzo przydatna przy testowaniu serwisów internetowych pod względem czasu ładowania strony. 10

Reguły XHTML Reguły XHTML DOCTYPE zawsze na początku i dużymi literami informuje odbiorcę strony (przeglądarkę lub program weryfikujący), jakiej wersji HTML-a lub XHTML-a używasz, kod znaczników oraz style CSS nie zostaną poprawnie zweryfikowane jeśli strona XHTML nie będzie rozpoczynad się od poprawnej deklaracji DOCTYPE, Który DOCTYPE wybrad: Transitional, Strict czy Frameset? Transitional najbliższy HTML, najbardziej wybaczający, pozwala na stosowanie przestarzałych fragmentów kodu: np. otwieranie elementów w nowym oknie, toleruje również kolory tła stosowane bezpośrednio do komórek tabel, Strict gdy znajdzie we wnętrzu strony np. bgcolor to usługa weryfikacji kodu interpretuje to jako błąd, a przeglądarka nie wyświetli, Jak i gdzie definiowad DOCTYPE deklaracja na samym początku dokumentu <!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> Przestrzeo nazw <html xmlns="http://www.w3.org/1999/xhtml" xml:lang= "en" lang="en"> jest kolekcją typów elementów i nazw atrybu tów skojarzonych z określoną definicją typu dokumentu Reguły XHTML Prolog XML przeznaczeniem prologu jest wskazanie wersji XML-a oraz typu kodowania znaków w danym dokumencie, występuje przed DOCTYPE <?xml version="1.0" encoding="iso-8859-1"?> Kodowanie znaków: Unicode domyślny dla XHTML zestaw znaków, ISO-8859 seria standaryzowanych wielojęzycznych zestawów znaków graficznych kodowanych w jednym bajcie, ISO-8859-1 odwzorowanie znaków krajów zachodniej Europy na Unicode, ISO-8859-2 plus języki Europy wschodniej, turecki, grecki, hebrajski, etc., Reguły XHTML znaczniki pisz małymi literami, gdyż XHTM rozróżnia wielkośd znaków, istnieją programy przekształcające kod HTML na XHTML, <title> a nie <TITLE> Nazwy elementów i atrybutów muszą byd pisane małymi literami, wartości atrybutów i treści strony nie, <img src= /pic1.jpg alt= Jakikolwiek Opis /> Wartości atrybutów muszą byd umieszczone w cudzysłowach, <hr width= 75% size= 7 /> 11

Reguły XHTML Przypisuj wartości wszystkim atrybutom, nawet jeśli są one takie same jak nazwa, <hr noshade= noshade > a nie <hr noshade> Zawsze zamykaj wszystkie znaczniki, Tak w XHTML-u tak nie może byd Tak już ok Reguły XHTML Zamykaj także puste znaczniki (takie jak , <img>) przez umieszczenie na ich koocu /, np. , Nie umieszczaj podwójnych myślników w komentarzach, mogą one byd tylko na koocu i początku, wewnątrz zastępuj lub rozdzielaj, Koduj znaki < oraz &, Znak < koduj jako < Znak & koduj jako & Znak > koduj jako > Jak sensownie kodować dokument Myśl o kodzie w sposób strukturalny, mniej wizualny, Myśl w kategoriach tradycyjnych form: <h1>temat</h1> tekst wprowadzenia <h2>podtytuł</h2> istotny tekst Unikaj przestarzałych form: temat Tekst wprowadzenia podtytuł Istotny tekst Jak sensownie kodować dokument Należy używad elementów zgodnie z ich znaczeniem, bez sugerowania się wyglądem: Nie używaj <h1> gdy chcesz zwiększyd wysokośd tekstu, itd., Nie używaj <li> gdy chcesz wstawid znak wypunktowania przed akapitem, Jeśli chcesz określid wygląd elementu użyj CSS, Z użycie CSS wszystkie nagłówki mogą byd takie same: h1, h2, h3, h4, h5, h6 { font-family: georgia, palation, times, serif; font-weight: normal; font-size: 2m; margin-top: 1em; margin-bottom: 0; } 12

Jak sensownie kodować dokument Wybieraj elementy strukturalne a nie nic nie znaczące Lista kodowana nie powinna byd tworzona w następujący sposób: element pierwszy element drugi a raczej <ul> <li>element pierwszy </li> <li>element drugi </li> </ul> Używaj zamiast , zamiast , bo oraz są jedynie elementami prezentacyjnymi, które mogą nic nie znaczyd np. innych w urządzeniach lub przeglądarkach tekstowych, Wykład przygotowano na podstawie Jeffrey Zeldman, Projektowanie serwisów WWW. Standardy sieciowe. Wydanie II, Helion, 2007. Materiałów dostępnych w Internecie (m.in. www.webstandards.org) 13