Przejdź do treści

Dariusz Grochocki WCAG Web Accessibility Developer

Wykorzystuję WordPress do tworzenia zaawansowanych i dostępnych cyfrowo stron internetowych (WCAG).

kontakt: gronix@gronix.pl

Moje specjalizacje

  • Tworzenie dostępnych stron i sklepów internetowych (WCAG)
  • Integrowanie strony z usługami zewnętrznymi (API)
  • Systemy płatności online dla platform ecommerce (Stripe, Tpay)
  • Optymalizacja strony internetowej dla wyszukiwarek (SEO)
  • Wdrażanie niestandardowych modułów i mechanizmów

Tworzenie dostępnych stron i sklepów internetowych (WCAG)

Zajmuję się tworzeniem dostępnych cyfrowo templatek (motywów graficznych) dla stron WordPress i sklepów WooCommerce z wykorzystaniem Bootstrap, różnych integracji API, lecz bez korzystania z narzędzi typu "page builder".

Najlepiej pracuje mi się z projektem graficznym strony wykonanym w aplikacji Figma.

W projekcie graficznym potrzebuję design system z typografią dla mobile i desktop oraz stanami hover, active i focus dla interaktywnych elementów.

 

Szczegóły techniczne strony www

Niestandardowe pola (custom fields)

W celu tworzenia niestandardowych struktur treści na frontend, definiuję dodatkowe pola edycji treści za pomocą MetaBox.io. Ten framework daje web deweloperowi większe możliwości niż ACF oraz zapewnia wyższą wydajność (performance) poprzez między innymi lepszy sposób zapisywania danych w tabelach bazy danych. Niestandardowe pola tworzę w PHP z wykorzystaniem odpowiednich funkcji akcji i filtrów (hooks: actions, filters).

To rozwiązanie wykorzystuję np. do budowania sekcji z karuzelą czy slajderem, opiniami klientów czy logotypami partnerów. Zarządzanie tymi treściami odbywa się w edycji bieżącej strony.

Własne typy postów (custom post types) i niestandardowe taksonomie (custom taxonomies)

Niestandardowe treści strony umieszczam w dedykowanych własnych typach postów z opcjonalnym użyciem własnych taksonomii (kategorii wewnętrznego podziału treści). Potem, za pomocą WP_Query wyświetlam te treści na frontendw dedykowanej strukturze. To rozwiązanie świetnie nadaje się np. do budowania strony z ogłoszeniami, ofertami lub bazy jakiś podmiotów.

Ustawienia globalne w widoku personalizacji strony (Customizer)

W widoku personalizacji mogę dodać dowolne zakładki oraz zakładki wewnętrzne (zagnieżdżone) dla zarządzania ustawieniami globalnymi witryny. Przykładowo, mogą tam znaleźć się ustawienia do wklejenia hiperłączy dla ikon social media znajdujących się w nagłówku lub stopce strony.

W personalizacji ustawienia mogą być w formie: pola tekstowego (input text, textarea), radio button, checkbox, select (menu rozwijane), pole wyboru daty, pole wyboru koloru.

Jest to świetne miejsce do zarządzania globalnymi ustawieniami nagłówka i stopki.

Tworzenie niestandardowych REST API Endpoints

Endpoint, czyli brama łącząca procesy serwerowe aplikacji z interfejsem do wysyłania niestandardowych żądań. Przykładowo, może to być zapytanie użytkownika w usługach domenowych, czy w bazie danych występuje określony zasób lub żądanie aktualizowania bądź dodania jakieś treści. Żądania mogą być realizowane za pomocą różnych funkcji WordPress albo zapytań SQL na tabelach bazy danych, a w niestandardowych sytuacjach na widokach, co pozwala na lepszą optymalizację całego procesu.

Dynamiczne interakcje użytkownika ze stroną za pomocą AJAX

Oddzielnie dla użytkowników i użytkowników niezalogowanych mogę zaprogramować dynamiczne interakcje ze stroną (np. kliknięcie w button), czego efektem będzie wywołanie wskazanej funkcji lub wykonanie operacji na bazie danych, np. pobieranych danych z bazy strony bez konieczności odświeżania strony w przeglądarce. Możliwości jest mnóstwo.

