HTML

nodeserver logo

Montar un servidor para node.js usando nodeserver

Llevo tiempo trabajando con node.js y la verdad es que es el entorno donde mas cómodo me siento. El problema que tiene node.js es que cuando buscas como montar un servidor, no tienes ejemplos reales, solo como escuchar el puerto 80.

Para mis webs uso un servidor de desarrollo propio llamado nodeserver que podemos encontrar tanto en github como en npm. Este servidor tiene varias ventajas fundamentales:

  • Al ser un desarrollo propio, me permite fácilmente ir añadiendo nuevas funcionalidades según las necesito.
  • Tiene soporte para proxy reverso, por ejemplo tener las webs en un servidor interno sin acceso público y traer las conexiones.
  • Soporte de gestión de procesos para node.js, por lo que los .js de node.js que vamos a arrancar como servidores, podemos arrancarlos automáticamente desde el servidor, así como pararlos o reiniciarlos.
  • Tiene soporte para páginas estáticas en html, con un listado de mime types en desarrollo. Esto nos permite por ejemplo, crear un sistema cookieless para un CDN sin un backend, solo configurando el servidor.
  • Soporte para páginas en PHP. Aunque aún no soporta elementos como mod_rewrite, en un futuro lo tendrá, por lo que en el típico VPS para gestionar pequeños proyectos, podemos prescindir de un NGINX o Apache y utilizar nodeserver para gestionar nuestras webs.

Vamos a ver como se instala y configura este servidor. Para esto, primero debemos tener instalado en nuestro sistema node.js, cualquier versión o io.js. Este servidor funciona desde la versión 0.10 de node.js, aunque lo mas recomendable es utilizar las últimas versiones, 4.0 o superiores.

Con nodejs ya instaldo, debemos instalar por npm nodeserver

[code lang=»bash»]$ sudo npm install nodeserver -g[/code]

De momento nodeserver solo cuenta con script de instalación para centos pero se irá ampliando a otros sistemas, esto no quiere decir que no se pueda utilizar, no se instalará como demonio del sistema.

[code lang=»bash»]$ sudo nodeserver install centos[/code]

Una vez instalado el script, que no es obligatorio, deberemos configurar el servidor. Para ello crearemos un json de configuración en /etc/nodeserver/nodeserver.config.

{
 "nodeserver": {
  "admin": {
   "active": [true|false],
   "port": admin-port-number,
   "user": "user-for-admin",
   "password": "hash-password"
  }
 },
 "sites": [{
  "name": "website name",
  "type": "node|cgi",
  "bindings": [
   "example.com:80",
   "www.example.com:80",
   "otherbindings:8080",
  ],
  "port": "internal port number for the project, do not repeat it. Only for node"
  "script": "absolute script for server.js for node or doc_root for php (cgi)",
  "security": {
   "certs": {
    "key": "/absolutepath/keycert.key",
    "cert": "/absolutepath/cert.cert",
    "ca": ["/absolutepath/ca.cert"]
   },
   "bindings": [
    "securehostforhttps.com:443",
    "www.securehostforhttps.com:443"
   ]
  },
 }, {
  "name": "php website",
  "type": "cgi",
  "bindings": [
   "myphpsite.com:80"
  ],
  "script": "/var/www/phpsite"
 }, {
  "name": "standar nodejs site",
  "type": "node",
  "bindings": [
   "standarnodejs.com:80"
  ],
  "port": "10001",
  "script": "/var/www/nodejs1/server.js"
 }, {
  "name": "secure nodejs site",
  "type": "node",
  "bindings": [
   "securenodejs.com:80"
  ],
  "port": "10002",
  "security": {
   "certs": {
    "key": "/absolutepath/keycert.key",
    "cert": "/absolutepath/cert.cert",
    "ca": ["/absolutepath/ca.cert"]
   },
   "bindings": [
    "securenodejs.com:443"
   ]
  },
  "script": "/var/www/nodejs2/server.js"
 }]
}

El json de configuración se divide en 2 keys: una de administración y otra de sitios web. La parte de administración indicamos si queremos activarlo o no, el puerto de escucha via web, usuario y contraseña. La contraseña viene en formato hash y podemos generar una utilizando el comando:

[code lang=»bash»]$ nodeserver password micontraseña[/code]

El resultado deberemos utilizarlo en la configuración de password.

Por otro lado tenemos los sites. Los sites tienen como configuración un nombre, un tipo cgi para estáticosphp o node para webs en node.js. Un array de bindings indicará dominio y puerto que vamos a utilizar de escucha. En los bindings podemos incluir patrones regulares, por ejemplo, para cuando tenemos subdominios que queremos gestionar desde un mismo backend. Un ejemplo sería «.+\.midominio.com:80» para capturar todos los subdominios de midominio.com en el puerto 80. El atributo port solo se utilizar en node.js y es un puerto interno de escucha para servidores node.js. El atributo script utiliza para node.js la ruta del script de arranque del proyecto o el document_root para webs en php o estáticas.

