Coraz więcej narzędzi, także tych przydatnych do tworzenia stron, jest tworzonych jako aplikacje webowe. Trend ten jest widoczny już od kilku lat. Jest spowodowany głównie możliwościami, jakie zaczęły oferować frameworki JavaScript, umożliwiają one bowiem tworzenie wydajnych serwisów internetowych. Dzięki nim możemy być webmasterem czy programistą bez instalowania rozległych środowisk. I pracować wszędzie tam, gdzie jest sieć. Ekspert pokaże, jak wykorzystać jedno z tego typu narzędzi do zaprojektowania interfejsu dla serwisu internetowego.

Prototypowanie wyglądu i funkcjonalności

Jednym z elementów pracy webmastera jest projektowanie interfejsów. Jest to pierwszy etap pracy związany z budowaniem każdego profesjonalnego serwisu internetowego. W trakcie jego trwania określa się rozmieszczenie elementów na stronie i pracuje się nad jej ogólnym wyglądem. Ekspert pokaże, jak za pomocą serwisu JustProto zaprojektować stronę przeglądania galerii internetowej.

1. Na początku należy się zarejestrować. W serwisie jest do dyspozycji kilka planów taryfowych, w tym jeden zupełnie darmowy, z którego skorzystamy. Otwieramy stronę www.justproto.com/pl/signup/free, następnie uzupełniamy formularz, podając imię, nazwisko, e-mail, nazwę użytkownika i hasło.

Wybieramy także nazwę dla swojego serwisu. Na koniec potwierdzamy wprowadzone dane.

2. Po otworzeniu się strony informującej o założeniu konta, przechodzimy na witrynę, której adres zarezerwowaliśmy, i logujemy się z danymi, które podaliśmy. Następnie, w celu zainicjowania nowego projektu, klikamy na przycisk Utwórz nowy projekt. Spowoduje to otwarcie się formatki, w której uzupełniamy nazwę i opis tworzonego prototypu. Po podaniu danych klikamy na Zapisz.

3. Spowoduje to akcję uruchomienia się podstawowej strony aplikacji webowej, na której będziemy tworzyć projekt. W lewej części okna znajduje się lista katalogów z tworzonymi stronami.

Natomiast poniżej umieszczony został panel z najbardziej popularnymi w projektowaniu elementami, które można umieszczać na formatce (to one interesują nas najbardziej).

4. Do naszego projektu przydadzą się takie elementy, jak Pole (2 szt.), Zdjęcie, Przycisk (5 szt.), Etykieta (2 szt.), SelectList i Tekst. Każdy z nich dodajemy do strony poprzez kliknięcie na niego i przeciągnięcie w dowolnie wybrane miejsce. Co ważne, każdy z elementów ma swoje właściwości, na przykład element pole, który można dostosowywać i modyfikować. Są one wyświetlane po prawej stronie okna.

5. Ostateczne ułożenie elementów należy wyłącznie od gustu webmastera, jednak projekt może wyglądać na przykład tak.

W celu zmiany nazwy dodawanych elementów, na przykład przycisków czy etykiet, najłatwiej jest kliknąć na element dwukrotnie i wpisać wybrane dane. Z kolei takie elementy jak kolory zmieniamy w polu Właściwości w sekcji Tło.

6. Co ważne z punktu widzenia webmastera, za pomocą JustProto można stworzyć również złożony projekt, w którym znajduje się wiele połączonych ze sobą podstron. W tym celu należy korzystać z przycisków Dodaj i Powiel. Różne strony możemy linkować pomiędzy sobą na przykład za pomocą zdarzeń przycisków. Po zaznaczeniu wybranego z nich w polu Właściwości odnajdujemy sekcję Zdarzenia i klikamy na pole po kliknięciu idź do | brak. W formatce, która się otworzy, wybieramy, do jakiej strony w prototypie ma prowadzić zdarzenie kliknięcia na przycisk.

Na koniec potwierdzamy konfigurację, klikając na OK. Po zakończeniu pracy możemy kliknąć na przycisk Podgląd, co spowoduje otwarcie okna przeglądarki z wygenerowaną stroną.

Krótkie kody JavaScript

W wielu przypadkach nieocenione są krótkie tipsy pozwalające szybko osiągnąć zamierzony cel. Poniżej Ekspert prezentuje trzy skrypty w JavaScript. Jeden pozwalający na ustawienie nowej strony domyślnej, kolejny przekierowujący zapytanie przeglądarki na inną stronę i ostatni wyświetlający w oknie JavaScript dowolną informację. Przydadzą się one na każdej z nowo tworzonych witryn.

Wróć do artykułu:

• Narzędzia webmastera

_{Fot. Serknor | Dreamstime.com}