Przykładowo, dla serwisu zawierającego bazę ogłoszeń zaimplementowaną w formie własnego typu wpisów (custom post type), mogę zbudować formularz filtrowania służący do wyświetlania wyników zgodnie z kryteriami: wskazaną kategorią (taksonomią) ogłoszeń lub wartością w niestandardowych polach (custom fields).

Dodatkowo, wyniki filtrowania mogą zawierać funkcję paginacji dzielącą wyniki filtrowania na oddzielnie strony. To pozwala na optymalizację tego rozwiązania, gdzie skrócony zostaje czas oczekiwania na odpowiedź. Lepiej powiem dostać szybko 1. stronę z wynikami filtrowania pierwszych 10 ogłoszeń spełniających kryteria niż od razu setki ogłoszeń.

Generowanie plików PDF

Do tworzenia mechanizmu automatycznego generowania plików PDF używam biblioteki mPDF, która umożliwia budowanie wzorca pliku PDF z dynamicznymi treściami przekazywanymi np. w formie parametrów $_GET.

Przykładowe implementacje, jakie realizowałem:

  • Po opłaceniu zamówienia w sklepie jest automatycznie generowana faktura PDF.
  • Po zakupie biletu na wydarzenie użytkownik otrzymuje bilet PDF.
  • Po przejściu przez wszystkie etapy kursu e-learningowego użytkownik otrzymuje certyfikat PDF.

Zarządzanie serwerem i domenami

Poradzę sobie z administrowaniem każdego hostingu strony i prawie każdego VPS. Niektóre czynności administracyjne wykonuję w konsoli za pomocą połączenia SSH.

Mogę zająć się zarządzaniem domenami, a zwłaszcza dodawaniem rekordów do strefy DNS. Niejednokrotnie różne usługi Google czy operatorów newslettera wymagają dodania jakiegoś rekordu TXT, MX czy CNAME.

Cechy tworzonych przeze mnie stron internetowych

(dokładny zakres pracy zależy od zlecenia)

  • Dostępność cyfrowa (WCAG)

    Strona dostępna cyfrowo dla jak największej liczby użytkowników.

  • Responsywność (RWD)

    Strona responsywna, której struktura i layout. dostosowują się do szerokości (a niekiedy i wysokości) okna przeglądarki na urządzeniu użytkownika. Mobile first!

  • SEO

    Uwzględnienie w tworzonym kodzie zasad optymalizacji strony pod wyszukiwarki internetowe np. struktura nagłówków, dane strukturalne, linkowanie nofollow i dofollow, widoczność strony w SERP, przekierowania typu 301.

  • Performance

    Działania na każdym etapie tworzenia strony mające na celu szybkie i sprawne funkcjonowanie strony, m. in. wybór rodzaju serwera (Apache, Nginx, LiteSpeed), wersji PHP, możliwości pamięci podręcznej cache (OPcache, Redis), sposób implementacji funkcjonalności.

  • Tryb ciemny i jasny strony

    Dostosowanie layoutu strony do ustawień urządzenia i przeglądarki użytkownika. W przypadku ustawień ciemnego trybu (dark mode), użytkownik zobaczy inną kolorystycznie wersję serwisu adekwatną do trybu ciemnego.

  • Wersje językowe

    Dodawanie treści w różnych językach i tworzenie powiązań logicznych między nimi. Korzystam z tyczki Polylang i WPML. W sklepach WooCommerce wykorzystuję geolokalizacje MaxMind do prezentowania treści dedykowanych dla użytkowników z różnych regionów.

  • Sklepy internetowe i systemy płatności

    Tworzenie sklepów w środowisku WordPress + WooCommerce. Niestandardowe integracje płatności z wykorzystaniem Stripe API lub Tpay API.

  • Integracje z usługami serwisów zewnętrznych

    Wykonuję integracje strony internetowej z serwisami różnych usług zewnętrzych, które posiadają otwarte API, gdzie autoryzacja odbywa się za pomocą OAuth 2.0.

  • Niestandardowe funkcje i moduły

    Zarówno na poziomie front-end, jak i back-end programuję niestandardowe mechanizmy, funkcje, procesy, moduły, integracje.

