HTML5 y CSS3 - herrerobooks.com · Capítulo 2: La nueva sintaxis HTML5 A. El doctype 44 1. La...

Introducción

A. La creación de sitios web 20

B. Los lenguajes 20

C. El libro 20

1. Para los diseñadores web 202. El contenido 21

Capítulo 1: La evolución del HTML y del CSS

A. Breve historia de Internet 24

B. La evolución del HTML 26

1. Las investigaciones del W3C 262. El HyperText Markup Language 263. La evolución con el XHTML 274. Los disidentes del WHATWG 285. La llegada del HTML5 296. Los documentos HTML5 del W3C 307. La evolución de las recomendaciones 348. ¿Podemos usar HTML5? 349. Interpretación del HTML5 por los anteriores navegadores 3610. Este libro y la evolución del HTML5 40

C. La evolución del CSS 40

1. La aparición del CSS 402. La utilidad del CSS 403. Las versiones del CSS 414. La llegada del CSS3 415. La llegada del CSS4 41

HTML5 y CSS3Revolucione el diseño de sus sitios web (2a edición)

1/24© Ediciones ENIwww.ediciones-eni.com

http://www.ediciones-eni.com/libros/html5-y-css3-revolucione-el-diseo-de-sus-sitios-web-2a-edicion/.0e91a5918209d606a71219f73964465c.html

Capítulo 2: La nueva sintaxis HTML5

A. El doctype 44

1. La sintaxis en HTML 4 y XHTML 1.0 442. La sintaxis en HTML5 44

B. El documento HTML 45

1. La sintaxis en XHTML 1.0 452. La sintaxis en HTML5 45

C. La codificación de los caracteres 45

1. La sintaxis en HTML 4 y XHTML 1.0 452. La sintaxis en HTML5 45

D. Los scripts 46

E. Los estilos CSS 46

F. La sintaxis de los elementos 46

1. Objetivos 462. Las comillas 463. Los elementos con una única etiqueta de apertura 474. Los elementos con etiqueta de cierre facultativa 475. Las mayúsculas y minúsculas 476. Los atributos boleanos 477. Los elementos HTML, HEAD y BODY 488. La sintaxis recomendada 49

G. Los elementos obsoletos 50

1. ¿Qué es un elemento obsoleto? 502. Para una mejor accesibilidad 503. Los elementos en desuso o mal utilizados 50




H. Los elementos redefinidos 50

I. Los atributos obsoletos 50

J. Nuevos elementos 51

1. El elemento <hgroup> 512. El elemento <time> 523. El elemento <mark> 524. El elemento <meter> 525. Los elementos <details> y <summary> 536. El elemento <wbr> 547. El elemento <bdi> 558. El elemento <progress> 559. Los elementos relacionados con los idiomas asiáticos 5610. Los elementos <figure> y <figcaption> 56

K. Tipos de contenido de los elementos 56

L. La visualización de los elementos 58

1. En HTML 4 582. En HTML5 58

Capítulo 3: Los elementos de la estructura en HTML5

A. Los elementos de la estructura en HTML 4 62

1. Las cajas <div> 622. La "divitis" 633. Un contenido no semántico 63

B. Los elementos de la estructura en HTML5 64

1. Los nuevos elementos de la estructura 642. El elemento <header> 64




3. El elemento <footer> 644. El elemento <nav> 655. El elemento <section> 656. El elemento <article> 657. El elemento <aside> 658. El elemento <main> 669. Las cajas <div> 66

C. El atributo semántico "role" 67

D. Ejemplos de estructura en HTML5 68

1. Una estructura simple 682. Una estructura más elaborada 693. La estructura de un artículo 70

E. Las técnicas de formato 70

Capítulo 4: Plantillas web en HTML5

A. Plantillas para sitios web en HTML5 72

B. La plantilla ArchiteXture 72

1. La fuente 722. El diseño del sitio web 723. La estructura general 734. El código de la estructura 745. El menú de navegación 746. El banner de presentación 757. La zona central 758. El pie de página 77

C. La plantillaDaFrontPage 78

1. La fuente 78




2. El diseño del sitio web 783. La estructura general 794. El título del sitio web 815. El menú de navegación 816. El encabezado del sitio web 827. La zona central 828. El pie de página 84

D. La plantilla Learning Center 86

1. La fuente 862. El diseño del sitio web 863. La estructura general 874. La cabecera 895. El menú de navegación 906. La continuación de la cabecera 917. Los artículos resaltados 918. La continuación de la zona central 939. El pie de página 93

