Tutorial Node.js: Básico

​ Ya conocemos suficiente hasta ahora sobre HTML, Javascript y CSS, pero antes de llegar a los frameworks pienso que sería mucho mejor que conozcamos una herramienta con la tengamos los conocimientos básicos para montar un servidor web, manejar urls y conectarse con la base de datos.

Por esta razón les presento Node.js, su página oficial la pueden visitar aquí. Node.js es una herramienta que nos permite colocar en funcionamiento un servidor web asíncrono y manejo de datos Entrada/Salida en una arquitectura orientada a eventos.

El instalador de la herramienta lo conseguimos en la página oficial de Node.js. Ahora bien en linux podemos hacer esto muy fácil instalando npm.

Para ejecutar los archivos de ejemplo se tiene la siguiente sintaxis:

node <nombre_de_archivo.js>

1 - Hola Nodejs

Esto hará correr el programa y podremos acceder al URL http://127.0.0.1:3000/ este significa el IP 127.0.0.1 y el puerto número 3000. Desde la consola podremos ver que existe un programa en ejecución y a la espera de eventos, para que este ejemplo fuese más interesante agregue un contador que lleva el número de visitas a nuestra página.

Dentro del código de la creación del servidor se encuentran instrucciones que se ejecutan por cada llamada, esto quiere decir que es un área donde podemos manejar la respuesta que podemos dar al usuario dado un URL.

La apariencia de esto lo pueden ver en la siguiente imagen.

2 - Manejo de rutas y carga de HTML

En este ejemplo ya hago uso de unas mejores prácticas de código, como son la declaración de variables estáticas para la configuración inicial de nuestro servidor, mensaje de consola que muestra el URL consultado y luego el manejo de URL para mostrar la vista que corresponda.

El manejo de URL se hace a través de la comparación del contenido de la variable req.url y lo que queremos que se tenga como link de acceso para la página.

Además en este ejemplo incluyo el uso de la librería fs que permite el manejo de archivos, es por eso que al acceder al URL con la dirección /prueba se ejecuta un procedimiento que lee un archivo de tipo html (desde la línea 16 a la 20). Lo más importante para que si se muestre este contenido es hacer el retorno de la función, para asegurarse de que no se altere el contenido. Para que siempre se muestre un algo, agregue un contenido por defecto (líneas 24 y 25 del código).

La apariencia de esto lo pueden ver en la siguiente imagen.

El archivo HTML se mostrará sin ningún CSS, Javascript o imágenes, es por eso que necesitamos un manejador de URL mejorado en nuestro servidor.

3 - Carga de varios archivos

En este ejemplo tenemos el manejo de archivos que necesitamos para poder responder con varios tipos de archivos imágenes, texto plano, html, css, javascript e iconos.

A diferencia del ejemplo anterior el manejador de URL funciona recibiendo un nombre de archivo que este en el directorio donde se encuentre nuestro proyecto y en el caso de un HTML que invoque archivos, este hará automáticamente el llamado a todos los archivos referenciados en el mismo y por tanto tendremos una página web con uso de CSS, Javascript, entre otros.

Si consultamos en el navegador el URL http://127.0.0.1:3000/prueba.html veremos algo parecido a la siguiente imagen.

Gracias a esta herramienta ya tendremos los conceptos básicos para un montar nuestra página web en un servidor local. Aunque el hacer todo este proceso de manejo de archivos mostrados y URL a través de la comparación de strings, resultan métodos muy incómodos para el desarrollo web, es por eso que existen herramientas para node.js que facilitan en gran medida este proceso. Pero antes de llegar a esas librerías de ayuda, daremos el siguiente paso en el tema de comunicación con una base de datos en el siguiente tutorial, todo esto con el fin de ilustrar lo valioso de las herramientas de ayuda y querer usar un framework web.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.

Tutorial HTML: Avanzado

​ Es el momento de que podamos hacer juegos con HTML, esto lo lograremos usando la etiqueta canvas, ella nos brinda un espacio en el que podemos dibujar elementos 2D y 3D. Para este tutorial únicamente tratare juegos 2D.

