HTML5 Canvas

El elemento canvas HTML se utiliza para dibujar gráficos en una página web. El gráfico a la izquierda se crea con canvas. Se muestra cuatro elementos: un rectángulo rojo, un rectángulo de gradiente, un rectángulo multicolor, y un texto multicolor.

¿Qué es HTML Canvas?

El elemento canvas HTML se utiliza para dibujar gráficos, sobre la marcha, a través de secuencias de comandos (normalmente JavaScript). El elemento canvas es solamente un contenedor para los gráficos. Se debe utilizar una secuencia de comandos para llamar la realidad de los gráficos. Lona tiene varios métodos para trazar caminos, cajas, círculos, texto y añadir imágenes.

Ejemplos de Canvas

Un lienzo es un área rectangular en una página HTML. Por defecto, un lienzo no tiene borde y ningún contenido. El margen de beneficio se ve así:

Ejemplo básico de la canvas

Formularios en HTML5

Los elementos y atributos para formularios en HTML5 proveen un mayor grado de marcado semántico que en HTML4 y eliminan gran parte del tedioso trabajo de programar y diseñar que se necesitaba en HTML4. Las funcionalidades de los formularios en HTML5 brindan una experiencia mejor para los usuarios al permitir que los formularios tengan un comportamiento más consistente entre diferentes sitios web y al darle una devolución inmediata acerca de la información ingresada. También proveen esta experiencia a los usuarios que han deshabilitado javascript en sus navegadores.

El elemento input

tiene nuevos valores para el atributo type. search: El elemento representa una caja de búsqueda. Los saltos de línea son quitados del valor ingresado pero no se modifica ninguna otra sintaxis. tel: El elemento representa un control para editar un número de teléfono, porque los números teléfonicos varían ampliamente en el mundo. Puedes usar atributos como pattern y maxlength para restringir los valores ingresados en la caja. url: El elemento representa un control para editar una URL. Se quitan los saltos de línea y espacios en blanco antes y después del valor ingresados. email: El elemento representa una dirección de correo electrónico. Los saltos de línea se quitan automáticamente del valor ingresado. Puede ingresarse una direccón de correo no válida, pero el campo de ingreso sólo funcionará si la dirección ingresada satisface la producción ABNF 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) donde atext está definida en RFC 5322, sección 3.2.3 y ldh-str está definida en RFC 1034, sección 3.5.

también tiene nuevos atributos: list: El ID de un elemento datalist cuyo contenido, los elementos option, van a ser usados como ayudas y serán mostrados como propuestas en el área de sugerencias del campo input. pattern: Una expresión regular contra la que es verificado el valor del control, que puede ser usada con valores de type de text, tel, search, url y email. formmethod: Una cadena que indica qué método HTTP (GET, POST, PUT o DELETE) debe ser usado cuando se envía; sobrescribe el method del elemento form, si se define. El formmethod sólo se aplica cuando el type es image o submit, y, para los métodos PUT y DELETE, sólo funcionará con un destino que esté en el mismo dominio (política del mismo origen).

El elemento form

tiene un nuevo atributo: novalidate: Este atributo previene que el formulario sea validado antes del envío.

El elemento datalist

El elemento datalist representa la lista de elementos option como sugerencias cuando se llena un campo input. Puedes usar el atributo list en un elemento input para enlazar a un campo de ingreso específico con un elemento datalist determinado.

El atributo placeholder

El atributo placeholder en elementos input y textarea provee una ayuda a los usuarios acerca de qué debe ser ingresado en el campo. El texto introducido en el placeholder no debe contener «enters» o saltos de línea.

Sombras en CSS 3 con box-shadow

Crear sombras en CSS3 con el atributo box-shadow. Por fin podremos aplicar sombras a los elementos de la página, sin usar imágenes, Javascript ni nada extra, simplemente con un atributo de CSS 3.

CSS 3 supone una nueva revolución en el diseño web, aportando soluciones a muchas de las prácticas que utilizan los diseñadores para decorar las páginas web. Esto quiere decir que, muchas de las cosas que antes hacíamos con técnicas de diseño que requerían uso de imágenes, como las sombras o las esquinas redondeadas, a partir de ahora las vamos a poder especificar simplemente desde CSS.

Atributo box-shadow

El atributo box-shadow requiere varios valores para especificar las características de la sombra, como difuminado, separación de la sombra y la propia caja o color. La sintaxis es como esta: box-shadow: 5px -9px 3px #000; Por orden de aparición, los valores que se indican en box-shadow son:

Desplazamiento horizontal de la sombra: La sombra de un elemento suele estar un poco desplazada con respecto al elemento que la produce y su posición será en función del ángulo con el que llegue la luz. En el caso de este ejemplo el primero de los valores, 5px, quiere decir que la sombra aparecerá 5 píxeles a la derecha. Si la sombra quisiéramos que apareciera un poco hacia la izquierda del elemento original que la produce, pondríamos un valor negativo a este atributo. Cuanto más desplazamiento tenga una sombra, el elemento que la produce parecerá que está más separado del lienzo de la página.

