Cristalab

---

• Cómo hacer animaciones en CSS3
• Ruta de respaldo en Redes OSPF
• Recortar fondo de una imagen con Fireworks
• La historia y muerte del Flash Player en iPhone y Android
• Pantalla Azul OS X

Cómo hacer animaciones en CSS3 Posted: 07 Sep 2012 08:40 AM PDT En este tutorial veremos el uso y los parámetros de animation en CSS3. Las animaciones de CSS3 son la herramienta perfecta para animar cualquier elemento, para crear un efecto puntual o para crear un movimiento contínuo de algún elemento (es decir, se pueden mover varios elementos de forma continuada pudiendo crear animaciones que antes sólo se veían en Flash o Javascript). Las animaciones usan el parámetro animation en CSS para su uso estándar, por lo que es más correcto (por cuestiones de compatibilidad) también incluir el prefijo de cada navegador. La mayoría de los navegadores son compatibles, pero Internet Explorer no (en su versión 9). Código : /* Parámetro estándar */ animation: /* Parámetros según navegador */ -webkit-animation:/* Chrome y Safari */ -moz-animation:/* Mozilla */ Cómo funcionan las animaciones en CSS3 Las animaciones de CSS3 funcionan distinto a otros parámetros de CSS. Debemos de establecer en el parámetro animation, además de la duración de la animación y el número de repeticiones que hace, un keyframe, que es el fragmento de código donde se escribe la secuencia que hará el elemento con esta animación (es decir, se especifica qué propiedades tendrá en cada momento, pudiendo modificar por ejemplo: el color, la altura, la posición...). Keyframes en CSS3 Keyframes es una propiedad de CSS3 que va independiente de los selectores (que son el conjunto de palabras que usamos para seleccionar elemento de una página, como: "#CONTENEDOR div.cuerpo"), esta propiedad también usa los prefijos de ciertos navegadores por motivos de compatibilidad y también precede a un contenedor que se abre y cierra con {}, es decir, pondremos la propiedad keyframes, y dentro de las llaves su contenido. Código : /* Parámetro estándar */ @keyframes [Nombre del keyfremes] {} /* Parámetros según navegador */ @-webkit-keyframes [Nombre del keyfremes] {}/* Chrome y Safari */ @-moz-keyframes [Nombre del keyfremes] {}/* Mozilla */ Código : /* Ejemplo de un keyframes */ @keyframes Ejemplo { 0%{width:100px} 100%{width:200px} } Contenido del keyframe Dentro del keyframes debemos de especificar los keyframes de forma individual, donde se especifica el porcentaje del tiempo de la animación en el que cierta propiedad cambia y posteriormente se especifican las propiedades que cambian escribiéndolas dentro de llaves. Si queremos que empiece la animación de determinada forma debemos añadir un keyframe con el porcentaje del tiempo de la animación en el que empieza (en el caso del inicio es el 0%), de esta forma podemos especificar que en cualquier momento de la animación cambien los parámetros (en el 30% de la animación o en el 50% por ejemplo), hasta máximo del 100%. [nota:68f144cae7] El punto 0% y el 100% son necesarios.[/nota:68f144cae7] Código : @keyframes Ejemplo { 0%{width:10%} 33%{width:20%} 66%{width:60%} 100%{width:10%} } Parámetros de animation La propiedad animation puede contener distintos parámetros, como el nombre del keyframe que especifica su animación, su duración, el número de repeticiones y la función de tiempo. Código : animation: [Nombre del keyfremes] [Tiempo] [Número de repeticiones] [Función de Tiempo]; La propiedad animation tiene los siguientes parámetros: Nombre del keyframe: En este parámetro es donde establecemos el nombre del keyfreme, teniendo que ser igual al keyfreme que usemos para especificar la animación. Tiempo: Este parámetro establece el tiempo que tarda en hacerse la animación en segundos (su unidad es s), es decir si queremos que dure un segundo tenemos que poner "1s". Repeticiones: Con este parámetro podemos especificar con un número entero las veces que se repite la animación o hacer que se repita infinitamente estableciéndolo como "infinite". Función de tiempo: Este parámetro establece la curva de aceleración de la transición, es decir, si empieza más rápido y o más despacio o es un avance lineal, sin variar la aceleración. Este parámetro tiene varias funciones de tiempo preestablecida: lineal, ease, ease-in... Por defecto usa el ease, y es el más recomendado, consiste en un comienzo lento y una terminación lenta, acelerándose en la parte media. Fuente: Xitrus | Ver completo con ejemplos de funcionamiento.

