Indice

Indice de Capítulos:

• 1. ¿Por dónde empiezo?
• 2. ¿Cómo funciona la Web?
• 3. Naturaleza del diseño Web
• 4. Crear una sencilla página
• 5. Codificar texto
• 6. Añadir vínculos
• 7. Añadir imágenes
• 8. Código básico de tablas
• 9. Formularios
• 10. Entender los estándares
• 11. Orientación a CSS
• 12. Formatear texto
• 13. Colores y fondos
• 14. El modelo caja
• 15. Flotar y posicionar
• 16. Diseño con CSS
• 17. Transiciones y Animaciones
• 18. Técnicas CSS
• 19. Introducción a JavaScript
• 20. Usando JavaScript
• 21. Gráficos Web
• 22. Gráficos Web eficientes
• 23. El proceso del desarrollo
• 24. Sus páginas en la Web

Indice General:

Capítulo I: ¿Por dónde empiezo?

• 1. Diseñador Web
  • 1.1 Diseño
    • Experiencia de usuario
    • Interacción
    • Interfaz de usuario
    • Diseño gráfico
  • 1.2 Desarrollo
    • Codificación
    • Hojas de estilo
    • Progamación
  • 1.3 Estrategias de contenido y creación
• 2. Lenguajes Web
  • 2.1 HTML
  • 2.2 CSS
  • 2.3 JavaScript y DOM
  • 2.4 Programación del lado del servidor
• 3. Programas
  • 3.1 Codificación Web
  • 3.2 Editores HTML
  • 3.3 Edición de imágenes
  • 3.4 Herramientas de Internet

Capítulo II: ¿Cómo funciona la Web?

• 1. Internet versus Web
• 2. Sirviendo información
• 3. Navegadores
• 4. Direcciones Sitios Web (URLs)
  • 4.1 Partes de una URL
  • 4.2 Archivos predeterminados
• 5. Anatomía de una página Web
  • 5.1 Documentos HTML
  • 5.2 Hojas de estilo
• 6. Juntándolo todo

Capítulo III: Naturaleza del diseño Web

• 1. Los diferentes dispositivos
• 2. Ciñiéndose a las reglas
• 3. Mejora progresiva
  • 3.1 Estrategias en la codificación
  • 3.2 Estrategias en las hojas de estilo
  • 3.3 Estrategias programando
• 4. Diseño web adaptativo
• 5. Accesibilidad
• 6. La necesidad de rapidez

Capítulo IV: Crear una sencilla página Web

• 1. Una página web paso a paso
  • 1.1 Contenido
  • 1.2 Estructura
  • 1.3 Elementos de texto
  • 1.4 Añadir una imagen
  • 1.5 Hojas de estilo
• 2. Validar tus documentos

Capítulo V: Codificar texto

• 1. Elementos de nivel de bloque
  • 1.1 Párrafos
  • 1.2 Encabezados
  • 1.3 Listas
    • Listas sin ordenar
    • Listas ordenadas
    • Listas de definición
  • 1.4 Citas
  • 1.5 Texto preformateado
  • 1.6 "Figure" y "Figcaption"
  • 1.7 Reglas horizontales
• 2. Organizando el contenido
  • 2.1 Secciones y artículos
  • 2.2 Aside
  • 2.3 Navegación
  • 2.4 Header y Footer
  • 2.5 Direcciones
• 3. Elementos de texto en línea
  • 3.1 Texto enfatizado = em
  • 3.2 Texto muy enfatizado = strong
  • 3.3 Antiguos elementos de presentación
    • Elemento "b"
    • Elemento "i"
    • Elemento "s"
    • Elemento "u"
    • Elemento "small"
  • 3.4 Cita corta = q
  • 3.5 Abreviaturas y acrónimos = abbr
  • 3.6 Citas = cite
  • 3.7 Definiciones = dfn
  • 3.8 Elementos código de programas
  • 3.9 Subíndices = sub
  • 3.10 Superíndices = sup
  • 3.11 Texto resaltado = mark
  • 3.12 Codificar tiempo = time
  • 3.13 Texto insertado y texto eliminado
• 4. Añadir saltos
  • 4.1 Saltos de línea
  • 4.2 Saltos de línea en palabras
