SlideShare ist ein Scribd-Unternehmen logo
1 von 86
Downloaden Sie, um offline zu lesen
HTML 5
He visto el futuro y está en el navegador




                   1
Prólogo
La web tiene un nuevo estándar que rompe la barrera entre HTML y el scripting


      HTML5 es el nuevo estándar universal, abierto y
      gratuito, para la elaboración de páginas web


      -HTML5 = HTML + CSS + Javascript

         -HTML 5 todavía está en fase de working draft. Aunque en 2014
         se espera que sea recomendación de facto!
         -Es regulado por el WHATWG –Apple, Google, Mozilla y
         Opera- y el W3C
         -Gracias a los Polyfills ya no hay excusa para no empezar a
         hacer páginas web en HTML5


                                          2
Prólogo
Un poco de historia
HTML5 marca un punto de inflexión en el desarrollo del lenguaje de marcado


       1991 - HTML
       1994 – HTML 2
       1996 – CSS 1 + Javascript
       1997 – HTML 4
       1998 – CSS 2
       2000 – XHTML 1
       2002 – Diseño web sin tablas
       2005 - AJAX
       2009 – HTML 5 + CSS 3

-LINKS:
Regreso al pasado: http://onsoftware.softonic.com/regreso-al-pasado-internet-en-1997

                                               3
Web Semántica
De la información al Conocimiento



      Trata de Añadir significado a la información para que lo
      entiendan las máquinas -agentes- y filtren la que es
      realmente útil para los usuarios. También implica el
      desarrollo de los propios agentes


      -Nuevas etiquetas estructurales
      -Marcado de datos
      -Nueva generación de Formularios
      -Más valores para el atributo rel



                                    4
Nuevas etiquetas estructurales                           Web Semántica

Adiós a la divitis!



       HTML 5 proporciona un conjunto de etiquetas que
       definen con mayor claridad los bloques principales de
       contenido que componen un documento HTML

       El nuevo Doctype <!DOCTYPE html>

       Nuevas etiquetas:
       <command> <datagrid> <datalist> <details> <dialog>
       <embed> <eventsource> <figcaption> <figure> <footer>
       <header> <hgroup> <keygen> <mark> <menu> <meter> <nav>
       <output> <progress> <rp> <rt> <ruby> <section> <source>
       <summary> <time>



                                  5
Nuevas etiquetas estructurales                                                 Web Semántica


                      Principales etiquetas estructurales




-LINKS:

   -Principales etiquetas estructurales: http://www.ibm.com/developerworks/ssa/web/
   library/wa-html5structuraltags/
                                                                 Soporte global: 75,38%
                                              6
Marcado de datos                                   Web Semántica




   -El marcado de datos es un paso más en la llamada web
   semántica para dar significado a los contenidos
   -Le dice a las máquinas -agentes de usuario- qué se
   describe exactamente en una determinada información


   Formatos de marcado:
   -RDFa
   -Microformatos
   -Microdatos…



                             7
Marcado de datos                                                            Web Semántica




   Para el marcado estructurado de datos se puede utilizar
   microdatos, microformatos y RDFa

   -En vez de hacer elegir a los webmasters entre uno estos
   formatos, sería conveniente centrarse en uno solo
   -Un único formato mejoraría la consistencia de datos entre los
   distintos motores de búsqueda
   -Microdatos comparte la sencillez de los microformatos y la
   capacidad de ampliación de RDFa


   Por ejemplo, los Microdatos de Schema.org ya comienzan a mostrar fragmentos
   enriquecidos -rich snippets- para sus resultados: Los fragmentos enriquecidos
   permiten a los usuarios ver información y datos adicionales de su sitio en los
   resultados de búsqueda... busca Angry Birds en Google y compruébalo!


                                           8
Marcado de datos                                Web Semántica



   ¿Cuál elegir?

   Microdatos por su uso en schema.org y su aceptación
   por Google, Microsoft y Yahoo!




                           9
Marcado de datos                                              Web Semántica




     Elementos que incorporan los microdatos:
     itemscope, itemtype, itemid, itemref, itemprop


     <section itemscope itemtype="http://
     enciclopediadecriaturas.com/criaturas#hobbits">
       <h1 itemprop="name">Hobbits albos</h1>
       <p itemprop="desc">Los hobbits albos son los más
     altos -120 cm- y aventureros de entre los hobbits.</p>
       <img itemprop="img" src="hobbit.jpg" alt=""
     title="Hedral, hobbit albo">
     </section>


-LINKS:
Schema: http://schema.org
Create HTML with schema.org microdata: http://schema-creator.org/

                                    10
Formularios                                                            Web Semántica

Nueva generación de formularios!



      Se añaden pequeñas funcionalidades que antes precisaban Javascript

      -Nuevos elementos:
      meter, progress, output, keygen, datalist
      -Nuevos tipos de input:
      email, url, tel, search, number, range, color, date,
      time, datetime, month, week
      -Nuevos atributos:
      list, autofocus, placeholder, file multiple, pattern,
      autocomplete, max, min, step, required

      Y si le sumamos el poder de XMLHttpRequest 2:

      -El objeto FormData: crear y enviar formularios al vuelo
      -FILE API FileReader: Upload de archivos con barra de progreso


                                         11
Formularios                                                                Web Semántica


      <style>
      [required] {
         border-color: #88a;
         -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
      }
      :invalid {
         border-color: #e88;
         -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);+
      }
      </style>

      <form>
       <label>Nombre: <input name="name" required></label>
       <label>E-mail: <input name="email" type="email" required></label>
       <label>URL: <input name="url" type="url"></label>
       <label>Comentario: <textarea name="comment" required></textarea></label>
       <input type="submit" value="Enviar">
      </form>



-LINKS:
-XMLHTTPRequest 2 y El objeto FormData: http://www.html5rocks.com/en/
tutorials/file/xhr2/
-Div In To HTML5 - A Form of Mandness: http://diveintohtml5.info/forms.html
-Soporte (detalles): http://wufoo.com/html5/
                                                             Soporte global: 53,13%
                                          12
Nuevos valores para el atriburo rel                    Web Semántica



   El nuevo HTML tendrá que ser un poco más
   descriptivo a la hora de definir el tipo de link al que
   estamos enlazando

   De eso se encarga el atributo rel:
   alternate, archives, author,
   bookmark, contact, external, feed,
   first, help, icon, index, last,
   licence, next, nofollow, noreferrer,
   pingback, prefetch, prev, search,
   stylesheet, sidebar, tag, up

   Nótese la importancia de rel de cara al SEO

                               13
APIS de Javascript
Las responsables de la magia


      -Tecnologías offline/storage
      	

 Application Cache
      	

 Web Storage
      	

 IndexedDB

      -Comunicación y conectividad
      	

 WebSockets
      	

 Web Workers
      	

 Notificaciones

      -Acceso al dispositivo
      	

 Drag & Drop nativo
      	

 Desktop Drag-In & Drag-Out
      	

 Filesystem API
      	

 Geolocalización
      	

 Orientación del dispositivo
      	

 Webcam y micro


                                        14
Tecnologías offline                                                                     API Javascript

No siempre la conexión a la red es fiable, pero las aplicaciones sí que tienen que serlo




      Imaginemos que un usuario está rellenando un formulario y pierde el acceso a la red o
      que la descarga de datos de nuestro móvil es limitada…

                                                 15
Tecnologías offline                                                API Javascript




   Las aplicaciones HTML5 pueden comenzar más rápido y trabajar
   incluso si no hay conexión a Internet, gracias a la caché de la
   aplicación, el almacenamiento local, bases de datos indexadas y las
   APIs de archivo


   Cuanta más información se maneje en local mejor rendimiento del
   sistema y más satisfactoria la experiencia del usuario


   Por supuesto, los datos son más vulnerables, y el usuario no puede
   acceder a estos desde varios clientes; por lo tanto, solo debería
   utilizarse para datos que no sean críticos


                                    16
Tecnologías offline                                   API Javascript




   -AppCache: para guardar los archivos en local y
   acceder a ellos en modo offline en forma de URLs

   -IndexedDB para guardar datos estructurados en
   local y poder acceder y consultarlos

   -Web Storage para guardar pequeñas cantidades de
   información en formato de texto en el equipo

   -Los Eventos Offline, para detectar el estado de la
   conexión a la red


                            17
Application Cache                                          Tecnologías offline




   Fichero de configuración que permite guardar archivos en local

   -Para acceder a ellos cuando no hay conexión
   -Para optimizar la velocidad de carga
   -Hay que crear canales de sincronización de datos entre
   nuestras aplicaciones y la nube
   -El estándar HTML5 también incluye tecnologías para guardar los
   datos en el cliente
   -AppCache ofrece ventajas con respecto a la caché de HTTP

   Uso:
   Basta con crear un archivo MANIFEST -lista todos los archivos
   que necesitan ser cargados en la caché- y acceder al objeto
   window.applicationCache


                                  18
Application Cache                                              Tecnologías offline




   AppCache es sólo una parte de las tecnologías offline de HTML 5


   Tenemos que asegurarnos de que los datos cacheados siguen
   siendo relevantes y están actualizados. Como hemos dicho, para
   ello necesitamos crear canales de sincronización de datos
   entre nuestras aplicaciones y la nube

   Podemos hacerlo con WebSockets y XHR, que nos ofrecen
   una forma de sincronización, para finalmente guardarlos en una
   base de datos IndexedDB

   Esta técnica también se puede utilizar para subir al servidor la
   información guardada con Web Storage


                                    19
Application Cache                                                   Tecnologías offline



   Documento cache.appcache:
   CACHE MANIFEST
   # 08-04-2012:v2

   CACHE:
   /favicon.ico
   index.html
   stylesheet.css
   images/logo.png
   scripts/main.js

   # Recursos que se requieren online
   NETWORK:
   login.php


   # FALLBACK, Declara archivos a utilizar por defecto en el caso de no
   encontrar el recurso solicitado

   FALLBACK:
   /main.php /offline.html
   img/large/ images/offline.jpg




                                        20
Application Cache                                                 Tecnologías offline



   El HTML:

   <html manifest="cache.appcache">

   <script>
   window.applicationCache.addEventListener('updateready', function(e) {
     if (window.applicationCache.status ==
   window.applicationCache.UPDATEREADY) {
       window.applicationCache.swapCache();
       if (confirm('A new version of this site is available. Load it?')) {
          window.location.reload();
       }
     }
   }, false);
   </script>


-LINKS:
-juego Web interactivo que funciona sin conexión:
http://ie.microsoft.com/testdrive/HTML5/KidsBook/
-Recetas (Uso de AppCache e IndexedDB):
http://ie.microsoft.com/testdrive/HTML5/Cookbook/
                                                      Soporte global: 59,88%
                                            21
Web Storage                                                            Tecnologías offline




   Almacenamiento de datos del lado del cliente.

   -Muy útil para almacenar pequeñas cantidades de datos (IndexedDB para
   almacenar grandes cantidades de datos complejos y estructurados)
   -Los datos son almacenados usando pares de clave/valor
   -Una forma mejor y más segura de almacenar información que el método
   tradicional de almacenamiento mediante cookies


   sessionStorage y localStorage:

   El almacenamiento por sesión es por ventana, y su tiempo de vida está
   limitado a lo que dure la ventana (o pestaña): sessionStorage

   Los datos alojados en un almacenamiento local son sólo accesibles por
   dominio y persisten cuando se cierra el navegador: localStorage.


                                                           Soporte global: 88,29%
                                         22
Web Storage                                             Tecnologías offline



   sessionStorage

   //Obtenemos el elemento que contiene el contenido del post
   var content = document.getElementById("content");
   //Comprobamos si existe contenido guardado, lo cual indicaría
   un refresco de página accidental
   if (sessionStorage.getItem("autosave")) {
      content.value = sessionStorage.getItem("autosave");
   }
   //Guardamos el contenido del elemento cada minuto
   setInterval(function() {
      sessionStorage.setItem("autosave", content.value);
   }, 1000*60);

   localStorage

   //almacenar el número de veces que un usuario ha visitado una
   página
   localStorage['www.tudominio.com'].setItem("visitas",
   parseInt(localStorage['www.tudominio.com'].getItem("visitas")
   || 0 ) + 1);


                                23
IndexedDB                                                        Tecnologías offline




   API para almacenamiento avanzado de datos en la parte de cliente

   -Mecanismo de almacenamiento de grandes cantidades de datos
   estructurados
   -Provee de un acceso de alto rendimiento a los mismos, usando
   índices.
   -Está construido sobre un modelo de base de datos transaccional
   -Su API es mayormente asíncrona

   Sustituye a Web SQL Database, que ha sido declarada deprecated por la
   W3C.

-LINK:
IndexedDB: http://www.html5rocks.com/en/tutorials/indexeddb/todo/

                                                     Soporte global: 44,98%
                                     24
Comunicación & Conectitividad                                          API Javascript




                                                     -Web Workers
                                                     -WebSockets
                                                     -Notificaciones


   HTML 5 presenta una conectividad más eficiente entre cliente y servidor,
   lo que garantiza una mejor comunicación
                                      25
Binomio WebSockets/Server-Sent Events
El servidor llama a tu puerta




                                26
WebSockets                                 Comunicación y conectividad



   HTML5 ofrece dos nuevos estándares de
   comunicación: Server-Sent Events y WebSockets.

   -WebSockets consiste en abrir un canal full-duplex
   permanente entre el servidor y el cliente
   aprovechando el protocolo TCP
   -Server-Sent Events se utiliza para mandar
   eventos directamente desde nuestro servidor al cliente
   de nuestra aplicación

   Este tipo de comunicación está pensado para
   aplicaciones que necesiten de mucha transferencia de
   datos en tipo instantáneo, como por ejemplo juegos
   online
                             27
