sábado, 31 de mayo de 2014

CODIGO PARA AGREGAR UN DATO A MY SQL CON JSP
<%--
    Document   : agregar
    Created on : 1/06/2015, 10:27:41 AM
    Author     : EMORITHZY-16
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="conexion.jsp" %>
<%@ page session="true" %>
<!DOCTYPE html>
<%
    String user1=request.getParameter("good");
     String pass1=request.getParameter("bye");
     String usu=" ";String con=" ";
     if(user1!=null && pass1!=null);{
     String qry="INSERT INTO `login` (`user`, `pass`) VALUES ('"+user1+"', '"+pass1+"')";//"INSERT INTO login(user,pass)values('"+usu+"','"+con+"')";
     sql.executeUpdate(qry);
                    HttpSession sesionOk=request.getSession();
                    sesionOk.setAttribute("user1",usu);
                    sesionOk.setAttribute("pass1",con);
     %>
CREO QUE ESTE SI ES LO QUE NECESITA:

lunes, 19 de mayo de 2014

proyecto de cookies creado por brandom

usuario;

CODIGO

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<%@ page language="java" %>

<html>

<head>

<title>cokie input form</title>

</head>

<body>

<p><b>usuario;</b> <input type="text" name="username"><br>

</form>

</body>

</html>

cookie creada

siguiente pagina para el valor de la cookie

regresar

CODIGO

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<%@ page language="java" import="java.util.*" %>

String username=request.getParameter("username");

if(username==null) username="";

Date now = new Date();

String timestamp = now.toString();

Cookie cookie= new Cookie ("username",username) ;

cookie.setMaxAge(365*24*60*60);

response.addCookie(cookie);

<html>

<head>

<title>cookjie creada</title>

</head>

<body>

<h2>cookie creada</h2>

<p><a href="showcookievalue.jsp">siguiente pagina para el valor de la cookie</a></p>

<p><a href="index.jsp">regresar</a></p>

</body>

</html>

Bienvenido:

regresar

BRANDOM.

CODIGO

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<%@ page language="java" %>

String cookieName = "username";

Cookie cookies [] = request.getCookies();

Cookie myCookie = null;

if(cookies != null){

for(int i = 0; i < cookies.length; i++){

if(cookies [i].getName(). equals(cookieName)){

myCookie = cookies[i];

break;

}

<html>

<head>

<title>shoe save cookie</title>

</head>

<body>

if(myCookie == null){

Falla <%=cookieName%>

}else{

<p>Bienvenido: <p><a href="index.jsp">regresar</a></p><%=myCookie.getValue()%>.

}

</body>

</html>

lunes, 5 de mayo de 2014

Visiten este sitio esta genial¡¡¡¡¡¡

http://www.jonathanyuen.com/

Las tendencias de Diseño Web que más destacarán en 2014

El diseño web ha cambiado mucho en los últimos años. Y sigue en constante y veloz evolución.

Hemos estado analizando lo que se llevará en diseño y desarrollo web este año 2014 y hemos extraído las novedades que nos parecen más interesantes, y las hemos clasificado en tres grandes categorías:

Diseño, Programación y Usabilidad

Podíamos haber realizado la clasificación de muchas otras formas, pero ésta nos parecía la más clara y simple. En primer artículo (de las dos partes que lo conforman) veremos las tendencias en diseño que más nos han parecido interesantes:

Tendencias de Diseño:

1. Claridad-simplicidad (Flat desing)

El Flat desing se puso de moda el 2013, pero en éste 2014 seguirá siendo importante.

A los navegantes (generalizando) les suele atraer más las webs poco cargadas visualmente. Hay que conseguir centrar el enfoque en lo más importante, por eso las imágenes y el texto son los que tienen más protagonismo, y ello se consigue realizando diseños generalmente planos, introduciendo espacios en blanco bien utilizados (el espacio en blanco ayuda a que el contenido resalte),evitando los brillos, los degradados, los relieves, las texturas y los sombreados.

Os dejamos unos ejemplos bastante interesantes en: What Simplicity Really Means y en The Importance Of White Space In Web Design With Examples (En inglés)
Puedes revisar esta guía para saber cómo implementarlo: The ultimate guide to flat design (En inglés)

2. Fotos de background

Las web con grandes fotos de fondo seguirán al igual que en el 2013, llamando la atención de los usuarios, ya que proporcionan una apariencia agradables y son muy usadas en los diseños limpios.

Puedes ver algunos ejemplos en: Large Background Images In Web Design: Tips And Examples (En inglés)

3. Fondos en video

Se habla que el 2014 es el año de la consolidación del uso de los vídeos como fondo de web.
El contenido audiovisual es motivo de llamada de atención, y es muy usado para transmitir más fácilmente una idea a los clientes.

Para saber un poco más os dejamos este enlace: Video in Web Design (En inglés)

4. One page desing

Se habla mucho de la tendencia para este año, de desarrollo de webs en una sola página, donde no hay ni pestañas y “toda” la información aparece en ella.

5. Tipografías elaboradas

La mezcla de tipografías en el diseño web tuvo bastante interés en el 2013, pero en éste 2014, además de la mezcla de tipografías, también se utilizará tipografías más elaboradas ya que aportan mucha personalidad a la web.

6. Metro grid/ Blockin

Es el diseño web en bloques cuadrados y rectangulares que Pinterest puso tan de moda el año pasado. Los bloques forman un tablero y cada bloque llena un espacio en blanco.
Este tipo de diseño suele ir muy ligado al concepto Responsive Desing consiguiendo que toda la información se visualice de manera más ordenada, estructurada y sea más fácil adaptarla a los diferentes dispositivos móviles (tablets, móviles).

Si estáis interesados en este tema os compartimos un tutorial: Using jQuery Masonry for Pinterest-Like Posting (En inglés)

7. Parallax

Como casi todo lo que estamos comentando, el Parallax empezó a implantarse en el 2013

Es un efecto que proporciona profundidad, se consigue programando movimientos en diferentes capas y a diferentes velocidades, creando un efecto parecido al 3D, mientras el usuario se desplaza por la web

El efecto óptico que proporciona da mucho juego a nivel de diseño y de presentación de contenido, ya que puede ofrecer creativos efectos dinámicos e interactivos.

Aquí podéis ver algunos ejemplos: 33 great examples of parallax scrolling websites (En inglés)
Más ejemplos y algunos tutoriales: 40 websites with parallax scrolling and 10 tutorials for owm parallax effects (En inglés)
Te dejamos este enlace donde puede ver cómo realizar este efecto: 10 Parallax Scrolling Tutorials (En inglés)

8. Animación

“El contenido animado entra mejor” ya dijo en su día Walt Disney. En este año se estandarizará aun más las animaciones en la web, sobre todo más orientadas para landing pages con un storytelling muy definido para conseguir que sean divertidas e interesantes.

9. No flash

Por favor…nos cuesta mucho ver que aún siguen existiendo sitios web que utilizan flash porque en su momento (dentro del mundo del desarrollo web, hace mucho) se puso de moda y aún no se han actualizado. Hoy en día existen lenguajes de programación como el HTML5 y CSS3 (entre otros) que podrían hacerle mucho bien a la hora de renovar sus webs.

Este artículo explica como dejar de lado esa tecnología: Moving from Flash to HTML5 the easy way (En inglés)

10. Muchos píxeles

Cada vez hay más aparatos tecnológicos con pantallas que consiguen una nitidez “similar” a la del ojo humano, e incluso ya existen marcas que tienen productos que consiguen resoluciones 2k. Y si queremos aprovechar todo el potencial de estas pantallas debemos desarrollar webs con materiales adaptadas a éste tipo de resoluciones.

11. Advertencia de Cookies

El año pasado algunas empresas empezaron informar a sus usuarios del uso de cookies en su web, y en este año seguirá manteniéndose esa tendencia, ya que la ley obliga a ello.

martes, 29 de abril de 2014

Ejemplo de como utilizar el "case" con las letras
#include<conio.h>
#include<stdio.h>
void main()
{
clrscr();
char val;
printf("introduce s suma r resta");
scanf("%s",&val);
switch(val){
case 's':
printf("suma");
break;
case 'r':
printf("resta");
break;
default:
printf("error");
break;
}
getch();
}

Ejemplo de un convertidor de unidades en C++
#include<conio.h>
#include<stdio.h>
void main()
{
clrscr();
int a,b,c;
printf("introduce el valor a convertir\n");
scanf("%d",&a);
printf("oprime 1 para convertir kbytes a megas\n,2 para convertir megas a gigabytes\n,3 para convertir gigabytes a megas\n,4 para convertir megas a kbytes\n");
scanf("%d",&b);
switch(b){
case 1: b=a/1000;
printf("%d kbytes es igual a %d megas",a,b);
break;
case 2: b=a/1000;
printf("%d megas es igual a %d gigabytes",a,b);
break;
case 3: b=a*1000;
printf("%d gigabytes es igual a %d megas",a,b);
break;
case 4: b=a*1000;
printf("%d megas es igual a %d kbytes",a,b);
break;
}
getch();
}

jueves, 3 de abril de 2014

Chequense este video sobre transportes modernos y roqueros..........esta geneal:
http://video.latam.msn.com/watch/video/bicicleta-rockera/vw36bnxw?preview=true&cpkey=0e84f88a-c0ab-439b-8716-c0fd001fd161%257c%257c%257c%257c

jueves, 27 de marzo de 2014

Atomo con animacion CSS3

ver el codigo utilizado

<div style="background-color: #3e3b66;
background-image: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #3e3b66), color-stop(100%, #000000));
background-image: -webkit-radial-gradient(center, ellipse cover, #3e3b66 0%, #000000 100%);
background-image: -moz-radial-gradient(center, ellipse cover, #3e3b66 0%, #000000 100%);
background-image: -o-radial-gradient(center, ellipse cover, #3e3b66 0%, #000000 100%);
background-image: radial-gradient(center, ellipse cover, #3e3b66 0%, #000000 100%);position: relative;height: 500px;width: 100%;">

<atom><div class="center"></div><div class="atomo1"><div></div></div><div class="atomo2"><div></div></div><div class="atomo3"><div></div></div></atom></div>

<style>
[class*="atomo"], .center {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
atom {
cursor: pointer;
}

[class*="atomo"] {
animation: glow 3s linear infinite;
border-radius: 50%;
border: 0.6em solid rgba(255, 255, 255, 0.8);
border-top: 1.5em solid rgba(255, 255, 255, 0.8);
border-bottom: 1.5em solid rgba(255, 255, 255, 0.8);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.3);
height: 30em;
transition: 1s transform ease-in-out;
width: 30em;
}
[class*="atomo"] div {
animation: rotate 2s linear infinite;
border-radius: 50%;
height: 100%;
position: relative;
width: 100%;
}
[class*="atomo"] div:after {
animation: squash 2s linear infinite;
-webkit-transform: scale(3, 1);
-moz-transform: scale(3, 1);
-ms-transform: scale(3, 1);
-o-transform: scale(3, 1);
transform: scale(3, 1);
border-radius: 50%;
content: '';
left: 50%;
height: 3em;
margin-left: -1.5em;
opacity: 0.8;
position: absolute;
top: -1.2em;
width: 3em;
}

.atomo1 {
transform: rotate(120deg) scale(0.333, 1);
}
.atomo1 div:after {
background: #2ecc71;
box-shadow: 0 0 20px #2ecc71;
}
atom:hover .atomo1 {
border: 0.6em solid rgba(255, 255, 255, 0.8);
transform: rotate(0deg) scale(0.33333, 0.33333) perspective(600px) rotateX(60deg);
}
atom:hover .atomo1 div:after {
animation: none;
top: -1.6em;
transform: scale(1, 1);
}

.atomo2 {
transform: rotate(240deg) scale(0.333, 1);
}
.atomo2 div:after {
background: #3498db;
box-shadow: 0 0 20px #3498db;
}
atom:hover .atomo2 {
border: 0.6em solid rgba(255, 255, 255, 0.8);
transform: rotate(0deg) scale(0.66667, 0.66667) perspective(600px) rotateX(60deg);
}
atom:hover .atomo2 div:after {
animation: none;
top: -1.6em;
transform: scale(1, 1);
}

.atomo3 {
transform: rotate(360deg) scale(0.333, 1);
}
.atomo3 div:after {
background: #e74c3c;
box-shadow: 0 0 20px #e74c3c;
}
atom:hover .atomo3 {
border: 0.6em solid rgba(255, 255, 255, 0.8);
transform: rotate(0deg) scale(1, 1) perspective(600px) rotateX(60deg);
}
atom:hover .atomo3 div:after {
animation: none;
top: -1.6em;
transform: scale(1, 1);
}
.center {
background: white;
border-radius: 50%;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
height: 3em;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.3);
transition: 1s transform ease-in-out;
width: 3em;
}
atom:hover .center {
transform: translate(0, 0.5em);
}

@keyframes glow {
0%, 100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.2), 0 0 10px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.3);
}

50% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2), 0 0 30px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.3);
}
}

