HTML – Oscar Blancarte – Software Architecture

WebSocket con Java

oblancarte — Thu, 23 Feb 2017 10:00:41 +0000

En este artículo aprenderemos a implementar WebSocket con Java, ya que en el pasado ya había dado una completa Introducción a los WebSocket y explicamos que estos fueron introducidos como una mejora en HTML5, pero también dijimos que los WebSocket son ejecutados por el navegador, y estos requieren de dos partes, un WebSocket cliente (Navegador) y un WebSocket Server (Backend). Pues bien, ya habíamos platicado como es que los WebSocket funcionan del lado del navegador, es por eso que ahora hablaremos de la otra cara, los WebSocket Server.

Como el título de este articulo lo dice, hablaremos de cómo implementar los WebSocket utilizado Java como BackEnd, pero cabe mencionar que todos los lenguajes de programación deberían de tener sus propias API’s para soportar conexiones del lado del servidor. Los WebSocket fueron agregados a apartar de la versión Java EE 7 bajo la especificación JSR 356, es por ello que todos los Application Server certificados para Java EE 7 deberán de tener una implementación estándar de dicha especificación. Basta de charla y pasemos a cómo implementar un WebSocket con Java.

Implementando un WebSocket con Java

Para explicar cómo funcionan los WebSocket vamos a implementar un ejemplo muy simple, crearemos una barra de progreso la cual se cargará del valor 0 al 100 simulando que un proceso se está ejecutando en el BackEnd. En el formulario tendremos un botón que iniciara el proceso, cuando el usuario presione el botón, enviaremos un mensaje al BackEnd por medio del WebSocket, en ese momento, el BackEnd iniciara con un proceso de notificaciones el cual enviará por medio del WebSocket un mensaje con las actualizaciones de la barra de progreso. Este ejemplo está desarrollado con Java 8 y Wildfly 9.0.

Este ejemplo está compuesto de 4 archivos:

html: página principal del proyecto, sobre la que mostraremos la barra de progreso.
js: Archivo de JavaScript en donde está programado el WebSocket y el procesamiento de los mensajes de envío y recepción.
css: archivo de clases de estilo (opcional).
java: Clase donde implementamos el WebSocket Server con Java, esta se ejecuta del lado del servidor.

Todo el código del proyecto lo puedes descargar de GitHub: https://github.com/oscarjb1/ProgressWebSocket.git

Index.html

Primero que nada, veremos el documento index.html para entender como esta armada la pantalla:



    
        WebSocket Progress
        
        
        
        


    
        WebSocket Progress

Lo primero que hacemos en el Header es importar al archivo styles.css del cual no hay mucho que decir, salvo que es utilizado para darle una apariencia más agradable a la página, y el archivo websocket.js del cual hablaremos más adelante.

El siguiente punto importante es el formulario, en el definimos un botón que al presionarlo ejecutara la función formSubmit() que está definido en el archivo websocket.js, que iniciara con el proceso de carga del progress bar.

También tenemos un progress, el cual será actualizado a medida que el WebSocket reciba las notificaciones del BackEnd, para lo cual utilizaremos el ID (progress) para identificarlo más adelante. Finalmente, debajo del progress tenemos un label el cual será actualizado con el progreso del progress bar.

Tanto el progress como el label son actualizados por Javascript a medida que el servidor manda los datos por medio del WebSocket.

Websocket.js

Por su nombre, podríamos pensar que se trata de una librería o algún script ya desarrollado, pero la realidad es que es un Script totalmente custom y desarrollado a la medida para esta solución.

var socket = new WebSocket("ws://localhost:8080/ProgressWebSocket-1.0-SNAPSHOT/progress");
socket.onmessage = onMessage;

function onMessage(event) {
    var btnSubmit = document.getElementById("btnSubmit");
    btnSubmit.disabled = true;
    
    var progress = document.getElementById("progress");
    var data = JSON.parse(event.data);
    progress.value = data.value;
    
    var lblProgress = document.getElementById("lblProgress");
    if(data.value < 100){
        lblProgress.innerHTML = 'Progress: ' + data.value + '%';
    }else{
        btnSubmit.disabled = false;
        lblProgress.innerHTML = "Finish";
    }
    
}

function formSubmit() {
    socket.send("{\"start\":\"true\"}");
}

La primera línea es la más importante, pues en esta se establece la conexión con el servidor, la clase WebSocket es una clase estándar que nos permitirá comunicarnos con el Servidor de una forma simple, esta clase tiene como parámetro la URL sobre la cual escucha el BackEnd, más adelante veremos cómo está formada esta URL, por lo pronto asumamos que existe un WebSocket Server que está escuchando.

En la línea 2 definimos la función que procesara los mensajes entrantes, es decir, cuando el BackEnd envíe un mensaje al navegador, este lo atenderá por medio del método definido, en este caso, establecemos el método onMessage para procesar los mensajes entrantes.

