Crie sua marca online com uma combinação do SharePoint 2013 e as tecnologias da Web que você já conhece

Artigo original publicado na segunda-feira, 25 de fevereiro de 2013

Esta postagem é uma introdução a como você pode usar com facilidade o Gerenciador de Design junto com as ferramentas de design da Web com as quais você se sente mais confortável para definir a marca online de sua empresa usando o sólido sistema de recursos de gerenciamento de conteúdo que é o SharePoint 2013.

Com o SharePoint 2013, você pode promover seu site de publicação do SharePointusando as tecnologias da Web que você conhece, as ferramentas que gosta e os dispositivos que deseja, o que torna mais fácil do que nunca começar como designer ou desenvolvedor do SharePoint. Além disso, os profissionais atuais do SharePoint não precisam se preocupar. O empenho de vocês em aprender o SharePoint até agora ainda é bastante aplicável e o conhecimento sobre o modelo da Página de Publicação do SharePoint ainda é incrivelmente útil.

Esta postagem apresenta uma visão geral sobre como você pode usar com facilidade o Gerenciador de Design e os Canais do Dispositivo do SharePoint 2013 junto com as ferramentas da Web com as quais você se sente mais confortável para definir a marca online de sua empresa. Embora mantendo a mesma infraestrutura de processamento de página, fizemos três melhorias principais em como você promove um site de Publicação do SharePoint.

Use as tecnologias da Web que você conhece

SharePoint ainda mantém suas páginas mestre e layouts de página no ASP.NET, mas agora você também podeprojetar suas páginas mestre e layouts de página em HTML, inclusive usando trechos de HTML dos controles do SharePoint. Em segundo plano, o SharePoint cria o arquivo ASP.NET correspondente que ele deseja, mas que você acaba ignorando.

Anteriormente, você podia usar CSS e JavaScript para definir o estilo de seu site, mas agora eles estão totalmente integrados em sua experiência de desenvolvimento da Web do SharePoint. Tivemos muito trabalho com a visualização de HTML para que você possa definir o estilo do HTML diretamente, em vez de usar o servidor para visualizá-lo. Porém, se você visualizar no servidor, poderá fazê-lo no contexto de qualquer página do SharePoint que escolher!

O trabalho com as tecnologias da Web que você conhece vai além do nível de layout de página. A Web Part de Consulta de Conteúdo que exigia que você projetasse em XSLT ainda é válida, mas a nova Web Part de Pesquisa de Conteúdo é um módulo importante para a criação de experiências orientadas por pesquisa no SharePoint 2013. Assegurar que havia uma excelente experiência de design para acompanhar era muito importante para nós; portanto, ela pode ser personalizada com JavaScript, HTML e CSS.

Visto que não estamos presumindo que você tenha algum conhecimento do SharePoint, oferecemos o Gerenciador de Design para ajudar a orientá-lo na promoção de seu site de publicação. Este Gerenciador de Design fornece uma experiência semelhante a um assistente para dar a você orientação para o desenvolvimento do SharePoint lado a lado com pontos de entrada para a exibição e o trabalho com seus arquivos de design. Cada uma das etapas tem também seu artigo de documentação no MSDN (Microsoft Developer Network):

• Visão Geral
• Gerenciar Canais do Dispositivo
• Carregar Arquivos de Design
• Editar Páginas Mestre
• Editar Modelos de Exibição
• Editar Layouts de Página
• Publicar e Aplicar Design
• Criar Pacote de Design

Personalize o SharePoint com as ferramentas que você gosta

A personalização do design de seu site é muito mais do que converter HTML em ASP.NET. Para ajudá-lo a criar seu site com êxito, espaços reservados populares estão prontos e aguardando seu conteúdo. No que se refere aos layouts das páginas, inserimos todos os campos de página que são exclusivos ao tipo de conteúdo escolhido por você. Assim, a criação de seus arquivos de design do SharePoint se transforma em simples questões de edição e ajuste, e não de criação.

