Nuevos elementos HTML5 (2 de 4)

Hace un par de días publicamos una introducción a HTML5 y cubrimos brevemente algunos de los contenidos que describiremos en esta serie. La publicación de hoy, que es la segunda en la serie de cuatro, analizará cómo usar seis de los nuevos elementos en HTML5: lienzo, artículo, audio, video, medidor y marca.

Tenga en cuenta que HTML5 no está exactamente listo para un uso generalizado, así que no cambie nada en su sitio todavía. Tenga la seguridad de que HTML5 estará disponible en breve, por lo que estos conceptos pueden resultar útiles en un futuro cercano.

El elemento lienzo

El elemento es un nuevo contenedor para gráficos. Tenga en cuenta que el lienzo es simplemente eso, un área donde se pueden colocar gráficos. El elemento debe contener solo dos atributos: ancho y alto. Aquí hay un ejemplo:

El dibujo real para este ejemplo se realiza en JavaScript. La clave para implementar los gráficos en su script es hacer referencia a un contexto a través del método getContext. Por ahora el único contexto al que puedes llamar es "2d". Piense en el contexto 2d como su plano de dibujo real (definido por el tamaño del lienzo HTML) que comienza en las coordenadas 0,0 (la parte superior izquierda de la pantalla). Para dibujar un elemento, primero debe decidir en qué coordenadas comenzará el elemento. Por ejemplo, si desea dibujar algo que tiene diez píxeles desde la izquierda y diez píxeles desde la parte superior, sus coordenadas son (10,10).

Hay varias formas de usar el contexto 2d para crear gráficos. Se admite todo, desde rectángulos simples hasta curvas y degradados. Para nuestros propósitos, lo haremos simple para que puedas comenzar. Aquí está el JavaScript, implementando los principios descritos anteriormente:

función draw () {var canvas = document.getElementById ("graphicsCanvas"); if (canvas.getContext) {var context = canvas.getContext ("2d"); context.fillStyle = "rgb (50,50,50)"; context.fillRect (20, 20, 150, 150); context.strokeRect (20, 20, 300, 300); }}

Si está utilizando un navegador compatible (Safari, Firefox u Opera), debería ver el siguiente resultado cuando combine el HTML y JavaScript que acabamos de ver.

Nuevamente, antes de hacer cualquier dibujo, recuerde implementar el contexto 2d o no verá ningún gráfico. En caso de que te estés preguntando qué diablos es esto? FillRect? se trata de basura, aquí hay una explicación rápida de la sintaxis de algunos de los métodos de dibujo.

Dibujando rectángulos

En primer lugar, debe saber que cuando ve cuatro números en el formato (0,0,0,0), esto representa (distancia desde la izquierda, distancia desde la parte superior, ancho, altura). Ahora veamos algunos ejemplos específicos de sintaxis:
fillStyle =? rgb (50, 50, 50); Determina el color del relleno.
fillRect (20, 20, 150, 150); Crea un simple rectángulo relleno.
strokeRect (20, 20, 150, 150); Crea un rectángulo trazado.
clearRect (20, 20, 150, 150); Crea un área transparente (un agujero)

Formas de dibujo

beginPath (); Inicia un camino
closePath (); Cierra un camino
moveTo (20, 20,); Levanta la pluma de dibujo y comienza en una nueva ubicación.
llenar (); Rellena la forma dibujada.
carrera (20, 20); Traza la forma dibujada.

¡Mucho más!

Para obtener más información sobre cómo dibujar con JavaScript y cómo utilizar el elemento del lienzo, consulte el tutorial de Mozilla.
Además, aquí hay una hoja de trucos de lienzo de Jacob Seidelin.

El elemento del artículo

El elemento del artículo es simplemente una forma de referirse a una publicación de blog, artículo de noticias, etc. dentro de su página. Aquí está la sintaxis:

<p> Título del artículo aquí Artículo </p>

Como puede imaginar, esto hará que sea muy fácil orientar y diseñar artículos en su CSS sin definir una clase.

Los elementos de audio y video

Al igual que el elemento del artículo, estos son simplemente contenedores que contienen contenido. Nuevamente, puede ver el beneficio inmediatamente cuando comienza a aplicarles estilo a CSS sin necesidad de clases personalizadas. Aquí está la sintaxis simple para cada uno (cualquier texto colocado entre corchetes solo se muestra en navegadores no compatibles):

¡Navegador no compatible!> Navegador no compatible!

Atributos de audio

Tanto los elementos de audio como de video contienen atributos importantes que debe conocer. Primero veamos aquellos para el elemento de audio (fuente: w3shcools).

