PDF de programación - CSS3 y Javascript Avanzado

CSS3 y Javascript
avanzado


Jordi Collell Puig

PID_00176160

CC-BY-SA • PID_00176160

CSS3 y Javascript avanzado

Los textos e imágenes publicados en esta obra están sujetos –excepto que se indique lo contrario– a una licencia de
Reconocimiento-Compartir igual (BY-SA) v.3.0 España de Creative Commons. Se puede modificar la obra, reproducirla, distribuirla
o comunicarla públicamente siempre que se cite el autor y la fuente (FUOC. Fundació per a la Universitat Oberta de Catalunya), y
siempre que la obra derivada quede sujeta a la misma licencia que el material original. La licencia completa se puede consultar en:
http://creativecommons.org/licenses/by-sa/3.0/es/legalcode.ca

CC-BY-SA • PID_00176160

Índice

CSS3 y Javascript avanzado

1.1.
1.2.

1. CSS, especificación tercera..............................................................
Introducción al CSS ....................................................................
La especificación tercera (CSS3) ..................................................
1.2.1. CSS en la web ................................................................
Familias de navegadores .............................................................
Beneficios del uso del CSS3 ........................................................
La mejora progresiva ...................................................................

1.3.
1.4.
1.5.


2. Novedades CSS3...................................................................................
2.1. Nuevos selectores ........................................................................
2.1.1.
Selectores de atributos ...................................................
2.1.2. Combinadores (no soportado por IE6) ..........................
2.1.3.
Pseudo-clases ..................................................................
Pseudo-elementos ..........................................................
2.1.4.
2.2. Colores RGBA y opacidad ...........................................................
2.2.1.
RGBA ..............................................................................
2.2.2. Colores HSL ...................................................................
2.2.3. Opacity (opacidad) ..........................................................
2.3. Nuevas propiedades ....................................................................
Esquinas redondeadas (border-radius) ..........................
2.3.1.
2.3.2.
Sombras (box-shadow, text-shadow) .............................
2.3.3. Múltiples imágenes de fondo ........................................
2.3.4.
Borders (filetes) con imágenes ........................................
2.3.5. Columnas de texto ........................................................
2.3.6. WebFonts .......................................................................
2.3.7. MediaQueries .................................................................
Transiciones CSS ..........................................................................
Ejercicios ......................................................................................

2.4.
2.5.


3. Bibliotecas Javascript.......................................................................
¿Por qué una biblioteca? .............................................................
¿Qué nos ha de ofrecer una biblioteca Javascript? .....................
¿Qué bibliotecas estudiaremos? ..................................................

3.1.
3.2.
3.3.


4.

jQuery....................................................................................................
4.1. Obtener jQuery ...........................................................................
4.2. Cómo funciona jQuery: el objeto $ ...........................................
Interactuando con el DOM .........................................................
4.3.
4.3.1.
Selectores, filtros y CSS ..................................................
4.4. Manipulando el DOM .................................................................
4.4.1.
Propiedades CSS .............................................................
4.4.2. Atributos de los nodos ..................................................

7
7
7
8
9
10
10

11
11
11
12
12
14
14
14
14
15
16
16
17
19
19
21
21
23
23
25

26
26
26
27

28
28
28
29
30
32
32
33

CC-BY-SA • PID_00176160

CSS3 y Javascript avanzado

4.5.
4.6.

4.4.3. Añadir contenido en el DOM .......................................
4.4.4.
Borrar nodos ..................................................................
Funciones generales ....................................................................
Sistema de eventos ......................................................................
4.6.1.
Tabla de eventos ............................................................
4.7.
Formularios ..................................................................................
4.8. AJAX ............................................................................................
4.9. Componentes (widgets) ...............................................................
4.10. Patrones de uso ...........................................................................


5. Prototype..............................................................................................
Interactuando con el DOM .........................................................
5.1.
5.2.
Sistema de eventos ......................................................................
5.3. AJAX ............................................................................................
5.4. Utilidades generales ....................................................................
5.5. Componentes (widgets) ...............................................................


6. YUI..........................................................................................................
Trabajando con el DOM .............................................................
6.1.
6.2.
Sistema de eventos ......................................................................
6.3. Herramientas y utilidades ...........................................................
6.3.1.
Peticiones AJAX .............................................................
6.3.2. Animación ......................................................................
6.4. Componentes (widgets) ...............................................................


7. MooTools...............................................................................................
Trabajando con el DOM .............................................................
7.1.
7.2.
Sistema de eventos ......................................................................
7.3. AJAX ............................................................................................
7.4. Animación ...................................................................................
7.5. Componentes (widgets) ...............................................................

8.1.


8. Librerías Javascript para canvas...................................................
Introducción ................................................................................
8.1.1.
¿Qué es el objeto canvas? ..............................................
8.1.2. Canvas sin nada ............................................................
8.1.3. Dibujar cosas ..................................................................
8.1.4.
Transformaciones ...........................................................
8.1.5. Animación ......................................................................
8.2. Raphaël.js .....................................................................................
8.2.1.
Inicialización ..................................................................
8.2.2. Dibujo y formas .............................................................
8.2.3. Animación ......................................................................
EaselJS ..........................................................................................
8.3.1. Classes clave ...................................................................
8.4. CanvaScript .................................................................................
8.5.
Processing ....................................................................................

8.3.

34
35
35
37
39
40
41
42
43

45
45
46
47
47
48

49
49
50
51
51
51
52

53
53
55
55
56
57

58
58
58
58
59
64
66
68
68
69
71
72
73
74
79

CC-BY-SA • PID_00176160

CSS3 y Javascript avanzado

8.6.

Ejercicio .......................................................................................


9. Ejercicios...............................................................................................

79

83

CC-BY-SA • PID_00176160

7

CSS3 y Javascript avanzado

1. CSS, especificación tercera

1.1. Introducción al CSS

El CSS es un lenguaje de estilos empleado para definir la presentación, el for-
mato y la apariencia de un documento de marcaje, sea html, xml, o cualquier
otro. Comúnmente se emplea para dar formato visual a documentos html o
xhtml que funcionan como espacios web. También puede ser empleado en
formatos xml, u otros tipos de documentos de marcaje para la posterior gene-
ración de documentos.

Las hojas de estilos nacen de la necesidad de diseñar la información de tal
manera que podemos separar el contenido de la presentación y, así, por una
misma fuente de información, generalmente definida mediante un lenguaje
de marcaje, ofrecer diferentes presentaciones en función de dispositivos, servi-
cios, contextos o aplicativos. Por lo que un mismo documento html, mediante
diferentes hojas de estilo, puede ser presentado por pantalla, por impresora,
por lectores de voz o por tabletas braille. Separamos el contenido de la forma,
composición, colores y fuentes.

La especificación del CSS la mantiene el World Wide Web Consortium (W3C
http://www.w3c.org).

1.2. La especificac