Slajdy z prelekcji wygłoszonej na WordCamp 2016 w Gdyni (https://2016.gdynia.wordcamp.org) Wyniki przemyśleń nt. procesu realizacji projektów po 11 latach programowania oraz kilku latach zarządzania projektami. Próba odpowiedzi na pytania m.in. jak optymalnie podejść do tworzenia dedykowanych motywów WP, jak rozwiązać problemy związane z pracą w wieloosobowych zespołach programistycznych (dostęp do bazy danych, konflikty w repozytorium). Prezentacja pomysłu na platformę łączącą agencje - potrzebujące doraźnego lub stałego wsparcia deweloperskiego - z programistami wyspecjalizowanymi w kodowaniu PSD do WP.

1. PSD do WP:
od projektu graficznego
do działającego serwisu
K r z y s z t o f Ł ę c k i

2. W S T Ę P

3. Co w prezentacji?Co w prezentacji?
1. Spojrzenie procesowe na realizację projektów.
2. Wybrane koncepcje i techniki.
3. Standard PSD do WP?
Wstęp

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

5. Pixel-perfect
Design is everything. Everything!
Paul Rand
(gość od logotypów m.in. IBM, UPS)

6. Pixel-perfect

7. Jakość się opłacaJakość się opłaca
● dizajn wpływa na konwersję
● Klienci płacą za dobry dizajn
● dobry dizajn wymaga
wiernego odzwierciedlenia
w zakodowanym serwisie
Pixel-perfect
- markjeting, bejbe!
- chcesz dobrze zarabiać?

8. Perfect vs „Good enough”Perfect vs „Good enough”
Pixel-perfect
czas
jakość
niechlujstwo
„good enough”
- nierealne

9. 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!
Pixel-perfect
PSD
HTML
generalna zasada: porównujemy „na oko”

10. 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!
Pixel-perfect
PSD
HTML
Fuj! ✔Dobrze
letter-spacing: 2px;
generalna zasada: porównujemy „na oko”

11. 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!
Pixel-perfect
● Nie zawsze rozmiar z PSD będzie
wyglądał tak samo w HTML!
● Optymalizacja - ograniczenie
liczby webfontów
generalna zasada: porównujemy „na oko”

12. 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!
Pixel-perfect
● Nie zapomnieć o :focus
● Antialiasing fontów w PSD może
zmieniać odcień koloru
generalna zasada: porównujemy „na oko”

13. 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!
Pixel-perfect
● Rozmiary, interlinie, marginesy
itd. mogą być zaprojektowane
inaczej dla mobile, inaczej dla
desktop
● ...i tak powinny być zakodowane ;)
generalna zasada: porównujemy „na oko”

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

15. Tworzenie koduTworzenie kodu
● Odpowiednie formatowanie i komentowanie.
● Czytelność przede wszystkim!
● Duże bloki dzielimy na osobne pliki.
● ...
Warsztat pracy
znowu dizajn!
po czym rozpoznać profesjonalistę?
-dla innych koderów
i dla siebie

16. 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.
Warsztat pracy
przychodzi z doświadczeniem
- dostrzeganie powtarzalnych wzorców

17. NarzędziaNarzędzia
Dobra organizacja pracy – nawet jeśli pracujecie sami!
Warsztat pracy

18. PROCESK O D O W A N I A P R O J E K TU

19. Proces kodowania projektu
PSD2HTML + HTML2WP = WWW

20. Jak to zrobić optymalnie?Jak to zrobić optymalnie?
Proces kodowania projektu
I pomysł
/html/ /wp-content/themes/theme/
statyczny HTML
- brak include, pętli itd.
kopia do plików motywu,
ładowanie danych z WP

21. Jak to zrobić optymalnie?Jak to zrobić optymalnie?
Proces kodowania projektu
II pomysł
/html/ /wp-content/themes/theme/
udogodnienia PHP
- ale musimy kopiować
fragmenty kodu

22. Jak to zrobić optymalnie?Jak to zrobić optymalnie?
Proces kodowania projektu
III pomysł
/wp-content/themes/theme/
kodowanie wyglądu
i ładowanie danych z WP
bezpośrednio w motywie
- problem z edycją bazy przez
kilka osób równolegle

23. Jak to zrobić optymalnie?Jak to zrobić optymalnie?
Proces kodowania projektu
IV pomysł
Podstrony WP, custom post types /wp-content/themes/theme/
kodowanie wyglądu
bezpośrednio w motywie,
póki co dane statyczne
Edytowalność
1) Podłączenie menu itd.
2) Stworzenie pól meta
na zapleczu
3) Pobieranie zawartości
pól zamiast statycznych
danych
najpierw routing
podłączamy dane
ładowane dynamicznie

24. 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
Komponenty
WadyWady
● …?
- od razu docelowe
struktury WP
- ważne z punktu widzenia
harmonogramu prac

25. Proces kodowania projektu
dane statyczne w widokach
dane dynamiczne
widok pozostaje
(prawie) niezmieniony!

26. K O M P O N E N T Y

27. Kto bawił się
klockami LEGO?
Kto bawił się
klockami LEGO?
Komponenty

28. Każdy widok jako suma komponentówKażdy widok jako suma komponentów
Komponenty

29. Każdy widok jako suma komponentówKażdy widok jako suma komponentów
Komponenty

30. Ładowanie komponentów w PHPŁadowanie komponentów w PHP
Komponenty

31. Funkcja ładująca komponentFunkcja ładująca komponent
Komponenty

32. Komponenty
z parametrem
Komponenty
z parametrem
Komponenty
array( 'product_post' => $product_post )

33. Komponenty zagnieżdżoneKomponenty zagnieżdżone
Komponenty

34. Komponenty zagnieżdżoneKomponenty zagnieżdżone
Komponenty
na jak drobne kawałki rozbijać?
- każdy komponent powinien robić jedną rzecz (!)

35. Każdy komponent
jako “mini MVC”
Każdy komponent
jako “mini MVC”
Komponenty
- LEGO
/wp-content/themes/theme/_style.scss

36. ZaletyZalety
● wygodna praca kilku osób na jednym repo
● oddzielenie kodu odpowiadającego za wygląd
od logiki
● podział na małe i czytelne porcje kodu
●
porządek w kodzie
Komponenty
WadyWady
● dodatkowa warstwa abstrakcji
● narzut pracy na utrzymanie porządku
● …?
- wada czy zaleta?- łatwiej zamieniać dane statyczne
na dynamiczne
- ograniczenie konfliktów

37. U Ż Y T E C Z N E
Z A P L E C Z E

38. Estetyczne i przejrzyste metaboksyEstetyczne i przejrzyste metaboksy
Użyteczne zaplecze
można dowolnie zwinąć lub rozwinąć
metaboksy powiązane z komponentami

39. MikroinstrukcjeMikroinstrukcje
Użyteczne zaplecze
- zrozumiałe komunikaty techniczne

40. Formaty obrazkówFormaty obrazków
Użyteczne zaplecze
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

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

42. Podsumowanie
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ść

43. Platforma PSD2WPPlatforma PSD2WP
Podsumowanie
AGENCJEAGENCJE KODERZYKODERZY
przydzielają
dowolną ilość koderów do projektu
zgodnie 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

44. DZIĘKI!DZIĘKI!
wpmagik.pl
goodeveningorchestra.pl
k r z y s z t o f . l e c k i @ v i s i b e e . p l