Desplazamiento vertical de la sombra: El segundo valor que colocamos en el atributo box-shadow es el desplazamiento vertical de la sombra con respecto a la posición del elemento que la produce. Este valor es similar al desplazamiento horizontal. Valores positivos indican que la sombra aparecerá hacia abajo del elemento y valores negativos harán que la sombra aparezca desplazada un poco hacia arriba. En el caso del anterior ejemplo, con -9px estamos indicando que la sombra aparecerá desplazada 9 píxeles hacia arriba del elemento.

Difuminado: El tercer valor indica cuánto queremos que esté difuminado el borde de la sombra. Si el difuminado fuera cero, querría decir que la sombra no tiene ningún difuminado y aparece totalmente definida. Si el valor es mayor que cero, como en nuestro ejemplo 3px, quiere decir que la sombra tendrá un difuminado de esa anchura, 3 píxeles en el ejemplo.

Color de la sombra: El último atributo que se indica en el atributo box-shadow es el color de la sombra. Generalmente las sombras en el mundo real tienen un color negro o grisaceo, pero con CSS3 podremos indicar cualquier gama de color para hacer la sombra, lo que nos dará bastante más versatilidad a los diseños gracias a la posible utilización de sombras en distintos colores, que puedan combinar mejor con nuestra paleta. En el ejemplo anterior habíamos indicado una sombra con color negro.

Compatibilidad de las sombras CSS con navegadores

Lo cierto es que las CSS 3 todavía están en fase de especificación, aunque ya se encuentran muy avanzadas y los navegadores más modernos ya han comenzado a implementarlas. No obstante, el W3C todavía no ha liberado las especificaciones de esta versión de las Hojas de Estilo en Cascada y hasta que empiece a recomendar su implementación los clientes web no tienen por qué entenderlas. Por el momento podemos utilizar box-shadow en las versiones más moderas del navegador Opera. Por su parte, navegadores basados en Mozilla y WebKit tienen soporte a esta funcionalidad de CSS3, pero a través de unos atributos CSS con una ligera variación en su nombre. Atributo box-shadow para navegadores basados en Mozilla, como Firefox: De manera temporal, Firefox es capaz de interpretar el atributo -moz-box-shadow, por ejemplo:

-moz-box-shadow: 1px 1px 0px #090;

Atributo box-shadow para navegadores basados en WebKit, como Safari o Google Chrome: En estos momentos y de manera temporal, navegadores como Chrome o Safari entienden el atributo: -webkit-box-shadow, por ejemplo:

-webkit-box-shadow: 3px 3px 1px #fc8;

Como podremos imaginar, si deseamos ampliar al máximo la compatibilidad con box-shadow, necesitaríamos indicar tanto el propio atributo box-shadow (que funciona en Opera y en el futuro funcionará en todos los navegadores), así como -moz-box-shadow y -webkit-box-shadow para que funcione en las versiones actuales de Firefox, Safari, Chrome, etc.

Ejemplos de Sombras CSS3

Ahora veamos varios ejemplos de sombras creadas directamente con CSS 3 y el atributo box-shadow, con sus variantes para compatibilidad temporal en los navegadores Mozilla o WebKit.

#cajasombra{

background-color: #ddd;

width: 300px;

padding: 10px;

box-shadow: 5px 5px 0 #333;

-webkit-box-shadow: 5px 5px 0 #333;

-moz-box-shadow: 5px 5px 0 #333;

}

Esto crearía una capa con un gris claro como color de fondo y una sombra desplazada abajo y a la derecha en 5 píxeles y sin difuminado. Además, hemos definido un color de sombra gris oscuro para el elemento.

#sombraclara{

width: 200px;

padding: 10px;

background-color: #999;

color: #fff;

box-shadow: 2px 2px 2px #ffc;

-webkit-box-shadow: 2px 2px 2px #ffc;

-moz-box-shadow: 2px 2px 2px #ffc;

}

Este otro ejemplo es para una sombra un poco menor, también desplazada hacia abajo y a la derecha y con un difuminado de 2 píxeles. Además hemos indicado un color amarillo claro para la sombra, por lo que, para verla bien, tendríamos que colocar este elemento sobre un fondo oscuro.

#sombraredondeada{

background-color: #090;

color: #fff;

width: 400px;

padding: 10px;

-moz-border-radius: 7px;

-webkit-border-radius: 7px;

box-shadow: 15px -10px 3px #000;

-webkit-box-shadow: 15px -10px 3px #000;

-moz-box-shadow: 15px -10px 3px #000;

}

En este tercer ejemplo tenemos un caso curioso de sombra, pues está aplicada sobre un elemento que tiene las esquinas redondeadas con CSS 3. Así pues, la sombra también debe tener las sombras redondeadas, para ajustarse al elemento que la produce. Ambos navegadores con compatibilidad a sombras y CSS 3 funcionan correctamente con sombras y bordes redondeados. Para acabar, ponemos un enlace a una página donde puedes ver los ejemplos de sombras en CSS 3. Ten en cuenta que debes probar estos ejemplos con Opera, Firefox, Safari o Chrome, que son los que actualmente soportan este atributo. Si deseas ampliar las informaciones y practicar más con este nuevo atributo de CSS3 para la realización de sombras, te recomendamos leer el artículo sobre cómo hacer un resplandor exterior con CSS 3.