1 - Canvas

En este ejemplo vemos que dentro del HTML se encuentra la etiqueta canvas, en ella tenemos el id,ancho y alto especificado. Ahora bien para poder hacer acciones sobre el canvas usaremos nuestra mejor herramienta Javascript, con el podemos hacer toda la interacción necesaria en el juego. Para hacer este ejemplo me base en el código que pueden encontrar en esta página, este lo cambie un poco para simplificar su estructura y que todo estuviese en español.

Todo juego tiene al menos 4 partes básicas:

• Variables estáticas: Aquí se encuentran todas las variables que necesitamos acceder desde distintas partes. Por lo general tenemos un método que inicializa todos los valores, esto es de gran ayuda para poder reiniciar partidas, contadores, menú, estados, entre otros.
• update: El método encargado de actualizar los elementos del juego. Por lo general llamamos a este método el encargado de la lógica.
• render: Se encarga de dibujar todo dentro de la ventana.
• main: En este normalmente iniciamos todo el proyecto y en el caso de juegos en HTML es donde llamamos a los métodos de update y render con determinada frecuencia de milisegundos.

Para la interacción agregamos funciones que "escuchen" si se presionó y soltó una tecla. En muchos motores gráficos esta información la tenemos en el update, pero por motivos de Tutorial y de querer mostrar el código más sencillo posible, se usan manejadores de eventos nativos de Javascript. Para poder verificar la tecla se usa el código de la tecla.

A diferencia del sistema de coordenadas convencional el punto de origen dentro del canvas se encuentra en la esquina superior izquierda, el eje horizontal es positivo a la derecha y el vertical es positivo hacia abajo.

Algo que es muy importante a la hora de dibujar es el orden en el que se ejecutan las funciones, ya que cada elemento dibujado siempre se coloca encima del anterior. Por lo general limpiamos siempre la ventana con un color de fondo y luego dibujamos nuestros elementos. El orden habitual en los videojuegos es: Limpiar fondo, dibujar escenario (ambiente, objetos, personajes), sombras, efectos y HUD.

Para poder llegar a dibujar se usa el contexto dentro del canvas. Algunas de las funciones que se usan para dibujar son:

• fillStyle: Establece el color.
• fillRect: Permite dibujar un rectángulo, especificando su posición en "x" y "y", el ancho y alto.
• drawImage: Permite dibujar una imagen, especificando el elemento cargado y la posición.
• font: Se establece la fuente de escritura.
• fillText: Permite escribir, se debe especificar el mensaje y la posición.

Al final del código es donde encontramos la función setInterval(main, 10); que inicia el ciclo del juego, este llamará cada 10 milisegundos la función main.

Una versión de prueba de este ejemplo la pueden ver aquí.

2 - Juego de Snake

Al igual que el ejemplo anterior me base en otro tutorial y lo pueden encontrar en esta página, esta cambido un poco para estructurarlo en el mismo formato que el ejemplo anterior.

En este caso lo más importante es el uso de Jquery para la estructura del juego. Las diferencias más relevantes son los métodos para capturar las teclas presionadas, esto se ve en la línea 58 del archivo snake.js, donde se usa la función que escucha el evento de una tecla presionada. La otra diferencia es la inclusión del método de iniciar ya que para este ejemplo se cuenta con una lógica más compleja de juego que requiere reinicio.

Una versión de prueba de este mini juego la pueden ver aquí.

3 - Juego de Batman - Usando imágenes

Para este ejemplo lo que quiero ilustrar:

• Como agregar un elemento en el HTML desde javascript, para esto se necesita únicamente llamar la función document.createElement("canvas").
• Como se cargan las imágenes, lo cual es muy fácil ya que solo se necesita, crear un objeto del tipo Image y especificar la ruta de esta, ejemplo de esto se ve en las líneas 16 y 17 del archivo batman.js.

El resto de la estructura del juego es igual que los ejemplos anteriores.

