SHAREPOINT BRANDING. Lekcja praktyczna. Paweł Szczecki

Transkrypt

1

2 SHAREPOINT BRANDING Lekcja praktyczna Paweł Szczecki

3 PAWEŁ SZCZECKI Architekt rozwiązań SharePointowych Doradza jak wdrażać i korzystać z SharePointa Projektuje systemy i aplikacje oparte na lub integrujące się z SharePointem Razem z zespołem Predica dostarcza rozwiązania i produkty dla SharePointa Konsultant również w zakresie Business Intelligence i Identity Management opartych na technologiach Microsoft CV Związany z działem Microsoft Services przez 4 lata Od 3 lat architekt i partner zarządzający w firmie Predica pawel.szczecki@predica.pl

4 AGENDA Intro po co brandować? SharePoint branding o co chodzi? (podstawy) Projekt brandingu jego przebieg i na co zwrócić uwagę

5 INTRO PO CO BRANDOWAĆ? Intro po co brando wać? SharePoint branding o co chodzi? (podstawy) Projekt brandingu jego przebieg i na co zwrócić uwagę

6 CO DAJE BRANDING

7 CO DAJE BRANDING Zgodność z brandem marketingowym firmy Ulepszenie użyteczności witryn ( user experience ) Możliwość zmiany wizerunku portalu ( nie-sharepoint ) Ułatwia dostęp do informacji Podnosi poczucie przynależności

8 PRZYKŁADY STRON - FERRARI

9 PRZYKŁADY STRON -EMBRAER

10 PRZYKŁADY STRON - ENERGIZER

11 PRZYKŁADY STRON - MAERSK

12 PRZYKŁADY STRON - ORLEN

13 PRZYKŁADY STRON - PGE

14 PRZYKŁADY STRON - PREDICA

15 BRANDING: INTERNET VS. INTRANET Witryny publiczne Duża potrzeba brandowania oczywista - nacisk na atrakcyjność Wysoki stopień zmian w wyglądu i działaniu witryn Witryny wewnętrzne Dają poczucie lepszej identyfikacji z firmą poprzez spójny przekaz wizualny Często są to - podobne Internetowym - portale informacyjne o wydarzeniach w firmie Zgodność ze strategią zarządzania informacyjną w firmie

16 SHAREPOINT BRANDING O CO CHODZI? podstawy Intro po co brandow ać? SharePoint branding o co chodzi? (podstawy) Projekt brandingu jego przebieg i na co zwrócić uwagę

17 KONCEPCJE WITRYN Portale Sztywny layout lepsza czytelność Mało edytorów dużo czytelników SharePoint: portal publikowania (publishing site) Portale internetowe i główne strony intranetowe Witryny do pracy Pływający layout więcej miejsca do pracy Wielu edytorów SharePoint: witryna zespołu i pochodne (team site) Witryny intranetowe i ekstranetowe

18 INFRASTRUKTURA PUBLIKOWANIA Do czego służy Dostarcza funkcji tworzenia i zarządzania stronami z bogatą treścią Rozbudowuje możliwości nawigacji Umożliwia tworzenie zaawansowanych wizualnie stron bez znajomości kodowania HTML Pozwala na zarządzanie publikacją stron za pomocą przepływów pracy i harmonogramów Kiedy stosowana Portale informacyjne intra- i Internetowe Wymagany wysoki stopień możliwości wpływania na wygląd stron (także branding)

19 SHAREPOINT A BRANDING Elementy strukturalne: Strony wzorcowe master pages Układy stron layout pages (odpowiedniki stron składników web part (web part pages) w witrynach zespołu) Treść: składniki web part, typy zawartości (zawierające tekst, obrazki, etc.) Elementy wizualne Style Motywy

20 ELEMENTY BRANDINGU STRONA WZORCOWA Wspólna dla wszystkich stron Rozkład kluczowych elementów stron Elementy Menu ustawień Wstążka (ribbon) Tytuł i ikona Nawigacja Wyszukiwanie Ikonki społecznościowe Możliwość umieszczenia dodatkowych komponentów

