ANIMACIONES Y TRANCICIONES
Tranciciones:
1) transition-property: indica sobre qué propiedad del elemento se aplicará la
transición. Pueden especificarse varias propiedades separándolas por
comas. El valor por defecto es ‘all’ que indica que la transición se aplicará
sobre todas las propiedades del elemento. Un valor válido para esta
propiedad sería, por ejemplo, ‘width’.
2) transition-duration: indica el tiempo que tardará la transición en completarse.
El valor por defecto es 0. Ejemplos de valores válidos para esta propiedad
pueden ser: 2s (2 segundos), 300ms (300 milisegundos), etc…
3) transition-timing-function: indica cómo será la progresión de la transición. El
valor por defecto es ‘ease’. Los valores que acepta esta propiedad son los
siguientes:
a) linear: la transición se produce en forma de progresión lineal. Tarda lo
mismo desde que empieza hasta que acaba.
b) ease: la transición se produce de forma lenta al principio, luego más
rápido, y termina otra vez lenta (valor por defecto).
c) ease-in: la transición comienza lenta y luego va más rápido.
d) ease-out: la transición comienza rápida y termina lenta.
e) ease-in-out: la transición comienza y acaba lenta. Igual que ‘ease’ pero
de forma más notable.
f) cubic-bezier(n,n,n,n): permite definir nuestro propio intervalo de
progresión. n: valor entre 0 y 1.
4) transition-delay: es el tiempo que tardará la transición en comenzar. Por
defecto es 0.
5) transition: permite unificar todas las propiedades anteriores en una sola. Un
ejemplo sería transition: width 3s ease-in 200ms
Animaciones:
1) animation-name: es el nombre de la animación que actuará sobre el
elemento. Recordemos que en el punto anterior (keyframes) para definir
una animación mediante un keyframe debíamos añadir también el nombre
de la animación. Pues es ese nombre.
2) animation-duration: el tiempo que tardará la animación desde su inicio hasta
su fin.
3) animation-timing-function: del mismo modo que en las transiciones, esta
propiedad indica cómo progresará la animación. Acepta los mismos valores
que la propiedad transition-timing-function.
4) animation-iteration-count: indica el número de veces que se repetirá la
animación. Su valor por defecto es 1. El valor «infinite» indica que se
repetirá indefinidamente.
5) animation-direction: indica el orden en el que ejecutará la animación. Acepta
los valores «normal» y «alternate». Si tuviesemos dos repeticiones de la
animación (animation-iteration-count: 2) y el valor de esta propiedad fuese
alternate, primero se ejecutaría la animación en orden normal 0 a 100% y
luego al revés 100% a 0. Si fuese normal, las dos veces se ejecutaría de 0 a
100%. El valor por defecto es normal.
6) animation-play-state: indica si la animación está corriendo o pausada.
Acepta los valores running (valor por defecto) y paused.
7) animation-delay: igual que en las transiciones, indica el retardo con el que
se iniciará la animación. Por defecto 0.
8) animation-fill-mode: pues básicamente lo que hace esta propiedad es
decidir si los valores de las propiedades que ha modificado la animación
vuelven a su estado original (antes de la animación) o no. Realmente vale
para ver qué se hace con los valores de las propiedades fuera del periodo
de duración de la animación. Acepta los valores: «none», «forwards»,
«backwards» y «both». El valor por defecto es none que indica que cuando
acabe la animación el elemento recuperará los valores que tenían de sus
propiedades antes de iniciarse la animación.
9) animation: permite unificar las propiedades anteriores en una sola. Sería
algo así: animation: mi-animacion 3s ease 0.5s 1 normal none.
Transformaciones
translate(x,y): Traslada o mueve un elemento a lo largo de los ejes
horizontal ( x ) y vertical ( y )
translateX(x): Traslada o mueve un elemento solo a lo largo del eje
horizontal ( x )
translateY(y): Traslada o mueve un elemento solo a lo largo del eje
vertical ( y )
scale(x,y): Redimensiona un elemento 2D
scaleX(x): Redimensiona un elemento solo a lo largo de su eje horizontal ( x
)
scaleY(y): Redimensiona un elemento solo a lo largo de su eje vertical ( y )
skew(ax,ay): Sesga un elemento a lo largo de sus dos ejes
skewX(ax): Sesga un elemento a lo largo del eje X (horizontal), donde ax es el
ángulo de deformación.
skewY(ay): Sesga un elemento a lo largo del eje X (vertical), donde ay es el
ángulo de deformación.
rotate(a): Define una rotation 2D, donde a es el ángulo ( en grados
hexagesimales ), donde a es el ángulo de rotación.
matrix(n,n,n,n,n,n): Define una transformación 2D, utilizando una matriz de 6
valores.
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): Define una transformación 3D,
utilizando una matriz de 4x4 = 16
valores.
FLEXBOX:
Flexbox es un sistema de elementos flexibles que llega con la idea de olvidar
estos mecanismos y acostumbrarnos a una mecánica más potente, limpia y
personalizable, en la que los elementos HTML se adaptan y colocan
automáticamente y es más fácil personalizar los diseños. Está especialmente
diseñado para crear, mediante CSS, estructuras de una sóla dimensión.
DISEÑO RESPONSIVO:
Aunque van de la mano, hay que diferenciar entre Responsive Web Design o,
lo que viene a ser lo mismo, Diseño Web Adaptativo, y Mobile First Web. Como
su propio nombre indica, el Diseño Web Adaptativo es aquel capaz de
adaptarse a diferentes tamaños y dispositivos, es decir, dependiendo de qué
dispositivo sea en el que se cargue, tu sitio web se verá más accesible y fácil
de usar. Sin embargo, lo que propone el término Mobile First es empezar a
diseñar un sitio web desde la resolución más pequeña para ir creciendo y
adaptando el contenido y el diseño a la resolución más grande.
SELECTORES BASICOS Y AVANZADOS:
SELECTOR BASICO: Se utiliza para seleccionar todos los elementos de la
página. El siguiente ejemplo elimina el margen y el relleno de todos los
elementos HTML (por ahora no es importante fijarse en la parte de la
declaración de la regla CSS):
*{
margin: 0;
padding: 0;
}
El selector universal se indica mediante un asterisco (*). A pesar de su
sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se
pueda aplicar a todos los elementos de una página.
No obstante, sí que se suele combinar con otros selectores y además, forma
parte de algunos hacks muy utilizados, como se verá más adelante.
SELECTOR AVANZADO: Utilizando solamente los selectores básicos de la
sección anterior, es posible diseñar prácticamente cualquier página web. No
obstante, CSS define otros selectores más avanzados que permiten simplificar
las hojas de estilos.
Desafortunadamente, el navegador Internet Explorer 6 y sus versiones
anteriores no soportaban este tipo de selectores avanzados, por lo que su uso
no era común hasta hace poco tiempo.
JAVASCRIPT
ETIQUETAS NOSCRIPT
Algunos navegadores no disponen de soporte completo de JavaScript, otros
navegadores permiten bloquearlo parcialmente e incluso algunos usuarios
bloquean completamente el uso de JavaScript porque creen que así navegan
de forma más segura.
En estos casos, es habitual que si la página web requiere JavaScript para su
correcto funcionamiento, se incluya un mensaje de aviso al usuario indicándole
que debería activar JavaScript para disfrutar completamente de la página. El
siguiente ejemplo muestra una página web basada en JavaScript cuando se
accede con JavaScript activado y cuando se accede con JavaScript
completamente desactivado.
SINTAXIS
La sintaxis de un lenguaje de programación se define como el conjunto de
reglas que deben seguirse al escribir el código fuente de los programas para
considerarse como correctos para ese lenguaje de programación.
La sintaxis de JavaScript es muy similar a la de otros lenguajes de
programación como Java y C. Las normas básicas que definen la sintaxis de
JavaScript son las siguientes:
No se tienen en cuenta los espacios en blanco y las nuevas líneas: como
sucede con XHTML, el intérprete de JavaScript ignora cualquier espacio en
blanco sobrante, por lo que el código se puede ordenar de forma adecuada
para entenderlo mejor (tabulando las líneas, añadiendo espacios, creando
nuevas líneas, etc.)
Se distinguen las mayúsculas y minúsculas: al igual que sucede con la sintaxis
de las etiquetas y elementos XHTML. Sin embargo, si en una página XHTML
se utilizan indistintamente mayúsculas y minúsculas, la página se visualiza
correctamente, siendo el único problema la no validación de la página. En
cambio, si en JavaScript se intercambian mayúsculas y minúsculas el script no
funciona.
No se define el tipo de las variables: al crear una variable, no es necesario
indicar el tipo de dato que almacenará. De esta forma, una misma variable
puede almacenar diferentes tipos de datos durante la ejecución del script.
No es necesario terminar cada sentencia con el carácter de punto y coma (;):
en la mayoría de lenguajes de programación, es obligatorio terminar cada
sentencia con el carácter ;. Aunque JavaScript no obliga a hacerlo, es
conveniente seguir la tradición de terminar cada sentencia con el carácter del
punto y coma (;).
Se pueden incluir comentarios: los comentarios se utilizan para añadir
información en el código fuente del programa. Aunque el contenido de los
comentarios no se visualiza por pantalla, si que se envía al navegador del
usuario junto con el resto del script, por lo que es necesario extremar las
precauciones sobre la información incluida en los comentarios.
JavaScript define dos tipos de comentarios: los de una sola línea y los que
ocupan varias líneas.