JavaScript Funciones

Una función JavaScript es un bloque de código diseñado para realizar una tarea en particular. Una función de JavaScript se ejecuta cuando "algo" lo invoca (llama).

Ejemplo

function myFunction(p1, p2) {

return p1 * p2; // la función retorna la multilicación de p1 x p2

}

ejemplo completo

Sintaxis

Una función de JavaScript se define con la función de la palabra clave, seguido por un nombre , seguido de paréntesis () . Los nombres de funciones pueden contener letras, dígitos, guiones y símbolos de dólar (mismas reglas que las variables). Los paréntesis pueden incluir nombres de parámetros separados por comas: ( parámetro1, parámetro2, ... ) El código que se ejecuta, por la función, se coloca entre llaves: {}

function name(parameter1, parameter2, parameter3) {

code to be executed

}

Función parámetros son los nombres que figuran en la definición de función. Función argumentos son los verdaderos valores recibidos por la función cuando se invoca. Dentro de la función, los argumentos se comportan como variables locales.

Invocación de funciones

El código dentro de la función se ejecutará cuando "algo" invoca (llamadas) de la función:

1.Cuando se produce un evento (cuando un usuario hace clic en un botón)

2.Cuando se invoca (llama) de código JavaScript

3.De forma automática (auto invoca)

Retorno de la función

Cuando JavaScript alcanza una instrucción de retorno , la función dejará de ejecutarse. Si la función se invoca desde un comunicado, JavaScript será "volver" para ejecutar el código después de la sentencia de invocación. Funciones menudo calculan un valor de retorno . El valor de retorno es "devuelto" de nuevo a la "persona que llama":

Ejemplo

Calcular el producto de dos números, y devolver el resultado:

var x = myFunction(4, 3); // Function is called, return value will end up in x

function myFunction(a, b) {

return a * b; // Function returns the product of a and b

}

El resultado de x será:

12

ejemplo completo

¿Por qué funciones?

Puede volver a utilizar código: Definir el código una vez, y lo utilizan muchas veces. Se puede utilizar el mismo código muchas veces con diferentes argumentos, para producir resultados diferentes.

Ejemplo

Convertir Fahrenheit a Celsius:

function toCelsius(fahrenheit) {

return (5/9) * (fahrenheit-32);

}

document.getElementById("demo").innerHTML = toCelsius(77);

ejemplo completo

Funciones utilizadas como variables

Las funciones se pueden utilizar como valores de las variables en las fórmulas, las tareas y cálculos.

Ejemplo

Puedes usar:

var text = "The temperature is " + toCelsius(77) + " Celsius";

En lugar de:

var x = toCelsius(32);

var text = "The temperature is " + x + " Celsius";

Inténtalo tú mismo "

ejemplo completo

HTML Tablas

Ejemplo de tabla HTML

Definición de tablas HTML5

ejemplo completo

Las tablas se definen con el

table

Las tablas se dividen en filas de la tabla con el

tr

Las filas se dividen en datos de la tabla con el

td

Una fila de la tabla también puede dividirse en encabezados de la tabla con el

th

Nota Datos de la tabla

td

son los contenedores de datos de la tabla. Pueden contener todo tipo de elementos HTML como texto, imágenes, listas, otras tablas, etc.

Una tabla HTML con un atributo border

Si no se especifica un borde de la mesa, se mostrará sin fronteras. Una frontera puede añadirse utilizando el atributo border:

ejemplo completo

Para añadir bordes, utilice propiedad border CSS:

ejemplo completo

Una tabla HTML con bordes cerrados

Si desea que las fronteras se colapsen en una frontera, añadir CSS border-collapse :

ejemplo completo

Una tabla HTML con Relleno de celda

Relleno de la celda especifica el espacio entre el contenido celular y de sus fronteras. Si no se especifica un relleno, las celdas de la tabla se mostrarán sin relleno. Para establecer el relleno, utilice el relleno de CSS propiedad:

ejemplo completo

HTML encabezados de la tabla

Encabezados de la tabla se definen con la thetiqueta. Por defecto, todos los principales navegadores muestran encabezados de la tabla como negrita y centrado:

ejemplo completo

Una tabla HTML con espaciado de bordes

espaciamiento Border especifica el espacio entre las células.
Para establecer el espaciado de bordes para una tabla, utilice el CSS espaciado de borde propiedad:

ejemplo completo

Celdas de tabla que abarcan varias columnas

Para hacer un lapso celular más de una columna, utilice el colspan atributo:

ejemplo completo

Celdas de tabla que abarcan muchas filas

Para hacer un lapso celular más de una fila, utilice el rowspan atributo:

ejemplo completo

Una tabla HTML con un título

Para agregar un título a una tabla, utilice el captionetiqueta:

ejemplo completo