• 5. Elementos genéricos ("div" y "span")
  • 5.1 División con "div"
  • 5.2 Elementos en línea con "span"
  • 5.3 Los atributos "id" y "class"
    • Identificación con "id"
    • Identificación con "class"
• 6. Algunos caracteres especiales

Capítulo VI: Añadir vínculos

• 1. El elemento "a"
• 2. El atributo "href"
• 3. Enlaces a páginas en la Web
• 4. Enlaces en su propio sitio
  • 4.1 Vínculos dentro de un directorio
  • 4.2 Vínculos a un directorio más abajo
  • 4.3 Vínculos a un directorio más arriba
  • 4.4 Rutas de acceso relativas a la raíz
  • 4.5 Rutas a imágenes
  • 4.6 Vínculos a un punto específico en una página
  • 4.7 Vínculos a un fragmento en otro documento
• 5. Tener como destino una nueva ventana de navegador
  • 5.1 Nueva ventana utilizando HTML
  • 5.2 Ventanas pop-up
• 6. Vínculos a correos electrónicos
• 7. Vínculos a teléfonos

Capítulo VII: Añadir imágenes

• 1. Imágenes en la Web
• 2. Formato de imágenes
• 3. El elementos "img"
  • 3.1 El atributo "src"
  • 3.2 El atributo "alt"
  • 3.3 Descripciones largas
• 4. Proporcionar dimensiones
  • 4.1 Coincidir valores
• 5. Vincular imágenes
• 6. Mapas de imágenes
  • 6.1 Partes de un mapa de imagen
  • 6.2 Crear el mapa
  • 6.3 Interpretar un mapa
• 7. Una ventana dentro de otra

Capítulo VIII: Código básico de tablas

• 1. Utilidad de las tablas
• 2. Estructura mínima de tabla
  • 2.1 Encabezados de tabla
• 3. Elementos avanzados de tabla
  • 3.1 Elementos de grupos de fila
  • 3.2 Elementos de grupos de columnas
• 4. Combinar celdas
  • 4.1 Combinar columnas
  • 4.2 Combinar filas
• 5. Relleno y espaciado de celda
  • 5.1 Relleno de celda
  • 5.2 Espaciado de celda
• 6. Accesibilidad de la tabla
  • 6.1 Titulares y resúmenes
    • El elemento "caption"
    • El atributo "summary"
  • 6.2 Conectando celdas y encabezados

Capítulo IX: Formularios

• 1. Funcionamiento de los formularios
  • 1.1 Entrada de datos y respuesta
• 2. El elemento "form"
  • 2.1 El atributo "action"
  • 2.2 El atributo "method"
    • El método POST
    • El método GET
• 3. Variables y contenido
  • 3.1 El elemento"textarea" y el atributo "name"
  • 3.2 Nombrar sus variables
• 4. Controles de formulario
  • 4.1 Controles de entrada de texto
    • Campos de texto de una sola línea
    • Campos de texto de contraseña
    • Campos de texto multilínea
  • 4.2 Campos de entrada de texto especializados
    • Entrada de texto con contraseña
    • Entrada de texto HTML5
  • 4.3 Botones "submit" y "reset"
  • 4.4 Botones de opción y casillas de verificación
    • Botones de opción
    • Casillas de verificación
  • 4.5 Menús
    • Menús desplegables
    • Menús con desplazamiento
    • Agrupar opciones de menú
  • 4.6 Control de selección de archivo
  • 4.7 Controles oculto
  • 4.8 Controles de fechas y horas (HTML5)
  • 4.9 Entradas numéricas (HTML5)
  • 4.10 Selector de color (HTML5)
• 5. Accesibiliad de formularios
  • 5.1 Etiquetas
  • 5.2 "fieldset" y "legend"
• 6. Plantillas y diseño de formularios
  • 6.1 Formularios funcionales
  • 6.2 Presentación de formularios

Capítulo X: Entender los estándares

• 1. Historia de HTML
  • 1.1 La llegada de XHTML
    • Sintaxis de XHTML
  • 1.2 La llegada de HTML5
