09. Creando interfaces de usuario animadas y adaptables

Creando interfaces de usuario animadas y adaptables

Danae Aguilar Guzmán MCT, MS, MCTS, MCP

[email protected]

Contenido del Módulo

Animando objetos con transiciones CSS

Aplicando transformaciones 3-D y 2-D

Animaciones con keyFrames

Trabajando con formularios


Nos permiten agregar efectos cuando cambiamos de un estilo a otro, usando solo CSS3

1. Especificar la propiedad CSS a la que queremos agregar el efecto

2. Especificar la duración del efecto.


Transiciones:

div { width: 100px; height: 100px; background: red; transition: width 2s; -webkit-transition: width 2s; /* Safari */ } div:hover { width: 500px; }


Transiciones múltiples:

Las agregamos separadas por comas.

div { width: 100px; height: 100px; background: blue; transition: width 2s, height 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; } div:hover { width: 200px; height: 200px; transform: rotate(180deg); -webkit-transform: rotate(180deg); /* Safari */ }


Propiedades de transición:

transition

transition-property

transition-duration

transition-timing-function

transition-delay

div { transition: width 1s linear 2s; /* Safari */ -webkit-transition: width 1s linear 2s; }


Propiedades de transición

div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Safari */ -webkit-transition-property: width; -webkit-transition-duration: 1s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 2s; }


Transformaciones 2D.

Permiten cambiar la forma, tamaño y posición.

Chrome y Safari requieren el prefijo -webkit-

translate()

rotate()

scale()

skew()

matrix()



transform: translate(50px,100px);

transform: rotate(30deg);

transform: scale(2,4);

transform: skew(30deg,20deg);

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

div { transform: rotate(30deg); -webkit-transform: rotate(30deg); }



• rotateX()

• rotateY()

div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); }

Animaciones CSS3

CSS3 @keyframes

Definiendo:

@keyframes miAnimacion { from {background: red;} to {background: yellow;} } /* Safari y Chrome */ @-webkit-keyframes miAnimacion { from {background: red;} to {background: yellow;} }

Animaciones CSS3

CSS3 @keyframes

Aplicando:

.animar { animation: miAnimacion 5s; -webkit-animation: miAnimacion 5s; }

Animaciones CSS3

CSS3 @keyframes

Aplicando por partes:

@keyframes miAnimacion { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }

Ajustando el UI basado en media queries

Media queries

Permiten adaptar el UI para diferentes tamaños

Especifican media types y alguna condición:

Tipo screen, y debe ser a color

@media (max-width: 480px) { ... }

<link rel="stylesheet" media="screen and (color)" href="ejemplo.css" />


Media queries

Media all puede obviarse. Estos dos son iguales:

Se puede especificar la orientación de la página:

@media all and (min-width:500px) { … } @media (min-width:500px) { … }

@media (orientation: portrait) { … } @media all and (orientation: portrait) { … }


Media queries

Se puede especificar varios separándolos por comas:

Si la lista es vacia, se evalua a true:

@media screen and (color), projection and (color) { … }

@media all { … } @media { … }


Media queries

(device-width: 800px)

Se aplicará cuando el ancho sea exactamente 800px

(device-height: 600px)

Se aplicará cuando el alto sea exactamente 600px


Orientacion

(orientation:portrait)

(orientation:landscape)

Aspect ratio @media screen and (device-aspect-ratio: 16/9) { … }

@media screen and (device-aspect-ratio: 32/18) { … }



Aplican a dispositivos de 1280 por 720 pixeles.


autocomplete

<form autocomplete="on"> Nombre<input type="text" name="fname"><br> Apellido: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form>


novalidate

autofocus

<form novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>

Nombre:<input type="text" name="nombre" autofocus>


form

Permite tener un input fuera del form

<form id="form1"> E-mail: <input type="email" name="user_email"> <input type="submit"> Nombre:<input type="text" name="nombre"> </form> Apellido: <input type="text" name="lname" form="form1">


formaction

Permite diferentes actions para los botones submit

<form action="pagina1.aspx"> Nombre: <input type="text" name="fname"><br> Apellido: <input type="text" name="lname"><br> <input type="submit" value="enviar"><br> <input type="submit" formaction="pagina2.aspx" value="enviar 2"> </form>


formnovalidate

Imagen con height y width

Usar una imágen como boton de submit

<input type="submit" formnovalidate value="Enviar sin validar">

<input type="image" src="img_submit.gif" alt="Enviar" width="48" height="48">


list

<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>


multiple

pattern

<form > Seleccione varias imágenes: <input type="file" name="img" multiple> <input type="submit"> </form>

Código: <input type="text" name="codido" pattern="[A-Za-z]{3}" title="Codigo de tres letras">


placeholder

required

Nombre: <input type="text" name="fname" placeholder="Nombre">

Nombre de Usuario: <input type="text" name="usrname" required>


points

min y max

<input type="number" name="points" step="3">

Fecha mayor a 2000-01-01: <input type="date" min="2000-01-02">

<input type="number" min="1" max="5">

Software

09. Creando interfaces de usuario animadas y adaptables