Curso HTML5 práctico: Visualización de datos

Curso HTML5 práctico: Visualización de datos

Información de: Visualización de datos

En este curso de visualización de datos, vas a aprender la forma correcta de presentar datos en web, usando HTML5 avanzado.

Este curso está planteado en tres ejemplos prácticos de cómo generar contenidos HTML5 basados en datos. Trabajando siempre alrededor de la representación de información y pensando siempre en su vista en todo tipo de dispositivos, cada ejemplo se centrará en una tarea concreta: generación de una infografía que combine interactividad y animación y que responda correctamente a planteamientos de responsive design; creación de gráficas de calidad para la visualización de datos; y procesamiento de grandes cantidades de datos y las distintas posibilidades de uso de estos. Sigue cada ejemplo paso a paso y aprende a presentar datos en web usando HTML5 avanzado.

Ejemplo de infografía responsive. Primera fase de creación

En este workshop vamos a centrarnos en dos aspectos esenciales: aplicar animación e interactividad para añadir más información a la infografía y hacerla más atractiva, y hacer que funcione correctamente en todo tipo de dispositivos basándola en responsive design.
  • Descripción del proyecto de infografía responsive con HTML5   02:51
  • Creación de la estructura HTML de la infografía responsive   07:44
  • Estilos aplicados sobre la estructura base del HTML   04:20
  • Cabeceros de los elementos de la infografía   12:32
  • Control de la visualización de las partes de la infografía   04:49
  • CSS3 para animar el cambio de información y los contenidos   05:56
  • Control y animación de los contenidos desde la botonera   06:41

Infografía responsive. Creación de gráficos y animaciones

En este capítulo nos centraremos en los contenidos de cada apartado, organizando la posición de los elementos que componen las infografías y aplicando las animaciones de estos, adaptando todo ello a la vista móvil.
  • Organización de contenidos de la primera parte   05:19
  • Organizando los contenidos del resto de partes   03:25
  • Aplicación del sistema de animación con HTML5   08:06
  • Generación de animaciones en cascada en la infografía   08:33
  • Creación de animaciones de rotación en la tercera parte   03:18
  • Creando animaciones curvas para el segundo bloque   06:31
  • Organización de los contenidos en la vista móvil   06:40
  • Organización de contenidos y aplicación de las animaciones   05:39

Ejemplo de infografía de datos. Gráficas en tiempo real con HTML5

En este capítulo realizaremos una infografía basada en la simulación de resultados en tiempo real utilizando controles y actualización de datos y gráficas para mostrar datos con calidad y más comprensibles.
  • Descripción del proyecto de creación de infografía con HTML5   00:56
  • Descripción de las librerías para la infografía con HTML5   04:33
  • Incorporación de bibliotecas y estructura del proyecto   05:25
  • Aplicación de estilos CSS para organizar los contenidos   05:04
  • Adición de los componentes de formulario de la infografía   08:05
  • Pintando las gráficas de la infografía generada con HTML5   07:00
  • Adición de nuevas gráficas en la infografía   07:15

Infografía de datos en HTML5

En esta parte del ejemplo aplicaremos la interacción de los sliders a la generación de las gráficas, actualizando sus datos después de haber sido procesados con javascript.
  • Programación de la actualización de datos con HTML5   06:22
  • Generación dinámica de los datos de las tablas   08:25
  • Utilización de eventos de carga de las gráficas con HTML5   04:32
  • Modificación de CSS para la vista móvil   08:28

Ejemplo de infografía de temperatura

Vamos a crear una infografía en la que haremos hincapié en el procesamiento de los datos, guardándolos en CSV y Excel, además de mostrarlos en tiempo real creando nuestra propia gráfica mediante el empleo de canvas.
  • Descripción del proyecto de infografía de temperatura   01:25
  • Incorporación de bibliotecas y estructuración del proyecto   06:23
  • Maquetación con CSS de los elementos de la página   07:06
  • Recuperación de datos externos con HTML5   06:02
  • Creación de un widget jQuery UI   07:30
  • Dibujo de la gráfica con HTML5   11:07
  • Dibujo de curva y finalización del widget en la infografía   06:51
  • Widget para crear la tabla en la infografía de temperatura   10:13
  • Aplicación de un formato especial a las tablas   02:52

