Sombras y background

Crear una capa con un color de fondo y dos sombras exteriores de diferente color

Columnas

Añádele el código CSS a este HTML para que se visualice como en la imagen: tres columnas, una cabecera que ocupa todo el espacio, líneas separadoras entre columnas de color rojo y punteadas, espaciado entre el texto y el marco de 20px. Recuerda utilizar el prefijo –webkit en las propiedades para que se visualice correctamente

Transparencia

Crear tres capas como en la imagen usando transparencias para que puedan verse los colores de las capas inferiores

Transformaciones II

Crea un CSS para que la página web se visualice como en la imagen: la imagen con el texto alrededor, con un cierto margen de separación entre la imagen y el texto, y rotada

Transiciones

Crear una barra de menu con efectos utilizandos las transiciones

• Los elementos del menú aparecen alineados horizontalmente
• aspecto inicial:
• Fondo de color gris
• Espaciado entre el texto y el marco exterior de 5 px
• Enlaces no subrayados, texto de color blanco con sombra gris, tamaño large y fuente "Futura, Arial, sans-serif"
• Espaciado entre los vínculos de 20 px

Cuando se pasa el ratón por encima de un elemento de menú el comportamiento es el siguiente

• Aparece un borde redondeado alrededor del menú de 10 px de radio
• El color del texto cambia a negro y el color de fondo a blanco
• Estos cambios se realizan con una transición que dura un segundo de tipo "ease-in-out"

Maquetación de contenidos con flexbox

A partir del siguiente código HTML vamos a generar una hoja de estilo que permita una maquetación de contenidos flexible

La barra de navegación la maquetaremos utilizando la flexbox de forma que ocupe todo el espacio de la pantalla, y se reduzca o aumente conforme modifiquemos el tamaño del navegador. Los elementos de la barra de navegación tendrán distinto aspecto cuando se pase el ratón sobre ellos y cuando estén activos

En la parte central tendremos un área con contenidos maquetados también con una flexbox de forma que haya elementos que ocupen el doble espacio que otros, cuando están en una misma línea. También haremos que las secciones ocupen más de una línea

Dentro de cada sección las imágenes estarán centradas, también los botones centrados y ocupando el tamaño completo de la sección

Formularios: calcular el año de nacimiento

Vamos a realizar un formulario que nos permita convertir de calcular el año de nacimiento a partir de los años que cumples este año y a la inversa. El formulario tendrá el aspecto la imagen: cajas de entrada de texto de tipo numérico con bordes redondeados, con un texto de ayuda dentro de la caja y un botón para calcular. Cuando pulsas el botón de Calcular recoge el valor de las dos cajas y de aquella que tenga algún contenido realiza el cálculo correspondiente. Para que funcione correctamente podemos añadir el evento "onfocus" a las dos cajas y cuando se reciba el foco en cualquier de ellas se resetearán los contenidos que hubiera para que el usuario pueda escribir un nuevo valor

Vídeo en HTML5

Utilizar las funciones de HTML5 para integrar vídeo dentro de una página. Crear una página donde se inserte un mismo vídeo en diferentes formatos para que pueda ser visualizado en varias plataformas. El vídeo tendrá controles propios para su reproducción y cuando se finalice se reiniciará automáticamente de nuevo. Añadirle una imagen inicial que será la que aparezca cuando se cargue hasta que se inicie la reproducción

Vídeo con CSS

A continuación le añadiremos un estilo al vídeo. Para ello modificaremos la apariencia del vídeo creándole un marco con borde de algún color, esquinas redondeadas y con sombra (imagen 1). Además definiremos el aspecto de dicho marco cuando se sitúa el ratón sobre él (hover) poniéndoles una sombra de otro color

Vídeo con subtítulos

El formato .vtt nos permite crear subtítulos en un fichero de texto plano donde se pone una cabecera y a continuación se van añadiendo tramos de tiempo y el texto subtitulado que aparece

En HTML5 podemos añadir tracks de subtítulos a los vídeos. Crear un fichero de subtítulos propios para un vídeo y el código HTML5 para visualizarlo. Recordad que para que se visualicen los tracks es necesario subirlo a un servidor. Podéis utilizar alguno de los vídeos proporcionados para añadirle los subtítulos, o alguno propio

Audio con CSS

Insertar un audio en una página utilizando la etiqueta "audio" de HTML5. Definir el estilo de dicha etiqueta para que tenga una apariencia como en la imagen: un borde ancho, con estilo de borde "ridge", un color a elegir y un ancho del control de audio de 500 px

Controles de audio mediante el DOM

Crear una página web con cinco botones que permitan controlar la reproducción de un sonido

Los botones serán para: play, pausa, stop, aumentar volumen y disminuir volumen

Cuando se inicia la página el botón de play es el único activo. Cuando se pulsa el botón de play se activan los demás. Cuando se pulsa el botón stop se vuelven a desactivar todos excepto el play

Círculo centrado

Dibuja dentro de un canvas tres círculos concéntricos de diferentes colores, centrados en medio del canvas. Aplicad sombras a los objetos

Texto y coordenadas de ratón

Escribe el código HTML5 de una página que contiene una canvas con un color de borde rojo, esquinas redondeadas y grosor 2 px. Dentro de dicho canvas es posible pinchar con el ratón y se escribe un texto que nos dice las coordenadas donde hemos pulsado, ej: "Posicion 100 100". Dicho texto se dibujará con una fuente Arial, tamaño 20 px y alineación centrada. Para recoger las coordenadas de ratón tendrás que ponerle un parámetro de tipo "event" a la función que procese el click y recoger las coordenadas de ratón del objeto event

