Pawel Zakrzewski - Adobe Certified Expert | Adobe Community Expert

Wraz ze wzrostem popularności technologii AJAX, coraz więcej ludzi z zazdrością spogląda na niewielkie, interaktywne moduły dostępne na wielu stronach WWW i portalach. Ot choćby wspomnieć tu gadżety znane choćby z popularnych serwisów jak Wirtualna Polska czy Onet.pl.

Dzięki użyciu zakładek, animowanych okien, czy belek nawigacyjnych, możemy łatwo i szybko dotrzeć do interesującej nas informacji. Co ważne, wszystko to odbywa się na konkretnej stronie bez konieczności jej przeładowania. W takim wypadku dzięki zręcznemu połączeniu JavaScriptu, stylów CSS i niekiedy źródła danych w formacie XML udaje się twórcom serwisów osiągnąć niezwykle ciekawe i co ważne funkcjonalne efekty.

Spry a AJAX

Panel z zakładkami, panel typu Accordion, efekty przenikania, proste animacje, przestawianie elementów na stronie to tylko przykłady wykorzystania popularnej technologii AJAX na stronie. Przykłady te jednak przekładają się szybko na funkcjonalność. Panel czy zakładka, która pozwala samodzielnie dostosować treść strony, jaką w danej chwili chcielibyśmy przeglądać zdecydowanie poprawia wizerunek serwisu i daje nam wrażenie jego współtworzenia (Web 2.0?).

Sam AJAX to naprawdę nic nowego, zręczne połączenie źródła danych (XML), dodatkowej funkcjonalności (JavaScript) oraz ciekawego wyglądu (CSS) stosowane było niemal od zawsze na stronach internetowych. Dziś jednak termin AJAX nabrał naprawdę przyspieszenia i coraz więcej witryn korzysta z tej ciekawej funkcjonalności.

Spróbujmy więc wspólnie za pomocą Adobe Dreamweaver CS4 dodać mały, interaktywny gadżet typu Accordion Panel na naszą stronę. Sam moduł jest z pewnością doskonale znany.

Pozwala na wyświetlanie zawartości jednej z zakładek kosztem pozostałych. Dzięki użyciu panelu typu Accordion w jednym ściśle określonym miejscu na stronie WWW, możemy prezentować całkiem sporo różnorodnych treści. Daje to niezwykłe możliwości projektowe ale i pozwala ograniczyć ilość prezentowanych jednocześnie informacji na stronie.

Największą zaletą panelu Spry Accordion Panel jest jego stała wielkość. Niezależnie od zawartości, cały moduł ma zawsze stały rozmiar. Jeśli prezentowane treści nie mieszczą się w oknie, automatycznie dodawany jest pasek przewijania umożliwiający dostęp do pełnej informacji.

Jak to działa w praktyce, chyba wszyscy wiemy, jak jednak przygotować podobny moduł za pomocą Dreamweavera? Odpowiedź jest w sumie niezwykle prosta. Budujemy tradycyjną stroną i w z góry przygotowane miejsce dodajemy panel Spry Accordion. Dzięki użyciu stylów CSS możemy z łatwością dostosować jego wygląd do ogólnej kolorystyki całej strony. Wprowadzenie treści i konfiguracja gadżety jest naprawdę niezwykle prosta. Przetestujmy to w małym przykładzie.

Przykładowa strona WWW, zawiera tradycyjną grafikę nagłówkową, dużą sekcję do prezentacji treści oraz menu boczne, które spróbujemy przygotować za pomocą panelu Spry Accordion. Co nam to da? W ten sposób przy stałej wielkości okna możemy zaprezentować szereg interesujących informacji.

Co więcej, elementy strony widoczne poniżej jak choćby reklamy czy inne informacje nie będą mocno odsunięte w kierunku dolnej części strony. W rezultacie, zarówno panel informacyjny jak i pozostałe moduły będą stale widoczne na stronie bez konieczności przewijania jej zawartości. Wszystkie dodatkowe informacje, możemy łatwo prześledzić, klikając w odpowiednią belkę panelu Accordion.

Co ważne, w zasadzie jako jedyny z gadżetów Spry, panel Spry Accordion, niestety nie działa dobrze na stronie WWW budowanej w oparciu o tabelę. Najlepszym sposobem na utworzenie serwisu zgodnego ze sieciowymi standardami pozostaje więc użycie znaczników <div> i konstrukcja strony w oparciu o style CSS.