Czasami wymienione aspekty tworzenia strony wyrażają się w tych samych czynnościach i zasadach tworzenia kodu. Przykładowo: odpowiednia struktura nagłówków w HTML dotyczy zarówno WCAG, jak SEO.

Integrowanie strony z usługami zewnętrznymi (API)

Zajmuję się integracjami w technologii JS i PHP.

cURL i API

Wysyłanie żądań HTTP za pomocą biblioteki cURL w celu uzyskiwania dostępu do zasobów interfejsu API.

Przykład: pobieranie aktualnych ustawień i treści wybranego produktu z sklepu w celu jego prezentacji na zewnętrznej stronie landing page.

Fetch API dla JavaScript

Dynamiczne przesyłanie danych do aplikacji zewnętrznej, gdzie posłużą do rozpoczęcia jakiegoś procesu lub dalszego przetwarzania danych.

Przykład: przekazywanie wartości jakichś zmiennych dotyczących zamówienia produktu do operatora płatności Stripe, w celu dostosowania strony płatności dla użytkownika, i zarządzania dalszymi etapami przebiegu transakcji online.

Stripe API

Tworzenie zaawansowych bramek w modelu płatności natychmiastowych, płatności odroczonych („buy now, pay later”) oraz subskrypcji. Dostosowywanie stron płatności elektronicznych procesowanych przez Stripe. Dotyczy zarówno platform ecommerce, jak i organizacji społecznych zbierających darowizny.

API Tpay

Tworzenie niestandardowych bramek jednorazowych płatności, płatności cyklicznych (rekurencyjnych) za pomocą tokenizacji. Podczas 1. transakcji kartowej jest tworzony i zapisywany w bazie danych serwisu token, który w kolejnym okresie rozliczeniowym subskrypcji służy do automatycznego stworzenia transakcji (np. za pomocą WP-Cron) i obciążenia karty płatniczej użytkownika wskazaną wcześniej kwotą.

WooCommerce REST API

Tworzenie, odczytywanie, aktualizowanie i usuwanie danych WooCommerce przy użyciu żądań w formacie JSON i metod uwierzytelniania WordPress REST API oraz standardowych metod żądań HTTP.

Przykłady

Użycie WooCommerce REST API wewnątrz serwisu: tworzenie zamówienia po wypełnieniu niestandardowego formularza zakupu z opcjonalnym zapisaniem się do newslettera i edycją różnych metadanych umożliwiających wyświetlenie użytkownikowi dedykowanych treści podczas dokonywania zakupu. Podczas tworzenia zamówienia w sklepie WooCommerce mogą być inicjowane dowolne procesy w tle, np. po wykonanej płatności użytkownik otrzymuje automatycznie wygenerowaną fakturę.

Użycie WooCommerce REST API na domenie zewnętrznej: osadzenie widgetu zakupu produktu na dowolnej zewnętrznej domenie za pomocą skryptu JS powodującego stworzenie iframe. Ten widget zawiera formularz, gdzie klient podaje swoje dane, opcjonalnie także dane do faktury (z opcjonalnym pobraniem danych z GUS REGON). Po zatwierdzeniu zamówienia jest tworzone zamówienie w źródłowym sklepie WooCommerce, są wysyłane odpowiednie wiadomości transakcyjne z domeny źródłowej, a użytkownik otrzymuje na frontend tego widgetu różne formy płatności do wyboru.

DirectAdmin API

Wykorzystując HTTP socket można zdalnie wykonać na serwerze akcję np. stworzenia konta użytkownika ze wskazaną domeną, adresem e-mail czy kontem FTP.

Przykład: po zakupie usługi hostingu w sklepie WooCommerce tworzone są odpowiednie zasoby na serwerze, które udostępniane są kupującemu.

NBP (Narodowy Bank Polski)

Web API do pobierania aktualnego kursu walut.

