O WebMatrix é uma IDE (Integrated Development Environment) que
contém todos os recursos necessários para a criação de páginas web em
ambiente Windows, simples e fácil de aprender, a ferramenta é ideal para
quem está iniciando no desenvolvimento de projetos web, pois  a
Microsoft procurou simplificar os passos iniciais necessários para o
desenvolvimento de projetos.

Com o WebMatrix é possível codificar, testar e publicar um projeto
web de forma simples, não sendo necessário realizar diversas
configurações antes de iniciar o desenvolvimento, como por exemplo, as
configurações do servidor web e o gerenciamento das bases de dados, com
ele podemos imediatamente iniciar a criação do projeto e isso pode
facilitar o aprendizado para os iniciantes em aplicativos web.

O WebMatrix é gratuito, o foco do WebMatrix é oferecer uma
experiência intuitiva e prática para novos desenvolvedores entrarem no
mundo das aplicações web, sem que seja necessário uma longa curva de
aprendizado, para aplicativos complexos onde existe a necessidade de
projetos escaláveis e com níveis elevados de segurança, a ferramenta
indicada é o Microsoft Visual Studio 2010. O WebMatrix é totalmente
integrado ao Visual Studio 2010, uma aplicação dentro do WebMatrix pode
ser aberta no Visual Studio com apenas um click em um botão.

A IDE inclui o Internet Information Server Express (IIS Express),
que é um servidor web de desenvolvimento, também inclui o  ASP.NET, um
frameword web e o SQL Server Compact, uma banco de dados integrado, com
esse conjunto de tecnologias você tem o básico para iniciar páginas web
que manipulam dados.

Uma das grandes vantagens da ferramenta é a interoperabilidade com
outras tecnologias de código aberto na plataforma Microsoft, através do
recurso “Site from Web Gallery”, podemos ter acesso a algumas das mais
populares soluções web, como WordPress, BlogEngine .net, Phpbb, entre
dezenas de outras com apenas alguns cliques.

Neste artigo você conhecerá o WebMatrix, também será apresentado
como instalar o WebMatrix Beta 3 utilizando o Web Platform Installer,
veremos o ambiente de desenvolvimento da IDE e em seguida será realizada
uma aplicação simples, onde você poderá criar a sua primeira página web
utilizando o WebMatrix Beta 3.

Instalando o WebMatrix Beta 3

A Instalação do WebMatrix Beta 3 é feito através do Microsoft Web
Patform Installer, essa ferramenta disponibiliza uma forma simples de
instalar um ambiente completo com base em tecnologias Microsoft .NET,
para instalar o WebMatrix faça o Download do Web Platform Istaller no
link  http://www.microsoft.com/web/webmatrix/ , o tamanho do arquivo é de 7,09 MB e a versão utilizada no artigo é a 3.0.

A Primeira tela do instalador do Microsoft WebMatrix Beta 3
apresenta uma breve descrição da ferramenta e algumas informações da
IDE, com o tamanho do arquivo, versão e data do último release, clique
no botão Install para iniciar a instalação da ferramenta.

Figura 1 – Instalação do WebMatrix Beta 3

A Próxima etapa apresenta os produtos e componentes que serão
instalados, clique no botão “I Accept” para aceitar os termos de
licenças dos produtos que serão instalados pelo Web Platform Installer.

Figura 2 – Aprovação das licenças dos produtos a serem instalados

A próxima tela apresenta os itens que foram instalados pelo Web
Platform Installer, um deles é o próprio Microsoft WebMatrix Beta 3, 
com poucos cliques instalamos o WebMatrix e  temos um ambiente
configurado e preparado para a criação de páginas web.

Figura 3 – Fim da instalação

Conhecendo o ambiente de desenvolvimento

A Interface visual do WebMatrix é muito simples e elegante, com
botões intuitivos e modernos, ele procura facilitar para que a tarefa de
criar uma aplicação web não seja necessariamente uma tarefa complexa.
Codificar uma página web não é uma tarefa simples, principalmente para
quem está conhecendo agora e aprendendo seus primeiros conceitos,
portanto a Microsoft buscou com o WebMatrix criar uma experiência mais
simples e prática.

A Primeira tela do WebMatrix é a QuickStart, nela temos quatro
links , o primeiro é o My Sites, onde podemos abrir um site já existente
do WebMatrix, em seguida temos o Site From Gallery, nele podemos criar
um site baseado em uma galeria de projetos com código fonte aberto e com
poucos cliques temos acesso aos mais conhecidos softwares de
gerenciamento de blogs, fóruns, CRM, e-commerce , entre outros, a opção
Site From Template, proporciona uma forma de criar páginas baseadas em
modelos,  e por fim , temos a opção Site From Folder, onde podemos criar
um projeto vazio em um determinado diretório.

Figura 4 – Tela inicial do WebMatrix

Figura 5 – Site from Web Gallery