WebSockets                                          Comunicación y conectividad




   ¿Pero, qué nos proporciona?

   -Reducción en el consumo de red y de procesamiento
   -Evolución en el desarrollo de aplicaciones RIA con HTML!


   Casos donde sería útil que el servidor pudiera comunicarse con
   el navegador sin que el cliente lo solicite necesariamente:
     -Web chats (como el de Facebook)
     -Trabajo colaborativo (Como el de Google Docs)
     -Sitios de subastas o sistemas para bolsas de valores, donde los
     datos hacen falta en tiempo real



                                   28
WebSockets                                                Comunicación y conectividad




   Web Sockets es más rápido que HTTP

   HTTP fue diseñado para la transferencia de documentos, en realidad no
   está adecuado para las aplicaciones web modernas:

   -Naturaleza medio-dúplex: sólo se puede comunicar en una dirección a la
   vez, bien del cliente al servidor o del servidor al cliente
   -los paquetes HTTP vienen cargados con grandes cantidades de datos de
   cabecera, lo cual consume ancho de banda y requiere más trabajo de
   procesamiento

   WebSockets se adecúa mejor a la nuevas exigencias de la web

   -Podría abrir el paso a una nueva generación de aplicaciones web en tiempo
   real y latencia cero
   -Los ingenieros de Google importaron el QUAKE II para que corriera en el
   navegador usando WebSocket. Esto hubiera sido imposible usando HTTP


                                       29
WebSockets                                          Comunicación y conectividad




     Uso de Web Socket:

     -Tecnologías offline
     -Video juego Quake II GWT en web
     -Acceso webcam y vídeo




-LINKS:
Web Sockets es más rápido que HTTP: http://bit.ly/HQisyn
Aplicaciones web y móvil Realtime: http://pusher.com
                                                   Soporte global: 54,47%
                                    30
Web Workers                                       Comunicación y conectividad

Esos currelas!



   La API Web Workers permite la ejecución de scripts en
   segundo plano (background)

   -Simulación del multiproceso -multi-threading- con javascript
   -Mejora del rendimiento de la aplicación y por consiguiente
   de la experiencia de usuario (antes, un proceso de larga
   duración podía colgar toda la ventana, bloqueando el thread
   de la interfaz de usuario)

   Y puesto que los Web Workers se ejecutan en threads
   independientes, el código debe ir en archivos independientes...

                                   31
Web Workers                                               Comunicación y conectividad



  //ARCHIVO: curritos.js
  function messageHandler(event) {
     // Accede a los datos del mensaje enviado por la página principal
     var messageSent = event.data;
     // Prepara el mensaje que se va a devolver
     var messageReturned = "¡Hola, " + messageSent + ", los curritos te
  saludamos!";
     // Publica el mensaje de vuelta en la página principal
     this.postMessage(messageReturned);
  }

  //Página web principal: manejador del mensaje de retorno
  <div id="output"></div>

  <script type="text/javascript">
  //Instancia el Worker
        var myHelloWorker = new Worker(curritos.js');
        myHelloWorker.addEventListener("message", function (event) {
             document.getElementById("output").textContent = event.data;
  }, false);

  // Inicializa el worker enviándole un primer mensaje
  myHelloWorker.postMessage("Netquet");

  // Detiene el worker con el comando terminate()
  myHelloWorker.terminate();
  </script>


                                       32
Web Workers                                             Comunicación y conectividad



  Un worker no es más que una archivo .js que se encarga de una
  funcionalidad puntual (nótese que los workers no tienen acceso al
  DOM o a otros workers!)
  En la página principal, basta instanciar un objeto Worker, que se
  comunicará con el propio worker mediante mensajes




                                     33
Web Workers                                        Comunicación y conectividad



  ¿Cuándo conviene utilizar Web Workers?

  -Cuando afecte a la experiencia de usuario: Manipulación de
  grandes cantidades de datos
  -En procesamiento de imágenes mediante el uso de datos
  extraídos de elementos <canvas> o <video>
  -Accesos simultáneos a una base de datos (con IndexedDB)
  -Siempre que no necesitemos el DOM, of course!

  Perfecto para Videojuegos!

  -Ejemplos:

  HTML Rocks: http://slides.html5rocks.com/#web-workers
  Utilización de varios web workers: http://nerget.com/rayjs-mt/
  rayjs.html
                                                  Soporte global: 57,33%
                                  34
Notificaciones                                                   Comunicación y conectividad



       El API de Notificaciones HTML5 permite mostrar notificaciones al usuario para
       determinados eventos

       1-Verificar si hay soporte:
       window.webkitNotifications
       2-Crear Notificación (dos tipos: texto plano y HTML):
       window.webkitNotifications.createNotification
       3-Pedir permiso al usuario:
       window.webkitNotifications.checkPermission


       Casos:

       -Email nuevo
       -Nuevo twit
       -Eventos de calendario


-LINK:
HTML Rocks: http://slides.html5rocks.com/#notifications-api
                                                                  Soporte parcial: 27%
                                              35
Acceso al dispositivo                        API Javascript

Integración con el Sistema Operativo!




      -Drag & Drop nativo
      -Desktop Drag-In
      -Desktop Drag-Out
      -Filesystem API
      -Geolocalización
      -Orientación del dispositivo
      -Webcam y micro




                                        36
Drag & Drop Nativo                               Acceso al dispositivo




   Una de las funcionalidades principales y más comunes
   de las interfaces gráficas actuales

   Evidentemente, precisa javascript (pero ya no se usará
   para hacer todo el proceso como antes, sólo parte de
   la funcionalidad en el manejo de eventos)

   1-Comprobar compatibilidad:
   Modernizr.draganddrop
   2-Crear contenido arrastrable: draggable=’true’
   3-Definir eventos: dragstart, drag, dragenter,
   dragover, dragleave, drop, dragend


                              37
Drag & Drop Nativo                                          Acceso al dispositivo




     4-Otros:

     -El objeto datatransfer: ahora ya podemos enviar
     información junto al elemento arrastrado
     -Imagen fantasma: representación libre del objeto que
     está siendo arrastrado
     -Efectos drop: copiado, movimiento, enlazado, …


-Ejemplo:
-HTML5 Rocks: http://slides.html5rocks.com/#drag-and-drop
-Gerifaltitos: http://bit.ly/HrCvcf (JQuery)
                                                  Soporte global: 86,43%
                                    38
Desktop Drag-In & Drag-Out                       Acceso al dispositivo




   Más allá de todo esto, tenemos la posibilidad de
   transferir contenido entre aplicaciones web y con
   software de escritorio en general

   Desktop Drag-In & DragOut
   Habilita la funcionalidad de arrastrar de nuestro
   escritorio al navegador o del navegador a nuestro
   escritorio.

   -Ejemplo:

   Drag-In: http://slides.html5rocks.com/#drag-in
   Drag-Out: http://slides.html5rocks.com/#drag-out
                             39
FILE API                                                                 Acceso al dispositivo



       -Abrir archivos locales a través de input type
       -Obtener información de dicho archivo mediante la API javascript

       Esta solución nos permite presentar una miniatura de una
       imagen que se desee subir al servidor antes de enviarla o verificar
       el MIME de los archivos compatibles, y hasta su tamaño

       El caso más claro es el Upload de archivos múltiple!

       -Ejemplo:
       Múltiple Upload: http://robertnyman.com/html5/fileapi-upload/
       fileapi-upload.html

-LINK:
The HTML5 FILE API for Upload: http://robertnyman.com/2010/12/16/utilizing-the-html5-
file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/
                                                                Soporte global: 53,99%
                                             40
Geolocalización                                                   Acceso al dispositivo

Con un poco de código podremos obtener la ubicación del usuario



      -La API de Geolocalización es un esfuerzo de la W3C para
      estandarizar una interfaz que recupere información geográfica de
      un dispositivo cliente
      -Ahora es el propio navegador el que detecta la latitud y longitud
      (A través del WIFI o GPS del dispositivo)

      ¡Ideal para aplicaciones web en dispositivos móviles!

      -La geolocalización es útil en sitios sociales para mostrar dónde se
      encuentra el usuario, y/o compartir imágenes o vídeos de dónde
      se encuentra (esta característica ya funciona con Google Maps)
      -También, dependiendo de dónde esté el usuario, podría mostrar
      una información diferente (MK´)


                                         41
Geolocalización                                          Acceso al dispositivo



   Así de simple:

   1-Detectamos que soporte la funcionalidad:
   navigator.geolocation
   2-Recuperamos la posición del usuario:
   navigator.geolocation.getCurrentPosition
   mediante el objeto position
   3-El navegador nos preguntará si deseamos compartir nuestra
   posición. ¡El usuario debe autorizarlo!
   4-Dibujamos mapa (esto ya con la API de Google Maps):
   <script type="text/javascript" src="http://
   maps.google.com/maps/api/js?sensor=false"></script>

   -Ejemplo:
   HTML Rocks: http://slides.html5rocks.com/#geolocation

                                                  Soporte global: 70,4%
                                  42
Orientación del dispositivo                                              Acceso al dispositivo

La magia del acelerómetro y del giroscopio



      iPhone, iPads y la mayoría de los smartphones más modernos incorporan un
      acelerómetro y/o un giroscopio. También los macBook

      Las nuevas API de HTML5 permiten el uso de acelerómetros/giroscopios

      window.addEventListener('deviceorientation',
      function(event) {
        var a = event.alpha;
        var b = event.beta;
        var g = event.gamma;
      }, false);


      -Ejemplo:
      HTML Rocks: http://slides.html5rocks.com/#slide-orientation
      Imagen 360º: http://360.io/pt3dmqna


                                                                Soporte global: 51,04%
                                             43
Acceso a webcam y micro                                      Acceso al dispositivo

videollamadas y videoconferencias de forma nativa

      Con HTML 5 podremos acceder directamente a los dispositivos
      de audio, video y cámaras fotográficas

      Servicios de videollamadas y videoconferencias utilizando
      únicamente el navegador web

      Será la etiqueta <device> la encargada de permitir al usuario
      dar acceso a la página a determinados dispositivos del equipo.
      Tendremos que esperar a que el usuario seleccione un dispositivo
      para darnos acceso


      API Media Capture: define las mejoras que tendrían que tener los
      formularios para proveer acceso a audio, imagen y captura de
      vídeo (todavía es un working draft)

                                         44
Acceso a webcam y micro                                     Acceso al dispositivo




     Reconocimiento de voz con HTML 5: Speech input

     Este nuevo campo permite capturar la voz del usuario y
     escribir directamente en el campo de texto lo que dice, o también
     procesar directamente la voz (ej.: Google Translate)

     <input type="text" x-webkit-speech />

     -Ejemplo:
     Transmisión grabaciones webcam entre 2 ordenadores:
     http://bit.ly/dzXsHo
     Speech Input: http://slides.html5rocks.com/#speech-input

-LINK:
HTML Media Capture specification: http://dev.w3.org/2009/dap/camera/

                                     45
Gráficos
¿Estás listo para jugar al máximo nivel desde tu navegador y de forma nativa?


                  Canvas: manipulación de mapa de bits
                       SVG: gráficos vectoriales
                       WebGL: el 3D en la web




                                          46
El elemento Canvas                                                        Gráficos

Manipulación de mapa de bits



      -El elemento Canvas permite representar en pantalla imágenes,
      gráficos y formas geométricas de todo tipo. E incluso textos
      -El dibujo en el canvas se hace mediante el API Canvas 2D
      -El potencial de canvas reside en su habilidad para actualizar su
      contenido en tiempo real.
      -El canvas aprovecha las bondades de la aceleración de
      gráficos por hardware: Eficiencia y mayor rendimiento


      API Canvas 2D:
      Manipulación del contexto del canvas, manipulación de imágenes,
      manipulación de formas y colores, manipulación de líneas, textos y
      sombras, transformaciones y animaciones, control del ratón


                                      47
El elemento Canvas                                                            Gráficos


       <canvas id="canvas" width="838" height="220"></canvas>

       <script>
         var canvasContext =
       document.getElementById("canvas").getContext("2d");
         canvasContext.fillRect(250, 25, 150, 100);

         canvasContext.beginPath();
         canvasContext.arc(450, 110, 100, Math.PI * 1/2,
       Math.PI * 3/2);
         canvasContext.lineWidth = 15;
         canvasContext.lineCap = 'round';
         canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
         canvasContext.stroke();
       </script>

-LINK:
Guía del canvas: http://www.desarrolloweb.com/articulos/guia-canvas-html5-
desarrolladores.html
KineticJS (librería de JavaScript que extiende el contexto 2D para Canvas):
http://www.kineticjs.com (ejemplos de gráficos y de código)
                                              48
Aceleración gráfica por hardware                                           Gráficos

¡Desde el navegador!


Cuando enviamos comandos de dibujo al canvas, los navegadores ya son
capaces de entregarlos directamente al hardware de gráficos –GPU–,
liberando a la CPU de trabajo, y por consiguiente, aumentando
considerablemente el rendimiento

Navegador:
-Rendimiento muy superior (animaciones en tiempo real)
-Experiencia de usuario mejorada, más intensa y gratificante


-Ejemplos:
Juego retro de Zombies mutantes hecho con el motor Impact JS y mostrado
en el canvas de HTML5: http://www.mutantzombiemonsters.com/
CanvasDOOM: http://www.benjoffe.com/code/demos/canvascape/textures

                                                     Soporte global: 72,96%
                                      49
SVG (Scalable Vector Graphics)                                      Gráficos

Dibujo vectorial

           SVG es un formato de gráficos vectoriales basado en XML




                                     50
SVG (Scalable Vector Graphics)                                                         Gráficos



       -Es independiente de la resolución de pantalla (puede escalarse la imagen sin
       perder resolución)
       -Como se basa en XML, el manejo de sus diferentes elementos y atributos es
       realmente fácil
       -Es mejor solución para animaciones complejas

       <svg>
           <circle id="myCircle" class="important" cx="50%"
       cy="50%" r="100" fill="url(#myGradient)"
       onmousedown="alert('hello');"/>
       </svg>

       -Ejemplos:

       -Muchas de las imágenes que usa Wikipedia empiezan a estar ya en este formato
       -HTML5 Rocks: http://slides.html5rocks.com/#svg-example-slide

-LINK:
-Soporte (detalle): http://caniuse.com/#cats=SVG

                                               51
Gráficos
¿Canvas o SVG?
Dibujo vectorial vs Mapa de bits…

       -Si quieres que el aspecto de tu sitio web sea independiente de la resolución de
       pantalla, altamente interactivo o es para ver e imprimir: SVG.
        -Si por el contrario, estás desarrollando un juego y quieres que los gráficos se
       muestren en pantalla a gran velocidad, o no quieres trabajar con XML: Canvas.
       -Idealmente, ambos elementos pueden funcionar juntos de forma complementaria
       a la perfección.




-LINK:
Elucubraciones sobre cuándo usar Canvas, SVG o ambos [EN]: http://blogs.msdn.com/b/ie/
archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspx

                                              52
Gráficos
WebGL nos trae el 3D a la web
Javascript no tiene límites!

      Especificación estándar que dota a los navegadores web de
      gráficos 3D sin necesidad de extensiones

      -El Canvas puede invocar el estándar WebGL
      -Permite crear figuras en 3D, dar iluminación y aplicar texturas
      -Permite movernos en un entorno 3D y aplicar eventos para
      poder tener interacción con teclado y mouse

      Desventajas: compatibilidad, rendimiento y seguridad.
      Está demasiado verde todavía

      -Compatibilidad navegadores
      -Necesidad de HW potente
      -La telefonía móvil (batería)


                                      53
Gráficos
WebGL nos trae el 3D a la web
-Ejemplos:
El vuelo del navegante:
http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/
Giro de la Tierra y la Luna en HTML 5: https://cvs.khronos.org/svn/repos/
registry/trunk/public/webgl/sdk/demos/webkit/Earth.html
Tron en HTML 5 y WebGL: http://cycleblob.com/
QUAKE II: http://media.tojicode.com/q3bsp/

-LINKS:
Test navegación para HTML5 y WebGL:
http://ie.microsoft.com/testdrive/performance/fishietank/
HTML5 y WEbGL test: http://helloracer.com/webgl/
¿Queréis romper Google?: http://mrdoob.com/projects/chromeexperiments/
google_gravity/ (roto y todo podéis seguir usándolo)
Funcionalidades destacadas WebGL:
http://www.khronos.org/webgl/wiki/Demo_Repository
                                                       Soporte global: 48,4%
                                      54
Gráficos
WebGL nos trae el 3D a la web

   Caso de estudio:
   Quake II GWT en web:
   	

   -WebSockets
   -Renderizado WebGL
   -Implementación GWT de Java
   -Web Storage (para salvar
   juego y preferencias)




                                 55
Multimedia
Soporte multimedia estándar y nativo: ¡Adiós plugins!


      Podemos afrontar este punto como una guerra abierta con
      diferentes frentes:

      1-Reproductor nativo vs reproductor basado en plugins:
      HTML 5 vs Flash
      2-Tecnologías libres y abierta vs propietarias:
      Mozilla, Opera (y Google) vs Apple y Microsoft
      3-Y propietarias vs propietarias: Apple vs Adobe

      -El problema de utilizar un reproductor de vídeo basado en plugins
      es que su contenido esta encerrado y oculto para el resto del
      documento
      -Disponer de elementos nativos en HTML supone la integración de
      los mismos con otras tecnologías del navegador, como JavaScript
      y CSS
                                          56
Multimedia


Nuevas etiquetas Audio y Video:
Dos de las claves de HTML 5 y del futuro de la web

<audio id="audio" src="sound.mp3" controls>
</audio>

<video id="video" src="movie.webm" autoplay
controls></video>


Contenedores: Códecs Audio + Códecs Vídeo

-OGG: Vorbis + Theora (Mozilla y Opera)
-MP4: ACC + H.264 y mp3 + H.264 (Apple y Microsoft)
-WebM: Vorbis + VP8 (Google)

                                                 Soporte global: 70%
                               57
Multimedia
APIs de Audio
Javascript para procesamiento y sintetización avanzada de audio en aplicaciones web




      Audio Data API -> Mozilla
      -Extiende <audio> y <video>
      -API basada en eventos

      Web Audio API -> Google
      -AudioContext y AudioNode
      -API a alto nivel

      -Ejemplos:
      Pocket Full Of HTML5 (Audio Data API): http://slidesha.re/xVXdSZ
      Real-time Audio analysis (Web Audio API): http://bit.ly/ux2smU

                                         58
Multimedia
APIs de Audio

   WebRTC API
   -Proporcionar comunicación en tiempo real en la web
   -Escenarios: streaming y videoconferencia

   HTML Streams API -> Ian Hickson
   -Múltiples flujos multimedia en HTML5
   -HTML MediaController API
   -Captura y grabación de audio y vídeo local

   MediaStream Processing API
   -API común que trata de aunar todas las anteriores


                             59
Multimedia
¿Cuál elegir?

    Web Audio API:

    -Más eficiente
    -Más fácil de usar
    -Mayor cuota móvil/Tablet
    -Además, Google financia a Mozilla y no al revés ;)

    -Ejemplos:
    Plink (Web Audio API y Node.JS): http://labs.dinahmoe.com/plink/#
    Pirates loves daisies (juego): http://www.pirateslovedaisies.com


