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.