Takie podejście, daje nam wiele korzyści. Nie tylko działa poprawnie panel Spry Accordion (jak i inne gadżety Spry), ale także szybko i z dużą łatwością możemy edytować poszczególne elementów serwisu.

Analiza bieżącej strony

Przykład nad którym pracujemy nie pochodzi z żadnego konkretnego serwisu. Wszystkie jego elementy są całkowicie hipotetyczne. Tym nie mniej da się tu wyodrębnić kilka osobnych części. Nagłówek strony wraz z wyszukiwarką zapisany w sekcji znaczników <div id=”header”></div>, główne menu nawigacyjne zamknięte w sekcji znaczników <div id=”navi”></div>, dwie kolumny <div id=”sidebar2”></div>, <div id=”mainContent”></div>) i stopka (<div id=”footer”></div>).

Cały układ strony utworzony został poprzez modyfikację oryginalnego wzorca dostępnego wraz z programem Adobe Dreamweaver CS4. Niewielka modyfikacja kodu (dodanie znacznika <div id=”navi”></div>,) oraz edycja stylów CSS pozwoliło na szybkie uzyskanie prezentowanego layoutu. Nie jest to z pewnością nic wyszukiwanego, jedna w wielu typowych sytuacjach, taka konstrukcja strony sprawdza się znakomicie.

Dodajemy Spry Accordion Panel

Patrząc na układ elementów naszej strony zdecydowałem, by dodatkowy moduł – Spry Accordion umieścić w bocznej kolumnie – Sidebar2. W ten sposób ułatwimy użytkownikom korzystanie z kilku dodatkowych informacji i jednocześnie pozostawimy widoczny cały moduł nowości na stronie.

Pracę rozpoczynamy od zaznaczenia istniejącego nagłówka Sidebar1 i usunięcia go ze strony. W tym miejscu dodany zostanie nowy gadżet. W tym celu przechodzimy do sekcji Insert i lokalizujemy zestaw elementów Spry. W moim programie, dla wygody przeciągnąłem domyślnie ustawiony po lewej pasek Insert ponad główne okno dokumentu. W ten sposób nie tylko nawiązuję do wyglądu poprzednich wersji programu ale także ułatwiam sobie korzystanie.

W sekcji Spry lokalizujemy gadżet o nazwie Spry Accordion i wprowadzamy go na stronę w miejscu usuniętego nagłówka. W zasadzie to już niemal wszystko. Gotowy element już działa i naszym zadaniem pozostanie by wypełnić go treścią, ale także zadbać o jego atrakcyjny wygląd. I nie są to trudne działania. A zmienić trzeba sporo, moduł w bieżącej postaci z pewnością do atrakcyjnych nie należy.

Dodajemy treść i kolejne zakładki

Pracę rozpoczniemy jednak od wprowadzenia nowej, konkretnej treści. Podglądając wprowadzoną zawartość modułu z pewnością łatwiej będzie atrakcyjnie zaplanować jego wygląd. W tym celu przechodzimy do pierwszej belki panelu nazwanej w tej chwili Label 1 i zmieniamy jej treść. Naturalnie możemy wprowadzić w tym miejscu dowolny tekst, pamiętając jednak by był to raczej krótki tytuł – nagłówek, niż typowe zdanie.

Projektując stronę o sobie korzystałem w tym miejscu z nagłówków typu: Adobe Certified Expert, Adobe Community Expert, Adobe User Group itp. Ale równie dobrze moglibyśmy zastosować tytuły typu: Doświadczenie, Umiejętności, Kariera, Praca zawodowa, Kontakt itp.

Kolejny krok to wprowadzenie właściwej treści pierwszego modułu. W tym celu kopiujemy z dowolnego edytora tekstowego fragment tekstu, jaki chcielibyśmy zamieścić na stronie w tym właśnie miejscu i wklejamy go w sekcji Content 1 bezpośrednio poniżej zmienionego wcześniej nagłówka. Oczywiście możemy także wpisać odpowiedni tekst bezpośrednio z klawiatury, tym niemniej użycie poprawnie zredagowanego wcześniej tekstu jest jednak wygodniejszym rozwiązaniem.

