20/08/2015

IntroduoaoWebMatrix|MSDN

Entrar

Assinaturas do MSDN

Obter ferramentas

Introduo ao WebMatrix
Alexandre Tadashi Sato
Janeiro 2011
Tecnologias: WebMatrix Beta 3

Sumrio: Este artigo tem como objetivo apresentar uma introduo ao WebMatrix, uma IDE Integrated Development
Environment voltado aos desenvolvedores de aplicativos web.

Contedo
Introduo
Instalando o WebMatrix Beta 3
Conhecendo o ambiente de desenvolvimento
Criando sua primeira pgina web com WebMatrix
Concluso
Sobre o Autor

Introduo
O WebMatrix uma IDE Integrated Development Environment que contm todos os recursos necessrios para a
criao de pginas web em ambiente Windows, simples e fcil de aprender, a ferramenta ideal para quem est
iniciando no desenvolvimento de projetos web, pois a Microsoft procurou simplificar os passos iniciais necessrios para
o desenvolvimento de projetos.
Com o WebMatrix possvel codificar, testar e publicar um projeto web de forma simples, no sendo necessrio realizar
diversas configuraes antes de iniciar o desenvolvimento, como por exemplo, as configuraes do servidor web e o
gerenciamento das bases de dados, com ele podemos imediatamente iniciar a criao do projeto e isso pode facilitar o
aprendizado para os iniciantes em aplicativos web.
O WebMatrix gratuito, o foco do WebMatrix oferecer uma experincia intuitiva e prtica para novos desenvolvedores
entrarem no mundo das aplicaes web, sem que seja necessrio uma longa curva de aprendizado, para aplicativos
complexos onde existe a necessidade de projetos escalveis e com nveis elevados de segurana, a ferramenta indicada
o Microsoft Visual Studio 2010. O WebMatrix totalmente integrado ao Visual Studio 2010, uma aplicao dentro do
WebMatrix pode ser aberta no Visual Studio com apenas um click em um boto.
A IDE inclui o Internet Information Server Express IIS Express, que um servidor web de desenvolvimento, tambm
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 bsico para iniciar pginas web que manipulam dados.
Uma das grandes vantagens da ferramenta a interoperabilidade com outras tecnologias de cdigo aberto na
plataforma Microsoft, atravs do recurso Site from Web Gallery, podemos ter acesso a algumas das mais populares
solues web, como WordPress, BlogEngine .net, Phpbb, entre dezenas de outras com apenas alguns cliques.
Neste artigo voc conhecer o WebMatrix, tambm 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 aplicao
simples, onde voc poder criar a sua primeira pgina web utilizando o WebMatrix Beta 3.

Instalando o WebMatrix Beta 3

https://msdn.microsoft.com/ptbr/library/Gg650436(d=printer).aspx

1/11

Instalando o WebMatrix Beta IntroduoaoWebMatrix|MSDN

3

20/08/2015

A Instalao do WebMatrix Beta 3 feito atravs 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
faa o Download do Web Platform Istaller no link http://www.microsoft.com/web/webmatrix/ , o tamanho do arquivo
de 7,09 MB e a verso utilizada no artigo a 3.0.
A Primeira tela do instalador do Microsoft WebMatrix Beta 3 apresenta uma breve descrio da ferramenta e algumas
informaes da IDE, com o tamanho do arquivo, verso e data do ltimo release, clique no boto Install para iniciar a
instalao da ferramenta.

Esta pgina foi til?

Sim

No

Figura 1 Instalao do WebMatrix Beta 3

A Prxima etapa apresenta os produtos e componentes que sero instalados, clique no boto I Accept para aceitar os
termos de licenas dos produtos que sero instalados pelo Web Platform Installer.

https://msdn.microsoft.com/ptbr/library/Gg650436(d=printer).aspx

2/11

20/08/2015

IntroduoaoWebMatrix|MSDN

Figura 2 Aprovao das licenas dos produtos a serem instalados

A prxima tela apresenta os itens que foram instalados pelo Web Platform Installer, um deles o prprio Microsoft
WebMatrix Beta 3, com poucos cliques instalamos o WebMatrix e temos um ambiente configurado e preparado para a
criao de pginas web.

Figura 3 Fim da instalao

Conhecendo o ambiente de desenvolvimento

A Interface visual do WebMatrix muito simples e elegante, com botes intuitivos e modernos, ele procura facilitar para
que a tarefa de criar uma aplicao web no seja necessariamente uma tarefa complexa. Codificar uma pgina web no
uma tarefa simples, principalmente para quem est conhecendo agora e aprendendo seus primeiros conceitos,
portanto a Microsoft buscou com o WebMatrix criar uma experincia mais simples e prtica.
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 cdigo fonte aberto e com poucos cliques temos acesso aos mais conhecidos softwares de
gerenciamento de blogs, fruns, CRM, ecommerce , entre outros, a opo Site From Template, proporciona uma forma
de criar pginas baseadas em modelos, e por fim , temos a opo Site From Folder, onde podemos criar um projeto
vazio em um determinado diretrio.
https://msdn.microsoft.com/ptbr/library/Gg650436(d=printer).aspx

3/11

20/08/2015

IntroduoaoWebMatrix|MSDN

Figura 4 Tela inicial do WebMatrix

Figura 5 Site from Web Gallery

O opo Site From Template disponibiliza cinco modelos para voc escolher e criar um projeto com base neles, so eles:
Empty Site Este um modelo mais bsico, um site vazio, escolha essa opo 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.

https://msdn.microsoft.com/ptbr/library/Gg650436(d=printer).aspx

4/11

20/08/2015

IntroduoaoWebMatrix|MSDN