En la línea 4 definimos el método onMessage el cual implementa toda la lógica de procesamiento de los mensajes entrantes, el parámetro event corresponde al evento recibido y mediante event.data es posible recuperar el mensaje que envió el Servidor. Veamos qué es lo que hace. Primero que nada, en las líneas 5-6 obtenemos la referencia el botón y lo deshabilitamos para impedir que se presione mientras esta en procesamiento. En la línea 8 convertimos el mensaje enviado por el Server en un Json para poderlo procesar. En las líneas 10-11 obtenemos una referencia al progress y actualizamos el valor de la barra de progreso, para lo cual establecemos la propiedad value por el valor enviado por el Servidor. En las líneas 13-19 establecemos el valor del label, indicando el progreso recibido por el servidor, en caso de finalizar (100%), la etiqueta cambia a Finish y el botón se habilitado nuevamente.

Finalmente, en las últimas líneas, tenemos el método formSubmit, el cual es ejecutado por el botón cuando es presionado, este método manda un mensaje dummy al servidor mediante el método send del WebSocket.

ServerDashboardWebSocket.java

Esta es la parte principal para implementar un WebSocket con Java, ya que desde aquí es de donde se aceptan las conexiones del navegador y se procesan los mensajes de envío y recepción.

package com.osb.progresswebsocket.socket;

import java.util.HashSet;
import java.util.Set;
import javax.enterprise.context.ApplicationScoped;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

/**
 * @author Oscar Blancarte 
 */
@ApplicationScoped
@ServerEndpoint("/progress")
public class ServerDashboardWebSocket {

    private Set sessions = new HashSet<>();

    @OnOpen
    public void open(Session session) {
        System.out.println("Session opened ==>");
        sessions.add(session);
    }

    @OnMessage
    public void handleMessage(String message, Session session) {
        System.out.println("new message ==> " + message);
        try {
            for (int c = 0; c < 100; c++) {
                for (Session s : sessions) {
                    s.getBasicRemote().sendText("{\"value\" : \"" + (c + 1) + "\"}");
                }
                Thread.sleep(100);
            }
        } catch (Exception e) {
            System.out.println(e.getMessage());
            e.printStackTrace();
        }
    }

    @OnClose
    public void close(Session session) {
        System.out.println("Session closed ==>");
        sessions.remove(session);
    }

    @OnError
    public void onError(Throwable e) {
        System.out.println(e.getMessage());
        e.printStackTrace();
    }
}

Primero que nada, observemos que esta es una clase común y corriente, no extiende ni implementa ninguna clase, sin embargo, esta anotada con @ApplicationScope y @ServerEndpoint. Si ya has trabajado con JavaEE es muy probable que conozcas la primera, la cual no pertenece al API de WebSocket, pero es utilizada para crear un Bean disponible durante toda la vida de la aplicación. La segunda, @ServerEndpoint es en la que debemos de poner atención, con tan solo marcar una clase con ella, le estamos diciendo al Application Server que esta se trata de un WebSocket Server el cual estará escuchando en la URL http://://progress, la última parte de la url (/progress) es la que definimos en la anotación @ServerEndpoint por lo que tenemos que tener cuidado de que coincida con la URL que definimos en el archivo websocket.js.

También podemos ver que tenemos una Set de Session. Las Session son objetos que representan las conexiones de los navegadores, por lo que tendremos un Set para no perder la referencia a todas las conexiones.

A continuación, veremos una serie de métodos anotados, estas anotaciones le dicen a Application Server que método debe de ejecutar ante cualquier evento. Veamos los diferentes métodos.

Método open, está marcado con la anotación @OnOpen y se ejecutara cada vez que una nueva conexión se establezca con el servidor, el parámetro Session representa la conexión y la almacenamos en el Set de sesiones.

Método close, esta anotado con @OnClose y se ejecutara cada vez que una sesión se desconecte. Recibe el objeto Session que se desconectó para poder identificarla.

Método onError, esta anotado con @OnError, y se ejecutara ante cualquier error, el error es enviado como parámetro.

Método handleMessage, anotado con @OnMessage, será ejecutado cada vez que llegue un nuevo mensaje de alguno de los navegadores. Este recibe como parámetro el mensaje enviado y el objeto Session que mando el mensaje. Este es el método más importante en nuestro ejemplo, porque una vez recibido un mensaje, iniciara una serie de envíos de mensajes al navegador. Observemos que haremos un ciclo del 1 al 100 y en cada interación enviaremos al Navegador un mensaje con el progreso, al finalizar cada interación, dormiremos el hilo 100 milisegundos para apreciar mejor como se llena la barra. Utilizamos el método getBasicRemote() para que nos regrese una implementación de envío asíncrono y seguido ejecutamos el método sendText, el cual se utiliza para mandar un mensaje de texto al navegador.

Te invito a que veas mi curso Mastering API REST con Spring Boot

Resumen:

Repasemos como funciona todo, cuando entramos a la página, esta carga el archivo websocket.js y establece conexión inmediata con el Servidor, en este momento el método open de la clase ServerDashboardWebSocket.java es ejecutado para recibir la nueva sesión. Seguido, el usuario presiona el botón start y envía mediante el función websocket.send un mensaje al Servidor, el Servidor recibe el mensaje mediante el método handleMessage de la clase ServerDashboardWebSocket.java, el cual envía una serie de mensaje como respuesta al navegador, por su parte, el navegador procesa los mensajes entrantes mediante la función onMessage de JavaScript, en esta función se actualiza la barra de progreso.

The post WebSocket con Java appeared first on Oscar Blancarte - Software Architecture.

Introducción a los WebSocket

oblancarte — Mon, 20 Feb 2017 09:00:08 +0000

Los WebSocket fueron introducidos recientemente con la llegada de HTML5 y es sin duda una de las mejoras más esperadas. Los WebSockets nos permite trabajar de forma bidireccional entre el navegador y el servidor, permitiendo enviar y recibir mensajes de forma simultánea (Full Duplex) y manteniendo siempre una conexión activa con el servidor mediante Sockets TCP.

A pesar de que la WebSocket fue agregado como una nueva característica de HTML5, la verdad es que es inútil sin una implementación de WebSocket del lado del servidor y es aquí donde entra los lenguajes de programación.

Cómo funcionan los WebSockets

Como ya mencionamos anteriormente, los WebSocket trabajan mediante conexiones TCP con el servidor, por lo que permite mantener una conexión activa y bidireccional entre el Servidor y el Navegador. Para que una conexión WebSocket se dé, debemos de tener dos partes, un WebSocket Server y un WebSocket Cliente, El Server es aquel que acepta las conexiones y que representa el BackEnd y el cliente en este caso sería el navegador. En este contexto, el cliente es el que establece inicialmente la conexión con el servidor. Una vez establecida la conexión, tanto el servidor como el cliente se podrá enviar mensajes simultáneamente. Veamos la siguiente imagen:

En la imagen podemos apreciar que el Navegador (WebSocket Client) establece una conexión con el Server (WebSocket Server), el servidor acepta la conexión y a continuación inicia un intercambio de mensajes entre el Servidor y el Navegador. Cabe mencionar que los WebSocket mantiene su conexión activa durante todo el tiempo que tengamos abierta la pestaña del navegador, pero tanto el cliente como el servidor pueden cerrar la conexión en cualquier momento.

Usos de los WebSockets

Los WebSocket son necesarios cuando debe de existir una comunicación constante entre el Servidor y el Cliente. Anteriormente a los WebSocket, el navegador tenía que consultar constantemente al servidor por nueva información, lo que lo hacía algo tedioso y representaba un problema de performance grave, ya que cuantos más usuarios teníamos conectados a nuestra página, más consultas se realizaban constantemente y en la mayoría de ellas no había datos nuevos que mostrar.

En la imagen podemos apreciar como el navegador realiza varias consultas al navegador para obtener las actualizaciones del servidor, sin embargo, en la mayoría de las consultas no se obtienen nuevas actualizaciones (en verde), si no que hasta pasadas varias actualizaciones se obtiene nuevos datos del servidor (amarillo). Por lo que podemos ver que todas las fechas verdes son consultas innecesarias que van a degradar el performance del servidor y probablemente también el de la base de datos. Lo peor de esto es que, a mayor número de usuarios conectados a la página mayor se acentúa el problema como podemos ver en la siguiente imagen.

En escenarios donde tenemos que obtener datos del servidor de forma constante siempre será mejor utilizar un WebSocket, para que de esta manera sea el mismo Servidor quien nos notifique de inmediato en cuando existan nuevos datos. De esta forma el servidor evita tener que procesar una serie de peticiones innecesarias. Veamos cómo quedaría el escenario anterior con WebSockets:

En esta nueva imagen ya podemos apreciar mucho mejor como es que los WebSocket mantiene la comunicación y de esta forma saber cuándo debemos utilizar los WebSockets. Lo primero que vemos en la imagen es que un navegador le envía información al Servidor, luego, el Servidor notifica los nuevos cambios a otros dos clientes, finalmente existe otros dos navegadores que están conectados, pero no son notificados por que la nueva información no es de su interés.

WebSocket y JavaScript

Aunque los WebSocket son una de las mejorar agregadas en HTML5, la realidad es que absolutamente todo lo referente a WebSocket del lado del cliente, se tiene que programar con JavaScript, y es desde aquí donde tendremos que establecer la conexión y gestionar el envío y recepción de mensajes. A continuación, te dejo un guía rápido de cómo utilizar WebSocket con JavaScript:

Estableciendo conexión con el servidor:

var socket = new WebSocket("SERVER_URL");

Esta línea nos permite establecer la conexión inicial con el servidor, como parámetro se debe de establecer la URL sobre la cual escucha el Servidor.

Enviando datos al servidor:

socket.send(“This is mi first message with WebSocket”);