• 2. Nueva codificación
  • 2.1 Declaración DOCTYPE
  • 2.2 Codificación de carácter
  • 2.3 Elementos y atributos
    • Nuevos tipos de entradas en formularios
    • Nuevos atributos globales
    • Codificación obsoleta de HTML 4.01
• 3. Introducción a los APIs
• 4. Video y audio
  • 4.1 Buenas y malas noticias
  • 4.2 Cómo funcionan los formatos media
    • Distintos formatos de video
    • Distintos formatos de audio
  • 4.3 Añadir un video a una página
    • Vídeos para todos
  • 4.4 Añadir un audio a una página
• 5. Canvas
  • 5.1 El elemento canvas
  • 5.2 Dibujando con JavaScript

Capítulo XI: Orientación a CSS

• 1. Ventajas de CSS
• 2. Funcionamiento de las hojas de estilo
  • 2.1 Escribir reglas de estilo
  • 2.2 Anexar las reglas de estilo
• 3. Conceptos importantes
  • 3.1 Transmisión de estilos
    • Estructura del documento
    • Padres e hijos
    • Herencia de las propiedades
  • 3.2 Estilos en conflicto: la cascada
    • Especificidad
    • Orden de la regla
  • 3.3 El modelo caja
  • 3.4 Selectores agrupados
• 4. Profundizando en CSS

Capítulo XII: Formatear texto

• 1. Propiedades de fuente
  • 1.1 Especificar el nombre de fuente
    • Proporcionar tu propia fuente
  • 1.2 Tamaño de fuente
  • 1.3 Peso de la fuente (negrita)
  • 1.4 Estilo de fuente (cursiva)
  • 1.5 Variante de fuente (versales)
  • 1.6 La propiedad abreviada "font"
• 2. Cambiar el color del texto
• 3. Otros selectores
  • 3.1 Selectores descendientes
  • 3.2 Selectores ID
  • 3.3 Selectores de clase
    • Especificidad
• 4. Ajustes líneas de texto
  • 4.1 Altura de líneas
  • 4.2 Sangrías
  • 4.3 Alineación horizontal
• 5. Subrayados y otras decoraciones
• 6. Cambiar las mayúsculas
• 7. Espaciado
• 8. Sombreado de texto
• 9. Otras propiedades del texto
• 10. Cambiando marcadores en listas
  • 10.1 Marcadores
  • 10.2 Posición del marcador
  • 10.3 Crear tus propios marcadores
  • 10.4 La propiedad abreviada "list-style"

Capítulo XIII: Colores y fondos

• 1. Especificar valores de color
  • 1.1 Nombres de color
  • 1.2 Valores de color RGB
    • El sistema hexadecimal
  • 1.3 Valores de color RGBa
• 2. Color de primer plano
• 3. Color de fondo
• 4. Jugando con la opacidad
• 5. Selectores de pseudoclase
  • 5.1 Pseudoclases en el elemento "ancla"
• 6. Selectores de pseudoelementos
  • 6.1 Primera letra y Primera línea
  • 6.2 Contenido generado ":before" y ":after"
• 7. Selectores de atributos
• 8. Imágenes de fondo
  • 8.1 Añadir una imagen de fondo
  • 8.2 Controlar la dirección de repetición
  • 8.3 Controlar la posición
  • 8.4 Fijar posición de fondo
• 9. Propiedad abreviada "background"
  • 9.1 Múltiples fondos
• 10. Gradientes
  • 10.1 Gradientes lineales
  • 10.2 Gradientes radiales
  • 10.3 Introduciendo prefijos de navegadores
  • 10.4 Diseñando gradientes
• 11. Hojas de estilo externas
  • 11.1 El elemento "link"
  • 11.2 La regla "@import"
  • 11.3 Hojas de estilo modulares
  • 11.4 Hojas de estilo para otros medios

Capítulo XIV: El modelo caja

• 1. El elemento caja
• 2. Establecer las dimensiones de la caja
  • 2.1 Dimensionar la caja de contenido
  • 2.2 Dimensionar la caja de borde
  • 2.3 Especificar altura y la propiedad "overflow"
• 3. Relleno
  • 3.1 La propiedad abreviada "padding"
