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:
Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.
0 comentarios:
Publicar un comentario