El Principio – contenido del projecto
Hola, en el post anterior » Crear un sitio con Express Version Novato» publique lo facil que era crear un sitio usando ExpressJs. Esta vez vamos crear una pagina principal para el sitio. O mejor, vamos a modificar la pagina principal.
Al final del post anterior la pagina que presente fue el resultado de la instalacion. Ahora modificaremos esa pagina.
- Naveguen hasta la direccion en donde crearon el sitio y veran esto.
- Abre dicha carpeta en tu programa de programacion preferido. Si no posees uno puedes utilizar cualquier bolg de notas, o alguno de estos que dejo abajo:
- Dreamweaver
- Aptana Studio
- Notepad ++
- Visual Studio Code (este es el que voy a estar usando)
- Existen otros pero por lo general uno usa uno que le sea comodo. Como exprese arriba, yo estare usando Visual Studio Code, es gratis y bien completo para trabajar. Ademas de ser simple y de facil manejo.
- Una vez abierta la carpeta en uno de estos programas iremos a la carpeta «VIEW» y veremos dentro tres ficheros:
- layout.jade o layout.pug
- index.jade o index.pug
- error.jade o error.pug
- (El pug es cuando al instalar Express le indicamos que vamos a usar dicha libreria, si no lo hacemos por defecto el sistema instala jade)
- Layout va a poseer la parte principal del codigo pero no se vera como html porque estas usando una libreria que te permite hacer la pagina mas facil. Lo que veras sera esto:
Si reconoces los tags que se usan en HTML veras que no es tan complicado. Este codigo es en Jade (Actualmente Jade a sido cambiado por Pug: si deseas sabes como funciona, entra a esta direccion) y una vez interpretado por el servidor y presentado en el navegador se vera como una pagina regular. Para conprobarlo solo presiona F12 en tu navegador para abrir la ventana de desarrollo y podras ver el codigo como segularmente se ve en una pagina web.
La Pagina Principal
Para la pagina principal e decidido incorporarle Bootstrap para facilitar su elaboracion. Asi que comencemos.
Nuestra pagina principal, el contenido esta en el fichero index.jade o .pug si instalaron la libreria pug. Layout la dejaremos como esta pues la modificacion se hara en index.jade. Esta modificacion sera llamada por layout.jade en la linea que presenta «block content«. Sin mas abrimos index.
Nuestro codigo se vera asi:
block content
h1 = title
p Welcome to #{title}
(Un problema comun aqui es que los espacios tienen que ser creados por caracteres similares, lo que significa que debes usar espacio o tabular,( preferentemente usa espacio para tener mejor control sobre lo que haces), si lo mesclaz tendras error y la pagina no cargara)
Esto lo vamos a cambiar por algo un poquito mejor. Una cabezera para la navegacion, un bloque para el contenido principal y un bloque para el pie de pagina. Personalmente me gusta la idea de que la informacion se vea algo simple y a pantalla completa asi que lo haremos de esa manera. Comenzaremos bien simple, agregaremos un header, un main, y un footer. Ademas de ulgunas etiquetas de texto. Se vera asi:
block content
header
h1 Titulo
main
.content-block
h2 Bienvenidos a #{title}
p esto es un texto simple solo de representacion.
footer
small nuestra pagina es simple.Como funciona? las palabras en azul representan las etiquetas html, lo demas es el contenido dentro de las etiquetas. En jade o pug, para personalizar una etiqueta se hara un poquito diferente:
- h1.simple equibale al HTML: <h1 class=»simple»></h1>
- h1#simple equibale al HTML: <h1 id=»simple»></h1>
- h1.simple#simple(href=’#’) equibale al HTML: <a class=»simple» id=»simple» href=»#»></a>
- .simple equibale al HTML: <div class=»simple»></div>
- #simple equibale al HTML: <div id=»simple»></div>
Si deseas saber un poquito mas sobre esto puedes ir al sitio de Pugjs y revisa las referencias.
Ok, ya tenemos algo diferente en el sitio, ahora si actualizamos el navegador el sitio se vera diferente pero sin estilo.
Agregando el Estilo
Cambiemos para el editor y abriremos el fichero style.css que se va a encontrar en la direccion: «public/stylesheets/style.css«. Vamos a darle estilo a la pagina:
html, body{
width: 100%;
height: 100%;
}
body{
padding-top: 70px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a{
color: #00B7FF;
}
header{
width: 100%;
height: 70px;
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
color: #fff;
}
main{
width: 100%;
height: 100%;
}
.content-block{
padding-top: 200px;
text-align: center;
}
footer{
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 70px;
}Si salvamos este codigo y actualizamos la pagina veremos lo siguiente:
Agreguemosle un fondo al sitio. Busquemos una imagen interesante y hagamos lo siguiente: abre tu editor de imagenes, el que mas te guste, y crea una imagen a tu antojo. Tambien puedes descargarla de internet si lo deseas. Guarda la imagen en: «public/images/«.
Luego agregamos el siguiente codigo a style.css en donde esta main{…}, se vera de esta forma:
main{
width: 100%;
height: 100%;
background: url(/images/ssbit.png) no-repeat;
background-size: 100% 100%;
}
.content-block{
...
color: white;
} Refrescamos la pagina y veremos como el fondo cambia el aspecto del sitio, ahora se ve mejor.
Ya tienen una pagina principal sencilla, en un proximo post mejoraremos el contenido y agregaremos la navegacion ademas de otra section debajo de la seccion principal. Por el momento es todo, nos vemos
Suerte. ;-p