Skip to main content

Jak używać skrótów klawiszowych w szablonach z WCAG?

 wcag-short-keyboard

 

Jeśli obserwujesz nasze działania, zapewne słyszałeś już o przedsięwzięciu, w którym bierzemy udział. Stworzyliśmy kilka szablonów spełniających wymogi WCAG. Oznacza to, że osoby niepełnosprawne, czy też wykluczone cyfrowo mają możliwość, by wygodnie korzystać ze stron internetowych zbudowanych na gruncie zasad dostępności. Trzeba przyznać, że jest to trudna sprawa, ponieważ zmiany nie dotyczą jedynie templatki, ale także powiązanych z nią dodatków. Ściśle współpracujemy z DJ-Extensions, którzy przystosowali je do wymogów WCAG.

Więcej…Jak używać skrótów klawiszowych w szablonach z WCAG?

Zmiana kolorów w szablonie JM Services - tłumaczenie na język polski.

Przygotowaliśmy krótką informację jak zamienić język angielski na język polski w części szablonu JM Services odpowiadającej za zmianę kolorów.

2016-05-30 11-26-37

Interesujące nas pliki znajdują się w folderze szablonu. Otwieramy folder JM Services a następnie folder "Language"

2016-05-30 1250

Widoczny tam folder "en-GB" kopiujemy z całą zawartośćią i zmieniamy jego nazwę na "pl-PL". Efektem powinny być
dwa katalogi w folderze "language": "en-GB" oraz "pl-PL".

Po otwarciu nowego folderu ("pl-PL"), należy zamienić w nazwach plików przedrostek "en-GB" na "pl-PL".

Tutaj znajdziesz załączony plik pl.PL.tpl_jm-services.ini ,który należy skopiować do stworzonego wcześniej katalogu.

W razie potrzeby edycji pliku pl.PL.tpl_jm-services.ini należy pamiętać że przy zapisywaniu pliku kodowanie było ustawione jako "utf-8".

Jak łatwo zmodyfikować plasterki PSD?

Kilka lat temu efekty tła takie jak gradienty, zaokrąglone narożniki, kształty i cienie byliśmy w stanie zrobić ze zdjęć wyciętych z jednego projektu PSD. Musieliśmy stworzyć piramidę kodu w celu osiągnięcia pożądanego rezultatu w szablonie.

Obecnie, za pomocą stylów CSS3 można osiągnąć ten sam efekt, optymalizując kod źródłowy szablonu i upraszczając pracę.

Co to są plasterki?

Każdy z najnowszych szablonów Joomla zawiera plik PSD z plasterkami. Pozwala on na łatwą modyfikację obrazków znajdujących się w szablonie. Oznacza to, że każdy obraz użyty w szablonie jest dostępny jako warstwa w pliku PSD.

Po modyfikacji warstwy, obraz jest zapisany z tymi samymi wymiarami i tym samym rozszerzeniem pliku jak obraz, który został używany w szablonie. Warto wspomnieć, że inne elementy, takie jak banery i ikony, których używamy na stronie demonstracyjnej są również dostępne w postaci plików PSD.

Jak modyfikować plasterki?

Na początku należy zainstalować oprogramowanie, umożliwiające otwieranie i modyfikację plików psd, na przykład GIMP (darmowy) lub Adobe Photoshop.
W tym tutorialu będziemy używać Adobe Photoshop CS6 i pliku psd z plasterkami dla szablonu Joomla 3.x JM School Tools
Załóżmy, że chcesz zmienić niebieską wersję kolorystyczną na inną.

Wiele elementów szablonu zakodowaliśmy za pomocą stylów CSS3, należy więc nadpisać style w plikach CSS (dla Joomla 2.5) lub w plikach LESS (Joomla 3.x)
Tu jednak skupimy się na modyfikacji obrazków w tle. Obrazki dla niebieskiej wersji kolorystycznej znajdują się lokalizacji: templates/jm-school-tools/images/style-4

 

alt

 

Otwórzmy plik slices.psd
Po prawej stronie znajdziesz grupy i warstwy. Zostaw widoczną tylko niebieską grupę, która zawiera plasterki potrzebne w naszym przypadku.

 

alt

 

Teraz kliknij prawym przyciskiem myszy na warstwę, którą chcesz zmodyfikować, a pojawi się rozwijane menu. Wybierz Style warstwy-> nałożenie koloru

 

alt

 

Kliknij pole z kolorem:

 

alt

 

