SESION 5

CURSO DE HTML5

CURSO DE HTML5

REPASO DE TRASNFORMACIONES, TRANSICIONES Y ANIMACIONES.

Propiedad Transform:
La propiedad transform sirve para modificar los vectores que renderizan el modelo de
cajas.
Recordemos: un motor de renderizado, como el de los navegadores funciona dibujando
figuras grficos a partir de parmetros matemticos, los cuales trazan vectores en la
pantalla, y modificando estos parmetros, podemos modificar el renderizado de una
figura en HTML., CSS3 nos facilita la labor implementando la propiedad transform para esta
funcionalidad.

CURSO DE HTML5

PROPIEDAD TRANSFORM:

Los posibles valores que se pueden aplicar a transform estn agrupadas en 4 tipos y son:

matrix(n,n,n,n,n,n)

rotate(angulo)

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
translate(x,y)

rotateX(angulo)

translate3d(x,y,z)

rotateY(angulo)

translateX(x) rotateZ(angulo)
translateY(y) skew(x-angulo,y-angulo)
translateZ(z) skewX(angulo)
scale(x,y)

skewY(angulo)

scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)

perspective(n)

perspective-origin(x, y)

rotate3d(x,y,z,angulo)

CURSO DE HTML5

PROPIEDAD TRANSFORM:

Translate (trasladar), mueve el elemento HTML sobre sus ejes X(horizontal),

Y(vertical) y opcionalmente Z (profundidad en 3d) de haberlo.

CURSO DE HTML5

PROPIEDAD TRANSFORM:

Rotate (rotar) gira el elemento HTML en 3d sobre sus ejes X(horizontal),

Y(vertical) y Z (profundidad).

CURSO DE HTML5

PROPIEDAD TRANSFORM:

Scale (scalar) estira o contrae el elemento HTML en el eje x y en el eje y, tambin

se puede escalar opcionalmente en el eje z utilizando el modo de 3d.

CURSO DE HTML5

PROPIEDAD TRANSFORM:
Skew (sesgar) sesga los lados del elemento HTML, en sus ejes x, y y z.

CURSO DE HTML5

PROPIEDADES PARA EL USO DE 3D:

Perspective
Pespective-Origin
Transform-style
Transform-Origin

CURSO DE HTML5

PROPIEDAD TRANSITION:
La propiedad Transition es un shorthand de las propiedades:
Transition-delay:

con un
segundos.

Es el retraso antes de iniciar la transicin, su valor va

numero seguido de la letra s que representa los

Transition-duration: Es la duracin que va a tardar en cambiar de una

propiedad a otra u otras, su valor va con un numero
seguido de la letra s que representa los segundos.
Transition-property:
afectar la

Se indican todas las propiedades a las que va a

transicin, por defecto es all(todas).

Transition-timing-function: Establece la funcin que controla la curva de

tiempo.

CURSO DE HTML5

PROPIEDAD ANIMATION:
La propiedad Animation es un shorthand de las propiedades:
Animation-delay:

Retraso de la animacin.

Animation-direction:

Sentido de la animacin.

Animation-duration:

Tiempo en que demora la animacin.

Animation-fill-mode:

En que posicin terminara el elemento

Animation-iteration-count: Numero de iteraciones.

Animation-name:

Nombre del keyframes con los cuadros a animar.

Animation-play-state:

Establece una pausa en la animacion

Animation-timing-function: Establece la funcin que controla la curva de tiempo.

EJERCICIOS

CURSO DE HTML5

CURSO DE HTML5

Qu es JavaScript?
JavaScript es un lenguaje de programacin, al igual que PHP, si bien tiene
diferencias importantes con ste. JavaScript se utiliza principalmente del lado del
cliente (es decir, se ejecuta en nuestro ordenador, no en el servidor) permitiendo
crear efectos atractivos y dinmicos en las pginas web. Los navegadores
modernos interpretan el cdigo JavaScript integrado en las pginas web.

Qu es un framework?
Tambien llamados libreras.
Los frameworks tienen como objetivo principal ofrecer una funcionalidad definida,
auto contenida, siendo construidos usando patrones de diseo, y su caracterstica
principal es su alta cohesin y bajo acoplamiento.

CURSO DE HTML5

Qu es DOM y que es BOM?

El Modelo de Objetos del Documento (DOM) es una interfaz de programacin de
aplicaciones (API) para documentos HTML y XML. Define la estructura lgica de los
documentos y el modo en que se accede y manipula un documento.

Las versiones 3.0 de los navegadores Internet Explorer y Netscape Navigator

introdujeron el concepto deBrowser Object Modelo BOM, que permite
acceder y
modificar las propiedades de las ventanas del propio navegador.
Mediante BOM, es posible redimensionar y mover la ventana del navegador, modificar
el texto que se muestra en la barra de estado y realizar muchas otras manipulaciones
no relacionadas con el contenido de la pgina HTML.

Qu son eventos?

Qu es programacin web Front-End?

CURSO DE HTML5

CURSO DE HTML5
Selectores y Funciones Bsicas de JQUERY:
-

.html
.text
.not
.has
.firts
.eq
.lenght
.attr
.removeAttr
.val
.css
.addClass
.removeClass
.toggleClass
.hasClass
.width
.height

.appendTo
.append
.prependTo
.prepend
.insertAfter
.insertBefore
.after
.before
.clone
.remove
.next
.prev
.parent
.children
.siblings
.each

PREGUNTAS Y
RECOMENDACIONES
- Joel Cauti Rojas
https://facebook.com/joel.cautirojas
Joel.cauti@gmail.com