Capítulo 6. Formularios y API Forms.

Capítulo 7. API Canvas.

TALLER DE PÁGINAS WEB

Nombre:.
UNIVERSIDAD CIUDADANA | LICENCIATURA
Los formularios web son la interface más importante de todas las características de una página web, porque permiten
insertar datos, tomas decisiones, comunicar, y cambiar la manera en la que una aplicación se comporta.
El elemento <form> :
autocomplete: Sirve para completar formularios, puede tomar los valores on y off, pero su valor por defecto es on. Puede
ser implementado en <form> o <input>.
novalidate: Es exclusivo para elementos <form>, es un atributo booleano que establece si el formulario será validado por
el navegador o no.
formnovalidate: Es exclusivo para elementos de formulario individuales, es un atributo booleano que establece si el
elemento será validado por el navegador o no.
El elemento <input> :
<input> Puede cambiar sus características utilizando el atributo type (tipo) y determina la clase de entrada que es esperada
del usuario.
Tipo email: Valida la entrada como en el caso de una dirección de email
Tipo search: Brinda información al navegador sobre el propósito del campo búsqueda para presentar el formulario en la
página.
Tipo url: Valida la entrada como en el caso de una dirección web.
Tipo tel: Da información al navegador sobre el propósito del campo como el número telefónico.
Tipo number: Este tipo de campo valida la entrada como un número. Puede ser combinado con otros atributos (como min,
max y step) para limitar los números permitidos.
Tipo range: Genera un control en pantalla para la selección de números, la entrada es limitada por atributos como min,
max y step.
value establece el valor inicial para el elemento range.
Tipo date: Valida la entrada como una fecha en el formato año/mes/día.
Tipo month: Valida la entrada como una fecha en el formato año/mes.
Tipo week: Valida la entrada como una fecha en el formato año/semana donde el segundo valor es representado por una
letra W y el número de la semana.
Tipo time: Valida la entrada como una hora en la sintaxis hora:minutos:segundos, o también puede tomar otras sintaxis
como hora:minutos.
Tipo datetime: Valida la entrada como fecha y hora completa, incluyendo la zona horaria.
Tipo datetime-local: Valida la entrada como una fecha y hora completa, sin la zona horaria.
Tipo color: Valida la entrada como un valor de color.
Algunos tipos de campo requieren de la ayuda de otros atributos para mejorar su rendimiento o determinar la importancia
en la validación.
Atributo placeholder: Ofrece información que orientará al usuario sobre la entrada esperada, su valor puede ser una
palabra simple o un texto corto, y será mostrado como una marca de agua dentro del campo hasta que el elemento es
enfocado.
Atributo required: Declara al elemento como requerido para validación, es un atributo booleano que no dejará que el
formulario sea enviado hasta que una entrada para el campo sea provista.
Atributo multiple: Es un atributo booleano que permite ingresar múltiples valores en el mismo campo, los valores deben
ser separados por coma.
Atributo autofocus: Enfoca el elemento en el que se encuentra cuando la página es cargada.
Atributo pattern: Especifica una expresión regular contra la cual la entrada será validada.
Atributo form: Asocia el elemento al formulario, el valor provisto debe ser el valor del atributo id del elemento <form>.
Atributo list: Asocia el elemento con un elemento <datalist> para mostrar una lista de posibles valores para el campo, el
valor provisto tiene que ser el valor del atributo id del elemento <datalist>.
Nuevos elementos fueron incorporados en HTML con la intención de mejorar las posibilidades de los formularios.
Elemento <datalist>: Hace posible incluir una lista de opciones predefinidas que será mostrada en un elemento <input>
como valores sugeridos, la lista es construida con el elemento <option> y cada opción es declarada con los atributos value
y label. Esta lista de opciones está relacionada con un elemento <input> por medio del atributo list.
Elemento <progress>: Representa el estado en la evolución de una tarea, por ejemplo, una descarga.
Elemento <meter>: Representa una medida, como el tráfico de un sitio web.
Elemento <output>: Presenta un valor de salida para aplicaciones dinámicas.
Cuando queremos aplicar mecanismos complejos de validación debemos recurrir a nuevos recursos que están provistos
por APIs.
Los navegadores que soportan HTML5 suelen mostrar un mensaje de “error” cuando el usuario quiere enviar un
formulario con un dato invalido por lo que usa el siguiente método:
setCustomValidity(mensaje) Permite declarar un error y proveer un mensaje de error para un proceso de validación
personalizado, para poder anular el error, debemos llamar al método con una cadena de texto vacía como atributo.
checkValidity()Solicita al navegador iniciar el proceso de validación, activa el proceso de validación provisto por el
navegador sin la necesidad de enviar el formulario y este método retorna true (verdadero) si el elemento es válido.
Eventos
Evento invalid: Es disparado cuando un elemento inválido es detectado durante el proceso de validación.

