Przebieg pracy z prototypami

Dzięki połączeniu panelu Strony z innymi zaawansowanymi funkcjami programu Fireworks można szybko tworzyć interaktywne prototypy dla witryn internetowych i oprogramowania. Aby przekształcić ukończony prototyp w funkcjonalną witrynę internetową, wystarczy po prostu wyeksportować go do programu Adobe Flash®, Adobe Flex®, Adobe AIR™ lub Adobe Dreamweaver®.

Zobacz następujące artykuły w Centrum programistów Fireworks, przedstawiające porady na temat przebiegu pracy z prototypami:

Samouczek wideo poświęcony tworzeniu prototypów interfejsów aplikacji można obejrzeć na stronie internetowej www.adobe.com/go/lrvid4034_fw_pl.

Tworzenie stron

Utwórz odpowiednią liczbę stron lub ekranów dla początkowego projektu w panelu Strony. W miarę rozwoju projektu można dodawać lub odejmować strony.

Ułożenie typowych elementów projektu

Na obszarze roboczym umieść elementy projektu, które będą wspólne dla wielu stron, takie jak paski nawigacji czy obrazy tła. Do ich ustawienia można użyć funkcji Inteligentnych linii pomocniczych. Zastosowanie struktury układu opartej na CSS zapewnia maksymalną elastyczność (Zobacz Inteligentne linie pomocnicze i Tworzenie układów opartych na CSS).

Stosowanie wspólnych elementów na wielu stronach

Zastosowanie wspólnych typowych elementów projektu sprawia, że pojedyncza zmiana powoduje aktualizację wszystkich zawierających je stron. Użyj stron wzorcowej, aby współużytkować wszystkie zawarte w niej elementy, lub udostępnij warstwy w celu kopiowania podzbiorów elementów (zobacz Użycie strony wzorcowejUdostępnianie warstw)

Dodawanie niepowtarzalnych elementów do pojedynczych stron

Na każdej ze stron można umieścić niepowtarzalne elementy dekoracyjne i nawigacyjne oraz formularze. Panel Biblioteka wspólna zawiera szereg przycisków, pól tekstowych i wysuwanych menu, które przyspieszają proces projektowania. Symbole komponentów w folderach Flex Components, HTML, Mac, Win, Web & Application i Menu Bars zawierają właściwości, które można dostosować do poszczególnych instancji symboli. (zobacz Tworzenie i używanie symboli inteligentnych).

Symulowanie nawigacji użytkownika przy użyciu łączy

Obiekty internetowe, takie jak pasterki, punkty aktywne oraz przyciski nawigacji mogą łączyć ze sobą różne strony prototypu (zobacz Łącza do stron w dokumencie Fireworks).

Wyeksportuj zakończony, interaktywny prototyp

Program Fireworks oferuje kilka formatów wyjściowych dla prototypów, które zachowują łącza hipertekstowe i umożliwiają poruszanie się po stronach. Artykuły:

Tworzenie układów opartych na CSS

Można projektować układy oparte na CSS w pliku Fireworks, a następnie przekształcać je w strony HTML z regułami CSS, które replikują układy użytkownika. Układy oparte na CSS stanowią metodę zgodną ze standardami i zawierają kod kompatybilny z różnymi typami przeglądarek.

Samouczek wideo poświęcony tworzeniu układów stron HTML w oparciu o CSS można obejrzeć na stronie internetowej www.adobe.com/go/lrvid4035_fw_pl. Zobacz także następujące zasoby:

Informacje o układzie strony CSS

Program Fireworks umożliwia tworzenie stron i natychmiastowe eksportowanie kodu HTML i CSS dzięki mechanizmowi eksportu, który analizuje rozmieszczenie obiektów. Dodatkowo możliwa jest konfiguracja wyrównania strony oraz wskazanie powtarzalnego obrazu tła.

Do dyspozycji użytkownika pozostają elementy HTML, które znaleźć można w folderze HTML w Bibliotece wspólnej. Folder HTML zawiera elementy HTML, takie jak przyciski, rozwijane listy oraz pola tekstowe. Można edytować właściwości wspomnianych elementów za pomocą panelu Właściwości symbolu. Podczas przeciągania dowolnego formularza na stronę mechanizm eksportu wstawia znaczniki <form>, eksportując jednocześnie układ oparty na CSS.