-LINK:
Web Audio API (W3C Editor´s Draft): http://bit.ly/rbKBR7

                                    60
Multimedia
¡Vídeo nativo en HTML!
     Stream de video con HTML5 (sin Flash ni
     Silverlight)

     Habrá que esperar un poco de tiempo, atendiendo
     a las ya conocidas razones de compatibilidad

     -Ejemplo:
     JPayer video: http://bit.ly/fHUSDg

-LINKS:
Convertidores de vídeo a otro formato:
  Media Converter: http://mediaconverter.org/ (online y gratuito)
  Miro Video Converter: http://www.mirovideoconverter.com/
Mediasource API: http://bit.ly/qnvqGa

                                      61
Multimedia
¡Vídeo nativo en HTML!
<script>
function fallo(e)
{
    switch (e.target.error.code) {
         case e.target.error.MEDIA_ERR_ABORTED:alert('Has abortado el playback.');
         break;
         case e.target.error.MEDIA_ERR_NETWORK: alert('Error en la red.');
         break;
         case e.target.error.MEDIA_ERR_DECODE: alert('Problema de codificación.');
         break;
         case
         e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:alert('Formato no soportado o
archivo no encontrado.');
         break;
         default: alert('Ha ocurrido un error desconocido.');
         break;
    }
}
</script>

<video controls height="300" width="400" loop autoplay onerror="fallo(event)" >
     <source src="ejemplo_conversion.webmvp8.webm" type="video/webm" />
     <source src="ejemplo_conversion.mp4" type="video/h264" />
     <source src="ejemplo_conversion.theora.ogv" type="video/ogg" />
</video>


                                                             Soporte global: 45,14%
                                           62
Multimedia
Guerra de códecs
Tecnologías libres y abiertas vs propietarias: Opera y Mozilla vs Apple y Microsoft


      Mozilla y Opera proponen  Theora (códec de
      vídeo libre), Vorbis (códec de audio libre) y el
      contenedor Ogg (también abierto)

      Apple condena a Adobe al ostracismo en la telefonía
      móvil y defiende su códec H.264

      Microsoft, aunque más abierto que Apple, también
      apuesta por el H.264

      El gigante Google apoya su códec abierto VP8 pero
      no le hace feos a H.264

                                            63
Multimedia
Guerra de códecs


   O sea, que a estas alturas no está aclarado…


   -Corremos el riesgo de volver a las épocas de
   incompatibilidades a las que precisamente Flash puso
   fin
   -Es un riesgo para la web, dejar en manos de una única
   empresa privada el futuro de algo tan importante para
   el desarrollo de Internet como es el video




                             64
Multimedia
Guerra de códecs
Tecnologías propietarias vs propietarias: Adobe vs Apple




      A estas alturas, Apple ya ha ganado la batalla:

      Adobe anunció que Flash ya no daría soporte a los
      móviles. Importante decisión, que no hubiera sido
      posible si Apple no hubiera podido contar con HTML5
      para presionarlos

      Adobe, simplemente, va a dar herramientas a los
      desarrolladores para que puedan convertir el formato
      Flash a HTML 5 (Adobe AIR)


                                           65
Multimedia
Guerra de códecs
¿Quién ganará esta batalla?


      Sin duda alguna, HTML5 ganará -en un futuro no
      demasiado lejano-, desplazando totalmente a Flash en
      lo que a desarrollo de juegos a través del navegador se
      refiere

      Dependerá del ritmo con que los navegadores
      vayan dando soporte a las nuevas características
      disponibles en HTML5.

      ¡Aunque ya sabemos lo complejo que es todo este mundo
      de las patentes y el código libre!¡sobre todo con la cantidad
      de navegadores, intereses y usuarios que hay implicados!

                                    66
Estilos CSS 3
Mira, mamá: ¡Sin javascript!


      -Selectores CSS          -Gradientes
      -Webfonts                -Sombras
      -TextWrapping            -Imágenes borde
      -Columnas                -Box Model
      -Stroke                  -Transiciones
      -Opacidad                -Tranformaciones
      -HSL                     -Animaciones
      -Bordes
      redondeados

      -Uso de media query


                                        67
Estilos CSS 3




    -Ejemplos:

    HTML5 Rocks: http://slides.html5rocks.com/#css3-title

    Efectos rollover CSS3: http://tympanus.net/codrops/
    2011/11/02/original-hover-effects-with-css3/
    Efecto Matrix CSS3: http://girliemac.com/sandbox/
    matrix.html


-LINK:
HTML5 snippets: http://html5snippets.com/
                                       Soporte global: 68,39-94,03%
                              68
Polyfills
Parcheando navegadores prehistóricos



      Como hemos podido comprobar, hay un tema que nos aleja
      todavía de querer comprometernos con HTML5; sí, hablamos de la
      compatibilidad, y aquí veremos al menos una aproximación de
      cómo resolverlo...

      Por una parte, utilizaremos Modernizr, que es una biblioteca
      para detectar el soporte de los navegadores a las diferentes
      funcionalidades de HTML 5

      <script src="modernizr.min.js"></script>

      Con Modernizr.load()podremos cargar Pollyfills



                                       69
Polyfills



       Y por otra, tenemos los Polyfills, que son bibliotecas Javascript
       que amplían las funcionalidades de los navegadores que no
       soportan las nuevas funcionalidades de HTML 5

       Un polyfill es como un emulador que nos permitirá trabajar en
       clientes web antiguos de la misma forma que si fueran modernos

       Eso sí, utilizad los Pollyfills con cuidado, ya que pueden disminuir
       el rendimiento de los navegadores



-LINKS:
Herramienta para saber el nivel de soporte de HTML5 de tu navegador: http://html5test.com/
Guía de APIs y estilos CSS a poder usar en nuestras aplicaciones: http://html5please.com/

Excelente presentación sobre polyfills [EN]: http://addyosmani.com/polyfillthehtml5gaps/slides/#14

                                               70
Principales Polyfills                                                                    Polyfills




    -HTML Shiv:
    Cada vez hay menos excusas para empezar a usar HTML5 en nuestros sitios!

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/
    html5.js"></script>
    <![endif]-->

    -Google Chrome Frame:
    Complemento para IE, diseñado para sustituir el motor de renderizado de IE por
    el del Google Chrome (funciona con IE 6-9. Permite que sitios web programados
    adecuadamente sean mostrados de manera correcta bajo IE)

    <meta http-equiv="X-UA-Compatible" content="chrome=1" />

    Esto hará que la página sea renderizada por Chrome para quien lo tenga instalado,
    sin afectar a los usuarios que no lo tengan



                                            71
Principales Polyfills                                                     Polyfills




    -HTML5Boilerplate:
    Es una robusta plantilla que nos ayuda a optimizar tanto el código
    como la compatibilidad y el rendimiento de carga de páginas
    HTML 5
       -También incluye Mobile Boilerplate
       -Y constructor de proyectos que simplifica H5BP: Initializr

    -Selectivizr:
    Para compatibilizar atributos CSS3 y pseudo-clases en IE 6-8

    <!--[if (gte IE 6)&(lte IE 8)]>
      <script type="text/javascript" src="selectivizr.js"></
    script>
      <noscript><link rel="stylesheet" href="[fallback
    css]" /></noscript>
    <![endif]-->


                                    72
Principales Polyfills                                                                   Polyfills




    -LINKS:
    Modernizr: http://modernizr.com/

    HTML Shiv: http://code.google.com/p/html5shiv/

    Google Chrome Frame:
    http://www.google.com/chromeframe?hl=es&quickenable=true

    HTML5Boilerplate: http://html5boilerplate.com/
    Initializr (H5BP+Modernizr+JQuery): http://www.initializr.com/

    Selectivizr: http://selectivizr.com/

    La guía Todo-En-Uno –que ni está ordenada alfabéticamente ni es boba- de Planes B
    para HTML5: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

    Las 15 APIs más populares de HTML5: http://www.htmlcinco.com/15-apis-de-html5/


                                            73
