Drupal 6 - szybkie pisanie instrukcji z pomocą Zscreen i Drupala

Witam

Dziś nietypowa lekcja, którą przygotowałem tak naprawdę dla siebie, ale może komuś spodoba się pomysł i go wykorzysta (może nawet do tworzenia podobnych instrukcji do Drupala czy innego systemu?).

W warunkach standardowych proces pisania instrukcji "krok po kroku" i umieszczania jej na stronie wygląda tak, że wykonuję całą procedurę, którą chcę opisać, przy tej okazji łapię fragmenty ekranu (okienka, opcje, ustawienia), zapisuję je do plików z grafiką a następnie siadam do pisania lekcji. W trakcie pisania załączam "złapane" rysunki, a każdy załącznik osadzam w polu tekstowym z niewielką pomocą bueditor. W ten sposób powstała na przykład lekcja z adresu http://elimu.pl/node/76.

Od dawna miałem dużą awersję do takiego pisania instrukcji. Cała ta zabawa z zapisywaniem grafiki na dysk a potem ze wskazywaniem jej jako załącznik a potem z kopiowaniem adresu załącznika (który z przodu nie wiedzieć czemu zawiera często tab i enter), brrr!

Jednak wpadłem na pomysł jak diametralnie uprościć ten proces i teraz się z Wami podzielę tym co wymyśliłem.

Po pierwsze instalujemy świetny "łapacz ekranu", czyli ZScreen. Konfigurujemy go w taki sposób, aby po złapaniu ekranu wysyłał go na serwer, na przykład protokołem FTP:

image1

W moim wypadku jest to FTP, ale możemy też użyć innego - Zscreen obsługuje sporo popularnych usług typu hosting grafiki:

Możemy teraz sprawdzić czy Zscreen wrzuca poprawnie złapane rysunki - po każdym złapanym rysunku w okolicy zegarka systemowego pojawi się dymek z adresem (URL) do obrazka. W tym momencie zostaje on wpisany do schowka systemowego, a kliknięcie w dymek powinno dodatkowo otworzyć przeglądarkę i wyświetlić rysunek już ze zdalnego serwera. Zawsze też możemy sprawdzić co zostało wysłane (i gdzie) na zakładce "History":

Kiedy mamy już działający Zcreen możemy śmiało łapać ekrany a adresy obrazków podawać w treści naszych instrukcji.

Ja dodatkowo zainstalowałem sobie moduł Image Resize Filter, który po pobraniu i uruchomieniu należy dodatkowo dodać do używanego formatu danych, na przykład dla Full HTML:

a następnie skonfigurować:

Filtr ten robi dwie świetne rzeczy. Po pierwsze, kiedy podam adres obrazka (a mam go w schowku po każdym złapaniu programem Zscreen) i dodatkowo wstawię w znacznik IMG atrybut width bądź height, filtr ten wykryje taką sytuację i sam utworzy odpowiednio przeskalowany plik. Jest to ogromne ułatwienie - kiedy złapiemy jakiś bardzo szeroki fragment ekranu wystarczy podać szerokość (np. 450px) i filtr zmniejszy (proporcjonalnie) wymiary pliku graficznego:

Co więcej, ten zmniejszony plik zostanie utworzony na naszym serwerze. Takim działaniem możemy objąć wszystkie pliki do których podajemy adres i choć jeden wymiar w znaczniku IMG. Wystarczy w konfiguracji filtra zaznaczyć odpowiednią opcję - Resize images stored: On remote servers (note: this copies all remote images locally).

Zaletą tego ustawienia jest to, że wrzucając plik ze zdalnego serwera nie musimy się martwić, że za miesiąc czy rok nagle przestanie się on wyświetlać w naszym serwisie. Wszystkie obrazki jakie wstawiamy w treść będą tworzone jako pliki na naszym serwerze, zatem nie powstaną "martwe" obrazki.

AKTUALIZACJA - powyższe 2 akapity nie są w 100% prawdziwe. Otóż, kiedy wyczyścimy cache strony, lokalne kopie plików giną. Zostaną co prawda odtworzone podczas pierwszego wyświetlania treści z obrazkami z zewnątrz, jednak jeśli oryginały w międzyczasie wyparują to stracimy również je z naszej strony. Rozwiązaniem jest doinstalowanie modułu Get Image, który po włączeniu powoduje skopiowanie każdego obrazka z zewnętrznego serwera na nasz własny. Wtedy mamy pewność, że nie zostaniemy bez rysunków.

Z ciekawych ustawień Zsync można jeszcze polecić opcję otwarcia każdego złapanego rysunku w wybranym edytorze - w ten sposób możemy od razu go wzbogacić w jakieś strzałki, ramki czy opis:

Mam nadzieję, że ktoś skorzysta z mojej porady, mi zaoszczędziła już przy tym jednym artykule kilka minut pracy i uczyniła życie przyjemniejszym :).

Część Kursu: 
Drupal - Przepisy
5
Twoja ocena: None Średnia: 5 (1 vote)

Odpowiedzi

Faktycznie bardzo przydatne,

Faktycznie bardzo przydatne, przy dużej ilości zrzutów ekranowych i przygotowywaniu publikacji. Dzięki.

Prośba

Mam prośbę a zarazem propozycje na tematy kolejnych lekcji

Views Argumenty,Relacje(Powiązania)

Oraz jak zrobić taką ciekawą listę jak ty masz na stronie http://elimu.pl/kursy

Pozdrawiam i dziękuje za tutoriale
dexik

taki spis się banalnie robi

taki spis się banalnie robi za pomocą modułu vievs, przynajmniej ja sobie taki zrobiłem podobny, ale nie wiem jak zrobił, że ma pod konkretnymi linkami/tytułami takie tło zielonkawe

Każdy początek jest trudny