Dowolny tekst, na jakim użytkownik umieścił plasterek, wyświetlany jest jako obrazek w wyeksportowanym kodzie HTML. Jeśli tekst ten ma być wyświetlany jako tekst, należy skorzystać ze składników HTML znajdujących się we Wspólnej bibliotece. Składniki HTML to między innymi nagłówki 1-6 oraz elementy łączące.

Zasady dotyczące układów opartych na CSS

Aby uzyskać zamierzone wyniki, podczas tworzenia układów opartych na CSS należy przestrzegać kilku zasad.

Zasada 1: Do eksportu tekstu należy używać prostokątów, a do eksportu obrazów używać należy plasterków.

Mechanizm eksportu eksportuje tekst umieszczony w prostokątach. Z uwagi na fakt, że eksportowane są wyłącznie obrazy zakryte plasterkami prostokątnymi, należy zakrywać obrazy takimi właśnie plasterkami. Plasterki te „informują” mechanizm eksportu o położeniu obrazów.

Zasada 2: Należy unikać nachodzenia na siebie obiektów

Mechanizm eksportu traktuje tekst, obrazy i prostokąty jako prostokątne bloki. Sprawdza on rozmiary i położenie tych obiektów, w celu określenia, w których logicznych wierszach i kolumnach układu je umieścić. Obiekty należy umieszczać ostrożnie, dbając o to, aby ich krawędzie na siebie nie nachodziły.

Zasada 3: Należy rozplanować układ wierszy i kolumn

Mechanizm eksportu wyszukuje przegród logicznych, w których umieścić można wyraźną linię podziału między obiektami lub grupami obiektów. Układy kolumn należy zamknąć w prostokącie, aby zapobiec wstawieniu przez mechanizm eksportu wiersza logicznego, który mógłby rozbić układ kolumn.

Zasada 4: Dokument należy postrzegać dwuwymiarowo

Podczas tworzenia strony należy używać prostokątów do zamykania obiektów, które mają być traktowane jako potomne prostokąta. Mechanizm eksportu wykrywa związki typu element macierzysty – potomek. Mechanizm eksportu przeszukuje elementy potomne pod kątem wierszy i kolumn logicznych, podobnie jak w Zasadzie 3.

Poza powyższymi zasadami obowiązują także następujące zalecenia:

  • Mechanizm eksportu eksportuje jedynie prostokąty pierwotne. Aby wyeksportować zaokrąglone narożniki prostokątów, należy umieścić nad nimi plasterki prostokątne.

  • Aby wyeksportować obrysy prostokątów, należy umieścić plasterki prostokątne nad prostokątami, które je zawierają.

  • Aby wyeksportować symbole, należy umieścić nad nimi plasterki prostokątne.

  • Aby wyeksportować filtry zastosowane dla tekstu lub prostokątów, należy umieścić nad nimi plasterki prostokątne.

Eksport układu CSS

Program Fireworks pozwala wyeksportować utworzone układy jako pliki oparte na CSS. Następnie można otworzyć te pliki oparte na CSS w programie Dreamweaver lub innym edytorze zgodnym z CSS i dokonać ich edycji.

  1. Wybierz polecenie Plik > Eksportuj.

  2. Z wyskakującego menu Eksportuj wybierz opcję CSS i obrazy.

  3. Kliknij Opcje, aby określić właściwości strony HTML.

  4. Kliknij opcję Przeglądaj, aby wybrać obraz tła i ustawić sposób nakładania obrazu tła:

    • Wybierz opcję Brak powtarzania, aby wyświetlić obraz tylko jeden raz.

    • Wybierz opcję Powtarzaj, aby powtarzać obraz (układać obok siebie) w poziomie i w pionie.

    • Wybierz opcję Powtórz-x, aby układać obraz obok siebie w poziomie.

    • Wybierz opcję Powtórz-y, aby układać obraz obok siebie w pionie.

  5. Wybierz wyrównanie strony w przeglądarce do lewej, do środka lub do prawej.

  6. Ustaw przewijanie załącznika jako „zablokowane” lub „przewijaj”.

  7. Kliknij przycisk OK, a następnie kliknij przycisk Zapisz.