• 4. Bordes
  • 4.1 Estilo de borde
  • 4.2 Ancho de borde
  • 4.3 Color de borde
  • 4.4 Combinar estilo, ancho y color
  • 4.5 Esquinas redondeadas
  • 4.6 Bordes perfectos de imágenes
• 5. Márgenes
  • 5.1 Combinar márgenes
  • 5.2 Márgenes en elementos en línea
  • 5.3 Márgenes negativos
• 6. Asignar roles de visualización
• 7. Añadir sombras arrojadas a cajas

Capítulo XV: Flotar y posicionar

• 1. El flujo normal
• 2. Flotar
  • 2.1 Flotar elementos en línea
  • 2.2 Flotar elementos en bloque
  • 2.3 Flotar múltiples elementos
  • 2.4 Dejar espacio libre a elementos flotados
  • 2.5 Conteniendo elementos flotados
  • 2.6 Utilizar elementos flotados para crear columnas
• 3. Fundamentos básicos de posicionar
  • 3.1 Tipos de posicionaminento
  • 3.2 Especificar posición
• 4. Posicionamiento relativo
• 5. Posicionamiento absoluto
  • 5.1 Bloques contenedores
  • 5.2 Especificar posición
  • 5.3 Orden de apilamiento
• 6. Posicionamiento fijo

Capítulo XVI: Diseño con CSS

• 1. Estrategias de diseño de páginas
  • 1.1 Diseños fijos
  • 1.2 Diseño de página líquido
  • 1.3 Diseños elásticos
  • 1.4 Diseños híbridos
• 2. Diseños de múltiples columnas utilizando flotantes
  • 2.1 Dos columnas diseño líquido
  • 2.2 Dos columnas diseño fijo
  • 2.3 Dos columnas, ancho fijo y centrado
  • 2.4 Tres columnas, diseño líquido
  • 2.5 Utilizando márgenes negativos
• 3. Diseños con posicionamiento absoluto
  • 3.1 Tres columnas posicionadas, diseño líquido
  • 3.2 Tres columnas posicionadas, diseño fijo
• 4. Fondos de columna de arriba a abajo
  • 4.1 Falsas columnas para diseños líquidos
  • 4.2 Tres falsas columnas

Capítulo XVII: Transiciones y Animaciones

• 1. Transiciones CSS
  • 1.1 Transiciones básicas
    • Especificando la propiedad
    • Determinar el tiempo
  • 1.2 Funciones de acelerar tiempos
  • 1.3 Configurando pausas
  • 1.4 La propiedad abreviada "transition"
  • 1.5 Aplicando múltiples transiciones
  • 1.6 Una transición para todas las ocasiones
• 2. Transformaciones CSS
  • 2.1 Transformando el ángulo: "rotate"
  • 2.2 Transformando la posición: "translate"
  • 2.3 Transformando el tamaño: "scale"
  • 2.4 Transformando inclinación: "skew"
  • 2.5 Aplicando múltiples transformaciones
  • 2.6 Transformaciones suaves
  • 2.7 Transformaciones 3D
• 3. Animaciones a fotograma
  • 3.1 Estableciendo los fotogramas
  • 3.2 Añadiendo propiedades de animación

Capítulo XVIII: Técnicas CSS

• 1. Resetear CSS
• 2. Técnicas de sustitución de imágenes
• 3. CSS Sprites
• 4. Propiedades de estilo para formularios
  • 4.1 Codificación de un formulario
• 5. Propiedades de estilo para tablas
  • 5.1 Bordes separados y combinados
    • Celdas vacías
  • 5.2 Cambiar boliches de lista y números
    • Posición del marcador
    • Crear sus propios boliches
    • La propiedad abreviada "list-style"
  • 5.3 Utilizar listas para navegación
    • Elementos de lista en línea
    • Elementos de lista flotados
• 6. Rollovers CSS
  • 6.1 Cambiar la imagen de fondo
• 7. Diseño Web Adaptativo
  • 7.1 Ajustando la ventana
  • 7.2 Diseños fluidos
  • 7.3 Hacer imágenes flexibles
  • 7.4 Media query
  • 7.5 Algunos trucos

Capítulo IXX: Introducción a JavaScript

• 1. Introducción a JavaScript
  • 1.1 Utilidades de JavaScript
