Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

303 views

Published on

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.

Published in: Technology
  • Hello! Who wants to chat with me? Nu photos with me here http://bit.ly/helenswee
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

  1. 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. 2. W S T Ę P
  3. 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. 4. P I X E L - P E R F E C T
  5. 5. Pixel-perfect Design is everything. Everything! Paul Rand (gość od logotypów m.in. IBM, UPS)
  6. 6. Pixel-perfect
  7. 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. 8. Perfect vs „Good enough”Perfect vs „Good enough” Pixel-perfect czas jakość niechlujstwo „good enough” - nierealne
  9. 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. 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. 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. 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. 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. 14. W A R S Z T A T P R A C Y
  15. 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. 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. 17. NarzędziaNarzędzia Dobra organizacja pracy – nawet jeśli pracujecie sami! Warsztat pracy
  18. 18. PROCESK O D O W A N I A P R O J E K TU
  19. 19. Proces kodowania projektu PSD2HTML + HTML2WP = WWW
  20. 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. 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. 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. 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. 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. 25. Proces kodowania projektu dane statyczne w widokach dane dynamiczne widok pozostaje (prawie) niezmieniony!
  26. 26. K O M P O N E N T Y
  27. 27. Kto bawił się klockami LEGO? Kto bawił się klockami LEGO? Komponenty
  28. 28. Każdy widok jako suma komponentówKażdy widok jako suma komponentów Komponenty
  29. 29. Każdy widok jako suma komponentówKażdy widok jako suma komponentów Komponenty
  30. 30. Ładowanie komponentów w PHPŁadowanie komponentów w PHP Komponenty
  31. 31. Funkcja ładująca komponentFunkcja ładująca komponent Komponenty
  32. 32. Komponenty z parametrem Komponenty z parametrem Komponenty array( 'product_post' => $product_post )
  33. 33. Komponenty zagnieżdżoneKomponenty zagnieżdżone Komponenty
  34. 34. Komponenty zagnieżdżoneKomponenty zagnieżdżone Komponenty na jak drobne kawałki rozbijać? - każdy komponent powinien robić jedną rzecz (!)
  35. 35. Każdy komponent jako “mini MVC” Każdy komponent jako “mini MVC” Komponenty - LEGO /wp-content/themes/theme/_style.scss
  36. 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. 37. U Ż Y T E C Z N E Z A P L E C Z E
  38. 38. Estetyczne i przejrzyste metaboksyEstetyczne i przejrzyste metaboksy Użyteczne zaplecze można dowolnie zwinąć lub rozwinąć metaboksy powiązane z komponentami
  39. 39. MikroinstrukcjeMikroinstrukcje Użyteczne zaplecze - zrozumiałe komunikaty techniczne
  40. 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. 41. P O D S U M O W A N I E
  42. 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. 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. 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

×