E. WordPress y las plantillas HTML5 93

1. El tema twentythirteen 942. El encabezado 953. La lista de entradas 974. El pie de página 995. Las entradas solas 100

Capítulo 5: El camino hacia el CSS3

A. Análisis de la situación 104

1. Los módulos en curso 1042. Consultar las especificaciones 105

B. Los prefijos para los navegadores 106

1. Las especificaciones y las recomendaciones 106




2. Los navegadores y el CSS3 1063. Los generadores de prefijos en línea 1074. Net Tuts Prefixr 1085. -prefix-my CSS 1096. CSSPrefixer 1107. El caso de Internet Explorer 1118. Un generador de prefijos JavaScript 112

C. Cómo interpretan los navegadores el CSS3 115

1. ¿Qué propiedades podemos usar? 1152. findmebyIP - HTML5 & CSS3 Support 1153. When can I use 1164. Examinar la compatibilidad con los selectores 1175. CSS3 Please 1196. Browser Support Checklist CSS3 1217. css3test 122

Capítulo 6: Los nuevos selectores de CSS3

A. Los selectores CSS 2 124

1. Funcionalidad 1242. Los selectores 1243. Las pseudo-clases 1244. Los pseudo-elementos 1255. La agrupación de selectores 125

B. Los nuevos selectores CSS3 125

C. El selector general de elementos adyacentes 126

D. El selector de atributo 127

1. Funcionalidad 1272. Los vínculos hacia una dirección de e-mail 127




3. Los vínculos de descarga 128

E. La pseudo-clase de vínculo 129

1. Funcionalidad 1292. La aplicación 1293. Resultado 130

F. Las pseudo-clases estructurales 131

1. Funcionalidad 1312. La raíz de la página 1313. El último elemento hijo 1314. Los elementos descendientes 1335. Los últimos hijos de un elemento 1396. Los primeros y los últimos elementos de un tipo determinado 1397. Los primeros elementos de un tipo determinado 1418. Los elementos únicos 1419. Los elementos hijo único de un tipo determinado 14210. Los elementos vacíos 14311. Todos los elementos excepto el elemento seleccionado 144

Capítulo 7: Los estilos de caja en CSS3

A. Las nuevas propiedades CSS3 146

B. El tamaño de las cajas 146

1. Con CSS 2.1 1462. Con CSS3 147

C. El desbordamiento de contenido 148

D. Los colores de fondo 150

1. El módulo de los colores 1502. El modo HSB 150




3. El modo HSB con transparencia 1514. El modo RGB con transparencia 1525. Un editor RGBA en línea 1526. La transparencia 153

E. Situación actual de fondos y bordes 153

F. Los bordes redondeados 154

1. Los prefijos 1542. Bordes idénticos 1543. Bordes redondeados diferentes 1554. Elipses en los bordes 1565. Los generadores en línea 158

G. Los bordes imaginativos 160

1. La sintaxis del W3C 1602. Los generadores en línea 162

H. Las sombras 163

1. Situación actual 1632. Crear una sombra 1633. Varios ejemplos de sombras 1644. Aplicar varias sombras 1665. Los generadores en línea 167

I. Los degradados 169

1. Situación actual 1692. Los degradados de Mozilla Firefox 1703. Les degradados para WebKit 1724. Los degradados según el W3C 1735. Los generadores en línea 173

J. Los fondos múltiples 176

1. Funcionalidad 176




2. Un ejemplo sencillo 177

K. Otras propiedades del fondo 178

1. Los navegadores 1782. La posición inicial de una imagen 1793. Recortar una imagen 1814. El tamaño del fondo 182

L. Los generadores CSS3 en línea 185

1. Funcionalidad 1852. WestCIV 1853. CSS 3.0 Maker 1864. CSS3 Generator 1875. CSS3 Playground 1886. CSS3 Generator 1897. Layer Style 190

M. Ejemplo de una tabla con bordes redondeados 191

1. Funcionalidad 1912. La estructura de la tabla 1913. El diseño de la tabla 1924. Las celdas de la tabla 1935. Las celdas del encabezado 1936. Celdas redondeadas 1947. La activación de las líneas 196

N. Ejemplo de sombra para una página 196

Capítulo 8: HTML5 y CSS3 aplicado al texto

A. Los elementos de texto obsoletos 200

1. La especificación del HTML5 2002. Los elementos en desuso o mal utilizados 200




3. El formato del texto 200

B. Los elementos de texto redefinidos 200