Una vez todo configurado, ya podemos arrancar y probar nuestro servidor.

[code lang=»bash»]$ sudo nodeserver start[/code]

Os animo a probarlo y a comentar vuestras experiencias, mejoras, etc. Esto es un ejemplo, de como prepararlo en un entorno real, pero se puede configurar nodeserver como servidor de desarrollo, tener una escucha con el parametro start-loop en lugar de start.

Por que usar un framework para frontend web como bootstrap

CSS3Desde hace unos años han ido apareciendo de forma generalizada y bien desarrollada lo que todo el mundo solía hacer en sus desarrollos web y son pequeños frameworks para el frontend. Quien haya maquetado de forma continuada, con el tiempo habrá ido reutilizando técnicas entre proyectos. Por ejemplo, una de ellas es el uso de estilos de reseteo como el ya clásico reset.css o la creación y reutilización de componentes básicos como botones, migas de pan, etc.

Hace unos 3 o 4 años empezó a surgir una tendencia de creación de sistemas de grid, organizando nuestra web en columnas. El uso del grid nos facilita el trabajo, siempre y cuando no vayamos buscando el pixelperfect, ya que nos permite adaptar el ancho de las columnas, dar estilos generales y modificar la apariencia de nuestra web con pocas lineas de css sobre el grid ya creado.

Hace un par de años que empezaron a nacer los frameworks completos para frontend. Estos frameworks no son solo una base de estilos, sino también componentes de uso general que usamos a diario. A veces y según el desconocimiento de la gente, piensa como frameworks frontend cosas que no lo son. Para aclararlo creo que lo mas sencillo es quedarnos en jQuery. jQuery tiene varias ramas, la librería, que no es mas que una librería de manipulación de DOM, jQueryUI que es un framework de componentes frontend y jQuery Mobile que viene a ser no un framework frontend sino ya un fullstack de frontend. La diferencia entre ellos es evidente, ya que jQueryUI no nos da una base de estilos, ni un sistema del que poder extender nuestra página, sino unos componentes como botones, tabs, sliders, etc. con los que podemos crear componentes mucho mas ricos que los nativos de HTML. Por otro lado tenemos el fullstack de jQuery Mobile que no solo nos da un theme con estilos básicos sobre los que desarrollar, sino todo el sistema de navegación, control de menús, formatos, datos, etc.

¿Qué es un framework frontend para web? No es mas que un conjunto de librerías y estilos básicos que nos permiten construir interfaces frontend de forma rápida y personalizable. Comparandolo con jQueryUI, sería como añadir unos estilos de scaffolding para la construcción de la estructura de la página y un grid de maquetación. Si por otro lado lo comparamos con jQuery Mobile, sería lo mismo pero eliminando la parte en la que jQuery Mobile nos construye todo el sistema de navegación entre páginas (es un ejemplo), bajandolo por así decir de fullstack a framework.

bootstrap-logo

Los sistemas de scaffolding nos ayudan a crear prototipos de webs de forma rápida. Podemos generar de forma rápida, paginas, menús, secciones, formularios, todo con estilos genéricos. Una vez desarrollado nuestro scaffolding básico, podemos dedicar esfuerzos a personalizar el estilo de la página. Hay que tener en cuenta que donde se diferencia de la forma clásica que teniamos de trabajar si éramos ordenados es que no nos tenemos que preocupar de la evolución de nuestro framework de base de estilos y que ademas podemos reaprovechar los plugins que desarrolle la comunidad.

Ahora un breve listado con los 4 frameworks mas útiles, aunque hay muchos mas:

Espero que os pueda servir como punto de entrada para investigar y aplicar posteriormente en vuestros proyectos.

Tabla de codificaciones de caracteres entre ANSI, UTF-8, Javascript, HTML

ene-virguilillaCuando hacemos una página web en utf8, al escribir una cadena de texto en javascript que contenga acentos, tildes, eñes, signos de interrogación y demás caracteres considerados especiales, se pintara de una forma extraña en el html. Esto es porque javascript tiene su propio sistema de codificación, al igual que el html. A continuación os dejo una tabla con los principales caracteres que se utilizan, ya que es útil tenerlos a mano para poder escribirlos:

ANSI UTF-8 JAVASCRIPT HTML
Á Á u00c1 Á
á á u00e1 á
É Ã‰ u00c9 É
é é u00e9 é
Í Ã u00cd Í
í í u00ed í
Ó Ã“ u00d3 Ó
ó ó u00f3 ó
Ú Ãš u00da Ú
ú ú u00fa ú
Ñ Ã‘ u00d1 Ñ
ñ ñ u00f1 ñ
¿ ¿ u00bf ¿