Infografía de temperatura. Almacenamiento de los datos

En este capítulo generaremos dinámicamente botones toggle y programaremos la descarga de gráficas y de archivos CSV con los datos recuperados desde el JSON.
  • Generando botones para los sensores   07:58
  • Captura de imagen de la gráfica y descarga de esta   02:40
  • Almacenamiento de los datos en HTML5   05:28
  • Modificación de los CSS para la vista móvil   04:13

Capturas:

Trailer:

Datos técnicos:

  • Formato: .FLV
  • Resolución: 1280x720p
  • Tamaño: 558 MB
  • Idioma: Español
  • Formadores: Jorge González Villanueva
  • Contenido: 39 Videos
  • Duración: 3:58 horas
  • Software: HTML, HTML 5
  • Archivos Base: Si contiene
  • Fecha de publicación: 09-dic-2015
  • Empresa: Video2Brain
HTML5.practico.Visualizacion.de.datos!
Atención! Usted no tiene permiso para ver este texto.... Primero debes Registrarte!
Esta es una imágen Magnet
Subido: RoBeRtS (16 Agosto 2017 16:40)
Administración: [Actualización]
Contraseña: www.descargasnsn.com | Tamaño: 558.04 Mb
Contenido:
HTML5.practico.Visualizacion.de.datos (3 Archivos)
file DescargasNsN.url (186 b)
txt Informacion del archivo.txt (11.78 Kb)
rar KJYY96G04GH57.rar (558.03 Mb)
Contraseña:
DescargasNsN
Página oficial:Enlace al artículo oficial

Si te gusta o te ayuda este artículo. Apoya a los desarrolladores comprando este material.

Artículo editado por: RoBeRtS - 16-08-2017, 16:33
Razón: Resubido...

Añadir comentario

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