21 ELEMENTY BRANDINGU STRONA WZORCOWA Źródło: MSDN

22 ELEMENTY BRANDINGU UKŁAD STRONY Definiuje rozkład elementów z treścią Powiązane silnie z typami zawartości Dla witryn z włączoną publikacją treści Witryny zespołu używają stron składników web part albo stron wiki

23 ELEMENTY BRANDINGU - TREŚĆ

24 BRANDING PERSPEKTYWY

25 BRANDING CO WIDZI UŻYTKOWNIK

26 BRANDING CO WIDZI ADMINISTRATOR TREŚCI

27 BRANDING PEŁNY OBRAZ

28 BRANDING + ARCHITEKTURA INFORMACJI

29 PROJEKT BRANDINGU jego przebieg i na co zwrócić uwagę (najlepsze praktyki?) Intro po co brandow ać? SharePoint branding o co chodzi? (podstawy) Projekt brandingu jego przebieg i na co zwrócić uwagę

30 PROJEKT - CHARAKTERYSTYKA Wbrew pozorom ( przecież to tylko kolorki ) skomplikowany ze względu na ilość różnych osób uczestniczących i szeroki zakres oddziaływania (wszystkie witryny) Role Marketing/PR koncepcje, wizerunek, prezentacja Grafik projekt graficzny, dodatki graficzne (ikonki, obrazki, etc.) Web master przygotowanie kodu HTML i styli CSS Developer kod stron wzorcowych i układów stron, dodatki SharePointowe (web parts, funkcjonalności na stronach wzorcowych, etc.) Administrator IT wdrożenie, utrzymanie, konfiguracja środowiska, bezpieczeństwa Edytor treści stworzenie stron, wprowadzenie treści, zdjęć, wideo, konfiguracja nawigacji Project Manager, Product Manager/Business Sponsor, etc.

31 FAZY PROJEKTU 1. Wizja przygotowanie wymagań i zarysu koncepcyjnego 2. Plan przygotowanie projektu technicznego i graficznego 3. Budowa zbudowanie rozwiązania 4. Stabilizacja przetestowanie rozwiązania 5. Wdrożenie zainstalowanie i uruchomienie rozwiązania MSF Interakcja KLIENT DOSTAWCA

32 1. WIZJA Cel: Określenie najważniejszych aspektów tworzonego brandingu Produkty: Dokument z wymaganiami dla brandingu Szkice koncepcyjne stron Zasady stosowania brandu korporacyjnego (jeżeli nie istnieje; przykłady: Symantec, Cambridge University) KLIENT DOSTAWCA

33 WYZWANIE: ZAKRES

34 WYZWANIE: ZAKRES Definicja Określenie co musi zostać dostarczone jako kompletny projekt brandingowy Sugestie Jakie typy witryn: portal, zespołowe, wyszukiwanie, moja witryna (My Site) Domyślne witryny niespójne pod względem wyglądu i nawigacji Jakiego typu strony: układy stron (layout page) czy web partowe Branding treści jakiego typu? (listy newsów, ogłoszenia, skróty artykułów ze zdjęciami, składniki web part) KLIENT DOSTAWCA

35 WYZWANIE: LAYOUT

36 WYZWANIE: LAYOUT Definicja Określenie jakiego typu layout i rozmieszczenie elementów bazowych jest potrzebny dla poszczególnych typów witryn Sugestie Layout ze sztywną szerokością dla witryn portalowych i news owych Layout rozszerzalny dla wszelkiego typu witryn współpracy a także wyszukiwania i mojej witryny (My Site) Rozmieszczenie menu nawigacyjnych (górne, boczne, folder) i akcji (użytkownika i wytryny), formatki wyszukiwania, przycisków socjalnych, tytułu strony, navigation breadcrumb KLIENT DOSTAWCA

37 WYZWANIE: KONCEPCJA GRAFICZNA

38 WYZWANIE: KONCEPCJA GRAFICZNA Definicja Zdefiniowanie wskazówek i pomysłów jak graficznie ma być zaprojektowana strona Sugestie Wiodąca kolorystyka zgodna z kolorystyką firmy Jak wyróżnić elementy interaktywne menu, linki Użycie szczególnych czcionek Charakter strony zgodny z przesłaniem i wartościami brandu firmy KLIENT DOSTAWCA