Y después de esta tabla a modo de apunte, os dejo la tabla completa de codificación de caracteres como eñes, acentos, tildes y demás caracteres entre ANSI, UTF8, Javascript y HTML:

ANSI UTF-8 JAVASCRIPT HTML
 u00a0  
¡ ¡ u00a1 ¡
¢ ¢ u00a2 ¢
£ £ u00a3 £
¤ ¤ u00a4 ¤
¥ Â¥ u00a5 ¥
¦ ¦ u00a6 ¦
§ § u00a7 §
¨ ¨ u00a8 ¨
© © u00a9 ©
ª ª u00aa ª
« « u00ab «
¬ ¬ u00ac ¬
­ ­ u00ad ­
® ® u00ae ®
¯ ¯ u00af ¯
° ° u00b0 °
± ± u00b1 ±
² ² u00b2 ²
³ ³ u00b3 ³
´ ´ u00b4 ´
µ µ u00b5 µ
¶ u00b6 ¶
· · u00b7 ·
¸ ¸ u00b8 ¸
¹ ¹ u00b9 ¹
º º u00ba º
» » u00bb »
¼ ¼ u00bc ¼
½ ½ u00bd ½
¾ ¾ u00be ¾
¿ ¿ u00bf ¿
À À u00c0 À
Á Á u00c1 Á
 Â u00c2 Â
à Ã u00c3 Ã
Ä Ã„ u00c4 Ä
Å Ã… u00c5 Å
Æ Ã† u00c6 Æ
Ç Ã‡ u00c7 Ç
È Ãˆ u00c8 È
É Ã‰ u00c9 É
Ê ÃŠ u00ca Ê
Ë Ã‹ u00cb Ë
Ì ÃŒ u00cc Ì
Í Ã u00cd Í
Î ÃŽ u00ce Î
Ï Ã u00cf Ï
РÐ u00d0 Ð
Ñ Ã‘ u00d1 Ñ
Ò Ã’ u00d2 Ò
Ó Ã“ u00d3 Ó
Ô Ã” u00d4 Ô
Õ Ã• u00d5 Õ
Ö Ã– u00d6 Ö
× Ã— u00d7 ×
Ø Ã˜ u00d8 Ø
٠Ù u00d9 Ù
Ú Ãš u00da Ú
Û Ã› u00db Û
Ü Ãœ u00dc Ü
Ý Ã u00dd Ý
Þ Ãž u00de Þ
ß ÃŸ u00df ß
à Ã u00e0 à
á á u00e1 á
â â u00e2 â
ã ã u00e3 ã
ä ä u00e4 ä
å Ã¥ u00e5 å
æ æ u00e6 æ
ç ç u00e7 ç
è è u00e8 è
é é u00e9 é
ê ê u00ea ê
ë ë u00eb ë
ì ì u00ec ì
í í u00ed í
î î u00ee î
ï ï u00ef ï
ð ð u00f0 ð
ñ ñ u00f1 ñ
ò ò u00f2 ò
ó ó u00f3 ó
ô ô u00f4 ô
õ õ u00f5 õ
ö ö u00f6 ö
÷ ÷ u00f7 ÷
ø ø u00f8 ø
ù ù u00f9 ù
ú ú u00fa ú
û û u00fb û
ü ü u00fc ü
ý ý u00fd ý
þ þ u00fe þ
ÿ ÿ u00ff ÿ

Espero que os sirva de ayuda tanto como a mi.

Introducción a RaphaelJS

RaphaelJS es una librería de javascript para desarrollar gráficos y animaciones vectoriales en SVG y VML. ¿Qué es SVG? ¿Por qué vamos a utilizar gráficos vectoriales? ¿Para qué utilizar una librería para trabajar con SVG? Todas estas preguntas son las que debemos comprender antes de empezar a trabajar.

Gráficos Vectoriales Escalables o abreviado del ingles SVG (Scalable Vector Graphics) es un estandar propuesto en el año 2001 por el W3C para estandarizar los gráficos vectoriales. Allá por el año 1998, se presentaron 2 propuestas de gráficos vectoriales, por un lado se presento PGML por parte de Adobe, IBM, Netscape (Mozilla y Firefox) y Sun (Java, ahora parte de Oracle). Por otra parte se presento VML que tuvo más éxito por parte de Autodesk (creadores de Autocad), Macromedia (creadores de flash y posteriormente comprado por Adobe) y Microsoft. Normalmente cuando se hacen varias propuestas de este estilo al W3C, se acaba decantando por una en particular, pero en este caso, se optó por el camino del medio y el W3C propuso SVG que no es mas que la mezcla de VML + PGML.