La línea anterior se utiliza para enviar un mensaje al servidor, se puede enviar cualquier tipo de información, lo más normal es el envío de datos en formato Json.

Recibiendo datos del servidor:

socket.onmessage = function (event){
   alert(event.data)
}

Para recibir mensajes del servidor es necesario definir la función onmessage, la cual será ejecutada cuando se reciba nueva información del Servidor. En el ejemplo imprimo el contenido de event.data, el cual representa el mensaje recibido del Servidor.

Cerrando la conexión:

socket.closed();

Para cerrar la conexión con el Servidor solo es necesario ejecutar la función closed.

Eventos

socket.onerror = $function

Función ejecutada tras ocurrir un error.

socket.onclosed = $function

Función ejecutada cuando se cierra la conexión con el servidor.

socket.onopen = $function

Función ejecutada cuando se abre la conexión con el servidor.

Web Socket con Java

Te recomiendo que le des una revisada a este otro artículo en donde hablo de cómo implementar WebSocket con Java

Conclusiones

Como podemos apreciar, los WebSocket cambian totalmente el paradigma de la forma en que trabajábamos anteriormente con el servidor y un que pueda parecer un poco complejo, la realidad es que es mucho más fácil de utilizar de lo que parece, además que existe una serie de librerías para cada lenguaje que nos ayudan con el trabajo.

The post Introducción a los WebSocket appeared first on Oscar Blancarte - Software Architecture.

Novedades de la etiqueta Table en HTML5

oblancarte — Tue, 13 Dec 2016 09:00:03 +0000

La etiqueta Table es sin duda la mejor opción para representar elementos en formato tabular o en tabla, debido a que permite crear rejillas perfectas en las cuales color los datos como si se tratara de una hoja de Excel.

La etiqueta table ha venido cada vez más en desuso con la llegada de HTML5 y CSS3, ya que anteriormente, esta etiqueta se utilizaba para maquetar toda la página y todas las secciones se representaban mediante una tabla. Hoy por hoy, las tablas se han limitado más a la representación de datos y para esto siguen siendo la mejor opción.

Con la llegada de HTML5 se agregan nuevas secciones a las tablas que permite personalizarlas de una mejor forma. Ahora es posible agregar una sección para los encabezados, el cuerpo de la tabla y el pie de la tabla, además es posible vincular la tabla con una descripción de forma semántica y agrupar columnas para aplicarles estilos personalizados.

Veamos un ejemplo de cómo quedaría una tabla en HTML5:

Puede ser que la tabla de la imagen no te parezca gran cosa y puede que sea vea como cualquier otra, sin embargo, existen elementos nuevos que hacen mucho más fácil hacer una tabla y darle una mejor apariencia.

Veamos el código para crear la tabla anterior:



    
        HTML5 - Table
        
        
        
    
    
        
            
                HTML5 - Table
                
                    
                    
                
                
                    
                        Line
                        Product
                        Quantity
                        Price
                        Subtotal
                    
                
                
                    
                        
                        TOTAL
                        $ 10,000
                    
                
                
                    
                        1
                        Product A
                        1
                        100.00
                        100.00
                    
                    
                        2
                        Product B
                        2
                        100.00
                        200.00
                    
                    
                        3
                        Product C
                        3
                        100.00
                        300.00
                    
                    
                        4
                        Product D
                        4
                        100.00
                        400.00

HTML5 - Table
Line	Product	Quantity	Price	Subtotal
	TOTAL	$ 10,000
1	Product A	1	100.00	100.00
2	Product B	2	100.00	200.00
3	Product C	3	100.00	300.00
4	Product D	4	100.00	400.00

Para darle un mejor estilo a la tabla, estamos utilizando la clase de estilo t-productos , la cual está en un archivo externo llamado styles.css que dejare más abajo.

Volviendo a la tabla, lo primero que vemos es que es posible agregar una descripción a la tabla, mediante la etiqueta , esta etiqueta lo que hace, es vincular semánticamente la tabla con su descripción, de esta manera, los buscadores pueden saber que ese texto es parte de la tabla y lograr con ello un mejor CEO.

La siguiente mejora, es que nos permite definir estilos para toda una columna, por ejemplo, podemos apreciar que estamos definiendo una border-left a la última columna. Notemos que hemos agregado un para representar a las primeras cuatro columnas, seguido agregamos otro , esta representaría la columna 5.

La siguiente mejora es que nos permite separar la tabla en 3 secciones, el Header (thead), el cuerpo (tbody) y el pie (tfoot). Dentro de cada una de estas secciones es posible agregar los respectivos y con la diferencia que, al separar el contenido en 3 secciones, es posible asignarles clases de estilo diferentes.

En este ejemplo hemos creado una tabla de productos, donde la tabla tiene como cabecero el nombre de los campos, los productos como tal y finalmente en el pie de la tabla, el total.

Como verás, HTML 5 ha agregado mejoras importantes a la utilización de las tablas, que, si bien no son gran cosa, sí que nos ayuda bastante al momento de crear los estilos para la tabla. Ahora veamos cómo quedaron los estilos:

*{
    position: relative;
}

body{
    background: #2B2B2B;
    margin-top: 30px;
}

.container{
    margin: 0 auto;
    width: 90%;
}

.container caption{
    color: #F5F5F5;
    
}

.t-products{
    width: 100%;
    border: 1px solid #295C80;
    border-collapse:collapse;
    background-color: #F5F5F5;
}


.t-products thead td{
    border: none;
    text-align: center;
    font-weight: bold;
    padding: 10px 0;
    background-color: #2980B9;
    color: white;
}

.t-products tbody tr:nth-child(odd){
    background-color: #E9E9E9;
    height: 25px;
}

.t-products td[data-type="number"],.t-products td[data-type="total"]{
    text-align: right;
}

.t-products td[data-type="total"]{
    color: #EA6153;
    font-weight: bold;
}

.t-products tbody tr:hover{
    background-color: skyblue;
}

La clase principal, con la que creamos los estilos en cascada para la tabla es .t-products , partiendo de esta clase, podemos definir estilos exclusivos para las columnas del head, como es el caso de la clase .t-products thead td . Así mismo, aprovechamos que los datos están separados del header y del footer para crear un estilo cebra, mediante la siguiente clase .t-products tbody tr:nth-child(odd) . También es posible hacer que se marque de otro color, la fila sobre la que esta cursos con la siguiente clase .t-products tbody tr:hover .

Como vez, separar las secciones de una tabla trae bastantes ventajas al momento de definir estilos, así, que ya sabes, la próxima vez que crees una tabla, no olvides implementar estas mejoras.

The post Novedades de la etiqueta Table en HTML5 appeared first on Oscar Blancarte - Software Architecture.

La etiqueta figure de HTML5

oblancarte — Mon, 28 Nov 2016 15:00:33 +0000

La etiqueta

permite agregar contenido variado asociadas a una descripción o título, el cual es asociado semánticamente a este, de tal forma que podemos agregar una imagen, ilustración, diagrama, o incluso código. Como regla general, el contenido que agreguemos debe de estar relacionado al texto principal de la página.

Un claro ejemplo donde se puede emplear

es para agregar imágenes a un artículo, donde las imágenes tienen por lo general una descripción justo por debajo. Un claro ejemplo sería cualquier artículo de Wikipedia, ya que este inserta a lo largo de todas sus secciones imágenes que tiene que ver con el texto en cuestión.

Actualmente

es más utilizado para representar imágenes, porque es lo más común en una página además del texto, pero es importante resaltar que se puede utilizar para representar cualquier contenido. La clave de

es que nos permite asociar cualquier cosa con una descripción, de tal forma que son asociados semánticamente.

La etiqueta

se utiliza en conjunto con la

para representar la descripción del contenido. La etiqueta

puede tener cualquier contenido seguido de

o al revés,

seguido de cualquier contenido.

Si quieres aprender más sobre las mejoras y la web semántica, puedes ver estre otro articulo donde lo explico con más detalle.

Etiqueta Figure en acción:

Para comprender mejor como es que figure se puede utilizar, analizaremos un pequeño ejemplo de una página con una imagen, esta imagen tiene una descripción asociada. La idea es comparar una página que utiliza la etiqueta y otra de cómo quedaría con la etiqueta

Ejemplo con :

En este pequeño ejemplo analizaremos como le colocábamos una descripción a una imagen:

A hora veamos el documento HTML que forma la página anterior:



    
        
    
    
    
        
            
                Ejemplo sin implementar Figure
                Este ejemplo utiliza img para mostrar imagenes.
            
            
            
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac placerat sapien, eu molestie mi. Cras feugiat feugiat hendrerit. Mauris interdum condimentum augue at cursus. Fusce eget gravida odio. Morbi diam leo, aliquam et tortor sed, tempus sollicitudin elit. Sed luctus sagittis risus, at luctus nunc rutrum tincidunt. Integer faucibus est sit amet auctor imperdiet. Morbi posuere quam in nisl pellentesque aliquam. Etiam a nulla non orci ultricies suscipit eu vitae purus.
            
            
            Fig.1 - París de noche (Enero de 2016)
            
            Quisque eget venenatis ex. Aenean at risus bibendum, placerat leo ac, ullamcorper quam. Curabitur tempus tellus diam, ut suscipit orci faucibus vel. Etiam id leo diam. Vivamus eget ex at sapien suscipit porttitor eu in dui. Suspendisse sem ipsum, euismod sodales auctor id, vulputate nec ex. Aenean et maximus purus. Duis eu est a enim cursus accumsan nec in tellus. In gravida eros odio, ut consectetur neque mollis vitae. Cras at mattis diam. Vestibulum eleifend sed tellus vel feugiat.

Observemos que simplemente agregamos un párrafo justo debajo de la imagen con la clase img-footer para representar la descripción de la imagen, esto tiene un problema con los buscadores, porque no tiene forma de identificar que ese párrafo es la descripción de la imagen, y asume que simplemente es parte del contenido.