Wybierz kolor i kliknij “OK”. Można zauważyć, że warstwa zmieniła kolor.

 

alt

 

Powtórz tę czynność dla wszystkich pozostałych warstw, które chcesz zmodyfikować.
Gdy zmiany zostaną wprowadzone, możesz zapisać plasterki jako obrazki. Idź do Plik-> Zapisz dla internetu i urządzeń. Zobaczysz podobny screen. Wybierz narzędzie do zaznaczania plasterków i zaznacz te, które chcesz zapisać jako obrazy.

 

alt

 

Kliknij przycisk Zapisz. Zobacz, jak prezentują się nasze nowe obrazy:

 

alt

 

Jak widzisz, zapisane obrazy mają tę samą nazwę jak w templatce. Wszystko co musisz teraz zrobić to przenieść wygenerowane obrazy do folderu images/style4 nadpisując obecne.

Gratulacje! Zmodyfikowałeś obrazy w swojej templatce!

Jak umieścić Adsense i banery w szablonach Joomla 3.x?

joomla-adsense-banner

 

Każdy użytkownik Joomla może ustawić na stronie własne banery graficzne, jak i banery Adsense. Przydaje się to, gdy chcemy czerpać korzyści finansowe z ogłoszeń zamieszczanych w serwisie. W tym celu należy zrobić kilka rzeczy. W tym tutorialu pokażemy Ci, jak skonfigurować je poprawnie.

 

Google AdSense

Jeśli nie masz konta Google, załóż je.

Krok 1: Zacznij z Google AdSense

Żeby zarejestrować się do systemu Google AdSense, kliknij w ten link https://www.google.com/adsense/signup

  1. Wybierz swoje konto lub załóż nowe, jeśli jeszcze go nie posiadasz.

     

    joomla-adsense-banner

     

  2. Wpisz adres URL witryny i wybierz język treści na stronie.

     

    joomla-adsense-banner

     

  3. Przeczytaj Warunki Google AdSense i zasady programu.
  4. Kolejnym krokiem jest złożenie wniosku AdSense. Wypełnij wszystkie pola formularza i kliknij przycisk Prześlij moje zgłoszenie.

     

    joomla-adsense-banner

     

  5. Jeśli zrobiłeś wszystko poprawnie, to przejdź do strony z podziękowaniem za zgłoszenie strony w AdSense. Zobaczysz tam informację, że w ciągu tygodnia od rejestracji otrzymasz wiadomość na adres mailowy powiązany z aplikacją na temat stanu konta.
  6. Po otrzymaniu wiadomości e-mail dotyczącej dołączenia do Google AdStensie, wejdź w link zamieszczony w wiadomości.
  7. Jesteś teraz na stronie Google AdSense online - warunki korzystania z usługi. Przeczytaj ten dokument. W końcowym fragmencie zaznacz, że czytałeś i zaakceptowałeś warunki i przejdź do własnego konta AdSense.

     

    joomla-adsense-banner

     

Krok 2: Tworzenie jednostki reklamowej

  1. Na koncie AdSense przejdź do strony “Witamy w AdSense”. Kliknij przycisk Rozpocznij teraz.

     

    joomla-adsense-banner

     

  2. Kliknij przycisk dotyczący nowej jednostki reklamowej w głównym menu Google AdSense.

     

    joomla-adsense-banner

     

  3. Wpisz nazwę bloku reklamowego, wybierz rozmiar, typ ogłoszenia i kliknij przycisk zapisz i wygeneruj kod.

     

    joomla-adsense-banner

     

  4. Pojawi się okno ze skryptem bloku reklamy. Skopiuj go, a od następnego kroku dowiesz się, w jaki sposób wyświetlić kod na stronie Joomla.

     

    joomla-adsense-banner

     

Krok 3: Konfiguracja edytora skryptów Joomla, aby umożliwił używanie znacznika script

Zazwyczaj banery można ustawić za pomocą znaczników iframe lub script . Domyślne edytory w Joomla 3.x automatycznie usuwają takie znaczniki HTML. Trzeba skonfigurować edytor, by pozwolił na ich użycie. Najpopularniejsze edytory w Joomla 3.x to TinyMCE i JCE.

Konfiguracja edytora TinyMCE

Idź do Rozszerzenia-> Dodatki-> Edytor - TinyMCE, zobaczysz tam parametry dodatku.

 

joomla-editors-banner

 

Wyrzuć tagi script, applet i iframe z zabronionych elementów i kliknij zapisz i zamknij.

Konfiguracja edytora JCE

