20/08/2015 Introdução ao WebMatrix | MSDN

https://msdn.microsoft.com/pt­br/library/Gg650436(d=printer).aspx 1/11

Introdução ao WebMatrixAlexandre Tadashi Sato Janeiro 2011

Tecnologias: WebMatrix Beta 3

 

Sumário: Este artigo tem como objetivo apresentar uma introdução ao WebMatrix, uma IDE ﴾Integrated DevelopmentEnvironment﴿ voltado aos desenvolvedores de aplicativos web.

Conteúdo Introdução Instalando o WebMatrix Beta 3 Conhecendo o ambiente de desenvolvimento Criando sua primeira página web com WebMatrix Conclusão Sobre o Autor

IntroduçãoO WebMatrix é uma IDE ﴾Integrated Development Environment﴿ que contém todos os recursos necessários para acriaçã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 parao desenvolvimento de projetos.

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

O WebMatrix é gratuito, o foco do WebMatrix é oferecer uma experiência intuitiva e prática para novos desenvolvedoresentrarem no mundo das aplicações web, sem que seja necessário uma longa curva de aprendizado, para aplicativoscomplexos 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 doWebMatrix 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éminclui o  ASP.NET, um frameword web e o SQL Server Compact, uma banco de dados integrado, com esse conjunto detecnologias 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 naplataforma Microsoft, através do recurso “Site from Web Gallery”, podemos ter acesso a algumas das mais popularessoluçõ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 oWeb Platform Installer, veremos o ambiente de desenvolvimento da IDE e em seguida será realizada uma aplicaçãosimples, onde você poderá criar a sua primeira página web utilizando o WebMatrix Beta 3.

Instalando o WebMatrix Beta 3

Entrar Assinaturas do MSDN Obter ferramentas

20/08/2015 Introdução ao WebMatrix | MSDN

https://msdn.microsoft.com/pt­br/library/Gg650436(d=printer).aspx 2/11

Instalando o WebMatrix Beta 3A Instalação do WebMatrix Beta 3 é feito através do Microsoft Web Patform Installer, essa ferramenta disponibiliza umaforma simples de instalar um ambiente completo com base em tecnologias Microsoft .NET, para instalar o WebMatrixfaç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 algumasinformações da IDE, com o tamanho do arquivo, versão e data do último release, clique no botão Install para iniciar ainstalaçã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 ostermos de licenças dos produtos que serão instalados pelo Web Platform Installer.

Esta página foi útil? Sim Não

20/08/2015 Introdução ao WebMatrix | MSDN

https://msdn.microsoft.com/pt­br/library/Gg650436(d=printer).aspx 3/11

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 MicrosoftWebMatrix Beta 3,  com poucos cliques instalamos o WebMatrix e  temos um ambiente configurado e preparado para acriação de páginas web.

Figura 3 – Fim da instalação

Conhecendo o ambiente de desenvolvimentoA Interface visual do WebMatrix é muito simples e elegante, com botões intuitivos e modernos, ele procura facilitar paraque 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 umsite já existente do WebMatrix, em seguida temos o Site From Gallery, nele podemos criar um site baseado em umagaleria de projetos com código fonte aberto e com poucos cliques temos acesso aos mais conhecidos softwares degerenciamento de blogs, fóruns, CRM, e‐commerce , entre outros, a opção Site From Template, proporciona uma formade criar páginas baseadas em modelos,  e por fim , temos a opção Site From Folder, onde podemos criar um projetovazio em um determinado diretório.

20/08/2015 Introdução ao WebMatrix | MSDN

https://msdn.microsoft.com/pt­br/library/Gg650436(d=printer).aspx 4/11

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 suasnecessidades, 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.

20/08/2015 Introdução ao WebMatrix | MSDN

https://msdn.microsoft.com/pt­br/library/Gg650436(d=printer).aspx 5/11

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çãodos 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 eseleção de temas.

Figura 6 – Site from Template

20/08/2015 Introdução ao WebMatrix | MSDN

https://msdn.microsoft.com/pt­br/library/Gg650436(d=printer).aspx 6/11

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 URLe porta utilizadas, o caminho da aplicação, atalhos para os outros espaços do ambiente, configurações para a publicaçãodo 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 asintaxe da linguagem C# .NET.

20/08/2015 Introdução ao WebMatrix | MSDN

https://msdn.microsoft.com/pt­br/library/Gg650436(d=printer).aspx 7/11

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 oSQL Compact CE incluso, mas é possível migrar para o SQL Server, e recomendado caso você precise manipular umgrande número de registros. O Espaço ainda tem botões para a criação rápida de base de dados, tabelas , inserircampos, adicionar chaves primarias e outras tarefas básicas para a criação e manipulação de dados , é possível inclusiveexecutar instruções SQL, sendo um ambiente perfeito e integrado para a criação de aplicativos com poucacomplexidade, 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 seuprojeto, essas informações são importantes para a melhoria dos buscadores de internet, dentre as informações que orelatório nos fornece, estão os links quebrados no projeto e a visualização das tags HTML que não estão corretamentedefinidas, proporcionando um meio rápido de ir direto ao ponto e corrigi‐las.

Criando sua primeira página web com WebMatrix

20/08/2015 Introdução ao WebMatrix | MSDN

https://msdn.microsoft.com/pt­br/library/Gg650436(d=printer).aspx 8/11

Criando sua primeira página web com WebMatrix1.     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 EmptySite 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

20/08/2015 Introdução ao WebMatrix | MSDN

https://msdn.microsoft.com/pt­br/library/Gg650436(d=printer).aspx 9/11

3.     Um menu Ribbon aparecerá no topo do WebMatrix,  nele temos alguns botões que executam tarefas diversas,  porexemplo, executar o projeto, testar e publicar,  os Spaces estão localizados no canto inferior esquerdo, localize e cliqueno 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.

20/08/2015 Introdução ao WebMatrix | MSDN

https://msdn.microsoft.com/pt­br/library/Gg650436(d=printer).aspx 10/11

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.

20/08/2015 Introdução ao WebMatrix | MSDN

https://msdn.microsoft.com/pt­br/library/Gg650436(d=printer).aspx 11/11

Figura 16 – Projeto sendo executado no browser

ConclusãoO WebMatrix ainda está em fase BETA mas já proporciona uma forma simples e prática de construir aplicações web, umaferramenta gratuita que proporciona em um ambiente integrado um conjunto de modelos que podem facilitar odesenvolvimento 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 ouno desenvolvimento de aplicações web de ter uma experiência simplificada, podendo ser a porta de entrada para ouniverso da plataforma .NET.

Sobre o AutorAlexandre Tadashi Sato

﴾alexandre@h2sistemas.com.br – www.silverlightexperience.blogspot.com﴿

Gerente de projetos da H2 Sistemas, trabalha com desenvolvimento de sistemas .NET destacando‐se aplicaçõeswindows, wpf, asp e silverlight. A H2 Sistemas é uma empresa de tecnologia que trabalha com o desenvolvimento desoftwares sob medida.

Centros do desenvolvedor

Windows

Office

Visual Studio

Microsoft Azure

Mais...

Recursos de aprendizagemMicrosoft Virtual Academy

Channel 9

Pontes de interoperabilidade

MSDN Magazine

ComunidadeFóruns

Blogs

Codeplex

SuporteSuporte autônomo

ProgramasBizSpark ﴾para iniciantes﴿

DreamSpark

Imagine Cup

Brasil ﴾Português﴿ Boletim informativo Privacidade & cookies Termos de uso

Marcas comerciais