ASP.NET MVC Mobile: Criando um design responsivo

Conheça nesse artigo os elementos do desenvolvimento web responsivo e como ele se relaciona com o ASP.NET MVC. Veja também o funcionamento do CSS frente ao design responsivo.

Artigo no estilo: Curso

Fique por dentro
Atualmente, com a grande quantidade de dispositivos móveis como tablets e smartphones, é muito importante que os websites sejam planejados para eles.

É preciso levar em consideração que esses dispositivos normalmente possuem uma internet mais lenta (móvel) e também possuem resoluções de tela menores. Pensando nisso, existem algumas técnicas que podem ser seguidas para criar uma boa experiência para o usuário da aplicação web.

Ao longo dessa série, iremos mostrar essas técnicas e como aplicá-las no desenvolvimento de aplicações web com ASP.NET MVC. Nessa primeira parte veremos uma introdução ao assunto, com algumas ideias básicas sobre o design de aplicações web responsivas.

O desenvolvimento de aplicações web teve uma grande evolução nos últimos cinco anos, ao menos, quando os smartphones e tablets começaram a atingir o grande público. Com isso em mente, os desenvolvedores começaram a focar mais em desenvolver interfaces específicas para esses dispositivos com resoluções de tela menores, uma vez que os tradicionais “websites de desktop” não são fáceis de serem visualizados neles.

Ao longo de várias pesquisas e testes, chegou-se ao que se observa atualmente em termos de interface. Como podemos ver ao navegarmos com um smartphone, por exemplo, os websites estão adaptados aos dispositivos móveis com um padrão muito claro.

Ao longo dessa série entenderemos esse padrão e veremos como criar aplicações ASP.NET MVC utilizando-o.

Nessa primeira parte de nossa série, iremos entender o que é o design web responsivo e como ele se adapta no desenvolvimento ASP.NET. Além disso, iremos entender como o CSS (Cascading Style Sheet) pode auxiliar-nos no desenvolvimento de websites responsivos. Também iremos ter uma breve introdução ao Bootstrap e entender como ele pode auxiliar o desenvolvedor de aplicações web a criar melhores experiências mais facilmente.

ASP.NET MVC

O ASP.NET MVC é uma das tecnologias de desenvolvimento de aplicações web mais utilizadas no mercado. Em termos de aplicações profissionais, ele desponta como a principal tecnologia, uma vez que seu modelo de programação favorece o desenvolvimento em equipe. Isso ocorre pela clara separação entre as camadas da aplicação que o padrão MVC (Model-View-Controller) oferece.

O padrão MVC é utilizado desde os anos 1970 e foi criado como um meio de organizar GUIs (Graphical User Interfaces). A grande força do padrão MVC está na clara separação entre as camadas da aplicação, que se dá em três elementos: o model, ou modelo, que representa a camada de negócios da aplicação, com a representação das classes de dados, por exemplo; a view, ou vista, que nada mais é do que a própria GUI, o que será mostrado para o usuário; e o controller, que é a ligação entre o modelo e a vista, que funciona controlando tudo o que acontece na aplicação.

O MVC do ASP.NET é uma implementação independente do padrão, uma vez que a Microsoft criou o chamado MVC Framework, que tem alguns detalhes internos importantes ao desenvolvimento de aplicações web, como os Action Methods (BOX 1).

BOX 1. Action Methods

Os Actions Methods, ou métodos de ação, são essenciais no funcionamento do ASP.NET MVC. Isso porque todos os métodos em todas as classes derivadas da classe Controller (a implementação do MVC Framework do Controller do padrão MVC) são métodos de ação. Esses métodos são associados a uma URL configurável através do sistema de roteamento do ASP.NET.

O ASP.NET MVC, em termos de GUI, oferece uma questão chamada de view engine, ou motor de vistas.

Até o MVC 3, esse motor era o ASP.NET padrão, que processa páginas .aspx. Entretanto, a partir do MVC 3, o Razor tomou conta dessa parte da aplicação web ASP.NET MVC, com vários refinamentos importantes feitos para a versão 4 do framework. O MVC 5 não apresenta nenhuma alteração significativa no Razor.

Mas, afinal, o que é o Razor? Trata-se de um motor de vistas, como já comentado, muito poderoso. Ele tem o poder de trabalhar os dados através de expressões Razor, que nada mais são do que código-fonte embutido diretamente na view. Entretanto, é preciso cuidado com a utilização dessas expressões para não quebrar o padrão MVC e o projeto virar uma bagunça.

