segunda-feira, 22 de julho de 2013

Twitter Bootstap

O Twitter Bootstrap é uma ferramenta gratuita e poderosa para criação de layouts de websites e aplicações web. Contem modelos de HTML e CSS para definir a tipografia, navegação, botões, tabelas e outros componentes gráficos, bem como algumas extensões de Javascript, facilitando todo o trabalho de definição do aspeto do website.

Através do site do Twitter Bootstrap (http://twitter.github.io/bootstrap/) é possível configurar todos os componentes do layout, os plugins de Jquery e as variáveis do layout para que se posso ter um layout mais personalizado. Se mesmo assim, ainda não for suficiente existem alguns sites (por exemplo bootswatch e wrapbootstrap) onde podem obter modelos já devidamente configurados.

Uma das grandes vantagens desta ferramenta é que permite criar Responsive Web Design.

O que é Responsive Web Design


Responsive Web Design é a capacidade de apresentar, nos diversos dispositivos, a informação de forma acessível e confortável. Sendo assim, o layout do website vai-se adaptar à resolução do aparelho e apresenta a informação da forma mais adequada.

Como utilizar o Twitter Bootstrap


Primeiro, tem de se fazer download do Twitter Bootstrap, através do website do projeto http://twitter.github.io/bootstrap/. Depois de descompactar, pode-se ver uma estrutura de ficheiros que será algo como:

    bootstrap/
      ├── css/
      │   ├── bootstrap.css
      │   ├── bootstrap.min.css
      │   ├── bootstrap-responsive.css
      │   ├── bootstrap-responsive.min
      ├── js/
      │   ├── bootstrap.js
      │   ├── bootstrap.min.js
      └── img/
          ├── glyphicons-halflings.png
          └── glyphicons-halflings-white.png


Estes ficheiros são a forma mais básica do Twitter Bootstrap, estando preparados para serem colocados em qualquer projeto.

De seguida, será necessário incluir as referencias ao ficheiro css e js no ficheiro de html. Por exemplo,

    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Exemplo Twitter Bootstrap </title>
        <link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
        <link href="css/site.css" rel="stylesheet" />
    </head>
    <body>
        <h1>Twitter Bootstrap</h1>

        <div class="container-fluid">
            <div class="row-fluid show-grid">
                <div class="span12">Sistema de grelha com o máximo de 12 colunas.</div>
            </div>
            <div class="row-fluid show-grid">
                <div class="span3">Coluna com dimensão 3</div>
                <div class="span9">Coluna com dimensão 9</div>
            </div>
        </div>

        <script src="js/bootstrap.min.js"></script>
    </body>
    </html>


O resultado final será algo como:



Ao redimensionar a janela do navegador, pode-se verificar que o design responde à largura da janela, sendo assim um Responsive Web Design.

Toda a documentação acerca desta ferramente encontra-se no website do projeto Twitter Bootstrap.


O código fonte para download encontra-se neste link.

quinta-feira, 18 de julho de 2013

NuGet - Gestor de Pacotes

Antes de existir o NuGet, e para adicionar um biblioteca a um projeto, era necessário fazer download dos ficheiros necessários para que esta pudesse ser utilizada com sucesso. Dependendo da biblioteca,  poderia ser só colocar os ficheiros em alguma pasta especifica ou poderia ser o adicionar uma ou mais referências a ficheiros dll. Quando se pretendia fazer a atualização de uma biblioteca para uma versão mais atual, era necessário saber quais os ficheiros/referências a alterar/remover/adicionar.

Com o NuGet, esta tarefa, por vezes complexa e enfadonha, tornou-se numa operação muito simples.

O que é o NuGet


O NuGet é uma extensão do Visual Studio para gerir a instalação de bibliotecas e ferramentas.

Ao instalar um pacote via NuGet, este vai atualizar o projeto, gerindo todas as referências e dependências entre pacotes, e copiando os ficheiros para as pastas corretas. O NuGet também permite, de uma forma  muito simples, verificar se existem novas versões de um pacote previamente instalados e proceder à sua atualização. Também torna possível desinstalar um pacote, removendo as referências e ficheiros sem quebrar o código.

Outra grande vantagem é a possibilidade de qualquer pessoa poder criar pacotes e partilhá-los na galeria do NuGet.

Desde a versão 2012 do Visual Studio que o NuGet faz parte integrante do seu IDE. Os novos projetos criados nesta versão também já têm as bibliotecas instaladas com o NuGet, sendo assim muito fácil de geri-las.

Adicionar um pacote


Existem 2 formas de adicionar um pacote a um projeto. A primeira é uma forma gráfica e para tal, basta aceder ao menu Tools > Library Package Manager > Manage Nuget Package for Solution…



Ao clicar nesta opção vai aparecer uma janela para gestão de pacotes, estando esta dividida em 3 áreas:
  • do lado esquerdo, pode-se definir se é pretendido ver os pacotes instalados, os pacotes que se encontram online para instalar e as atualizações a pacotes instalados;
  • ao centro, pode-se ver a lista de pacotes (consoante o que foi selecionado no lado esquerdo: instalados, online e para atualização);
  • do lado direito, encontra-se uma caixa de pesquisa por nome de pacote e por baixo uma área que mostra, ao selecionar um pacote da lista, os detalhes do pacote.
   
Por exemplo, se for pretendido instalar o pacote Unity para MVC4, seleciona-se Online no lado esquerdo, e no lado direito, escreve-se Unity na caixa de pesquisa. Na lista de pacotes vão aparecer todos os que correspondem a este critério de pesquisa. Depois de selecionar o pacote correto (Unity.MVC), clica-se em Install.



Aparecerá uma janela para especificar em que projeto (ou projetos) é que se pretender instalar o pacote. De seguida, o NuGet vai começar a copiar ficheiros e adicionar as referências necessárias.

A segunda forma de adicionar um pacote é através da consola de gestão de pacotes. Para abrir a consola, clica-se em Tools > Library Package Manager > Package Manager Console.



Depois de aberta a consola e, para instalar o pacote do exemplo anterior, só é necessário escrever o comando

    Install-Package Unity.MVC4


Ao fazer Enter o pacote começa a ser instalado, ficando logo o Unity para MVC 4 pronto para ser utilizador.

Atualizar um pacote


Para atualizar um pacote, para a versão mais atual, basta abrir o modo gráfico da gestão de pacotes e, do lado esquerdo escolher Updates. Depois, pode-se clicar Update All, que aparece na lista de pacotes, para que se atualize tudo o que está instalado ou, no caso de se querer só atualizar um pacote, seleciona-se o pacote em questão e clica-se no botão Update.



Também é possível fazer o mesmo, utilizando a consola e o comando

    Update-Package jQuery
  

Desinstalar um Pacote


Através do modo gráfico, seleciona-se, do lado esquerdo, Installed packages e depois de selecionar o pacote que se pretende desinstalar, clica-se no botão Uninstall.



O mesmo objetivo pode ser atingido, executando, através da consola, o comando

    Uninstall-Package Unity.MVC4
  

Restaurar pacotes durante a compilação


Quando se utiliza o NuGet, os ficheiros dos pacotes instalados são adicionados na pasta packages que está ao mesmo nível que o ficheiro da solução. Dependendo do número de pacotes instalados , esta página pode ser bastante pesada.

Para que a partilha de soluções bem como para a utilização de software de source control, é de todo o interesse que a pasta packages não seja considerada. Mas o Visual Studio tem de restaurar todos os pacotes aquando da compilação, caso contrário não encontra os ficheiros nas referências. Para tal, basta clicar na opção de menu Enable NuGet Package Restore que se encontra no menu Project.



Depois de se permitir que esta opção seja habilitada, será criado uma nova pasta na solução. Quando se executar um Build, vai ser garantido que a pasta packages existe e que todos os ficheiros dos pacotes instalados se encontram nessa pasta, fazendo com que a compilação ocorra sem erros de referências.


terça-feira, 16 de julho de 2013

Google Analytics

Uma ferramenta fundamental para quem tem um site é o Google Analytics. Esta ferramenta fornece um conjunto de relatórios que ajudam a perceber como os visitantes interagem com o site. Assim que um visitante chega ao site, o Google Analitys começa a registar, de forma anónima, uma série da dados da navegação. Esses dados vão servir para que se possa fazer uma análise do comportamento geral do site. Algumas das análise possíveis são:

  • Número total de visitantes, visitantes únicos e visitantes que retornam ao site;
  • Origens do trafego, isto é, de onde é que os visitantes estão aceder ao site;
  • Número de páginas visitadas e visualização de páginas por visita;
  • Quais os dispositivos utilizados para visualizar o site.

Como adicionar o Google Analytics a um site

Para que se possa começar a utilizar o Google Analytics, é necessário registar o site na página do Google Analytics. Se ainda não tiver conta, será necessário registar-se. 


 Depois de iniciar sessão, clica-se no botão Admin.


Surge uma listagem com todos os sites que já estão registados.













Para registar o site, clica-se no botão Nova Conta e preenche-se os dados relativos ao site que se pretende registar.

 















No final, o Google Analytics cria um código de identificação de controlo para o registo efetuado e apresenta um script de javascript que deverá ser incluído no site.

















No exemplo que estou a seguir, o site está a ser desenvolvido em ASP.NET MVC. Sendo assim o melhor local para colocar o script é na Master Page do site. No projeto criado, acede-se à pasta Views\Shared e edita-se o ficheiro _Layout.cshtml que é a Master Page do site. Na secção Head do HTML, cola-se o script que o Google Analytics nos forneceu.



No final, só é necessário publicar o site.

Para verificar se ficou tudo a funcionar, acede-se ao site (no meu caso é http://www.highloop.pt) e abre-se o Google Analytics. Na página inicial, seleciona-se o site que foi registado (neste caso High Loop).















De seguida clica-se em Tempo Real e depois em Descrição Geral. Neste ecrã deve de aparecer, pelo menos, uma visita ativa no site.

segunda-feira, 24 de junho de 2013

Como trabalha a framework ASP.NET MVC

Num site ASP.NET, o URL estava quase sempre mapeado com um ficheiro em disco. O mais normal é este mapeamento ser para um ficheiro .aspx, que contém estrutura de html e código para ser executado aquando do pedido.

Na framework ASP.NET MVC, em vez de o URL mapear um ficheiro em disco, este mapeia uma ação de um controlador. O controlador é responsável por tratar as interações do utilizador e executar a lógica apropriada para esse pedido. No final, chama uma vista para que esta gere o HTML correto da resposta.

Este mapeamento entre o URL e o controlador é gerido pelo motor de encaminhamento. Este motor tem uma série de rotas (regras que especificam como é que os segmentos do URL devem de estar estruturados) que permite atribuir um controlador a um determinado URL. O motor de encaminhamento também pode extrair valores de variáveis, especificadas no URL, e passá-los para as ações do controlador como parâmetros.

As rotas são carregadas no Application Start do global.asax
 

e estão definidas no ficheiro RouteConfig que se encontra na pasta App_Start.



Por defeito, são criadas logo 2 regras de encaminhamento. A primeira rota indica que os URLs de pedidos com a extensão .axd (como ScriptResource.axd e WebResource.axd) são ignorados pelo motor de encaminhamento e são tratados pelos handlers correspondentes. A segunda rota é uma regra padrão para todo o site em que define que os URLs vão ter no primeiro segmento o nome do controlador, no segundo segmento e nome da ação desse controlador e no terceiro segmento um identificador (que é uma variável a ser passada para um das ações do controlador e que pode ser opcional). Assim, para o URL /Projects/List, o motor de encaminhamento executaria a ação List do controlador Projects. Se o URL for /Projects/Details/1, será executada a ação Details do controlador Projects e a ação Details teria 1 como valor da variável Id, podendo assim ser apresentado o detalhe do primeiro projeto.

Também se pode definir os valores por defeito de cada uma das variáveis de uma regra. Assim, para a rota Default, está especificado que caso não seja especificado uma ação, o valor por defeito será Index e caso não seja especificado o controlador, o valor por defeito será Home. Isto faz com que o motor de encaminhamento, ao tratar o URL /Projects execute a ação Index do controlador Projects.

Esta rota pode ser alterada ou pode-se acrescentar mais rotas para responder às necessidades do site. Por exemplo, para um site que tenha uma área privada para administração de dados pode-se adicionar uma rota com um dos segmentos fixo:

            routes.MapRoute(
                name: "Administration",
                url: "Administracao/{controller}/{action}/{id}",
                defaults: new { controller = "HomeAdmin", action = "Index", id = UrlParameter.Optional }
            );


Com esta rota, já se conseguiria responder ao URL /Administracao/ProjectAdmin/Add. O motor de encaminhamento iria executar a ação Add que estava no controlador ProjectAdmin.

Uma outra rota que se poderia adicionar, e para fazer um site multi-idioma, seria:

            routes.MapRoute(
                name: "MultiCulture",
                url: "{culture}/{controller}/{action}/{id}",
                defaults: new {culture = "en-GB", controller = "HomeAdmin", action = "Index", id = UrlParameter.Optional }
            );


O culture passa a ser uma variável que será tratada, a nível do controlador, para apresentar a página no idioma correto. Assim, a mesma rota poderia responder ao URL /pt-PT/Projects/List, /en-GB/Projects/List e /fr-FR/Projects/List, executando a ação List do controlador Projects mas apresentando a página no idioma português, inglês e francês correspondentemente.

Na procura da rota correspondente para um URL, o motor de encaminhamento acede à tabela de rotas e seleciona a primeira rota para a qual o URL cumpre a regra nela especificada. O não cumprimento da regra pode ser por não existir o controlador, por não existir a ação ou por a assinatura do método da ação não corresponder com as variáveis da rota. No caso de não encontrar qualquer regra válida rerá retornado um erro 404.

segunda-feira, 17 de junho de 2013

A estrutura de um projeto ASP.NET MVC

Após a criação de um projeto ASP.NET MVC 4 Web Application, este apresenta, por defeito, a seguinte estrutura:


Como é um projeto MVC, existem pastas para o Models, Views e Controllers, bem como mais algumas pastas adicionais. 

  • App_Data - é a pasta que contem os dados locais da aplicação, sendo comum ter nesta pasta ficheiros de base de dados (.mdf) ou de xml;
  • App_Start - nesta pasta fica todo o código que configura o comportamento da aplicação ASP.NET MVC. Nas versões anteriores, todo este código estava inserido diretamente no ficheiro Global.asax;
  • Content - vai conter todos os ficheiros de cascading style sheet ou outros ficheiros estáticos que definam o aspeto gráfico da aplicação;
  • Controllers - pasta recomendada para armazenar todos os ficheiros de controladores. Estes ficheiros têm sempre o seu nome a terminar com "Controller" (por exemplo, HomeController);
  • Filters - aqui vamos ter todos as definições de filtros que se podem atribuir às ações dos controladores. Estes filtros são pedaços de código que serão executados antes e depois da execução do código da ação (por exemplo, filtro para output caching);
  • Images - local indicado para armazenar todas as imagens do site;
  • Model - contem todas classes que representam o modelo de dados da aplicação. Estas classes vão definir objetos e lógica que interage com os dados da aplicação;
  • Scripts - pasta específica para conter todo o javascript que suporta a aplicação;
  • Views - vai conter todas as vistas. Podem ser ViewPage (.aspx), ViewUserControl (.ascx) e ViewMasterPage (.master). As extensões dos ficheiros podem mudar caso o motor de vistas seja diferente de WebFormViewEngine. Por exemplo, com o motor de vistas Razor, todos os ficheiros têm extensão .cshtm. A pasta Views vai ter uma pasta por cada controlador, sendo o nome da pasta o prefixo do controlador (por exemplo, para o controlador HomeController, a pasta das vistas será Home). Por defeito, também existe uma pasta com o nome Shared que serve para armazenar as vistas que são partilhadas entre vários controladores (por exemplo, a master page).

quinta-feira, 13 de junho de 2013

ASP.NET MVC

O QUE É ASP.NET MVC


ASP.NET é uma framework de programação para a criação de sites que suporta 3 modelos de desenvolvimento: Web Pages, Web Forms e MVC.
Destes 3 modelos o que me dá mais prazer é, sem dúvida, o MVC. O MVC é um padrão de arquitetura que já existia há algum tempo, mas só foi introduzido na camada ASP.NET nos finais de 2007 como CTP. Neste momento já se encontra na versão 4.0.
 Este modelo de arquitetura separa a aplicação em 3 componentes principais: model (modelo), view (vista) e controller (controlador). Daí a sigla MVC.

E para que serve cada um destes componentes?

Model - é a parte da aplicação que trata a lógica dos dados. O mais comum é ter a lógica para obter e manter dados de uma base de dados.
View - é a parte da aplicação que trata da apresentação dos dados.
Controller - é a parte da aplicação que trata as interações do utilizador, fazendo a ponte entre o model e a view. Por exemplo, para um pedido do utilizador, o controlador vai obter os dados do modelo e seleciona a vista correta para os apresentar.

As grandes vantagens deste modelo são:
  • separação de conceitos - devido à sua arquitetura, cada aspeto da aplicação tem a sua área: a lógica de UI está na vista, a lógica de interação está no controlador e a lógica de negócio está no modelo;
  • altamente testável - como a dependência entre as camadas é uma dependência pouco vincada, a aplicação pode ser facilmente testada;
  • performance - não utiliza o ViewState para gestão automática de estados o que faz com que o tamanho das páginas seja menor, fazendo com que sejam mais rápidas a descarregar;
  • melhor gestão do projeto - devido à separação de conceitos pode-se estruturar as esquipas de trabalho de forma a trabalharem em paralelo.
Uma das características mais interessantes da framework ASP.NET MVC é a possibilidade adicionar, personalizar ou estender componentes com muita facilidade.
Esta framework também possui um componente mapeador de endereços, permitindo que o url seja mais user friendly e mais legíveis, sendo assim melhor para SEO.

COMO CRIAR UM SITE ASP.NET MVC


Para criar uma aplicação ASP.NET MVC é necessário o Visual Studio (existe a versão Virtual Studio Express que é uma versão gratuita).
Depois de abrir uma instância do Visual Studio, clica-se em New Project... da página de arranque ou através do menu File > New > Project. Na janela de diálogo, seleciona-se do lado esquerdo a template Web, do lado direito ASP.NET MVC 4 Web Application e em baixo define-se o nome da aplicação a criar.



Surge uma nova janela de diálogo em que podemos especificar que tipo de aplicação ASP.NET MVC é que queremos criar. Seleciona-se a opção Internet Application pois esta template já tem algumas páginas e fica mais fácil de ver a potencialidade da aplicação. Na opção View Engine pode-se escolher o motor das Views. Pode-se escolher entre APSX ou Razor.



Ao fazer OK o Visual Studio cria uma aplicação "Hello World", com toda a estrutura MVC. Este é um bom começo para uma aplicação.



Executar a aplicação, carregando em F5 ou através do menu Debug > Start Debugging, vai fazer com que o Visual Studio arranque com o IIS Express e lança uma janela do explorador para visualizar o site criado.



Esta aplicação cria, logo à cabeça, algumas páginas que depois podem ser personalizadas (Home, About e Contact).