Jeśli jest zainstalowany edytor JCE, to idź do Komponenty-> JCE Editor -> Profiles i wybierz domyślny profil.

 

joomla-editors-banner

 

Na stronie edycji domyślnego profilu JCE idź do zakładki “Edtor Parametrs” i wybierz sekcję “Advanced”. Zaznacz, że pozwalasz na użycie javascriptu. Kliknij zapisz i zamknij.

 

joomla-editors-banner

 

Po tych modyfikacjach można dodawać banery, które są określane za pomocą znacznika script.

Krok 4: Wyświetlanie banera AdSense we własnym module HTML

Istnieje kilka prostych kroków do stworzenia nowego modułu, służącego do wyświetlenia banera AdSense na stronie.

  1. Utwórz własny moduł HTML

    Idź do zaplecza strony, Rozszerzenia-> Moduły i kliknij “utwórz”.

     

    joomla-module-banner

     

  2. Pojawi się okno modalne, wybierz “Własny HTML”.

     

    joomla-module-banner

     

  3. Wybierz pozycję modułu, na której pojawi się baner.

     

    joomla-module-banner

     

  4. Kliknij przycisk “kod źródłowy” w edytorze.

     

    joomla-module-banner

     

  5. W oknie kodu źródłowego wklej skrypt baneru, który uprzednio wygenerowałeś na AdSense. Kliknij OK żeby powrócić do edytora.

     

    joomla-module-banner

     

    Nie obawiaj się gdy zobaczysz puste okno edytora, znacznik script może nie być w nim widoczny.

  6. W zakładce “przypisz do pozycji menu” przypisz moduł do wybranych pozycji.

     

    joomla-module-banner

     

    Kliknij zapisz i zamknij. Moduł AdSense powinien być już widoczny na Twojej stronie!

Niestandardowy obraz jako banner

Jeśli masz swój własny obrazkowy baner, to możesz umieścić go na stronie w Joomla 3.x. Na przykład:

 

joomla-module-banner

 

Możesz wyświetlić niestandardowy obraz jako baner w podobny sposób jak baner AdSense. Więcej informacji dotyczących wyświetlania banera AdSense, można uzyskać w kroku 4: Wyświetlanie banera AdSense we własnym module HTML.

 

joomla-module-banner

 

Komponent “Banery” w Joomla

Joomla 3.x ma wbudowany komponent do wyświetlania banerów na stronie. Zobacz, jak za pomocą kilku prostych kroków skonfigurować komponent i moduł.

Krok 1: Utwórz kategorię

Idź do Komponenty-> Banners-> Categories-> New aby utworzyć kategorię.

 

joomla-module-banner

 

Wpisz tytuł i opis. Możesz również skonfigurować inne opcje.

 

joomla-module-banner

 

Krok 2: Utwórz baner

Idź do Komponenty-> Banner-> Banners-> New

 

joomla-module-banner

 

    Tutaj powinieneś:
  • wpisać tytuł banera
  • wybrać kategorię banera
  • wybrać typ banera: obraz lub własny
  • jeśli to obraz, to wybierz go z serwera FTP, usta szerokość i wysokość, wpisz tekst alternatywny
  • jeśli to własny baner, to wpisz kod do wyświetlenia banera
  • wpisz opis
  • Możesz również dostosować inne opcje banera. W zakładce banner details możesz skonfigurować liczbę wyświetleń banerów na stronie, wybór klienta, który zlecił umieszczenie banera i licznik, ile razy baner był wyświetlany i ile razy został kliknięty

Krok 3: Publikacja modułu z banerem

Moduł banera wyświetla aktywne banery z komponentu. Idź do Rozszerzenia-> Moduły-> Utwórz-> Banner

    W parametrach modułu:
  • wpisz tytuł modułu
  • wybierz czy baner po kliknięciu ma się otwierać w tym samym, czy w innym oknie
  • wybierz ilość banerów do wyświetlenia
  • wybierz kategorię banerów
  • wybierz pozycję, na której mają się wyświetlić banery
  • dostosuj inne ustawienia wedle potrzeby

 

joomla-module-banner

 

Krok 4: Sprawdź statystyki banera

Tutaj zobaczysz liczbę wyświetleń i kliknięć. Takie same informacje są dostępne w sekcji “Tracks”, istnieje również możliwość by filtrować je pod względem daty i okresu.

Dziękujemy za przeczytanie. Nie zapomnij o udostępnieniu artykułu, jeśli okazał się pomocny!