1. La especificación del HTML5 2002. El elemento <b> 2003. El elemento <strong> 2014. El elemento <i> 2015. El elemento <em> 2016. El elemento <small> 2017. El elemento <cite> 2028. El elemento <dl> 2029. El elemento <ol> 20210. El elemento <hr> 20211. El elemento <a> 203

C. Nuevos formatos para el texto 203

1. Las columnas 2032. Las palabras cortadas 207

D. Las fuentes tipográficas 209

1. El uso de las tipografías 2092. Importar las fuentes tipográficas 2093. La compatibilidad con los navegadores 2094. La regla @font-face 2115. El nombre de las tipografías 2116. Las tipografías locales 2127. Indicar varias fuentes tipográficas 2128. Los estilos tipográficos 2139. Un generador de fuentes tipográficas con @font-face 21310. Las tipografías web en línea 21411. Convertir las tipografías 21712. Seleccionar las tipografías 217

E. El tamaño de las tipografías 219

1. Las diferentes medidas 219




2. El problema de la cascada 2193. La nueva unidad rem 220

F. Textos con sombra 221

1. Los valores de la propiedad 2212. Las herramientas en línea 2223. Algunos ejemplos de diseño 224

G. La tipografía avanzada 226

1. Situación actual 2262. El grosor de los caracteres 2273. El tamaño de los caracteres 2274. Ajustar el tamaño de los caracteres 2285. Otras propiedades 229

Capítulo 9: HTML5 y CSS3 para los formularios

A. Funcionalidad 232

B. Los métodos de envío 232

C. El elemento <form> 232

D. Los nuevos campos 232

1. La visualización de los nuevos campos 2322. Los campos para las direcciones de e-mail 2333. El campo para los números de teléfono 2344. El campo para las URL 2355. Los campos para las fechas y las horas 2366. El campo para los valores numéricos 2377. Las barras de selección con cursor 2388. Los campos de búsqueda 2389. El campo de introducción de datos con sugerencias 239




10. La selección de un color 23911. Las claves públicas 240

E. La validación de los formularios 240

1. La validación del lado del cliente 2402. Desactivar la validación 2413. Insertar un campo obligatorio 2414. Los valores autorizados 242

F. Las expresiones regulares 243

1. Las letras autorizadas 2432. Un intervalo de letras autorizadas 2443. Otras letras a excepción de 2444. Las mayúsculas y minúsculas 2455. La condición O 2456. Las palabras autorizadas 2457. Autorizar cifras 2458. Un número limitado de caracteres 2469. Los valores múltiples 24710. Los parámetros especiales 247

G. Las ayudas para los usuarios de un formulario 248

1. La ayuda para completar 2482. Activar un campo 2483. El completado automático 2494. Redimensionar un campo 249

H. Las pseudo-clases para los formularios 251

1. Las funcionalidades de las pseudo-clases 2512. El formulario y los estilos CSS 2513. Resultado 2524. Otra pseudo-clase 2545. Los campos obligatorios y facultativos 2546. El formato de :focus 255




I. La validación de los datos introducidos 255

1. Funcionalidad 2552. El formulario 2563. El diseño del formulario 2564. Los campos no válidos 2575. Los mensajes de error 2586. Los campos válidos 2607. Los valores fuera de los límites 261

J. Un primer ejemplo de formulario sencillo 262

1. Objetivo 2622. La estructura del formulario 2633. Los estilos generales 2644. El fondo de la página 2645. El formulario 2656. Las etiquetas 2667. Los campos de inserción de datos 2668. El campo multilínea 2679. Los campos activos 26810. El botón de envío 269

K. Un segundo ejemplo de formulario muy sobrio 269

1. Objetivo 2692. La estructura inicial del formulario 2703. La sombra del formulario 2714. El efecto punteado 2725. El título del formulario 2726. Los trazos decorativos 2737. Los campos de inserción de datos 2748. El botón de conexión 2759. El uso del botón 27710. Los demás vínculos 27711. El resultado final 278




L. Un ejemplo de formulario interactivo 278

1. Objetivo 2782. La estructura inicial del formulario 2803. Las opciones adicionales 2804. El botón de envío 2815. El mensaje de confirmación 2816. Los estilos generales 2817. El diseño del formulario 2828. Las etiquetas 2839. Los campos de inserción de datos 28410. El menú desplegable 28411. El botón de envío 28512. La gestión de las opciones 28713. La visualización inicial 28714. Visualizar las opciones 28715. Ocultar las opciones 28816. El mensaje de confirmación 289

M. Un último ejemplo de formulario elaborado 290

