CSS3-y-Javascript-Avanzado.pdf

(759 KB) Pobierz
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
CSS3 y Javascript avanzado
Índice
1.
CSS, especificación tercera..............................................................
1.1.
1.2.
1.3.
1.4.
1.5.
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 ...................................................................
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
2.
Novedades CSS3...................................................................................
2.1.
Nuevos selectores ........................................................................
2.1.1.
2.1.2.
2.1.3.
2.1.4.
2.2.
2.2.1.
2.2.2.
2.2.3.
2.3.
2.3.1.
2.3.2.
2.3.3.
2.3.4.
2.3.5.
2.3.6.
2.3.7.
2.4.
2.5.
Selectores de atributos ...................................................
Combinadores (no soportado por IE6) ..........................
Pseudo-clases ..................................................................
Pseudo-elementos ..........................................................
RGBA ..............................................................................
Colores HSL ...................................................................
Opacity
(opacidad) ..........................................................
Esquinas redondeadas (border-radius) ..........................
Sombras (box-shadow, text-shadow) .............................
Múltiples imágenes de fondo ........................................
Borders
(filetes) con imágenes ........................................
Columnas de texto ........................................................
WebFonts .......................................................................
MediaQueries .................................................................
Colores RGBA y opacidad ...........................................................
Nuevas propiedades ....................................................................
Transiciones CSS ..........................................................................
Ejercicios ......................................................................................
3.
Bibliotecas Javascript.......................................................................
3.1.
3.2.
3.3.
¿Por qué una biblioteca? .............................................................
¿Qué nos ha de ofrecer una biblioteca Javascript? .....................
¿Qué bibliotecas estudiaremos? ..................................................
4.
jQuery....................................................................................................
4.1.
4.2.
4.3.
4.4.
Obtener jQuery ...........................................................................
Cómo funciona jQuery: el objeto $ ...........................................
Interactuando con el DOM .........................................................
4.3.1.
4.4.1.
4.4.2.
Selectores, filtros y CSS ..................................................
Propiedades CSS .............................................................
Atributos de los nodos ..................................................
Manipulando el DOM .................................................................
CC-BY-SA •
PID_00176160
CSS3 y Javascript avanzado
4.4.3.
4.4.4.
4.5.
4.6.
4.7.
4.8.
4.9.
Añadir contenido en el DOM .......................................
Borrar nodos ..................................................................
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
Funciones generales ....................................................................
Sistema de eventos ......................................................................
4.6.1.
Tabla de eventos ............................................................
Formularios ..................................................................................
AJAX ............................................................................................
Componentes (widgets) ...............................................................
4.10. Patrones de uso ...........................................................................
5.
Prototype..............................................................................................
5.1.
5.2.
5.3.
5.4.
5.5.
6.
Interactuando con el DOM .........................................................
Sistema de eventos ......................................................................
AJAX ............................................................................................
Utilidades generales ....................................................................
Componentes (widgets) ...............................................................
YUI..........................................................................................................
6.1.
6.2.
6.3.
Trabajando con el DOM .............................................................
Sistema de eventos ......................................................................
Herramientas y utilidades ...........................................................
6.3.1.
6.3.2.
6.4.
Peticiones AJAX .............................................................
Animación ......................................................................
Componentes (widgets) ...............................................................
7.
MooTools...............................................................................................
7.1.
7.2.
7.3.
7.4.
7.5.
Trabajando con el DOM .............................................................
Sistema de eventos ......................................................................
AJAX ............................................................................................
Animación ...................................................................................
Componentes (widgets) ...............................................................
8.
Librerías Javascript para canvas...................................................
8.1.
Introducción ................................................................................
8.1.1.
8.1.2.
8.1.3.
8.1.4.
8.1.5.
8.2.
8.2.1.
8.2.2.
8.2.3.
8.3.
8.4.
8.5.
8.3.1.
¿Qué es el objeto canvas? ..............................................
Canvas sin nada ............................................................
Dibujar cosas ..................................................................
Transformaciones ...........................................................
Animación ......................................................................
Inicialización ..................................................................
Dibujo y formas .............................................................
Animación ......................................................................
Classes
clave ...................................................................
Raphaël.js .....................................................................................
EaselJS ..........................................................................................
CanvaScript .................................................................................
Processing ....................................................................................
CC-BY-SA •
PID_00176160
CSS3 y Javascript avanzado
8.6.
9.
Ejercicio .......................................................................................
79
83
Ejercicios...............................................................................................

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin