Cada vez mais vemos as organizações a investir na imagem, na criação de uma marca que o público abrace e na qual se reveja. Há todo um processo desde definição de cores, tipos de letra, criação de logotipos, modelos de documentos, banners, web sites, entre outros.
Ao mesmo tempo, surgem também necessidades sociais como usabilidade e acessibilidade, que permitem atingir uma fatia mais abrangente do público, enquanto se respeitam valores sociais, e padrões de desenvolvimento.
Quando usamos plataformas colaborativas, como é o caso do SharePoint, podemos subdividir o desenvolvimento de soluções de branding em várias partes, sendo que tipicamente, encontramos dois cenários: desenvolver um design "simples" (tema) ou desenvolver toda uma solução de customização completa da aplicação web.
Para os requisitos deste post, vamos apontar o foco para a parte de "Development", considerando três pontos essenciais: aplicações, boas práticas e deployment.
Antes de começar, convém preparar todas as ferramentas que virão a ser necessárias.
1.1. SharePoint Designer
Já todos o conhecemos. Permite customizar directamente o esquema da master page (conteúdos vísiveis em todas as páginas), do page layout (conteúdos visíveis em uma página ou conjuntos de páginas) e da própria página.
É um recurso fundamental para a fase de teste-erro da CSS, desenvolvimento de rollups de conteúdos (DataViewWP, CQWP, CEWP), customização de formulários de inserção/visualização, etc, etc, etc.
SHAREPOINT DESIGNER 2007
SHAREPOINT DESIGNER 2010 32 BITS
SHAREPOINT DESIGNER 2010 64 BITS
Nota: O SPD 2007 só funciona com WSS3/MOSS2007 e o SPD 2010 só com SharePoint 2010. Para ter ambos, têm de ser instaladas as mesmas versões (x86/x64).
1.2 Firebug / IE Developer Toolbar
Entre muitas ferramentas, há sempre aquelas que usamos no nosso dia-a-dia, sem excepção. Se desenvolvemos para a web, o firebug estará certamente entre elas.
Desde inspecção de HTML/CSS, até cálculos de medidas e espaçamento, passando pelas chamadas HTTP a .JS, .CSS e .ASPX e injecção directa de html e javascript. Permite-nos saber com rapidez e exactidão onde encontrar o que queremos e definir as alterações necessárias, evitando demoradas fases de tentativa/erro.
1.3 Outras apps
Outras aplicações úteis:
- Fiddler 2 - permite visualizar todas as chamadas HTTP, fazer troubleshoot de pedidos negados, injectar pedidos, etc.
- Screengrab - guardar toda a página, mesmo com scroll, num png
- YSlow, testes de desempenho e dicas para melhorar
- SuperPreview - testes IE6/7/8
2.1 CSS Reset: o estilo poderoso
Uma das práticas em voga é definir uma base de estilos e criar todo um sistema de herança por toda a CSS. Em vez de centenas de tamanhos de fonte, tipos de letra, espaçamento, etc., temos um estilo base (p.ex. Arial, 12, preto).
P.ex.
body { font-family: Arial; font-size:12px; color:#000000; }
Se tivermos um estilo de SharePoint que use Times 14px, podemos fazer:
.estilosp { font-family: inherit; font-size:inherit; }
Se quisermos um tamanho de texto diferente, em vez de colocar um tamanho fixo, colocamos antes um derivado:
.estilosp { font-size:1.5em; }//1.0em = 100% do valor herdado
Esta forma de desenvolvimento da CSS permite:
- One-touch style change. Basta mudar o 12px para 14px ou Arial para Times e todo o site irá adequar-se.
- Não haverá estilos soltos e repetitivos. É bom para a rapidez nas alterações, para a usabilidade e mesmo para a acessibilidade.
2.2 Estruturar a CSS
Uma correcta apresentação da folha de estilhos provar-se-á útil para encontrar estilos e para ser compreendida por terceiros.
2.3 Adicionar comentários (úteis!) sempre que possível
Convém sempre definir um esquema de ordenação dos estilos (eu prefiro uma análise top-down, inserindo estilos desde o globalbreadcrumb, passando pelo globaltitle, e por fim o maincontent).
Comentários curtos e concisos, evitando informação óbvia e/ou desnecessária (aqui alguns exemplos do que não fazer!).
2.4 Comprimir CSS/JavaScript
O YUI Compressor permite remover comentários, espaços, linhas brancas, entre outros, e criar um output de igual funcionalidade, com elevados benefícios de espaço.
Basta ter o java runtime instalado e obter o arquivo yuicompressor-2.4.2.jar.
Para comprimir um arquivo CSS/JS:
java -jar yuicompressor-2.4.2.jar theme_uncompressed.css -o theme.css
2.5 Usar CSS!
Muitas alterações à master page podem ser resolvidas com modificações por CSS. Isto concede vários benefícios:
-
Desempenho da página
-
Alterações no próprio documento CSS (sem chekin/checkou, publish, etc.)
-
Evitar inline styles (que não passam em alguns validadores html)
-
Funcionalidade cross-template. Alterações à master não se propagam para os restantes site templates.
-
Maior facilidade nos testes cross-browser
-
Possibilidade de compile/minimize
-
Alterações em estilos repetidos podem ser sobrepostas com o parâmetro !important.
Depois do design montado, normalmente em Photoshop, Expression, etc., chega a hora de partir para o desenvolvimento da solução. Pessoalmente, gosto de trabalhar com features, tirando partido de um deliverable composto (WSP + SharePoint Solution Installer).
Entre outros parâmetros, podemos indicar a obrigatoriedade de requisitos mínimos (WSS/MOSS), nome da WSP, nome da solução, versão, logotipo.
No SP2010, enquanto não há Solution Installer, temos sempre PowerShell para gerar um instalador. Além disto, podemos usar PowerShell com Windows Remoting para fazer o deploy de soluções remotamente!
|
4. Criar uma solução de design / tema |
Para quem quer criar um tema para SharePoint, aconselho vivamente a darem uma vista de olhos no vídeo do Chris Auld, que explica ao detalhe como criar um tema usando features e rootfiles.
Estes temas, em SharePoint 2007, funcionam em SharePoint 2010, caso a master seja alterada para a Default.master, que é uma master page V3. No entanto, é apenas um suporte de retro compatibilidade, ficando o layout do 2010 igual ao do 2007.
Sendo assim, para criar um tema que funcione em SharePoint 2010, com layout efectivamente do 2010, como o método web.ApplyTheme() apenas copia a pasta do tema da 12 para a _themes da site collection (não adiciona a referência da CSS), temos que arranjar outra forma de dizer à master para usar a nossa folha de estilos (theme.css), como por exemplo:
web.AlternateCssUrl = "/_themes/" + theme + "/" + "theme.css";
Com isto podemos criar temas como antes, e com a funcionalidade de activação nas site features.
Os novos "temas" na minha opinião são demasiado simplistas e explicam-se por si mesmos, dado que não serão abordados com em pormenor. Permitem alterar 12 cores e 2 tipos de letra, o que para quem não sabe CSS até é bom, mas acabam por ser demasiado limitativos. Na palete de cores temos, na horizontal, as cores Dark1, Light1, Dark2, Light2, seguido dos Accents 1 a 6. Na vertical, temos as variantes da mesma cor: no topo temos a cor base, seguido dos derivados, lightest, lighter, medium, darker, darkest.
O desenvolvimento de uma solução de branding pode ser dividido em três partes: design, produção e instalação. Convém existir sempre um certo nível de abstracção entre estas etapas, até porque muitas vezes vão ser implementados por grupos de pessoas diferentes (Designer, Developer, IT Pro). No entanto, é comum cada um dos grupos ter "SharePoint Awareness", para facilitarem as tarefas uns dos outros.
Para criar um design atractivo, e enquadrado às necessidades de cada situação, convém ter algumas noções de usabilidade, ter creatividade, e experiência de tratamento de imagem. Um bom starting point são as
PhotoShop templates do making SharePoint Look Good. Além de PhotoShop, é comum usar outras aplicações como Expression Design, SharePoint Designer, entre outros.
Nesta fase, dar-se-á a implementação do design. Separação de imagens, desenvolvimento da CSS associada, e criação de features. Aqui vamos certamente usar SharePoint Designer, Visual Studio, FireBug, etc.
Se criarmos um tema "Tester" através de uma feature, vamos precisar de:
- Tester.inf com informação de nome, versão e LCIDs
- thTester.bmp, com preview do tema para aparecer na lista de temas
- theme.css com a CSS desenvolvida
- testerlogo.gif, se quisermos atribuir um logo à feature
- Todas as imagens utilizadas na CSS (1033\Images\Tester)
Podem ver
aqui como criar um tema em 5 minutos!
A fase de instalação significa o deployment na solução no servidor. Normalmente, é feito usando a Central Admin, sendo para isso preciso um
add-in para criar a funcionalidade de upload de WSPs; ou então usando SharePoint Solution Installer já referido.