LIBROS GUIAS RAPIDAS CURSOS EN VIDEO
BOLETIN CONTACTO
HTML5 para Mentes Maestras
Cómo aprovechar HTML5 para crear sitios web adaptables y aplicaciones revolucionarias
2da Edición
ISBN: 978-1545169490
Comprar
Ejemplos
Escribir los ejemplos a mano ayuda a recordar lo que se aprende, pero a veces puede resultar una perdida de tiempo. Para acelerar el proceso de aprendizaje, puede descargar los códigos en archivos TXT o seleccionar el código que desea ver de la siguiente lista.
Descargar Ejemplos
234.0 KBytes
Capítulo 1 - Desarrollo Web
Listado 1-1: Creando un documento HTML
Listado 1-2: Declarando reglas CSS
Listado 1-3: Declarando código JavaScript
Listado 1-4: Declarando código ejecutable en el servidor
Capítulo 2 - HTML
Listado 2-22: El atributo pubdate fue removido del elemento <time> y ya no se encuentra disponible.
Listado 2-50: En el libro, olvidamos eliminar las etiquetas de cierre </label> al final de las etiquetas <input>. El código correcto se muestra a continuación.
Listado 2-1: Incluyendo la declaración <!DOCTYPE>
Listado 2-2: Incluyendo el elemento <html>
Listado 2-3: Incluyendo el elemento <head>
Listado 2-4: Incluyendo el elemento <body>
Listado 2-5: Incluyendo el elemento <title>
Listado 2-6: Incluyendo el elemento <meta>
Listado 2-7: Agregando información adicional con el elemento <meta>
Listado 2-8: Incluyendo el ícono del documento
Listado 2-9: Cargando un archivo CSS con el elemento <link>
Listado 2-10: Incluyendo el elemento <header>
Listado 2-11: Incluyendo el elemento <nav>
Listado 2-12: Organizando el contenido principal
Listado 2-13: Incluyendo el elemento <article>
Listado 2-14: Incluyendo el elemento <footer>
Listado 2-15: Identificando elementos con el atributo id
Listado 2-16: Identificando elementos con el atributo class
Listado 2-17: Incluyendo el elemento <h1>
Listado 2-18: Definiendo líneas de texto con el elemento <p>
Listado 2-19: Mostrando texto en su formato original
Listado 2-20: Agregando saltos de línea a un párrafo con el elemento <br>
Listado 2-21: Resaltando texto
Listado 2-22: Complementando el elemento <article>
Listado 2-23: Complementando el elemento <footer>
Listado 2-24: Presentando código con los elementos <code> y <pre>
Listado 2-25: Enlazando el documento a otros documentos con el elemento <a>
Listado 2-26: Enlazando el documento a documentos en otros sitios web con el elemento <a>
Listado 2-27: Abriendo un enlace en una nueva ventana
Listado 2-28: Creando enlaces a elementos en el mismo documento
Listado 2-29: Enviando un correo electrónico
Listado 2-30: Aplicando los atributos ping y download
Listado 2-31: Incluyendo una imagen en el documento
Listado 2-32: Reduciendo el tamaño de la imagen
Listado 2-33: Identificando la imagen con el elemento <figure>
Listado 2-34: Creando una lista de ítems sin orden
Listado 2-35: Creando una lista ordenada de ítems
Listado 2-36: Creando una lista en orden invertido
Listado 2-37: Creando una lista de términos y descripciones
Listado 2-38: Creando una lista con el elemento <blockquote>
Listado 2-39: Revelando información con los elementos <details> y <summary>
Listado 2-40: Creando una tabla
Listado 2-41: Creando una tabla con cabecera
Listado 2-42: Estirando celdas
Listado 2-43: Usando el atributo translate
Listado 2-44: Usando el atributo contenteditable para editar contenido
Listado 2-45: Definiendo un formulario con el elemento <form>
Listado 2-46: Incluyendo herramientas en un formulario
Listado 2-47: Asignando un título diferente para el botón Enviar
Listado 2-48: Declarando valores iniciales
Listado 2-49: Identificando elementos de formulario
Listado 2-50: Asociando etiquetas con elementos por medio del atributo for
Listado 2-51: Declarando el máximo número de caracteres permitidos
Listado 2-52: Solicitando tipos de entrada específicos
Listado 2-53: Restringiendo los números
Listado 2-54: Implementando el tipo range
Listado 2-55: Implementando el tipo radio
Listado 2-56: Implementando el tipo checkbox
Listado 2-57: Implementando el tipo date
Listado 2-58: Implementando el tipo color
Listado 2-59: Implementando el tipo image para crear un botón personalizado
Listado 2-60: Implementando el elemento <button> para crear un botón
Listado 2-61: Implementando el elemento <textarea>
Listado 2-62: Implementando el elemento <select>
Listado 2-63: Sugiriendo una lista de valores con el elemento <datalist>
Listado 2-64: Implementando el elemento <progress>
Listado 2-65: Implementando el elemento <meter>
Listado 2-66: Formularios con el método GET
Listado 2-67: Procesando los datos en el servidor con PHP (procesar.php)
Listado 2-68: Generando un documento HTML que incluye código PHP (procesar.php)
Listado 2-69: Implementando el atributo disabled
Listado 2-70: Implementando el atributo placeholder
Listado 2-71: Enviando un formulario sin validar con el atributo formnovalidate
Listado 2-72: Declarando una entrada email como campo requerido
Listado 2-73: Personalizando campos de entrada con el atributo pattern
Listado 2-74: Declarando un campo de entrada email como campo múltiple
Listado 2-75: Implementando el atributo autocomplete
Listado 2-76: Implementando el atributo autofocus
Listado 2-77: Desactivando el control de ortografía
Listado 2-78: Declarando elementos de formulario en una parte diferente del documento
Capítulo 3 - CSS
Listado 3-1: Declarando propiedades CSS
Listado 3-2: Declarando reglas CSS
Listado 3-3: Estilos en Línea
Listado 3-4: Incluyendo estilos en la cabecera del documento
Listado 3-5: Aplicando estilos CSS desde un archivo externo
Listado 3-6: Definiendo estilos CSS en un archivo externo
Listado 3-7: Heredando estilos
Listado 3-8: Sobrescribiendo estilos
Listado 3-9: Referenciando elementos <span> por su nombre
Listado 3-10: Declarando reglas con múltiples selectores
Listado 3-11: Combinando selectores
Listado 3-12: Probando selectores
Listado 3-13: Aplicando el selector >
Listado 3-14: Aplicando el selector +
Listado 3-15: Aplicando el selector ~
Listado 3-16: Referenciando por medio del valor del atributo id
Listado 3-17: Identificando un elemento <p> por medio de su atributo id
Listado 3-18: Referenciando por medio del valor del atributo class
Listado 3-19: Asignando estilos con el atributo class
Listado 3-20: Declarando una clase solo para elementos <p>
Listado 3-21: Referenciando solo elementos <p> que tienen un atributo name
Listado 3-22: Referenciando elementos <p> que tienen un atributo name con el valor mitexto
Listado 3-23: Aplicando selectores de atributo
Listado 3-24: Creando un documento para probar las pseudo-clases
Listado 3-25: Implementando la pseudo-clase :nth-child()
Listado 3-26: Cambiando el índice para afectar a un elemento diferente
Listado 3-27: Generando una lista con la pseudo-clase :nth-child()
Listado 3-28: Implementando las palabras clave odd y even
Listado 3-29: Usando :last-child para modificar el último elemento <p> de la lista
Listado 3-30: Aplicando estilos a todos los elementos excepto <p>
Listado 3-31: Definiendo una excepción por medio del atributo class
Listado 3-32: Probando propiedades de formato
Listado 3-33: Cambiando el tipo de letra y el tamaño del título
Listado 3-34: Cambiando el tipo de letra con la propiedad font
Listado 3-35: Alineando el texto con la propiedad text-align
Listado 3-36: Definiendo el espacio entre palabras con la propiedad word-spacing
Listado 3-37: Removiendo las líneas en los enlaces de nuestro documento
Listado 3-38: Cargando un tipo de letra personalizado para el título
Listado 3-39: Asignando un color al título
Listado 3-40: Asignando un color con la función rgb()
Listado 3-41: Asignando un color con la función hsl()
Listado 3-42: Asignando un ancho personalizado
Listado 3-43: Asignando una altura personalizada
Listado 3-44: Ocultando el contenido que desborda el elemento
Listado 3-45: Incorporando barras de desplazamiento
Listado 3-46: Agregando márgenes y relleno
Listado 3-47: Agregando un color de fondo
Listado 3-48: Agregando una imagen de fondo
Listado 3-49: Configurando el fondo
Listado 3-50: Configurando el fondo con la propiedad background
Listado 3-51: Agregando un borde a un elemento
Listado 3-52: Definiendo un borde con la propiedad border
Listado 3-53: Generando esquinas redondeadas
Listado 3-54: Declarando diferentes valores para cada esquina
Listado 3-55: Generando esquinas elípticas
Listado 3-56: Agregando un segundo borde a la cabecera
Listado 3-57: Creando un borde personalizado para la caja de la cabecera
Listado 3-58: Definiendo el borde con la propiedad border-image
Listado 3-59: Agregando una sombra a la cabecera
Listado 3-60: Agregando el valor de difuminado con la propiedad box-shadow
Listado 3-61: Expandiendo la sombra
Listado 3-62: Creando una sombra interna
Listado 3-63: Agregando una sombra al título
Listado 3-64: Agregando un gradiente lineal a la cabecera
Listado 3-65: Estableciendo la posición inicial
Listado 3-66: Creando un gradiente con una dirección de 30 grados
Listado 3-67: Creando un gradiente multicolor
Listado 3-68: Creando un gradiente translúcido
Listado 3-69: Configurando los puntos de comienzo y final de cada color
Listado 3-70: Creando un gradiente radial
Listado 3-71: Creando un gradiente radial multicolor
Listado 3-72: Aplicando un filtro a la cabecera
Listado 3-73: Escalando la cabecera
Listado 3-74: Creando una imagen espejo con la función scale()
Listado 3-75: Rotando la cabecera
Listado 3-76: Inclinando la cabecera
Listado 3-77: Moviendo la cabecera hacia la derecha
Listado 3-78: Moviendo, escalando y rotando el elemento con una sola propiedad
Listado 3-79: Aplicando un efecto tridimensional a la cabecera
Listado 3-80: Declarando un origen diferente para el espectador
Listado 3-81: Respondiendo al ratón
Listado 3-82: Creando una animación con la propiedad transition
Listado 3-83: Creando una animación compleja
Listado 3-84: Declarando más pasos para nuestra animación
Capítulo 4 - Diseño Web
Listado 4-1: Definiendo los elementos HTML5 como elementos Block
Listado 4-2: Probando la propiedad float
Listado 4-3: Flotando la imagen hacia la izquierda
Listado 4-4: Recuperando el flujo normal del documento con la propiedad overflow
Listado 4-5: Agregando un elemento vacía para aplicar la propiedad clear
Listado 4-6: Restaurando el flujo normal del documento con la propiedad clear
Listado 4-7: Creando un documento para probar la propiedad float
Listado 4-8: Flotando cajas a la izquierda
Listado 4-9: Reduciendo el tamaño del contenedor
Listado 4-10: Flotando las cajas a izquierda y derecha
Listado 4-11: Especificando la posición relativa de un elemento
Listado 4-12: Especificando la posición absoluta de un elemento
Listado 4-13: Especificando el índice z
Listado 4-14: Mostrando una etiqueta desplegable con información adicional
Listado 4-15: Configurando las cajas
Listado 4-16: Animando la etiqueta
Listado 4-17: Dividiendo artículos en columnas
Listado 4-18: Definiendo las columnas
Listado 4-19: Agregando una línea entre las columnas
Listado 4-20: Definiendo un documento para implementar el Modelo de Caja Tradicional
Listado 4-21: Implementando una regla de reseteado
Listado 4-22: Asignando estilos a la cabecera
Listado 4-23: Asignando estilos al área de navegación
Listado 4-24: Asignando estilos a las opciones del menú
Listado 4-25: Asignando estilos al contenido principal
Listado 4-26: Creando las columnas para el contenido principal
Listado 4-27: Configurando la posición y los estilos del elemento <time>
Listado 4-28: Asignando estilos a los artículos
Listado 4-29: Asignando estilos al pie de página
Listado 4-30: Calculando el tamaño de las secciones con valores en porcentajes
Listado 4-31: Agregando submenús
Listado 4-32: Asignando estilos a los submenús
Listado 4-33: Organizando cajas con un contenedor flexible
Listado 4-34: Convirtiendo al elemento cajapadre en un contenedor flexible
Listado 4-35: Convirtiendo a las cajas en cajas flexibles con la propiedad flex
Listado 4-36: Creando una distribución desigual
Listado 4-37: Combinando cajas flexibles con cajas inflexibles
Listado 4-38: Controlando cómo el elemento es encogido
Listado 4-39: Definiendo cajas flexibles con un tamaño preferido
Listado 4-40: Declarando un tamaño máximo
Listado 4-41: Invirtiendo la orientación de las cajas
Listado 4-42: Definiendo la posición de cada caja
Listado 4-43: Distribuyendo el espacio libre en un contenedor flexible
Listado 4-44: Distribuyendo el espacio vacío con la propiedad justify-content
Listado 4-45: Distribuyendo el espacio vertical
Listado 4-46: Estirando las cajas para ocupar el espacio vertical disponible
Listado 4-47: Alineando las cajas hacia el extremo superior
Listado 4-48: Alineando las cajas por la línea base
Listado 4-49: Cambiando la alineación del elemento caja-2
Listado 4-50: Creando dos líneas de cajas con la propiedad flex-wrap
Listado 4-51: Alineando múltiples líneas con la propiedad align-content
Listado 4-52: Definiendo un documento para aplicar el Modelo de Caja Flexible
Listado 4-53: Convirtiendo a la cabecera en un contenedor flexible
Listado 4-54: Convirtiendo al menú en un contenedor flexible
Listado 4-55: Convirtiendo las columnas en contenedores flexibles
Listado 4-56: Configurando el contenido
Listado 4-57: Convirtiendo al pie de página en un contenedor flexible
Capítulo 5 - Diseño Web Adaptable
Listado 5-1: Cargando estilos con Media Queries
Listado 5-2: Definiendo los estilos por defecto (adaptabletodos.css)
Listado 5-3: Definiendo los estilos para pantallas pequeñas (adaptablecelulares.css)
Listado 5-4: Declarando las Media Queries con la regla @media (adaptabletodos.css)
Listado 5-5: Incluyendo múltiples Puntos de Interrupción
Listado 5-6: Configurando el área de visualización con el elemento <meta>
Listado 5-7: Creando elementos flexibles con valores en porcentaje
Listado 5-8: Agregando márgenes y relleno a elementos flexibles
Listado 5-9: Incluyendo el relleno y el borde en el tamaño del elemento
Listado 5-10: Declarando columnas fijas y flexibles
Listado 5-11: Moviendo la columna fija a la izquierda
Listado 5-12: Creando un documento con dos columnas fijas
Listado 5-13: Definiendo dos columnas fijas a los lados
Listado 5-14: Declarando tamaños de letra relativos
Listado 5-15: Declarando tamaños relativos para los elementos y sus contenedores
Listado 5-16: Declarando tamaños relativos para los elementos con unidades rem
Listado 5-17: Adaptando el tamaño de las imágenes
Listado 5-18: Declarando un tamaño máximo para las imágenes
Listado 5-19: Seleccionando la imagen con el elemento <picture>
Listado 5-20: Seleccionando imágenes para diferentes resoluciones
Listado 5-21: Declarando el tamaño de una imagen de alta resolución
Listado 5-22: Declarando el máximo tamaño de una imagen de alta resolución
Listado 5-23: Incluyendo el elemento necesario para mostrar la imagen de fondo
Listado 5-24: Actualizando la imagen de fondo
Listado 5-25: Definiendo elementos flexibles con el Modelo de Caja Tradicional
Listado 5-26: Reposicionando el elemento <time>
Listado 5-27: Reorganizando las columnas
Listado 5-28: Creando un menú móvil
Listado 5-29: Agregando el botón del menú para pantallas pequeñas
Listado 5-30: Ocultando el botón del menú
Listado 5-31: Reemplazando el menú con el botón
Listado 5-32: Mostrando el menú cuando el botón es presionado
Listado 5-33: Mostrando el menú como un contenedor flexible
Listado 5-34: Diseñando un documento adaptable con el Modelo de Caja Flexible
Listado 5-35: Moviendo el elemento <time>
Listado 5-36: Pasando de un diseño de dos columnas a un diseño de una columna
Listado 5-37: Adaptando el menú y el pie de página
Capítulo 6 - JavaScript
Listado 6-1: Definiendo JavaScript en línea
Listado 6-2: Implementando múltiple atributos de evento
Listado 6-3: Respondiendo al evento load
Listado 6-4: Código JavaScript introducido en el documento
Listado 6-5: Introduciendo código JavaScript desde un archivo externo
Listado 6-6: Creando un archivo JavaScript (micodigo.js)
Listado 6-7: Declarando una variable en JavaScript
Listado 6-8: Usando el contenido de una variable
Listado 6-9: Asignando un nuevo valor a la variable
Listado 6-10: Asignando el valor de una variable a otra variable
Listado 6-11: Realizando una operación con el valor almacenado en una variable
Listado 6-12: Realizando operaciones complejas
Listado 6-13: Controlando la precedencia en la operación
Listado 6-14: Incrementando el valor de una variable
Listado 6-15: Incrementando el valor de una variable en un valor específico
Listado 6-16: Calculando el resto de una división
Listado 6-17: Determinando la paridad de un número
Listado 6-18: Asignando una cadena de caracteres a una variable
Listado 6-19: Concatenando texto
Listado 6-20: Agregando texto al comienzo del valor
Listado 6-21: Concatenando texto con números
Listado 6-22: Concatenando números
Listado 6-23: Escapando caracteres
Listado 6-24: Generando nuevas líneas de texto
Listado 6-25: Declarando una variable Booleana
Listado 6-26: Creando arrays
Listado 6-27: Mostrando los valores del array
Listado 6-28: Almacenando diferentes tipos de valores
Listado 6-29: Declarando valores indefinidos
Listado 6-30: Declarando el valor null
Listado 6-31: Trabajando con los valores del array
Listado 6-32: Definiendo arrays multidimensionales
Listado 6-33: Accediendo a los valores en arrays multidimensionales
Listado 6-34: Asignando un array vacío como el valor de otro array
Listado 6-35: Asignando un array vacío a una variable
Listado 6-36: Comprobando una condición con if
Listado 6-37: Invirtiendo el resultado de la condición
Listado 6-38: Comprobando múltiples condiciones con operadores lógicos
Listado 6-39: Usando valores Booleanos como condiciones
Listado 6-40: Usando números enteros como condiciones
Listado 6-41: Usando cadenas de caracteres como condiciones
Listado 6-42: Comprobando dos condiciones con if else
Listado 6-43: Comprobando un valor con la instrucción switch
Listado 6-44: Creando un bucle con la instrucción for
Listado 6-45: Iterando sobre los valores de un array
Listado 6-46: Usando la instrucción while
Listado 6-47: Usando la instrucción do while
Listado 6-48: Saltando hacia el siguiente ciclo del bucle
Listado 6-49: Interrumpiendo el bucle
Listado 6-50: Declarando funciones
Listado 6-51: Procesando datos con funciones
Listado 6-52: Declarando variables globales y locales
Listado 6-53: Declarando dos variables con el mismo nombre
Listado 6-54: Enviando un valor a una función
Listado 6-55: Llamando a la misma función con diferentes valores
Listado 6-56: Enviando el valor de una variable a una función
Listado 6-57: Enviando múltiples valores a la función
Listado 6-58: Retornando valores desde funciones
Listado 6-59: Retornando diferentes valores desde una función
Listado 6-60: Declarando funciones anónimas
Listado 6-61: Ejecutando funciones anónimas
Listado 6-62: Comprobando si un valor es un número o no
Listado 6-63: Convirtiendo una cadena de caracteres en un número
Listado 6-64: Codificando una cadena de caracteres para incluirla en una URL
Listado 6-65: Creando objetos
Listado 6-66: Accediendo propiedades
Listado 6-67: Accediendo propiedades usando variables
Listado 6-68: Accediendo propiedades con nombres inválidos
Listado 6-69: Actualizando valores y agregando nuevas propiedades a un objeto
Listado 6-70: Creando objetos dentro de objetos
Listado 6-71: Declarando y ejecutando métodos
Listado 6-72: Retornando valores desde métodos
Listado 6-73: Referenciando las propiedades del objeto con la palabra clave this
Listado 6-74: Usando un constructor para crear un objeto
Listado 6-75: Enviando valores iniciales al constructor
Listado 6-76: Usando constructores para crear múltiples objetos
Listado 6-77: Definiendo propiedades privadas
Listado 6-78: Creando objetos con el operador new
Listado 6-79: Definiendo valores iniciales para el objeto
Listado 6-80: Creando objetos a partir de otros objetos
Listado 6-81: Agregando un nuevo método al prototipo
Listado 6-82: Probando la cadena de prototipos
Listado 6-83: Creando números con un constructor
Listado 6-84: Creando números a partir de cadenas de caracteres
Listado 6-85: Realizando operaciones aritméticas con objetos
Listado 6-86: Creando un array con un constructor
Listado 6-87: Creando un array vacío con un constructor
Listado 6-88: Contando la cantidad de caracteres en una cadena
Listado 6-89: Iterando sobre los caracteres de una cadena
Listado 6-90: Removiendo espacios
Listado 6-91: Procesando una cadena de caracteres
Listado 6-92: Convirtiendo los caracteres de una cadena en letras mayúsculas
Listado 6-93: Copiando un grupo de caracteres
Listado 6-94: Copiando todos los caracteres desde un índice hasta el final de la cadena
Listado 6-95: Referenciando caracteres con índices negativos
Listado 6-96: Copiando caracteres entre dos índices
Listado 6-97: Obteniendo las palabras de una cadena
Listado 6-98: Buscando un texto al comienzo de la cadena
Listado 6-99: Buscando un texto dentro de otro texto
Listado 6-100: Encontrando la ubicación de un texto dentro de una cadena de caracteres
Listado 6-101: Reemplazando textos en una cadena de caracteres
Listado 6-102: Obteniendo la cantidad de valores en el array
Listado 6-103: Iterando sobre el array
Listado 6-104: Creando un array con los valores de otro array
Listado 6-105: Filtrando los valores de un array
Listado 6-106: Retornando una condición para filtrar los elementos
Listado 6-107: Evaluando los valores de un array
Listado 6-108: Creando una cadena de caracteres con los valores de un array
Listado 6-109: Obteniendo el índice de un valor en el array
Listado 6-110: Buscando múltiples valores en un array
Listado 6-111: Agregando valores a un array
Listado 6-112: Agregando múltiples valores a un array
Listado 6-113: Concatenando dos arrays
Listado 6-114: Removiendo valores de un array
Listado 6-115: Removiendo valores de un valor
Listado 6-116: Agregando valores a un array en una posición específica
Listado 6-117: Invirtiendo el orden de los valores de un array
Listado 6-118: Ordenando los valores en orden alfabético
Listado 6-119: Ordenando los valores en orden numérico
Listado 6-120: Procesando los valores y almacenando los resultados
Listado 6-121: Creando un objeto Date
Listado 6-122: Creando un objeto Date a partir de un texto
Listado 6-123: Creando un objeto Date a partir de los componentes de una fecha
Listado 6-124: Leyendo los componentes de una fecha
Listado 6-125: Leyendo el mes
Listado 6-126: Incrementando una fecha
Listado 6-127: Calculando un intervalo
Listado 6-128: Calculando un intervalo en segundos
Listado 6-129: Calculando un intervalo en días
Listado 6-130: Comparando dos fechas
Listado 6-131: Comparando solo las fechas sin considerar la hora
Listado 6-132: Ejecutando operaciones aritméticas con el objeto Math
Listado 6-133: Obteniendo un valor al azar
Listado 6-134: Definiendo una nueva ubicación
Listado 6-135: Actualizando la página
Listado 6-136: Abriendo una nueva ventana
Listado 6-137: Usando un temporizador para ejecutar funciones
Listado 6-138: Cancelando un temporizador
Listado 6-139: Obteniendo una referencia al objeto Element que representa un elemento
Listado 6-140: Leyendo los atributos de los elementos desde JavaScript
Listado 6-141: Accediendo elementos por el nombre
Listado 6-142: Accediendo a un elemento por medio de su nombre
Listado 6-143: Buscando un elemento con el método querySelector()
Listado 6-144: Buscando un elemento dentro de otro elemento
Listado 6-145: Asignando nuevos estilos al documento
Listado 6-146: Leyendo estilos CSS desde JavaScript
Listado 6-147: Reemplazando la clase del elemento
Listado 6-148: Activando y desactivando clases
Listado 6-149: Activando y desactivando clases con el método toggle()
Listado 6-150: Asignando contenido a un elemento
Listado 6-151: Modificando el contenido de un elemento
Listado 6-152: Insertando código HTML en el documento
Listado 6-153: Agregando contenido HTML dentro de un elemento
Listado 6-154: Creando objetos Element
Listado 6-155: Agregando contenido a un objeto Element
Listado 6-156: Definiendo atributos de eventos desde código JavaScript
Listado 6-157: Respondiendo a eventos con el método addEventListener()
Listado 6-158: Usando objetos Event
Listado 6-159: Respondiendo a un evento con una función anónima
Listado 6-160: Pasando valores a la función que responde al evento
Listado 6-161: Pasando valores con funciones anónimas
Listado 6-162: Reportando la posición del ratón
Listado 6-163: Calculando la posición del ratón en un elemento
Listado 6-164: Detectando la tecla presionada
Listado 6-165: Detectando teclas especiales
Listado 6-166: Generando un error
Listado 6-167: Mostrando mensajes en la consola con el método log()
Listado 6-168: Respondiendo a errores
Listado 6-169: Arrojando excepciones
Listado 6-170: Detectando funciones con Modernizr
Capítulo 7 - API Formularios
Listado 7-1: Enviando un formulario desde JavaScript
Listado 7-2: Obteniendo una referencia al elemento <form> desde la propiedad forms
Listado 7-3: Controlando la validez del formulario
Listado 7-4: Declarando mensajes de error personalizados
Listado 7-5: Creando un sistema de validación personalizado
Listado 7-6: Validación en tiempo real
Listado 7-7: Leyendo los estados de validez para mostrar un mensaje de error específico
Listado 7-8: Usando las pseudo-clases :valid e :invalid
Listado 7-9: Usando las pseudo-clases :required y :optional
Listado 7-10: Usando las pseudo-clases :in-range y :out-of-range
Capítulo 8 - Medios
Listado 8-1: Cargando un video con el elemento <video>
Listado 8-2: Activando los controles por defecto
Listado 8-3: Definiendo el área del video
Listado 8-4: Incluyendo una imagen para representar el video
Listado 8-5: Creando un reproductor de video para múltiples navegadores
Listado 8-6: Reproduciendo audio con el elemento <audio>
Listado 8-7: Creando un reproductor de audio para múltiples navegadores
Listado 8-8: Creando un reproductor de video con HTML
Listado 8-9: Diseñando el reproductor
Listado 8-10: Inicializando la aplicación
Listado 8-11: Reproduciendo y pausando el video
Listado 8-12: Actualizando la barra de progreso
Listado 8-13: Reproduciendo el video desde la posición seleccionada por el usuario
Listado 8-14: Activando y desactivando el sonido con la propiedad muted
Listado 8-15: Controlando el volumen
Listado 8-16: Respondiendo al evento load para iniciar la aplicación
Listado 8-17: Agregando subtítulos con el elemento <track>
Listado 8-18: Definiendo un archivo WebVTT
Listado 8-19: Incluyendo etiquetas en un archivo WebVTT
Listado 8-20: Declarando estilos para un archivo WebVTT
Listado 8-21: Configurando cues
Listado 8-22: Obteniendo el objeto TextTrack
Listado 8-23: Mostrando la información de la pista en pantalla
Listado 8-24: Mostrando cues en la pantalla
Listado 8-25: Mostrando información acerca de las cues
Listado 8-26: Agregando pistas y cues desde JavaScript
Capítulo 9 - API Stream
Listado 9-1: Accediendo a la cámara
Listado 9-2: Mostrando información de la transmisión
Listado 9-3: Deteniendo la transmisión
Capítulo 10 - API Fullscreen
Listado 10-1: Llevando al elemento <video> a pantalla completa
Listado 10-2: Llevando a cualquier elemento a pantalla completa
Capítulo 11 - API Canvas
Listado 11-1: Incluyendo el elemento <canvas>
Listado 11-2: Obteniendo el contexto de dibujo para el lienzo
Listado 11-3: Dibujando rectángulos
Listado 11-4: Cambiando colores
Listado 11-5: Aplicando un gradiente lineal al lienzo
Listado 11-6: Iniciando y cerrando un trazado
Listado 11-7: Creando un trazado
Listado 11-8: Completando el triángulo
Listado 11-9: Dibujando un triángulo sólido
Listado 11-10: Usando un triángulo como máscara
Listado 11-11: Dibujando círculos con el método arc()
Listado 11-12: Dibujando un arco de 45 grados
Listado 11-13: Creando curvas complejas
Listado 11-14: Probando las propiedades para las líneas
Listado 11-15: Dibujando texto
Listado 11-16: Midiendo texto
Listado 11-17: Aplicando sombras a textos
Listado 11-18: Traduciendo, rotando y escalando
Listado 11-19: Transformaciones acumulativas de la matriz
Listado 11-20: Grabando y restaurando el estado del lienzo
Listado 11-21: Probando la propiedad globalCompositeOperation
Listado 11-22: Dibujando una imagen
Listado 11-23: Ajustando la imagen al tamaño del lienzo
Listado 11-24: Extrayendo, redimensionando y dibujando
Listado 11-25: Agregando un patrón a nuestros trazados
Listado 11-26: Generando el negativo de una imagen
Listado 11-27: Habilitando el acceso de origen cruzado
Listado 11-28: Creando un documento para mostrar una imagen con el contenido del lienzo
Listado 11-29: Creando una imagen con el contenido del lienzo
Listado 11-30: Creando una animación
Listado 11-31: Creando el documento para mostrar una animación profesional
Listado 11-32: Creando un video juego en 2D
Listado 11-33: Mostrando un video en el lienzo
Listado 11-34: Programando una aplicación para tomar una foto
Capítulo 12 - WebGL
Listado 12-1: Incluyendo la librería Three.js en el documento
Listado 12-2: Creando una esfera de alambre
Listado 12-3: Rotando un cubo con el ratón
Listado 12-4: Agregando luz a la escena
Listado 12-5: Agregando una textura a un objeto
Listado 12-6: Aplicando una textura diferente para cada lado del cubo
Listado 12-7: Incluyendo texto 3D en nuestra escena
Listado 12-8: Introduciendo video en un mundo 3D
Listado 12-9: Cargando modelos 3D
Listado 12-10: Creando del documento para un video juego en 3D
Listado 12-11: Definiendo propiedades básicas
Listado 12-12: Definiendo el método iniciar()
Listado 12-13: Definiendo el método cargar()
Listado 12-14: Definiendo el método crear()
Listado 12-15: Definiendo el método control()
Listado 12-16: Definiendo el método procesar()
Listado 12-17: Definiendo el método dibujar()
Listado 12-18: Definiendo el método detectar()
Listado 12-19: Definiendo el método bucle()
Capítulo 13 - API Pointer Lock
Listado 13-1: Asumiendo control del ratón
Listado 13-2: Reportando un cambio en la condición del ratón
Listado 13-3: Comprobando la condición del ratón
Listado 13-4: Bloqueando y desbloqueando el ratón
Listado 13-5: Calculando la posición del ratón con movementX y movementY
Capítulo 14 - API Web Storage
Listado 14-1: Creando un documento para trabajar con la API Web Storage
Listado 14-2: Diseñando la interface
Listado 14-3: Almacenando y leyendo datos
Listado 14-4: Usando un atajo para trabajar con ítems
Listado 14-5: Listando todos los ítems en el espacio de almacenamiento
Listado 14-6: Eliminando ítems en el espacio de almacenamiento
Listado 14-7: Usando Local Storage
Listado 14-8: Respondiendo al evento storage para mantener la lista de ítems actualizada
Listado 14-9: Accediendo a las propiedades del evento
Capítulo 15 - API IndexedDB
Listado 15-1: Creando un documento para probar la API IndexedDB
Listado 15-2: Definiendo los estilos de las cajas
Listado 15-3: Abriendo la base de datos
Listado 15-4: Reportando errores y obteniendo una referencia a la base de datos
Listado 15-5: Declarando Almacenes de Objetos e índices
Listado 15-6: Agregando objetos a nuestro Almacén de Objetos
Listado 15-7: Leyendo el nuevo objeto
Listado 15-8: Iniciando la aplicación
Listado 15-9: Listando objetos
Listado 15-10: Listando objetos por año en orden descendente
Listado 15-11: Eliminando objetos
Listado 15-12: Creando un documento para buscar películas
Listado 15-13: Buscando películas
Capítulo 16 - API File
Listado 16-1: Creando un documento para cargar archivos
Listado 16-2: Definiendo los estilos del formulario y el elemento cajadatos
Listado 16-3: Leyendo un archivo de texto
Listado 16-4: Cargando imágenes
Listado 16-5: Trabajando con blobs y el método slice()
Listado 16-6: Asignando un blob a un elemento <img>
Listado 16-7: Usando eventos para controlar el proceso
Capítulo 17 - API Drag and Drop
Listado 17-1: Creando un documento para experimentar con la API Drag and Drop
Listado 17-2: Definiendo los estilos para las cajas
Listado 17-3: Procesando una operación de arrastrar y soltar
Listado 17-4: Ofreciendo una respuesta al usuario
Listado 17-5: Diseñando un documento para arrastrar y soltar múltiples fuentes
Listado 17-6: Filtrando las imágenes con el atributo id
Listado 17-7: Usando un elemento <canvas> para recibir las imágenes
Listado 17-8: Configurando la imagen miniatura
Listado 17-9: Creando un documento sencillo para arrastrar archivos
Listado 17-10: Procesando los datos contenidos en la propiedad files
Capítulo 18 - API Geolocation
Listado 18-1: Creando un documento para probar la API Geolocation
Listado 18-2: Obteniendo la información de la ubicación
Listado 18-3: Mostrando mensajes de error
Listado 18-4: Configurando el sistema de localización
Listado 18-5: Probando el método watchPosition()
Listado 18-6: Representando la ubicación en un mapa usando la API Google Maps
Capítulo 19 - API History
Listado 19-1: Navegando hacia atrás en el historial del navegador
Listado 19-2: Creando un documento básico para experimentar con la API History
Listado 19-3: Definiendo los estilos para las cajas y los elementos <span>
Listado 19-4: Generando una nueva URL y contenido
Listado 19-5: Siguiendo la ubicación del usuario en el historial
Listado 19-6: Creando el documento principal de nuestra aplicación
Listado 19-7: Manipulando el historial
Capítulo 20 - API Page Visibility
Listado 20-1: Reportando el estado de visibilidad
Listado 20-2: Respondiendo al estado de visibilidad
Listado 20-3: Combinando los eventos blur, focus y visibilitychange
Capítulo 21 - Ajax Level 2
Listado 21-1: Creando un documento para procesar solicitudes Ajax
Listado 21-2: Diseñando los estilos de las cajas en la pantalla
Listado 21-3: Leyendo un archivo
Listado 21-4: Leyendo una imagen en el servidor
Listado 21-5: Mostrando el progreso de la solicitud
Listado 21-6: Enviando un formulario virtual al servidor
Listado 21-7: Respondiendo a una solicitud POST (procesar.php)
Listado 21-8: Creando un documento para subir archivos
Listado 21-9: Subiendo un archivo con FormData()
Listado 21-10: Definiendo el área donde soltar los archivos a subir
Listado 21-11: Subiendo archivos uno por uno
Capítulo 22 - API Web Messaging
Listado 22-1: Incluyendo un iframe dentro de un documento para probar la API Web Messaging
Listado 22-2: Definiendo las cajas (messaging.css)
Listado 22-3: Enviando un mensaje al iframe (messaging.js)
Listado 22-4: Creando un documento para el iframe (iframe.html)
Listado 22-5: Procesando mensajes en el destino (iframe.js)
Listado 22-6: Comunicándonos con orígenes y destinos específicos
Listado 22-7: Comunicándonos con un origen específico (messaging.js)
Listado 22-8: Respondiendo al documento principal (iframe.js)
Capítulo 23 - API WebSocket
Listado 23-1: Adaptando la función onMessage() a nuestra aplicación (demo.php)
Listado 23-2: Creando un documento para insertar comandos
Listado 23-3: Definiendo los estilos para las cajas
Listado 23-4: Enviando mensajes al servidor
Listado 23-5: Informando al usuario acerca del estado de la conexión
Capítulo 24 - API WebRTC
Listado 24-1: Respondiendo a ofertas y respuestas desde el servidor WebSocket (demo.php)
Listado 24-2: Creando un documento para hacer llamadas de video
Listado 24-3: Conectando con el servidor WebSocket y accediendo a la transmisión de medios
Listado 24-4: Iniciando la conexión
Listado 24-5: Obteniendo la descripción de la sesión
Listado 24-6: Enviando una oferta a un ordenador remoto
Listado 24-7: Enviando señales al ordenador remoto
Listado 24-8: Procesando las señales
Listado 24-9: Respondiendo a los eventos addstream y icecandidate
Listado 24-10: Iniciando la aplicación
Listado 24-11: Creando un documento para probar los canales de datos
Listado 24-12: Creando una conexión que contiene un canal de datos
Capítulo 25 - API Web Audio
Listado 25-1: Creando un documento para reproducir sonidos
Listado 25-2: Reproduciendo un buffer de audio
Listado 25-3: Reproduciendo la fuente de audio en un bucle
Listado 25-4: Bajando el volumen con un GainNode
Listado 25-5: Introduciendo un retraso
Listado 25-6: Obteniendo un efecto de eco con el DelayNode
Listado 25-7: Agregando un filtro con el BiquadFilterNode
Listado 25-8: Agregando un compresor dinámico
Listado 25-9: Aplicando un efecto de circunvolución
Listado 25-10: Creando un documento para probar sonidos en 3D
Listado 25-11: Calculando la posición del sonido en una escena 3D
Listado 25-12: Creando un documento para experimentar con el AnalyserNode
Listado 25-13: Dibujando un gráfico de sonido en un elemento <canvas>
Capítulo 26 - API Web Workers
Listado 26-1: Creando un documento para experimentar con Web Workers
Listado 26-2: Definiendo los estilos para las cajas (webworkers.css)
Listado 26-3: Cargando el worker (webworkers.js)
Listado 26-4: Creando el worker (worker.js)
Listado 26-5: Respondiendo al evento error (webworkers.js)
Listado 26-6: Produciendo un error (worker.js)
Listado 26-7: Terminando el worker desde el código principal (webworkers.js)
Listado 26-8: Finalizando el worker desde su interior
Listado 26-9: Cargando códigos JavaScript externos desde un worker
Listado 26-10: Creando un documento para experimentar con Workers Compartidos
Listado 26-11: Creando el documento para el iframe (iframe.html)
Listado 26-12: Conectándose con el worker desde el documento principal (webworkers.js)
Listado 26-13: Conectándose al worker desde el iframe (iframe.js)
Listado 26-14: Respondiendo desde el Worker Compartido (worker.js)
Seleccione País
Paperback
$ 21.95 BUY NOW
Kindle
$ 9.95 BUY NOW
Apple Books
$ 9.99 BUY NOW
Google Books
$ 9.99 BUY NOW
Información
2da Edición
ISBN: 978-1545169490
Más de 600 Códigos de Ejemplo!