17 maja 2011

Samodzielna edycja CSS, grafik i tekstów w maskach sklepów

Po 4 latach prac i premierze na IAI-Day 2011, wprowadzona została rewolucyjna funkcja umożliwiająca pełną edycję maski sklepu przez klientów. Projektując tę funkcję nie chcieliśmy się ograniczyć jedynie do funkcji pozwalającej na edycję kolorów lub grafik belek. Chcieliśmy stworzyć w pełni funkcjonalne narzędzie, umożliwiające taki sam zakres prac jaki wykonują opiekunowie masek sklepów. Dodatkowo cały proces musiał być bezpieczny. Przez bezpieczeństwo rozumiemy również to, że zmiany wprowadzone przez klientów, muszą być uwzględniane podczas kolejnych prac nad maskami, wykonywanymi przez zawodowców z IAI, wykonujących do tej pory wszystkie zmiany w maskach sklepów.

Aby proces był bezpieczny i pozwalał na samodzielne eksperymentowanie, został w pierwszej kolejności zbudowany system wielopoziomowego systemu kontroli wersji. Dzięki niemu, klient może stworzyć swoją kopię roboczą maski (stworzyć wersję do edycji). Taka maska może być edytowana i podglądana. W momencie, w którym klient uzna, że maska nadaje się do publikacji, wystarczy ją opublikować. Po opublikowaniu, maska jest również przesyłana do systemu na którym pracują opiekunowie masek sklepów, którzy widzą zmiany u siebie. Masce również nadawany jest zatem numer stylu. Każda maska jest zatem w chwili obecnej oznacza przez trzy numery: [numer_template]-[numer stylu] r. [numer rewizji]. Maski w których stwierdzony został problem, mogą być odwołane poprzez wskazanie do publikacji innej maski (poprzez moduł zmiany maski a nawet usunięte.

Zadbaliśmy o możliwie wygodny interfejs. Dlatego podczas edycji maski dostępne są 2 tryby. W trybie "Włącz edycję" kliknięcie na dowolny element otwiera okienko edycji, pozwalające na zmianę CSS, grafiki i tekstów powiązanych elementów. W trybie "wyłącz edycję" można normalnie nawigować po całym sklepie odwiedzając kolejne zmiany. Zmiana na jednej podstronie np. listy towarów, będzie widoczna na innej liście towarów. Interfejs edycji działa na zasadzie podobnej do popularnego dodatku do edycji stron - Firebug. Wybierając jedno z powiązanych pól, na stronie element podświetla się, ułatwiając jego identyfikację. Zmiany wprowadzane w oknie edycji widoczne są na żywo na stronie.

IAI jako pierwsze zbudowało tak zaawansowany system włączający klientów w proces współredagowania masek. Od dzisiaj, wprowadzenie okresowej zmiany polegającej np. na świątecznej zmianie kolorów nie wymaga w ogóle udziału opiekunów masek sklepów, których rola będzie teraz sprowadzona do programowania nowych funkcji i zmiany budowy sklepu. Możliwość edycji dotyczy wszystkich masek, zarówno tych standardowych jak i indywidualnie tworzonych. Klient może zatem przygotować projekt, opiekun maski może go zakodować, a szczegółowe zmiany w CSS, grafikach i tekstach może wprowadzić sam klient. Praktycznie możliwe jest uzyskanie maski BASIC bez płacenia za ten proces ani złotówki. Naturalnie nadal możliwe jest angażowanie do wszystkich zmian opiekunów masek sklepów, wykonując operację tak jak dotychczas czyli zlecając zmiany w komunikatach graficznych.

Premiera modułu odbyła się na IAI-Day 2011, gdzie został on szczegółowo omówiony. Zostały zaprezentowane również dalsze plany rozwoju narzędzia, które obejmują samodzielną aktualizację masek do najnowszych komponentów. Najstarsze maski, podobnie jak miało to miejsce w przypadku samodzielnych tłumaczeń masek sklepów wymagają rekompilacji. Operację tą muszą przeprowadzić opiekunowie masek sklepów. Maski tworzone od paru tygodni oraz maski STANDARD, umożliwiają od razu przeprowadzanie samodzielnej edycji. W przyszłości planujemy m.in. rezygnację z narzędzia do edycji logo i topu (MODERACJA \ Wygląd elementów w sklepie \ Zarządzanie wyglądem elementów sklepu) przenosząc edycję do narzędzia edycji maski sklepu. W ten sposób wszystkimi grafikami maski będzie można zarządzać w zunifikowany sposób.

  • Pic. 1 - Menu wyboru operacji na masce. Można aktualizować maski (i zmieniać ich wersje), edytować lub tłumaczyć.
  • Pic. 2 - Z dowolnej maski można stworzyć kopię roboczą, czyli tzw. maskę do edycji.
  • Pic. 3 - W trybie edycji (włączanym poprzez przyklejone okienko w lewym-górnym rogu) można wprowadzać zmiany do dowolnych elementów. W trybie edycji wyłączonym można normalnie nawigować przez sklep.
  • Pic. 4 - W trybie edycji kliknięcie na dowolny element wywołuje okno z edycją ustawień danego komponentu. Kliknięcie na pole tekstowe podświetla edytowany element, podobnie jak ma to miejsce np. w Firebug.
  • Pic 5 - Edycja stylu pozwala nie tylko na edycję CSS, ale również wszystkich grafik, również tych użytych w CSS.
  • Pic. 6 - Edycja stylu pozwala nie tylko na edycję CSS, ale również wszystkich tekstów i to w wielu językach. Jest to zatem świetne uzupełnienie do modułu translacji. Pojedyncze słowo można poprawić jednym kliknięciem.

Aktualizacja 2011-05-19 11:30
Najstarsze maski, korzystające z frameworka JavaScript Prototype nie będą poprawnie pracowały z nowym mechanizmem edycji. Konieczna jest przebudowa JavaScript i wymiana Prototype na jQuery. Zmiany wydłużą proces aktualizacji maski sklepu. Bez zmian, możliwe jest nadal rozwijanie maski przez opiekunów masek sklepów, ale samodzielna edycja nie będzie działała poprawnie.