SlideShows Drupal – (Secuencias ánimadas de contenidos o imágenes)

Slideshow es una transición animada de imágenes o textos, que se ha orientado principalmente a destacar contenidos relevantes y que funcionalmente permite al usuario la lectura de varios contenidos sin necesidad de llevar a cabo una recarga de la página.

Entre los portales que tienen SlideShows en sus páginas principales podemos nombrar algunos como CaracolTV, ColombiaTravel, Revista Shock, etc

Ejemplo de SlideShow empleado en el portal de MTV Uk

Slideshow drupal

SlideShow Drupal

Si bien hay cientos de plugins e implementaciones en JavaScript para lograr lo deseado, integrar estos plugins con gestores de contenido puede resultar en una extensa tarea de investigación y programación. Para facilitarnos a todos el trabajo en un futuro (Tanto a quienes nunca han hecho una implementación de este tipo, como a los que la hemos hecho y olvidamos de que manera concreta lo solucionamos).

A continuación se lista algunos módulos y herramientas que ofrece Drupal para SlideShows:

  1. Featured Content Slider: Brinda un bloque al que se le pueden añadir nodos o contenidos creados previamente. Su implementación es rápida y su despersonalización se hace a través de hojas de estilo (CSS). Una de las limitantes que tiene es que no se puede determinar el orden en que aparecen los elementos de una manera sencilla.
  2. Slideshow: Una opción de sencilla configuración, convierte todas las imágenes adjuntadas a un contenido en elementos de un slideshow. Solo trabaja con imágenes.
  3. Views Slideshow: ImageFlow: Una excelente opción cuando se quieren por ejemplo mostrar imágenes a manera de galería. Presenta un efecto estético muy agradable de zoom y una barra de desplazamiento en vez de botones (Al estilo del visor de carátulas de ITunes). Se integra con el módulo Views; para su implementación solo es necesario crear una vista que tenga campos de imagen y asignarle el estilo SlideShow – ImageFlow. Está orientado a la creación de galerías de imágenes únicamente.
  4. Dinamic Display Block: Es la opción más robusta, configurable y flexible. Se integra con el módulo views de modo que se tiene absoluto control sobre los campos que aparecen, el orden en el que aparecen los elementos (En combinación con el módulo nodequeue) y ofrece muchos estilos de visualización, desde un simple slide con imágenes y selectores con números, hasta selectores con imágenes en miniatura y pequeñas descripciones. A cambio de su funcionalidad se debe saber que se tiene que generar funciones de preprocesado en las plantillas que se esté utilziando y emplearle como mínimo unas dos horas de investigación. Se ofrecen tutoriales en la web del autor que describe como hacer slideshows sencillos y avanzados. Es la opción más cercana a lograr un slideshow como el de MTV Uk.

Cabe resaltar que sea cual sea la solución que se elija, viene bien tomar en cuenta si vale la pena generar un Slideshow para el sitio.

Cómo acelerar el renderizado CSS

Cuando codificamos CSS, uno de los objetivos es la eficiencia del renderizado en el  navegador.  Google siempre está en una constante búsqueda de hacer más rápida la web. Mozilla también tiene varias sugerencias sobre las mejores prácticas .

optimizando_codigo_css2

Técnicas para acelerar el renderizado CSS

Evitar el “redibujo” de las imágenes

Para evitar esto, siempre se debe especificar la anchura y la altura de todas las imágenes, esta técnica permite que el navegador muestre la página incluso antes de que se descarguen las imágenes, de lo contrario el navegador requerirá un “redibujo” y volver a renderear una vez que las imágenes se descargan. Se puede especificar la anchura y la altura de todas las imágenes, ya sea en el código HTML, a travez de la etiqueta  img , o en CSS.

Los selectores generales son menos eficientes, en cambio los ID son más eficientes

Estos son selectores de acuerdo con la velocidad de renderizado:

# Sidebar {}               / * ID (la más rápida) * /
.home #slider {}           / * ID * /
.footer {}                 / * Clase * /
ul li a.arrow {}           / * Clase * /
ul {}                      / * etiqueta * /
ul li a}                   / * etiqueta */
* {}                       / * General (el más lento) * /
#content [title = 'home' ] / * General * /

Por ejemplo, este selector no es muy eficaz:

# Sidebar > li

Los IDs son los más efectivos, uno puede llegar a pensar que el navegador encontrará el ID rápidamente y dentro de él a los “li” hijos, pero no va a acelerar la velocidad de renderizado, ya que los navegadores interpretan los selectores de derecha a izquierda.

El Principio de derecha a izquierda

Es muy importante entender cómo los navegadores leen o interpretan los selectores CSS. Leen CSS de derecha a izquierda, por ejemplo, para que el selector ol> li [title = “link”] lo primero que se interpreta es [title = “link”] (también se conoce como el “selector de llave”).
También es bueno saber que, en cuanto a la interpretación de derecha a izquierda, si un selector falla, éste dejara de ser interpretado y así se utiliza menos recursos de los necesarios para mantener la interpretación. Sin embargo, siempre se debe quitar los selectores no utilizados en el código.