Tworzenie demonstracji dokumentu

Możesz utworzyć demonstrację dokumentu programu Fireworks, nad którym pracujesz. Demonstracja jest otwierana w przeglądarce w celu przedstawienia funkcji i umożliwia przechodzenie między stronami.

  1. Wybierz polecenie Polecenia > Demo bieżący dokument.

  2. Wybierz strony, dla których chcesz utworzyć demonstrację, a następnie kliknij opcję Utwórz demo.

  3. Wybierz folder i kliknij przycisk Otwórz.

Tworzenie prototypów aplikacji Flex

Proces tworzenia prototypów aplikacji Flex przypomina przebieg pracy dla witryn internetowych i interfejsów oprogramowania. (Zobacz Przebieg pracy z prototypami). W programie Fireworks można przeciągać komponenty Flex na obszar roboczy, określać ich właściwości i eksportować wynikowy interfejs użytkownika do formatu MXML. Następnie można dostosować taki interfejs użytkownika w programie Flex Builder.

Tworzenie interfejsu użytkownika Flex

Używając panelu Strony, utwórz odpowiednią liczbę ekranów interfejsu dla początkowego projektu.

Wstawianie komponentów projektu Flex do układu

W obszarze roboczym wstaw komponenty Flex z folderu Flex w panelu Biblioteka ogólna. Te symbole komponentów współdziałają z funkcją eksportu do formatu MXML, aby zapewnić uzyskanie oczekiwanych wyników. Podczas eksportowania dokumentu do formatu MXML każdy z tych symboli jest przekształcany w odpowiednie znaczniki MXML. Obiekty, które nie zostały rozpoznane jako komponenty Flex, są eksportowane jako bitmapy połączone z kodem MXML poprzez znacznik <mx:Image>. Patrz Tworzenie i używanie symboli komponentów.

Uwaga:

Podczas edycji komponentu projektu Flex w programie Fireworks można skopiować zmodyfikowany kod XML do projektu Flex. Oszczędza to czas w przypadku konieczności replikacji zachowania zmodyfikowanego komponentu w projekcie.

Symbole Kursor, PasekPrzewijania, Karta i Podpowiedź są ignorowane podczas wyjścia MXML, ponieważ te komponenty nie są tłumaczone bezpośrednio z programu Fireworks do MXML. Na przykład symbol PasekPrzewijania pojawia się automatycznie w instancjach kontenera Flex, jeśli ich zawartość może być przewijana. W programie Fireworks te symbole służą po prostu do wskazania sposobu działania części projektu interfejsu.

Uwaga:

Plasterki obrazów, najazdy i punkty aktywne mają zastosowanie tylko do prototypów opartych na kodzie HTML. Należy unikać tych obiektów internetowych podczas tworzenia prototypów Flex.

Stosowanie wspólnych komponentów Flex na wielu stronach

Zastosowanie wspólnego komponentu Flex na wielu stronach sprawia, że pojedyncza zmiana powoduje aktualizację wszystkich stron (lub ekranów) zawierających ten element. Możesz użyć strony wzorcowej, aby współużytkować wszystkie zawarte na niej komponenty Flex, lub współużytkować warstwy w celu kopiowania podzbiorów komponentów. (zobacz Użycie strony wzorcowejUdostępnianie warstw)

Określanie właściwości komponentów Flex

W panelu Właściwości symbolu (Okno > Właściwości symbolu) określ właściwości i zdarzenia dla każdego komponentu Flex, który został wstawiony na obszar roboczy.

Eksport układu Flex do MXML

Wyeksportuj układ interfejsu użytkownika Flex i otwórz wynikowy plik MXML w programie Flex. Program Fireworks eksportuje wymagany kod MXML, zachowując wszystkie style i pozycjonowanie bezwzględne. Programiści korzystający z programu Flex mogą używać tego interfejsu bez konieczności ponownego tworzenia układu w programie Flex.

Edycja właściwości komponentów Flex