Una versión de prueba de este ejemplo la pueden jugar aquí.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.

Tutorial HTML: Intermedio

​ Ya llevamos varios aspectos importantes sobre programación web explicados hasta ahora, hemos recorrido ya la teoría de HTML, CSS y Javascript en distintos niveles. Realmente de HTML conocemos solamente la teoría básica, por eso en este tutorial quiero hablarles un poco más sobre este.

1 - XHTML

Hasta ahora hemos escrito bastante código de HTML pero no he explicado que pasaría si escribiera un HTML incorrecto, es decir uno en el que no cierre las etiquetas usadas, confunda el orden de las etiquetas y cierre en orden inverso. Estos errores suelen pasar muchas veces y no nos damos cuenta porque el explorador automáticamente cierra las etiquetas en un orden lógico, que algunas veces es lo que queremos pero otras no. Con poco código en ocasiones es difícil encontrar el error, por esta razón existe XHTML y es HTML expresado como XML válido. Es más estricto a nivel técnico, pero esto permite que posteriormente sea más fácil al hacer cambios o buscar errores.

Tenemos varias ventajas del XHTML sobre el HTML, como por ejemplo un navegador no necesita implementar heurísticas para detectar qué quería hacer el programador, por lo que el parser puede ser mucho más sencillo. Como se trata de XML se puede utilizar fácilmente editores para el procesamiento de documentos XML genéricos.

Las reglas básicas de XHTML son:

• Todo elemento debe estar dentro de una etiqueta.
• Las etiquetas anidadas deben tener un correcto orden de apertura y cierre.
• Los valores de los atributos deben encerrarse entre comillas.
• Los nombre de las etiquetas se escriben en letra minúscula.

2 - HTML5

HTML ha ido mejorando al pasar de los años, a este se le han agregado nuevas etiquetas y facilidades para nosotros los progamadores. En octubre de 2014 fue finalmente terminado HTML5 y es ahora el estándar en el mundo web. A diferencia de su versión anterior incluye etiquetas como:

• video: Permite incluir un archivo de video nativo en el HTML.
• audio: Permite incluir un archivo de audio nativo en el HTML.
• canvas: Actualmente muy usada para videojuegos.
• source: Podemos agregar un archivo en la página.
• embed: Útil para coloca contenido interactivo o aplicaciones externas, como por ejemplo Flash.
• header y footer: Encabezado y pie de página que son ya muy común en las páginas.
• Existen muchas otras etiquetas en HTML5 y las pueden consultar aquí.

Lo primero que debemos colocar en nuestro archivo de HTML es <!DOCTYPE>, esta instrucción le indica la versión del HTML escrito al explorador web.

3 - Video

Para incorporar un archivo de video solo necesitamos colocar la etiqueta video y mediante los atributos de height especificamos el alto del video, width el ancho y con controls incluimos controles. Finalmente para el video anidamos la etiqueta source para especificar el archivo y tipo (con src se especifica la dirección del archivo).

Seguimos teniendo la posibilidad de agregar todavía los atributos id, name, class, entre otros.

4 - IFRAME

Actualmente las páginas web tienen mucha publicidad, videos de otras páginas web como Youtube y páginas dentro de otras, esto se logra gracias a la etiqueta iframe. El atributo que necesitamos en esta etiqueta para especificar la página fuente es src, height para el alto, width el ancho y frameborder para el borde del elemento. Otros atributos los pueden encontrar en esta página.

Para el próximo tutorial haremos uso de la etiqueta canvas, con la cual podremos hacer VIDEOJUEGOS!

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.

Tutorial CSS:Avanzado

​ Hasta ahora ya hemos visto como se estructura un CSS, usando clases e ids, ordenando las etiquetas del HTML convenientemente, aunque para páginas grandes solemos utilizar muchas veces el mismo color para varios elementos y anidar etiquetas que son difíciles de leer en al tener mucho código, por esta razón existen herramientas como SASS y LESS, lenguajes basados en CSS que facilitan mucho su escritura y entendimiento.

