Archivo de la categoría ‘CSS’

A responsive design, tutorial frameworks

Gerardo Cerda Neumann

Gerardo Cerda Neumann, Director Escuela de Ingeniería Informática Multimedia UNIACC.

Hoy miércoles 26 de noviembre tuvimos la grata experiencia de participar de un Taller dictado por el Profesor Rodrigo Jaque Escobar.

El evento fue organizado junto a SPIN (www.spin-chile.cl), Institución en la cual participamos hace varios años para acercar el mundo académico con el académico.

Nuestro destacado académico líder en el área de desarrollo Web compartió una interesante presentación donde explicó con mucho detalle cómo construir aplicaciones usando el paradigma “Bootstrap”.

En un comentario anterior ya habíamos presentado este paradigma (http://escuelainformatica.uniacc.cl/wordpress/?p=1189) por lo que no nos era desconocido. El aporte del Taller de hoy fue que se mostró de manera sencilla y “paso a paso” como aplicarlo.

Los asistentes hicieron muchas preguntas demostrando interés en lo desarrollado. El Profesor Jaque contestó de buena manera cada consulta logrando que todos los participantes se retiraran muy satisfechos.

¡¡Felicitaciones Rodrigo!!

Si quieren descargar la presentación utilizada por el Profesor Jaque pueden hacer click aquí.

¿Por qué son tan importantes las fichas de productos?

Rodrigo Jaque Escobar

Rodrigo Jaque Escobar, Profesor Escuela Ingeniería Informática Multimedia, Uniacc.

Revisando uno de mis CMS (Custom Management System, Sistema de administración de contenidos) favoritos, encontré un reportaje interesante sobre las fichas de productos y la utilidad que prestan a la hora de convencer a los posibles clientes a realizar una compra.

Julie Liu autora del comentario de Prestashop(2014),  identifica consejos E-commerce sobre las características principales que deberían tener las fichas de productos de las páginas web que están orientadas a realizar venta en línea.

Según Julie, estas características son:

- Incluir opiniones de clientes para darle credibilidad al producto.
- Informar sobre la disponibilidad del producto para no decepcionar al comprador.
- Usar botones de acción bien visibles con un texto atractivo.
- No perder los internautas impacientes haciendo que la página cargue rápido.
- Publicar fotos de buena calidad, de los productos desde distintos ángulos.
- Añadir vídeos de los productos.
- Redactar descripciones detalladas de los productos. Mejorando el posicionamiento y dando más información al comprador.
- Agregar elementos que infunden confianza en el consumidor (teléfono, logo de pago asegurado, enlace a la política de devoluciones)
- Y no olvidar: la clave para mejorar es saber qué funciona mejor en tu tienda. Probando todos estos elementos hasta dar con la combinación adecuada.

Julie, adicionalmente, realiza una evaluación de algunos sitios que usan las fichas de productos en sus sitios web. Lo hace destacando lo positivo y las mejoras que se podrían realizar en las respectivas páginas.

Sería un buen ejercicio revisar nuestras propias fichas de productos con los criterios usados por ella.

El artículo original lo pueden revisar en http://goo.gl/FVvC3g

 

 

 

Animación con CSS Sprites y steps()

Rodrigo Jaque Escobar

Rodrigo Jaque Escobar, Coordinador Escuela Ingeniería Informática Multimedia, Uniacc.

Revisando mis blog favoritos de CSS, encontré una novedad en el sitio web http://www.cssblog.es, sobre una animación en CSS muy interesante n el cual se explica paso a pasó la forma de realizar una animación con CSS, lo que evidentmente puede ser replicado en cualquier otra animación que necesitemos.

Con steps() podremos controlar el nº de keyframes renderizados en la animación, dicho de otra manera, podemos usar steps() para crear una simple hoja de caracteres animados.

TeamTreeHouse ha usado artboards de Illustrator para crear cada frame de animación en una imagen separada de 190×240 píxeles, luego se usó Compass’ spriting feature para generar una hoja de sprites conteniendo todas las imágenes exportadas.

monster

Creando la animación

Para animar el “monstruo”, crearemos una regla donde se definirá la anchura y altura y mostraremos el principal sprite como una imagen de fondo.

.monster {

width: 190px;
height: 240px;
background: url('monster-sprite.png') left center;
}

Luego necesitaremos crear un keyframe que anime la posición de fondo de la hoja de sprites. El ancho total en píxeles del sprite es de 1900px, así que lo animaremos de derecha a izquierda dándole una posición final de -1900. Esta animación es muy parecida a la que os mostré hace unos meses con el globo que giraba.

@keyframes play {
100% { background-position: -1900px; }
}

Corriendo la animación

En este punto, cuando definimos la secuencia de animación “play” con el selector “monster” con una duración de 0,8s, veremos la propiedad background position en nuestro sprite animándose rápidamente de izquierda a derecha.

.monster {
animation: play .8s;
}

Para conseguir el efecto animación frame a frame, necesitaremos incluir la función de tiempo steps() en el valor “nimation”. Como la hoja de sprites contiene 10 imágenes sprites, haremos 10 frames, o pasos, como queramos llamarlo. Así que definiremos a continuación 10 pasos en nuestra secuencia de animación:

.monster {

animation: play .8s steps(10);
}[

Así que ahora la animación correrá 10 frames en 0,8 segundos. Usa la propeidad background-position para correr cada imagen sprite como un step.

Finalmente, ponemos el valor de animation-iteration-count a “infinite”, esto hará que la animación se repita infinitamente.

.monster {

animation: play .8s steps(10) infinite;
}[

Para cambiar la velocidad de la animación, simplemente cambia el valor “animation-duration”. Así se vería la animación final en CodePen:

- See more at: http://www.cssblog.es/animacion-con-css-sprites-y-steps/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+CssBlogEs+%28CSSBlog+ES%29#sthash.T4EzropO.dpuf

 

Pueden jugar con la animación en el siguiente link http://codepen.io/Guilh/pen/yldGp/

 

Articulo oficial de CSS escrito por Pedro CM Pedro Corchero Murga es el creador de este blog, un blogger al que le encanta el marketing, el diseño y la programación web.

- See more at: http://www.cssblog.es/animacion-con-css-sprites-y-steps/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+CssBlogEs+%28CSSBlog+ES%29#sthash.T4EzropO.dpuf

 

Comentarios recientes