W rezultacie pierwszy moduł panelu Spry Accordition Panel mamy gotowy i czas przejść do kolejnego. W tym celu przechodzimy do drugiej belki nagłówkowej i w miejsce tekstu Label 2 wprowadzamy własny tytuł sekcji. Podobnie jak poprzednio poniżej wklejamy treść dotyczącą drugiego nagłówka na stronie. Warto w tym miejscu zwrócić uwagę, na fakt, że nawet duża ilość tekstu nie burzy struktury panelu Accordion. Jak się zaraz przekonamy, nadmiarowy tekst dostępny będzie do odczytu dzięki automatycznie wyświetlonym paskom przewijania.

Osobiście nie bardzo przepadam za przewijaniem fragmentów tekstu w obrębie strony. Jeśli to tylko możliwe staram się tak zmodyfikować właściwą treść by dopasować ją do stałej wysokości panelu Accordion. Tym jednak zajmiemy się nieco później.

Pierwsze testy

Jedną z najciekawszych nowości programu Adobe Dreamweaver CS4 jest możliwość podglądu na żywo efektów naszej pracy. W pewnym sensie, podobne efekty program oferował już w kilku poprzednich wersjach, jednak w jego najnowszej odsłonie dostaliśmy całkiem nową jakość pracy. Jak to działa?

Sercem podglądu jest niewielki przycisk Live View dostępny w górnej części okna dokumentu.

Jego użycie przełącza nas w tryb dynamicznego renderowania stylów, efektów a nawet kodu JavaScript bezpośrednio na edytowanej stronie. To niezwykle wygodne podejście nie tylko znacznie przyspiesza czas projektowania ale także ułatwia śledzenie odpowiednich zmian na stronie.

Co więcej, jeśli dodatkowo aktywujemy przycisk Live Code, dostajemy niecodzienną możliwość podglądu zmian na stronie ale także w jej kodzie źródłowym. Jest to niezwykle przydatne rozwiązanie szczególnie, podczas pisania kodu, którego działania nie jesteśmy w 100% pewni. Dzięki podglądowi na żywo zmian, jakie wywołuje działanie poszczególnych elementów strony, możemy łatwo odszukać potencjalne błędy i problemy.

Ucieknijmy jednak od problemów. Po aktywacji podglądu Live Preview, Dreamweaver CS4 pozwala na podgląd działania panelu Spry Accordion Panel bezpośrednio w oknie bieżącego dokumentu. Po uruchomieniu podglądu Live Code, możemy na żywo obserwować zmiany jakie zachodzą w kodzie podczas użycia gadżetu.

Nie jest to oczywiście żadnym zaskoczeniem, że cały panel działa bez zarzutu.

Ciągle jednak brakuje mu pełnej treści i przede wszystkim odpowiedniego wyglądu. Możemy jednak testować jego działanie. Kliknięcie w belkę nagłówkową rozwija dany moduł i jednocześnie chowa poprzedni. Tak właśnie działa Spry Accordion.

Jeśli w jednym z obszarów wprowadziliśmy duży fragment tekstu (i grafiki), automatycznie widoczny jest także pasek przewijania.

Aby podejrzeć działanie modułu za pomocą przeglądarki konieczne jest zapisanie efektów pracy. Powoduje to wyświetlenie okna dialogowego Copy Dependent Files, które informuje nas o utworzeniu dodatkowego katalogu SpryAssets zawierającego JavaScript oraz style CSS konieczne do działania całego modułu.

Aby cały panel działał poprawnie na serwerze WWW, konieczne jest przesłanie całego katalogu SpryAssets wraz z właściwą treścią strony. Oczywiście w oknie przeglądarki internetowej niewiele się zmienia. Właściwie nic, przygotowany panel działa poprawnie jednak nie wygląda dobrze.

Dodajemy więcej treści i kolejne moduły

Domyślnie panel Spry Accordion pozwala na wprowadzenie treści dla dwóch niezależnych modułów. Nie jest to dużo i zwykle zachodzi potrzeba dodania kilku dodatkowych. W tym celu zaznaczamy niebiesko/turkusowy moduł SpryAccordion na stronie w panelu Properties za pomocą przycisku + w polu Panels dodajemy kolejne moduły.

