PSD do WP:od projektu graficznego do działającego serwisu

K r z y s z t o f Ł ę c k i

W S T Ę P

Co w prezentacji?Co w prezentacji?

1. Spojrzenie procesowe na realizację projektów.

2. Wybrane koncepcje i techniki.

3. Standard PSD do WP?

W s t ę p

P I X E L - P E R F E C T

P i x e l - p e r f e c t

Design is everything. Everything!Paul Rand

(gość od logotypów m.in. IBM, UPS)

P i x e l - p e r f e c t

Jakość się opłacaJakość się opłaca

● dizajn wpływa na konwersję

● Klienci płacą za dobry dizajn

● dobry dizajn wymagawiernego odzwierciedlenia w zakodowanym serwisie

P i x e l - p e r f e c t

- markjeting, bejbe!

- chcesz dobrze zarabiać?

Perfect vs „Good enough”Perfect vs „Good enough”

P i x e l - p e r f e c t

czas

jakość

niechlujstwo

„good enough”

- nierealne

Na co zwrócić uwagęNa co zwrócić uwagę

1) Światła.2) Letter-spacing!3) Kroje i rozmiary fontów.4) Kolory.5) Dostosowanie dla RWD.

...i ogólne poczucie estetyki!

P i x e l - p e r f e c t

PSD

HTML

generalna zasada: porównujemy „na oko”

Na co zwrócić uwagęNa co zwrócić uwagę

1) Światła.2) Letter-spacing!3) Kroje i rozmiary fontów.4) Kolory.5) Dostosowanie dla RWD.

...i ogólne poczucie estetyki!

P i x e l - p e r f e c t

PSD

HTML

Fuj! ✔ Dobrze

letter-spacing: 2px;

generalna zasada: porównujemy „na oko”

Na co zwrócić uwagęNa co zwrócić uwagę

1) Światła.2) Letter-spacing!3) Kroje i rozmiary fontów.4) Kolory.5) Dostosowanie dla RWD.

...i ogólne poczucie estetyki!

P i x e l - p e r f e c t

● Nie zawsze rozmiar z PSD będzie wyglądał tak samo w HTML!

● Optymalizacja - ograniczenie liczby webfontów

generalna zasada: porównujemy „na oko”

Na co zwrócić uwagęNa co zwrócić uwagę

1) Światła.2) Letter-spacing!3) Kroje i rozmiary fontów.4) Kolory.5) Dostosowanie dla RWD.6) ...i ogólne poczucie estetyki!

P i x e l - p e r f e c t

● Nie zapomnieć o :focus

● Antialiasing fontów w PSD może zmieniać odcień koloru

generalna zasada: porównujemy „na oko”

Na co zwrócić uwagęNa co zwrócić uwagę

1) Światła.2) Letter-spacing!3) Kroje i rozmiary fontów.4) Kolory.5) Dostosowanie dla RWD.

...i ogólne poczucie estetyki!

P i x e l - p e r f e c t

● Rozmiary, interlinie, marginesy itd. mogą być zaprojektowane inaczej dla mobile, inaczej dla desktop

● ...i tak powinny być zakodowane ;)

generalna zasada: porównujemy „na oko”

W A R S Z T A T P R A C Y

Tworzenie koduTworzenie kodu● Odpowiednie formatowanie i komentowanie.

● Czytelność przede wszystkim!

● Duże bloki dzielimy na osobne pliki.

● ...

W a r s z t a t p r a c y

znowu dizajn!

po czym rozpoznać profesjonalistę?

-dla innych koderówi dla siebie

Myślenie modeloweMyślenie modelowe● Konstruowanie szkieletu + wypełnienie.

● Uniezależnienie od narzędzi.

● Rozbijanie problemów na mniejsze części.

● Wydzielanie wspólnych części.

W a r s z t a t p r a c y

przychodzi z doświadczeniem

- dostrzeganie powtarzalnych wzorców

NarzędziaNarzędzia

Dobra organizacja pracy – nawet jeśli pracujecie sami!

W a r s z t a t p r a c y

P R O C E SK O D O W A N I A P R O J E K T U

P r o c e s k o d o w a n i a p r o j e k t u

PSD2HTML + HTML2WP = WWW

Jak to zrobić optymalnie?Jak to zrobić optymalnie?

P r o c e s k o d o w a n i a p r o j e k t u

I pomysł

/html/ /wp-content/themes/theme/

statyczny HTML

- brak include, pętli itd.

kopia do plików motywu, ładowanie danych z WP

Jak to zrobić optymalnie?Jak to zrobić optymalnie?

P r o c e s k o d o w a n i a p r o j e k t u

II pomysł

/html/ /wp-content/themes/theme/

udogodnienia PHP

- ale musimy kopiowaćfragmenty kodu

Jak to zrobić optymalnie?Jak to zrobić optymalnie?

P r o c e s k o d o w a n i a p r o j e k t u

III pomysł

/wp-content/themes/theme/

kodowanie wyglądui ładowanie danych z WPbezpośrednio w motywie

- problem z edycją bazy przezkilka osób równolegle

Jak to zrobić optymalnie?Jak to zrobić optymalnie?

