Parte 4 | Creando un sistema de chat sobre NodeJS con Socket.IO, ExpressJS, MongoDB, Foundation y Openshift

Esta es la cuarta parte de la serie, para referencia aqui dejo los enlaces a las 5 partes ordenadas:

Esta vez, el trabajo es mucho más sencillo que en los pasos anteriores, vamos a utilizar el framework Zurb Foundation, para darle estilo a la aplicación de chat y hacerla responsive para poder utilizarla comodamente en pantallas pequeñas.

La nueva apariencia del chat.

Large screens

Para lograr esta apariencia, basta con estructurar el contenido principal utilizando las clases de Foundation framework. El código del archivo html del chat queda de la siguiente manera:

En el cliente.

  • Para adaptar el tamaño de los elementos y controlar el espacio, utilizamos el sistema de grid del framework.
  • Para una explicación detallada sobre las clases que proporciona el framework, puedes consultar la documentación oficial del framework.

Hay algunos estilos propios en la aplicación, para agregar personalidad. La hoja de estilos es la siguiente.

  • No hace falta agregar media queries ya que Foundation nos facilita la tarea mediante las clases del grid.
  • La hoja de estilos se enfoca en personalizar colores, margenes y tamaño de ciertos elementos. Siempre que es posible se usan las clases de Foundation, es por ello que el la hoja de estilos es tan pequeña.

En el servidor

No olvidemos que el servidor es quien debe ser capaz de proporcionar los archivos estaticos utilizados en la aplicación, tales como el css y js de Foundation y nuestra hoja de estilos propia. Para ello agregamos las siguientes rutas en el servidor:

El resultado.

Large Login screen
En pantallas de tamaño regular
Small screens
En dispositivos moviles

Finalmente hemos concluido el desarrollo del sistema de chat. El único paso que nos queda por hacer es publicarla para poder presumirla a todo el mundo.

Si estas confundido con el código, no dudes en comentar, si quieres ver el código de la aplicación completa puedes visitar el proyecto en Github.

Happy Coding !! 🙂

Anuncios

6 comentarios sobre “Parte 4 | Creando un sistema de chat sobre NodeJS con Socket.IO, ExpressJS, MongoDB, Foundation y Openshift

  1. Funciona bien, pero tengo unos errores, no aparece la lista de los usuarios conectados, al realizar un comentario aparece invalid date y solo aparece la fecha y hora del mensaje al recargar la pagina, al desconectar a un usuario da error.
    De antemano muchas gracias, de lo mejor tus tutoriales.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s