39 2. PLAN Cel: Specyfikacja szczegółowa tworzonego brandingu Produkty: Projekt graficzny Projekt techniczny rozwiązania Diagramy ze szczegółowymi szkicami stron ( wireframes ) i kolorystyką KLIENT DOSTAWCA

40 WYZWANIE: NAWIGACJA

41 WYZWANIE: NAWIGACJA Definicja Zdefiniowanie sposobu poruszania się po witrynach Sugestie Jak wykorzystywać górne i lewe menu SharePointa Uwaga: znaczne różnice w działaniu i konfiguracji menu pomiędzy witrynami zespołu a publikacji Dobre przetestowanie jak działają domyślne mechanizmy i trzymanie się ich Dodatkowa nawigacja nie dostępna w SharePoint jeżeli domyślna nie spełnia wymagań Nawigacja powinna być zdefiniowana jako część architektury informacji KLIENT DOSTAWCA

42 WYZWANIE: WSTĄŻKA

43 WYZWANIE: WSTĄŻKA (RIBBON) Definicja Przegląd i zmiana sposobu zachowania wstążki Sugestie Domyślnie ukryta dla użytkowników anonimowych Zawsze widoczna dla użytkowników zalogowanych Uwaga: także w środowisku intranetowym przy witrynach z wiadomościami jeżeli użytkownik ma dostęp tylko do odczytu Wpływa na sposób w jaki strona jest przewijana (blokuje górną sekcję) KLIENT DOSTAWCA

44 WYZWANIE: STRONY WZORCOWE (MASTER PAGE)

45 WYZWANIE: STRONY WZORCOWE (MASTER PAGE) Definicja Zdefiniowanie listy i zastosowania stron wzorcowych Sugestie Powinno być jak najmniej (np. 4: portal, współpraca, wyszukiwanie, moja witryna) Wszelkie wariacje układu strony mogą być w większości przypadków zaadresowane odpowiednio przygotowaną stroną wzorcową i zbiorem układów stron lub stron składników web part Dodatkowa funkcjonalność wymagana na niektórych stronach może być zaadresowana składnikami web part Strony wzorcowe powinny mieć dodatkowe (czasem nieużywane) obszary (placeholdery), które w razie potrzeby mogą być użyte przez układy stron KLIENT DOSTAWCA

46 3. DEVELOPMENT Cel: Napisanie rozwiązania stworzenie brandingu Produkty: Paczka SharePointowa z gotowym rozwiązaniem DOSTAWCA

47 WYZWANIE: OD CZEGO ZACZĄĆ?

48 WYZWANIE: OD CZEGO ZACZĄĆ? Definicja Jak zabrać się do robienia projektu brandingowego Sugestie Referencje na końcu prezentacji Wykorzystanie minimalistycznych stron wzorcowych Uwaga: minimal.master znajdująca się w SharePoint nie zawiera wszystkich elementów jest to specyficzna strona wzorcowa wykorzystywana przez witryny wyszukiwania i Office WebApps Narzędzia SharePoint Desiger bieżąca praca nad stronami, kod ASP.NET Visual Studio paczkowanie i strukturyzacja rozwiązania Edytory HTML (dostępne np. w przeglądarkach) edycja CSS i HTML DOSTAWCA

49 SUGESTIE DEVELOPERSKIE Rejestracja własnych CSSów w master page u Uwaga na kolejność Używanie klas CSS SharePointowych (referencja na końcu prezentacji) COREV4.CSS Przykład: do ukrywania elementów w okienkach dialogowych służy klasa s4 -notdlg DOSTAWCA

50 SUGESTIE DEVELOPERSKIE Motywy Kompilowane przez SharePoint kawałki CSS Konfigurowanie w kodzie DOSTAWCA

