Escrito por: TiraCodigo
Etiquetas: ejemplo, asp.net, MVC, Tutorial, template
A estas alturas ya estamos listos para probar y ver lo que llevamos hasta ahora, para eso compilaremos la solución o simplemente debuguearemos el proyecto, en el navegador que abra deberías ver algo parecido a esto:
Como vemos se ve un poco diferente a lo que debería de verse, parece que algunos elementos no se han cargado como deberían, en este momento es en el cual nos podemos apoyar con la herramienta de "inspeccionar" de google chrome, en esta podremos ver los siguientes errores:
- home-bg-slideshow1.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
- /MiTemplate/images/home-bg-slideshow2.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
- /favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)
En donde nos damos cuenta que no se están cargando bien las imágenes, esto pasa por que ya no coincide las rutas que utilizaba el template con la ruta que ahora utiliza nuestro proyecto, si buscamos por ejemplo la "home-bg-slideshow1.jpg" en nuestro proyecto, nos daremos cuenta que el archivo "custom.js" tiene un acceso a esa imagen con la url anterior, ya que la carpeta "images" ya no existe, ahora se puede encontrar en la dirección "content/imagenes", por lo tanto de esto
// HOME BACKGROUND SLIDESHOW
$(function(){
jQuery(document).ready(function() {
$('#home').backstretch([
"images/home-bg-slideshow1.jpg",
"images/home-bg-slideshow2.jpg",
], {duration: 2000, fade: 750});
});
Cambiaria a esto:
// HOME BACKGROUND SLIDESHOW
$(function(){
jQuery(document).ready(function() {
$('#home').backstretch([
"content/imagenes/home-bg-slideshow1.jpg",
"content/imagenes/home-bg-slideshow2.jpg",
], {duration: 2000, fade: 750});
});
Listo!!!, ahora solo bastara volver a probar y debería de aparecer todo bien (Nota: Si no te aparece correctamente seguro es por que tu navegador cacheo el archivo JS y este no se ha vuelto a cargar, para eso tienes que borrar cache en el navegador y volver a lanzar la pagina):
Para no tener este inconveniente de direcciones, lo que puedes hacer es remplazar todo el código donde este "images/"por "content/imagenes/" , cabe mencionar que después de realizar esto, algunas rutas de imagenes debemos editarlas en el archivo CSS, ya que algunas pudieran no estar correctas
Ahora que ya hemos visto que vamos por buen camino, vamos a seguir los pasos que hemos visto, para crear las vistas parciales de las otras secciones, un vez creadas, tendrías que tener la vista index (Views/Home/Index.cshtml) mas o menos así:
@{
ViewBag.Title = "Mi Template";
}
@Html.Partial("Menu")
@Html.Partial("Home")
@Html.Partial("Work")
@Html.Partial("About")
@Html.Partial("Team")
@Html.Partial("Portfolio")
@Html.Partial("Pricing")
@Html.Partial("Contact")
@Html.Partial("Footer")
En este paso si volvemos a visualizar la pagina, veremos que ya se ve mejor, pero si vamos a la consola, veremos los siguientes errores:
- et-line.woff Failed to load resource: the server responded with a status of 404 (Not Found)
- fontawesome-webfont.woff2 Failed to load resource: the server responded with a status of 404 (Not Found)
- et-line.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
- fontawesome-webfont.woff Failed to load resource: the server responded with a status of 404 (Not Found)
- fontawesome-webfont.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
Como vemos, el proyecto no puede encontrar los archivos de las fuentes, y este tema es lo mismo que pasaba con las imágenes, es decir, no esta encontrando la ruta, por que la misma ha cambiado, para localizar donde esta el problema, bastara con que busquemos en el proyecto donde se esta utilizando o cargando la primera fuente "et-line.woff", y vemos que esta se carga en el css "et-line-font.css", ahí tendremos que cambiar la ruta de:
@font-face {
font-family: 'et-line';
src:url('../fonts/et-line.eot');
src:url('../fonts/et-line.eot?#iefix') format('embedded-opentype'),
url('../fonts/et-line.woff') format('woff'),
url('../fonts/et-line.ttf') format('truetype'),
url('../fonts/et-line.svg#et-line') format('svg');
font-weight: normal;
font-style: normal;
}
por esta:
@font-face {
font-family: 'et-line';
src: url('../../fonts/et-line.eot');
src: url('../../fonts/et-line.eot?#iefix') format('embedded-opentype'), url('../../fonts/et-line.woff') format('woff'), url('../../fonts/et-line.ttf') format('truetype'), url('../../fonts/et-line.svg#et-line') format('svg');
font-weight: normal;
font-style: normal;
}
Ahora hay que realizar el mismo procedimiento para las demás fuentes (fontawesome-webfont.ttf), y listo, ya tenemos nuestro primer template montado en un proyecto de asp mvc, cabe mencionar que algunas veces el proceso puede ser un poco frustrante, por que aveces algunos archivos tienen rutas que cambian al montarlo a nuestro proyecto, (como nos paso en este template), pero nada que no se pueda solucionar buscando con paciencia archivo por archivo, espero que este tutorial te sea de ayuda, seguro hay cosas que veras en el código que se puedan mejorar, pero ese es el propósito del tutorial, guiarte en los primeros pasos, y una vez entiendas el proceso, el siguiente paso es mejorarlo, a continuación te dejo los links tanto del proyecto como de la versión en linea de este proyecto:
Descargar el código fuente del ejemplo