P r o c e s k o d o w a n i a p r o j e k t u

IV pomysł

Podstrony WP, custom post types /wp-content/themes/theme/

kodowanie wyglądubezpośrednio w motywie,póki co dane statyczne

Edytowalność

1) Podłączenie menu itd.

2) Stworzenie pól metana zapleczu

3) Pobieranie zawartości pól zamiast statycznych danych

najpierw routing

podłączamy daneładowane dynamicznie

ZaletyZalety

● kilka osób może pracować równolegle

● rozwiązany problem dostępu do bazy

● ograniczamy zbędną robotę

● osoby kodujące wygląd nie muszą znać WP

● można testować osobno wygląd i zaplecze

K o m p o n e n t y

WadyWady

● …?

- od razu docelowe struktury WP

- ważne z punktu widzeniaharmonogramu prac

P r o c e s k o d o w a n i a p r o j e k t u

dane statyczne w widokach

dane dynamiczne

widok pozostaje(prawie) niezmieniony!

K O M P O N E N T Y

K t o b a w i ł s i ęk l o c k a m i LEGO?

K t o b a w i ł s i ęk l o c k a m i LEGO?

K o m p o n e n t y

Każdy widok jako suma komponentówKażdy widok jako suma komponentów

K o m p o n e n t y

Każdy widok jako suma komponentówKażdy widok jako suma komponentów

K o m p o n e n t y

Ładowanie komponentów w PHPŁadowanie komponentów w PHP

K o m p o n e n t y

Funkcja ładująca komponentFunkcja ładująca komponent

K o m p o n e n t y

Komponentyz parametremKomponentyz parametrem

K o m p o n e n t y

array( 'product_post' => $product_post )

Komponenty zagnieżdżoneKomponenty zagnieżdżone

K o m p o n e n t y

Komponenty zagnieżdżoneKomponenty zagnieżdżone

K o m p o n e n t y

na jak drobne kawałki rozbijać?

- każdy komponent powinien robić jedną rzecz (!)

Każdy komponentjako “mini MVC”

Każdy komponentjako “mini MVC”

K o m p o n e n t y

- LEGO

/wp-content/themes/theme/_style.scss

ZaletyZalety● wygodna praca kilku osób na jednym repo

● oddzielenie kodu odpowiadającego za wyglądod logiki

● podział na małe i czytelne porcje kodu

● porządek w kodzie

K o m p o n e n t y

WadyWady● dodatkowa warstwa abstrakcji

● narzut pracy na utrzymanie porządku

● …?

- wada czy zaleta?- łatwiej zamieniać dane statycznena dynamiczne

- ograniczenie konfliktów

U Ż Y T E C Z N EZ A P L E C Z E

Estetyczne i przejrzyste metaboksyEstetyczne i przejrzyste metaboksy

U ż y t e c z n e z a p l e c z e

można dowolnie zwinąć lub rozwinąć

metaboksy powiązane z komponentami

MikroinstrukcjeMikroinstrukcje

U ż y t e c z n e z a p l e c z e

- zrozumiałe komunikaty techniczne

Formaty obrazkówFormaty obrazków

U ż y t e c z n e z a p l e c z e

add_image_size( 'gallery-thumb', 345, 290, TRUE );add_image_size( 'lightbox-full', 1000, 800, FALSE );

the_post_thumbnail( $post->ID, 'gallery-thumb' );

wp_get_attachment_image_src( $attachment_id, 'lightbox-full' );

Wtyczka Manual Image Crop

P O D S U M O W A N I E

P o d s u m o w a n i e

1) Przygotowanie środowiska.2) Przygotowanie struktury komponentów.3) Kodowanie statycznych komponentów

w ramach architektury WP.4) Testy frontu i poprawki.5) Edytowalność treści.6) Testy całościowe i poprawki.7) Wdrożenie wersji produkcyjnej.8) Obsługa posprzedażowa.9) Kolejny zadowolny Klient!

FAZA WSTĘPNA

KODOWANIE WYGLĄDU

WDROŻENIE

FAZA ROZWOJU

- routing, kontrolery- rozpisanie architektury!

KODOWANIE CMS

- rozproszony zespół

- jedna osoba: spójność

Platforma PSD2WPPlatforma PSD2WP

P o d s u m o w a n i e

AGENCJEAGENCJE KODERZYKODERZYprzydzielają

dowolną ilość koderów do projektuzgodnie z aktualnym zapotrzebowaniem

przyjmujądowolną ilość drobnych zadańzgodnie z aktualnie dostępnym czasem

● generuje szkielet aplikacji● integruje się z systemami do zarządzania projektami● wylicza szacunkowe koszty produkcji i czas realizacji● zabezpiecza przepływ płatności● umożliwia sprawdzenie reputacji partnera

- coś jak UpWork- w zależności od liczby koderów!

- coś jak Allegro

- na podstawie listy komponentów- Asana, Podio, BaseCamp, Toggl itp.

- strażnik procesu

DZIĘKI!DZIĘKI!

wpmagik.plgoodeveningorchestra.pl

k r z y s z t o f . l e c k i @ v i s i b e e . p l