Dispositivos móviles
Be mobile, my friend




                       74
Dispositivos móviles


HTML5 será la web para los dispositivos móviles: tablets y
smartphones

Sin tardar demasiado será fundamental tener páginas web
que se muestren correctamente y sean funcionales en
cualquiera de los dispositivos en los que sean visualizadas

Compatibilidad:

  -iOS 3.0+
  -Android 2.0+
  -BlackBerry smartphones 5.0+
  -BlackBerry playbook 1.0+
  -webOS 1.4+
  -Symbian anna+
  -Bada 2.0
  -Windows phone mango+

                             75
Frameworks                                                Dispositivos móviles




   ¿Qué tipo de aplicaciones podemos desarrollar para
   un móvil?

   -Aplicaciones no nativas basadas en el navegador móvil
   -Aplicaciones nativas (Objective C/Java) que acceden directamente
   al HW del móvil

   Frameworks para el desarrollo de aplicaciones web
   (no nativas) para dispositivos móviles en todas las
   plataformas

   -Todos utilizan HTML 5, CSS 3 y Javascript
   -Todos soportan varias plataformas



                                   76
Frameworks                                        Dispositivos móviles




   JQuery Mobile y Sencha Touch son frameworks
   javascript que permiten desarrollar aplicaciones no
   nativas para el navegador del móvil con el mismo Look
   & Feel de las aplicaciones nativas


   PhoneGap y Titanium Appcelerator, lo que
   nos permiten es empaquetar nuestra aplicación web
   permitiendo su distribución en los diferentes sistemas
   de venta



                              77
PhoneGap                                                 Dispositivos móviles




  Permite crear aplicaciones usando exclusivamente HTML5, CSS3 y
  Javascript y empaquetarlas para que sean compatibles con las
  principales plataformas móviles

  Provee una serie de bibliotecas desarrolladas en el lenguaje
  específico de cada plataforma (Objective-C para IOS, Java para
  Android, etc), que permiten acceder desde el código HTML 5 a las
  principales funcionalidades del dispositivo

  Al ser una página web, tenemos acceso al DOM y podemos usar
  frameworks como jQuery Mobile o cualquier otro

  Evidentemente, no tendrá todo el potencial de una aplicación nativa



                                  78
JQuery Mobile                                               Dispositivos móviles




   Framework para el desarrollo de aplicaciones y sitios web
   optimizados para smartphones y tablets

   “Write less, do more”
   Podemos desarrollar una sola aplicación que funcione en las
   plataformas más populares de smarthphones y tablets (en vez de
   tener que escribir aplicaciones nativas para cada dispositivo móvil o
   sistema operativo)

   No es necesario que el programador reciba formación específica
   como Objective-C para iOS/iPhone o Java para Android, únicamente
   sabiendo HTML puede realizar el trabajo



                                    79
Dispositivos móviles



Otras técnicas para garantizar la compatibilidad , consistencia y
rendimiento de un sitio web:

-Ajustes del área de visión o Viewport para evitar problemas de escala
involuntaria

<meta name="viewport" content="width=device-width; initial-
scale=1.0; maximum-scale=1.0; user-scalable=0;">

-Favicons de múltiples resoluciones

-Media queries, que permiten adaptar el sitio según tamaño y resolución del
equipo


Las media queries CSS3 modifican la estructura de la página en función del
tamaño de la pantalla. Simplemente, redefinimos los estilos –al final del .css- para
resoluciones muy grandes y para muy pequeñas (dispositivos móviles)



                                         80
Dispositivos móviles

@media screen and (min-width:1200px){
  img {
    max-width:1000px;
  }
  #container{
    width:1100px;
  }
  header h1 a{
    width:1100px;
    height:180px;
    background:url(imagen.jpg) no-repeat 0 0;
  }
}

@media screen and (max-width:600px){
  img {
    max-width:290px;
  }
  #container{
    width:auto;
  }
  header h1 a{
    width:auto;
  }
}
                              81
Dispositivos móviles




-LINKS:

 -W3C. Estándares para aplicaciones Web en móviles (Febrero 2012):
 http://www.w3.org/2012/02/mobile-web-app-state/
 -Compatibilidad HTML5 en móviles y tablets: http://mobilehtml5.org/
 -Aplicación web offline para dispositivos móviles con HTML 5:
 http://www.ibm.com/developerworks/web/library/wa-offlineweb/

                                                                 Soporte global: 72,48%
                                             82
Epílogo
Links y Agradecimientos


     -HTML5 rocks: http://slides.html5rocks.com/#landing-slide-Info
     -Ejemplos HTML5 y APIs relacionadas: http://robertnyman.com/html5/
     -DIV In To HTML5: http://diveintohtml5.info/
     -Soporte navegadores: http://caniuse.com/
     -Pick an API: http://playground.html5rocks.com/

     -Tabla periódica de los Elementos HTML5 (^^):
     http://joshduck.com/periodic-table.html
     -HTMLFácil: http://html5facil.com/
     -10 cuentas de Twitter relacionadas con HTML5 para seguir:
     http://css3html5.com.ar/10-cuentas-de-twitter-para-seguir/

     -BrowserQuest: http://browserquest.mozilla.org/


                                     83
Caso de estudio                                                       Epílogo


 BrowserQuest:
 Juego de rol -masivo y multijugador- en línea de Mozilla

 -Las cosas que se ven en el navegador son alimentadas por Canvas
 -Los webSocket facilitan la comunicación con el servidor. El propio
 servidor está escrito en JavaScript y se ejecuta en varios servidores a
 través de Node.js*
 -Utiliza HTML5 Audio API para el sonido
 -Web Workers para cargar el mapa del juego al mismo tiempo que la
 página de inicio
 -localStorage para guardar el progreso del jugador
 -CSS3 Media Queries para asegurar que el juego se adapta a
 diferente tipos de ventana y tamaños de pantalla

 Más juegos en HTML5: http://bitelia.com/2012/02/8-juegos-geniales-
 desarrollados-en-html5

                                    84
Extra rare tracks ^^                                                                 Epílogo


       Node.js (servidor web)
       Node es un entorno JavaScript de lado de servidor que utiliza un modelo
       asíncrono y dirigido por eventos

       Lista de aplicaciones para las que Node encajaría perfectamente (mejor que
       Apache):

          -Juegos online
          -Gestores de correo online: de esta manera teniendo el navegador abierto
          podríamos ver notificaciones en tiempo real de nuevos correos recibidos
          -Herramientas de colaboración
          -Chats
          -Redes sociales: por ejemplo para actualizar automáticamente tu muro de
          novedades
          -Herramientas de traducción en tiempo real


-LINK:
El Libro para Principiantes en Node.js: http://www.nodebeginner.org/index-es.html

                                               85
Agradecimientos                         Epílogo



   -Tim Berners Lee
   -Richard Stallman
   -Linus Torvals
   -Jesús Conde
   -W3C


   -Netquest


   Espero que haya sido de su agrado.
   Saludos y hasta otra ;)


                             86

Weitere ähnliche Inhalte

Was ist angesagt?

Buenas prácticas en infraestructura en SharePoint 2013
Buenas prácticas en infraestructura en SharePoint 2013Buenas prácticas en infraestructura en SharePoint 2013
Buenas prácticas en infraestructura en SharePoint 2013Miguel Tabera
 
Tipos de Sitios en SharePoint 2010
Tipos de Sitios en SharePoint 2010Tipos de Sitios en SharePoint 2010
Tipos de Sitios en SharePoint 2010SolidQ
 
Seminario html5
Seminario html5Seminario html5
Seminario html5UDECI
 
Presentacion Joomla Phpconference Barcelona 2009
Presentacion Joomla Phpconference Barcelona 2009Presentacion Joomla Phpconference Barcelona 2009
Presentacion Joomla Phpconference Barcelona 2009Jordi Catà
 
Simplex portal 4.0 - Detalle de funcionalidades
Simplex portal 4.0 - Detalle de funcionalidadesSimplex portal 4.0 - Detalle de funcionalidades
Simplex portal 4.0 - Detalle de funcionalidadesSIMPLEXPORTAL
 
Curso SharePoint 2013 overview
Curso SharePoint 2013 overviewCurso SharePoint 2013 overview
Curso SharePoint 2013 overviewVladimir Medina
 
MsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nube
MsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nubeMsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nube
MsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nubeMiguel Tabera
 
PHP, casos de éxito y comparativas con otros lenguajes
PHP, casos de éxito y comparativas con otros lenguajesPHP, casos de éxito y comparativas con otros lenguajes
PHP, casos de éxito y comparativas con otros lenguajesHéctor Garduño Real
 
Plone CMS, novedades y flexibilidad para soluciones empresariales hoy en día
Plone CMS, novedades y flexibilidad para soluciones empresariales hoy en díaPlone CMS, novedades y flexibilidad para soluciones empresariales hoy en día
Plone CMS, novedades y flexibilidad para soluciones empresariales hoy en díaLeonardo J. Caballero G.
 
WORKSHOP I: Introducción a API REST
WORKSHOP I: Introducción a API RESTWORKSHOP I: Introducción a API REST
WORKSHOP I: Introducción a API RESTBEEVA_es
 
Curso programación páginas web con ASP.NET
Curso programación páginas web con ASP.NETCurso programación páginas web con ASP.NET
Curso programación páginas web con ASP.NETEuroinnova Formación
 
Webinar Proyecto Sap Netweaver Portals
Webinar Proyecto Sap Netweaver PortalsWebinar Proyecto Sap Netweaver Portals
Webinar Proyecto Sap Netweaver Portalsjuanmi_R
 
Ponencia en la WordCamp Madrid 2019: Migrando un portal en ASP.NET de 150.000...
Ponencia en la WordCamp Madrid 2019: Migrando un portal en ASP.NET de 150.000...Ponencia en la WordCamp Madrid 2019: Migrando un portal en ASP.NET de 150.000...
Ponencia en la WordCamp Madrid 2019: Migrando un portal en ASP.NET de 150.000...Dámaso Velázquez Álvarez
 
Cómo instalar Sharepoint Server 2013 en su empresa por Neiy Briceño
Cómo instalar Sharepoint Server 2013 en su empresa por Neiy BriceñoCómo instalar Sharepoint Server 2013 en su empresa por Neiy Briceño
Cómo instalar Sharepoint Server 2013 en su empresa por Neiy BriceñoNeiy Darry Rodriguez
 

Was ist angesagt? (20)

Buenas prácticas en infraestructura en SharePoint 2013
Buenas prácticas en infraestructura en SharePoint 2013Buenas prácticas en infraestructura en SharePoint 2013
Buenas prácticas en infraestructura en SharePoint 2013
 
Tipos de Sitios en SharePoint 2010
Tipos de Sitios en SharePoint 2010Tipos de Sitios en SharePoint 2010
Tipos de Sitios en SharePoint 2010
 
Clase xi
Clase xiClase xi
Clase xi
 
Seminario html5
Seminario html5Seminario html5
Seminario html5
 
Investigacion de pagina web
Investigacion de pagina webInvestigacion de pagina web
Investigacion de pagina web
 
avanttic - webinar: WebCenter Content (07-06-2017)
avanttic - webinar: WebCenter Content (07-06-2017)avanttic - webinar: WebCenter Content (07-06-2017)
avanttic - webinar: WebCenter Content (07-06-2017)
 
Presentacion Joomla Phpconference Barcelona 2009
Presentacion Joomla Phpconference Barcelona 2009Presentacion Joomla Phpconference Barcelona 2009
Presentacion Joomla Phpconference Barcelona 2009
 
Simplex portal 4.0 - Detalle de funcionalidades
Simplex portal 4.0 - Detalle de funcionalidadesSimplex portal 4.0 - Detalle de funcionalidades
Simplex portal 4.0 - Detalle de funcionalidades
 
Curso SharePoint 2013 overview
Curso SharePoint 2013 overviewCurso SharePoint 2013 overview
Curso SharePoint 2013 overview
 
MsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nube
MsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nubeMsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nube
MsCodersCamp 2014 - SharePoint Online: desarrolla tus apps en la nube
 
PHP, casos de éxito y comparativas con otros lenguajes
PHP, casos de éxito y comparativas con otros lenguajesPHP, casos de éxito y comparativas con otros lenguajes
PHP, casos de éxito y comparativas con otros lenguajes
 
Páginas Web
Páginas WebPáginas Web
Páginas Web
 
Plone CMS, novedades y flexibilidad para soluciones empresariales hoy en día
Plone CMS, novedades y flexibilidad para soluciones empresariales hoy en díaPlone CMS, novedades y flexibilidad para soluciones empresariales hoy en día
Plone CMS, novedades y flexibilidad para soluciones empresariales hoy en día
 
WORKSHOP I: Introducción a API REST
WORKSHOP I: Introducción a API RESTWORKSHOP I: Introducción a API REST
WORKSHOP I: Introducción a API REST
 
Curso programación páginas web con ASP.NET
Curso programación páginas web con ASP.NETCurso programación páginas web con ASP.NET
Curso programación páginas web con ASP.NET
 
Webinar Proyecto Sap Netweaver Portals
Webinar Proyecto Sap Netweaver PortalsWebinar Proyecto Sap Netweaver Portals
Webinar Proyecto Sap Netweaver Portals
 
El internet
El internetEl internet
El internet
 
Microsoft frontpage
Microsoft frontpageMicrosoft frontpage
Microsoft frontpage
 
Ponencia en la WordCamp Madrid 2019: Migrando un portal en ASP.NET de 150.000...
Ponencia en la WordCamp Madrid 2019: Migrando un portal en ASP.NET de 150.000...Ponencia en la WordCamp Madrid 2019: Migrando un portal en ASP.NET de 150.000...
Ponencia en la WordCamp Madrid 2019: Migrando un portal en ASP.NET de 150.000...
 