Możesz edytować właściwości i zdarzenia komponentów Flex w panelu Właściwości symbolu.

  1. Wybierz komponent Flex w obszarze roboczym.

  2. Otwórz panel Właściwości symbolu (Okno > Właściwości symbolu).

  3. Ustaw właściwości i zdarzenia komponentu w panelu Właściwości symbolu.

Eksport dokumentu Fireworks do MXML

Program Fireworks pomaga w projektowaniu układów rozbudowanych aplikacji internetowych, umożliwiając eksportowanie zasobów z ogólnej biblioteki jako znanych komponentów w celu użycia w programie Adobe Flex Builder. Program Fireworks eksportuje wymagany kod Flex (MXML), zachowując style i pozycjonowanie bezwzględne.

Po sfinalizowaniu prototypu aplikacji Flex należy go wyeksportować do MXML w celu dalszej edycji w programie Flex Builder. Prototyp w widoku Projekt ma identyczny wygląd, jak jego odpowiednik w programie Fireworks, z wyjątkiem pewnych komponentów, takich jak kursory i paski przewijania, które nie są eksportowane.

  1. Wybierz polecenie Plik > Eksportuj.

  2. Z wyskakującego menu Eksportuj wybierz opcję MXML i obrazy.

  3. Wybierz opcję Wyślij obrazy do podfolderu, jeśli chcesz zapisać obrazki w innym folderze niż kod MXML.

  4. Aby wyeksportować tylko aktualnie wybraną stronę, wybierz opcję Tylko bieżąca strona.

  5. Kliknij Zapisz, aby zakończyć eksportowanie.

    Wszystkie obrazy powiązane z prototypem są eksportowane do folderu obrazów. Ponadto tworzone są także obrazy pełnych stron MXML wraz z innymi plikami obrazów. Strony MXML nie wymagają tych obrazów podglądu i można je usunąć.

Tworzenie i eksport karnacji Flex

Możesz zmienić wygląd komponentów Flex w programie Fireworks, a następnie wyeksportować je w celu użycia podczas tworzenia witryn internetowych Flex i interfejsów aplikacji.

Komponenty Flex karnacji

Możesz utworzyć karnacje dla różnego rodzaju komponentów Flex w oparciu o szablony karnacji Flex i edytować je w programie Fireworks.

  1. Wybierz polecenie Polecenia > Tworzenie skórek Flex > Nowa skórka Flex.

  2. Wykonaj jedną z poniższych czynności:

    • Aby utworzyć karnacje Flex dla wszystkich dostępnych komponentów, wybierz polecenie Wiele komponentów.

      Program Fireworks tworzy pojedynczy dokument zawierający wszystkie dostępne komponenty Flex.

    • Aby wybrać komponenty, dla których chcesz utworzyć karnacje, wybierz polecenie Określone komponenty.

      Wybierz tylko te komponenty, do których dołączono określony styl, lub wszystkie instancje danego komponentu.

  3. Kliknij OK.

Eksport karnacji Flex

  1. Wybierz polecenie Polecenia > Tworzenie skórek Flex > Eksportuj skórkę Flex.

  2. Wskaż folder, w którym chcesz umieścić dokument programu Fireworks i kliknij przycisk Otwórz.

Ograniczenia eksportu MXML

Przed użyciem funkcji eksportu Flex MXML należy poznać jej możliwości i ograniczenia:

Eksport MXML nie zmienia wyglądu komponentów

Eksportowanie do MXML nie powoduje utworzenia skórek dla komponentów w programie Flex, nawet jeśli zmodyfikowano je w programie Fireworks. Eksport MXML powoduje po prostu wygenerowanie dokumentów MXML w celu użycia w programie Flex. Takie dokumenty mogą także zawierać połączone obrazy dla obiektów programu Fireworks, których nie można przekonwertować na znaczniki MXML. Obrazy te są dodawane do dokumentu MXML przy użyciu znaczników <mx:Image>.

Eksport MXML ignoruje plasterki

Ponieważ funkcja eksportu MXML została zaprojektowana w celu generowania dokumentów opartych na znacznikach, które są przeznaczone do użycia z programem Flex, plasterki nie są uwzględniane podczas tworzenia obrazów lub komórek tabeli. Kiedy funkcja eksportu MXML tworzy obrazy, używa ustawień optymalizacji dokumentu w celu określenia formatu obrazu i metody kompresji.

