Adobe Spark – prosta strona internetowa (cz.2)

W pierwszej części artykułu poświęconego aplikacji Adobe Spark zająłem się tworzeniem grafik. Przypomnę, że aplikacja oferuje możliwość szybkiego, łatwego i bezpłatnego wykonania szeregu projektów graficznych, ze szczególnym ukierunkowaniem na wizualne treści, które umieszczamy na serwisach społecznościowych. W pakiecie Spark istnieje również możliwość wykonania prostej “strony internetowej”. I o tym w dalszej części artykułu.

Strona internetowa (?)

Adobe w odniesieniu do tej usługi używa pojęcia “page”, ale produkt, jaki możemy stworzyć w niewielkim stopniu przypomina to, w jaki sposób pojmujemy stronę internetową. W moim odczuciu jest to bardziej “przewijalna” prezentacja. Ot, po prostu powstaje jednostronicowa, przewijana witryna, którą … łatwo jest stworzyć i wygląda bardzo estetycznie. Jeśli ktoś nie chce lub nie ma potrzeby bawienia się bardziej zaawansowanym edytorem (choćby google’owskim, o Joomli nie wspomnę) stron www, “wyklika” prostą stronę internetową z materiałem edukacyjnym, którą następnie można będzie udostępnić uczniom. 

Pierwsze kroki

 Ogólne zasady poruszania się po Sparku opisywałem w poprzednim artykule. Przejdźmy więc do konkretów i tworzenie własnej strony zacznijmy po prostu od kliknięcia na ikonkę “+” a następnie – po przewinięciu całego ekranu – u dołu strony wybieramy “Create a web page”.

Po dokonaniu tego wyboru przeniesieni zostaniemy do następnego ekranu

i tutaj możemy zacząć właściwą pracę nad budową strony.

Ja, kreator stron

Już na wstępie warto zauważyć,  że Spark prowadzi nas “za rączkę” kreowaniu strony: wpisujemy więc tytuł strony (w moim przypadku będą to Krucjaty, temat z klasy drugiej Liceum Ogólnokształcącego, poziom rozszerzony) i dodajemy zdjęcie. W mgnieniu oka mamy więc początek naszej “strony”

i od razu, metodą klikania, możemy modyfikować jej wygląd:

Działa tu podobny mechanizm jak w przypadku tworzenia grafik. Program w prosty sposób pozwala tworzyć nam w czasie rzeczywistym alternatywne wyglądy projektu. To duży plus! 

Przewijamy, zgodnie z instrukcją (“Scroll to start writing your story”) w dół i od razu pokazuje się podręczny kreator dalszych czynności:

Dalszy proces budowania strony przebiegać będzie następująco: postaram się użyć każdego z dostępnych narzędzi, by pokazać w jaki sposób można je wykorzystać. Ucierpi na tym z pewnością spójność konstrukcji strony, ale to w tym momencie sprawa drugorzędna. Nie będę również koncentrował się nad samą treścią strony. Nadrzędnym celem niech pozostanie poznanie funkcji Adobe Spark

Wstawiamy zdjęcia, teksty a nawet linki

Tę część dalszego tworzenia strony zaczniemy od zdefiniowania pojęcia “krucjata”. Na początek dodaję zdjęcie (ilustracyjnie) z obrazem przedstawiającym synod w Clermont. Sekwencja czynności: “Upload photo”, wybór zdjęcia a następnie wybór trybu wyświetlania zdjęcia na stronie:

Niżej dodajemy nagłówek sekcji “Krucjata – definicja pojęcia”

I ponownie używając ikonki “+” dodajemy niżej tekst, używając narzędzi formatowania – justowanie, wypunktowanie, pogrubienie. Według własnej koncepcji stylistycznej

W każdej chwili możemy podejrzeć, jak wygląda gotowa strona, klikając “Preview”, w górnej części ekranu.

Dodamy teraz odsyłacz do zasobów zewnętrznych. Po raz kolejny klikamy na “+” i wybieramy opcję “button”. Wstawimy odsyłacz do hasła “Krucjaty” na Wikipedii.

Linkować możemy – i to clou tworzenia stron internetowych – w obrębie wpisywanego tekstu. W kolejnej sekcji – “Geneza krucjat” – dodaję link do mapy przedstawiającej Ziemię Świętą w Google Earth (o Earth czytaj więcej tu)

W innym miejscu linkujemy do hasła Aleksy I Komnen na Wikipedii

Kolejną opcją jakiej użyjemy będzie “Glideshow”. Klikamy “+” i wybieramy wspomnianą funkcję. Pozwala ona dodawać nowe treści na tle przewijających się w tle obrazów. Jak to zrobić tym razem pokażę na krótkim filmiku:

Dwie następne opcje: “Split layout” i “Photo grid” dadzą nam możliwość wprowadzenia kolejnych materiałów w innym układzie szablony, co uatrakcyjni wygląd strony. Split layout pozwala podzielić ekran na dwie części: po jednej (położenie można zmieniać) zdjęcie, po drugiej pozostałe treści. Natomiast z Photo grid dodamy pakiet zdjęć, ułożonych w collage. Instrukcja obsługi na kolejnym filmie:

Pora się pochwalić stroną

Kiedy strona jest gotowa, możemy ją udostępnić: w serwisie Adobe Spark, gdzie w galerii będzie dostępna dla innych użytkowników, bądź też linkując do niej za pośrednictwem Facebooka, bloga, strony internetowej. Niestety, nie udało mi się osadzić kodu embed w WordPressie (?). Stąd też tylko link

https://spark.adobe.com/page/wxBFMcySeHHnz/ 

Bezpośrednio z Adobe Spark można natomiast umieścić zrobioną stronę w Google Classroom, co z pewnością ucieszy korzystających z tego serwisu edukacyjnego. Kolejny filmik pokazuje cały proces udostępniania strony:

Ważne! Strona, którą udostępniłem nie jest kompletna. Fragmenty, które w niej występują, powstały na potrzeby instruktażu obsługi programu. 

Koniec i … adobe

A dobe jest w porządku 🙂 Podobnie jak i w przypadku graficznej części aplikacji tworzenie “stron” (w zasadzie powinno być napisane w l. pojedynczej – strony) przebiega “gładko”, szybko i nie wymaga posiadania żadnej wiedzy informatycznej. Prosty i szybki jest również proces udostępniania gotowej strony. W trakcie pracy szybko zauważycie jak ubogie są możliwości formatowania i edytowania treści (zmiana szablonu jest dostępna w wersji premium). Mimo to tę formę “strono – prezentacji” warto polecić. To co w ostatecznym rezultacie powstaje jest atrakcyjne dla oka i nie przeraża czasem, jaki potrzebny jest w przypadku konieczności wykonania “prawdziwej” strony internetowej, czy też projektowego bloga. Uczniowie mogą wykonywać projekty wspólnie jeśli założą grupowe konto (na wspólne hasło), bo możliwości – jak w przypadku google – pracy w trybie współpracy nie zauważyłem.  Zauważyłem jeszcze jedną ciekawą rzecz: na stronach, które udostępnia w swojej galerii Adobe Spark, praktycznie nie występują hiperłącza w tekście. To jeszcze bardziej pogłębia wrażenie, że mamy do czynienia z prezentacją, a nie pełnokrwistą stroną internetową. Przypomnę, więc, że linkować możemy w Adobe Spark i to przynajmniej na dwa sposoby. Co w instrukcjach, mam nadzieję, było widoczne.

Pozdrawiam
Rafał Wójcik
Pan Tikczer

Autor: Administrator

Nauczyciel historii i wos-u. Pasjonat nowoczesnych technologii.