Cómo instalar Sharepoint Server 2013 en su empresa por Neiy Briceño
Cómo instalar Sharepoint Server 2013 en su empresa por Neiy BriceñoCómo instalar Sharepoint Server 2013 en su empresa por Neiy Briceño
Cómo instalar Sharepoint Server 2013 en su empresa por Neiy Briceño
 

Andere mochten auch

Los MOOCs, su evolución en la universidad. E-ciencia
Los MOOCs, su evolución  en la universidad. E-cienciaLos MOOCs, su evolución  en la universidad. E-ciencia
Los MOOCs, su evolución en la universidad. E-cienciaMiguel Zapata-Ros
 
CSS3 Talk at SF HTML5 Meetup
CSS3 Talk at SF HTML5 MeetupCSS3 Talk at SF HTML5 Meetup
CSS3 Talk at SF HTML5 MeetupRobyn Overstreet
 
Online / Offline
Online / OfflineOnline / Offline
Online / OfflinePeter Rozek
 
Formas y materiales & roxipan pdf 2
Formas y materiales & roxipan pdf 2Formas y materiales & roxipan pdf 2
Formas y materiales & roxipan pdf 2FORMAS Y MATERIALES
 
Best practices in eGovernment: on a knife-edge between success and failure
Best practices in eGovernment: on a knife-edge between success and failureBest practices in eGovernment: on a knife-edge between success and failure
Best practices in eGovernment: on a knife-edge between success and failureTrond Arne Undheim
 
Algunas ideas para campañas de mercadeo digital para empresas y negocios
Algunas ideas para campañas de mercadeo digital para empresas y negociosAlgunas ideas para campañas de mercadeo digital para empresas y negocios
Algunas ideas para campañas de mercadeo digital para empresas y negociosEmpresa Web
 
Toa Ushirikiano Katika Vyombo vya Sheria - Ni Muhimu
Toa Ushirikiano Katika Vyombo vya Sheria - Ni MuhimuToa Ushirikiano Katika Vyombo vya Sheria - Ni Muhimu
Toa Ushirikiano Katika Vyombo vya Sheria - Ni MuhimuMalick Mawere
 
Thiet ke website - Chalet les pins
Thiet ke website - Chalet les pinsThiet ke website - Chalet les pins
Thiet ke website - Chalet les pinsViết Nội Dung
 
Expo Beauty 2013 Exhibitors Presentation
Expo Beauty 2013 Exhibitors PresentationExpo Beauty 2013 Exhibitors Presentation
Expo Beauty 2013 Exhibitors PresentationSquibel Apps
 
My speech 1
My speech 1My speech 1
My speech 1kakapo1
 
The Relocation Expert Guide
The Relocation Expert GuideThe Relocation Expert Guide
The Relocation Expert GuideCorp LiveWire
 

Andere mochten auch (20)

Los MOOCs, su evolución en la universidad. E-ciencia
Los MOOCs, su evolución  en la universidad. E-cienciaLos MOOCs, su evolución  en la universidad. E-ciencia
Los MOOCs, su evolución en la universidad. E-ciencia
 
CSS3 Talk at SF HTML5 Meetup
CSS3 Talk at SF HTML5 MeetupCSS3 Talk at SF HTML5 Meetup
CSS3 Talk at SF HTML5 Meetup
 
HTML & HTML5
HTML & HTML5HTML & HTML5
HTML & HTML5
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 
Capacitación Avanzada Correo ElectróNico
Capacitación Avanzada Correo ElectróNicoCapacitación Avanzada Correo ElectróNico
Capacitación Avanzada Correo ElectróNico
 
Formas y materiales & roxipan pdf 2
Formas y materiales & roxipan pdf 2Formas y materiales & roxipan pdf 2
Formas y materiales & roxipan pdf 2
 
Periodistas24
Periodistas24Periodistas24
Periodistas24
 
Best practices in eGovernment: on a knife-edge between success and failure
Best practices in eGovernment: on a knife-edge between success and failureBest practices in eGovernment: on a knife-edge between success and failure
Best practices in eGovernment: on a knife-edge between success and failure
 
Algunas ideas para campañas de mercadeo digital para empresas y negocios
Algunas ideas para campañas de mercadeo digital para empresas y negociosAlgunas ideas para campañas de mercadeo digital para empresas y negocios
Algunas ideas para campañas de mercadeo digital para empresas y negocios
 
Agenda, Forming of audit opinions, SIGMA, Ankara, 26 October 2016
Agenda, Forming of audit opinions, SIGMA, Ankara, 26 October 2016Agenda, Forming of audit opinions, SIGMA, Ankara, 26 October 2016
Agenda, Forming of audit opinions, SIGMA, Ankara, 26 October 2016
 
Internet
InternetInternet
Internet
 
Toa Ushirikiano Katika Vyombo vya Sheria - Ni Muhimu
Toa Ushirikiano Katika Vyombo vya Sheria - Ni MuhimuToa Ushirikiano Katika Vyombo vya Sheria - Ni Muhimu
Toa Ushirikiano Katika Vyombo vya Sheria - Ni Muhimu
 
María eugenia
María eugeniaMaría eugenia
María eugenia
 
Thiet ke website - Chalet les pins
Thiet ke website - Chalet les pinsThiet ke website - Chalet les pins
Thiet ke website - Chalet les pins
 
Expo Beauty 2013 Exhibitors Presentation
Expo Beauty 2013 Exhibitors PresentationExpo Beauty 2013 Exhibitors Presentation
Expo Beauty 2013 Exhibitors Presentation
 
My speech 1
My speech 1My speech 1
My speech 1
 
The Relocation Expert Guide
The Relocation Expert GuideThe Relocation Expert Guide
The Relocation Expert Guide
 
32 skal att_bryta_monster-bookhouse_2010_
32 skal att_bryta_monster-bookhouse_2010_32 skal att_bryta_monster-bookhouse_2010_
32 skal att_bryta_monster-bookhouse_2010_
 
IRB Laws 2011
IRB Laws 2011IRB Laws 2011
IRB Laws 2011
 
Abridged prospectusv9
Abridged prospectusv9Abridged prospectusv9
Abridged prospectusv9
 

Ähnlich wie Presentación html5

Diseño en la web
Diseño en la webDiseño en la web
Diseño en la webMiguel Gea
 
Kumbia PHP Framework - Inicios, Presente y Futuro
Kumbia PHP Framework - Inicios, Presente y FuturoKumbia PHP Framework - Inicios, Presente y Futuro
Kumbia PHP Framework - Inicios, Presente y FuturoDeivinson Tejeda
 
Drupal Sevilla octubre SEO en Drupal
Drupal Sevilla octubre SEO en DrupalDrupal Sevilla octubre SEO en Drupal
Drupal Sevilla octubre SEO en DrupalRojomorgan
 
Drupal Summer Barcelona 2016: Buenas prácticas SEO en Drupal 8 sin morir en e...
Drupal Summer Barcelona 2016: Buenas prácticas SEO en Drupal 8 sin morir en e...Drupal Summer Barcelona 2016: Buenas prácticas SEO en Drupal 8 sin morir en e...
Drupal Summer Barcelona 2016: Buenas prácticas SEO en Drupal 8 sin morir en e...Rojomorgan
 
DESARROLLO RAPIDO DE APLICACIONES WEB
DESARROLLO RAPIDO DE APLICACIONES WEBDESARROLLO RAPIDO DE APLICACIONES WEB
DESARROLLO RAPIDO DE APLICACIONES WEBJavier Condori Flores
 
Web20
Web20Web20
Web20UJAP
 
Analisis seo.ppt2
Analisis seo.ppt2Analisis seo.ppt2
Analisis seo.ppt2Maribel_kar
 
Web browsers and semantic metadata
Web browsers and semantic metadataWeb browsers and semantic metadata
Web browsers and semantic metadataMartin Coronel
 
Cómo configurar el seo de tu drupal
Cómo configurar el seo de tu drupal  Cómo configurar el seo de tu drupal
Cómo configurar el seo de tu drupal Hiberus Tecnologia
 
Curs 2.8. Utilización Automatizada de Datos Publicos (1)
Curs 2.8. Utilización Automatizada de Datos Publicos (1)Curs 2.8. Utilización Automatizada de Datos Publicos (1)
Curs 2.8. Utilización Automatizada de Datos Publicos (1)Iniciativa Barcelona Open Data
 
La importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoLa importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoAptitud Emprendedora
 

Ähnlich wie Presentación html5 (20)

Diseño en la web
Diseño en la webDiseño en la web
Diseño en la web
 
Kumbia PHP Framework - Inicios, Presente y Futuro
Kumbia PHP Framework - Inicios, Presente y FuturoKumbia PHP Framework - Inicios, Presente y Futuro
Kumbia PHP Framework - Inicios, Presente y Futuro
 
Drupal Sevilla octubre SEO en Drupal
Drupal Sevilla octubre SEO en DrupalDrupal Sevilla octubre SEO en Drupal
Drupal Sevilla octubre SEO en Drupal
 
Full-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScript
Full-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScriptFull-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScript
Full-stack JavaScript: Desarrollo integral de aplicaciones Web con JavaScript
 
Drupal Summer Barcelona 2016: Buenas prácticas SEO en Drupal 8 sin morir en e...
Drupal Summer Barcelona 2016: Buenas prácticas SEO en Drupal 8 sin morir en e...Drupal Summer Barcelona 2016: Buenas prácticas SEO en Drupal 8 sin morir en e...
Drupal Summer Barcelona 2016: Buenas prácticas SEO en Drupal 8 sin morir en e...
 
HTML5
HTML5HTML5
HTML5
 
SimpleSAMLphp
SimpleSAMLphpSimpleSAMLphp
SimpleSAMLphp
 
DESARROLLO RAPIDO DE APLICACIONES WEB
DESARROLLO RAPIDO DE APLICACIONES WEBDESARROLLO RAPIDO DE APLICACIONES WEB
DESARROLLO RAPIDO DE APLICACIONES WEB
 
Analisis seo
Analisis seoAnalisis seo
Analisis seo
 
Web20
Web20Web20
Web20
 
Analisis seo.ppt2
Analisis seo.ppt2Analisis seo.ppt2
Analisis seo.ppt2
 
Moviweb
MoviwebMoviweb
Moviweb
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Ruby on Rails
Ruby on RailsRuby on Rails
Ruby on Rails
 
Tutorial hacer un crud con prado
Tutorial hacer un crud con pradoTutorial hacer un crud con prado
Tutorial hacer un crud con prado
 
Web browsers and semantic metadata
Web browsers and semantic metadataWeb browsers and semantic metadata
Web browsers and semantic metadata
 
Cómo configurar el seo de tu drupal
Cómo configurar el seo de tu drupal  Cómo configurar el seo de tu drupal
Cómo configurar el seo de tu drupal
 
Curs 2.8. Utilización Automatizada de Datos Publicos (1)
Curs 2.8. Utilización Automatizada de Datos Publicos (1)Curs 2.8. Utilización Automatizada de Datos Publicos (1)
Curs 2.8. Utilización Automatizada de Datos Publicos (1)
 
La importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoLa importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyecto
 

Kürzlich hochgeladen

De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETGermán Küber
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxPaolaCarolinaCarvaja
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfymiranda2
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfcastrodanna185
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx Emialexsolar
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...RaymondCode
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...OLGAMILENAMONTAEZNIO
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2montoyagabriela340
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSLincangoKevin
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfangelinebocanegra1
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfJoseAlejandroPerezBa
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.marianarodriguezc797
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfalejandrogomezescoto
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....Aaron Betancourt
 

Kürzlich hochgeladen (20)

De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docx
 
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura SilvaBEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdf
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx E
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdf
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdf
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.
 
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier FolchBEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....
 