@keyframes rotate {
0% {
    transform: rotate(0deg);
}

100% {
    transform: rotate(360deg);
}
}

@keyframes squash {
0%,50%, 100% {
    transform: scale(1, 1);
    top: -2.6em;
}

25%, 75% {
    transform: scale(2, 1);
    top: -1.2em;
}
}
</style>

Girar imagenes con un click

COMO HACER QUE GIRE UNA IMAGEN CODIGO CSS CON JAVASCRIPT

img src="URL DE LA IMAGEN" id="girar"><script>

//<![CDATA[
$('#girar').on("click", function(e) {
e.preventDefault();
$('#girar').addClass('giro');

var t1 = setTimeout(function() {
$('#girar').removeClass('giro');
}, 1000);
});
//]]>
</script>
<style>
#girar {
position: relative;cursor:pointer;
-webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
}

#girar.giro {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
    zoom: 1;
}
</style>

sábado, 22 de marzo de 2014

Lista de CSS es muy útil y vital en el diseño web. Hay muchos usos de) Lista desordenada (como la navegación horizontal, vertical de navegación, la creación de una caja o cualquier tipo de lista. En este post te mostramos algunos métodos de listas CSS realmente útiles que puede utilizar para crear, lista vertical horizontal o cuadro de lista de CSS. puede descargar todos los métodos utilizados en este blog en un solo archivo comprimido.
Antes de crear cualquier cosa Vamos a ver cómo se utilizan listas de CSS:

Por cada lista aquí es el diseño HTML básico

<div id="the name of the id">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
<li> Item 4</li>
</ul>
</div>

Ahora vamos aplicar algunas propiedades CSS para convertirlo en una lista,

que se utiliza para la navegación o simplemente una simple lista.

display: inline

La primera propery CSS que vamos a utilizar es en línea.

Esta es la propiedad CSS display de forma predeterminada y

generará una caja de línea.

 No habrá descanso antes o después y fluyó como una caja de

línea única. En palabras simples, se muestra en una línea, en

lugar de dos líneas. 
Aquí está la CSS estamos aplicando la creación de la primera

lista horizontal

#horizontal_list {
 height: 20px;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 line-height: 1.45em;
 color: #8e9090;
}
#horizontal_list ul {
 margin: 0;
 padding: 0;

}
#horizontal_list ul li {
 display: inline;
 padding-left: 5px;
}