Com a Galeria de Trechos de Código, você tem um bom ponto de partida para adicionar a funcionalidade do SharePoint a seu site. Para quem está familiarizado com versões anteriores do SharePoint, pense nisso como o conjunto de controles que você acessaria no SharePoint Designer, porém um pouco mais do que isso. A Galeria de Trechos de Código oferece uma versão em HTML (incluindo, em muitos casos, uma visualização estática para mostrar com o que você está trabalhando enquanto edita seu arquivo em algo semelhante ao modo divisão do Dreamweaver) de um conjunto de componentes comuns, inclusive todas as Web Parts da galeria de Web Parts. Para cada trecho de código, você precisa ajustar as propriedades dele e simplesmente copiá-lo em sua página mestre ou layout de página HTML para que o SharePoint o transforme, em segundo plano, no controle ASP.NET de que ele precisa.

Figura 1. No topo da página da Galeria de Trechos de Código, há uma faixa de opções com todos os trechos de código. O corpo da página contém a descrição, as propriedades e o código HTML do trecho de código, além de uma visualização ao vivo. Todas as páginas mestre têm a mesma galeria de trechos de código, que é ligeiramente diferente da galeria dos layouts de página. Além disso, a galeria de trechos de código de um layout de página depende do tipo de conteúdo (pois os campos da página mudam).

Experimente o SharePoint em qualquer dispositivo

As pessoas não estão mais simplesmente acessando seu site usando um mouse em um desktop ou laptop. Existe um universo com vários dispositivos lá fora: tablets, telefones e Surfaces, puxa vida! Como você cria uma experiência para seus usuários de forma a utilizar melhor o tamanho de tela deles? Otimizada para dispositivos baseados em toques? No SharePoint 2013, os Canais do Dispositivo ajudam a apresentar seu site da maneira mais ajustada a qualquer dispositivo que o visitante esteja usando para navegar. Como o designer, você começa a pensar sobre como deve ser a experiência de seu site em todos os diversos fatores forma, diferenciada por subcadeia de caracteres do agente do usuário atribuída a até 10 canais distintos.

Cada canal pode alcançar vários dispositivos. Por exemplo, você pode ter um canal para Windows Phones e iPhones, pois eles têm um tamanho de tela semelhante, e um canal separado para o iPad. Você pode usar uma página mestre e um CSS diferentes por canal e pode também destinar o conteúdo a canais particulares, tudo isso enquanto mantém exatamente a mesma URL (o que é ótimo para fins de usabilidade e otimização do mecanismo de pesquisa).

Usando a infraestrutura de Canal de Dispositivo, você tem a oportunidade de usar os Painéis de Canal de Dispositivo, que são um grande ativo para direcionar o conteúdo. O conteúdo inserido em um desses painéis é processado apenas nos canais que você especifica com base na lógica do servidor, o que diminui o tempo de carregamento da página e o número de bytes enviados durante a transmissão. A combinação desses painéis com um design de CSS responsivo resulta em uma experiência do usuário mais rápida e modernizada. Em vez de ter diferentes canais com base no tamanho da tela, como no exemplo anterior, você pode ter um canal baseado na subcadeia de caracteres "iOS" que capture iPads, iPhones e mini iPads e envie uma única página mestre que carrega diferentes CSS com base na resolução de tela do dispositivo. Por exemplo, se você era da equipe do Windows Phone, você poderia atingir dispositivos iOS e criar um painel para anunciar o Windows Phone. 

Figura 2 e Figura 3. Modelos de design do navegador e experiências móveis lado a lado para um site de notícias baseado no recurso Publicação entre Conjuntos de Sites, usando CSS responsivo, Painéis de Canal de Dispositivo e um modelo de exibição que altera a aparência dos resultados da Web Parte de Pesquisa de Conteúdo com base nos Canais do Dispositivo.

Esta postagem foi uma introdução a como você pode definir com facilidade a marca online de sua empresa usando as ferramentas com as quais se sente mais confortável e o sistema sólido de gerenciamento de conteúdo do SharePoint 2013. Para saber mais, verifique todo o conteúdo que nossos autores de documentação geraram para você no MSDN. Os artigos Construir sites para o SharePoint 2013, Visão Geral do Gerenciador de Design no SharePoint 2013 e Desenvolver o Design do Site no SharePoint 2013 são excelentes para você começar. Bons designs!

– Alyssa Levitz, gerente do programa SharePoint 

Esta é uma postagem traduzida do blog. Você pode encontrar o artigo original em Create your online brand with a combination of SharePoint 2013 and the web technologies you already know