pág. 2
Evento forminput: Es disparado cuando un formulario recibe la entrada del usuario.
Evento formchange: Es disparado cuando un cambio ocurre en el formulario.
Propiedades de la validación
valid Este estado es un estado de validación general, retorna true cuando ninguno de los estados restantes es true, es decir,
que el elemento es válido.
valueMissing Este estado es true cuando el atributo required fue incluido en el elemento y el campo está vacío.
typeMismatch Este estado es true cuando la entrada no es el valor esperado de acuerdo al tipo de campo, por ejemplo,
cuando se espera un email o una URL.
patternMismatch Este estado es true cuando la entrada no es un valor admitido por la expresión regular especificada con el
atributo pattern.
tooLong Este estado es true cuando el largo de la entrada es mayor que el valor especificado en el atributo maxlength.
rangeUnderflow Este estado es true cuando la entrada es menor que el valor declarado para el atributo min.
rangeOverflow Este estado es true cuando la entrada es mayor que el valor declarado para el atributo max.
stepMismatch Este estado es true cuando el valor declarado para el atributo step no corresponde con los valores en los
atributos min, max y value.
customError Este estado es true cuando un error personalizado fue declarado para el elemento.
willValidate: Detecta los elementos involucrados que no tienen que ser validados, como botones o campos ocultos.
La API canvas se encarga del aspecto grafico de una manera efectiva, permite dibujar, presentar gráficos, animar y
procesar imágenes y texto, y trabaja con el resto de especificaciones para crear aplicaciones o videojuegos en 2 y 3
dimensiones.
Elemento <canvas>: Genera un espacio rectangular y vacío en la pagina web, en el cual se mostrarán los resultados al
ejecutar los métodos provistos, es necesario especificar los atributos width y height.
Método getContext(contexto): Crea el contexto para el lienzo, puede tomar dos valores: 2d y 3d para gráficos en 2 y 3
dimensiones.
Para comenzar y manipular gráficos existe una lista de herramientas que brinda API y es extensa, desde la creación de
simples formas y métodos de dibujo hasta texto o sombras y transformaciones complejas.
Método fillRect(x, y, ancho, alto) Dibujará un rectángulo sólido directamente en el lienzo en la posición indicada por x, y
y el tamaño ancho, alto.
Método strokeRect(x, y, ancho, alto) Dibujará un rectángulo vacío, solo el contorno, directamente en el lienzo en la
posición indicada por x, y y el tamaño ancho, alto.
Método clearRect(x, y, ancho, alto) Borra un área en el lienzo usando una figura rectangular declarada por los valores de
sus atributos.
strokeStyle: Declara el color para el contorno de la figura.
fillStyle: Declara el color para el interior de la figura.
globalAlpha: Define la transparencia para todas las figuras dibujadas en el lienzo.
Gradientes
Método createLinearGradient(x1, y1, x2, y2) Crea un gradiente lineal para asignarlo a una figura como si fuese un color
usando la propiedad fillStyle, sus atributos solo especifican las posiciones de comienzo y final del gradiente, para declarar
los colores involucrados en el gradiente debe ser usado en combinación con addColorStop().
Método createRadialGradient(x1, y1, r1, x2, y2, r2) Crea un gradiente radial para asignarlo a una figura como si fuese un
color usando la propiedad fillStyle, el gradiente es construido por medio de dos círculos, los atributos solo especifican la
posición y radio de los círculos, para declarar los colores involucrados en el gradiente debe ser usado en combinación con
addColorStop().
Método addColorStop(posición, color) Usado para declarar los colores para el gradiente, el atributo posición es un valor
entre 0.0 y 1.0, usado para determinar dónde el color comenzará la degradación.
Un trazado es como un mapa siendo seguido por un lápiz, una vez que se declara, el trazado se envía al contexto y
dibujado de forma permanente en el lienzo. Este trazado puede incluir líneas rectas, arcos, rectángulos y más, con el fin de
crear figuras complejas.
Existen dos métodos para comenzar y cerrar un trazado:
Método beginPath()Es requerido para comenzar un nuevo trazado.
Método closePath()Puede ser usado al final de un trazado para cerrarlo, generará una línea recta desde la última posición
del lápiz hasta el punto donde el trazado comenzó, no es necesario usar este método cuando el trazado debe permanecer
abierto o es dibujado en el lienzo usando fill().
Método stroke() Es usado para dibujar un trazado como una figura vacía, solamente el contorno.
Método fill()Es usado para dibujar un trazado como figura sólida.
Método clip() Es usado para crear una máscara a partir de un trazado, todo lo que sea enviado al lienzo luego de que este
método es declarado será dibujado sólo si cae dentro de la máscara.
Método moveTo(x, y) Mueve el lápiz virtual a una nueva posición para continuar el trazado desde ese punto.
Método lineTo(x, y) Agrega líneas rectas al trazado desde la posición actual del lápiz hasta el punto indicado por los
atributos x e y.
Método rect(x, y, ancho, alto) Agrega un rectángulo al trazado en la posición x,y y con un tamaño determinado por ancho,
alto.