hojas_de_estilo_css

Colocar las reglas CSS en archivos externos y enlazarlos desde la cabecera del documento principal

Siempre se debe colocar los archivos CSS de forma externa y crear el vinculo correspondiente desde la cabecera del documento principal. Queda “casi” terminantemente prohibido la especificación de estilo en linea y creación de estilos en bloques dentro del cuerpo de un documento HTML, ya que puede tomar mucho más tiempo para que el navegador muestre e interprete el documento.

Selectores Descendentes

Los selector CSS más difíciles de interpretar son los selectores descendentes. Es terriblemente difícil de interpretar, especialmente si se encuentra dentro de una etiqueta universal. Por ejemplo, este es un ejemplo muy malo de un selector descendente:
html body nav a span {}

Usar como ventaja el CSS en Cascada

A veces, se puede lograr un muy buen resultado sin utilizar selectores adicionales. Por ejemplo, consideremos el siguiente ejemplo:
nav li a {font-size:14px}
El tamaño de la fuente “font-size”, no es necesario declararlo específicamente para el tag “a”, es mucho más eficiente:
nav {font-size:14px}

ccs3

Selectores CSS3

Los selectores CSS3 (por ejemplo : first-child ) son increíbles para ayudar en los elementos de estilo, manteniendo el código limpio y semántico. La triste realidad, sobre estos selectores, es que no se los debe utilizar, en lo absoluto, si la mayor preocupación es el rendimiento de página.

Velocidad vs Practicidad

Para conseguir la representación más eficaz para una determinada página, simplemente se puede ir por un camino, dando a cada elemento de la página una identificación única y la aplicación de un estilo con selectores de ID único. Es extremadamente no-semántico y extremadamente difícil de mantener. Incluso los sitios basados ​​en el rendimiento NO sacrifican la capacidad de mantenimiento o semántica por un archivo CSS más eficiente.

Una buena práctica es volver a revisar los archivos CSS y buscar donde se lo puede mejorar, especialmente si el público objetivo utilizara dispositivos móviles, los cuales tienen una cierta (dis)capacidad de interpretación.

Todas estas recomendaciones, requieren una cierta inversión de tiempo, pero el coste es pequeño, especialmente en comparación con las ventajas que acarrea. Y una vez que estas practicas se ponen en marcha, continúan para mejorar el rendimiento durante la vida útil del proceso de desarrollo.

AGROINCO SRL. – Todo para el agro

Agroinco SRL es una empresa familiar que se fundó en el año 1988, en Santa Cruz de la Sierra, Bolivia, donde posee sus oficinas centrales. A la fecha cuenta con alrededor de 67 trabajadores y se dedica a la comercialización de plaguicidas de uso doméstico y para salud pública e insumos agrícolas de todo tipo. El lema de Agroinco es  “Todo para el agro”.

Este sitio web fue desarrollado con un diseño elegante y vivo, especialmente para la funcionalidad de productos y proveedores con categorías utilizando novedosos recursos de Java script, CSS y 960 gs. De esta manera Agroinco puede mostrar la oferta de sus productos de manera vistosa y ordenada.

El sitio Web cuenta además con un manejador de contenidos que brinda a Agroinco la capacidad de actualizar su sitio Web en cualquier momento.  enbolivia.com por medio de su manejador de contenidos hace desarrollos a medida para sus clientes siendo este una de las mejores opciones en el mercado.

CSS3, box-shadow vs filter: drop-shadow

Ambas son propiedades de Css. Y pese a que la sintaxis es la misma, hay grandes diferencias en el resultado obtenido.

En un anterior articulo ya habíamos destacado las propiedades de box-shadow

Que no vaya a confundir el parecido en la sintaxis de ambas propiedades.  La gran ventaja del filtro drop-shadow es que recorre el contorno y la transparencia que tiene un elemento, una imagen con transparencia PNG, por ejemplo.

.drop-shadow {
-webkit-filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
-moz-filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
-ms-filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
-o-filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
}
.box-shadow {
box-shadow: rgba(0,0,0,.5) 0px 0px 10px 5px
}

Entre las diferencias encontramos:

  • En sintaxis, Drop-shadow no admite el valor “inside”
  • Drop-shadow supone una carga mayor para el navegador
  • El resultado del efecto aunque similar difiere notablemente con box-shadow la sombra se aplica a la caja del elemento. Sin embargo el filtro Css drop-shadow lo hace sobre el elemento generado y visible
  • El soporte de los navegadores: prácticamente total para box-shadow y según caniuse para drop-shadow sólo algunas versiones de webkit lo soportan (y con prefijo).

