INSTITUTO DE COMPUINGLÉS DE ORIENTE
Sesión Diseño de sitios web
1
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Motor de vistas
Un motor de vistas es el encargado de mostrar el contenido de una página web.
2
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Motor Razor
Es un motor de vistas de contenido web que ha sido implementado desde MVC 3. Con este motor podemos generar páginas más claras, sencillas e intuitivas, permitiéndonos incluir en su estructura código de programación de alto nivel.
3
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Razor (funcionamiento)
C# HTML
Motor Razor @
HTML
archivo.cshtml
archivo.html
En el servidor Web
En el navegador cliente 4
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Motor Razor (sintaxis) La sintaxis de Razor permite combinar código C# y contenido HTML de una forma fluida. La curva de aprendizaje de la sintaxis de Razor es muy pequeña.
El símbolo @ es el corazón de la sintaxis de Razor, este símbolo marca el punto de separación entre C# y HTML.
5
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Razor (sintaxis) Bloques de código. Un bloque de código se debe encerrar entre llaves. @{
// Código de C# }
6
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Razor (sintaxis) Razor permite combinar HTML (contenido) y C# (código) de una forma muy simple, por ejemplo: @if(Usuario.Autenticado()) { <span>Hola, @Usuario.Nombre</span> } else { <span>Por favor @Html.ActionLink("Log In")</span> } 7
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Razor (sintaxis)
Si dentro del contenido HTML deseamos insertar código C# sin que haya ambigüedades, se deben usar paréntesis, por ejemplo: <img src="/fotos/@(Alumno.Nombre).jpg" /> En este caso @(Alumno.Nombre) hace referencia a código de C#, en particular estamos haciendo referencia a la propiedad Nombre de un objeto llamado Alumno.
8
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Razor (sintaxis)
La secuencia @: Indica una transición, le dice a Razor que lo que sigue después de @: es contenido HTML, no código de C#. @if(Alumno.Edad >= 18) { @:Eres mayor de edad. } else { @:Debes pedirle permiso a tus papás. } 9
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Razor (sintaxis)
El bloque <text> es una alternativa a @:, le indica a Razor que todo lo que hay entre <text></text> es contenido HTML, es útil cuando se tienen varias líneas de contenido. @if(Alumno.Edad >= 18) { <text> Eres mayor de edad. Debes votar en las elecciones. ¿Ya hiciste tu servicio militar? </text> } 10
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Creación de la estructura Una de las formas mas sencillas de crear la estructura de un sitio web es hacer una plantilla en papel de las partes en que deseamos dividir el sitio. Normalmente las páginas de un sitio dividen su contenido de la siguiente forma: • • • •
Encabezado. Barra de navegación. Contenido principal. Contenido secundario a la izquierda, a la derecha o ambas. • Pie de página. 11
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
_Layout.cshtml Para que un archivo cshtml sirva como plantilla para el resto del sitio, es bueno que tenga un nombre particular, este debe comenzar con un _ (guión bajo) y después puede tener letras y números, por tener un orden y debido a que así lo nombra Visual Studio cuando crea al archivo que se usa como plantilla, lo llamaremos: _Layout.cshtml Aunque en realidad puede tener cualquier nombre, basta que comience con un guión bajo, por ejemplo: _plantilla.cshtml.
12
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Práctica 1: Creación de mi sitio personal. Crea un sitio nuevo y llámalo sitiopersonal, crea una plantilla y una hoja de estilos para poder reutilizar contenido.
13
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Práctica 2: Página de información personal. Agrega una página que contenga tu información personal: Nombre, Fecha de nacimiento, lugar de nacimiento, correo, Facebook, etc.
14
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Práctica 3: Página de mi currículum.
Agrega la página de tu currículum, no se te olvide agregarla al menú.
15
Área de Investigación en Computación
INSTITUTO DE COMPUINGLÉS DE ORIENTE
Práctica 4: Página de mis intereses.
Agrega una nueva página donde expongas tus intereses: Música, Deportes, Actividades favoritas. 16
Área de Investigación en Computación