Círculos con interacción del ratón

Crea una aplicación que permite dibujar círculos de colores dentro del canvas. Las coordenadas del ratón al pulsar serán el centro del círculo y al soltar definirán el radio. Además, añade un elemento de formulario tipo "color" para seleccionar colores. El color elegido será el que se utilice para dibujar la siguiente figura. La línea externa del círculo siempre será de color negro

Modificación dinámica del DOM

En este ejercicio, partiendo de la plantilla básica  realizada, vamos a añadir nodos a la escena X3D de forma dinámica. Para ello se  añadirán botones donde elegir dos o tres tipos distintos de figuras básicas y el color

Será necesario crear las funciones javascript que modifiquen la escena añadiendo la  figura con el color elegido en una determinada posición de la escena. Para ello habrá  que usar las funciones de acceso al DOM

Animaciones

Añadirle a una escena una animación

Animaciones: La tierra girando

Hacemos la clásica animación de la tierra girando

Para realizar la escena se ha hecho lo siguente:

• Crear una escena con una esfera aplicándole una textura
• Definir una cierta velocidad de rotación y en que cada actualización de la escena modifica la posición en el eje Y

Animaciones con tween.js

Crear una interpolación sobre un objeto 3D cuando se pulse sobre él utilizando la librería tween.js

Dibujando con los datos

Dibujamos un diagrama de barras de diferente tamaño utilizando divs para ello

Utilización de SVG para dibujar figuras

Pintamos cículos en nuestra página con los datos cargados con d3

Utilización de SVG para dibujar figuras

Pintamos cuadrados en nuestra página con los datos cargados con d3

Actualización dinámica de los datos

Hasta ahora hemos utilizado datos que no se modifican dinámicamente. Vamos a cómo actualizar la visualización cuando los datos cambian.

A partir del ejemplo: ejemplo, realizamos las siguientes modificaciones:

• Actualiza en enlace a la biblioteca d3.js en la cabecera a la última versión de d3
• Crear un número de puntos aleatorio. Para ello crear una función javascript que llamaremos GenerarPuntos() a la que llamaremos donde sea necesario
• Añadir un botón HTML que al ser pulsado vuelva a generar los puntos aleatorios
• Una vez generados los puntos aleatorios por segunda vez se llamará a una función "update()" que actualizará los datos que se dibujan. Esto lo haremos sin la creación de puntos "enter" ni el "append" a la escena, ya que los objetos han sido creados y solo vamos a modificarlos

Ejes y escalas

Analizando el ejemplo: ejemplo

1. El ejemplo está implementado con la versión v3 de la biblioteca. Hazlo funcionar con la versión 5
• Actualiza en enlace a la biblioteca d3.js en la cabecera a la última versión de d3
• d3.scale.linear() ahora es d3.scaleLinear()
• d3.svg.axis().scale(xscale).orient("bottom").ticks(n) ahora es d3.axisBottom.scale(xscale).ticks(n). Igualmente el eje vertical será axisLeft
2. Desplaza el eje Y a la derecha
3. Modifica el tamaño de los círculos para que tengan un rango de radios más grande
4. Añade una etiqueta de texto con las coordenadas de cada punto con el formato (x,y), color rojo y 10 px de tamaño de fuente
5. Utiliza las escalas cromáticas (escala cromática) con los colores categorizados ya definidos en d3 para colorear los círculos por ejemplo con la escala "schemeAccent"

Ping pong

Juego del ping pong desarrollado en HTML5, CSS3 y JavaScript utilizando el canvas

Editor de escena 3D con X3DOM

Un editor básico de escenas 3D.

Para los gráficos 3D se usa X3DOM y mediante JavaScript y jQuery, se crean, modifican y se borran las fíguras dinámicamente.

Gráficos 3D sobre web con Three.js

Escena web en 3D en el que se interaccionará mediante Three.js

Características y dinámica de la escena:

• Se mostrará una escena con un tablero en forma de cajón compuesto por una base plana y 4 paredes con volumen. Los diferentes elementos que componen el tablero tendrán textura y estarán agrupados en la escena bajo un mismo nodo grupo.
• Sobre el tablero se irán lanzando desde el aire diferentes objetos: como mínimo podrán ser de tipo esfera, cilindro y cubo. Dichos objetos se lanzarán desde una cierta altura que será variable y con un color también variable. La configuración del tipo de objeto, color y altura se puede hacer desde un formulario o bien desde el código generando valores aleatorios. El lanzamiento del objeto podrá iniciarse bien desde un botón o desde una tecla de teclado.
• Cuando lanzamos un objeto este cae desde la altura prefijada hasta chocar con el tablero, produciéndose en ese momento un efecto de rebote. El rebote se debe hacer utilizando la biblioteca "Tween.js" vista en el boletín de ejercicios de clase.

Visualización de datos con d3.js

En esta práctica vamos a utilizar la librería d3.js para visualización de datos.

Partiendo del ejemplo, realizamos las siguientes modificaciones.

En el fichero json:

• Nodos que representan las personas de la familia con datos sobre su nombre, edad (actual o la que tenían al fallecer) y parentesco con el alumno como mínimo.
• Conexiones entre nodos que vincule padres con hijos, parejas de un matrimonio y hermanos entre sí.

En la representación visual:

• El tamaño de los círculos que representan los nodos dependerá de la edad.
• El color dependerá del parentesco.
• El grosor, tamaño y tipo de línea variará con la relación (matrimonios con líneas cortas y gruesas, hermanos con líneas discontinuas, padres-hijos con líneas continuas y más finas.
• Aparecerá un texto con el nombre de la persona situado sobre el círculo.