<strong>reproducción automática (verdadero o falso)</strong> Si es verdadero, entonces el audio comenzará a reproducirse tan pronto como esté listo <strong>controles (verdadero o falso)</strong> Si es verdadero, al usuario se le muestran algunos controles, como un botón de reproducción. <strong>inicio (valor numérico)</strong> Define en qué parte del flujo de audio el reproductor debe comenzar a reproducirse. Por defecto, el audio comienza a reproducirse al principio. <strong>final (valor numérico)</strong> Define en qué parte del flujo de audio el reproductor debe dejar de reproducir. Por defecto, el audio se reproduce hasta el final. <strong>altura (píxeles)</strong> Establece la altura del reproductor de video. <strong>ancho (píxeles)</strong> Establece el ancho del reproductor de video. <strong>bucle (valor numérico)</strong> Define en qué parte del flujo de audio debe detenerse el bucle, antes de saltar al inicio del bucle. Por defecto son los valores del atributo final. <strong>inicio en bucle (valor numérico)</strong> Define dónde debe comenzar el bucle en el flujo de audio. Por defecto son los valores del atributo de inicio. <strong>playcount (valor numérico)</strong> Define cuántas veces se debe reproducir el clip de audio. El valor predeterminado es 1. <strong>cartel (url)</strong> La URL de una imagen para mostrar antes de que el video esté listo <strong>src (url)</strong> La URL del audio para reproducir.

Atributos de video

El elemento de video contiene todos los mismos atributos que el elemento de audio, así como 3 más (fuente: w3shcools).

<strong>altura (píxeles)</strong> Establece la altura del reproductor de video. <strong>ancho (píxeles)</strong> Establece el ancho del reproductor de video. <strong>cartel (url)</strong> La URL de una imagen para mostrar antes de que el video esté listo

El elemento metro

El elemento del medidor se puede usar para contener mediciones de cualquier tipo (porcentaje, puntaje, contador de días, etc.). Esta vez, antes de ver un ejemplo, vayamos directamente a los atributos (nuevamente, directamente desde w3shcools).

<strong>Número alto)</strong> Define en qué punto el valor de la medición se considera un valor alto <strong>bajo (número)</strong> Define en qué punto el valor de la medición se considera un valor bajo <strong>max (numero)</strong> Define el valor máximo. El valor predeterminado es 1 <strong>min (número)</strong> Define el valor mínimo. El valor predeterminado es 0 <strong>óptimo (número)</strong> Define qué valor de medición es el mejor valor. Si este valor es mayor que el valor del atributo "alto", significa que cuanto mayor sea el valor, mejor. Si este valor es más bajo que el valor del atributo "bajo", significa que cuanto más bajo, mejor. <strong>valor (número)</strong> Define el valor de la medida.

Los dos atributos especialmente importantes en este conjunto son max y min. El elemento metro puede solamente ser utilizado cuando la medición tiene un valor máximo y mínimo conocido. Eso no significa necesariamente que tenga que definir un máximo y un mínimo (podría usar el valor predeterminado), solo que debe tener en cuenta cuáles son. Aquí hay un ejemplo:

<p>¡Encontraste 25 de 50 o 50% de las palabras ocultas!</p>

Observe que para el primer elemento del medidor se requiere la especificación del mínimo y el máximo porque el rango estaba entre 0 y 50. Sin embargo, el segundo medidor usó el rango predeterminado de 1-100 porque los porcentajes por lo general caen en este rango.

El elemento de marca

El elemento final que echaremos un vistazo es. Simple en concepto, el elemento de marca se puede usar para resaltar una sección específica del texto para que sea más visible para el lector. Aquí hay un ejemplo:

<p>Un buen resaltador es difícil de encontrar.</p>

Ahora podemos usar la etiqueta de marca para apuntar fácilmente a la sección que queremos resaltar en nuestro CSS:

marca {fondo-color: amarillo; font-weight: negrita; }

El resultado es un texto agradable y resaltado que puede ver en un instante.

Conclusión

En resumen, cubrimos seis elementos nuevos de HTML5. Primero miramos el lona Elemento, que es un contenedor para una amplia variedad de elementos gráficos que puede crear utilizando una serie de funciones de JavaScript. Entonces aprendimos sobre la artículo Elemento, que representa una nueva forma de referirse al contenido externo. A continuación describimos cómo usar el audio y vídeo etiquetas junto con sus diversos atributos, así como también cómo etiquetar correctamente los valores que caen dentro de un rango específico usando el metro elemento. Finalmente, descubrimos cómo resaltar una parte específica del texto usando la marca elemento.

¡Espero que hayas aprendido tanto leyendo esto como yo escribiéndolo! Use los comentarios a continuación para hacer cualquier pregunta que pueda tener o comparta su propio conocimiento de HTML5. El siguiente artículo de esta serie es quizás el más importante porque veremos algunos elementos nuevos que representan algunos cambios semánticos serios en la estructura de los archivos HTML. ¡Así que vuelva pronto para ver cómo estará diseñando su HTML en los próximos años!