Ahora bien existen 2 formas de usar LESS, podemos compilar el archivo LESS y generar el CSS que necesita el navegador:

• Desde el cliente: Esto seria usando la libreria de less.js desde nuestra página. Para acceder a ella pueden descargarla de la página oficial de LESS o descargarla junto al material del tutorial aquí.
• Desde el servidor: Este método requiere que movamos los archivos manualmente con un programa aparte. Claro que se puede usar un script para automatizar el proceso.

Por motivos de tutorial uso el método del cliente para explicar todo lo más fácil posible, aunque en el mundo real vamos a preferir que todos nuestros programas sean lo más rápido que se pueda y es por eso que preferiremos irnos por el segundo método para poder dejarle al cliente la menor cantidad de tareas posibles.

1 - Hola LESS

Lo primero que vemos es que dentro del archivo html se tiene primero al link del archivo 1-estilo.less y al final del body se llama la librería de LESS ¡el orden es muy importante!

LESS nos incluye dentro de sus funciones la posibilidad declarar variables, esto es realmente un gran aporte, ya que gracias a esto podemos hacer solo un cambio en el valor de la variable y se reflejara en todos los lugares que la usemos naturalmente.

Declarar una variable dentro de un archivo LESS es muy fácil, solo se coloca @ seguido de nombre de la variable y luego de : colocamos el valor, cerrando la expresión con ;. Podemos tener variables de todos los tipos que se usan dentro de un CSS, números, valores hexadecimales, unidades de píxeles, entre otros.

Para este ejemplo se tiene únicamente declarada la variable base y se usa su valor en la propiedad de color de fondo de la clase texto.

2 - Herencia

Esta propiedad de herencia resulta bastante importante, ya que podemos declarar una clase o id y hacer que otros adopten todos los atributos que esta posea. Como ocurre en el ejemplo, se tiene declarada la clase bordes con varias propiedades, donde el border-radius depende del valor de la variable radio, cuyo valor sera de 5 píxeles a menos que se le sea pasado otro argumento. Fíjense que a la hora de declarar el area azul no se le pasa el ningún valor de radio a la clase bordes, queriendo decir que tomará el valor por defecto de 5 píxeles, mientras que en area roja le pasamos el valor de 10 píxeles.

La herencia nos permite incluir comportamientos extras en los hijos y es por eso que las áreas roja y azul tienen colores diferentes, aunque prodríamos mejorar la clase bordes e incluir un parámetro de color de fondo y se lo pasamos sin problema al heredarlo.

3 - Anidamiento

Esta herramienta nos permite declarar el comportamiento de una entidad de la forma intuitiva en la que lo hace una cascada, es decir que podemos agregar la declaración de una entidad dentro de otra y el compilador de LESS generará lo que el CSS entiende de este anidamiento, por tanto la entidad interna tendrá el comportamiento esperado siempre y cuando se declare dentro de la que la envuelve.

Ejemplo de esto lo vemos en el archivo 3-estilo.less donde se declara el id area y este tiene que el color de azul para todo h1 que sea declarado dentro de área. A su vez, se tiene que todo párrafo dentro área tendrá un tamaño de fuente de 20 píxeles, además si incluye un link con la etiqueta a este no tendrá decoración pero si se le asoma el el ratón encima este coloreara de rojo el texto.

4 - Funciones

Otra habilidad que nos permite LESS es la capacidad de tener operaciones matemáticas para asignar un valor a los atributos. Gracias a las funciones podemos mejorar en mucho nuestro código para generalizar más los cálculos que dependan de variables. Tenemos funciones como desaturate que incluye la librería de LESS, pero pueden encontrar muchas más en la página oficial de LESS.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.

Tutorial CSS: Intermedio

​Ya tenemos entendido el funcionamiento de CSS y en realidad conocer más etiquetas y combinación de atributos de estilo seria el próximo paso, pero pienso que es más importante conocer herramientas que sean de verdadera utilidad en el mundo real, es por eso que les presento a continuación Bootstrap CSS.