Con SVG se crea un documento XML que puede ser utilizado tanto en un archivo independiente con extension *.SVG como embebido dentro de una página web al ser un XML y puede ser manipulado con javascriptSVG tiene su propio árbol DOM similar al HTML por lo que fácilmente desde javascript podremos capturar eventos, cambiar sus caracteristicas, así como dar estilos desde CSS.

Una vez tenemos la base, podemos entender mejor el papel de RaphaelJS en todo esto. RaphaelJS es una librería que nos promueve de una gran cantidad de objetos y métodos para encapsular los documentos SVG. Esta necesidad vino dada en su dia por los navegadores antiguos que interpretaban VML y los mas modernos que fueron interpretando SVGRaphaelJS genera los documentos dinámicamente en uno u otro lenguaje, dependiendo de lo que soporte el navegador, siempre dando prioridad al estandar SVG.

Si todos los navegadores actuales soportan SVG ¿Por qué utilizar una librería como RaphaelJS y no SVG nativo? Muy sencillo y es que cuando queremos generar unos gráficos en SVG dinámicamente, con animaciones y demás, necesitamos de un respaldo de utilidades que nos faciliten en todo lo posible el trabajo, ya que el objetivo es ser productivos. Por ejemplo, para quienes conozcan jQuery, todo el mundo sabe hacer un document.getElementById, pero siempre acabamos haciendo $(«#id») porque es más cómodo, ademas de ofrecernos herramientas muy útiles. Con RaphaelJS pasa lo mismo, si queremos generar una animación en SVG, nos ofrece funciones con calbacks para generar animaciones dinámicamente con varias funciones easing o podemos guardar los objetos de SVG según los vayamos creando para reutilizarlos mas adelante, ademas de ser un poco mas sencillo de utilizar que SVG a pelo.

Este contenido y mas ira apareciendo en el curso de Raphael JS – Gráficos vectoriales con javascript y mas en concreto en el primer capítuo: Introducción a RaphaelJS.

Diferentes formas de seleccionar etiquetas hijas en css

Cuando estamos maquetando una web, muchas veces nos vemos en la necesidad o en la comodidad de aplicar estilos a etiquetas o clases hijas directamente pero a veces esto puede convertirse en un problema. Normalmente cuando se maqueta se suele seleccionar directamente todas las etiquetas hija de un tipo por ejemplo, todos los p que haya dentro de un div con una clase, pero que pasa si tenemos una estructura un tanto compleja y no queremos que todas se comporten de una misma manera, como por ejemplo usando listas y sublistas y queremos que las sublistas tengan un margen que la lista normal no queremos que tenga.

En CSS hay varias formas de seleccionar etiquetas hija, la mas común es la de seleccionar todos los hijos de un tipo, como seria el ejemplo:

.clase ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

Con esto decimos que todos los li contenidos dentro de un ul, tengan un estilo, pero ¿Y si queremos hacer un listado mas complejo, con sublistados? Lo que debemos de hacer es decirle que aunque los li dentro de ul se comporten de una forma concreta, los primeros li queremos que se comporten de otra forma. En el siguiente ejemplo se usa para formar un listado con li y ul donde queremos que los primeros li no tengan margen alguno, pero que el resto de li que haya tengan un margen a la izquierda para simular un sangrado automático:

.sidebarBox ul > li > ul {
    margin-left: 25px;
}

Y el html sería el siguiente:

  • lista1
    • lista2

Con esto lista1 no tendra sangrado pero lista2 tendra un sangrado de 25px hacia la izquierda. Espero que os sirva de ayuda.

Centrar texto verticalmente con css

Desde hace años que me pase a las capas abandonando la maquetación en tablas, si algo he hechado de menos siempre ha sido el «como centrar texto verticalmente sin valign». Para solucionar este problema, siempre he usado subcapas con margin o paddings o directamente padding superior en la capa padre para bajar el texto, aunque eso se comporta de manera distinta dependiendo del navegador. En una pagina que estoy montando me he puesto a investigar, como alguna vez hago con el intellisense mirando todo lo que me encuentro y en esta ocasión le ha tocado el turno al css. Buscando me he encontrado con un atribuo de css que se llama line-height, que agranda la linea del texto a la altura que le indiquemos, lo que quiere decir que si tenemos un menú, de pastillas de 50px de alto y le indicamos que el line-height es 50px, el texto aparecerá centrado. Realmente no es algo milagroso ya que no es dinámico, pero para menús y cosas así viene genial.

Os dejo un ejemplo de como se utilizaría:

Ejemplo del html:

Ejemplo del css:

#menu {
  height: 50px;
}

.menuOption {
  line-height: 50px;
  text-align: center;
}

Con este ejemplo anterior, nos dibujaría una pastilla (mas o menos) y nos dejaría el texto centrado verticalmente y ya de paso centrado horizontalmente también.

Scroll al inicio