Naturalnie możemy wykorzystać dowolna ilość osobnych modułów, jednak nie przesadzajmy z ich liczbą. Jeśli zachodzi konieczność użycia więcej niż 10 osobnych paneli warto rozważyć przebudowę całej strony i inny układ jej podstawowych elementów. W takim przypadku Spry Accordion nie zawsze jest najwygodniejszym rozwiązaniem.

Oczywiście treść kolejnych modułów dodajemy w podobny sposób jak to miało miejsce wcześniej. Najpierw edytujemy nagłówek na belce, a następnie wprowadzamy właściwą treść danego panelu. W ten sam sposób dodajemy odpowiednią treść dla wszystkich dodanych elementów.

O ile to konieczne, w panelu Properties możemy łatwo zmienić kolejność lub ostateczną liczbę zakładek Spry Accordion. Przycisk z symbolem – (minus) usuwa wskazany moduł zaś strzałki góra/dół pozwalają dowolnie sterować jego lokalizacją pośród innych.

Zarządzanie wyglądem

No cóż, bez cienia wątpliwości, cały moduł Spry Accordion Panel w oryginalnej postaci nie wygląda dobrze. Musimy więc wprowadzić wiele zmian nie tylko w poprawieniu ogólnego wyglądu paneli ale przede wszystkim w dostosowaniu ich do ogólnej kolorystyki i stylistyki naszej strony. Na szczęście wszystkie elementy odpowiedzialne za wygląd paneli znajdują się w jednym miejscu. Jest to zewnętrzny arkusz stylów CSS zapisany w katalogu SpryAssets.

Naturalnie wszyscy, którzy chcą i potrafią edytować arkusz CSS za pomocą kodu, mogą po prostu otworzyć oryginalny plik i wprowadzić odpowiednie modyfikacje. Adobe Dreamweaver pozwala jednak zrobić to znacznie łatwiej. W tym celu skorzystamy z palety CSS Styles dostępnej w menu górnym Window>CSS.

Po jej otwarciu przechodzimy do stylów zlokalizowanych w dolnej części okna i odnajdujemy tam zewnętrzny arkusz o nazwie SpryAccordion.css. Jak łatwo się domyślić w tym miejscu znajduje się cały zestaw definicji stylów odpowiedzialnych za wygląd modułu Spry Accordition na naszej stronie. Wszystkie dostępne tu właściwości stylów możemy łatwo modyfikować, rozpocznijmy jednak od ustalenia wyglądu belki nawigacyjnej z tekstem nagłówkowym.

Jej wygląd określony jest na podstawie właściwości zapisanych w klasie o nazwie . Accordion PanelTab. Dwukrotne kliknięcie w nazwę stylu w palecie CSS Styles pozwoli otworzyć okno CSS Rule for definition . Accordion PanelTab In Spry Accordion.css. W tym miejscu mamy dostęp do wszystkich właściwości klasy określającej wygląd belki tytułowej. Spróbujmy wstępnie prześledzić je.

Atrybuty określające kolor, wielkość oraz styl tekstu widoczne są automatycznie po otwarciu okna CSS Rule for….. bowiem Type jest domyślną kategorią dostępną bezpośrednio po otwarciu okna edycji stylu. Kolor tła całej belki określony jest w kategorii Background zaś jej wysokość oraz wielkość marginesów edytujemy w kategorii Box.

W zasadzie zmiana kilku parametrów dostępnych w tych kategoriach pozwoli nam łatwo dostosować belkę do naszych potrzeb. Rozpocznijmy od tła i później koloru tekstu.

Oczywiście do prezentacji tła możemy wykorzystać dowolny kolor, jednak daleko lepiej prezentuje się belka o tle określonym na podstawie pliku graficznego. Taki zabieg pozwala nam łatwo wykorzystać dowolne przejścia tonalne lub fakturę tła.

Aby szybko zmienić kolor lub ogólniej to ujmując wygląd tła całej belki przechodzimy do kategorii Background. Jeśli zależy nam wyłącznie na zmianie koloru w sekcji Color wprowadzamy odpowiednie modyfikacje. W naszym przykładzie zastosowałem prosty element graficzny, który powtarzany przez całą szerokość belki pozwala na uzyskanie tła z typowym przejściem tonalnym. Aby skutecznie powielić plik graficzny w tle, nie zapomnijmy wybrać opcji Repeat X w polu Repeat.