Comentarios 141

  1. Offline
    exisyzeta 31 Agosto 2017 17:57
    + 0 -
    Muchas Gracias por compartir
  2. Offline
    Excelente aporte, hoy en día no tener algo de idea sobre html es un problema. Muchas gracias
  3. Offline
    mar_juy 30 Agosto 2017 13:24
    + 0 -
    Estupendo aporte. Muchas gracias.
  4. Offline
    willyuio 28 Agosto 2017 11:08
    + 0 -
    Muchisimas gracias!!!!
  5. Offline
    c0d3r00t 27 Agosto 2017 23:37
    + 0 -
    muchisimas gracias
  6. Offline
    kezman 27 Agosto 2017 18:04
    + 0 -
    muchisimas gracias!!
  7. Offline
    jomarulu 26 Agosto 2017 20:11
    + 0 -
    A aprender visualización de datos html5, muchas gracias
  8. Offline
    zangolotina 26 Agosto 2017 14:44
    + 0 -
    Muy instructivo. Muchísimas gracias por compartir.
  9. Offline
    kamistama 26 Agosto 2017 03:57
    + 0 -
    gracias por este gran aporte
  10. Offline
    angel05121971 21 Agosto 2017 22:53
    + 0 -
    Gracias muchachos son lo máximo.
    --------------------
    Ángel A. Alvarez
  11. Offline
    MasterArepa 21 Agosto 2017 00:01
    + 0 -
    Descargando, gracias
  12. Offline
    tsakowi 19 Agosto 2017 23:18
    + 0 -
    Gracias por tan excelente curso.
    --------------------
    Audite su red, antes que los chicos malos lo hagan.
  13. Offline
    CYBERTEC 19 Agosto 2017 16:57
    + 0 -
    Gracias por compartir
  14. Offline
    data24 19 Agosto 2017 06:21
    + 0 -
    Gracais por el aporte
  15. Offline
    Huésped Dennis
    Huésped Dennis 19 Agosto 2017 05:43
    + 0 -
    no me cogela clave. que estoy eswcribiendo mal
  16. Offline
    rafagarcia819 19 Agosto 2017 03:25
    + 0 -
    Gran aporte señores
  17. Offline
    bebefrank 19 Agosto 2017 01:59
    + 0 -
    Muchas gracias
  18. Offline
    cotcho 19 Agosto 2017 00:06
    + 0 -
    gracias por el aporte
  19. Offline
    sysvic 18 Agosto 2017 23:23
    + 0 -
    Gracias por el aporte.
  20. Offline
    GonzaloGx 18 Agosto 2017 22:20
    + 0 -
    muchas gracias
  21. Offline
    eroyeral 18 Agosto 2017 22:02
    + 0 -
    excelente complemento para los otros cursos de html
  22. Offline
    PopeMachine 18 Agosto 2017 21:55
    + 0 -
    Muchas gracias por el aporte.
    Saludos.
  23. Offline
    al3xyn10r 18 Agosto 2017 20:42
    + 0 -
    Gracias muy bueno
  24. Offline
    sandrarom 18 Agosto 2017 18:35
    + 0 -
    Muy Interesante. Muchísimas Gracias!!!!! wink
  25. Offline
    Ricard300 18 Agosto 2017 18:30
    + 0 -
    muchas gracias
    --------------------
    "I accept chaos, I'm not sure whether it accepts me."
  26. Offline
    jeffry70 18 Agosto 2017 17:06
    + 0 -
    Otro buen aporte, saludos y muchas gracias.
  27. Offline
    yonidep 18 Agosto 2017 16:58
    + 0 -
    Mil gracias!!!
  28. Offline
    VIRGONET2018 18 Agosto 2017 01:13
    + 0 -
    Gracias por el aporte
  29. Offline
    basurapamisi 17 Agosto 2017 23:36
    + 0 -
    Gracias por compartir!!!
  30. Offline
    ibcalu 17 Agosto 2017 20:52
    + 0 -
    Gracias por compartir este gran material de aprendizaje
  31. Offline
    incognito300 17 Agosto 2017 19:47
    + 0 -
    Gracias por compartir este tipo de cursos...
    --------------------
    Gracias por Siempre
  32. Offline
    pedritos 17 Agosto 2017 16:19
    + 0 -
    Gracias por el aporte
  33. Offline
    falgri 17 Agosto 2017 15:16
    + 0 -
    Gracias por el curso
  34. Offline
    bug273 17 Agosto 2017 15:09
    + 0 -
    genial! gracias! sunglasses
  35. Offline
    bocha10 17 Agosto 2017 14:53
    + 0 -
    Excelente!
    Muchas gracias
    --------------------
    El eterno Bocha, la Leyenda que vino de Zárate
  36. Offline
    Chris Bows 17 Agosto 2017 14:51
    + 0 -
    Sstupendo, muchas graciass.
  37. Offline
    Donroa 17 Agosto 2017 14:50
    + 0 -
    Muchas gracias.... mediante ejemplos se aprende mejor....
  38. Offline
    yrobles 17 Agosto 2017 13:03
    + 0 -
    muchas gracias!!
  39. Offline
    Castle_24 17 Agosto 2017 12:39
    + 0 -
    muy útil, gracias por compartirlo!
  40. Offline
    zipi2010 17 Agosto 2017 12:03
    + 0 -
    gracias por el curso
  41. Offline
    porta 17 Agosto 2017 11:44
    + 0 -
    práctico gracias salu2
  42. Offline
    yirel 17 Agosto 2017 08:17
    + 0 -
    Gracias por el curso!
  43. Offline
    abdiel01 17 Agosto 2017 07:26
    + 0 -
    Gracias por el aporte.
  44. Offline
    Dignorah Polanco 17 Agosto 2017 07:04
    + 0 -
    Interesante curso, gracias por compartir.
  45. Offline
    andres_guk 17 Agosto 2017 04:32
    + 0 -
    Gran aporte como siempre, muchas gracias
  46. Offline
    kurosawa 17 Agosto 2017 03:29
    + 0 -
    Muchas gracias
  47. Offline
    kanami 17 Agosto 2017 02:52
    + 0 -
    Muchas gracias por el curso
  48. Offline
    cotcho 17 Agosto 2017 02:32
    + 0 -
    gracias por e3l aporte
  49. Offline
    joserra1977 17 Agosto 2017 02:15
    + 0 -
    gracias por el aporte
  50. Offline
    edwinlc 17 Agosto 2017 02:11
    + 0 -
    Muchas gracias