WEB 5.0 y que es HTML5.


Web 5.0

Aun no hay una fecha exacta de inicio de esta web, pero se  buscará clasificar las emociones de las personas, a base de dispositivos, aplicaciones productos o servicios, entre los más relevantes, que su principal objetivo sea mejorar la experiencia de las empresas o personas en la web.
 Esta sin duda será la que generará mayores enlaces e interacción con los usuarios sin determinar raza, nivel social o género.
Notamos que la web ha evolucionado a un ritmo inesperado, en donde el hombre por satisfacer sus necesidades, implementar estrategias, ampliar el círculo social o simplemente expresar sus emociones para  enriquecer su conocimiento o crear aplicaciones y herramientas que mejoren de una manera rápida y accesible a la comunicación de las personas.
Resultado de imagen para web 5.0
Figura 1.5
Conexión entre espectador y protagonista.
Hasta el momento estamos ante un entorno web emocionalmente neutro. En un futuro próximo las emociones estarán incorporadas a partir de dispositivos y herramientas que reconozcan qué tipo de sensaciones genera un vídeo, o qué reacciones provoca un texto, incluso estados de ánimo representados en nuestros avatares. Dispositivos ligeros, portátiles, de alta resolución, con implantaciones neuronales, memoria y velocidad de aprendizaje, capaces de una interacción total donde tendrá presencia lo que siente el usuario, es la web sensorial y emotiva. Nuevas formas de hacer marketing. Agencias de comunicación online.
Por ejemplo:
Al hacer un vídeo en vivo desde Facebook o alguna otra red social, estamos transmitiendo como nos sentimos en ese momento y estamos compartiendo todo eso con los espectadores, hal hacer esto, se crea una conexión entre espectador y protagonista.


HTML5


HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: una «clásica», HTML (text/html), conocida como HTML5, y una variante XHTML conocida como sintaxis XHTML5 que deberá servirse con sintaxis XML (application/xhtml+xml).1 2 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014.3

Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se recomienda al usuario común actualizar su navegador a la versión más nueva, para poder disfrutar de todo el potencial que provee HTML5.
El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.
EJEMPLOS DE CODIGOS HTML5
Código HTML5 para reproducir audio sin la necesidad de plugins

Para video es algo similar.
<!DOCTYPE HTML>
<html>
  <head>
    <title>fuente de múltiples elementos</title>
  </head>
  <body>
    <audio id="audioTestElem" autobuffer controls >
      <source src="test.m4a">
      <source src="test.ogg" type="audio/ogg; codecs=vorbis">
      <source src="url">
      no audio for you
    </audio>
  </body>
</html
Ejemplo de WebWorker (Hilo de ejecución en paralelo)
Es necesario el uso de javascript.
// Prueba.html
<!DOCTYPE HTML>
<html>
 <head>
  <title>Worker example: One-core computation</title>
 </head>
 <body>
  <p>The highest prime number discovered so far is: <output id="result"></output></p>
  <script>
   var worker = new Worker('worker.js');
   worker.onmessage = function (event) {
     document.getElementById('result').textContent = event.data;
   };
  </script>
 </body>
</html>

// worker.js (fichero con la tarea del nuevo hilo de ejecución infinito)

var n = 1;
search: while (true) {
  n += 1;
  for (var i = 2; i <= Math.sqrt(n); i += 1)
    if (n % i == 0)
     continue search;
  // found a prime!
  postMessage(n);
}

Ejemplo de Canvas 2D utilizando el API de dibujo
<!DOCTYPE HTML>
<html>
  <head>
    <title>HTML5 Canvas example</title>
    <script>
      function drawPicture(){

        // Primero se recupera el objeto canvas a modificar
        var canvas = document.getElementById('example');

        // Luego se le indicar la forma de trabajar 2D o 3D
        var context = canvas.getContext('2d');

        // Se comienza a dibujar en el lienzo utilizando objetos
        // gráficos

        context.fillStyle = "rgb(0,255,0)";
        context.fillRect (25, 25, 100, 100);

        context.fillStyle = "rgba(255,0,0, 0.6)";
        context.beginPath();
        context.arc(125,100,50,0,Math.PI*2,true);
        context.fill();

        context.fillStyle = "rgba(0,0,255,0.6)";
        context.beginPath();
        context.moveTo(125,100);
        context.lineTo(175,50);
        context.lineTo(225,150);
        context.fill();

      }
    </script>
    <style type="text/css">
      canvas { border: 2px solid black; }
    </style>
  </head>
  <body onload="drawPicture();">

    <canvas id="example" width="260" height="200">
    There is supposed to be an example drawing here, but it's not important.
    </canvas>

  </body>
</html>

Ejemplo de un formulario con nuevos tipos de datos

Elimina muchas validaciones en Javascript. (La clave está en el atributo Type).
<!DOCTYPE HTML>
<html>
  <body>
  <form>

    <input name="form_number" id="form_number" type="number" min="1" max="10" >
    <input name="form_date" id="form_date" type="date">
    <input name="form_month" id="form_month" type="month">
    <input name="form_week" id="form_week" type="week">
    <input name="form_time" id="form_time" type="time">
    <input name="form_url" id="form_url" type="url" list="url_list">
    <datalist id="url_list">
        <option value="http://www.google.com" label="Google">
        <option value="http://net.tutsplus.com" label="NetTuts+">
    </datalist>
    <input name="form_email" id="form_email" type="email" list="email_list" multiple>
    <datalist id="email_list">
       <option value="jane.doe@test.com" label="Jane Doe">
       <option value="john.doe@test.com" label="John Doe">
    </datalist>
    <input name="form_telephone" id="form_telephone" type="tel">
    <input name="form_color" id="form_color" type="color">
    <label>
        Attachments:
        <input type="file" multiple name="att">
    </label>
    <input name="x" type="range" min="100" max="700" step="9.09090909" value="509.090909">

  </form>
  </body>
</html>

Ejemplo de geoposicionamiento
<!DOCTYPE HTML>
<html>
<head>
<title> Geo  Localizations </title>
</head>
<body>
<script language="javascript">
function obtener_localizacion() {
  navigator.geolocation.getCurrentPosition(coordenadas);
}
function coordenadas(position) {
  var latitud = position.coords.latitude;
  var longitud = position.coords.longitude;
  alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
</script>
<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
</body>
</html>

No hay comentarios:

Publicar un comentario

Suscribirse a: Entradas (Atom)