Ruta de respaldo en Redes OSPF Posted: 07 Sep 2012 08:32 AM PDT Generaremos una ruta de respaldo, denominada también backup, en nuestra última topología de Red, ajustada y enrutada en un videotutorial anterior, con el protocolo dinámico OSPF, para implementar en la red, un camino adicional que impedirá que perdamos la conectividad en esa porción, aunque se produzcan problemas físicos en el hardware o la desconexión del cableado de uno de los caminos. Añadiremos un nuevo router en la topología, para generar el nuevo camino, asignándole direccionamiento y enrutándolo correctamente, para después crear la asignación bilateral de la ruta redundante y evitar el balanceo de carga, gracias al ajuste del ancho de banda, bandwidth. Saludos.

Recortar fondo de una imagen con Fireworks Posted: 15 Aug 2012 02:41 AM PDT Este videotutorial mostraré algunas herramientas con las que podemos recortar una imagen con Adobe Fireworks de manera sencilla.

La historia y muerte del Flash Player en iPhone y Android Posted: 14 Aug 2012 06:40 AM PDT Todo empezó hace cinco años. Cuando el iPhone salió y Apple, famosamente, prohibió la existencia de Flash en el teléfono. De ahí se desprende una saga gigantesca: 2007, salida del iPhone El 2007 sacudió al planeta entero. La salida del primer dispositivo multitouch, teléfono, navegador completo, computador real de bolsillo, a un precio semi-sensato, fue una sorpresa para la que nadie estaba preparado. Lo mejor de la época era el N95 de Nokia y el Blackberry Bold. El iPhone cambiaría para siempre la computación. Muchas preguntas circularon a Apple, la principal ¿Habrá Flash Player para Safari Mobile? La respuesta: "There will be no Flash support at the moment on the iPhone." 2008, la bipolaridad de Apple y Adobe El iPhone es un éxito absoluto. Pero nadie sabe aun si quiera si habrán apps para la cosa. En la época recibí información bajo NDA de varios empleados de Adobe con Flash Player en sus iPhone y obvio, la reporté como rumor. Pero era muy real. El Flash Player corría standalone en iPhones con jailbreak e ingeniería inversa. Luego, Apple libera el SDK de apps y dice que no está convencida que Flash Player sea buena idea. Aun no se pronuncia Adobe al respecto. Para finales del 2008, Adobe confirma estar trabajando en un Flash Player. La razón de la confirmación es presionar a Apple de dejarles instalar el player en Safari. Apple se sigue negando tras el escenario. 2009, Adobe se cansa. Android brilla. Adobe mete el player al iPhone por detrás La gran noticia del 2009 es que, tras dos años, la competencia estaba lista para pelear. La Palm Pre y Android presentan sus versiones más maduras. Google y Palm confirman lo mucho que quieren a Flash de su lado Sale el HTC Hero, el primer teléfono Android con Flash Player. Inicialmente es el horrible Flash Lite, pero eventualmente será el Flash Player 10. Adobe crea el Flash Player Compiler for iPhone y muestra que, a escondidas, a metido multiples juegos a la App Store de iPhone que fueron croscompilados a Objective-C usando Actionscript 3 y el core del Flash Player. A Apple no le gusta la noticia. El año termina con Flash Player 10 en Windows Mobile, WebOS (Palm Pre), Symbian y Android. 2010: La hecatombe de Steve Jobs Sale el iPhone OS 4 (Aun no se llama iOS) y Apple anuncia muchas cosas lindas, entre ellas que queda prohibido desarrollar apps para iPhone con cualquier cosa que no sea Objective-C y XCode, matando el esfuerzo de Adobe y el punto de venta #1 de Flash CS5. Adobe peleará esta decisión en tribunales y comisiones anti monopolio. Ese mismo mes, Adobe asume la realidad y abandona para siempre la idea de un Flash Player para iPhone. Declarando que se dedicará a apoyar las plataformas "abiertas" y declarando su compromiso con Android. Apple recibe UNA LLUVIA DE IRA como nunca y Steve Jobs decide usar un arma nuclear. El CEO de Apple publica una carta donde explica la historia de Apple y Adobe, como ellos intentaron ayudar a Adobe y como Adobe, en opinión de Apple, nunca fue capaz de entregarles un Flash Player decente para móviles. La cosa se pone peor cuando la industria del porno abandona Flash y declara su soporte por video en HTML5. HTML5 no estaba listo para prime-time, pero Apple y el porno estaban decididos a empujarlo. Google y hasta Microsoft se montan en la misma tarea. La presión legal de Adobe logra que Apple acepte apps nativas croscompiladas desde AS3 y Flash hacia el iPhone. Esta es la misma época en la que Android empieza a ganarle terreno al iPhone y la FTC de USA empieza a investigar a Apple por monopolio abusivo. 2011: El Fin del Flash Player El uso del Flash Player en Android estaba en su punto más bajo y nadie realmente lo usaba. El empuje de Chrome, Firefox, Safari, IE9 y los webkit móviles convirtió al 2011 en el año de HTML5. Adobe seguía viendo crecimiento en el desarrollo de juegos con Flash y apps con Flex que eran croscompiladas a apps nativas en Android y iPhone, pero no veía tal cosa en el player embebido en el navegador. En el 2011, Adobe perdió su último aliado. Microsoft anuncia que Windows 8 no correrá el Flash Player en Internet Explorer 10 en la interfaz Metro por defecto. Habrá que desactivar Metro, algo que rara vez hace un usuario normal. El Flash Player obtiene su golpe más fuerte. Adobe declara, en noviembre del 2011, que abandona el Flash Player móvil y que se enfocará en HTML5. Incidentalmente, es por este artículo que gran parte de la fanaticada flashera hispana se volca en contra del fundador de Cristalab (miren los comments), lo que lleva a "Una explicación honesta del clusterfuck de Adobe, Flash y Flex" que resulta peor. 2012: Wake up and smell the ashes Adobe, tal como lo prometió, desactivará mañana 15 de agosto toda instalación de Flash Player en Android, acabando oficialmente su desarrollo. El Adobe del 2012 está enfocado en crear herramientas que exporten a HTML5 y en convertir a Flash y Flex en una plataforma de desarrollo de juegos y apps empresariales para teléfonos y tablets. El uso e interés de Flash decae, obviamente, debido a su final como herramienta de multiple proposito, pero el nicho por el que están peleando puede convenirle a Adobe a largo plazo. Este es el adiós a la época donde CSS era opcional, donde los diseños pixel perfect eran fáciles y donde animar para la web era dibujar en vectores, entender la linea de tiempo e insertar un SWF. Hola al responsive design, a CSS3, a HTML5, a Objective-C, a Dalvik Java, a Coffescript, Less y Stylus, a Node.js, al futuro del web.

Pantalla Azul OS X Posted: 10 Apr 2006 05:00 PM PDT Desde que el pantallazo azul se hizo famoso, ha estado presente en nuestras vidas, ahora Apple no quiere quedarse atras.

You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610