Ejemplo con
:

El siguiente ejemplo ilustra cómo quedaría la misma página, pero utilizando la etiqueta

A hora veamos el documento HTML que forma la página anterior:



    
        
    
    
    
        
            
                Ejemplo utilizando Figure
                Este ejemplo utiliza figure para mostrar la imagen
            
            
            
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac placerat sapien, eu molestie mi. Cras feugiat feugiat hendrerit. Mauris interdum condimentum augue at cursus. Fusce eget gravida odio. Morbi diam leo, aliquam et tortor sed, tempus sollicitudin elit. Sed luctus sagittis risus, at luctus nunc rutrum tincidunt. Integer faucibus est sit amet auctor imperdiet. Morbi posuere quam in nisl pellentesque aliquam. Etiam a nulla non orci ultricies suscipit eu vitae purus.
            
            
                
                Fig.1 - París de noche (Enero de 2016)
            
            
            Quisque eget venenatis ex. Aenean at risus bibendum, placerat leo ac, ullamcorper quam. Curabitur tempus tellus diam, ut suscipit orci faucibus vel. Etiam id leo diam. Vivamus eget ex at sapien suscipit porttitor eu in dui. Suspendisse sem ipsum, euismod sodales auctor id, vulputate nec ex. Aenean et maximus purus. Duis eu est a enim cursus accumsan nec in tellus. In gravida eros odio, ut consectetur neque mollis vitae. Cras at mattis diam. Vestibulum eleifend sed tellus vel feugiat.

Primero que nada, observemos que la página se ve idéntica con la diferencia que cambio el título, sin embargo, a nivel semántico la descripción está asociada a la imagen y los buscadores sabrán perfectamente que el texto en envuelto en la etiqueta

es la descripción de la imagen y no parte del contenido principal de la página. Este tipo de detalles ayudan a ganar SEO y lograr un mejor posicionamiento en los buscadores.

Clases de estilo:

En los dos ejemplos anteriores utilizamos la clase de estilos estilos.css para darle una presentación mas agradable, el archivo es el siguiente:

body{
    background-color: #f9f9f9;
}
h1,h2{
    margin: 10px 0px 0px;
    color: #333;
}
h2{
    font-size: 1.05em;
}
p{
    margin: 10px 0px;
    text-align: center;
    text-align: justify;
    color: #666;
}
figure{
    margin: 0px;
}
.split{
    padding-bottom: 10px;
    border-bottom: 2px solid #dadada;
}
.container{
    max-width: 80%;
    margin: 20px auto;
    padding: 0px 10px 20px;
    border: 1px solid #dadada;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
}
img{
    width: 100%;
    border-radius: 5px;
}
figcaption,.img-footer{
    font-style: italic;
    color: black;
    font-size: 1.1em;
    text-align: center;
    margin: 10px 0px;
}

Conclusiones:

Como vemos, figure es mucho más simple de lo que podríamos creer y nos ayudara mucho en el SEO de la página. Por lo que es recomendable que ahora en adelante que quieres agregar una imagen, diagrama o código, no dudes en utilizar esta nueva etiqueta.

The post La etiqueta figure de HTML5 appeared first on Oscar Blancarte - Software Architecture.

HTML5, antecedentes y novedades

oblancarte — Tue, 22 Nov 2016 09:00:33 +0000

La historia de HTML ha sido larga, ya que desde su nacimiento al principio de los 90, ha evolucionado muchísimo, pasando de ser tan solo un simple sistema para compartir documentos, a ser la base completa de la WEB.

HTML fue desarrollado inicialmente por Tim Berners-Lee en 1980, que trabaja en aquel entonces en la CERN (Organización Europea para la investigación Nuclear). El propuso un sistema de Hipertexto que permitiera compartir documentos de una manera más fácil y eficiente. Pero no fue hasta que se unió con Robert Cailiau para presentar su propuesta como la World Wide Web (W3), en un concurso para definir el sistema de hipertexto que se utilizaría para internet.

Tim Berners-Lee y Robert Cailiau

Cabe mencionar que para el año de 1991 HTML se publicó bajo el nombre de HTML Tags. Fue hasta 1993 cuando la IETF (Internet Enginnering Task Force) propuso a HTML para convertirse en un Estándar. Sin embargo, no fue hasta 1995 cuando HTML ya estaba en la versión 2.0 cuando logro establecer a HTML como el primer Estándar oficial de HTML.

En 1994 Tim Berners-Lee funda la W3C (World Wide Web Consortium) con la finalidad de generar recomendaciones y estándares para la WEB y es cuando decide en 1996 publicar bajo la W3C el estándar HTML. En 1997 se publica la versión 3.2 bajo la W3C.

En 1998 se publica la versión HTML 4.0, la cual incorpora importantes mejoras como: Hojas de estilo (CSS), scripts, mejoras en los formularios, etc. Finalmente, en 2004 se publica la última versión oficial de la W3C, correspondiente a la 4.01 la cual no contenía mejoras importantes.