pág. 3
Método arc(x, y, radio, ángulo inicio, ángulo final, dirección) Agrega un arco al trazado, el centro del arco es determinado
por x e y, los ángulos son definidos en radianes, y la dirección es un valor booleano para determinar si el arco será
dibujado en el mismo sentido o el opuesto a las agujas del reloj, para convertir grados en radianes, use la fórmula:
Math.PI/180×grados.
Método quadraticCurveTo(cpx, cpy, x, y) Agrega una curva Bézier cuadrática al trazado, comenzando desde la posición
actual del lápiz y termina en el punto x,y, los atributos cpx y cpy especifican la posición del punto de control que dará
forma a la curva.
Método bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) Agrega una curva Bézier cúbica al trazado, comenzando desde la
posición actual del lápiz y termina en el punto x,y, los atributos cp1x, cp1y, cp2x, y cp2y especifican la posición de los
dos puntos de control que darán forma a la curva
lineWidth Determina el grosor de la línea, por defecto el valor es de 1.0 unidades.
lineCap Determina la forma de la terminación de la línea, puede recibir uno de los siguientes valores: butt, round y square.
lineJoin Determina la forma de la conexión entre dos líneas, los valores posibles son: round, bevel y miter.
miterLimit Determina cuanto la conexión de dos líneas será extendida cuando la propiedad lineJoin es declarada como
valor miter.
Font Tiene una sintaxis parecida a la propiedad Font de CSS y acepta los mismos valores.
textAlign Alinea el texto, existen varios valores posibles: start, end, left, right y center.
strokeText(texto, x, y, máximo) Dibuja un texto vacío, solo el contorno, directamente en el lienzo, el atributo máximo es
opcional y determina el máximo tamaño del texto en pixeles.
fillText(texto, x, y, máximo) Dibuja un texto sólido directamente en el lienzo, el atributo máximo es opcional y determina
el máximo tamaño del texto en pixeles.
measureText(texto) Calcula el tamaño del área que un texto ocupará en el lienzo usando los estilos vigentes, la propiedad
width se utiliza para retornar el valor.
shadowColor Declara el color de la sombra usando sitaxis CSS.
shadowOffsetX Recibe un número para determinar qué tan lejos la sombra estará ubicada del objeto en dirección
horizontal.
shadowOffsetY Recibe un número para determinar qué tan lejos la sombra estará ubicada del objeto en dirección vertical.
shadowBlur Produce un efecto de difuminación para la sombra.
translate(x, y) Mueve el origen del lienzo al punto x,y, la posición inicial del origen (0,0) es la esquina superior izquierda
del área generada por el elemento <canvas>.
rotate(angle) Es usado para rotar el lienzo alrededor del origen, el ángulo debe ser declarado en radianes, para convertir
grados en radianes, use la fórmula: Math.PI/180×grados.
scale(x, y) Cambia la escala del lienzo, los valores por defecto son (1.0, 1.0) y los valores provistos pueden ser negativos.
transform(m1, m2, m3, m4, dx, dy) Modifica la matriz de transformación del lienzo, la nueva matriz es calculada sobre la
anterior.
setTransform(m1, m2, m3, m4, dx, dy) Modifica la matriz de transformación del lienzo y reinicia los valores anteriores y
declara los nuevos.
save() Graba el estado del lienzo, incluyendo la matriz de transformación, propiedades de estilo y la máscara.
restore() Restaura el último estado del lienzo grabado, incluyendo la matriz de transformación, propiedades de estilo y la
máscara.
globalCompositeOperation
Esta propiedad determina como es posicionada una figura y combinada son figuras que se han dibujado anteriormente en
el lienzo, su valor defecto es source-over lo que significa que la figura nueva será dibujada sobre las que ya existen.
source-in Solamente la parte de la nueva figura que se sobrepone a las figuras previas es dibujada, el resto de la figura, e
incluso el resto de las figuras previas, se vuelven transparentes.
source-out Solamente la parte de la nueva figura que no se sobrepone a las figuras previas es dibujada, el resto de la
figura, e incluso el resto de las figuras previas, se vuelven transparentes.
source-atop Solamente la parte de la nueva figura que se superpone con las figuras previas es dibujada, las figuras previas
son preservadas, pero el resto de la nueva figura se vuelve transparente.
lighter Ambas figuras son dibujadas, pero el color de las partes que se superponen es obtenido adicionando los valores de
los colores de cada figura.
xor Ambas figuras son dibujadas, pero las partes que se superponen se vuelven transparentes.
destination-over Es el opuesto del valor por defecto, las nuevas figuras son dibujadas detrás de las viejas que ya se
encuentran en el lienzo.
destination-in Las partes de las figuras existentes en el lienzo que se superponen con la nueva figura son preservadas, el
resto, incluyendo la nueva figura, se vuelven transparentes.
destination-out Las partes de las figuras existentes en el lienzo que no se superponen con la nueva figura son preservadas,
el resto, incluyendo la nueva figura, se vuelven transparentes.
destination-atop Las figuras existentes y la nueva son preservadas solamente en la parte en la que se superponen.
darker Ambas figuras son dibujadas, pero el color de las partes que se superponen es determinado substrayendo los
valores de los colores de cada figura.
copy Solo la nueva figura es dibujada, las ya existentes se vuelven transparentes.