51 SUGESTIE DEVELOPERSKIE Zamiast usuwania niepotrzebnych elementów strony wzorcowej, lepiej ukryć je w niewidocznym panelu Włączyć cache dla elementów statycznych poprawa szybkości ładownia stron Nie powinno się edytować lub zamieniać domyślnych plików SharePointa (!) DOSTAWCA

52 4. STABILIZACJA Cel: Weryfikacja rozwiązania i zapewnienie jego bezawaryjności Produkty: Paczka SharePointowa z gotowym rozwiązaniem Rozwiązanie pozbawione (większości) błędów Dokument z instrukcją wdrożenia KLIENT DOSTAWCA

53 WYZWANIE: SCENARIUSZE TESTOWE

54 WYZWANIE: SCENARIUSZE TESTOWE Definicja Środowisko witryn SharePoint jest elastyczne w konfiguracji na poziomie każdej witryny, więc każda zmiana konfiguracyjna może mieć wpływ na poprawność wyświetlania brandingu Sugestie Testowanie na prawdziwych danych (nie lorem ipsum ) Pozwala łatwiej wizualnie wychwycić wszelkie niespójności w układach stron Przygotowanie scenariuszy testowych zawierających jak najwięcej skomplikowanych permutacji ustawień konfiguracyjnych witryn Wsparcie dla różnych przeglądarek KLIENT DOSTAWCA

55 WYZWANIE: ELASTYCZNOŚĆ SHAREPOINTA

56 WYZWANIE: ELASTYCZNOŚĆ SHAREPOINTA Definicja Projekt brandingowy może zmienić domyślne działanie części witryn SharePointa Sugestie Testowanie na środowisku jak najbardziej zbliżonym do produkcyjnego klienta Z naciskiem na włączenie wszystkich funkcjonalności używanych u klienta Testowanie porównawcze z włączonym i wyłączonym brandingiem KLIENT DOSTAWCA

57 5. WDROŻENIE Cel: Uruchomienie brandingu na środowisku produkcyjnym klienta Produkty: Zbrandowane środowisko SharePointowe Lub jeżeli wdrożenie przeprowadza klient: paczki wdrożeniowe (wsp), instrukcja wdrożenia i (opcjonalnie) skrypty wdrożeniowe (opcjonalnie) Dokumentacja instrukcji operacyjnych KLIENT DOSTAWCA

58 WYZWANIE: PRZYGOTOWANIE PACZKI

59 WYZWANIE: PRZYGOTOWANIE PACZKI Definicja Zgodna z najlepszymi praktykami paczka instalacyjna brandingu Sugestie Branding powinien być łatwo wyłączalny ułatwia to testowanie i automatyzację wdrożenia mechanizm funkcji SharePointa Rozwiązanie powinno być jak najbardziej oparte o domyślne mechanizmy SharePointa ułatwi to późniejszą rozbudowę i migracje do kolejnych wersji DOSTAWCA

60 WYZWANIE: ISTNIEJĄCA FARMA Definicja Wdrożenie brandingu na już działającą farmę SharePointową Sugestie Przygotowanie funkcji (features) umożliwiającej uruchomienie brandingu Istniejące witryny mogą zostać zbrandowane poprzez uruchomienie funkcji przez skrypty (PowerShell) Nowo tworzone witryny mogą zostać zbrandowane poprzez automatyczne uruchominie funkcji przy tworzeniu witryn (feature stapling) KLIENT DOSTAWCA

61 PODSUMOWANIE

62 TO BRAND OR NOT TO BRAND? Brandować! Dlaczego: Lepszy wizerunek Bardziej entuzjastyczna adopcja użytkowników (intranet) ale? Projekty brandingowe to nie tylko grafika! Branding może sięgać na każdą witrynę intranetową Projekt może być skomplikowany w koordynacji ze względu na zaangażowanie dużej ilości osób

63 OPCJE PROJEKTÓW

64 REFERENCJE Predica SharePoint branding Książka Professional SharePoint 2010 Branding and User Interface Design MSDN branding starter Startowe strony wzorcowe Domyślne style SharePointowe: Rankingi zbrandowanych stron SharePointowych Blog na tematy brandowania i interfejsów użytkownika Dużo przydatnych materiałów branding/

65