SHAREPOINT BRANDING Lekcja praktyczna Paweł Szczecki
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
AGENDA Intro po co brandować? SharePoint branding o co chodzi? (podstawy) Projekt brandingu jego przebieg i na co zwrócić uwagę
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ę
CO DAJE BRANDING
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
PRZYKŁADY STRON - FERRARI
PRZYKŁADY STRON -EMBRAER
PRZYKŁADY STRON - ENERGIZER
PRZYKŁADY STRON - MAERSK
PRZYKŁADY STRON - ORLEN
PRZYKŁADY STRON - PGE
PRZYKŁADY STRON - PREDICA
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
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ę
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
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)
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
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
ELEMENTY BRANDINGU STRONA WZORCOWA Źródło: MSDN
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
ELEMENTY BRANDINGU - TREŚĆ
BRANDING PERSPEKTYWY
BRANDING CO WIDZI UŻYTKOWNIK
BRANDING CO WIDZI ADMINISTRATOR TREŚCI
BRANDING PEŁNY OBRAZ
BRANDING + ARCHITEKTURA INFORMACJI
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ę
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.
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
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
WYZWANIE: ZAKRES
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
WYZWANIE: LAYOUT
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
WYZWANIE: KONCEPCJA GRAFICZNA
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
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
WYZWANIE: NAWIGACJA
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
WYZWANIE: WSTĄŻKA
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
WYZWANIE: STRONY WZORCOWE (MASTER PAGE)
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
3. DEVELOPMENT Cel: Napisanie rozwiązania stworzenie brandingu Produkty: Paczka SharePointowa z gotowym rozwiązaniem DOSTAWCA
WYZWANIE: OD CZEGO ZACZĄĆ?
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
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
SUGESTIE DEVELOPERSKIE Motywy Kompilowane przez SharePoint kawałki CSS Konfigurowanie w kodzie DOSTAWCA
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
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
WYZWANIE: SCENARIUSZE TESTOWE
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
WYZWANIE: ELASTYCZNOŚĆ SHAREPOINTA
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
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
WYZWANIE: PRZYGOTOWANIE PACZKI
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
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
PODSUMOWANIE
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
OPCJE PROJEKTÓW
REFERENCJE Predica SharePoint branding http://www.predica.pl/en/solutions/products/pages/branding.aspx Książka Professional SharePoint 2010 Branding and User Interface Design MSDN branding starter http://msdn.microsoft.com/en-us/library/gg430141.aspx Startowe strony wzorcowe http://startermasterpages.codeplex.com/ Domyślne style SharePointowe: http://sharepointexperience.com/csschart/csschart.html Rankingi zbrandowanych stron SharePointowych http://www.wssdemo.com/livepivot/ http://www.topsharepoint.com Blog na tematy brandowania i interfejsów użytkownika http://www.thesharepointmuse.com/ Dużo przydatnych materiałów http://www.thesharepointmuse.com/sharepoint-2010- branding/