Los últimos tutoriales de desarrollo web
 

ASP.NET Páginas Web - Diseño de página


Con páginas Web es fácil crear un sitio web con un diseño coherente.


Un aspecto coherente

En Internet se descubrirá muchos sitios web con una apariencia uniforme en:

  • Cada página tiene la misma cabecera
  • Cada página tiene el mismo pie de página
  • Cada página tiene el mismo estilo y el diseño

Con las páginas Web se puede hacer esto de manera muy eficiente. Puede tener bloques reutilizables de contenido (content blocks) , como los encabezados y pies de página en archivos separados.

También puede definir un diseño coherente para todas sus páginas, usando una plantilla de diseño (layout file) .


Bloques de contenido

Muchos sitios web tienen contenido que se muestra en todas las páginas (like headers and footers) .

Con páginas Web que puede utilizar el @ RenderPage() método para importar contenido de archivos separados.

Bloque de contenido (from another file) se pueden importar en cualquier parte de una página web, y puede contener texto, marcado, y el código, al igual que cualquier página web normal.

El uso de cabeceras y pies de página comunes como ejemplo, esto le ahorra mucho trabajo. Usted no tiene que escribir el mismo contenido en cada página, y cuando se cambian los archivos de cabecera o pie de página, el contenido se actualiza en todas sus páginas.

Se trata de cómo se ve en código:

Ejemplo

<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1>
<p>This is a paragraph</p>
@RenderPage("footer.cshtml")
</body>
</html>
Ejecutar ejemplo »

Utilizando un diseño de página

En la sección anterior, se vio que la inclusión del mismo contenido en muchas páginas web es fácil.

Otro enfoque para crear un aspecto coherente es usar una página de diseño. Un diseño de página contiene la estructura, pero no el contenido, de una página web. Cuando una página web (content page) está vinculado a una página de diseño, que se mostrará de acuerdo con el diseño de la página (template) .

El diseño de la página es como una página web normal, a excepción de una llamada al @ RenderBody() método en el que se incluirá la página de contenido.

Cada página de contenido debe comenzar con una directiva diseño.

Se trata de cómo se ve en código:

Diseño de página:

<html>
<body>
<p>This is header text</p>
@RenderBody()
<p>&copy; 2014 w3ii. All rights reserved.</p>
</body>
</html>

Cualquier Página Web:

@{Layout="Layout.cshtml";}

<h1>Welcome to w3ii</h1>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat.
</p>
Ejecutar ejemplo »

DRY - No te repitas

Con las herramientas de ASP.NET, dos bloques de contenido y el diseño de páginas, se puede dar a sus aplicaciones web un aspecto coherente.

Estas herramientas también le ahorrará mucho trabajo, ya que no tiene que repetir la misma información en todas las páginas. La centralización de marcado, el estilo, y el código hace que las aplicaciones web mucho más manejable y más fácil de mantener.


La prevención de archivos de ser Examinada

Con ASP.NET, los archivos con un nombre que comienza con un guión no se puedan buscar desde la web.

Si desea evitar que sus bloques de contenido o archivos de diseño de ser vistos por sus usuarios, cambiar el nombre de los archivos a:

_header.cshtml

_footer.cshtml

_Layout.cshtml


Ocultar información sensible

Con ASP.NET, la forma común para ocultar información confidencial (contraseñas de bases de datos, contraseñas de correo electrónico, etc.) es mantener la información en un archivo separado llamado "_AppStart" .

_AppStart.cshtml

@{
WebMail.SmtpServer = "mailserver.example.com";
WebMail.EnableSsl = true;
WebMail.UserName = "[email protected]";
WebMail.Password = "your-password";
WebMail.From = "[email protected]";
}