Przykład: podczas generowania faktury PDF dla zagranicznego kontrahenta jest przeliczana kwota transakcji, pierwotnie wyrażona w walucie obcej, na złotówki wg kursu walut NBP z ostatniego dnia roboczego poprzedzającego dzień zakupu.

API REGON (Główny Urząd Statystyczny)

p>Pobieranie danych podmiotów gospodarczych z GUS (Główny Urząd Statystyczny).

Przykład: w wyniku wpisania NIP (numeru identyfikacji podatkowej) do formularza danych do faktury i zatwierdzeniu akcji pobierania danych, poszczególne pola tego formularza zostaną automatycznie uzupełnione danymi pobranymi z GUS, jak np. nazwa firmy, adres siedziby: ulica, miasto, kod pocztowy.

Mailerlite API, Mailchimp API, DMSales API

Tworzenie formularzy subskrypcji do newslettera na dowolnej domenie z wykorzystaniem klucza API do autoryzacji połączenia ze wskazanym kontem w serwisie operatora newslettera.

Można to wykorzystać także w inny sposób: tworzenie dedykowanych portali społecznościowych, fanowskich, influencerskich itd., gdzie przydział do konkretnej grupy użytkownik jest tożsamy z zapisaniem się do dedykowanego newslettera dla danej grupy subskrybentów, co ułatwia kierowanie materiałów promocyjnych i marketingowych do ściśle określonej grupy.

Google Maps API

Tworzenie map z zdefiniowanymi markerami, mapy z kolorowymi warstwami w dowolnym stylu.

Google Charts API, Highcharts JS API

Tworzenie dynamicznych wykresów i tabel na podstawie zmiennych danych agregowanych w arkuszu Google.

Google reCAPTCHA

Implementacja captcha umożliwiającej ochronę formularza przez spamem. Zastosowanie captcha do dowolnego formularza z walidacją JS i PHP.

Pixabay API

Umożliwienie użytkownikowi w usługach domenowych przeglądanie zdjęć i filmów z biblioteki Pixabay oraz ich bezpośrednie wykorzystywanie w tworzonych treściach. W ten sposób pominięty jest etap ręcznego pobierania mediów z serwisu Pixabay.com i ich wgrywanie do usług domenowych.

Automatyczne generowanie i wysyłanie faktur za pomocą API serwisu inFakt.pl i wFirma.pl

Serwisy inFakt.pl i wFirma.pl udostępniają swoje API, za pomocą którego można zintegrować usługi własnego serwisu (np. sklepu internetowego) z ich usługą generowania i wysyłania faktur do klientów.

Systemy płatności online dla platform ecommerce (Stripe)

Wdrażam systemy płatności w technologii JS i PHP.

 

  • Tworzenie bramek w modelu płatności natychmiastowych (np. karta płatnicza, Blik, Przelewy24, Google Pay, Apple Pay, Link.com) i płatności odroczonych ("buy now, pay later", np. Klarna).
  • Tworzenie subskrypcji i zarządzanie nimi na poziomie konta użytkownika w usługach domenowych.
  • Inicjowanie z poziomu domeny customowego formularza płatności ("checkout page") hostowanego na serwerze Stripe.
  • Przekazywanie wartości (wykorzystując Fetch API dla JavaScript) jakichś zmiennych dotyczących zamówienia produktu do operatora płatności Stripe, w celu dostosowania "checkout page", i zarządzania dalszymi etapami przebiegu transakcji online (np. transfer środków do kont partnerskich Stripe).
  • Obsługa zdarzeń (webhooks), np. przyjęcie płatności w systemie Stripe powoduje zmianę statusu zamówienie w sklepie.
  • Organizacja sieci kont partnerskich (connected accounts), np. dzielenie się zyskami ze sprzedaży.

Wdrażanie niestandardowych modułów i mechanizmów

Niestandardowe rzeczy na frontend i backend wdrażam w technologii JS i PHP.

 

Przykładowe niestandardowe rzeczy (poza wyżej wymienionymi), jakie miałem okazję wdrażać.

Generowanie certyfikatów PDF i repozytorium certyfikatów