Así es como debe ser similar después de

aplicar el id CSS = "horizontal_list" para el código HTML

lista Vertical 

Lista vertical son más fáciles de crear, pero le mostrará dos

técnicas diferentes que son útiles. En primer lugar vamos a ver

el resultado y el CSS:

/*-------------------Vertical List 1---------------------*/

#vertical_list_1 {
 margin-left: 30px;
}
#vertical_list_1 ul {
 margin: 0;
 padding: 0;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: normal;
 text-transform: normal;
 letter-spacing: normal;
 line-height: 1.45em;
 color: #8e9090;
}
#vertical_list_1 ul li {
 padding-left: 8px;
 margin-left: 0;
 list-style-image: url("bullet_green.png");
}
/*-------------------Vertical List 2---------------------*/

#vertical_list_2 {
 margin-left: 5px;
}
#vertical_list_2 ul {
 margin: 0;
 padding: 0;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: normal;
 text-transform: normal;
 letter-spacing: normal;
 line-height: 1.45em;
 color: #8e9090;
}
#vertical_list_2 ul li {
 padding-left: 20px;
 margin-left: 0;
 list-style-image: none;
 list-style-type: none;
 background: url("bullet_orange.png") no-repeat;
 background-position: 0 4px;
}

La diferencia aquí es que la imagen-list-style tiene