É muito importante que entendamos o padrão de desenvolvimento utilizado pelo ASP.NET MVC, uma vez que estaremos trabalhando com ele. A criação de aplicações web para dispositivos móveis passa muito pelo CSS de cada uma, mas não é só isso. O Razor também terá um papel muito importante nessa parte.

Além disso, precisamos estar atentos ao restante do MVC Framework, uma vez que a performance da aplicação web é ainda mais importante do que o visual para o usuário. Um site móvel não pode ser lento simplesmente porque está sendo utilizada uma internet móvel.

Cascading Style Sheet (CSS)

O CSS é uma tecnologia que está presente no desenvolvimento web já há algum tempo. Entretanto, muitos desenvolvedores têm dificuldade com ele, acham muito complexo o estilo do mesmo. Uma atitude muito comum é abrir mão do CSS e utilizar tabelas para a criação de layouts. Porém, isso não faz o menor sentido. O CSS é uma ferramenta presente em websites para desktop e também para dispositivos móveis. A questão é que, com a utilização do CSS, o desenvolvimento web responsivo fica muito mais simples, como veremos ao longo da série.

Primeiramente, vamos entender o que é o CSS. Trata-se de uma linguagem utilizada para descrever a formatação e o visual de uma linguagem de marcação qualquer. Normalmente, é utilizada juntamente com JavaScript e HTML para a criação de páginas web visualmente atraentes. De fato, muitos websites utilizam essa combinação de elementos para a criação de suas páginas. Além disso, a combinação dessas três tecnologias é uma das formas de criação de aplicações para a Windows Store, o que fez com que a utilização delas crescesse nos últimos anos. Embora essa preferência exista, o CSS pode funcionar tranquilamente com qualquer linguagem de marcação, como XML, por exemplo.

Uma das grandes vantagens do CSS é que ele é limitado apenas pela criatividade do desenvolvedor. Teoricamente, ele pode fazer tudo o que é imaginável e mais um pouco. Claro que isso requer um conhecimento do CSS e também das tecnologias que serão utilizadas com ele. Além disso, é preciso levar em consideração os padrões de cada navegador, além dos padrões de tipos de site. A criatividade precisa ter um limite para não criar algo que seja desconfortável para o usuário.

Conforme foi comentado, os navegadores possuem um padrão de estilo. Para a criação de CSS’s precisos, esses padrões podem ficar no meio do caminho, muitas vezes. Uma prática comum de desenvolvimento é criar os chamados “CSS resets”, que nada mais é do que resetar o estilo dos browsers como um meio de evitar inconsistências de navegador para navegador. Veremos como fazer isso mais adiante no artigo.

A forma como o CSS funciona é bastante simples. Ele basicamente utiliza as tags da linguagem de marcação à qual ele está vinculado para criar um posicionamento visual para elas na página. No caso do HTML, temos que o CSS irá representar elementos como <html>, <body> e <div>, por exemplo. Podemos notar a seguir um exemplo de arquivo CSS:

div { font-family: Helvetica; }

Repare que ele está alterando o visual dos elementos dentro de uma <div>, através da mudança na família da fonte utilizada pelos textos. Como podemos notar, a liberdade é bastante grande, e existem diversos parâmetros que podem ser alterados para criar um visual interessante para a aplicação web.

Quando lidamos com o desenvolvimento móvel, que é o objetivo dessa série, o CSS é exatamente o mesmo. Entretanto, existem alguns elementos que iremos utilizar que farão a diferença quando lidarmos com resoluções de tela menores. O primeiro ponto que precisamos entender é que o CSS lida com as dimensões em pixels. Alguns tipos de elementos, como veremos a seguir, precisam ter pixels definidos estaticamente, enquanto em outros isso pode ser feito dinamicamente. Além disso, o CSS permite que os mesmos elementos sejam definidos de forma diferente dependendo da resolução de tela em questão.

O CSS é uma ferramenta muito poderosa na criação de aplicações web. Veremos o quanto ele pode nos ajudar ao longo de nossa série. A ideia é que tenhamos uma aplicação web totalmente responsiva ao final da série, utilizando todos os poderes do CSS e também do ASP.NET MVC.

Ideias básicas do design web responsivo

