Node.js / Estilizando a Notas

Bienvenidos sean a este post, y si hoy tambien seguimos con la aplicacion notas.

En el post anterior terminamos nuestra aplicacion pero solamente a nivel utilidad dado que utilizamos el tema predeterminado que nos provee Express que si bien no es desagradable tampoco ganara ningun concurso de diseño, si bien un poco mas adelante cuando veamos el paradigma de «primero-movil» nos centraremos mas profundamente en ver todos estos temas hoy veremos como hacer unos cambios basicos para nuestra aplicacion.

Ya mencionamos que para iniciar a nuestra aplicacion siempre usamos el siguiente comando:

$ npm start

Este en conjunto con cross-env nos devuelve un log muy completo sobre todas nuestras actividades en la aplicacion, al momento de ejecutarlo no lo veremos pero si nos conectamos a la pagina entre las actividades tendremos la siguiente:

express:router dispatching GET /stylesheets/style.css +190ms

Este es el archivo encargado de manejar nuestros estilos, y el llamado de este se encuentra en el archivo layout.hbs del directorio views:

<link rel='stylesheet' href='/stylesheets/style.css' />

Este archivo en particular lo encontraremos en el directorio public/stylesheets y ambos son generados por Express al momento de crear la aplicacion, y a su vez este es configurado en el archivo app.js de manera predeterminada:

app.use(express.static(path.join(__dirname, 'public')));

Y esta misma linea la usamos tambien para app.mjs haciendo que public este disponible en todo momento para nuestra pagina, vamos a pasar a trabajar con nuestro codigo para modificar el estilo pero en caso de no tenerlo les dejo un link para descargarlo:

Simplemente descarguen el archivo y extraiganlo en el ordenador para comenzar a trabajar, antes de comenzar a trabajar veamos como es nuestro archivo css actualmente:

public/stylesheets/style.css

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

Como pueden ver es algo muy basico, vamos a tomar este archivo y vamos a modificarlo de la siguiente manera:

body {
  padding: 5px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #000000;
}

header {
        background: #eeeeee;
        padding: 5px;
}

En este caso solo modificamos la separacion, tambien modificamos el color de los enlaces y por ultimo cambiamos el color de fondo del encabezado o header, con esto ya debemos tener un nuevo estilo para nuestra pagina veamos como esta ahora, para ello simplemente deben iniciar el servidor y se vera de la siguiente forma:

Y si vemos alguna nota, se veran de la siguiente forma

Pero esto es solo una forma muy basica de mejorar el aspecto de nuestra aplicacion sin mucha mas intervencion de otras herramientas pero esto lo mejoraremos cuando hablemos sobre el paradigma de «primero-movil», antes de finalizar les dejo un archivo con todos los archivos de nuestra aplicacion y los codigos trabajados en este post:

En resumen, hoy hemos visto como modificar los temas o estilos de nuestra aplicacion, si bien mediante Express se genera uno predeterminado, podemos trabajar con el mismo para crear los cambios que creamos necesarios, espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Donación

Es para mantenimento del sitio, gracias!

$1.50