Featured

HTML o HTML5: ¿cuál es la diferencia?

By Ana Ramirez - Ilana Milkes | February 06, 2018
  • #World Tech Makers
  • #Desarrolladores Web
  • #HTML
  • #HTML5
  • #Diferencias
  • #Cursos de programación
  • #Coding Bootcamps


Muchos desarrolladores nos equivocamos diciendo que HTML5 es igual que HTML, si bien es cierto que HTML5 es una de las nuevas versión de HTML, que nos trajo nuevas etiquetas interesantes tales como la nueva forma y sencilla maquetar un sitio o aplicaciones web, olvidando la forma tediosa de maquetar en tablas o solo usando etiquetas div. Con las nuevas etiquetas tenemos una estructura más entendible tanto para el desarrollador y para los motores de búsquedas, porque etiquetas como <header>, <footer>, le decimos al navegador que sección es nuestra cabecera y pie de página; si tenemos un blog, la etiqueta <article>, es esencial ya que nos permite decir al navegador. Oye navegador cada artículo que pongo en mi blog, está dentro de la etiqueta articule, así podemos mejorar en el posicionamiento.



(Fuente: www.redusers.com)

Pero HTML5, aparte de ser el nuevo estándar de la web, también que considera como un conjunto de tecnologías que vino para quedarse porque actualmente los desarrolladores usando estas tecnologías para realizar proyectos webs de gran alcance, y escalables. A continuación explicaré cada una de estas tecnologías para que se entienda porque HTML5 se hizo famoso cuando se redescubrió.


SEMANTICS:

Es la nueva semántica del HTML, y la razón que la mayoría que HTML5 es igual que HTML, porque el simple hecho que HTML es un lenguaje de etiquetas.

Con la nueva semántica, tenemos nuevas etiquetas tales como <nav>,<header>,<section>,<artcicle>,<footer>,<figure>,<figcaption>, <data>, etc.

Que nos permite mejorar en el posicionamiento dentro de los motores de búsqueda que hay actualmente.

OFFLINE & STORAGE

Podemos realizar aplicaciones web, sin necesidad de tener conexión, ya que tenemos gracias a indexedDB, el guardar datos en un base de datos local dentro del browser, ya no es una novedades, que trabaja como eventos con y sin conexión, también se puede usar session storage y local storage.

DEVICE ACCESS

Gracias a esta tecnología podemos crear aplicaciones que puedan acceder al hardware de un dispositivo, tales como encontrar la lugar en donde nos encontramos por medio de la geolocalización, manipular los eventos touchen el caso que nuestra aplicación requiere detectar que hacemos si colocamos los 4 dedos en el pantalla y queramos mover de un lado a otro, también crear una aplicación que me permita acceder a la cámara para la realización de una video llamada.

CONNECTIVITY

Si antes la palabra del streaming no era muy conocida, hoy día podemos ver que cualquier medio de comunicaciones tiene la facilidad de obtener los tweets de twitter para un evento que se anda transmitiendo en vivo, por medio de web socket.

Con web socket, podemos crear un chat en vivo usando como servidor web nodejs, hay aplicaciones como evernote, trello, slack entre otras que usan nodejs, también empresas como: google, ebay, microsoft, linkedin, geelist, yahoo, que usan nodejs en sus productos.

MULTIMEDIA

Se dice que gracias a esta tecnología, flash murió en el mundo de la web, y ahora que google dijo que ya no soportara flash en su browser.

A ver qué interesante hace esta tecnología, ahora con las etiquetas <audio>, <video> se puede acceder, controlar y manipular los contenidos de los audios y videos.

A parte los browser de los dispositivos móviles no funciona flash, y la mayoría de los videojuegos basados en flash están migrando a usar las tecnologías de HTML5.

GRAPHICS & 3D

Otro más motivo para que ya no se use flash, porque gracias a esta tecnología, podemos crear animaciones sin necesidad de un plugin, dibujar en un lienzo con la etiquetas <canvas>, <svg> pero SVG no solo es una etiqueta sino que es un formato de imagen vectorial basado en XML, y las personas que trabajan como diseñadores gráficos se darán que una extensión .svg para las imágenes.

A la vez también podemos crear elementos en 3D con OpenGL.

PERFORMANCE

Si hace unos años tenias sitios o aplicaciones que pesaba como 40MB y al momento que se descargaba en el browser, pero eso se acabó porque ahora es fundamental el rendimiento en todo proyecto web, para dar una mejor experiencia al usuario se sienta satisfecho con el producto que andas ofreciendo.

Gracias a XMLHttpRequest, Web Workers,History API,drag and drop (Arrastrar y soltar), Fullscreen API, API Pointer Lock, requestAnimationFrame, puedes lograr mejor el rendimiento de tu proyecto web.

CSS3

Sin duda gracias a la nueva versión CSS, ahora podemos para las personas desarrollados sitios web a nivel de frontend nos ha facilitado la maquetación porque si para dar border rodeados, dar sombra, tenias que usa adobe photoshop. para realizar dicha tarea y luego insertar la imagen en el HTML, ahora con unas simple líneas lo puedes hacer, usando las propiedades border-radius,box-shadow; también puedes agregar cualquier tipografía con @font-face, dar animación con animate y los @keyframes, olvidarte de usar float, usando flexbox y otras nuevas propiedades que trajo CSS3.

Default author

Ana Ramirez - Ilana Milkes

VP