Cabe mencionar que durante los años 90 se producía la denominada “Guerra de los Navegadores” en donde Internet Explorer y NetScape lidiaban una batalla campal por ser el líder de los navegadores, lo que provoco que cada navegador liberar versiones semanas tras semanas e incluyera funcionalidad NO ESTANDAR, provocando la completa incompatibilidad de entre los navegadores. Esto provocaba que los desarrolladores tuvieran que desarrollar versiones completas para cada navegador. Un que esta guerra trabajo mucho desorden al desarrollo web, es importante mencionar que también ayude al rápido avance tecnológico de la WEB. Un que al final Internet Explorer gano la guerra, cabe mencionar que NetScape nos dejó dos legados, JavaScript y el nacimiento de la fundación Mozilla.

Depuse de la liberación de la versión HTML 4.01 la W3C anuncio que HTML ya no tenía futuro y que en cambio XHTML sería el futuro. XHTML no logro tener tanto apoyo como se esperaba y mientras tanto Apple, Opera y Mozilla se preocupaban por la falta de interés de la W3C por el estándar HTML y es cuando se organizan y crean una nueva asociación llamada WHATWG (Web Hypertext Application Technology Working Group) la cual consideraba que el estándar de HTML seguía siendo el futuro pero que necesitaba importantes mejoras. Fue cuando en 2008 la WHATWG publica el primer borrador de HTML5.

Es importante destacar que aun que HTML fue creador del estándar HTML, fue la WHATWG quien desarrollo y actualmente dirige el estándar de HTML5. Un que la W3C termino aceptando al HTML5 como el estándar.

En la actualidad HTML5 es el estándar de la WEB y propuso tantas mejoras que termino de expulsar a Flash.

Novedades de HTML5:

Estructura Semántica:

Sin duda, una de las principales características de HTML5 es que incorpora una semántica o significado a cada parte del documento HTML. Esta semántica a ayuda a los buscadores a darle un significado a la página, identificando que parte de la página el footer, el header, cual es el menú de navegación, cual es el contenido principal de la página,etc. Con esta semántica, los buscadores son capaces de interpretar mejor la página y de esta forma ayudar a los usuarios a buscar con mayor precisión lo que están buscando.

Hasta antes de HTML5 toda la sección de la página se definían con

la cual era utilizada para absolutamente todas las secciones de la página, de esta forma, teníamos un div que era el header, un div que era el menú y otro div donde poníamos el contenido de la página. Lo que hacía muy complicado diferenciar que sección era que.

Con la llegada de HTML5 se incorporaron varias etiquetas semánticas que más que agregar funcionalidad, agregan significado a la página:

Semántica de HTML5

La siguiente imagen ilustra las nuevas etiquetas semánticas agregadas en HTML5 y también podemos ver claramente el significado de cada sección. Las etiquetas se explican a continuación:

Header: la etiqueta
sirve para delimitar la cabecera de la página o de una sección de la misma, por lo que puede aparecer más de una vez en una misma página, en esta sección se suele poner el título de la página, el logotipo o cualquier cosa que deba de ir en la cabecera.
Nav: la etiqueta
es utilizada para definir la navegación de la página, este es utilizado para el menú de navegación en donde ponemos las secciones de la página. Es importante remarcar que se puede colocar en cualquier parte de la página y no es necesario que este del lado izquierdo, algunos sitios pones una barra de navegación justo debajo del
.
Main: un que no aparece explícito en la imagen anterior, esta etiqueta se utiliza para envolver el contenido de la página, es decir la parte donde está el contenido que el usuario está buscando, en el caso de los blogs, el post como tal sería el main, en el caso de una tienda virtual la sección donde está el producto deberá ser el Main.
Section: representa una sección genérica de la página pero que agrupa contenido relacionado entre sí, por ejemplo, en una landing page, puedes tener una sección para los productos que ofreces, una donde muestras tus clientes, otra para un formulario de contacto. De esta forma cada sección deberá ser agrupada en una
diferente.
Article: Se utiliza para delimitar un contenido independiente que por sí mismo tiene un significado, sin importar el contenedor o la sección en la que se pone. Por ejemplo: en un blog, cuando entras a la página principal, donde puedes ver una introducción a cada post, cada post sería un
. Un anuncio puede ser un
pues es independiente al contenido.
Aside: la etiqueta
se utiliza para envolver el menú lateral o menú alternativo, es muy parecido a
pero se diferencia porque no tiene el menú de navegación, en cambio tiene información auxiliar, anuncios, etc.
Footer: el
es utilizado para agregar un pie de página o pie de una sección, se utiliza por lo general para agregar fechas, ligar de compartir, algún mensaje o incluso las barras de siguiente o anterior. Pero también es utilizada para poner información institucional como copyright, etc.
Div: en HTML5 los
se convierten en contenedores genéricos y solo se deben de utilizar cuando no existe una etiqueta semántica más adecuada.
HGroup: la etiqueta es utilizada para agrupar etiquetas , un ejemplo concreto es para agrupar el título y subtitulo de una página. Cabe mencionar que solo tiene sentido cuando se utiliza más de una etiqueta .