O desenvolvimento web responsivo é uma necessidade nos dias atuais. Mas o que, exatamente, é isso? Basicamente, a ideia é que nós, desenvolvedores, não podemos controlar a forma como o usuário irá acessar o nosso website, e isso pode ser uma fraqueza ou uma força de nossa aplicação. É necessário que tratemos esse tipo de comportamento do usuário como uma força, e criemos aplicações adaptáveis. É claro que isso é mais fácil falado do que feito, mas veremos algumas técnicas e como lidar com elas ao longo de nossa série. A palavra-chave do desenvolvimento web nos dias atuais é flexibilidade. E é isso que iremos buscar.

Vamos fazer uma análise dos dispositivos do mercado. Temos dispositivos como o iPhone, iPad e iPod Touch, que trazem resoluções fixas, mas diferentes entre si. Temos o Google Android, que traz uma infinidade de aparelhos diferentes, com diferentes resoluções de tela. Além disso, temos o Windows Phone 7 e 8, que também possui diversas resoluções. Isso sem contar os vários tablets com Windows 8 e 8.1, bem como dispositivos com Blackberry. Por fim, nos próximos meses devem surgir no mercado dispositivos com o Firefox OS e Ubuntu, e ainda não sabemos quais resoluções de tela eles suportarão. Como podemos notar, não é mais prático para o desenvolvedor focar em uma resolução de tela, como 1024x768, por exemplo. Atualmente, a utilização da internet em computadores de mesa ou laptops acaba sendo até menor, em alguns casos, do que em smartphones e tablets. A experiência da utilização da aplicação pelo usuário precisa ser a mesma em todos os dispositivos, do contrário corre-se o risco de o usuário não utilizar mais o website.

Uma pergunta pode estar passando pela cabeça do leitor nesse momento: porque desenvolvedores precisam se preocupar com isso, uma vez que isso parece o trabalho do designer? E a resposta é simples: porque seus websites precisam funcionar em qualquer dispositivo. Em outras palavras, o HTML e o CSS não pertencem ao escopo do designer. O desenvolvedor precisa entender como criar websites flexíveis.

O desenvolvimento web responsivo gira em torno de três ideias primárias: flexibilidade de layout, flexibilidade de conteúdo e queries de mídia. Repare que a flexibilidade está presente novamente. Não estaremos repetindo código: o código CSS e HTML utilizado será o mesmo para todas as versões de nosso website. Entretanto, normalmente temos um website totalmente diferente para dispositivos móveis, dando a impressão de que tudo é criado duas vezes. É claro que esse pode ser o caso, mas não precisa ser. É possível utilizar o mesmo código para navegadores desktop e mobile. Vamos entender ao longo dessa série como isso é realizado.

Criando uma aplicação ASP.NET MVC básica

Como podemos notar na Figura 1, quando escolhemos criar uma “ASP.NET Web Application” no Microsoft Visual Studio, existem diversos templates que podemos utilizar. Logicamente, como estamos criando uma aplicação ASP.NET MVC, a tendência é que escolhamos a opção “MVC”. Entretanto, esse template possui muitas informações que são cuidadas por nós, o que não é interessante em uma aplicação exemplo, em que estamos tentando entender os conceitos do desenvolvimento. Nesse caso, estaremos criando uma aplicação “Empty”, e adicionando os diretórios e referências para um projeto MVC. Esse template cria uma solução vazia, sem qualquer controller, view ou model.

Figura 1. Selecionando o template do projeto

Como estaremos precisando de um layout flexível, precisamos da criação da ao menos um arquivo .css, que utiliza o Cascading Style Sheet. Normalmente, esse tipo de layout está presente em um diretório chamado “Content”. Esse diretório não é criado pelo Visual Studio inicialmente, o que significa que devemos criá-lo. Vamos criar um CSS chamado Site.css. Por enquanto vamos deixá-lo em branco, e posteriormente iremos voltar para esse CSS para entendermos o que fazer com ele.

O ASP.NET MVC também trabalha com o conceito de layouts. É possível que definamos um layout padrão que será compartilhado por todas as páginas. Isso pode ser comparado com certa facilidade ao que se vê em Master Pages em aplicações ASP.NET Web Forms. O funcionamento interno é um pouco diferente, entretanto. O que acontece é que o Razor posiciona o layout padrão que passamos e só então irá trabalhar no layout da página específica que estamos lidando. Isso ficará um pouco mais claro na sequência. Aqui, vamos criar um layout padrão para nossas páginas, e chamá-lo _Layout.cshtml. O símbolo “_” no começo do nome não é uma opção, é um padrão do Razor para entender que se trata de um padrão de layout, e não uma view.