1. Objetivo 2902. La estructura del formulario 2913. Los objetos HTML5 2914. El código completo del formulario 2935. La visualización sin estilos 2956. El diseño general 2967. El diseño del formulario 2968. El formato de las secciones 2979. El diseño de los elementos de la lista 29910. El diseño de las etiquetas 29911. Los campos de tipo <input> 30012. El botón de envío del formulario 301

N. Crear botones con símbolos 302

1. Objetivo 302




2. El formulario 3023. Crear una clase para los botones 3034. El pseudo-elemento ::before 3045. El contenido del pseudo-elemento ::before 3046. Aplicar las clases 3057. La visualización del formulario 3058. Otros ejemplos similares 305

O. Los generadores de botones en línea 306

1. Funcionalidad 3062. CSS3 Button 3063. CSS3 Button Generator 3074. CSS Drive Button Generator 3095. CSS3 Button Creator 310

Capítulo 10: Las transformaciones CSS3

A. Situación actual y objetivos 312

B. La transformación 312

1. La propiedad 3122. El punto de referencia 313

C. El desplazamiento 314

1. En los dos ejes 3142. En un eje solamente 315

D. El cambio de escala 315

1. La escala proporcional 3152. La escala no proporcional 3163. El cambio de escala en una única dirección 316

E. La rotación 316




F. La deformación 317

1. La deformación en los dos ejes 3172. La deformación un único eje 318

G. Aplicar todas las transformaciones 319

H. Los generadores en línea 319

1. CSS 3.0 Maker 3192. CSS3 Generator 3203. WestCIV 321

I. Un menú de ejemplo 321

1. Objetivo 3212. La estructura del menú 3213. El diseño 3224. El resultado visual: 322

J. Ejemplo de una galería Polaroid 323

1. Objetivo 3232. La estructura de la galería 3233. El diseño de la galería 3244. Los estilos para las fotografías 3245. La transformación 3256. El resultado visual 326

K. Ejemplo de una imagen con relieve 327

1. Objetivo 3272. La fotografía 3283. La sombra bajo la fotografía 328

Capítulo 11: Las transiciones con CSS3





B. Aplicar transiciones 334

1. Las transiciones 3342. Las propiedades CSS 334

C. Aplicar una transición de desplazamiento 336

1. Objetivo 3362. El código necesario 3363. Las propiedades de la transición 3374. El resultado 337

D. Otras propiedades de las transiciones 338

1. El movimiento 3382. El inicio de la transición 3393. La sintaxis abreviada 3404. Las transiciones múltiples 340

E. Los generadores en línea 342

1. CSS3 Generator 3422. CSS 3.0 Maker 3433. Crear las curvas de Bézier 344

F. Ejemplo de un menú de navegación interactivo 344

1. Objetivo 3442. El diseño del formulario 3453. Las transiciones 3454. La visualización 346

G. Ejemplo de un diaporama interactivo 347

1. Objetivo 3472. La estructura del diaporama 3473. Las transformaciones 348




4. Las transiciones 3495. La visualización 350

H. Ejemplo de un menú de navegación "con cajones" 351

1. Objetivo 3512. La estructura del menú de navegación 3523. El diseño del formulario 3534. El diseño de los cajones 3545. La visualización inicial 3556. Las transiciones 3557. La visualización 3568. Los menús de navegación "flashy" 357

I. Ejemplo de interfaz en "acordeón" 357

1. Objetivo 3572. La estructura del "acordeón" 3573. El diseño del "acordeón" 3584. El diseño de las zonas de visualización desplegables 3595. La visualización 360

Capítulo 12: Las animaciones en CSS3


B. La creación de una animación 362

C. Un desplazamiento simple 363

1. Objetivo 3632. La estructura 3633. La animación 3644. La visualización 366

D. Rotación y transparencia 366




1. Objetivo 3662. La estructura 3663. La animación 3664. La visualización 368

E. Un formulario que parpadee 368

1. Objetivo 3682. La estructura del formulario 3683. El diseño 3694. La animación 3695. La visualización 370

F. Una ventana modal 370

1. Objetivo 3702. El botón 3703. La ventana modal 3714. El botón de cierre 3735. Ocultar el cuerpo de la página 3746. La animación de apertura 3757. Activar la animación de apertura 3768. Aplicar la ocultación 3769. La animación de cierre 37610. Activar la animación de cierre 37711. El código completo 37712. La visualización de la página 382

Capítulo 13: Los elementos multimedia: audio y vídeo

A. Situación actual 384

B. Insertar audio 384