Właściwości MXML są ograniczone do właściwości inteligentnych symboli

Funkcja eksportu MXML opiera właściwości znacznika MXML na komponencie Flex w programie Fireworks. Program Fireworks zapewnia podzbiór komponentów Flex z ograniczoną liczbą właściwości.

Style są osadzane

Właściwości rozpoznane jako style są oddzielane od tworzonych znaczników MXML, ale zostają zachowane w tym samym dokumencie MXML wewnątrz znacznika <mx:Style>. Program Fireworks nie może zdefiniować stylów w zewnętrznym pliku CSS.

Ramki nie są obsługiwane

Podczas tworzenia projektów i układów dla wyjścia MXML nie należy używać ramek. Aby uzyskać różne projekty w pojedynczym dokumencie, należy użyć stron.

Prototypy aplikacji Adobe AIR

Program Adobe® AIR™ for Fireworks umożliwia przekształcenie prototypu z programu Fireworks w aplikację pulpitu. Na przykład niektóre strony prototypu wchodzą w interakcję ze sobą, aby wyświetlić dane. Możesz użyć programu Adobe AIR w celu spakowania tego zbioru stron w małą aplikację, którą można zainstalować na komputerze użytkownika. Gdy użytkownik uruchomi aplikację na swoim pulpicie, po jej załadowaniu, we własnym oknie aplikacji, które będzie niezależne od przeglądarki, wyświetlony zostanie prototyp. Użytkownicy mogą następnie przeglądać prototyp lokalnie na swoich komputerach bez połączenia internetowego.

Artykuł Ethana Eismanna na temat Adobe AIR oraz informacje o marce: http://www.adobe.com/go/learn_fw_airexperiencebrand_pl.

Dodawanie zdarzeń myszy Adobe AIR

Można dodawać predefiniowane zdarzenia myszy Adobe AIR do obiektów w dokumencie. W programie Fireworks dostępne są cztery predefiniowane zdarzenia myszy: zamknij okno, przeciągnij okno, maksymalizuj okno oraz minimalizuj okno.

  1. Zaznacz na obszarze roboczym obiekty, którym chcesz przypisać zachowania zdarzeń myszy.

  2. Wybierz Polecenia > Zdarzenia myszy AIR i wybierz zdarzenie.

Podgląd aplikacji Adobe AIR

Można obejrzeć podgląd aplikacji Adobe AIR bez konieczności ustawiania jakichkolwiek jej parametrów.

  1. Wybierz Polecenia > Utwórz paczkę AIR i kliknij przycisk Podgląd.