Formularios:

HTML5 ofrece grandes mejoras en los formularios, como campos de nuevos tipos, atributos y validaciones. Mediante HTML5 es posible agregar nuevos tipos de datos en los formularios que se visualizarán de forma diferente según el dispositivo utilizado.

Algunos de los nuevos tipos son:

Emal: permite capturar un Email y se pueda validar para que cumpla con el formato.
Tel: permite definir un teléfono, habilitando solo el teclado numérico en dispositivos como smartphones y tablets. También son utilizados para que sean reconocidos por el navegador y habiliten el marcado automático.
Date: Permite definir una fecha.
Color: despliega la paleta de colores del sistema operativo para seleccionar un color.
Datetime: permite definir facha y hora.
Range: Permite definir un rango de valores numéricos.

Nuevos atributos:

HTML5 agregan nuevos atributos que nos facilitan la vida:

Placeholder: permite definir un texto default que se visualiza cuando el campo este vacío.
Required: Le indica al navegador que el campo es requerido, lo que impide que el formulario sea enviado hasta que este sea capturado.
Multiple: permite que los campos acepten valores múltiples separados por coma (,).
Autofocus: obliga al navegador a que le transfiera el foco al campo marcado.
Pattern: permite definir un patrón de validación personalizado.
Form: permite definir a que formulario pertenece el campo, utilizado cuando el campo es definido fuera de una etiqueta
. Antes de HTML5 todos los campos debían estar forzosamente dentro de .

Nuevas etiquetas:

A continuación, se describen nuevas etiquetas de utilidad variada:

Figure: la etiqueta
se utiliza en conjunto con
y es utilizada para definir imágenes con una descripción, de tal forma que semánticamente se entienda que la descripción es de la imagen.
Picture: la etiqueta nace con la necesidad de agregar imágenes responsibles que se adapten a los distintos dispositivos y resoluciones de pantalla sin la necesidad de usar CSS o JavaScript. Picture se apoya de Media Query para determinar qué imagen debe mostrar.
Progress: permite mostrar una una barra de progreso que va desde el 0% al 100%, es utilizada para representar el avance de una tarea.
Meter: muy parecido a pero este permite mostrar una barra que cambia de color según condiciones definidas, utilizada, por ejemplo, para mostrar lo seguro de una contraseña.

HTML5 API:

El API de HTML5 es probablemente una de las cosas más interesantes, pues permite agregar funcionalidad que antes era imposible. Es importante remarcar que sin bien el API es de HTML5, solo puede ser manipulado con JavaScript. El API se divide en varias secciones que describiremos a continuación:

API Form: Es el API que permite realizar validaciones en formularios. Mediante JavaScript es posible manejar eventos y realizar validaciones complejas.
API Canvas: El canvas es como un lienzo en el cual se pueden hacer grandes cosas, como dibujar, incrustar programar completos, juegos, animaciones, etc.
API Drag and Drop: Agrega soporte completo para trabajar con Drag and Drop.
API Geolocalización: Permite mediante JavaScript interactuar y mostrar el mapa de Google Maps directamente sobre el navegador
API Web Storage: Permite almacenar información del lado del cliente, la información solo es accesible cuando la sesión esta activa y durante la misma pestaña.
API IndexedDB: Permite definir una base de datos del lado del cliente, la cual es utilizada para soportar aplicaciones offline, a diferencia de Web Storage, esta DB es accesible todo el tiempo.
API File: Permite interactuar con el File System del sistema operativo.
API Communication: es básicamente un conjunto de librerías basadas en AJAX que permiten la comunicación entre cliente-servidor.
API Web Workers: Mediante web worker es posible convertir a JavaScript en multi hilos, lo que nos permite ejecutar varias tareas al mismo tiempo, una de las principales limitantes que teníamos con versiones anteriores.
API History: esta API permite interactuar con el historial de navegador. En realidad, no es nada nuevo solo estandariza la forma de trabajar con el Historia, pues anteriormente no existía un estándar.
API Offline: esta API permite determinar que archivos son necesario para trabajar en modo offline, haciendo que el cliente descargue estos archivos y los tenga disponibles de forma local, de esta forma cuando no se tenga conexión, estos archivos serán leídos de forma local y la página podrá ser mostrada.
API Audio y video: Permite interactuar mediante JavaScript con los controles del reproductor de Audio y Video. HTML5 permite incluir video y audio nativo sin la necesidad de un plugin.

Como verás HTML5 agrega una gran cantidad de mejoras y sin duda, faltaron algunas cosas que mencionar, sin embargo, esto es una introducción muy completa a la historia y las novedades que nos ofrece HTML5.

The post HTML5, antecedentes y novedades appeared first on Oscar Blancarte - Software Architecture.