una distancia por defecto de la imagen con el texto de

lista y no se puede cambiar, además de dentro y fuera

de valor. Considerando que, con el uso de antecedentes

y background-position de la imagen puede ser movido de

izquierda a valor justo (valor x), de arriba a abajo

(valor de y). También hay algún otro valor, tales como:

 arriba, abajo y más. Compruebe la especificación W3

para todo el valor. 
Caja utilizando Lista CSS 

Lista de CSS también son útiles para la caja de la

creación. Lo más común es la caja CSS se utiliza para

el pie de página de los sitios web. El truco detrás de

la creación de una caja está teniendo un ancho

establecido y la altura de cada elemento <li>. También

utilizamos desbordamiento: propiedad oculta por lo que

 cualquier texto no va a salir de la caja. Así que aquí está la CSS:


/*-------------- Verticle box -------------------*/
#vertical_list_box {
 margin-left: 5px;
}
#vertical_list_box ul {
 margin: 0;
 padding: 0;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 line-height: 1.45em;
 color: #8e9090;
}
#vertical_list_box ul li {
 display: inline-block;
 clear: none; /* no floating *?
 background: #e7f4f8;
 width: 280px;
 height: 200px;
 overflow: hidden; /* hide if the text is too long *?
 margin-left: 4px;
 padding: 4px;
 list-style-image: none;
 list-style-type: none;
 -moz-border-radius: 5px;
       -webkit-border-radius: 5px;

}

Los estilos adicionales están en el archivo incluido y así es como debe ser similar.

Son muchas más las técnicas que se pueden utilizar para crear listas hermosas.

jueves, 20 de marzo de 2014

Telefono movil CSS 3D

Vamos a ver otro increible ejemplo de diseño con animacion 3D incluida utilizando solamente codigo CSS3. Como podeis observar, se trata de un telefono movil de ultima generacion que no para de girar sobre si mismo en el que, ademas podemos poner una imagen para que aparezca en pantalla de vez en cuando, en este caso he puesto como ejemplo una del logo principal de REDEANDO. Si te ha gustado y quieres insertarlo en tu pagina, copia el codigo que veras abajo. Sustituye la linea de color rojo por la direccion url de la imagen que desees que aparezca en la pantalla del movil.

Nota: Informacion Oculta

Aqui les dejo el codigo Css para que su cel se mueva:

<div style="perspective: 1500px;padding: 0;margin: 0;background-size: cover;"><div class="telefono movil"><span class="back"></span> <span class="sides"> <span class="left"></span> <span class="right"></span> <span class="top"></span> <span class="bottom"></span> </span><span class="corners"> <span class="bottom-left"> <span class="c c0"></span> <span class="c c1"></span> <span class="c c2"></span> <span class="c c3"></span> <span class="c c4"></span> <span class="c c5"></span> <span class="c c6"></span> <span class="c c7"></span> <span class="c c8"></span> <span class="c c9"></span> </span> <span class="bottom-right"> <span class="c c0"></span> <span class="c c1"></span> <span class="c c2"></span> <span class="c c3"></span> <span class="c c4"></span> <span class="c c5"></span> <span class="c c6"></span> <span class="c c7"></span> <span class="c c8"></span> <span class="c c9"></span> </span> <span class="top-left"> <span class="c c0"></span> <span class="c c1"></span> <span class="c c2"></span> <span class="c c3"></span> <span class="c c4"></span> <span class="c c5"></span> <span class="c c6"></span> <span class="c c7"></span> <span class="c c8"></span> <span class="c c9"></span> </span> <span class="top-right"> <span class="c c0"></span> <span class="c c1"></span> <span class="c c2"></span> <span class="c c3"></span> <span class="c c4"></span> <span class="c c5"></span> <span class="c c6"></span> <span class="c c7"></span> <span class="c c8"></span> <span class="c c9"></span> </span> </span> <span class="screen"></span> <span class="screen2"> </span> <span class="front"></span></div></div><style>.telefono { position: relative; margin: 50px auto; transform-origin: center; transform-style: preserve-3d; animation: 26s rotate ease infinite;}.telefono .front { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-position: center center; background-repeat: no-repeat; transform: rotateX(0deg) translateZ(10px);}.telefono .screen { width: 290px; height: 520px; position: absolute; top: 55px; left: 14px; background-position: center center; background-repeat: no-repeat; background-color: #222; transform: rotateX(0deg) translateZ(9px);}.telefono .screen2 { width: 290px; height: 520px; position: absolute; top: 55px; left: 14px; overflow: hidden; background-repeat: no-repeat; transform: rotateX(0deg) translateZ(9px); opacity: 0; animation: 26s screen ease infinite; background-color: #000000; border-radius: 4px; background-position: center center; background-image: url(http://urldetuimagen);}.telefono .back { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-position: center center; background-repeat: no-repeat; background-color: #eee; box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.1); transform: rotateY(180deg) translateZ(10px);}.telefono .front,.telefono .back { border-radius: 35px;}.telefono .sides span { position: absolute; background: #dddddd;}.telefono .sides .left { transform: rotateY(90deg) translateZ(-10px) translateY(43px); left: 0;}.telefono .sides .right { transform: rotateY(-90deg) translateZ(-10px) translateY(43px); right: 0;}.telefono .sides .top { transform: rotateX(-90deg) rotateZ(-90deg) translateZ(-127px) translateX(0px) translateY(149px); left: 0; top: 0;}.telefono .sides .bottom { transform: rotateX(-90deg) rotateZ(-90deg) translateZ(128px) translateX(0px) translateY(149px); left: 0; bottom: 0;}.telefono .corners { width: 100%; height: 100%; position: absolute;}.telefono .corners .bottom-left { position: absolute; left: 1px; bottom: 1px; transform-style: preserve-3d; transform: rotateY(-90deg) translateX(-10px);}.telefono .corners .bottom-right { position: absolute; right: 1px; bottom: 1px; transform-style: preserve-3d; transform: rotateY(90deg) translateX(-10px);}.telefono .corners .top-right { position: absolute; right: 1px; top: 1px; transform-style: preserve-3d; transform: rotateY(90deg) rotateX(90deg) translateX(-10px);}.telefono .corners .top-left { position: absolute; left: 1px; top: 1px; transform-style: preserve-3d; transform: rotateY(-90deg) rotateX(90deg) translateX(-10px);}.telefono .corners .c { position: absolute; width: 20px; height: 6px; background-color: #dddddd;}.telefono .corners .c0 { transform: translateY(-42px) translateZ(0px) rotateX(-3deg); height: 16px;}.telefono .corners .c1 { transform: translateY(-30px) translateZ(-1px) rotateX(-8deg);}.telefono .corners .c2 { transform: translateY(-25px) translateZ(-2px) rotateX(-14deg);}.telefono .corners .c3 { transform: translateY(-20px) translateZ(-4px) rotateX(-22deg);}.telefono .corners .c4 { transform: translateY(-15px) translateZ(-7px) rotateX(-36deg);}.telefono .corners .c5 { transform: translateY(-12px) translateZ(-10px) rotateX(-50deg);}.telefono .corners .c6 { transform: translateY(-9px) translateZ(-14px) rotateX(-56deg);}.telefono .corners .c7 { transform: translateY(-6px) translateZ(-19px) rotateX(-67deg);}.telefono .corners .c8 { transform: translateY(-4px) translateZ(-24px) rotateX(-74deg);}.telefono .corners .c9 { transform: translateY(-3px) translateZ(-29px) rotateX(-90deg);}.telefono .corners .top-left .c0,.telefono .corners .top-right .c0 { transform: translateY(-7px) translateZ(-34px) rotateX(-88deg);}.telefono.movil { width: 319px; height: 658px;}.telefono.movil .front { border-radius: 35px;}.telefono.movil .sides span { width: 20px; height: 573px;}.telefono.movil .sides .top,.telefono.movil .sides .bottom { height: 255px;}@keyframes rotate { 0% { transform: rotateX(0) rotateY(0) rotateZ(0); } 10% { transform: rotateX(0) rotateY(0) rotateZ(0); } 15% { transform: rotateX(320deg) rotateY(0deg) rotateZ(10deg); } 20% { transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg); } 25% { transform: rotateX(320deg) rotateY(320deg) rotateZ(-10deg); } 30% { transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg); } 40% { transform: rotateX(390deg) rotateY(370deg) rotateZ(-92deg); } 45% { transform: rotateX(390deg) rotateY(370deg) rotateZ(-92deg); } 55% { transform: rotateX(390deg) rotateY(350deg) rotateZ(-92deg); } 60% { transform: rotateX(390deg) rotateY(350deg) rotateZ(-92deg); } 70% { transform: rotateX(-20deg) rotateY(-26deg); } 75% { transform: rotateX(-20deg) rotateY(-26deg); } 85% { transform: rotateX(20deg) rotateY(26deg); } 95% { transform: rotateX(20deg) rotateY(26deg); }}@keyframes screen { 0% { opacity: 0; } 32% { opacity: 0; } 35% { opacity: 1; transform: rotateX(0deg) translateZ(11px); box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); } 99% { opacity: 1; transform: rotateX(0deg) translateZ(11px); box-shadow: 0 0 12px rgba(255, 255, 255, 0.7); }}.telefono.movil .front { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAT8AAAKSCAYAAACkzNwGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3MkU1NTU0QzkwQ0VFMjExOUU3RDgxN0FERTkwRENBNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBNjEyMDBFNEYyODMxMUUyOTlBOTk5M0NENkU4ODRGRiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBNjEyMDBFM0YyODMxMUUyOTlBOTk5M0NENkU4ODRGRiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5ODNFNDIxNTlDRkUyMTE4RUNCODU3OURDRjJFNjAyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjcyRTU1NTRDOTBDRUUyMTE5RTdEODE3QURFOTBEQ0E1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+L/a00QAADzJJREFUeNrs3VtoXHUewPH/TCapaZtoNLGtFZVQvGALqwVBvCy1Kd5FHyw+FC0uSPoq7BbxRZ+EXfA1Kq0iKqKoD0rrpRpBHxSlNKCvbbUXS5qa0JtJo0k2/7M7NWkmNZlJ53Y+HyjJP52m5Uzm23N+58xMZnBwMNSQiVC7MtX6D2trawuQNpkLGL8Jmxeo1h2HhY6f4AE1EcKFiJ/gATUXwlLiJ3pAzUawmPiJHlDzEZxv/IQPqIsAzjV+ogfUVQTnEj/hA+ougH8VP+ED6jKA54uf8AF1G0DxA8RP+IC0BLBQ/IQPqPsAih8gfsIHLKSJiYmQyVTVq7llxA9YcL/88kvYvXt38nGqbDYb1qxZk/xasmRJ1cVP+ICiHDx4MOzcuTP5/Isvvpj1duvXrw+XXXZZeOihh0JTU1NFAyh+QEk+++yzsH///vNGr1AE77///nDllVdWLH5Zd10I4+Pj1tapXZfio48+mnf48nuHO3bsCAcOHKjY4z6b9r2+3t7e5E6wtk7juhTff/99Mtubb/imBvDjjz8OIyMj5X7YJ71r2Lp1a/z4XFrjt3Tp0tDc3Bza29utrVO3LlYM1ieffFIwfPHsbmtra7j44ouTv++iiy5Kvv7HH3/MuG3ca4ziiZAyez4/8zPvA+Ys7rG99tprM74eQ7ds2bLQ0NAw4/d+++23cPTo0RmH3XH+t3HjxnK/i2AmK3xmPtZmfvM6ZpyYKDira2xsDMuXLy8Yvmjx4sVJGAsd/n777bdlP/RN/QkPMyBrM7/5GRoaKni4Gy9hidfz5S1atCgJXi6XO/u1eMhd6Dq/Spz4iDO/qpz3jY2NhdHR0WRjzuUK8fne3szP2ro4hw4dSiI6VXzcdXR0nF23tLQkc78YwPj3xcdmfo8zPj5Pnz497c93dnaGm266aVo8L/hx7+DgYNUd9sbT5/mzSHEecO2114Z169Yt2O2B4u3Zsye88MIL074WL1iees3e5ZdfPi1kMXYnT55MPo8hjAE91xtvvJHEslxy1bZh33vvvfDuu+9Omwfk9+y6urpKvv1sM7+pd5S1dZrW845GLldwDvhXj6nZbjt177GcqmrmF/93+PXXXwsORPfu3ZsErZTbm/lZW5c+84uHs+f6/fffpwXuxIkTZ9dxTy+e6c0rdF1fPGIrFNXUzPyOHTsWenp6Cv5evB7o3nvvnbZbPN/bm/lZW5c+84uHuPEQNn+N3tkZWiaTfO/8kVfcOYnRmxq+aGBgYMYZ51WrVoW1a9eWtTdVNfOLZ5HiIWyhM0nxf4bNmzdPi9l8bw8sjJdffnnG4y7Gb8WKFWcvap5tByfuFZ7rmWeeSU54pPawN17kONs1QvkzR6Xc/nwzP2vrtK6Lcfvttxec+x05ciQcP358xlwvPrujv7+/YPjijsrq1avL3puqu85v06ZNYcOGDckGyW+Y+OoP8Qrwhbi9mZ+1denP7b3xxhuTx12hAMY5/M8//5yEMAbv8OHDyXV8517eMjV88QLpcqu66/zi0DMe+1911VXhjjvuSD6/9dZbZz0TNN/bm/lZW5f+3N4oXps3PDw8Y/aXj2Dc24snQs534jGG74EHHqhIa6ryOj+gNuzbty/s2rWrqFd2ueeee8ITTzwx6+hK/ICqFk9ivP/++3MOYDzUjc8GeeSRRyr6/h7iB5QsHuZ+9913oa+vb9YIxujFk5BxVrhy5cqK/5vFD1hQ8YRHfLppvJ7vzJkzyfN846u9xODlrwOsBuIHpJL4AeIHIH4A4gdQX3LxCcoAqYtfse+5CVDLsjYBIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AGWRK/UbZDKZ7W1tba+0tLTs3rZt25hNCiy0LVu2NIyPj68dHh5+amho6B8jIyMlf89MV1dX0a/nl81m//Xpp5/+x10DlEt3d/c/+/v7/33q1KmKHfb2tbe3v+iuAMpp8mjzxWXLlvU1NjZWJn6Te329b731lsNcoKx6enrGJgPY29raWpn4NTU1jbobgAoZiG+AXpH4NTQ02PxAJQ9/KxM/gFomfoD4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AeIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH6A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIHyB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AHiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+gPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgB4mcTAOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AHiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+gPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB8gfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiB4gfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgB4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4geIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AeIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH6A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIHyB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AHiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiB4ifTQCIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIHyB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AHiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+AOIHIH4A4gcgfgDiByB+gPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+AGIH4D4AYgfgPgBiB8gfgDiByB+AOIHIH4A4gcgfgDiB1Av8RsbG2uy+YAK6ZiYmKhM/EZHR//e3d3d4D4AymnLli2xO38/c+ZMZeI3Pj6+9uTJk0+7K4Aye3pyr2/tiRMnSvomma6urqL3HbPZbFi5cuUrixYt6pnU5z4BLuAe39/ih8nwPdXf3x9OnTpVufgl3yCTCW1tbaGlpSU0Nja6h4ALYvJoMwwPD4ehoaEwMjJS8vfLlfoN4tBxcHAw+QVQK1zqAogfgPgBiB+A+AGIH4D4AYgfgPgBiB+A+FWxXC4XOjo6bAhqUny+/YMPPph8pMDj2yYo7JprrgkbN25MfnBeeumlcPjwYRuFmrFixYqwadOm0NraGq6//vrw5ptvhiNHjtgw9vxmF1+l5s477wxPPvlkEr6jR4+GY8eO2TDUjFWrViU/vzF88ZVQ4se4jl/nTw2dnZ3P2Qz/s3jx4vDYY4+FW265JYngnj17wttvvx1ftdrGoSbcfPPN4dFHHw1NTU1h37594dVXXw3Lly9Pxjdr1qwJ8QVA7QGK3zRXX3112Lx5c3xx1iR2H374Yejt7Y3vVWLjUBPWrVsX7rvvvuRFhvv6+sI777yTvP7dDz/8EC655JJwxRVXhBtuuCG57U8//ZT67ZX6mV/cw7vtttvChg0bkh+agYGB5IcmvlIs1JK77ror+fjVV1+Fzz//POTf4Cf+B/7BBx8ke31xpBNv9+WXX6Z+e6V+5rd69epw9913J+E7ffp02LZtm/BR077++utw7jubxfWuXbtsHPH7UzwkiIe38YdjyZIl4fHHHw+XXnqpnwwQv/oXDwFef/31ZM8vzvy6u7vDddddZ8OA+NW/vXv3hp6ennDw4MHQ3NycXCMV54BxJgiIX107fvx42L59e/jmm2+SdRwOxzPA8ZkeQH3xqD5HPDO2c+fOcODAgfDwww+Hzs7O5DqpQ4cO2TjUhGeffdZGEL/i/fjjj2H//v3JtVEuCoX6U/KblgPUIjM/QPwAxA9A/ADED0D8AMQPQPwAxA9A/ADED0D8AMQPQPwAxA9A/ADmL7d+/XpbAUidzODgoFdyBsQPQPwAxA9A/ADED0D8AMQPQPwAxA+gkjy3d9L4+Li1dWrX4pdSvb29YceOHdbWqVynWcPWrVufS/MGWLp0aWhubg7t7e3W1qlbm/kBOOw187O2NvMTPzM/a2szPzM/Mz9razM/Mz8Ah71mftbWZn7iZ+ZnbW3mVxMzv+cnP6Z27mcGZG3ml86RX5z5xU/M/YBUxc/Mz8zH2swv1TO/jJmftbWZX1r2+vIzv/wXUjn3MwOyNvNLneeTAv5/5mfuB6Rqz29q/AQQSEX4xA8QPwEE0hI+8QPETwCBtITvfPETQKBuwyd+gPgJIJCW8M0lfgII1F345ho/AQTqKnzziZ8IAnURvWLjJ4BAzYev2PiJIFCz0VuI+IkgUHPRW8j4CSFQE8G7kPETQqBqgzfVfwUYAKoHpJTPsvocAAAAAElFTkSuQmCC");}</style>