ASP.NET
Themes, Skins e WebParts
Designs customizáveis com ASP.NET
Neste artigo veremos
· Como utilizar Themes e Skins em uma aplicação Veb;
· Como utilizar Web Parts;
· Dicas para melhorar a interface de aplicações Web.
Qual a finalidade?
· A finalidade é melhorar ainda mais a experiência do usuário em nossas aplicações;
Quais situações utilizam esses recursos?
· Podemos utilizar esses recursos em praticamente todo tipo de Web Site, desde os mais simples até os portais mais complexos;
Resumo do DevMan
A parte visual de um Web Site juntamente com a usabilidade dele, certamente são pontos importantes na decisão do internauta em continuar ou não a navegar pelas páginas. Para melhorar a experiência do usuário no sistema, nos valemos das mais variadas técnicas e conceitos de desenvolvimento.
Nesse artigo veremos alguns recursos interessantes para chamar a atenção e melhorar essa experiência do usuário em nosso Web Site. Veremos como construir sites usando Themes e Skins, além de saber como utilizar Web Parts na prática.
Sabe aqueles sistemas em que você pode escolher o layout gráfico da interface? O sistema possui vários skins ou templates que podem ser trocados a hora que desejarmos, assim uma hora o aplicativo é amarelo outra azul, dependendo do skin definido. Conhece isso? O próprio Windows permite este tipo de configuração quando trocamos o esquema de cores nas propriedades do vídeo.
E o que você acha de embutir este tipo de funcionalidade em seus Web Sites? Pois é isso que iremos ver neste artigo. No ASP.NET temos as funcionalidades de Themes e Skins, que nos permite criar múltiplas formatações de layout, de uma forma bem simples e intuitiva.
Além disso, nessa mesma linha de designs customizáveis, vamos dar uma olhada em um recurso muito interessante, chamado WebParts. As WebPats, assim como os Themes e Skins já estão disponíveis no ASP.NET desde a versão 2.0. Com elas podemos criar interfaces Web onde podemos carregar mini-aplicativos em espaços pré-definidos na página.
Pasta App_Themes
Vamos começar com os Themes e Skins, criando um novo WebSite ASP.NET no Visual Web Developer 2008 Express, versão gratuita do Visual Studio 2008 para desenvolvimento de aplicações Web (veja como e onde baixar na nota do DevMan).
Abra o Visual Web Developer e vá até a opção File>New Web Site. Em Name informe WMThemesSkins e clique em OK.
Arraste na página Default.aspx um Label, um TextBox e um Button. Vamos formatá-los dando destaque para a cor vermelha, veja como deve ficar na Figura 1, onde você pode conferir o Design e o source da página.
Basicamente alteramos as propriedades BackColor, ForeColor e Size dos controles, para destacar a cor Vermelha neste design.
Figura 1. Design com destaque em Vermelho
Nota do DevMan
Você sabia que a Microsoft disponibiliza versões gratuitas do Visual Studio 2008, e do banco de dados SQL Server 2008? Estas são as conhecidas edições Express destes produtos, e você pode realizar o download gratuitamente através deste site:
http://www.microsoft.com/express
Neste site você encontrará os downloads das versões gratuitas do Visual Studio 2008 e do SQL Server 2008:
- Visual C# 2008 Express Edition: Para o desenvolvimento de aplicações Windows, Class Library e Console com a utilização da linguagem de programação C#.
- Visual Basic 2008 Express Edition: Tem a mesma função da versão acima, porém para programadores VB.NET.
- Visual C++ 2008 Express Edition: Para os admiradores de C++ que quiserem trabalhar na plataforma .NET
- Visual Web Developer 2008 Express Edition: É a versão Express do Visual Studio 2008 para o desenvolvimento de aplicações Web, com a utilização do ASP.NET. Baixe esta versão se você quiser fazer os exemplos deste artigo.
- SQL Server 2008 Express: edição gratuita do mais nova versão do banco de dados da Microsoft, o SQL Server 2008.
Até aqui não vimos novidade nenhuma. Vamos agora criar uma estrutura de pastas para utilizarmos os Themes e Skins neste WebSite. Como nos mostra a Figura 2, vá à Solution Explorer e clique com o botão direito sobre o nome do projeto.
Vá até a opção Add ASP.NET Folder e clique na opção Theme. Veja que uma pasta especial do ASP.NET é criada com o nome de App_Themes, e dentro desta pasta foi criada mais uma subpasta com o nome Theme1, que vamos substituir para Vermelho.
Como você já deve estar imaginando, cada pasta corresponde a um Theme em nosso projeto. Sendo assim, vamos criar mais duas pastas dentro de App_Themes, uma chamada Azul e outra Verde. No final sua Solution Explorer deve estar como nos mostra a Figura 3.
Figura 2. Criando o Folder Theme do ASP.NET
Figura 3. Pastas criadas dentro de App_Themes
Arquivos skin
...