pág. 4
Solamente un método nativo ha sido provisto para trabajar con imágenes:
drawImage() Dibujará una imagen en el lienzo, puede recibir un número de valores que producen diferentes resultados
como:
drawImage(imagen,x,y) dibuja la imagen en la posición x,y.
drawImage(imagen,x,y,ancho,alto) dibuja la imagen en la posición x, y con un nuevo tamaño declarado por ancho,alto.
drawImage(imagen, x1, y1, ancho1, alto1, x2, y2, ancho2, alto2) toma una porción de la imagen original determinada por
x1,y1,ancho1,alto1 y la dibuja en el lienzo en la posición x2,y2 y el nuevo tamaño ancho2,alto2.
Existen diferentes métodos para procesar imágenes en API que también se pueden dibujar en el lienzo. Toda imagen
puede ser representada por una sucesión de números enteros representando valores rgba, este grupo de valores resultara en
un array unidimensional que puede ser utilizado para crear una imagen.
getImageData(x, y, ancho, alto) Toma una porción del lienzo y la graba como datos en un objeto, los valores del objeto
son accesibles a través de las propiedades width, height y data, las primeras dos propiedades retornan el tamaño de la
porción de la imagen tomada, y data retorna la información como un array con valores representando los colores de cada
pixel, este valor puede ser accedido usando la fórmula (ancho×4×y)+(x×4).
putImageData(datosImagen, x, y) Dibuja en el lienzo la imagen representada por la información en datosImagen.
createImageData(ancho, alto) Crea una nueva imagen en formato de datos, todos los pixeles son inicializados en color
negro transparente y puede tomar datos de imagen como atributo en lugar de ancho y alto, en este caso la nueva imagen
tendrá el tamaño determinado por los datos provistos.
Son adiciones que pueden mejorar los trazados, se puede agregar textura a las figuras utilizando una imagen, el
procedimiento es similar a la creación de gradientes.
createPattern(imagen, tipo) Crea un patrón desde una imagen que luego podrá ser asignado a una figura usando la
propiedad fillStyle, los valores posibles para el atributo tipo son repeat, repeat-x, repeat-y y no-repeat.
Las animaciones son creadas por el condigo JavaScript convencional, no existe algún método para ayudarnos a animar
figuras en los lienzos, tampoco existe un procedimiento para hacerlo.
clearRect() Limpia e lienzo para dibujar de nuevo, generando una animación con una sola función.
La única manera de mostrar un video es tomando cada cuadro del video desde el elemento <video> y dibujarlo como
imagen en el lienzo utilizando drawImage().
Presionar() Comienza y detiene la reproducción de video haciendo clic sobre el mismo.
procesarCuadros() Transforma todos los colores de cada cuadro del video en el correspondiente gris, lo que volverá el
video en blanco y negro.

pág. 5