• 2. Añadir JavaScript a una página
• 3. Anatomía de un Script
  • 3.1 Lo básico
  • 3.2 Variables
    • Tipos de datos
    • Matrices
  • 3.3 Operadores comparativos
  • 3.4 Sentencias "If / Else"
  • 3.5 Loops
  • 3.6 Funciones
    • Funciones nativas
    • Funciones creadas
    • Argumentos
    • Devolviendo un valor
  • 3.7 Alcance de la variable y la palabra clave "var"
• 4. El objeto navegador
• 5. Eventos
  • 5.1 Como un atributo HTML
  • 5.2 Como un método
  • 5.3 addEventListener

Capítulo XX: Usando JavaScript

• 1. Document Object Model
  • 1.1 La estructura en árbol
  • 1.2 Accediendo a los nodos DOM
    • Por nombre de elemento
    • Por el valor del atributo "id"
    • Por el valor del atributo "class"
    • Por selector
    • Accediendo a un valor de atributo
  • 1.3 Manipulando nodos
  • 1.4 Añadiendo y quitando elementos
• 2. Polyfills
  • 2.1 HTML5 shiv (o shim)
  • 2.2 Modernizr
  • 2.3 Selectivizr
  • 2.4 Respond.js
• 3. Bibliotecas JavaScript
  • 3.1 Algunas librerías
  • 3.2 Cómo utilizar una librería JS (jQuery)
    • Descargarse un archivo jQuery.js
    • Añadirlo a tu documento
  • 3.3 Creando scripts con jQuery

Capítulo XXI: Gráficos Web

• 1. Recursos de imágenes
  • 1.1 Creando tus propias imágenes
  • 1.2 Suministro de fotografías e ilustraciones
  • 1.3 Clip art e iconos
• 2. Formatos de imágenes
  • 2.1 El formato GIF
  • 2.2 El formato JPEG
  • 2.3 El formato PNG
  • 2.4 Elección del mejor formato
  • 2.5 Guardar una imagen en el formato elegido
• 3. Tamaño de la imagen y Resolución
  • 3.1 Pulgadas y píxeles
  • 3.2 Los píxeles
  • 3.3 Cambiando el tamaño de las imágenes
• 4. Trabajando con transparencia
  • 4.1 Funcionamiento de la transparencia binaria
  • 4.2 Funcionamiento de la transparencia alfa
  • 4.3 Creando GIFs y PNGs transparentes
• 5. Introducción a SVG
  • 5.1 Dibujando con XML
  • 5.2 Herramientas SVG
  • 5.3 Añadiendo SVG a una página
  • 5.4 Soporte del navegador
  • 5.5 Más información

Capítulo XXII: Gráficos Web eficientes

• 1. Estrategias generales de optimización de imágenes
• 2. Optimizando GIFs
  • 2.1 Reducir el número de colores
  • 2.2 Reducir el difuminado
  • 2.3 Utilizar filtros
  • 2.4 Diseñando para la compresión GIF
• 3. Optimizando JPEGs
  • 3.1 La compresión JPEG
  • 3.2 Elegir JPEGs optimizados
  • 3.3 Difuminando y suavizando la imagen
  • 3.4 Calidad selectiva (Fireworks)
• 4. Optimizando PNGs
• 5. Optimizar el tamaño del archivo

Capítulo XXIII: El proceso del desarrollo del sitio

• 1. Conceptualizar e investigar
• 2. Crear y organizar contenido
  • 2.1 Creación de contenido
  • 2.2 Diseño de la información
• 3. Desarrollar el aspecto visual y comportamiento
  • 3.1 Proceso de dirección de arte
• 4. Producir un prototipo
• 5. Probar el sitio
  • 5.1 Comprobación básica de calidad
  • 5.2 Pruebas del entorno de navegación
  • 5.3 Pruebas de usuario
• 6. Lanzamiento y mantenimiento del sitio

Capítulo XXIV: Sus páginas a la Web

• 1. Dirección de tu página
• 2. Encontrar espacio de servidor
• 3. El proceso de publicación
• 5. Transferir archivos con FTP
  • 5.1 Software FTP
  • 5.2 Utilizar FTP, paso a paso

Volver al principio

Volver al Indice