Por fim, vamos criar um controller simples e uma view. Nesse momento, não estaremos alterando os códigos desses arquivos, apenas preparando o projeto para o que iremos fazer na sequência. Tanto o controller como a view serão chamados de “Home”: HomeController e HomeView. O primeiro sufixo é uma convenção do ASP.NET MVC, então tenha atenção para que todos os seus controllers terminem com a palavra “Controller”. Já o sufixo “View” é apenas uma opção para separar ambos. Podemos observar na Figura 2 os elementos criados em nosso projeto.

Figura 2. Elementos do projeto exemplo

Agora que temos o projeto pronto, podemos começar a lidar com como adicionar flexibilidade a ele. Vamos entender como lidar com o arquivo CSS e com os arquivos .cshtml, do Razor. A ideia é que, ao final dessa série, o leitor tenha uma ideia clara de como criar websites móveis.

Adicionando um layout flexível

O primeiro passo para entendermos como fazer um layout flexível é entender o CSS e como ele opera. O CSS, com HTML, trabalha com as regiões que cada um dos elementos do HTML deve ser posicionado, e como. Para isso, fundamentalmente, o desenvolvedor precisa entender três conceitos: display: block, display: inline e display: inline-block (BOX 2). Esses três elementos são parte do CSS e serão muito utilizados para a criação de um layout flexível.

BOX 2. Conceitos Fundamentais do CSS

O CSS possui três elementos considerados fundamentais: display: block, display: inline e display: inline-block. Cada um deles tem um jeito de ser posicionado, e é muito importante entendermos isso porque estaremos utilizando esse conceito para a criação de um layout flexível. Os elementos display: inline são elementos que são tão largos quanto seu conteúdo, e não podem ter suas dimensões definidas no CSS. Já os blocos (display: block) são elementos que ocupam toda a largura do seu container por padrão, mas podem ter suas dimensões definidas no CSS. Por fim, os elementos display: inline-block são uma mistura dos dois anteriores: eles são tão largos quanto seu conteúdo por padrão, mas podem ter suas dimensões definidas no CSS.

Aqui temos um breve exemplo de como os elementos funcionam. Repare que o elemento <div> é, por padrão, um bloco, e o elemento <span> é, também por padrão, inline. Entretanto, esses valores podem ser alterados, como mostra o fato do segundo elemento <span> do código ser um inline-block. Vale notar na figura como esses elementos se comportam. O último não tem suas dimensões definidas, e por isso se comporta exatamente como o primeiro. Entretanto, se definíssemos as dimensões para ambos, elas somente afetariam o último, devido ao fato de ele ser um inline-block. Vejamos um exemplo a seguir e o resultado na Figura a:

<span >Span: INLINE</span> <div >Div: BLOCK</div> <span >Span como INLINE-BLOCK</span>

Figura a. Resultado do código

Anteriormente, discutimos que, muitas vezes, o posicionamento de nossa aplicação web baseada em CSS irá variar dependendo do navegador. Para evitar isso, precisamos resetar todos os elementos que serão utilizados. O ideal é resetar todos eles, de qualquer forma, para evitar problemas posteriores, e não apenas os que são utilizados. Para isso, o primeiro passo é a adição de um código como o da Listagem 1 no arquivo Site.css. Repare que todos os elementos estão sendo utilizados, entre eles os importantes “div” e “span”, que veremos mais profundamente a seguir. Estamos definindo a margem e o padding dos elementos como zero. O padding irá controlar a distância do texto para o começo do elemento e o marging irá separar os elementos entre si. Ao resetarmos essas informações, estaremos passando os mesmos dados para todos os navegadores que serão utilizados.

Listagem 1. Arquivo Site.css para resetar elementos html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; }

Agora podemos começar a preparar o layout de nosso website. Primeiramente, vamos analisar o layout do website da DevMedia. Repare nas duas imagens da Figura 3. À esquerda temos o site tamanho completo, em uma resolução de tela maior, com os dados mostrados em três colunas. À direita, temos o site em tamanho menor. Vale notar que os dados não estão mais em três colunas. Em outras palavras, não há uma barra de rolagem lateral para ver o resto dos elementos. Eles estão expostos em uma coluna só, um sobre o outro. Esse tipo de abordagem é o que há de mais comum nos websites desenvolvidos nos últimos tempos, e veremos como realizar esse tipo de coisa." [...] continue lendo...

Artigos relacionados