W rezultacie niewielki plik graficzny (o szerokości około 30 pikseli) szczelnie wypełni tło belki nawigacyjnej panelu.

O ile to konieczne, możemy dowolnie modyfikować położenie tła. W tym celu warto przetestować działanie opcji Backgroung-position (X) oraz Background-position (Y). W wielu wypadkach daje to doskonałe rezultaty. Aby przetestować działanie wprowadzonych modyfikacji w oknie dokumentu, wystarczy skorzystać z przycisku Apply. Wprowadzone zmiany od razu widoczne są w oknie podglądu.

Uwaga!

Do budowy elementów tła często wykorzystywane są niewielkie elementy graficzne. Zwykle nadajemy im odpowiednią wysokość i szerokość 1 piksel. Tego typu wąski pasek jest wielokrotnie powtarzany na stronie dzięki użyciu właściwości Repeat X. Dziś, w dobie nieco szybszych łączy internetowych takie podejście nie wydaje się logicznie uzasadnione. Osobiście stosuję grafię o rozmiarze około 30 pikseli wysokości oraz 30 szerokości. Wielokrotne powtarzanie obiektu o szerokości 30 pikseli pozwala na tworzenie o trzydzieści razy mniej powtórzeń w naszej przeglądarce. Mimo że plik jest nico większy, jednak wpływa korzystnie na wydajność naszej przeglądarki, która musi powielić obraz tła zdecydowanie mniej razy.

Po zmianie kolorystyki lub ogólnego wyglądu tła, konieczna może być także edycja lub styl koloru tekstu. W tym celu przechodzimy do zakładki Type i w polu Color określamy odpowiedni kolor tekstu. Oczywiście w polach Font, Size, Sytle, weight możemy dokonać każdej niezbędnej edycji tekstu nagłówka. W naszym przypadku, nie było konieczności zmiany koloru tekstu. W nadrzędnym stylu BODY, określiłem bowiem wcześniej domyślny kolor wszystkich tekstów.

Aby powiększyć nieco marginesy i paddingi, przechodzimy do sekcji Box i wprowadzamy odpowiednie wartości w polach Padding Top, Bottom (tu zwykle jednakowe) oraz Left nieco większą oraz Margin.

Klasa . Accordion Panel Content odpowiada za podstawowe parametry rozwiniętego panelu. To tu możemy zmienić domyślną wysokość całego panelu. Modyfikując parametr height: 200px możemy sprawić, że aktywne okno będzie miała dowolną inną wysokość. W tym miejscu istotny jest także parametr o nazwie Overfolow: auto. On bowiem odpowiada za dołączenie paska przewijania w chwili, gdy zawartość modułu nie mieści się w zadanej wysokości panelu.

Jeśli zależy nam by rozwijany panel formatowany był w specjalny sposób. Klasa . Accordion Panel Content jest najlepszym miejscem, by wprowadzić odpowiednie modyfikacje. Podstawowe atrybuty tekstu modyfikujemy w kategorii Type, zaś kolor tła czy obramowania odpowiednio w kategoriach Background i Border. W naszym przykładzie, by lepiej dopasować cały moduł do mojej strony, zmieniłem tu wielkość tekstu

Klasy . Accordion PanelTabOpen oraz podobne . Accordion PanelTabHover, . Accordion PanelTabFocused odpowiadają za kolor belki widoczny po najechaniu myszką na jej obszar (Hover) lub po aktywowaniu jej (Focus). Jeśli wcześniej wykorzystaliśmy grafikę z obrazka, nie ma potrzeby modyfikować tym parametrów. Użyty plik graficzny i tak przysłania wprowadzone tu dane.

Gotowy moduł Accordion możemy testować w trybie Live View bezpośrednio w oknie roboczego dokumentu lub przede wszystkim w kilku popularnych przeglądarkach. Co ważne, nie ma problemów z poprawnym wyświetlaniem elementów Spry w żadnej testowanej przeglądarce. Co więcej, w każdej wyglądają one niemal identycznie. A mimo ciekawej funkcjonalności, wykorzystanie elementów Spry nie jest wcale trudnym zadaniem.