1. El elemento audio 3842. Los controles de audio 3843. La apariencia del reproductor de audio 385




4. Los atributos para el audio 3855. Los formatos de audio 3866. Diseñe sus propios controles de audio 3877. Los antiguos navegadores 388

C. Insertar vídeo 388

1. El elemento vídeo 3882. Los atributos para el vídeo 3883. La apariencia del reproductor de vídeo 3894. Los formatos de vídeo 3905. Convertir vídeos 391

Capítulo 14: El elemento de diseño Canvas

A. La creación de imágenes bitmap con JavaScript 394

B. Las técnicas propuestas 394

C. Dibujar un rectángulo 394

1. El elemento canvas 3942. El rectángulo 3953. El código completo y la visualización 3964. Aplicar un color de relleno 3975. Aplicar una sombra 397

D. Dibujar un círculo 398

E. Trazar rayas 399

F. Trazar bordes 399

G. Añadir texto 400




H. Aplicar un degradado 401

I. Las transformaciones 402

J. La manipulación de objetos 402

Capítulo 15: El diseño web flexible


B. Las búsquedas "Media queries" 404

1. Objetivo 4042. Con HTML 4 y CSS 2.1 4043. Los criterios de búsqueda de Media Queries en CSS3 4054. La sintaxis de las búsquedas Media Queries 4065. Los valores máximos y mínimos 4066. Los operadores lógicos 4077. Búsquedas para diferentes soportes 408

C. El tamaño de las pantallas 409

1. La problemática actual 4092. El tamaño del viewport 4103. El zoom de la pantalla 4134. El test de visualización en pantalla 413

D. Las estructuras flexibles 419

1. Las técnicas 4192. Un ejemplo sencillo 4193. Ejemplo de un sitio web sencillo 4214. Aplicar un diseño adaptable sencillo 4265. Las plantillas flexibles 431




E. Las imágenes flexibles 431

1. El desbordamiento de las imágenes 4312. Imponer un ancho máximo 432

F. Crear un diseño flexible 435

1. Las dos estrategias 4352. Diseñar un sitio web adaptable 4363. Otros ejemplos de diseño web adaptable 437

G. El sitio web Food Sense 437

1. La visualización 4372. La estructura principal 4403. El viewport 4444. La visualización para las pantallas de mayor tamaño 4445. La visualización para las tabletas táctiles 4456. La visualización para los smartphones 448

Capítulo 16: Un diseño HTML5/CSS3: The Cat Template

A. La fuente 454

B. La estructura HTML5 455

1. Dos partes 4552. El contenedor principal 4553. El encabezado 4564. El diaporama 4575. El mensaje 4586. Los cuatro artículos 4597. El artículo solo 4608. El pie de página 460

C. El diseño CSS3 461




1. Objetivo 4612. El diaporama 4613. Las fotografías de los artículos 4624. Al pasar el cursor sobre las fotografías de los artículos 4635. Los botones Read more 463

Capítulo 17: Un diseño HTML5/CSS3: FlipThru

A. La fuente 466


1. La caja principal 4672. El menú de navegación 4673. El encabezado 4684. La zona central 4685. El pie de página 469


1. El contenedor principal 4702. Las imágenes de los artículos 470

D. El elemento de interfaz de tipo acordeón 471

1. El funcionamiento 4712. La estructura 4713. El fondo del acordeón 4724. La lista <ul> 4735. Los títulos <h3> 4736. Los artículos 4747. Las imágenes de los artículos 4758. La acción de pasar el cursor 4759. La aparición de los artículos 476

Capítulo 18: Un diseño HTML5/CSS3: dConstruct




A. La fuente 480


1. La estructura principal 4812. El encabezado 4813. Los oradores 4824. Los patrocinadores 4835. El pie de página 483


1. Las tipografías incorporadas 4842. Las sombras aplicadas al texto 4863. Las sombras de los contenedores 487

D. Los efectos al pasar el cursor sobre los oradores 487

1. El funcionamiento 4872. La estructura 4893. Los estilos iniciales 4894. Al pasar el cursor sobre el vínculo 490

E. El diseño adaptable 491

1. La visualización modificada 4922. El menú de navegación principal 4933. El título y el eslogan 4944. Las imágenes de los oradores 495

índice 497




HTML5 y CSS3 - herrerobooks.com · Capítulo 2: La nueva sintaxis HTML5 A. El doctype 44 1. La...

Documents

Transcript of HTML5 y CSS3 - herrerobooks.com · Capítulo 2: La nueva sintaxis HTML5 A. El doctype 44 1. La...