Sí bien, es una propiedad experimental, y sí, sólo es compatible con los navegadores WebKit por ahora. Pero de acuerdo con caniuse.com ya hay 32,51% de los usuarios de Internet que lo podrían interpretar. En general, es un tipo de decoración de mejora considerablemente la estética de la pagina. O incluso se la puede utilizar como un box-shadow normal en navegadores que no soportan este filtros todavía.

Box-shadow, una de las nuevas y mejores características de CSS3

La propiedad CSS box-shadow permite a los diseñadores implementar fácilmente sombras difuminadas (tanto exterior o interior) en casi cualquier elemento (principalmente de caja – div), especificando los valores para el color, el tamaño, desplazamiento entre otras características.

Sintaxis

box-shadow: [ color | offset-x | offset-y | blur-radius | spread-radius | inset ]

Ejemplo:

.shadow {
box-shadow: rgba(220,220,220,.65) 3px 3px 10px 5px inset;
}

Valores


1º Valor: color de la sombra
Se puede elegir expresarlo en cualquiera de las forma permitidas (hexadecimal o rgba).  En el ejemplo, la expresada en valor rgba (rgb+canal alpha de trasnparencia)
Y en caso de no declarar un valor del color, toma el de la propiedad color.
2º Valor: Desplazamiento horizontal de la sombra (offset)
Puede ser un valor positivo o negativo y estar expresado en cualquier unidad de longitud que permite css. Expresa el desplazamiento horizontal de la sombra creada. Un valor positivo: sombra a la derecha. Negativo: hacia la izquierda. La posición de la sombra es creada con relación a la posición del elemento al que se aplica.
3º Valor: Desplazamiento vertical:
Aplica lo mismo que en el anterior, pero en sentido vertical. Valor positivo hacia abajo, negativo hacia arriba.
4º Valor: radio de desenfoque
En inglés “Blur Radius”. Es opcional. El radio de desenfoque define la dureza o suavidad de la sombra. Cuanto menor sea el valor, más nítida la sombra. Un valor alto creará un desenfoque grande. Admite cualquier valor, pero los negativos son interpretados como Cero (0).
5º Valor: Distancia de propagación (opcional).
Otro valor de la longitud, puede ser positivo o negativo, y define hasta donde se propagará la sombra (más allá de lo definido por offset). Un valor negativo hará que la sombra sea más pequeña, más comprimida.
6º Valor: Inset/outset (opcional)
Dos posibles valores, siendo outset el valor por defecto. Esta propiedad marca hacia dónde se creará la sombra. Inset: se crea en el interior del elemento, outset por fuera de él. Se puede declarar al inicio o al final, si se intercala entre los demás valores se anula la declaración.

Compatibilidad con navegadores

Lo cierto es que las CSS 3 todavía están en fase de especificación, aunque ya se encuentran muy avanzadas y los navegadores más modernos ya han comenzado a implementarlas. No obstante, el W3C todavía no ha liberado las especificaciones de esta versión de CSS y hasta que empiece a recomendar su implementación los clientes web basados en Gecko y WebKit tienen soporte a esta funcionalidad de CSS3, pero a través de prefijos.
Para Opera podemos utilizar box-shadow en las versiones más moderas,  sin ningún inconveniente.

Atributo box-shadow para navegadores basados en motores de renderizado Gecko, como Firefox:  De manera temporal, Firefox es capaz de interpretar el atributo -moz-box-shadow, por ejemplo:

-moz-box-shadow: #090 1px 1px 0px;

Atributo box-shadow para navegadores basados en moteres de renderizado WebKit, como Safari o Google Chrome: En estos momentos y de manera temporal, navegadores como Chrome o Safari entienden el atributo: -webkit-box-shadow, por ejemplo:

-webkit-box-shadow: #fc8 3px 3px 1px;

Como podremos imaginar, si deseamos ampliar al máximo la compatibilidad con box-shadow, necesitaríamos indicar tanto el propio atributo box-shadow, así como -moz-box-shadow y -webkit-box-shadow para que funcione en las versiones actuales de Firefox, Safari, Chrome, etc.

En el caso de Internet Explorer, de manera nativa solo es interpretado a partir de la versión 9 en adelante. Si se quiere hacer efectos de sombra en versiones inferiores del IE, se puede hacer uso de filtros específicos de Microsoft (Shadow Filter), pero no es la mejor ni la más recomendada práctica.

Ejemplo:

.shadow {
box-shadow: #111 3px 3px 4px ;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color='#111111', Strength=4, Direction=135)";
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Color='#111111', Strength=4, Direction=135);
}

Generadores online

Estos son solamente algunos:

http://css3gen.com/box-shadow/
http://westciv.com/tools/boxshadows/index.html

Referencia oficial W3C

http://www.w3.org/TR/css3-background/#the-box-shadow