Generowanie certyfikatów PDF z poziomu usług domenowych, których unikalny numer i klucz znajdują się w osobnej bazie danych MySQL. System jest tak skonstruowany, że baza danych nie musi zawierać danych osobowych, gdyż nie ma takiej konieczności (RODO).

Osoba, której chwalisz się swoim certyfikatem (np. pracodawca), może zweryfikować autentyczność dokumentu za pomocą dedykowanego formularza (numer i klucz widoczne są w pliku PDF). Serwer w odpowiedzi na zapytanie wyświetli informacje przypisane do danego certyfikatu, np. imię i pierwsza litera nazwiska, nazwa szkolenia, data rejestracji, nazwa organizatora szkolenia.

Generowanie biletu PDF z unikalnym kodem QR i aplikacja do skanowania kodów QR

Generowanie biletu PDF z unikalnym kodem QR po wykonaniu płatności online w sklepie. Numer unikalnego kodu przechowywany jest w bazie danych i skojarzony z konkretnym zamówieniem klienta. Następnie po zeskanowaniu kodu QR za pomocą dedykowanej aplikacji, baza danych jest odpytywana w poszukiwaniu pasującego biletu. Jeśli bilet został opłacony można za pomocą aplikacji wykonać akcję „check in”. Bilet otrzymuje status „zameldowany”, co uniemożliwi jego ponowne wykorzystanie przez osoby trzecie.

Aplikacja do skanowania kodów QR jest aplikacją wewnętrzną aktywującą się w przeglądarce internetowej po zalogowaniu na swoje konto w usługach domenowych. Nie ma konieczności instalowania żadnej zewnętrznej aplikacji na swoim urządzeniu mobilnym. Skaner kodów wykorzystuje aparat wbudowany w telefon.

System organizacji i sprzedaży kursów e-learningowych bez żadnych wtyczek

Wykorzystując środowisko WordPress można bez żadnych dodatkowych wtyczek (nawet bez WooCommerce) stworzyć system sprzedaży dostępu do kursów e-learningowych w modelu subskrypcyjnym.

  • Sprzedaż dostępu do kursów w modelu subskrypcyjnym obsługiwana jest przez operatora płatności Stripe. Opłata za nowy okres rozliczeniowy jest pobierana automatycznie z karty płatniczej użytkownika, np. co miesiąc.
  • Użytkownik w ustawieniach swojego konta na platformie e-learningowej zarządza swoją subskrypcją. Może anulować subskrypcję w dowolnym momencie. Dostęp do kursów pozostanie aktywny do końca bieżącego okresu rozliczeniowego.
  • Każdy kurs e-learningowy podzielony jest na mniejsze jednostki (etapy). Po zapoznaniu się z materiałem (np. po obejrzeniu filmu) użytkownik oznacza etap jako zakończony.
  • Mechanizm może wymuszać na użytkowniku, aby zatwierdzał ukończenie etapów jeden po drugim zgodnie z układem kursu lub w sposób asynchroniczny, gdzie można zatwierdzać ukończenie etapów kursu w dowolnej kolejności.
  • Po zakończeniu wszystkich etapów kursu użytkownik może wygenerować i pobrać certyfikat PDF na swoje urządzenie.
WordPress Multisite (lub WordPress Multi Network) z oddzielną bazą danych dla każdej subdomeny

Wykorzystując DirectAdmin API oraz możliwości HyperDB do partycjonowania baz danych mogę stworzyć platformę na jednej instancji WordPress, gdzie każda nowa subdomena stworzona przez użytkownika będzie posiadać własną niezależną bazę danych MySQL.

Platforma może umożliwiać użytkownikom rejestrację subdomen różnych domen. Użytkownik posiada jedno konta, w ramach którego ma dostęp do panelu administracyjnego każdej swojej subdomeny.

Przykładowy system płatności

  • Płatności za stworzenie nowej subdomeny w modelu płatności natychmiastowych.
  • Płatności za dostęp do funkcjonalności platformy w modelu subskrypcyjnym.

Kontakt

Mój zweryfikowany profil w serwisie LinkedIn

Mój email: gronix@gronix.pl