Representar sitios de ASP.NET Web Pages (Razor) para dispositivos móviles
Por Tom FitzMacken
En este artículo se describe cómo crear páginas en un sitio de ASP.NET Web Pages (Razor) que se representará correctamente en dispositivos móviles.
Temas que se abordarán:
- Cómo usar una convención de nomenclatura para especificar que una página está diseñada específicamente para dispositivos móviles.
Versiones de software usadas en el tutorial
- ASP.NET Web Pages (Razor) 3
Este tutorial también funciona con ASP.NET Web Pages 2.
ASP.NET Web Pages permite crear presentaciones personalizadas para representar contenido en dispositivos móviles u otros dispositivos.
La manera más sencilla de crear una página específica del dispositivo en un sitio de ASP.NET Web Pages es mediante un patrón de nomenclatura de archivos como este: FileName.Mobile.cshtml. Puede crear dos versiones de una página (por ejemplo, una denominada MyFile.cshtml y otra denominada MyFile.Mobile.cshtml). En tiempo de ejecución, cuando un dispositivo móvil solicita MyFile.cshtml, ASP.NET representa el contenido de MyFile.Mobile.cshtml. De lo contrario, se representa MyFile.cshtml.
En el ejemplo siguiente se muestra cómo habilitar la representación para dispositivos móviles agregando una página de contenido para dispositivos móviles. Page1.cshtml contiene contenido y una barra lateral de navegación. Page1.Mobile.cshtml contiene el mismo contenido, pero omite la barra lateral.
En un sitio de ASP.NET Web Pages, cree un archivo denominado Page1.cshtml y reemplace el contenido actual por el marcado siguiente.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 13em; margin-right: 10em; } </style> </head> <body> <div id="navigation"> <h3>Related Sites</h3> <ul> <li><a href="http://www.adventure-works.com/">Adventure Works</a></li> <li><a href="http://www.contoso.com/">Contoso, Ltd</a></li> <li><a href="http://www.treyresearch.net/">Trey Research</a></li> </ul> </div> <div id="content"> <h1>Lorem ipsum dolor</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </body> </html>Cree un archivo denominado Page1.Mobile.cshtml y reemplace el contenido existente por el marcado siguiente. Observe que la versión móvil de la página omite la sección de navegación para una mejor representación en una pantalla más pequeña.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #content { margin-left: 2em; margin-right: 5em; } </style> </head> <body> <div id="content"> <h1>Lorem ipsum dolor</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </body> </html>Ejecute un explorador de escritorio y vaya a Page1.cshtml.
Ejecute un explorador móvil (o un emulador de dispositivo móvil) y vaya a Page1.cshtml. (Tenga en cuenta que no incluye .mobile. como parte de la dirección URL). Aunque la solicitud es a Page1.cshtml, ASP.NET representa Page1.Mobile.cshtml.
Nota:
Para probar páginas móviles, puede usar un simulador de dispositivo móvil que se ejecute en un equipo de escritorio. Esta herramienta le permite probar páginas web como se verían en dispositivos móviles (es decir, normalmente con un área de visualización mucho más pequeña). Un ejemplo de simulador es el complemento User Agent Switcher para Mozilla Firefox, que permite emular varios exploradores móviles desde una versión de escritorio de Firefox.