Starter Site Um modelo com um layout profissional definido e com um sistema de login.
Bakery Um modelo completo para uma pgina de vendas de produtos, incluindo toda o cdigo para a manipulao
dos dados.
Photo Gallery Um modelo para o gerenciamento de imagens com um sistema de login de usurios incluso.
Calendar um modelo para o gerenciamento de calendrios, com sistema de login de usurios, controle de eventos e
seleo de temas.

Figura 6 Site from Template

https://msdn.microsoft.com/ptbr/library/Gg650436(d=printer).aspx

5/11

20/08/2015

IntroduoaoWebMatrix|MSDN

Figura 7 Modelo de projetos com calendrios

Aps iniciar um projeto, o ambiente de trabalho do WebMatrix ser apresentado,ele divido em Spaces espaos,
existem quatro espaos principais na IDE, so eles:
Site
Site o espao principal do WebMatrix em uma aplicao, nele temos diversas informaes sobre o projeto como a URL
e porta utilizadas, o caminho da aplicao, atalhos para os outros espaos do ambiente, configuraes para a publicao
do projeto em um servidor na internet, verses do framework utilizadas, configuraes de SSL e links para que voc
possa enviar sugestes ou reportar bugs a Microsoft.

Figura 8 Espao 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 construdos sob o ASP.NET Razor, utilizando como base a
sintaxe da linguagem C# .NET.

https://msdn.microsoft.com/ptbr/library/Gg650436(d=printer).aspx

6/11

20/08/2015

IntroduoaoWebMatrix|MSDN

Figura 9 Tipos de Arquivos suportados

Database
Database o espao especfico para o gerenciamento de informaes em banco de dados, o WebMatrix j vem com o
SQL Compact CE incluso, mas possvel migrar para o SQL Server, e recomendado caso voc precise manipular um
grande nmero de registros. O Espao ainda tem botes para a criao rpida de base de dados, tabelas , inserir
campos, adicionar chaves primarias e outras tarefas bsicas para a criao e manipulao de dados , possvel inclusive
executar instrues SQL, sendo um ambiente perfeito e integrado para a criao de aplicativos com pouca
complexidade, facilitando o aprendizado e permitindo que o programador tenha foco no website.

Figura 10 Espao Database

Reports
Neste espao podemos emitir um relatrio com diversas informaes importantes para o desenvolvedor avaliar o seu
projeto, essas informaes so importantes para a melhoria dos buscadores de internet, dentre as informaes que o
relatrio nos fornece, esto os links quebrados no projeto e a visualizao das tags HTML que no esto corretamente
definidas, proporcionando um meio rpido de ir direto ao ponto e corrigilas.

Criando sua primeira pgina web com WebMatrix

https://msdn.microsoft.com/ptbr/library/Gg650436(d=printer).aspx

7/11

20/08/2015

IntroduoaoWebMatrix|MSDN

Criando sua primeira pgina 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 opo Empty
Site e em Site Name informe o nome da aplicao, em seguida clique no boto OK que a aplicao ser criada pela IDE.

Figura 12 Selecionando um Template

https://msdn.microsoft.com/ptbr/library/Gg650436(d=printer).aspx

8/11

20/08/2015

IntroduoaoWebMatrix|MSDN

3. Um menu Ribbon aparecer no topo do WebMatrix, nele temos alguns botes que executam tarefas diversas, por
exemplo, executar o projeto, testar e publicar, os Spaces esto localizados no canto inferior esquerdo, localize e clique
no espao Files, nele podemos manipular arquivos e diretrios, 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 Espao Files

4. Uma pgina com uma marcao HTML apresentada.

https://msdn.microsoft.com/ptbr/library/Gg650436(d=printer).aspx

9/11

20/08/2015

IntroduoaoWebMatrix|MSDN

Figura 14 Pgina 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 boto Run que est localizado no Ribbon.

Figura 15 Primeira aplicao

6. Projeto sendo executado no Browser.

https://msdn.microsoft.com/ptbr/library/Gg650436(d=printer).aspx

10/11

20/08/2015

IntroduoaoWebMatrix|MSDN

Figura 16 Projeto sendo executado no browser

Concluso
O WebMatrix ainda est em fase BETA mas j proporciona uma forma simples e prtica de construir aplicaes web, uma
ferramenta gratuita que proporciona em um ambiente integrado um conjunto de modelos que podem facilitar o
desenvolvimento de aplicaes web, principalmente em aplicaes pequenas ou de mdio porte.
Em conjunto com o ASP.NET Razor, o WebMatrix apresenta uma oportunidade para os iniciantes na plataforma .net ou
no desenvolvimento de aplicaes web de ter uma experincia simplificada, podendo ser a porta de entrada para o
universo da plataforma .NET.

Sobre o Autor
Alexandre Tadashi Sato
alexandre@h2sistemas.com.br www.silverlightexperience.blogspot.com
Gerente de projetos da H2 Sistemas, trabalha com desenvolvimento de sistemas .NET destacandose aplicaes
windows, wpf, asp e silverlight. A H2 Sistemas uma empresa de tecnologia que trabalha com o desenvolvimento de
softwares sob medida.

Centros do desenvolvedor
Windows
Office

Recursos de aprendizagem

Comunidade

Suporte

Microsoft Virtual Academy

Fruns

Suporte autnomo

Channel 9

Blogs

Pontes de interoperabilidade

Codeplex

MSDN Magazine

Visual Studio
Microsoft Azure

Programas
BizSpark para iniciantes
DreamSpark

Mais...

Brasil Portugus

Imagine Cup

Boletim informativo

Privacidade & cookies

Termos de uso

Marcas comerciais

https://msdn.microsoft.com/ptbr/library/Gg650436(d=printer).aspx

11/11