Este último es un framework de CSS que incluye varias clases de estilo que usamos a menudo para una página web, como por ejemplo la tradicional barra de navegación, muestra de items, la división de la página de una columna a la izquierda y derecha con contenido principal en el centro. No solo eso nos trae Bootstrap, ya que incluye herramientas para el desarrollo de páginas web en múltiples de resoluciones de pantalla.

1 - Hola Bootstrap

Lo primero que vemos es que para usar Bootstrap necesitamos un archivo de css y otro de javascript, estas librerías no las coloco en el código de arriba, pero pueden acceder a ellas en la página oficial de Bootstrap CSS o lo pueden descargar con todo el código bajo este link. Lo siguiente que muestro es que uso la clase container, esta ya la obtengo gracias a Bootstrap y permite desplegar mi contenido centrado y con un ancho predeterminado de 1140 píxeles para resoluciones grandes. Por defecto también se cambia la fuente del texto con Arial.

Además vemos la clase lead que esta en el párrafo, esta únicamente nos esta cambiando el tamaño de la fuente a uno que dependa de la resolución de la pantalla, en este momento es que quiero presentar lo mejor que nos incluye Bootstrap y es el manejo de múltiples resoluciones de pantalla. A continuación les muestro 3 imágenes de la página a distintas resoluciones.

Resolución grande

Resolución mediana

Resolución pequeña

Ahora bien el uso de Bootstrap no quiere decir que no pueda seguir agregando estilo a mi página, ya que puedo agregar más de una clase a una etiqueta, agregar un id, puedo incluso agregar comportamientos extras a las clases predeterminadas de Bootstrap.

Otro aspecto importante a notar es que se necesita Jquery para usar Bootstrap y el orden en que se incluyen los archivos importa ya que se puede garantizar los accesos correctos y velocidad de carga. Es una buena práctica colocar en el head los links de los archivos css y al final del body los links a los archivos de javascript.

2 - Columnas y offset


La clase de las columnas es una de las más utiles que encuentro en Bootstrap, ya que con ellas podemos dividir hasta en 12 partes una sección y a su vez subdividir, esto lo hace verdaderamente interesante gracias a que no necesitamos realizar muchos calculos. Otro aspecto interesante es la posibilidad que nos da de colocar tamaños a distintas resoluciones con tan solo nombrar la clase en la etiqueta.

Al incluir la etiqueta con la clase row la página automáticamente tiene la capacidad de disponer los elementos uno debajo del otro.

También se puede omitir una columna haciendo simplemente un offset con columnas con el tamaño que querramos, es decir agregar un relleno.

Resolución grande

Resolución mediana

Resolución pequeña

3 - Jumbotron


Jumbotron un elemento que permite colocar un contenido en una sección gris, con bordes redondeados. Es muy útil para colocar el contenido inicial dado que podemos llamar la atención y despertar el interés del visitante muy fácilmente.

Al igual que los otros elementos se adapta a la resolución automáticamente.

4 - Barra de navegación


Este elemento es algo que vemos presente ahora en buena cantidad de páginas hoy en día, realmente el código no es muy amigable, pero si se estudia bien cada elemento se darán cuenta que es muy bueno y les garantizo que es lo minimo para que funcione con Bootstrap.

Resolución grande y mediana

Resolución pequeña

Han de notar que el aspecto a resolución pequeña es muy diferente y muy elegante.

Página de presentación mejorada

Existen muchas otras clases que nos trae Bootstrap, pero quiero ahora mostrarles que tanto podemos mejorar nuestra página de presentación con lo nuevo que conocemos.


El aspecto de esta página es hecha casi totalmente con solo Bootstrap, por lo que un prototipo de una página para aquellos que no somos diseñadores se facilita en gran medida.

Resolución grande

Resolución mediana

Resolución pequeña

Para ver todas las clases que tiene esta poderosa herramienta les recomiendo visitar la página oficial de Bootstrap CSS y para encontrar varias plantillas de estilo pueden visitar esta página.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.