Tworzenie aplikacji Adobe AIR

  1. Wybierz polecenie Polecenia > Utwórz paczkę AIR i ustaw następujące opcje:

    Nazwa aplikacji

    Umożliwia określenie nazwy, która jest wyświetlana na ekranie instalacji podczas instalowania aplikacji przez użytkownika. Rozszerzenie domyślnie określa nazwę serwisu Fireworks.

    ID aplikacji

    Wprowadź unikalny identyfikator (ID) aplikacji. W identyfikatorze nie należy używać spacji ani znaków specjalnych. Jedyne poprawne znaki to: 0-9, a-z, A-Z, . (kropka) i - (łącznik). To ustawienie jest wymagane.

    Wersja

    Umożliwia określenie numeru wersji aplikacji. To ustawienie jest wymagane.

    Folder menu programu

    Umożliwia wskazanie folderu w menu Start systemu Windows, w którym zostanie utworzony skrót do aplikacji. (Nie dotyczy systemu Mac OS)

    Opis

    Umożliwia dodanie opisu aplikacji, który będzie wyświetlany podczas instalowania aplikacji przez użytkownika.

    Prawa autorskie

    Umożliwia wprowadzenie informacji o prawach autorskich, które są wyświetlane w oknie Informacje aplikacji Adobe AIR zainstalowanych na komputerze Macintosh. Informacje te nie są używane dla aplikacji zainstalowanych w systemie Windows.

    Zawartość paczki

    Zaznacz opcję Bieżący dokument, aby automatycznie wybierać folder, z którego dołączane są pliki.

    Treści źródłowe

    Kliknij przycisk Przeglądaj, aby wyznaczyć stronę wyświetlaną jako treść źródłowa. Jeżeli zaznaczono opcję Bieżący dokument, treści źródłowe są ustawiane automatycznie.

    Dołączone pliki

    Umożliwia określenie, które pliki lub foldery mają zostać dołączone do aplikacji. Można dodać pliki HTML i CSS, pliki obrazów i pliki bibliotek JavaScript. Kliknij przycisk plus (+), aby dodać pliki lub ikonę Folder, aby dodać foldery. Aby usunąć z listy plik lub folder, zaznacz plik lub folder i kliknij przycisk minus (-). Pliki lub foldery zaznaczone do dołączenia w paczce Adobe AIR muszą znajdować się w głównym katalogu treści źródłowych.

    Systemowy chrom i Przezroczysty

    Umożliwia określenie stylu okna (lub chromu), który będzie użyty podczas uruchamiania aplikacji przez użytkowników na ich komputerach. Systemowy chrom otacza aplikację standardowym oknem kontrolnym systemu operacyjnego. Ustawienie Przezroczysty chrom eliminuje standardowy chrom systemowy i umożliwia utworzenie własnego stylu chromu dla aplikacji. Dzięki przezroczystości możliwe jest tworzenie okien aplikacji, które nie mają prostokątnego kształtu.

    Szerokość i wysokość

    Umożliwia określenie wymiarów okna aplikacji po otwarciu (w pikselach).

    Wybierz obrazy ikon

    Kliknij, aby wybrać niestandardowe obrazy jako ikony aplikacji. Wybierz folder dla każdego z rozmiarów ikon oraz plik obrazu, jaki ma zostać użyty. Na potrzeby obrazów ikon aplikacji obsługiwane są jedynie pliki w formacie PNG.

    Uwaga:

    Wybrane obrazy niestandardowe muszą znajdować się w serwisie aplikacji, a ich ścieżki muszą być względne wobec folderu głównego.

    Podpis cyfrowy

    Kliknij przycisk Ustaw, aby podpisać aplikację za pomocą podpisu cyfrowego. To ustawienie jest wymagane. Więcej informacji można znaleźć w poniższej sekcji.

    Plik pakietu

    Umożliwia wskazanie folderu, w którym zapisany ma być plik instalatora (plik .air) nowej aplikacji. Lokalizacja domyślna to folder główny serwisu. Kliknij przycisk Przeglądaj, aby wybrać inną lokalizację. Domyślna nazwa pliku jest oparta na nazwie serwisu z rozszerzeniem .air. To ustawienie jest wymagane.

Podpisywanie aplikacji Adobe AIR przy użyciu certyfikatu cyfrowego

Podpis cyfrowy stanowi gwarancję, że kod aplikacji nie został zmodyfikowany lub uszkodzony od momentu utworzenia go przez autora oprogramowania. Wszystkie aplikacje Adobe AIR wymagają podpisu cyfrowego, a ich instalacja nie jest możliwa bez takiego podpisu.

  1. W oknie dialogowym Utwórz paczkę AIR, obok opcji Podpis cyfrowy, kliknij przycisk Ustaw.

  2. W oknie dialogowym Podpis cyfrowy wykonaj jedną z następujących czynności:

    • Aby podpisać aplikację przy użyciu wcześniej zakupionego certyfikatu cyfrowego, kliknij przycisk Przeglądaj, wybierz certyfikat, wprowadź powiązane hasło i kliknij przycisk OK.

    • Aby utworzyć samopodpisany certyfikat cyfrowy, kliknij przycisk Utwórz i wypełnij okno dialogowe. Opcja Typ klucza certyfikatu odnosi się do poziomu bezpieczeństwa certyfikatu: Opcja 1024-RSA używa klucza 1024-bitowego (mniej bezpiecznego), natomiast opcja 2048-RSA używa klucza 2048-bitowego (bardziej bezpiecznego). Po zakończeniu kliknij przycisk Utwórz. Następnie wprowadź powiązane hasło w oknie dialogowym Podpis cyfrowy i kliknij przycisk OK.

      Uwaga: na komputerze musisz mieć zainstalowane środowisko Java® Runtime Environment (JRE).

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online