Presentación html5

  • 1. HTML 5 He visto el futuro y está en el navegador 1
  • 2. Prólogo La web tiene un nuevo estándar que rompe la barrera entre HTML y el scripting HTML5 es el nuevo estándar universal, abierto y gratuito, para la elaboración de páginas web -HTML5 = HTML + CSS + Javascript -HTML 5 todavía está en fase de working draft. Aunque en 2014 se espera que sea recomendación de facto! -Es regulado por el WHATWG –Apple, Google, Mozilla y Opera- y el W3C -Gracias a los Polyfills ya no hay excusa para no empezar a hacer páginas web en HTML5 2
  • 3. Prólogo Un poco de historia HTML5 marca un punto de inflexión en el desarrollo del lenguaje de marcado 1991 - HTML 1994 – HTML 2 1996 – CSS 1 + Javascript 1997 – HTML 4 1998 – CSS 2 2000 – XHTML 1 2002 – Diseño web sin tablas 2005 - AJAX 2009 – HTML 5 + CSS 3 -LINKS: Regreso al pasado: http://onsoftware.softonic.com/regreso-al-pasado-internet-en-1997 3
  • 4. Web Semántica De la información al Conocimiento Trata de Añadir significado a la información para que lo entiendan las máquinas -agentes- y filtren la que es realmente útil para los usuarios. También implica el desarrollo de los propios agentes -Nuevas etiquetas estructurales -Marcado de datos -Nueva generación de Formularios -Más valores para el atributo rel 4
  • 5. Nuevas etiquetas estructurales Web Semántica Adiós a la divitis! HTML 5 proporciona un conjunto de etiquetas que definen con mayor claridad los bloques principales de contenido que componen un documento HTML El nuevo Doctype <!DOCTYPE html> Nuevas etiquetas: <command> <datagrid> <datalist> <details> <dialog> <embed> <eventsource> <figcaption> <figure> <footer> <header> <hgroup> <keygen> <mark> <menu> <meter> <nav> <output> <progress> <rp> <rt> <ruby> <section> <source> <summary> <time> 5
  • 6. Nuevas etiquetas estructurales Web Semántica Principales etiquetas estructurales -LINKS: -Principales etiquetas estructurales: http://www.ibm.com/developerworks/ssa/web/ library/wa-html5structuraltags/ Soporte global: 75,38% 6
  • 7. Marcado de datos Web Semántica -El marcado de datos es un paso más en la llamada web semántica para dar significado a los contenidos -Le dice a las máquinas -agentes de usuario- qué se describe exactamente en una determinada información Formatos de marcado: -RDFa -Microformatos -Microdatos… 7
  • 8. Marcado de datos Web Semántica Para el marcado estructurado de datos se puede utilizar microdatos, microformatos y RDFa -En vez de hacer elegir a los webmasters entre uno estos formatos, sería conveniente centrarse en uno solo -Un único formato mejoraría la consistencia de datos entre los distintos motores de búsqueda -Microdatos comparte la sencillez de los microformatos y la capacidad de ampliación de RDFa Por ejemplo, los Microdatos de Schema.org ya comienzan a mostrar fragmentos enriquecidos -rich snippets- para sus resultados: Los fragmentos enriquecidos permiten a los usuarios ver información y datos adicionales de su sitio en los resultados de búsqueda... busca Angry Birds en Google y compruébalo! 8
  • 9. Marcado de datos Web Semántica ¿Cuál elegir? Microdatos por su uso en schema.org y su aceptación por Google, Microsoft y Yahoo! 9
  • 10. Marcado de datos Web Semántica Elementos que incorporan los microdatos: itemscope, itemtype, itemid, itemref, itemprop <section itemscope itemtype="http:// enciclopediadecriaturas.com/criaturas#hobbits"> <h1 itemprop="name">Hobbits albos</h1> <p itemprop="desc">Los hobbits albos son los más altos -120 cm- y aventureros de entre los hobbits.</p> <img itemprop="img" src="hobbit.jpg" alt="" title="Hedral, hobbit albo"> </section> -LINKS: Schema: http://schema.org Create HTML with schema.org microdata: http://schema-creator.org/ 10
  • 11. Formularios Web Semántica Nueva generación de formularios! Se añaden pequeñas funcionalidades que antes precisaban Javascript -Nuevos elementos: meter, progress, output, keygen, datalist -Nuevos tipos de input: email, url, tel, search, number, range, color, date, time, datetime, month, week -Nuevos atributos: list, autofocus, placeholder, file multiple, pattern, autocomplete, max, min, step, required Y si le sumamos el poder de XMLHttpRequest 2: -El objeto FormData: crear y enviar formularios al vuelo -FILE API FileReader: Upload de archivos con barra de progreso 11
  • 12. Formularios Web Semántica <style> [required] { border-color: #88a; -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5); } :invalid { border-color: #e88; -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);+ } </style> <form> <label>Nombre: <input name="name" required></label> <label>E-mail: <input name="email" type="email" required></label> <label>URL: <input name="url" type="url"></label> <label>Comentario: <textarea name="comment" required></textarea></label> <input type="submit" value="Enviar"> </form> -LINKS: -XMLHTTPRequest 2 y El objeto FormData: http://www.html5rocks.com/en/ tutorials/file/xhr2/ -Div In To HTML5 - A Form of Mandness: http://diveintohtml5.info/forms.html -Soporte (detalles): http://wufoo.com/html5/ Soporte global: 53,13% 12
  • 13. Nuevos valores para el atriburo rel Web Semántica El nuevo HTML tendrá que ser un poco más descriptivo a la hora de definir el tipo de link al que estamos enlazando De eso se encarga el atributo rel: alternate, archives, author, bookmark, contact, external, feed, first, help, icon, index, last, licence, next, nofollow, noreferrer, pingback, prefetch, prev, search, stylesheet, sidebar, tag, up Nótese la importancia de rel de cara al SEO 13
  • 14. APIS de Javascript Las responsables de la magia -Tecnologías offline/storage Application Cache Web Storage IndexedDB -Comunicación y conectividad WebSockets Web Workers Notificaciones -Acceso al dispositivo Drag & Drop nativo Desktop Drag-In & Drag-Out Filesystem API Geolocalización Orientación del dispositivo Webcam y micro 14
  • 15. Tecnologías offline API Javascript No siempre la conexión a la red es fiable, pero las aplicaciones sí que tienen que serlo Imaginemos que un usuario está rellenando un formulario y pierde el acceso a la red o que la descarga de datos de nuestro móvil es limitada… 15
  • 16. Tecnologías offline API Javascript Las aplicaciones HTML5 pueden comenzar más rápido y trabajar incluso si no hay conexión a Internet, gracias a la caché de la aplicación, el almacenamiento local, bases de datos indexadas y las APIs de archivo Cuanta más información se maneje en local mejor rendimiento del sistema y más satisfactoria la experiencia del usuario Por supuesto, los datos son más vulnerables, y el usuario no puede acceder a estos desde varios clientes; por lo tanto, solo debería utilizarse para datos que no sean críticos 16
  • 17. Tecnologías offline API Javascript -AppCache: para guardar los archivos en local y acceder a ellos en modo offline en forma de URLs -IndexedDB para guardar datos estructurados en local y poder acceder y consultarlos -Web Storage para guardar pequeñas cantidades de información en formato de texto en el equipo -Los Eventos Offline, para detectar el estado de la conexión a la red 17
  • 18. Application Cache Tecnologías offline Fichero de configuración que permite guardar archivos en local -Para acceder a ellos cuando no hay conexión -Para optimizar la velocidad de carga -Hay que crear canales de sincronización de datos entre nuestras aplicaciones y la nube -El estándar HTML5 también incluye tecnologías para guardar los datos en el cliente -AppCache ofrece ventajas con respecto a la caché de HTTP Uso: Basta con crear un archivo MANIFEST -lista todos los archivos que necesitan ser cargados en la caché- y acceder al objeto window.applicationCache 18
  • 19. Application Cache Tecnologías offline AppCache es sólo una parte de las tecnologías offline de HTML 5 Tenemos que asegurarnos de que los datos cacheados siguen siendo relevantes y están actualizados. Como hemos dicho, para ello necesitamos crear canales de sincronización de datos entre nuestras aplicaciones y la nube Podemos hacerlo con WebSockets y XHR, que nos ofrecen una forma de sincronización, para finalmente guardarlos en una base de datos IndexedDB Esta técnica también se puede utilizar para subir al servidor la información guardada con Web Storage 19
  • 20. Application Cache Tecnologías offline Documento cache.appcache: CACHE MANIFEST # 08-04-2012:v2 CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Recursos que se requieren online NETWORK: login.php # FALLBACK, Declara archivos a utilizar por defecto en el caso de no encontrar el recurso solicitado FALLBACK: /main.php /offline.html img/large/ images/offline.jpg 20
  • 21. Application Cache Tecnologías offline El HTML: <html manifest="cache.appcache"> <script> window.applicationCache.addEventListener('updateready', function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { window.applicationCache.swapCache(); if (confirm('A new version of this site is available. Load it?')) { window.location.reload(); } } }, false); </script> -LINKS: -juego Web interactivo que funciona sin conexión: http://ie.microsoft.com/testdrive/HTML5/KidsBook/ -Recetas (Uso de AppCache e IndexedDB): http://ie.microsoft.com/testdrive/HTML5/Cookbook/ Soporte global: 59,88% 21
  • 22. Web Storage Tecnologías offline Almacenamiento de datos del lado del cliente. -Muy útil para almacenar pequeñas cantidades de datos (IndexedDB para almacenar grandes cantidades de datos complejos y estructurados) -Los datos son almacenados usando pares de clave/valor -Una forma mejor y más segura de almacenar información que el método tradicional de almacenamiento mediante cookies sessionStorage y localStorage: El almacenamiento por sesión es por ventana, y su tiempo de vida está limitado a lo que dure la ventana (o pestaña): sessionStorage Los datos alojados en un almacenamiento local son sólo accesibles por dominio y persisten cuando se cierra el navegador: localStorage. Soporte global: 88,29% 22
  • 23. Web Storage Tecnologías offline sessionStorage //Obtenemos el elemento que contiene el contenido del post var content = document.getElementById("content"); //Comprobamos si existe contenido guardado, lo cual indicaría un refresco de página accidental if (sessionStorage.getItem("autosave")) { content.value = sessionStorage.getItem("autosave"); } //Guardamos el contenido del elemento cada minuto setInterval(function() { sessionStorage.setItem("autosave", content.value); }, 1000*60); localStorage //almacenar el número de veces que un usuario ha visitado una página localStorage['www.tudominio.com'].setItem("visitas", parseInt(localStorage['www.tudominio.com'].getItem("visitas") || 0 ) + 1); 23
  • 24. IndexedDB Tecnologías offline API para almacenamiento avanzado de datos en la parte de cliente -Mecanismo de almacenamiento de grandes cantidades de datos estructurados -Provee de un acceso de alto rendimiento a los mismos, usando índices. -Está construido sobre un modelo de base de datos transaccional -Su API es mayormente asíncrona Sustituye a Web SQL Database, que ha sido declarada deprecated por la W3C. -LINK: IndexedDB: http://www.html5rocks.com/en/tutorials/indexeddb/todo/ Soporte global: 44,98% 24
  • 25. Comunicación & Conectitividad API Javascript -Web Workers -WebSockets -Notificaciones HTML 5 presenta una conectividad más eficiente entre cliente y servidor, lo que garantiza una mejor comunicación 25
  • 26. Binomio WebSockets/Server-Sent Events El servidor llama a tu puerta 26
  • 27. WebSockets Comunicación y conectividad HTML5 ofrece dos nuevos estándares de comunicación: Server-Sent Events y WebSockets. -WebSockets consiste en abrir un canal full-duplex permanente entre el servidor y el cliente aprovechando el protocolo TCP -Server-Sent Events se utiliza para mandar eventos directamente desde nuestro servidor al cliente de nuestra aplicación Este tipo de comunicación está pensado para aplicaciones que necesiten de mucha transferencia de datos en tipo instantáneo, como por ejemplo juegos online 27
  • 28. WebSockets Comunicación y conectividad ¿Pero, qué nos proporciona? -Reducción en el consumo de red y de procesamiento -Evolución en el desarrollo de aplicaciones RIA con HTML! Casos donde sería útil que el servidor pudiera comunicarse con el navegador sin que el cliente lo solicite necesariamente: -Web chats (como el de Facebook) -Trabajo colaborativo (Como el de Google Docs) -Sitios de subastas o sistemas para bolsas de valores, donde los datos hacen falta en tiempo real 28
  • 29. WebSockets Comunicación y conectividad Web Sockets es más rápido que HTTP HTTP fue diseñado para la transferencia de documentos, en realidad no está adecuado para las aplicaciones web modernas: -Naturaleza medio-dúplex: sólo se puede comunicar en una dirección a la vez, bien del cliente al servidor o del servidor al cliente -los paquetes HTTP vienen cargados con grandes cantidades de datos de cabecera, lo cual consume ancho de banda y requiere más trabajo de procesamiento WebSockets se adecúa mejor a la nuevas exigencias de la web -Podría abrir el paso a una nueva generación de aplicaciones web en tiempo real y latencia cero -Los ingenieros de Google importaron el QUAKE II para que corriera en el navegador usando WebSocket. Esto hubiera sido imposible usando HTTP 29
  • 30. WebSockets Comunicación y conectividad Uso de Web Socket: -Tecnologías offline -Video juego Quake II GWT en web -Acceso webcam y vídeo -LINKS: Web Sockets es más rápido que HTTP: http://bit.ly/HQisyn Aplicaciones web y móvil Realtime: http://pusher.com Soporte global: 54,47% 30
  • 31. Web Workers Comunicación y conectividad Esos currelas! La API Web Workers permite la ejecución de scripts en segundo plano (background) -Simulación del multiproceso -multi-threading- con javascript -Mejora del rendimiento de la aplicación y por consiguiente de la experiencia de usuario (antes, un proceso de larga duración podía colgar toda la ventana, bloqueando el thread de la interfaz de usuario) Y puesto que los Web Workers se ejecutan en threads independientes, el código debe ir en archivos independientes... 31
  • 32. Web Workers Comunicación y conectividad //ARCHIVO: curritos.js function messageHandler(event) { // Accede a los datos del mensaje enviado por la página principal var messageSent = event.data; // Prepara el mensaje que se va a devolver var messageReturned = "¡Hola, " + messageSent + ", los curritos te saludamos!"; // Publica el mensaje de vuelta en la página principal this.postMessage(messageReturned); } //Página web principal: manejador del mensaje de retorno <div id="output"></div> <script type="text/javascript"> //Instancia el Worker var myHelloWorker = new Worker(curritos.js'); myHelloWorker.addEventListener("message", function (event) { document.getElementById("output").textContent = event.data; }, false); // Inicializa el worker enviándole un primer mensaje myHelloWorker.postMessage("Netquet"); // Detiene el worker con el comando terminate() myHelloWorker.terminate(); </script> 32
  • 33. Web Workers Comunicación y conectividad Un worker no es más que una archivo .js que se encarga de una funcionalidad puntual (nótese que los workers no tienen acceso al DOM o a otros workers!) En la página principal, basta instanciar un objeto Worker, que se comunicará con el propio worker mediante mensajes 33
  • 34. Web Workers Comunicación y conectividad ¿Cuándo conviene utilizar Web Workers? -Cuando afecte a la experiencia de usuario: Manipulación de grandes cantidades de datos -En procesamiento de imágenes mediante el uso de datos extraídos de elementos <canvas> o <video> -Accesos simultáneos a una base de datos (con IndexedDB) -Siempre que no necesitemos el DOM, of course! Perfecto para Videojuegos! -Ejemplos: HTML Rocks: http://slides.html5rocks.com/#web-workers Utilización de varios web workers: http://nerget.com/rayjs-mt/ rayjs.html Soporte global: 57,33% 34
  • 35. Notificaciones Comunicación y conectividad El API de Notificaciones HTML5 permite mostrar notificaciones al usuario para determinados eventos 1-Verificar si hay soporte: window.webkitNotifications 2-Crear Notificación (dos tipos: texto plano y HTML): window.webkitNotifications.createNotification 3-Pedir permiso al usuario: window.webkitNotifications.checkPermission Casos: -Email nuevo -Nuevo twit -Eventos de calendario -LINK: HTML Rocks: http://slides.html5rocks.com/#notifications-api Soporte parcial: 27% 35
  • 36. Acceso al dispositivo API Javascript Integración con el Sistema Operativo! -Drag & Drop nativo -Desktop Drag-In -Desktop Drag-Out -Filesystem API -Geolocalización -Orientación del dispositivo -Webcam y micro 36
  • 37. Drag & Drop Nativo Acceso al dispositivo Una de las funcionalidades principales y más comunes de las interfaces gráficas actuales Evidentemente, precisa javascript (pero ya no se usará para hacer todo el proceso como antes, sólo parte de la funcionalidad en el manejo de eventos) 1-Comprobar compatibilidad: Modernizr.draganddrop 2-Crear contenido arrastrable: draggable=’true’ 3-Definir eventos: dragstart, drag, dragenter, dragover, dragleave, drop, dragend 37
  • 38. Drag & Drop Nativo Acceso al dispositivo 4-Otros: -El objeto datatransfer: ahora ya podemos enviar información junto al elemento arrastrado -Imagen fantasma: representación libre del objeto que está siendo arrastrado -Efectos drop: copiado, movimiento, enlazado, … -Ejemplo: -HTML5 Rocks: http://slides.html5rocks.com/#drag-and-drop -Gerifaltitos: http://bit.ly/HrCvcf (JQuery) Soporte global: 86,43% 38
  • 39. Desktop Drag-In & Drag-Out Acceso al dispositivo Más allá de todo esto, tenemos la posibilidad de transferir contenido entre aplicaciones web y con software de escritorio en general Desktop Drag-In & DragOut Habilita la funcionalidad de arrastrar de nuestro escritorio al navegador o del navegador a nuestro escritorio. -Ejemplo: Drag-In: http://slides.html5rocks.com/#drag-in Drag-Out: http://slides.html5rocks.com/#drag-out 39
  • 40. FILE API Acceso al dispositivo -Abrir archivos locales a través de input type -Obtener información de dicho archivo mediante la API javascript Esta solución nos permite presentar una miniatura de una imagen que se desee subir al servidor antes de enviarla o verificar el MIME de los archivos compatibles, y hasta su tamaño El caso más claro es el Upload de archivos múltiple! -Ejemplo: Múltiple Upload: http://robertnyman.com/html5/fileapi-upload/ fileapi-upload.html -LINK: The HTML5 FILE API for Upload: http://robertnyman.com/2010/12/16/utilizing-the-html5- file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/ Soporte global: 53,99% 40
  • 41. Geolocalización Acceso al dispositivo Con un poco de código podremos obtener la ubicación del usuario -La API de Geolocalización es un esfuerzo de la W3C para estandarizar una interfaz que recupere información geográfica de un dispositivo cliente -Ahora es el propio navegador el que detecta la latitud y longitud (A través del WIFI o GPS del dispositivo) ¡Ideal para aplicaciones web en dispositivos móviles! -La geolocalización es útil en sitios sociales para mostrar dónde se encuentra el usuario, y/o compartir imágenes o vídeos de dónde se encuentra (esta característica ya funciona con Google Maps) -También, dependiendo de dónde esté el usuario, podría mostrar una información diferente (MK´) 41
  • 42. Geolocalización Acceso al dispositivo Así de simple: 1-Detectamos que soporte la funcionalidad: navigator.geolocation 2-Recuperamos la posición del usuario: navigator.geolocation.getCurrentPosition mediante el objeto position 3-El navegador nos preguntará si deseamos compartir nuestra posición. ¡El usuario debe autorizarlo! 4-Dibujamos mapa (esto ya con la API de Google Maps): <script type="text/javascript" src="http:// maps.google.com/maps/api/js?sensor=false"></script> -Ejemplo: HTML Rocks: http://slides.html5rocks.com/#geolocation Soporte global: 70,4% 42
  • 43. Orientación del dispositivo Acceso al dispositivo La magia del acelerómetro y del giroscopio iPhone, iPads y la mayoría de los smartphones más modernos incorporan un acelerómetro y/o un giroscopio. También los macBook Las nuevas API de HTML5 permiten el uso de acelerómetros/giroscopios window.addEventListener('deviceorientation', function(event) { var a = event.alpha; var b = event.beta; var g = event.gamma; }, false); -Ejemplo: HTML Rocks: http://slides.html5rocks.com/#slide-orientation Imagen 360º: http://360.io/pt3dmqna Soporte global: 51,04% 43
  • 44. Acceso a webcam y micro Acceso al dispositivo videollamadas y videoconferencias de forma nativa Con HTML 5 podremos acceder directamente a los dispositivos de audio, video y cámaras fotográficas Servicios de videollamadas y videoconferencias utilizando únicamente el navegador web Será la etiqueta <device> la encargada de permitir al usuario dar acceso a la página a determinados dispositivos del equipo. Tendremos que esperar a que el usuario seleccione un dispositivo para darnos acceso API Media Capture: define las mejoras que tendrían que tener los formularios para proveer acceso a audio, imagen y captura de vídeo (todavía es un working draft) 44
  • 45. Acceso a webcam y micro Acceso al dispositivo Reconocimiento de voz con HTML 5: Speech input Este nuevo campo permite capturar la voz del usuario y escribir directamente en el campo de texto lo que dice, o también procesar directamente la voz (ej.: Google Translate) <input type="text" x-webkit-speech /> -Ejemplo: Transmisión grabaciones webcam entre 2 ordenadores: http://bit.ly/dzXsHo Speech Input: http://slides.html5rocks.com/#speech-input -LINK: HTML Media Capture specification: http://dev.w3.org/2009/dap/camera/ 45
  • 46. Gráficos ¿Estás listo para jugar al máximo nivel desde tu navegador y de forma nativa? Canvas: manipulación de mapa de bits SVG: gráficos vectoriales WebGL: el 3D en la web 46
  • 47. El elemento Canvas Gráficos Manipulación de mapa de bits -El elemento Canvas permite representar en pantalla imágenes, gráficos y formas geométricas de todo tipo. E incluso textos -El dibujo en el canvas se hace mediante el API Canvas 2D -El potencial de canvas reside en su habilidad para actualizar su contenido en tiempo real. -El canvas aprovecha las bondades de la aceleración de gráficos por hardware: Eficiencia y mayor rendimiento API Canvas 2D: Manipulación del contexto del canvas, manipulación de imágenes, manipulación de formas y colores, manipulación de líneas, textos y sombras, transformaciones y animaciones, control del ratón 47
  • 48. El elemento Canvas Gráficos <canvas id="canvas" width="838" height="220"></canvas> <script> var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext.stroke(); </script> -LINK: Guía del canvas: http://www.desarrolloweb.com/articulos/guia-canvas-html5- desarrolladores.html KineticJS (librería de JavaScript que extiende el contexto 2D para Canvas): http://www.kineticjs.com (ejemplos de gráficos y de código) 48
  • 49. Aceleración gráfica por hardware Gráficos ¡Desde el navegador! Cuando enviamos comandos de dibujo al canvas, los navegadores ya son capaces de entregarlos directamente al hardware de gráficos –GPU–, liberando a la CPU de trabajo, y por consiguiente, aumentando considerablemente el rendimiento Navegador: -Rendimiento muy superior (animaciones en tiempo real) -Experiencia de usuario mejorada, más intensa y gratificante -Ejemplos: Juego retro de Zombies mutantes hecho con el motor Impact JS y mostrado en el canvas de HTML5: http://www.mutantzombiemonsters.com/ CanvasDOOM: http://www.benjoffe.com/code/demos/canvascape/textures Soporte global: 72,96% 49
  • 50. SVG (Scalable Vector Graphics) Gráficos Dibujo vectorial SVG es un formato de gráficos vectoriales basado en XML 50
  • 51. SVG (Scalable Vector Graphics) Gráficos -Es independiente de la resolución de pantalla (puede escalarse la imagen sin perder resolución) -Como se basa en XML, el manejo de sus diferentes elementos y atributos es realmente fácil -Es mejor solución para animaciones complejas <svg> <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert('hello');"/> </svg> -Ejemplos: -Muchas de las imágenes que usa Wikipedia empiezan a estar ya en este formato -HTML5 Rocks: http://slides.html5rocks.com/#svg-example-slide -LINK: -Soporte (detalle): http://caniuse.com/#cats=SVG 51
  • 52. Gráficos ¿Canvas o SVG? Dibujo vectorial vs Mapa de bits… -Si quieres que el aspecto de tu sitio web sea independiente de la resolución de pantalla, altamente interactivo o es para ver e imprimir: SVG. -Si por el contrario, estás desarrollando un juego y quieres que los gráficos se muestren en pantalla a gran velocidad, o no quieres trabajar con XML: Canvas. -Idealmente, ambos elementos pueden funcionar juntos de forma complementaria a la perfección. -LINK: Elucubraciones sobre cuándo usar Canvas, SVG o ambos [EN]: http://blogs.msdn.com/b/ie/ archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspx 52
  • 53. Gráficos WebGL nos trae el 3D a la web Javascript no tiene límites! Especificación estándar que dota a los navegadores web de gráficos 3D sin necesidad de extensiones -El Canvas puede invocar el estándar WebGL -Permite crear figuras en 3D, dar iluminación y aplicar texturas -Permite movernos en un entorno 3D y aplicar eventos para poder tener interacción con teclado y mouse Desventajas: compatibilidad, rendimiento y seguridad. Está demasiado verde todavía -Compatibilidad navegadores -Necesidad de HW potente -La telefonía móvil (batería) 53
  • 54. Gráficos WebGL nos trae el 3D a la web -Ejemplos: El vuelo del navegante: http://videos.mozilla.org/serv/mozhacks/flight-of-the-navigator/ Giro de la Tierra y la Luna en HTML 5: https://cvs.khronos.org/svn/repos/ registry/trunk/public/webgl/sdk/demos/webkit/Earth.html Tron en HTML 5 y WebGL: http://cycleblob.com/ QUAKE II: http://media.tojicode.com/q3bsp/ -LINKS: Test navegación para HTML5 y WebGL: http://ie.microsoft.com/testdrive/performance/fishietank/ HTML5 y WEbGL test: http://helloracer.com/webgl/ ¿Queréis romper Google?: http://mrdoob.com/projects/chromeexperiments/ google_gravity/ (roto y todo podéis seguir usándolo) Funcionalidades destacadas WebGL: http://www.khronos.org/webgl/wiki/Demo_Repository Soporte global: 48,4% 54
  • 55. Gráficos WebGL nos trae el 3D a la web Caso de estudio: Quake II GWT en web: -WebSockets -Renderizado WebGL -Implementación GWT de Java -Web Storage (para salvar juego y preferencias) 55
  • 56. Multimedia Soporte multimedia estándar y nativo: ¡Adiós plugins! Podemos afrontar este punto como una guerra abierta con diferentes frentes: 1-Reproductor nativo vs reproductor basado en plugins: HTML 5 vs Flash 2-Tecnologías libres y abierta vs propietarias: Mozilla, Opera (y Google) vs Apple y Microsoft 3-Y propietarias vs propietarias: Apple vs Adobe -El problema de utilizar un reproductor de vídeo basado en plugins es que su contenido esta encerrado y oculto para el resto del documento -Disponer de elementos nativos en HTML supone la integración de los mismos con otras tecnologías del navegador, como JavaScript y CSS 56
  • 57. Multimedia Nuevas etiquetas Audio y Video: Dos de las claves de HTML 5 y del futuro de la web <audio id="audio" src="sound.mp3" controls> </audio> <video id="video" src="movie.webm" autoplay controls></video> Contenedores: Códecs Audio + Códecs Vídeo -OGG: Vorbis + Theora (Mozilla y Opera) -MP4: ACC + H.264 y mp3 + H.264 (Apple y Microsoft) -WebM: Vorbis + VP8 (Google) Soporte global: 70% 57
  • 58. Multimedia APIs de Audio Javascript para procesamiento y sintetización avanzada de audio en aplicaciones web Audio Data API -> Mozilla -Extiende <audio> y <video> -API basada en eventos Web Audio API -> Google -AudioContext y AudioNode -API a alto nivel -Ejemplos: Pocket Full Of HTML5 (Audio Data API): http://slidesha.re/xVXdSZ Real-time Audio analysis (Web Audio API): http://bit.ly/ux2smU 58
  • 59. Multimedia APIs de Audio WebRTC API -Proporcionar comunicación en tiempo real en la web -Escenarios: streaming y videoconferencia HTML Streams API -> Ian Hickson -Múltiples flujos multimedia en HTML5 -HTML MediaController API -Captura y grabación de audio y vídeo local MediaStream Processing API -API común que trata de aunar todas las anteriores 59
  • 60. Multimedia ¿Cuál elegir? Web Audio API: -Más eficiente -Más fácil de usar -Mayor cuota móvil/Tablet -Además, Google financia a Mozilla y no al revés ;) -Ejemplos: Plink (Web Audio API y Node.JS): http://labs.dinahmoe.com/plink/# Pirates loves daisies (juego): http://www.pirateslovedaisies.com -LINK: Web Audio API (W3C Editor´s Draft): http://bit.ly/rbKBR7 60
  • 61. Multimedia ¡Vídeo nativo en HTML! Stream de video con HTML5 (sin Flash ni Silverlight) Habrá que esperar un poco de tiempo, atendiendo a las ya conocidas razones de compatibilidad -Ejemplo: JPayer video: http://bit.ly/fHUSDg -LINKS: Convertidores de vídeo a otro formato: Media Converter: http://mediaconverter.org/ (online y gratuito) Miro Video Converter: http://www.mirovideoconverter.com/ Mediasource API: http://bit.ly/qnvqGa 61
  • 62. Multimedia ¡Vídeo nativo en HTML! <script> function fallo(e) { switch (e.target.error.code) { case e.target.error.MEDIA_ERR_ABORTED:alert('Has abortado el playback.'); break; case e.target.error.MEDIA_ERR_NETWORK: alert('Error en la red.'); break; case e.target.error.MEDIA_ERR_DECODE: alert('Problema de codificación.'); break; case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:alert('Formato no soportado o archivo no encontrado.'); break; default: alert('Ha ocurrido un error desconocido.'); break; } } </script> <video controls height="300" width="400" loop autoplay onerror="fallo(event)" > <source src="ejemplo_conversion.webmvp8.webm" type="video/webm" /> <source src="ejemplo_conversion.mp4" type="video/h264" /> <source src="ejemplo_conversion.theora.ogv" type="video/ogg" /> </video> Soporte global: 45,14% 62
  • 63. Multimedia Guerra de códecs Tecnologías libres y abiertas vs propietarias: Opera y Mozilla vs Apple y Microsoft Mozilla y Opera proponen  Theora (códec de vídeo libre), Vorbis (códec de audio libre) y el contenedor Ogg (también abierto) Apple condena a Adobe al ostracismo en la telefonía móvil y defiende su códec H.264 Microsoft, aunque más abierto que Apple, también apuesta por el H.264 El gigante Google apoya su códec abierto VP8 pero no le hace feos a H.264 63
  • 64. Multimedia Guerra de códecs O sea, que a estas alturas no está aclarado… -Corremos el riesgo de volver a las épocas de incompatibilidades a las que precisamente Flash puso fin -Es un riesgo para la web, dejar en manos de una única empresa privada el futuro de algo tan importante para el desarrollo de Internet como es el video 64
  • 65. Multimedia Guerra de códecs Tecnologías propietarias vs propietarias: Adobe vs Apple A estas alturas, Apple ya ha ganado la batalla: Adobe anunció que Flash ya no daría soporte a los móviles. Importante decisión, que no hubiera sido posible si Apple no hubiera podido contar con HTML5 para presionarlos Adobe, simplemente, va a dar herramientas a los desarrolladores para que puedan convertir el formato Flash a HTML 5 (Adobe AIR) 65
  • 66. Multimedia Guerra de códecs ¿Quién ganará esta batalla? Sin duda alguna, HTML5 ganará -en un futuro no demasiado lejano-, desplazando totalmente a Flash en lo que a desarrollo de juegos a través del navegador se refiere Dependerá del ritmo con que los navegadores vayan dando soporte a las nuevas características disponibles en HTML5. ¡Aunque ya sabemos lo complejo que es todo este mundo de las patentes y el código libre!¡sobre todo con la cantidad de navegadores, intereses y usuarios que hay implicados! 66
  • 67. Estilos CSS 3 Mira, mamá: ¡Sin javascript! -Selectores CSS -Gradientes -Webfonts -Sombras -TextWrapping -Imágenes borde -Columnas -Box Model -Stroke -Transiciones -Opacidad -Tranformaciones -HSL -Animaciones -Bordes redondeados -Uso de media query 67
  • 68. Estilos CSS 3 -Ejemplos: HTML5 Rocks: http://slides.html5rocks.com/#css3-title Efectos rollover CSS3: http://tympanus.net/codrops/ 2011/11/02/original-hover-effects-with-css3/ Efecto Matrix CSS3: http://girliemac.com/sandbox/ matrix.html -LINK: HTML5 snippets: http://html5snippets.com/ Soporte global: 68,39-94,03% 68
  • 69. Polyfills Parcheando navegadores prehistóricos Como hemos podido comprobar, hay un tema que nos aleja todavía de querer comprometernos con HTML5; sí, hablamos de la compatibilidad, y aquí veremos al menos una aproximación de cómo resolverlo... Por una parte, utilizaremos Modernizr, que es una biblioteca para detectar el soporte de los navegadores a las diferentes funcionalidades de HTML 5 <script src="modernizr.min.js"></script> Con Modernizr.load()podremos cargar Pollyfills 69
  • 70. Polyfills Y por otra, tenemos los Polyfills, que son bibliotecas Javascript que amplían las funcionalidades de los navegadores que no soportan las nuevas funcionalidades de HTML 5 Un polyfill es como un emulador que nos permitirá trabajar en clientes web antiguos de la misma forma que si fueran modernos Eso sí, utilizad los Pollyfills con cuidado, ya que pueden disminuir el rendimiento de los navegadores -LINKS: Herramienta para saber el nivel de soporte de HTML5 de tu navegador: http://html5test.com/ Guía de APIs y estilos CSS a poder usar en nuestras aplicaciones: http://html5please.com/ Excelente presentación sobre polyfills [EN]: http://addyosmani.com/polyfillthehtml5gaps/slides/#14 70
  • 71. Principales Polyfills Polyfills -HTML Shiv: Cada vez hay menos excusas para empezar a usar HTML5 en nuestros sitios! <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/ html5.js"></script> <![endif]--> -Google Chrome Frame: Complemento para IE, diseñado para sustituir el motor de renderizado de IE por el del Google Chrome (funciona con IE 6-9. Permite que sitios web programados adecuadamente sean mostrados de manera correcta bajo IE) <meta http-equiv="X-UA-Compatible" content="chrome=1" /> Esto hará que la página sea renderizada por Chrome para quien lo tenga instalado, sin afectar a los usuarios que no lo tengan 71
  • 72. Principales Polyfills Polyfills -HTML5Boilerplate: Es una robusta plantilla que nos ayuda a optimizar tanto el código como la compatibilidad y el rendimiento de carga de páginas HTML 5 -También incluye Mobile Boilerplate -Y constructor de proyectos que simplifica H5BP: Initializr -Selectivizr: Para compatibilizar atributos CSS3 y pseudo-clases en IE 6-8 <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="selectivizr.js"></ script> <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> <![endif]--> 72
  • 73. Principales Polyfills Polyfills -LINKS: Modernizr: http://modernizr.com/ HTML Shiv: http://code.google.com/p/html5shiv/ Google Chrome Frame: http://www.google.com/chromeframe?hl=es&quickenable=true HTML5Boilerplate: http://html5boilerplate.com/ Initializr (H5BP+Modernizr+JQuery): http://www.initializr.com/ Selectivizr: http://selectivizr.com/ La guía Todo-En-Uno –que ni está ordenada alfabéticamente ni es boba- de Planes B para HTML5: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills Las 15 APIs más populares de HTML5: http://www.htmlcinco.com/15-apis-de-html5/ 73
  • 75. Dispositivos móviles HTML5 será la web para los dispositivos móviles: tablets y smartphones Sin tardar demasiado será fundamental tener páginas web que se muestren correctamente y sean funcionales en cualquiera de los dispositivos en los que sean visualizadas Compatibilidad: -iOS 3.0+ -Android 2.0+ -BlackBerry smartphones 5.0+ -BlackBerry playbook 1.0+ -webOS 1.4+ -Symbian anna+ -Bada 2.0 -Windows phone mango+ 75
  • 76. Frameworks Dispositivos móviles ¿Qué tipo de aplicaciones podemos desarrollar para un móvil? -Aplicaciones no nativas basadas en el navegador móvil -Aplicaciones nativas (Objective C/Java) que acceden directamente al HW del móvil Frameworks para el desarrollo de aplicaciones web (no nativas) para dispositivos móviles en todas las plataformas -Todos utilizan HTML 5, CSS 3 y Javascript -Todos soportan varias plataformas 76
  • 77. Frameworks Dispositivos móviles JQuery Mobile y Sencha Touch son frameworks javascript que permiten desarrollar aplicaciones no nativas para el navegador del móvil con el mismo Look & Feel de las aplicaciones nativas PhoneGap y Titanium Appcelerator, lo que nos permiten es empaquetar nuestra aplicación web permitiendo su distribución en los diferentes sistemas de venta 77
  • 78. PhoneGap Dispositivos móviles Permite crear aplicaciones usando exclusivamente HTML5, CSS3 y Javascript y empaquetarlas para que sean compatibles con las principales plataformas móviles Provee una serie de bibliotecas desarrolladas en el lenguaje específico de cada plataforma (Objective-C para IOS, Java para Android, etc), que permiten acceder desde el código HTML 5 a las principales funcionalidades del dispositivo Al ser una página web, tenemos acceso al DOM y podemos usar frameworks como jQuery Mobile o cualquier otro Evidentemente, no tendrá todo el potencial de una aplicación nativa 78
  • 79. JQuery Mobile Dispositivos móviles Framework para el desarrollo de aplicaciones y sitios web optimizados para smartphones y tablets “Write less, do more” Podemos desarrollar una sola aplicación que funcione en las plataformas más populares de smarthphones y tablets (en vez de tener que escribir aplicaciones nativas para cada dispositivo móvil o sistema operativo) No es necesario que el programador reciba formación específica como Objective-C para iOS/iPhone o Java para Android, únicamente sabiendo HTML puede realizar el trabajo 79
  • 80. Dispositivos móviles Otras técnicas para garantizar la compatibilidad , consistencia y rendimiento de un sitio web: -Ajustes del área de visión o Viewport para evitar problemas de escala involuntaria <meta name="viewport" content="width=device-width; initial- scale=1.0; maximum-scale=1.0; user-scalable=0;"> -Favicons de múltiples resoluciones -Media queries, que permiten adaptar el sitio según tamaño y resolución del equipo Las media queries CSS3 modifican la estructura de la página en función del tamaño de la pantalla. Simplemente, redefinimos los estilos –al final del .css- para resoluciones muy grandes y para muy pequeñas (dispositivos móviles) 80
  • 81. Dispositivos móviles @media screen and (min-width:1200px){ img { max-width:1000px; } #container{ width:1100px; } header h1 a{ width:1100px; height:180px; background:url(imagen.jpg) no-repeat 0 0; } } @media screen and (max-width:600px){ img { max-width:290px; } #container{ width:auto; } header h1 a{ width:auto; } } 81
  • 82. Dispositivos móviles -LINKS: -W3C. Estándares para aplicaciones Web en móviles (Febrero 2012): http://www.w3.org/2012/02/mobile-web-app-state/ -Compatibilidad HTML5 en móviles y tablets: http://mobilehtml5.org/ -Aplicación web offline para dispositivos móviles con HTML 5: http://www.ibm.com/developerworks/web/library/wa-offlineweb/ Soporte global: 72,48% 82
  • 83. Epílogo Links y Agradecimientos -HTML5 rocks: http://slides.html5rocks.com/#landing-slide-Info -Ejemplos HTML5 y APIs relacionadas: http://robertnyman.com/html5/ -DIV In To HTML5: http://diveintohtml5.info/ -Soporte navegadores: http://caniuse.com/ -Pick an API: http://playground.html5rocks.com/ -Tabla periódica de los Elementos HTML5 (^^): http://joshduck.com/periodic-table.html -HTMLFácil: http://html5facil.com/ -10 cuentas de Twitter relacionadas con HTML5 para seguir: http://css3html5.com.ar/10-cuentas-de-twitter-para-seguir/ -BrowserQuest: http://browserquest.mozilla.org/ 83
  • 84. Caso de estudio Epílogo BrowserQuest: Juego de rol -masivo y multijugador- en línea de Mozilla -Las cosas que se ven en el navegador son alimentadas por Canvas -Los webSocket facilitan la comunicación con el servidor. El propio servidor está escrito en JavaScript y se ejecuta en varios servidores a través de Node.js* -Utiliza HTML5 Audio API para el sonido -Web Workers para cargar el mapa del juego al mismo tiempo que la página de inicio -localStorage para guardar el progreso del jugador -CSS3 Media Queries para asegurar que el juego se adapta a diferente tipos de ventana y tamaños de pantalla Más juegos en HTML5: http://bitelia.com/2012/02/8-juegos-geniales- desarrollados-en-html5 84
  • 85. Extra rare tracks ^^ Epílogo Node.js (servidor web) Node es un entorno JavaScript de lado de servidor que utiliza un modelo asíncrono y dirigido por eventos Lista de aplicaciones para las que Node encajaría perfectamente (mejor que Apache): -Juegos online -Gestores de correo online: de esta manera teniendo el navegador abierto podríamos ver notificaciones en tiempo real de nuevos correos recibidos -Herramientas de colaboración -Chats -Redes sociales: por ejemplo para actualizar automáticamente tu muro de novedades -Herramientas de traducción en tiempo real -LINK: El Libro para Principiantes en Node.js: http://www.nodebeginner.org/index-es.html 85
  • 86. Agradecimientos Epílogo -Tim Berners Lee -Richard Stallman -Linus Torvals -Jesús Conde -W3C -Netquest Espero que haya sido de su agrado. Saludos y hasta otra ;) 86

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n