O opção Site From Template disponibiliza cinco modelos para você escolher e criar um projeto com base neles, são eles:

• Empty Site – Este é um modelo mais básico, um site vazio, escolha
  essa opção se nenhum outro modelo atende suas necessidades, ou se deseja
  importar os arquivos de um site existente, ou ainda se deseja iniciar
  um projeto do zero.
• Starter Site – Um modelo com um layout profissional definido e com um sistema de login.
• Bakery – Um modelo completo para uma página de vendas de produtos, incluindo toda o código para a  manipulação dos dados.
• Photo Gallery – Um modelo para o gerenciamento de imagens com um sistema de login de usuários incluso.
• Calendar – um modelo para o gerenciamento de calendários, com
  sistema de login de usuários, controle de eventos e seleção de temas.

Figura 6 – Site from Template

Figura 7 – Modelo de projetos com calendários

Após iniciar um projeto, o ambiente de trabalho do WebMatrix será
apresentado,ele é divido em Spaces (espaços), existem quatro espaços
principais na IDE, são eles:

• Site

Site é o espaço principal do WebMatrix em uma aplicação, nele temos
diversas informações sobre o projeto como a URL e porta utilizadas, o
caminho da aplicação, atalhos para os outros espaços do ambiente,
configurações para a publicação do projeto em um servidor na internet,
versões do framework utilizadas, configurações de SSL e links para que
você possa enviar sugestões ou reportar bugs a Microsoft.

Figura 8 – Espaço Site

• Files

Em Files temos o acesso aos arquivos utilizados no
projeto, nele podemos adicionar diversos modelos de arquivos, existem 25
templates que podem ser inseridos, com suporte total aos mais comuns
como o HTML, CSS, JScript, ASPX, PHP, XML e CSHTML, este último é
utilizado para os arquivos construídos sob o ASP.NET Razor, utilizando
como base a sintaxe da linguagem C# .NET.

Figura 9 – Tipos de Arquivos suportados

• Database

Database é o espaço específico para o
gerenciamento de informações em banco de dados, o WebMatrix já vem com o
SQL Compact CE incluso, mas é possível migrar para o SQL Server, e
recomendado caso você precise manipular um grande número de registros. O
Espaço ainda tem botões para a criação rápida de base de dados, tabelas
, inserir campos, adicionar chaves primarias e outras tarefas básicas
para a criação e manipulação de dados , é possível inclusive executar
instruções SQL, sendo um ambiente perfeito e integrado para a criação de
aplicativos com pouca complexidade, facilitando o aprendizado e
permitindo que o programador tenha foco no website.

Figura 10 – Espaço Database

• Reports

Neste espaço podemos emitir um relatório com
diversas informações importantes para o desenvolvedor avaliar o seu
projeto, essas informações são importantes para a melhoria dos
buscadores de internet, dentre as informações que o relatório nos
fornece, estão os links quebrados no projeto e a visualização das tags
HTML que não estão corretamente definidas, proporcionando um meio rápido
de ir direto ao ponto e corrigi-las.

Criando sua primeira página web com WebMatrix

1. Inicie o WebMatrix

Figura 11 – Quick Start ( tela inicial )

2. Clique em Site From Template, onde temos os modelos que o
WebMatrix disponibiliza, selecione a opção Empty Site e em Site Name
informe o nome da aplicação, em seguida clique no botão OK que a
aplicação será criada pela IDE.

Figura 12 – Selecionando um Template

3. Um menu Ribbon aparecerá no topo do WebMatrix,  nele temos
alguns botões que executam tarefas diversas,  por exemplo, executar o
projeto, testar e publicar,  os Spaces estão localizados no canto
inferior esquerdo, localize e clique no espaço Files, nele podemos
manipular arquivos e diretórios, no centro da tela tem um link “Add a
file to your site”, clique e adicione um modelo do tipo CSHTML ao
projeto.

Figura 13 – Espaço Files

4. Uma página com uma marcação HTML é apresentada.

Figura 14 – Página cshtml

5. Neste momento podemos modificar o arquivo Page.cshtml, neste
exemplo, vamos inserir um texto dentro da tag <body>, salvar o
projeto e clicar no botão Run que está localizado no Ribbon.

Figura 15 – Primeira aplicação

6. Projeto sendo executado no Browser.

Figura 16 – Projeto sendo executado no browser

Conclusão

O WebMatrix ainda está em fase BETA mas já proporciona uma forma
simples e prática de construir aplicações web, uma ferramenta gratuita
que proporciona em um ambiente integrado um conjunto de modelos que
podem facilitar o desenvolvimento de aplicações web, principalmente em
aplicações pequenas ou de médio porte.

Em conjunto com o ASP.NET Razor, o WebMatrix apresenta uma
oportunidade para os iniciantes na plataforma .net ou no desenvolvimento
de aplicações web de ter uma experiência simplificada, podendo ser a
porta de entrada para o universo da plataforma .NET.