Carrusel con limite en Liferay - Historial de revisiones

Maro en 14:39 2 ago 2013

2013-08-02T14:39:15Z

Maro en 14:32 2 ago 2013

2013-08-02T14:32:07Z

Maro en 14:31 2 ago 2013

2013-08-02T14:31:04Z

Admin: Carrusel con limite trasladada a Carrusel con limite en Liferay: Agregada la palabra "Liferay" al título.

2013-07-17T17:43:32Z

Carrusel con limite trasladada a Carrusel con limite en Liferay: Agregada la palabra "Liferay" al título.

Admin: /* Descripción */

2013-07-17T17:41:12Z

‎Descripción

Maro: /* Implementación */

2013-07-17T15:54:46Z

‎Implementación

Maro: Página creada con '== Descripción == Un carrusel de imagenes personalizable para Liferay con soporte para IE7+/Firefox/Chrome. Los aspectos personalizables son: * La cantidad maxima de imagene…'

2013-07-17T15:50:35Z

Página creada con '== Descripción == Un carrusel de imagenes personalizable para Liferay con soporte para IE7+/Firefox/Chrome. Los aspectos personalizables son: * La cantidad maxima de imagene…'

Página nueva

== Descripción ==

Un carrusel de imagenes personalizable para Liferay con soporte para IE7+/Firefox/Chrome.
Los aspectos personalizables son:

* La cantidad maxima de imagenes a mostrar.
* El intervalo de tiempo de transicion entre imagenes.
* La carga de imagenes con o sin link.

== Implementación ==

Utilizamos una estructura y template de Liferay. La estructura es un archivo XML y el template es un archivo velocity.
La estructura es la que define los campos que necesita el web content para crearse. Luego el template de velocity renderiza la estructura mencionada anteriormente.
Para implementarlo utilizamos como base el carrusel que provee Bootstrap. Dicho carrusel se caracteriza por ser responsive.
Para que además sea compatible con IE7+, utilizamos la libreria "respond.js" y algunos meta-tags html. El head debe tener lo siguiente:

<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-responsive.css" media="screen" />
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<script src='js/lib/jquery-1.10.1.min.js' type='text/javascript'> </script>
<script src='js/lib/bootstrap.min.js' type='text/javascript' > </script>
<script src='js/lib/respond.min.js' type='text/javascript' > </script>
</head>

Hay que tener en cuenta que respond.js debe cargarse luego de la libreria de jquery y bootstrap.

Además, para que el estilo "Opacity" sea soportado por IE7+, utilizamos el estilo: Alpha(Opacity=100).

Por ejemplo, si necesitamos que nuestro div tenga una opacidad del 50%:

div{
filter: Alpha(Opacity=50);
opacity: 0.5;
}

Para que se puedan cargar varios carruseles en la misma página, el id identificador de cada instancia esta representado por el id de la estructura(ej: "carrusel"), y
por el titulo del web-content (ej:"web-content-1"), siendo el id resultante "carrusel-web-content-1". Esto convierte a cada instancia del carrusel en única siempre y cuando
los titulos de los web-content sean diferentes.

Por que?
En nuestra busqueda de implementaciones para carruseles encontramos que mucho de ellos no eran soportados por IE7+ y/o no eran responsives
(ej: rcarousel, FlexSlider ). Otros, en cambio,si cumplian las características anteriores pero eran demasiado complejos de personalizar.
Al encontrar la libreria respond.js, tomamos la alternativa del carrusel de bootstrap ya que puede ser soportado por IE7+, responsive y es facilmente personalizable.

@@ Línea 1: / Línea 1: @@
-Un carrusel de imagenes personalizable para [[Liferay Portal]] con soporte para IE7+/Firefox/Chrome.
+== Introducción ==
-* La cantidad maxima de imagenes a mostrar.
+Para empezar, es correcto aclarar que el tooltip de ayuda no es un componente con estructura y template. Este componente tiene solo una estructura y el renderizado
-* El intervalo de tiempo de transicion entre imagenes.
+queda a manos del componente que lo utiliza.
-* La carga de imagenes con o sin link.
+Su funcionalidad principal es mostrar un tooltip de ayuda y su contenido es personalizable.
 == Implementación ==
-Utilizamos una estructura y template de Liferay. La estructura es un archivo XML y el template es un archivo velocity.
+Como mencioné anteriormente, el tooltip de ayuda solo cuenta con una estructura. En la implementacion elegida, la misma está compuesta por un solo campo de texto
-La estructura es la que define los campos que necesita el web content para crearse. Luego el template de velocity renderiza la estructura mencionada anteriormente.
+enriquecido que será el que contiene la información del tooltip.
-Para implementarlo utilizamos como base el carrusel que provee Bootstrap. Dicho carrusel se caracteriza por ser responsive.
+El componente que quiera utilizar dicho tooltip tiene que heredar la estructura del tooltip de ayuda y además tiene que cambiar su forma de renderizarse adicionando un
-Para que además sea compatible con IE7+, utilizamos la libreria "respond.js" y algunos meta-tags html. El head debe tener lo siguiente:
+div donde guarde la informacion del campo de texto enriquecido.
-  <head>
+  div{
-  <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" media="screen" />
+  display: inline-block;
-  <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-responsive.css" media="screen" />
+  zoom: 1;
-  <meta http-equiv="X-UA-Compatible" content="IE=8"/>
+ *display: inline;
+  }
 == Conclusión ==
-En nuestra busqueda de implementaciones para carruseles encontramos que mucho de ellos no eran soportados por IE7+ y/o no eran responsives
+El tooltip de ayuda nos provee una funcionalidad que otro componente puede utilizar. Esta separación de tooltip de ayuda y componente nos permite una gran reutilizacion
-(ej: rcarousel, FlexSlider ). Otros, en cambio,si cumplian las características anteriores pero eran demasiado complejos de personalizar.
+de codigo ya que podemos usar el mismo tooltip de ayuda en todos los componentes.

← Revisión anterior		Revisión del 14:39 2 ago 2013
Línea 1:		Línea 1:
		+	== Introducción==
		+
		+	Un carrusel de imagenes personalizable para [[Liferay Portal]] con soporte para IE7+/Firefox/Chrome.
		+	Los aspectos personalizables son:
		+	* La cantidad maxima de imagenes a mostrar.
		+	* El intervalo de tiempo de transicion entre imagenes.
		+	* La carga de imagenes con o sin link.
		+
		+
	== Implementación ==		== Implementación ==

← Revisión anterior	Revisión del 17:43 17 jul 2013
(Sin diferencias)

@@ Línea 26: / Línea 26: @@
    <script src='js/lib/respond.min.js' type='text/javascript' > </script>
   </head>
 Hay que tener en cuenta que respond.js debe cargarse luego de la libreria de jquery y bootstrap.
 Además, para que el estilo "Opacity" sea soportado por IE7+, utilizamos el estilo: Alpha(Opacity=100).
 Por ejemplo, si necesitamos que nuestro div tenga una opacidad del 50%:
@@ Línea 44: / Línea 42: @@
-Por que?
+== Conclusión ==
 En nuestra busqueda de implementaciones para carruseles encontramos que mucho de ellos no eran soportados por IE7+ y/o no eran responsives
 (ej: rcarousel, FlexSlider ). Otros, en cambio,si cumplian las características anteriores pero eran demasiado complejos de personalizar.
 Al encontrar la libreria respond.js, tomamos la alternativa del carrusel de bootstrap ya que puede ser soportado por IE7+, responsive y es facilmente personalizable.