Dos Ideas. - Contribuciones del usuario [es]

Compatibilidades CSS en Internet Explorer

2013-08-30T14:30:19Z

Maro:

Seguramente te pasó que al momento de estilar una web los estilos que funcionan en la mayoría de los navegadores para IE7 e IE8 no funcionan.
Este post es una recopilación de soluciones que son muy útiles para que nuestra web sea también compatible para IE7+.

'''Opacity en IE7+:
'''

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

'''Display inline-block en IE7+:'''

div{
display: inline-block;
zoom: 1;
*display: inline
}

Seteando zoom: 1 se activa una propiedad interna de IE llamada hasLayout que junto con el display inline solucionan el problema. El * (asterisco) hace que una propiedad sólo se aplique en los navegadores de la familia Internet Explorer anteriores a la versión 8.

'''Max width y Max height en IE7+:'''

div{
max-width: 200px;
*width: expression(document.body.clientWidth>199?"200px":"auto");.
max-height: 200px;
*height: expression(document.body.clientWidth>199?"200px":"auto");
}

'''Font-face en IE7+:'''

@font-face {
font-family: 'NombreFuenteWeb';
src: url('NombreFuenteWeb.eot?') format('eot'),url('NombreFuenteWeb.ttf') format('truetype');
}

Una aclaración importante es que el nombre de la font-family no puede superar los 31 caracteres porque sino IE la ignora. En el siguiente [http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ link] lo explica con más detenimiento.

'''Inherit en IE7+:'''
div {
color:inherit;
//color: expression(this.parentNode.currentStyle['color']);
}

De esta forma nuestro elemento puede heredar el color del elemento padre. El atributo a heredar es el que se encuentra dentro de "currentStyle".

Botones Redes Sociales

2013-08-09T20:15:16Z

Maro: /* Google Plus */

Muchas veces queremos compartir una página web o algún contenido web en las distintas redes sociales. Es por esto que cada red social provee botones que se insertan
en nuestra página de forma rápida y simple. A continuación veremos qué código hmtl insertar para tener nuestra página web un botón de Facebook, Twitter
y Google Plus:

== Facebook ==
(Soportado por Chrome, Firefox 3.6+, Safari, Internet Explorer 7+)
Documentacion: https://developers.facebook.com/docs/reference/plugins/like/

Facebook tiene varias formas de implementarlo, pero la que mas sencillo nos resulto en nuestro caso con un iframe.

Ejemplo de codigo:
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:140px; height:21px;" src="http://www.facebook.com/plugins/like.php?href=http://www.comunidadfusa.com.ar&locale=es_ES&layout=button_count&show_faces=true&width=140&action=like&font=arial&colorscheme=light&height=21"> </iframe>

== Twitter ==
(Soportado por Chrome, Firefox 3.6+, Safari, Internet Explorer 7+)
Documentacion: https://twitter.com/about/resources/buttons

Ejemplo de codigo:
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="es" data-count="none">Twittear</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); </script>

== Google Plus ==
(Soportado por Chrome, Firefox 3.6+, Safari, Internet Explorer 8+)
Documentacion: https://developers.google.com/+/web/+1button/

Ejemplo de codigo:

<div class="g-plusone" data-size="medium" data-annotation="none" data-href="http://www.comunidadfusa.com.ar"></div>


<script type="text/javascript">
window.___gcfg = {lang: 'es-419'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

== Observaciones ==
Tener en cuenta que si en el botón de Facebook agregamos una url del sitio a compartir que no contenga punto (url no válida), éste botón no se visualizará. Asi mismo, el botón de Google Plus se mostrará pero al hacer click en él, se visualizará con un símbolo de advertencia.

El mas sencillo para implementar nos resultó el de twitter porque este resuelve todo solo y no necesita ponerle la url ya que la detecta de la página en la que estamos agregando el botón. Aparte de ser el mas compatible con todos los navegadores.

Botones Redes Sociales

2013-08-09T20:14:42Z

Maro: /* Twitter */

Muchas veces queremos compartir una página web o algún contenido web en las distintas redes sociales. Es por esto que cada red social provee botones que se insertan
en nuestra página de forma rápida y simple. A continuación veremos qué código hmtl insertar para tener nuestra página web un botón de Facebook, Twitter
y Google Plus:

== Facebook ==
(Soportado por Chrome, Firefox 3.6+, Safari, Internet Explorer 7+)
Documentacion: https://developers.facebook.com/docs/reference/plugins/like/

Facebook tiene varias formas de implementarlo, pero la que mas sencillo nos resulto en nuestro caso con un iframe.

Ejemplo de codigo:
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:140px; height:21px;" src="http://www.facebook.com/plugins/like.php?href=http://www.comunidadfusa.com.ar&locale=es_ES&layout=button_count&show_faces=true&width=140&action=like&font=arial&colorscheme=light&height=21"> </iframe>

== Twitter ==
(Soportado por Chrome, Firefox 3.6+, Safari, Internet Explorer 7+)
Documentacion: https://twitter.com/about/resources/buttons

Ejemplo de codigo:
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="es" data-count="none">Twittear</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); </script>

== Google Plus ==
(Soportado por Chrome, Firefox 3.6+, Safari, Internet Explorer 8+)
Documentacion: https://developers.google.com/+/web/+1button/

Ejemplo de codigo:

<div class="g-plusone" data-size="medium" data-annotation="none" data-href="http://www.comunidadfusa.com.ar"></div>


<script type="text/javascript">
window.___gcfg = {lang: 'es-419'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Tener en cuenta que si en el botón de Facebook agregamos una url del sitio a compartir que no contenga punto (url no válida), éste botón no se visualizará. Asi mismo, el botón de Google Plus se mostrará pero al hacer click en él, se visualizará con un símbolo de advertencia.

El mas sencillo para implementar nos resultó el de twitter porque este resuelve todo solo y no necesita ponerle la url ya que la detecta de la página en la que estamos agregando el botón. Aparte de ser el mas compatible con todos los navegadores.

Botones Redes Sociales

2013-08-09T20:12:55Z

Maro: Página creada con 'Muchas veces queremos compartir una página web o algún contenido web en las distintas redes sociales. Es por esto que cada red social provee botones que se insertan en nuestra…'

Muchas veces queremos compartir una página web o algún contenido web en las distintas redes sociales. Es por esto que cada red social provee botones que se insertan
en nuestra página de forma rápida y simple. A continuación veremos qué código hmtl insertar para tener nuestra página web un botón de Facebook, Twitter
y Google Plus:

== Facebook ==
(Soportado por Chrome, Firefox 3.6+, Safari, Internet Explorer 7+)
Documentacion: https://developers.facebook.com/docs/reference/plugins/like/

Facebook tiene varias formas de implementarlo, pero la que mas sencillo nos resulto en nuestro caso con un iframe.

Ejemplo de codigo:
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:140px; height:21px;" src="http://www.facebook.com/plugins/like.php?href=http://www.comunidadfusa.com.ar&locale=es_ES&layout=button_count&show_faces=true&width=140&action=like&font=arial&colorscheme=light&height=21"> </iframe>

== Twitter ==
(Soportado por Chrome, Firefox 3.6+, Safari, Internet Explorer 7+)
Documentacion: https://twitter.com/about/resources/buttons

Ejemplo de codigo:
<div><a href="https://twitter.com/share" class="twitter-share-button" data-lang="es" data-count="none">Twittear</a></div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); </script>

== Google Plus ==
(Soportado por Chrome, Firefox 3.6+, Safari, Internet Explorer 8+)
Documentacion: https://developers.google.com/+/web/+1button/

Ejemplo de codigo:

<div class="g-plusone" data-size="medium" data-annotation="none" data-href="http://www.comunidadfusa.com.ar"></div>


<script type="text/javascript">
window.___gcfg = {lang: 'es-419'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Tener en cuenta que si en el botón de Facebook agregamos una url del sitio a compartir que no contenga punto (url no válida), éste botón no se visualizará. Asi mismo, el botón de Google Plus se mostrará pero al hacer click en él, se visualizará con un símbolo de advertencia.

El mas sencillo para implementar nos resultó el de twitter porque este resuelve todo solo y no necesita ponerle la url ya que la detecta de la página en la que estamos agregando el botón. Aparte de ser el mas compatible con todos los navegadores.

Liferay Portal

2013-08-09T20:06:04Z

Maro: /* Ver también */

[[Category:Portlet]]
Liferay Portal es un [[Administrador De Contenidos]] de [[Software Libre]] basado en Java, que cumple con la [[Portlet Specification Api]].

Entre las características principales se destacan:
* Administrador de contenidos (CMS) y una Suite de colaboración
* Varios porlets integrados listos para usar
* Herramientas de desarrollo
* Traducción a 22 idiomas
* Funciona con los principales [[Servidor de Aplicaciones]], bases de datos y sistemas operativos.

== Conceptos de estilos y disposición ==
=== Tema (Theme) ===
Vamos a ver los conceptos de Tema (Theme), Disposición (Layout).

Un '''Tema (o Theme)''' es el encargado de renderizar la página en su totalidad, e incluye los aspectos visuales generales del sitio. Un Tema incluye los JavaScript generales, los CSS, y seguramente también el logo del sitio, el menú general, el pie de página, etc. El Tema define un área donde se ubicará el contenido.

Al crear un Tema en realidad se suele "heredar" de algún tema ya existente. Liferay trae 2 temas ya preparados para heredar: "_styled" (del que suele heredarse) y "_unstyled" (que es aún más básico). Se puede consultar el código de estos temas en <LIFERAY_WEBAPP>/html/themes

=== Disposición (layout) ===
Un Tema declara un área donde se ubicará el contenido. Este área de contenido puede tener distintas disposiciones (2 columnas, 3 columnas, etc.); esta disposición se conoce como Layout. Cada página en Liferay puede tener un Layout asociado.

Liferay ya trae varios Layouts comunes declarados, y pueden crearse nuevos. Se puede consultar el código de estos temas en <LIFERAY_WEBAPP>/layouttpl

== Conceptos de gestión de contenidos ==
Liferay permite manejar dos grandes conceptos para gestionar el contenido de una página:
* Estructuras
* Listas dinámicas

=== Estructuras ===
Se pueden crear estructuras de datos para que el usuario complete y pueda cambiar facilmente contenido de la página sin tocar HTML. Una estructura tiene asociado una Plantilla (Template) que indica cómo se renderiza el contenido de una Estructura.

Por ejemplo, puede crearse una estructura Promocion, que contenga un título y una imagen. Luego, se puede crear una Plantilla para la estructura Promoción que renderiza dicha estructura mostrando la imagen y el título debajo.

Al usuario final le quedan entonces 2 pasos para completar:
1. Instanciar la estructura para agregarle datos.
2. Ubicar la estructura instanciada en alguna posición de la página.

Las estructuras, plantillas y instancias de estructras se gestionan desde el Control Panel > Site > Web Content.

=== Listas dinámicas ===
Se pueden crear listas de contenido variable, para que el usuario agregue como si de una lista se tratara. Las listas son de un tipo de dato en particular (el cual se configura al igual que una estructura), y se les asocia una plantilla para renderizar la lista (y opcionalmente, una plantilla para renderizar el formulario de ingreso de un dato de la lista).

Las listas dinámicas se gestionan desde el Control Panel > Site > Dynamic Data Lists

Leer más sobre [http://www.liferay.com/es/documentation/liferay-portal/6.1/user-guide/-/ai/make-it-pretty-creating-custom-displays Crear y estilar listas dinámicas en Liferay].

== Ver también ==
* [http://www.liferay.com Web oficial de Liferay Portal]
* [http://wiki.liferay.com/index.php/Main_Page Wiki oficial de Liferay ]
* [[Dynamic Query en Liferay]]
* [[Ejecuciones automaticas en Liferay]]
* [[Maven en Liferay]]
* [[Hooks en Liferay]]
* [[Internacionalizar un texto dentro de un theme en Liferay]]
* [[Hacer un layout responsive con bootstrap en Liferay]]
* [[Configurar el editor de texto html (CKEditor) en Liferay]]
* [[Custom Fields en Liferay]]
* [[Compatibilidades CSS en Internet Explorer]]
* [[Botones Redes Sociales]]

== Componentes ==
* [[Carrusel con limite en Liferay]]
* [[Encuesta con estilos propios en Liferay]]
* [[Embeber un portlet dentro de un theme en Liferay]]
* [[Tooltip de ayuda para un componente en Liferay]]

Compatibilidades CSS en Internet Explorer

2013-08-06T19:41:05Z

Maro:

Compatibilidades CSS en Internet Explorer

2013-08-06T19:40:40Z

Maro:

Seguramente te pasó que al momento de estilar una web los estilos que funcionan en la mayoría de los navegadores para IE7 e IE8 no funcionan.
Este post es una recopilación de soluciones que son muy útiles para que nuestra web sea también compatible para IE7+.

'''Opacity en IE7+:
'''

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

'''Display inline-block en IE7+:'''

div{
display: inline-block;
zoom: 1;
*display: inline
}

Seteando zoom: 1 se activa una propiedad interna de IE llamada hasLayout que junto con el display inline solucionan el problema. El * (asterisco) hace que una propiedad sólo se aplique en los navegadores de la familia Internet Explorer anteriores a la versión 8.

'''Max width y Max height en IE7+:'''

div{
max-width: 200px;
*width: expression(document.body.clientWidth>199?"200px":"auto");.
max-height: 200px;
*height: expression(document.body.clientWidth>199?"200px":"auto");
}

'''Font-face en IE7+:'''

@font-face {
font-family: 'NombreFuenteWeb';
src: url('NombreFuenteWeb.eot?') format('eot'),url('NombreFuenteWeb.ttf') format('truetype');
}

Una aclaración importante es que el nombre de la font-family no puede superar los 31 caracteres porque sino IE la ignora. En el siguiente [[http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ link]] lo explica con más detenimiento.

Compatibilidades CSS en Internet Explorer

2013-08-06T19:40:12Z

Maro:

Seguramente te pasó que al momento de estilar una web los estilos que funcionan en la mayoría de los navegadores para IE7 e IE8 no funcionan.
Este post es una recopilación de soluciones que son muy útiles para que nuestra web sea también compatible para IE7+.

'''Opacity en IE7+:
'''

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

'''Display inline-block en IE7+:'''

div{
display: inline-block;
zoom: 1;
*display: inline
}

Seteando zoom: 1 se activa una propiedad interna de IE llamada hasLayout que junto con el display inline solucionan el problema. El * (asterisco) hace que una propiedad sólo se aplique en los navegadores de la familia Internet Explorer anteriores a la versión 8.

'''Max width y Max height en IE7+:'''

div{
max-width: 200px;
*width: expression(document.body.clientWidth>199?"200px":"auto");.
max-height: 200px;
*height: expression(document.body.clientWidth>199?"200px":"auto");
}

''''''
Font-face en IE7+:''''''

@font-face {
font-family: 'NombreFuenteWeb';
src: url('NombreFuenteWeb.eot?') format('eot'),url('NombreFuenteWeb.ttf') format('truetype');
}

Una aclaración importante es que el nombre de la font-family no puede superar los 31 caracteres porque sino IE la ignora. En el siguiente [[http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ link]] lo explica con más detenimiento.

Compatibilidades CSS en Internet Explorer

2013-08-06T19:39:53Z

Maro:

Seguramente te pasó que al momento de estilar una web los estilos que funcionan en la mayoría de los navegadores para IE7 e IE8 no funcionan.
Este post es una recopilación de soluciones que son muy útiles para que nuestra web sea también compatible para IE7+.

'''Opacity en IE7+:
'''

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

'''Display inline-block en IE7+:'''

div{
display: inline-block;
zoom: 1;
*display: inline
}

Seteando zoom: 1 se activa una propiedad interna de IE llamada hasLayout que junto con el display inline solucionan el problema. El * (asterisco) hace que una propiedad sólo se aplique en los navegadores de la familia Internet Explorer anteriores a la versión 8.

'''Max width y Max height en IE7+:'''

div{
max-width: 200px;
*width: expression(document.body.clientWidth>199?"200px":"auto");.
max-height: 200px;
*height: expression(document.body.clientWidth>199?"200px":"auto");
}

'''
Font-face en IE7+:'''

@font-face {
font-family: 'NombreFuenteWeb';
src: url('NombreFuenteWeb.eot?') format('eot'),url('NombreFuenteWeb.ttf') format('truetype');
}

Una aclaración importante es que el nombre de la font-family no puede superar los 31 caracteres porque sino IE la ignora. En el siguiente [[http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ link]] lo explica con más detenimiento.

Compatibilidades CSS en Internet Explorer

2013-08-06T19:38:47Z

Maro:

Seguramente te pasó que al momento de estilar una web los estilos que funcionan en la mayoría de los navegadores para IE7 e IE8 no funcionan.
Este post es una recopilación de soluciones que son muy útiles para que nuestra web sea también compatible para IE7+.

'''Opacity en IE7+:
'''

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

'''Display inline-block en IE7+:'''

div{
display: inline-block;
zoom: 1;
*display: inline
}

Seteando zoom: 1 se activa una propiedad interna de IE llamada hasLayout que junto con el display inline solucionan el problema. El * (asterisco) hace que una propiedad sólo se aplique en los navegadores de la familia Internet Explorer anteriores a la versión 8.

'''Max width y Max height en IE7+:'''

div{
max-width: 200px;
*width: expression(document.body.clientWidth>199?"200px":"auto");.
max-height: 200px;
*height: expression(document.body.clientWidth>199?"200px":"auto");
}

Font-face en IE7+:

@font-face {
font-family: 'NombreFuenteWeb';
src: url('NombreFuenteWeb.eot?') format('eot'),url('NombreFuenteWeb.ttf') format('truetype');
}

Una aclaración importante es que el nombre de la font-family no puede superar los 31 caracteres porque sino IE la ignora. En el siguiente [[http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ link]] lo explica con más detenimiento.

Compatibilidades CSS en Internet Explorer

2013-08-06T19:25:23Z

Maro:

Compatibilidades CSS en Internet Explorer

2013-08-06T19:16:06Z

Maro: Página creada con 'Seguramente te pasó que al momento de estilar una web los estilos que funcionan en la mayoria de navegadores para IE7 e IE8 no funcionan. Este post es una recopilación de sol…'

Seguramente te pasó que al momento de estilar una web los estilos que funcionan en la mayoria de navegadores para IE7 e IE8 no funcionan.
Este post es una recopilación de soluciones que son muy útiles para que nuestra web sea tambien compatible para IE7+.

'''Opacity en IE7+:
'''

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

'''Display inline-block en IE7+:'''

div{
display: inline-block;
zoom: 1;
*display: inline
}

El * (asterisco) hace que una propiedad sólo se aplique en los navegadores de la familia Internet Explorer anteriores a la versión 9.

'''Max width y Max height en IE7+:'''

div{
max-width: 200px;
*width: expression(document.body.clientWidth>199?"200px":"auto");.
max-height: 200px;
*height: expression(document.body.clientWidth>199?"200px":"auto");
}

Liferay Portal

2013-08-06T19:07:04Z

Maro: /* Ver también */

[[Category:Portlet]]
Liferay Portal es un [[Administrador De Contenidos]] de [[Software Libre]] basado en Java, que cumple con la [[Portlet Specification Api]].

Entre las características principales se destacan:
* Administrador de contenidos (CMS) y una Suite de colaboración
* Varios porlets integrados listos para usar
* Herramientas de desarrollo
* Traducción a 22 idiomas
* Funciona con los principales [[Servidor de Aplicaciones]], bases de datos y sistemas operativos.

== Conceptos de estilos y disposición ==
=== Tema (Theme) ===
Vamos a ver los conceptos de Tema (Theme), Disposición (Layout).

Un '''Tema (o Theme)''' es el encargado de renderizar la página en su totalidad, e incluye los aspectos visuales generales del sitio. Un Tema incluye los JavaScript generales, los CSS, y seguramente también el logo del sitio, el menú general, el pie de página, etc. El Tema define un área donde se ubicará el contenido.

Al crear un Tema en realidad se suele "heredar" de algún tema ya existente. Liferay trae 2 temas ya preparados para heredar: "_styled" (del que suele heredarse) y "_unstyled" (que es aún más básico). Se puede consultar el código de estos temas en <LIFERAY_WEBAPP>/html/themes

=== Disposición (layout) ===
Un Tema declara un área donde se ubicará el contenido. Este área de contenido puede tener distintas disposiciones (2 columnas, 3 columnas, etc.); esta disposición se conoce como Layout. Cada página en Liferay puede tener un Layout asociado.

Liferay ya trae varios Layouts comunes declarados, y pueden crearse nuevos. Se puede consultar el código de estos temas en <LIFERAY_WEBAPP>/layouttpl

== Conceptos de gestión de contenidos ==
Liferay permite manejar dos grandes conceptos para gestionar el contenido de una página:
* Estructuras
* Listas dinámicas

=== Estructuras ===
Se pueden crear estructuras de datos para que el usuario complete y pueda cambiar facilmente contenido de la página sin tocar HTML. Una estructura tiene asociado una Plantilla (Template) que indica cómo se renderiza el contenido de una Estructura.

Por ejemplo, puede crearse una estructura Promocion, que contenga un título y una imagen. Luego, se puede crear una Plantilla para la estructura Promoción que renderiza dicha estructura mostrando la imagen y el título debajo.

Al usuario final le quedan entonces 2 pasos para completar:
1. Instanciar la estructura para agregarle datos.
2. Ubicar la estructura instanciada en alguna posición de la página.

Las estructuras, plantillas y instancias de estructras se gestionan desde el Control Panel > Site > Web Content.

=== Listas dinámicas ===
Se pueden crear listas de contenido variable, para que el usuario agregue como si de una lista se tratara. Las listas son de un tipo de dato en particular (el cual se configura al igual que una estructura), y se les asocia una plantilla para renderizar la lista (y opcionalmente, una plantilla para renderizar el formulario de ingreso de un dato de la lista).

Las listas dinámicas se gestionan desde el Control Panel > Site > Dynamic Data Lists

Leer más sobre [http://www.liferay.com/es/documentation/liferay-portal/6.1/user-guide/-/ai/make-it-pretty-creating-custom-displays Crear y estilar listas dinámicas en Liferay].

== Ver también ==
* [http://www.liferay.com Web oficial de Liferay Portal]
* [http://wiki.liferay.com/index.php/Main_Page Wiki oficial de Liferay ]
* [[Dynamic Query en Liferay]]
* [[Ejecuciones automaticas en Liferay]]
* [[Maven en Liferay]]
* [[Hooks en Liferay]]
* [[Internacionalizar un texto dentro de un theme en Liferay]]
* [[Hacer un layout responsive con bootstrap en Liferay]]
* [[Configurar el editor de texto html (CKEditor) en Liferay]]
* [[Custom Fields en Liferay]]
* [[Compatibilidades CSS en Internet Explorer]]

== Componentes ==
* [[Carrusel con limite en Liferay]]
* [[Encuesta con estilos propios en Liferay]]
* [[Embeber un portlet dentro de un theme en Liferay]]
* [[Tooltip de ayuda para un componente en Liferay]]

Tooltip de ayuda para un componente en Liferay

2013-08-02T17:46:55Z

Maro:

== Introducción ==

A continuación se explicará como realizar un tooltip de ayuda para [[Liferay Portal]].
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 queda a manos del componente que lo utiliza.
Su funcionalidad principal es mostrar un tooltip de ayuda y con contenido personalizable.
Tiene soporte para IE7+/Firefox/Chrome/Safari.

== Implementación ==

Como mencioné anteriormente, el tooltip de ayuda solo cuenta con una estructura. En la implementación elegida, la misma está compuesta por un solo campo de texto enriquecido que será el que contiene la información del tooltip.
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 div donde guarde la informacion del campo de texto enriquecido.
Por último, para convertir en un tooltip al div anterior, utilizamos una libreria js llamada [http://qtip2.com/ qtip2]. La misma nos permite de una forma muy facil crear un tooltip altamente personalizable.
Como particularidad del estilado con lo único que nos encontramos es que para IE7 y IE8 no es soportado el estilo display: inline-block. La solucion es agregar los siguientes estilos:

div{
display: inline-block;
zoom: 1;
*display: inline
}

El * (asterisco) hace que una propiedad sólo se aplique en los navegadores de la familia Internet Explorer anteriores a la versión 8.

== Conclusión ==
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 de codigo ya que podemos usar el mismo tooltip de ayuda en todos los componentes.

Tooltip de ayuda para un componente en Liferay

2013-08-02T14:47:55Z

Maro:

== Introducción ==

A continuación se explicará como realizar un tooltip de ayuda para [[Liferay Portal]].
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 queda a manos del componente que lo utiliza.
Su funcionalidad principal es mostrar un tooltip de ayuda y con contenido personalizable.
Tiene soporte para IE7+/Firefox/Chrome/Safari.

== Implementación ==

Como mencioné anteriormente, el tooltip de ayuda solo cuenta con una estructura. En la implementación elegida, la misma está compuesta por un solo campo de texto enriquecido que será el que contiene la información del tooltip.
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 div donde guarde la informacion del campo de texto enriquecido.
Por último, para convertir en un tooltip al div anterior, utilizamos una libreria js llamada [http://qtip2.com/ qtip2]. La misma nos permite de una forma muy facil crear un tooltip altamente personalizable.
Como particularidad del estilado con lo único que nos encontramos es que para IE7 y IE8 no es soportado el estilo display: inline-block. La solucion es agregar los siguientes estilos:

div{
display: inline-block; zoom: 1; *display: inline
}

== Conclusión ==
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 de codigo ya que podemos usar el mismo tooltip de ayuda en todos los componentes.

Tooltip de ayuda para un componente en Liferay

2013-08-02T14:40:41Z

Maro: Página creada con '== Introducción == 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 rend…'

== Introducción ==

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
queda a manos del componente que lo utiliza.
Su funcionalidad principal es mostrar un tooltip de ayuda y su contenido es personalizable.
Tiene soporte para IE7+/Firefox/Chrome/Safari.

== Implementación ==

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
enriquecido que será el que contiene la información del tooltip.
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
div donde guarde la informacion del campo de texto enriquecido.
Por último, para convertir en un tooltip al div anterior, utilizamos una libreria js llamada qtip2. La misma nos permite de una forma muy facil crear un tooltip
altamente personalizable.
Como particularidad del estilado con lo único que nos encontramos es que para IE7 y IE8 no es soportado el estilo display: inline-block. La solucion es agregar
los siguientes estilos:

div{
display: inline-block; zoom: 1; *display: inline
}

== Conclusión ==
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
de codigo ya que podemos usar el mismo tooltip de ayuda en todos los componentes.

Carrusel con limite en Liferay

2013-08-02T14:39:15Z

Maro:

== 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 ==

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.

Carrusel con limite en Liferay

2013-08-02T14:32:07Z

Maro:

== 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.

Carrusel con limite en Liferay

2013-08-02T14:31:04Z

Maro:

== Introducción ==

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
queda a manos del componente que lo utiliza.
Su funcionalidad principal es mostrar un tooltip de ayuda y su contenido es personalizable.
Tiene soporte para IE7+/Firefox/Chrome/Safari.

== Implementación ==

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
enriquecido que será el que contiene la información del tooltip.
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
div donde guarde la informacion del campo de texto enriquecido.
Por último, para convertir en un tooltip al div anterior, utilizamos una libreria js llamada qtip2. La misma nos permite de una forma muy facil crear un tooltip
altamente personalizable.
Como particularidad del estilado con lo único que nos encontramos es que para IE7 y IE8 no es soportado el estilo display: inline-block. La solucion es agregar
los siguientes estilos:

div{
display: inline-block;
zoom: 1;
*display: inline;
}

== Conclusión ==
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
de codigo ya que podemos usar el mismo tooltip de ayuda en todos los componentes.

Liferay Portal

2013-08-02T14:23:40Z

Maro: /* Componentes */

[[Category:Portlet]]
Liferay Portal es un [[Administrador De Contenidos]] de [[Software Libre]] basado en Java, que cumple con la [[Portlet Specification Api]].

Entre las características principales se destacan:
* Administrador de contenidos (CMS) y una Suite de colaboración
* Varios porlets integrados listos para usar
* Herramientas de desarrollo
* Traducción a 22 idiomas
* Funciona con los principales [[Servidor de Aplicaciones]], bases de datos y sistemas operativos.

== Conceptos de estilos y disposición ==
=== Tema (Theme) ===
Vamos a ver los conceptos de Tema (Theme), Disposición (Layout).

Un '''Tema (o Theme)''' es el encargado de renderizar la página en su totalidad, e incluye los aspectos visuales generales del sitio. Un Tema incluye los JavaScript generales, los CSS, y seguramente también el logo del sitio, el menú general, el pie de página, etc. El Tema define un área donde se ubicará el contenido.

Al crear un Tema en realidad se suele "heredar" de algún tema ya existente. Liferay trae 2 temas ya preparados para heredar: "_styled" (del que suele heredarse) y "_unstyled" (que es aún más básico). Se puede consultar el código de estos temas en <LIFERAY_WEBAPP>/html/themes

=== Disposición (layout) ===
Un Tema declara un área donde se ubicará el contenido. Este área de contenido puede tener distintas disposiciones (2 columnas, 3 columnas, etc.); esta disposición se conoce como Layout. Cada página en Liferay puede tener un Layout asociado.

Liferay ya trae varios Layouts comunes declarados, y pueden crearse nuevos. Se puede consultar el código de estos temas en <LIFERAY_WEBAPP>/layouttpl

== Conceptos de gestión de contenidos ==
Liferay permite manejar dos grandes conceptos para gestionar el contenido de una página:
* Estructuras
* Listas dinámicas

=== Estructuras ===
Se pueden crear estructuras de datos para que el usuario complete y pueda cambiar facilmente contenido de la página sin tocar HTML. Una estructura tiene asociado una Plantilla (Template) que indica cómo se renderiza el contenido de una Estructura.

Por ejemplo, puede crearse una estructura Promocion, que contenga un título y una imagen. Luego, se puede crear una Plantilla para la estructura Promoción que renderiza dicha estructura mostrando la imagen y el título debajo.

Al usuario final le quedan entonces 2 pasos para completar:
1. Instanciar la estructura para agregarle datos.
2. Ubicar la estructura instanciada en alguna posición de la página.

Las estructuras, plantillas y instancias de estructras se gestionan desde el Control Panel > Site > Web Content.

=== Listas dinámicas ===
Se pueden crear listas de contenido variable, para que el usuario agregue como si de una lista se tratara. Las listas son de un tipo de dato en particular (el cual se configura al igual que una estructura), y se les asocia una plantilla para renderizar la lista (y opcionalmente, una plantilla para renderizar el formulario de ingreso de un dato de la lista).

Las listas dinámicas se gestionan desde el Control Panel > Site > Dynamic Data Lists

Leer más sobre [http://www.liferay.com/es/documentation/liferay-portal/6.1/user-guide/-/ai/make-it-pretty-creating-custom-displays Crear y estilar listas dinámicas en Liferay].

== Ver también ==
* [http://www.liferay.com Web oficial de Liferay Portal]
* [http://wiki.liferay.com/index.php/Main_Page Wiki oficial de Liferay ]
* [[Dynamic Query en Liferay]]
* [[Ejecuciones automaticas en Liferay]]
* [[Maven en Liferay]]
* [[Hooks en Liferay]]
* [[Internacionalizar un texto dentro de un theme en Liferay]]
* [[Hacer un layout responsive con bootstrap en Liferay]]
* [[Configurar el editor de texto html (CKEditor) en Liferay]]
* [[Custom Fields en Liferay]]

== Componentes ==
* [[Carrusel con limite en Liferay]]
* [[Encuesta con estilos propios en Liferay]]
* [[Embeber un portlet dentro de un theme en Liferay]]
* [[Tooltip de ayuda para un componente en Liferay]]

Encuesta con estilos propios en Liferay

2013-07-22T15:44:41Z

Maro: Página creada con '== Descripción == Edición de los estilos de las encuestas nativas de Liferay Portal, en base a un modelo a seguir existente. == Implementación == Utilizamos un tema pa…'

== Descripción ==

Edición de los estilos de las encuestas nativas de [[Liferay Portal]], en base a un modelo a seguir existente.

== Implementación ==

Utilizamos un tema para estilar las encuestas que vienen por default en [[Liferay Portal]], modificando un archivo CSS y utilizando una librería externa de JavaScript llamada [http://selectivizr.com/ Selectivizr], cuya funcionalidad es emular pseudo clases CSS3 y atributos selectores para Internet Explorer 6-8.

A la hora de darle estilo a determinado elementos html usamos [http://librosweb.es/css_avanzado/capitulo_3/selectores_de_css_3.html selectores CCS3] y [http://librosweb.es/css_avanzado/capitulo_3/pseudo_clases.html Pseudo-clases] que nos permitieron desarrollarlo, ya que de otra forma no era posible acceder a los elementos a estilar.

== Dificultades ==

* [http://issues.liferay.com/browse/LPS-29594 Bug] de Liferay Portal version 6.1 CE para visualizar las barras de porcentaje de las encuestas.
* La estructura de html que generan las encuestas no es "amigable" a la hora de darle estilo. Uso de tablas, faltante de identificadores para poder seleccionar los elementos, etc.
* El cálculo del porcentaje no funciona correctamente con Internet Explorer, Firefox, etc. Debido a como arma el html los porcentajes.
* Hay que seleccionar los elementos según los [http://www.liferay.com/community/wiki/-/wiki/Main/Portlet+IDs identificadores de porlets de Liferay], ya que con archivos css no se puede de otra forma.

== Conclusión ==

Consideramos que no fue fácil darle estilo al porlet de encuestas ya que encontramos varias dificultades, y presenta limitaciones al estilarlo. No pudimos lograr la totalidad del modelo.

Por otro lado vemos que si podríamos cambiar la forma del template y la estructura html seria mucho mas sencillo darle estilo al mismo y lograr mayor compatibilidad con todos los navegadores.

Liferay Portal

2013-07-22T15:41:54Z

Maro: /* Componentes */

[[Category:Portlet]]
Liferay Portal es un [[Administrador De Contenidos]] de [[Software Libre]] basado en Java, que cumple con la [[Portlet Specification Api]].

Entre las características principales se destacan:
* Administrador de contenidos (CMS) y una Suite de colaboración
* Varios porlets integrados listos para usar
* Herramientas de desarrollo
* Traducción a 22 idiomas
* Funciona con los principales [[Servidor de Aplicaciones]], bases de datos y sistemas operativos.

== Conceptos de estilos y disposición ==
=== Tema (Theme) ===
Vamos a ver los conceptos de Tema (Theme), Disposición (Layout).

Un '''Tema (o Theme)''' es el encargado de renderizar la página en su totalidad, e incluye los aspectos visuales generales del sitio. Un Tema incluye los JavaScript generales, los CSS, y seguramente también el logo del sitio, el menú general, el pie de página, etc. El Tema define un área donde se ubicará el contenido.

Al crear un Tema en realidad se suele "heredar" de algún tema ya existente. Liferay trae 2 temas ya preparados para heredar: "_styled" (del que suele heredarse) y "_unstyled" (que es aún más básico). Se puede consultar el código de estos temas en <LIFERAY_WEBAPP>/html/themes

=== Disposición (layout) ===
Un Tema declara un área donde se ubicará el contenido. Este área de contenido puede tener distintas disposiciones (2 columnas, 3 columnas, etc.); esta disposición se conoce como Layout. Cada página en Liferay puede tener un Layout asociado.

Liferay ya trae varios Layouts comunes declarados, y pueden crearse nuevos. Se puede consultar el código de estos temas en <LIFERAY_WEBAPP>/layouttpl

== Conceptos de gestión de contenidos ==
Liferay permite manejar dos grandes conceptos para gestionar el contenido de una página:
* Estructuras
* Listas dinámicas

=== Estructuras ===
Se pueden crear estructuras de datos para que el usuario complete y pueda cambiar facilmente contenido de la página sin tocar HTML. Una estructura tiene asociado una Plantilla (Template) que indica cómo se renderiza el contenido de una Estructura.

Por ejemplo, puede crearse una estructura Promocion, que contenga un título y una imagen. Luego, se puede crear una Plantilla para la estructura Promoción que renderiza dicha estructura mostrando la imagen y el título debajo.

Al usuario final le quedan entonces 2 pasos para completar:
1. Instanciar la estructura para agregarle datos.
2. Ubicar la estructura instanciada en alguna posición de la página.

Las estructuras, plantillas y instancias de estructras se gestionan desde el Control Panel > Site > Web Content.

=== Listas dinámicas ===
Se pueden crear listas de contenido variable, para que el usuario agregue como si de una lista se tratara. Las listas son de un tipo de dato en particular (el cual se configura al igual que una estructura), y se les asocia una plantilla para renderizar la lista (y opcionalmente, una plantilla para renderizar el formulario de ingreso de un dato de la lista).

Las listas dinámicas se gestionan desde el Control Panel > Site > Dynamic Data Lists

Leer más sobre [http://www.liferay.com/es/documentation/liferay-portal/6.1/user-guide/-/ai/make-it-pretty-creating-custom-displays Crear y estilar listas dinámicas en Liferay].

== Ver también ==
* [http://www.liferay.com Web oficial de Liferay Portal]
* [http://wiki.liferay.com/index.php/Main_Page Wiki oficial de Liferay ]
* [[Dynamic Query en Liferay]]

== Componentes ==
* [[Carrusel con limite en Liferay]]
* [[Encuesta con estilos propios en Liferay]]

Carrusel con limite en Liferay

2013-07-17T15:54:46Z

Maro: /* Implementación */

== 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.

== 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.

Carrusel con limite en Liferay

2013-07-17T15:50:35Z

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…'

== 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.

Liferay Portal

2013-07-17T15:45:04Z

Maro:

SiteMesh 2

2012-10-10T19:20:02Z

Maro: /* Para qué se usa */

== Qué es SiteMesh ==
Es un framework Java para aplicaciones web que aplica el patrón de diseño [http://es.wikipedia.org/wiki/Decorator_(patr%C3%B3n_de_dise%C3%B1o) Decorator] para permitir la separación de contenido en la capa de presentación.

Con este framework se puede definir la distribución de contenido (layout) de la vista y componerla en base a páginas simples, las cuales conformarán una página compleja (decorada) justo antes de enviarse al cliente.

== Para qué se usa ==

SiteMesh utiliza [http://www.oracle.com/technetwork/java/filters-137243.html Filters] disponibles a partir de la versión 2.3 de Java Servlet.

* SiteMesh intercepta las peticiones de todas las paginas HTML generadas, procesa el contenido y lo "decora" para obtener el resultado final.

* También puede generar una pagina compleja a partir de varias pequeñas.

[[File:diagrama_sitemesh.png]]

== Cómo se implementa ==

=== Instalar SiteMesh Manualmente ===

Seguir estos 3 pasos:

1. Agregar la biblioteca [http://wiki.sitemesh.org/display/sitemesh/Download SiteMesh jar] en WEB-INF/lib
2. Configurar el siguiente filtro en el archivo WEB-INF/web.xml, dentro del tag <web-app>
<pre>
<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</pre>

3. Crear el archivo decorators.xml en el directorio WEB-INF con el siguiente contenido
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators>
</decorators>
</pre>

Hasta acá la aplicación debe seguir funcionando normalmente, ya que no se esta implementando ningún decorators aún.

=== Configurando SiteMesh ===
Según el propio sitio de [http://wiki.sitemesh.org/display/sitemesh/Home SiteMesh] la mejor forma para entender esta biblioteca es usándola.

En los siguientes pasos explicaremos como implementar un ejemplo simple en un proyecto existente:

1. Crear la página '''menu.jsp''' dentro de una carpeta nueva llamada '''data''' en el directorio de contenido web (generalmente '''web''') con el siguiente contenido.
<pre>
<h1>Beverages</h1>
<p>Cappucino $3.25</p>
<p>Latte $3.35</p>
<p>Espresso $2.00</p>
<p>Mocha $3.50</p>
</pre>

2. Crear la página '''hours.jsp''' en la misma ubicación que la página anterior con este contenido.
<pre>
<h1>Weekdays</h1>
<p>5:00pm - 10:00pm</p>
<p>Weekends</p>
<p>5:00pm - 10:00pm</p>
</pre>

3. Crear la página de layout ('''basic-theme.jsp''')en la misma carpeta con el siguiente contenido.
<pre>
<?xml version="1.0" encoding="UTF-8" ?>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>Header</h1>
<p><b>Navigation</b></p>
<hr />
<decorator:body />
<hr />
<h1>Footer</b></h1>
</body>
</html>
</pre>

''El tag decorator:body será reemplazado por el contenido de la página a "decorar".''

4. Configurar el archivo '''decorator.xml''' de la siguiente forma
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">
<decorator name="basic-theme" page="basic-theme.jsp">
<pattern>/data/*</pattern>
</decorator>
</decorators>
</pre>

''Con esta configuración estamos indicando que se aplique el decorador '''basic-theme.jsp''' a todas los contenidos previamente creados en la carpeta "/data".''

5. Por último es necesario reiniciar el servidor, para que tome los cambios realizados en el proyecto, y luego al acceder a alguna de las páginas '''menu.jsp''' o '''hours.jsp''' se visualizarán sus contenidos decorados con el layout configurado ('''basic-theme.jsp''')

== Nuestra experiencia ==
Antes de implementar '''SiteMesh''' en nuestro proyecto constaba de 5 páginas HTML las cuales tenían duplicado su contenido estático en las secciones de '''Cabecera''', '''Menu''' y '''Pie de página'''.

Esto nos generaba un inconveniente al momento de mantener estas páginas y tener que modificar el contenido estático en todas.

Por esta razón buscamos una biblioteca que nos permitiera definir una página layout que decore las páginas de contenido dinámico de nuestro sitio y nos permita reutilizar las páginas estáticas.

Encontramos esta biblioteca y pudimos implementarla en nuestro proyecto de forma sencilla.

Lo siguiente fue extraer los contenido estáticos a diferentes archivos jsp ('''cabecera.jsp''', '''menu.jsp''' y '''pie.jsp''') que luego pudimos incluir en la página de layout '''basic-theme.jsp''' de la siguiente forma.
<pre>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<%@ include file="/includes/meta.jsp" %>
</head>
<body>
<div class="contenedorPrincipal">
<%@ include file="/includes/cabecera.jsp" %>

<%@ include file="/includes/menu.jsp" %>
<decorator:body />
<%@ include file="/includes/pie.jsp" %>
</div>
</body>
</html>
</pre>

== Conclusión ==
Como conclusión podemos decir que '''SiteMesh''' se puede implementar de forma rápida, sencilla y no invasiva en un proyecto existente y su configuración es intuitiva.
Además que resuelve la problemática de reutilización de contenido estático en un proyecto web.

Así que les recomendamos que visiten el sitio de [http://wiki.sitemesh.org/display/sitemesh/Home SiteMesh] para mayor información.

Archivo:Diagrama sitemesh.jpg

2012-10-10T19:19:39Z

Maro:

SiteMesh 2

2012-10-10T19:19:20Z

Maro: /* Para qué se usa */

== Qué es SiteMesh ==
Es un framework Java para aplicaciones web que aplica el patrón de diseño [http://es.wikipedia.org/wiki/Decorator_(patr%C3%B3n_de_dise%C3%B1o) Decorator] para permitir la separación de contenido en la capa de presentación.

Con este framework se puede definir la distribución de contenido (layout) de la vista y componerla en base a páginas simples, las cuales conformarán una página compleja (decorada) justo antes de enviarse al cliente.

== Para qué se usa ==

SiteMesh utiliza [http://www.oracle.com/technetwork/java/filters-137243.html Filters] disponibles a partir de la versión 2.3 de Java Servlet.

* SiteMesh intercepta las peticiones de todas las paginas HTML generadas, procesa el contenido y lo "decora" para obtener el resultado final.

* También puede generar una pagina compleja a partir de varias pequeñas.

[[File:diagrama_sitemesh.png]]
[[File:diagrama_sitemesh.jpg]]

== Cómo se implementa ==

=== Instalar SiteMesh Manualmente ===

Seguir estos 3 pasos:

1. Agregar la biblioteca [http://wiki.sitemesh.org/display/sitemesh/Download SiteMesh jar] en WEB-INF/lib
2. Configurar el siguiente filtro en el archivo WEB-INF/web.xml, dentro del tag <web-app>
<pre>
<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</pre>

3. Crear el archivo decorators.xml en el directorio WEB-INF con el siguiente contenido
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators>
</decorators>
</pre>

Hasta acá la aplicación debe seguir funcionando normalmente, ya que no se esta implementando ningún decorators aún.

=== Configurando SiteMesh ===
Según el propio sitio de [http://wiki.sitemesh.org/display/sitemesh/Home SiteMesh] la mejor forma para entender esta biblioteca es usándola.

En los siguientes pasos explicaremos como implementar un ejemplo simple en un proyecto existente:

1. Crear la página '''menu.jsp''' dentro de una carpeta nueva llamada '''data''' en el directorio de contenido web (generalmente '''web''') con el siguiente contenido.
<pre>
<h1>Beverages</h1>
<p>Cappucino $3.25</p>
<p>Latte $3.35</p>
<p>Espresso $2.00</p>
<p>Mocha $3.50</p>
</pre>

2. Crear la página '''hours.jsp''' en la misma ubicación que la página anterior con este contenido.
<pre>
<h1>Weekdays</h1>
<p>5:00pm - 10:00pm</p>
<p>Weekends</p>
<p>5:00pm - 10:00pm</p>
</pre>

3. Crear la página de layout ('''basic-theme.jsp''')en la misma carpeta con el siguiente contenido.
<pre>
<?xml version="1.0" encoding="UTF-8" ?>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>Header</h1>
<p><b>Navigation</b></p>
<hr />
<decorator:body />
<hr />
<h1>Footer</b></h1>
</body>
</html>
</pre>

''El tag decorator:body será reemplazado por el contenido de la página a "decorar".''

4. Configurar el archivo '''decorator.xml''' de la siguiente forma
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">
<decorator name="basic-theme" page="basic-theme.jsp">
<pattern>/data/*</pattern>
</decorator>
</decorators>
</pre>

''Con esta configuración estamos indicando que se aplique el decorador '''basic-theme.jsp''' a todas los contenidos previamente creados en la carpeta "/data".''

5. Por último es necesario reiniciar el servidor, para que tome los cambios realizados en el proyecto, y luego al acceder a alguna de las páginas '''menu.jsp''' o '''hours.jsp''' se visualizarán sus contenidos decorados con el layout configurado ('''basic-theme.jsp''')

== Nuestra experiencia ==
Antes de implementar '''SiteMesh''' en nuestro proyecto constaba de 5 páginas HTML las cuales tenían duplicado su contenido estático en las secciones de '''Cabecera''', '''Menu''' y '''Pie de página'''.

Esto nos generaba un inconveniente al momento de mantener estas páginas y tener que modificar el contenido estático en todas.

Por esta razón buscamos una biblioteca que nos permitiera definir una página layout que decore las páginas de contenido dinámico de nuestro sitio y nos permita reutilizar las páginas estáticas.

Encontramos esta biblioteca y pudimos implementarla en nuestro proyecto de forma sencilla.

Lo siguiente fue extraer los contenido estáticos a diferentes archivos jsp ('''cabecera.jsp''', '''menu.jsp''' y '''pie.jsp''') que luego pudimos incluir en la página de layout '''basic-theme.jsp''' de la siguiente forma.
<pre>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<%@ include file="/includes/meta.jsp" %>
</head>
<body>
<div class="contenedorPrincipal">
<%@ include file="/includes/cabecera.jsp" %>

<%@ include file="/includes/menu.jsp" %>
<decorator:body />
<%@ include file="/includes/pie.jsp" %>
</div>
</body>
</html>
</pre>

== Conclusión ==
Como conclusión podemos decir que '''SiteMesh''' se puede implementar de forma rápida, sencilla y no invasiva en un proyecto existente y su configuración es intuitiva.
Además que resuelve la problemática de reutilización de contenido estático en un proyecto web.

Así que les recomendamos que visiten el sitio de [http://wiki.sitemesh.org/display/sitemesh/Home SiteMesh] para mayor información.

Archivo:Diagrama sitemesh.png

2012-10-10T19:16:58Z

Maro:

SiteMesh 2

2012-09-14T16:15:49Z

Maro: /* Nuestra experiencia */

SiteMesh 2

2012-09-14T16:15:25Z

Maro: /* Nuestra experiencia */

== Qué es SiteMesh ==
Es un framework Java para aplicaciones web que aplica el patrón de diseño [http://es.wikipedia.org/wiki/Decorator_(patr%C3%B3n_de_dise%C3%B1o) Decorator] para permitir la separación de contenido en la capa de presentación.

Con este framework se puede definir la distribución de contenido (layout) de la vista y componerla en base a páginas simples, las cuales conformarán una página compleja (decorada) justo antes de enviarse al cliente.

== Para qué se usa ==

SiteMesh utiliza [http://www.oracle.com/technetwork/java/filters-137243.html Filters] disponibles a partir de la versión 2.3 de Java Servlet.

* SiteMesh intercepta las peticiones de todas las paginas HTML generadas, procesa el contenido y lo "decora" para obtener el resultado final.

* También puede generar una pagina compleja a partir de varias pequeñas.

[[File:diagrama_sitemesh.png]]

== Cómo se implementa ==

=== Instalar SiteMesh Manualmente ===

Seguir estos 3 pasos:

1. Agregar la biblioteca [http://wiki.sitemesh.org/display/sitemesh/Download SiteMesh jar] en WEB-INF/lib
2. Configurar el siguiente filtro en el archivo WEB-INF/web.xml, dentro del tag <web-app>
<pre>
<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</pre>

3. Crear el archivo decorators.xml en el directorio WEB-INF con el siguiente contenido
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators>
</decorators>
</pre>

Hasta acá la aplicación debe seguir funcionando normalmente, ya que no se esta implementando ningún decorators aún.

=== Configurando SiteMesh ===
Según el propio sitio de [http://wiki.sitemesh.org/display/sitemesh/Home SiteMesh] la mejor forma para entender esta biblioteca es usándola.

En los siguientes pasos explicaremos como implementar un ejemplo simple en un proyecto existente:

1. Crear la página '''menu.jsp''' dentro de una carpeta nueva llamada '''data''' en el directorio de contenido web (generalmente '''web''') con el siguiente contenido.
<pre>
<h1>Beverages</h1>
<p>Cappucino $3.25</p>
<p>Latte $3.35</p>
<p>Espresso $2.00</p>
<p>Mocha $3.50</p>
</pre>

2. Crear la página '''hours.jsp''' en la misma ubicación que la página anterior con este contenido.
<pre>
<h1>Weekdays</h1>
<p>5:00pm - 10:00pm</p>
<p>Weekends</p>
<p>5:00pm - 10:00pm</p>
</pre>

3. Crear la página de layout ('''basic-theme.jsp''')en la misma carpeta con el siguiente contenido.
<pre>
<?xml version="1.0" encoding="UTF-8" ?>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>Header</h1>
<p><b>Navigation</b></p>
<hr />
<decorator:body />
<hr />
<h1>Footer</b></h1>
</body>
</html>
</pre>

''El tag decorator:body será reemplazado por el contenido de la página a "decorar".''

4. Configurar el archivo '''decorator.xml''' de la siguiente forma
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">
<decorator name="basic-theme" page="basic-theme.jsp">
<pattern>/data/*</pattern>
</decorator>
</decorators>
</pre>

''Con esta configuración estamos indicando que se aplique el decorador '''basic-theme.jsp''' a todas los contenidos previamente creados en la carpeta "/data".''

5. Por último es necesario reiniciar el servidor, para que tome los cambios realizados en el proyecto, y luego al acceder a alguna de las páginas '''menu.jsp''' o '''hours.jsp''' se visualizarán sus contenidos decorados con el layout configurado ('''basic-theme.jsp''')

== Nuestra experiencia ==
Antes de implementar '''SiteMesh''' en nuestro proyecto constaba de 5 páginas HTML las cuales tenían duplicado su contenido estático en las secciones de '''Cabecera''', '''Menu''' y '''Pie de página'''.

Esto nos generaba un inconveniente al momento de mantener estas páginas y tener que modificar el contenido estático en todas.

Por esta razón buscamos una biblioteca que nos permitiera definir una página layout que decore las páginas de contenido dinámico de nuestro sitio y nos permita reutilizar las páginas estáticas.

Encontramos esta biblioteca y pudimos implementarla en nuestro proyecto de forma sencilla.

Lo siguiente fue extraer los contenido estáticos a diferentes archivos jsp ('''cabecera.jsp''', '''menu.jsp''' y '''pie.jsp''') que luego pudimos incluir en la página de layout '''basic-theme.jsp''' de la siguiente forma.
<pre>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<%@ include file="/includes/meta.jsp" %>
</head>
<body>
<div class="contenedorPrincipal">
<%@ include file="/includes/cabecera.jsp" %>

<%@ include file="/includes/menu.jsp" %>
<decorator:body />
<%@ include file="/includes/pie.jsp" %>
</div>
</body>
</html>
</pre>

Como conclusión podemos decir que '''SiteMesh''' se puede implementar de forma rápida, sencilla y no invasiva en un proyecto existente y su configuración es intuitiva.
Además que resuelve la problemática de reutilización de contenido estático en un proyecto web.

Así que les recomendamos que visiten el sitio de [http://wiki.sitemesh.org/display/sitemesh/Home SiteMesh] para mayor información.

SiteMesh 2

2012-09-14T16:08:49Z

Maro: /* Nuestra experiencia */

== Qué es SiteMesh ==
Es un framework Java para aplicaciones web que aplica el patrón de diseño [http://es.wikipedia.org/wiki/Decorator_(patr%C3%B3n_de_dise%C3%B1o) Decorator] para permitir la separación de contenido en la capa de presentación.

Con este framework se puede definir la distribución de contenido (layout) de la vista y componerla en base a páginas simples, las cuales conformarán una página compleja (decorada) justo antes de enviarse al cliente.

== Para qué se usa ==

SiteMesh utiliza [http://www.oracle.com/technetwork/java/filters-137243.html Filters] disponibles a partir de la versión 2.3 de Java Servlet.

* SiteMesh intercepta las peticiones de todas las paginas HTML generadas, procesa el contenido y lo "decora" para obtener el resultado final.

* También puede generar una pagina compleja a partir de varias pequeñas.

[[File:diagrama_sitemesh.png]]

== Cómo se implementa ==

=== Instalar SiteMesh Manualmente ===

Seguir estos 3 pasos:

1. Agregar la biblioteca [http://wiki.sitemesh.org/display/sitemesh/Download SiteMesh jar] en WEB-INF/lib
2. Configurar el siguiente filtro en el archivo WEB-INF/web.xml, dentro del tag <web-app>
<pre>
<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</pre>

3. Crear el archivo decorators.xml en el directorio WEB-INF con el siguiente contenido
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators>
</decorators>
</pre>

Hasta acá la aplicación debe seguir funcionando normalmente, ya que no se esta implementando ningún decorators aún.

=== Configurando SiteMesh ===
Según el propio sitio de [http://wiki.sitemesh.org/display/sitemesh/Home SiteMesh] la mejor forma para entender esta biblioteca es usándola.

En los siguientes pasos explicaremos como implementar un ejemplo simple en un proyecto existente:

1. Crear la página '''menu.jsp''' dentro de una carpeta nueva llamada '''data''' en el directorio de contenido web (generalmente '''web''') con el siguiente contenido.
<pre>
<h1>Beverages</h1>
<p>Cappucino $3.25</p>
<p>Latte $3.35</p>
<p>Espresso $2.00</p>
<p>Mocha $3.50</p>
</pre>

2. Crear la página '''hours.jsp''' en la misma ubicación que la página anterior con este contenido.
<pre>
<h1>Weekdays</h1>
<p>5:00pm - 10:00pm</p>
<p>Weekends</p>
<p>5:00pm - 10:00pm</p>
</pre>

3. Crear la página de layout ('''basic-theme.jsp''')en la misma carpeta con el siguiente contenido.
<pre>
<?xml version="1.0" encoding="UTF-8" ?>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>Header</h1>
<p><b>Navigation</b></p>
<hr />
<decorator:body />
<hr />
<h1>Footer</b></h1>
</body>
</html>
</pre>

''El tag decorator:body será reemplazado por el contenido de la página a "decorar".''

4. Configurar el archivo '''decorator.xml''' de la siguiente forma
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">
<decorator name="basic-theme" page="basic-theme.jsp">
<pattern>/data/*</pattern>
</decorator>
</decorators>
</pre>

''Con esta configuración estamos indicando que se aplique el decorador '''basic-theme.jsp''' a todas los contenidos previamente creados en la carpeta "/data".''

5. Por último es necesario reiniciar el servidor, para que tome los cambios realizados en el proyecto, y luego al acceder a alguna de las páginas '''menu.jsp''' o '''hours.jsp''' se visualizarán sus contenidos decorados con el layout configurado ('''basic-theme.jsp''')

== Nuestra experiencia ==
Antes de implementar '''SiteMesh''' en nuestro proyecto constaba de 5 páginas HTML las cuales tenían duplicado su contenido estático en las secciones de '''Cabecera''', '''Menu''' y '''Pie de página'''.

Esto nos generaba un inconveniente al momento de mantener estas páginas y tener que modificar el contenido estático en todas.

Por esta razón buscamos una biblioteca que nos permitiera definir una página layout que decore las páginas de contenido dinámico de nuestro sitio y nos permita reutilizar las páginas estáticas.

Encontramos esta biblioteca y de forma rápida y sencilla pudimos implementarla en nuestro proyecto.

Lo siguiente fue extraer los contenido estáticos a diferentes archivos jsp ('''cabecera.jsp''', '''menu.jsp''' y '''pie.jsp''') que luego pudimos incluir en la página de layout '''basic-theme.jsp''' de la siguiente forma.
<pre>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<%@ include file="/includes/meta.jsp" %>
</head>
<body>
<div class="contenedorPrincipal">
<%@ include file="/includes/cabecera.jsp" %>

<%@ include file="/includes/menu.jsp" %>
<decorator:body />
<%@ include file="/includes/pie.jsp" %>
</div>
</body>
</html>
</pre>

SiteMesh 2

2012-09-14T16:07:26Z

Maro: /* Nuestra experiencia */

== Qué es SiteMesh ==
Es un framework Java para aplicaciones web que aplica el patrón de diseño [http://es.wikipedia.org/wiki/Decorator_(patr%C3%B3n_de_dise%C3%B1o) Decorator] para permitir la separación de contenido en la capa de presentación.

Con este framework se puede definir la distribución de contenido (layout) de la vista y componerla en base a páginas simples, las cuales conformarán una página compleja (decorada) justo antes de enviarse al cliente.

== Para qué se usa ==

SiteMesh utiliza [http://www.oracle.com/technetwork/java/filters-137243.html Filters] disponibles a partir de la versión 2.3 de Java Servlet.

* SiteMesh intercepta las peticiones de todas las paginas HTML generadas, procesa el contenido y lo "decora" para obtener el resultado final.

* También puede generar una pagina compleja a partir de varias pequeñas.

[[File:diagrama_sitemesh.png]]

== Cómo se implementa ==

=== Instalar SiteMesh Manualmente ===

Seguir estos 3 pasos:

1. Agregar la biblioteca [http://wiki.sitemesh.org/display/sitemesh/Download SiteMesh jar] en WEB-INF/lib
2. Configurar el siguiente filtro en el archivo WEB-INF/web.xml, dentro del tag <web-app>
<pre>
<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</pre>

3. Crear el archivo decorators.xml en el directorio WEB-INF con el siguiente contenido
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators>
</decorators>
</pre>

Hasta acá la aplicación debe seguir funcionando normalmente, ya que no se esta implementando ningún decorators aún.

=== Configurando SiteMesh ===
Según el propio sitio de [http://wiki.sitemesh.org/display/sitemesh/Home SiteMesh] la mejor forma para entender esta biblioteca es usándola.

En los siguientes pasos explicaremos como implementar un ejemplo simple en un proyecto existente:

1. Crear la página '''menu.jsp''' dentro de una carpeta nueva llamada '''data''' en el directorio de contenido web (generalmente '''web''') con el siguiente contenido.
<pre>
<h1>Beverages</h1>
<p>Cappucino $3.25</p>
<p>Latte $3.35</p>
<p>Espresso $2.00</p>
<p>Mocha $3.50</p>
</pre>

2. Crear la página '''hours.jsp''' en la misma ubicación que la página anterior con este contenido.
<pre>
<h1>Weekdays</h1>
<p>5:00pm - 10:00pm</p>
<p>Weekends</p>
<p>5:00pm - 10:00pm</p>
</pre>

3. Crear la página de layout ('''basic-theme.jsp''')en la misma carpeta con el siguiente contenido.
<pre>
<?xml version="1.0" encoding="UTF-8" ?>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>Header</h1>
<p><b>Navigation</b></p>
<hr />
<decorator:body />
<hr />
<h1>Footer</b></h1>
</body>
</html>
</pre>

''El tag decorator:body será reemplazado por el contenido de la página a "decorar".''

4. Configurar el archivo '''decorator.xml''' de la siguiente forma
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">
<decorator name="basic-theme" page="basic-theme.jsp">
<pattern>/data/*</pattern>
</decorator>
</decorators>
</pre>

''Con esta configuración estamos indicando que se aplique el decorador '''basic-theme.jsp''' a todas los contenidos previamente creados en la carpeta "/data".''

5. Por último es necesario reiniciar el servidor, para que tome los cambios realizados en el proyecto, y luego al acceder a alguna de las páginas '''menu.jsp''' o '''hours.jsp''' se visualizarán sus contenidos decorados con el layout configurado ('''basic-theme.jsp''')

== Nuestra experiencia ==
Antes de implementar '''SiteMesh''' en nuestro proyecto constaba de 5 páginas HTML las cuales tenían duplicado su contenido estático en las secciones de '''Cabecera''', '''Menu''' y '''Pie de página'''.

Esto nos generaba un inconveniente al momento de mantener estas páginas y tener que modificar el contenido estático en todas.

Por esta razón buscamos una biblioteca que nos permita definir una página layout que decore las páginas de contenido dinámico de nuestro sitio.

Encontramos esta biblioteca y de forma rápida y sencilla pudimos implementarla en nuestro proyecto.

Lo siguiente fue extraer los contenido estáticos a diferentes archivos jsp ('''cabecera.jsp''', '''menu.jsp''' y '''pie.jsp''') que luego pudimos incluir en la página de layout '''basic-theme.jsp''' de la siguiente forma.
<pre>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<%@ include file="/includes/meta.jsp" %>
</head>
<body>
<div class="contenedorPrincipal">
<%@ include file="/includes/cabecera.jsp" %>

<%@ include file="/includes/menu.jsp" %>
<decorator:body />
<%@ include file="/includes/pie.jsp" %>
</div>
</body>
</html>
</pre>

SiteMesh 2

2012-09-14T16:06:40Z

Maro: /* Nuestra experiencia */

== Qué es SiteMesh ==
Es un framework Java para aplicaciones web que aplica el patrón de diseño [http://es.wikipedia.org/wiki/Decorator_(patr%C3%B3n_de_dise%C3%B1o) Decorator] para permitir la separación de contenido en la capa de presentación.

Con este framework se puede definir la distribución de contenido (layout) de la vista y componerla en base a páginas simples, las cuales conformarán una página compleja (decorada) justo antes de enviarse al cliente.

== Para qué se usa ==

SiteMesh utiliza [http://www.oracle.com/technetwork/java/filters-137243.html Filters] disponibles a partir de la versión 2.3 de Java Servlet.

* SiteMesh intercepta las peticiones de todas las paginas HTML generadas, procesa el contenido y lo "decora" para obtener el resultado final.

* También puede generar una pagina compleja a partir de varias pequeñas.

[[File:diagrama_sitemesh.png]]

== Cómo se implementa ==

=== Instalar SiteMesh Manualmente ===

Seguir estos 3 pasos:

1. Agregar la biblioteca [http://wiki.sitemesh.org/display/sitemesh/Download SiteMesh jar] en WEB-INF/lib
2. Configurar el siguiente filtro en el archivo WEB-INF/web.xml, dentro del tag <web-app>
<pre>
<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</pre>

3. Crear el archivo decorators.xml en el directorio WEB-INF con el siguiente contenido
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators>
</decorators>
</pre>

Hasta acá la aplicación debe seguir funcionando normalmente, ya que no se esta implementando ningún decorators aún.

=== Configurando SiteMesh ===
Según el propio sitio de [http://wiki.sitemesh.org/display/sitemesh/Home SiteMesh] la mejor forma para entender esta biblioteca es usándola.

En los siguientes pasos explicaremos como implementar un ejemplo simple en un proyecto existente:

1. Crear la página '''menu.jsp''' dentro de una carpeta nueva llamada '''data''' en el directorio de contenido web (generalmente '''web''') con el siguiente contenido.
<pre>
<h1>Beverages</h1>
<p>Cappucino $3.25</p>
<p>Latte $3.35</p>
<p>Espresso $2.00</p>
<p>Mocha $3.50</p>
</pre>

2. Crear la página '''hours.jsp''' en la misma ubicación que la página anterior con este contenido.
<pre>
<h1>Weekdays</h1>
<p>5:00pm - 10:00pm</p>
<p>Weekends</p>
<p>5:00pm - 10:00pm</p>
</pre>

3. Crear la página de layout ('''basic-theme.jsp''')en la misma carpeta con el siguiente contenido.
<pre>
<?xml version="1.0" encoding="UTF-8" ?>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>Header</h1>
<p><b>Navigation</b></p>
<hr />
<decorator:body />
<hr />
<h1>Footer</b></h1>
</body>
</html>
</pre>

''El tag decorator:body será reemplazado por el contenido de la página a "decorar".''

4. Configurar el archivo '''decorator.xml''' de la siguiente forma
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">
<decorator name="basic-theme" page="basic-theme.jsp">
<pattern>/data/*</pattern>
</decorator>
</decorators>
</pre>

''Con esta configuración estamos indicando que se aplique el decorador '''basic-theme.jsp''' a todas los contenidos previamente creados en la carpeta "/data".''

5. Por último es necesario reiniciar el servidor, para que tome los cambios realizados en el proyecto, y luego al acceder a alguna de las páginas '''menu.jsp''' o '''hours.jsp''' se visualizarán sus contenidos decorados con el layout configurado ('''basic-theme.jsp''')

== Nuestra experiencia ==
Antes de implementar '''SiteMesh''' nuestro proyecto constaba de 5 páginas HTML las cuales tenían duplicado su contenido estático en las secciones de '''Cabecera''', '''Menu''' y '''Pie de página'''.

Esto nos generaba un inconveniente al momento de mantener estas páginas y tener que modificar el contenido estático en todas.

Por esta razón buscamos una biblioteca que nos permita definir una página layout que decore las páginas de contenido dinámico de nuestro sitio.

Encontramos esta biblioteca y de forma rápida y sencilla pudimos implementarla en nuestro proyecto.

Lo siguiente fue extraer los contenido estáticos a diferentes archivos jsp ('''cabecera.jsp''', '''menu.jsp''' y '''pie.jsp''') que luego pudimos incluir en la página de layout '''basic-theme.jsp''' de la siguiente forma.
<pre>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<%@ include file="/includes/meta.jsp" %>
</head>
<body>
<div class="contenedorPrincipal">
<%@ include file="/includes/cabecera.jsp" %>

<%@ include file="/includes/menu.jsp" %>
<decorator:body />
<%@ include file="/includes/pie.jsp" %>
</div>
</body>
</html>
</pre>

SiteMesh 2

2012-09-14T16:02:36Z

Maro: /* Nuestra experiencia */

== Qué es SiteMesh ==
Es un framework Java para aplicaciones web que aplica el patrón de diseño [http://es.wikipedia.org/wiki/Decorator_(patr%C3%B3n_de_dise%C3%B1o) Decorator] para permitir la separación de contenido en la capa de presentación.

Con este framework se puede definir la distribución de contenido (layout) de la vista y componerla en base a páginas simples, las cuales conformarán una página compleja (decorada) justo antes de enviarse al cliente.

== Para qué se usa ==

SiteMesh utiliza [http://www.oracle.com/technetwork/java/filters-137243.html Filters] disponibles a partir de la versión 2.3 de Java Servlet.

* SiteMesh intercepta las peticiones de todas las paginas HTML generadas, procesa el contenido y lo "decora" para obtener el resultado final.

* También puede generar una pagina compleja a partir de varias pequeñas.

[[File:diagrama_sitemesh.png]]

== Cómo se implementa ==

=== Instalar SiteMesh Manualmente ===

Seguir estos 3 pasos:

1. Agregar la biblioteca [http://wiki.sitemesh.org/display/sitemesh/Download SiteMesh jar] en WEB-INF/lib
2. Configurar el siguiente filtro en el archivo WEB-INF/web.xml, dentro del tag <web-app>
<pre>
<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</pre>

3. Crear el archivo decorators.xml en el directorio WEB-INF con el siguiente contenido
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators>
</decorators>
</pre>

Hasta acá la aplicación debe seguir funcionando normalmente, ya que no se esta implementando ningún decorators aún.

=== Configurando SiteMesh ===
Según el propio sitio de [http://wiki.sitemesh.org/display/sitemesh/Home SiteMesh] la mejor forma para entender esta biblioteca es usándola.

En los siguientes pasos explicaremos como implementar un ejemplo simple en un proyecto existente:

1. Crear la página '''menu.jsp''' dentro de una carpeta nueva llamada '''data''' en el directorio de contenido web (generalmente '''web''') con el siguiente contenido.
<pre>
<h1>Beverages</h1>
<p>Cappucino $3.25</p>
<p>Latte $3.35</p>
<p>Espresso $2.00</p>
<p>Mocha $3.50</p>
</pre>

2. Crear la página '''hours.jsp''' en la misma ubicación que la página anterior con este contenido.
<pre>
<h1>Weekdays</h1>
<p>5:00pm - 10:00pm</p>
<p>Weekends</p>
<p>5:00pm - 10:00pm</p>
</pre>

3. Crear la página de layout ('''basic-theme.jsp''')en la misma carpeta con el siguiente contenido.
<pre>
<?xml version="1.0" encoding="UTF-8" ?>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>Header</h1>
<p><b>Navigation</b></p>
<hr />
<decorator:body />
<hr />
<h1>Footer</b></h1>
</body>
</html>
</pre>

''El tag decorator:body será reemplazado por el contenido de la página a "decorar".''

4. Configurar el archivo '''decorator.xml''' de la siguiente forma
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">
<decorator name="basic-theme" page="basic-theme.jsp">
<pattern>/data/*</pattern>
</decorator>
</decorators>
</pre>

''Con esta configuración estamos indicando que se aplique el decorador '''basic-theme.jsp''' a todas los contenidos previamente creados en la carpeta "/data".''

5. Por último es necesario reiniciar el servidor, para que tome los cambios realizados en el proyecto, y luego al acceder a alguna de las páginas '''menu.jsp''' o '''hours.jsp''' se visualizarán sus contenidos decorados con el layout configurado ('''basic-theme.jsp''')

== Nuestra experiencia ==
Antes de implementar '''SiteMesh''' en nuestro proyecto buscabamos una biblioteca que nos permita definir una página layout que decore las páginas de contenido dinámico de nuestro sitio.

Nuestro proyecto constaba de 5 páginas HTML las cuales tenían duplicado su contenido estático en las secciones de '''Cabecera''', '''Menu''' y '''Pie de página'''.

Luego de implementar '''SiteMesh''' pudimos extraer estos contenidos estáticos a diferentes archivos jsp ('''cabecera.jsp''', '''menu.jsp''' y '''pie.jsp''') que luego pudimos incluir en la página de layout '''basic-theme.jsp''' de la siguiente forma.
<pre>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<%@ include file="/includes/meta.jsp" %>
</head>
<body>
<div class="contenedorPrincipal">
<%@ include file="/includes/cabecera.jsp" %>

<%@ include file="/includes/menu.jsp" %>
<decorator:body />
<%@ include file="/includes/pie.jsp" %>
</div>
</body>
</html>
</pre>

SiteMesh 2

2012-09-14T16:02:21Z

Maro: /* Nuestra experiencia */

== Qué es SiteMesh ==
Es un framework Java para aplicaciones web que aplica el patrón de diseño [http://es.wikipedia.org/wiki/Decorator_(patr%C3%B3n_de_dise%C3%B1o) Decorator] para permitir la separación de contenido en la capa de presentación.

Con este framework se puede definir la distribución de contenido (layout) de la vista y componerla en base a páginas simples, las cuales conformarán una página compleja (decorada) justo antes de enviarse al cliente.

== Para qué se usa ==

SiteMesh utiliza [http://www.oracle.com/technetwork/java/filters-137243.html Filters] disponibles a partir de la versión 2.3 de Java Servlet.

* SiteMesh intercepta las peticiones de todas las paginas HTML generadas, procesa el contenido y lo "decora" para obtener el resultado final.

* También puede generar una pagina compleja a partir de varias pequeñas.

[[File:diagrama_sitemesh.png]]

== Cómo se implementa ==

=== Instalar SiteMesh Manualmente ===

Seguir estos 3 pasos:

1. Agregar la biblioteca [http://wiki.sitemesh.org/display/sitemesh/Download SiteMesh jar] en WEB-INF/lib
2. Configurar el siguiente filtro en el archivo WEB-INF/web.xml, dentro del tag <web-app>
<pre>
<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</pre>

3. Crear el archivo decorators.xml en el directorio WEB-INF con el siguiente contenido
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators>
</decorators>
</pre>

Hasta acá la aplicación debe seguir funcionando normalmente, ya que no se esta implementando ningún decorators aún.

=== Configurando SiteMesh ===
Según el propio sitio de [http://wiki.sitemesh.org/display/sitemesh/Home SiteMesh] la mejor forma para entender esta biblioteca es usándola.

En los siguientes pasos explicaremos como implementar un ejemplo simple en un proyecto existente:

1. Crear la página '''menu.jsp''' dentro de una carpeta nueva llamada '''data''' en el directorio de contenido web (generalmente '''web''') con el siguiente contenido.
<pre>
<h1>Beverages</h1>
<p>Cappucino $3.25</p>
<p>Latte $3.35</p>
<p>Espresso $2.00</p>
<p>Mocha $3.50</p>
</pre>

2. Crear la página '''hours.jsp''' en la misma ubicación que la página anterior con este contenido.
<pre>
<h1>Weekdays</h1>
<p>5:00pm - 10:00pm</p>
<p>Weekends</p>
<p>5:00pm - 10:00pm</p>
</pre>

3. Crear la página de layout ('''basic-theme.jsp''')en la misma carpeta con el siguiente contenido.
<pre>
<?xml version="1.0" encoding="UTF-8" ?>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>Header</h1>
<p><b>Navigation</b></p>
<hr />
<decorator:body />
<hr />
<h1>Footer</b></h1>
</body>
</html>
</pre>

''El tag decorator:body será reemplazado por el contenido de la página a "decorar".''

4. Configurar el archivo '''decorator.xml''' de la siguiente forma
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">
<decorator name="basic-theme" page="basic-theme.jsp">
<pattern>/data/*</pattern>
</decorator>
</decorators>
</pre>

''Con esta configuración estamos indicando que se aplique el decorador '''basic-theme.jsp''' a todas los contenidos previamente creados en la carpeta "/data".''

5. Por último es necesario reiniciar el servidor, para que tome los cambios realizados en el proyecto, y luego al acceder a alguna de las páginas '''menu.jsp''' o '''hours.jsp''' se visualizarán sus contenidos decorados con el layout configurado ('''basic-theme.jsp''')

== Nuestra experiencia ==
Antes de implementar '''SiteMesh''' nuestro proyecto buscabamos una biblioteca que nos permita definir una página layout que decore las páginas de contenido dinámico de nuestro sitio.

Nuestro proyecto constaba de 5 páginas HTML las cuales tenían duplicado su contenido estático en las secciones de '''Cabecera''', '''Menu''' y '''Pie de página'''.

Luego de implementar '''SiteMesh''' pudimos extraer estos contenidos estáticos a diferentes archivos jsp ('''cabecera.jsp''', '''menu.jsp''' y '''pie.jsp''') que luego pudimos incluir en la página de layout '''basic-theme.jsp''' de la siguiente forma.
<pre>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<%@ include file="/includes/meta.jsp" %>
</head>
<body>
<div class="contenedorPrincipal">
<%@ include file="/includes/cabecera.jsp" %>

<%@ include file="/includes/menu.jsp" %>
<decorator:body />
<%@ include file="/includes/pie.jsp" %>
</div>
</body>
</html>
</pre>

SiteMesh 2

2012-09-14T16:00:29Z

Maro: /* Nuestra experiencia */

== Qué es SiteMesh ==
Es un framework Java para aplicaciones web que aplica el patrón de diseño [http://es.wikipedia.org/wiki/Decorator_(patr%C3%B3n_de_dise%C3%B1o) Decorator] para permitir la separación de contenido en la capa de presentación.

Con este framework se puede definir la distribución de contenido (layout) de la vista y componerla en base a páginas simples, las cuales conformarán una página compleja (decorada) justo antes de enviarse al cliente.

== Para qué se usa ==

SiteMesh utiliza [http://www.oracle.com/technetwork/java/filters-137243.html Filters] disponibles a partir de la versión 2.3 de Java Servlet.

* SiteMesh intercepta las peticiones de todas las paginas HTML generadas, procesa el contenido y lo "decora" para obtener el resultado final.

* También puede generar una pagina compleja a partir de varias pequeñas.

[[File:diagrama_sitemesh.png]]

== Cómo se implementa ==

=== Instalar SiteMesh Manualmente ===

Seguir estos 3 pasos:

1. Agregar la biblioteca [http://wiki.sitemesh.org/display/sitemesh/Download SiteMesh jar] en WEB-INF/lib
2. Configurar el siguiente filtro en el archivo WEB-INF/web.xml, dentro del tag <web-app>
<pre>
<filter>
<filter-name>sitemesh</filter-name>
<filter-class>com.opensymphony.sitemesh.webapp.SiteMeshFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>sitemesh</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</pre>

3. Crear el archivo decorators.xml en el directorio WEB-INF con el siguiente contenido
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators>
</decorators>
</pre>

Hasta acá la aplicación debe seguir funcionando normalmente, ya que no se esta implementando ningún decorators aún.

=== Configurando SiteMesh ===
Según el propio sitio de [http://wiki.sitemesh.org/display/sitemesh/Home SiteMesh] la mejor forma para entender esta biblioteca es usándola.

En los siguientes pasos explicaremos como implementar un ejemplo simple en un proyecto existente:

1. Crear la página '''menu.jsp''' dentro de una carpeta nueva llamada '''data''' en el directorio de contenido web (generalmente '''web''') con el siguiente contenido.
<pre>
<h1>Beverages</h1>
<p>Cappucino $3.25</p>
<p>Latte $3.35</p>
<p>Espresso $2.00</p>
<p>Mocha $3.50</p>
</pre>

2. Crear la página '''hours.jsp''' en la misma ubicación que la página anterior con este contenido.
<pre>
<h1>Weekdays</h1>
<p>5:00pm - 10:00pm</p>
<p>Weekends</p>
<p>5:00pm - 10:00pm</p>
</pre>

3. Crear la página de layout ('''basic-theme.jsp''')en la misma carpeta con el siguiente contenido.
<pre>
<?xml version="1.0" encoding="UTF-8" ?>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1>Header</h1>
<p><b>Navigation</b></p>
<hr />
<decorator:body />
<hr />
<h1>Footer</b></h1>
</body>
</html>
</pre>

''El tag decorator:body será reemplazado por el contenido de la página a "decorar".''

4. Configurar el archivo '''decorator.xml''' de la siguiente forma
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">
<decorator name="basic-theme" page="basic-theme.jsp">
<pattern>/data/*</pattern>
</decorator>
</decorators>
</pre>

''Con esta configuración estamos indicando que se aplique el decorador '''basic-theme.jsp''' a todas los contenidos previamente creados en la carpeta "/data".''

5. Por último es necesario reiniciar el servidor, para que tome los cambios realizados en el proyecto, y luego al acceder a alguna de las páginas '''menu.jsp''' o '''hours.jsp''' se visualizarán sus contenidos decorados con el layout configurado ('''basic-theme.jsp''')

== Nuestra experiencia ==
Antes de implementar SiteMesh nuestro proyecto buscabamos una biblioteca que nos permita definir una página layout que decore las páginas de contenido dinámico de nuestro sitio.

Nuestro proyecto constaba de 5 páginas HTML las cuales tenían duplicado su contenido estático en las secciones de '''Cabecera''', '''Menu''' y '''Pie de página'''.

Luego de implementar '''SiteMesh''' pudimos extraer estos contenidos estáticos a diferentes archivos jsp ('''cabecera.jsp''', '''menu.jsp''' y '''pie.jsp''') que luego pudimos incluir en la página de layout '''basic-theme.jsp''' de la siguiente forma.
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<%@ include file="/includes/meta.jsp" %>
</head>
<body>
<div class="contenedorPrincipal">
<%@ include file="/includes/cabecera.jsp" %>

<%@ include file="/includes/menu.jsp" %>
<decorator:body />
<%@ include file="/includes/pie.jsp" %>
</div>
</body>
</html>
</pre>

SiteMesh 2

2012-09-14T15:46:49Z

Maro: /* Configurando SiteMesh */

SiteMesh 2

2012-09-14T15:44:45Z

Maro: /* Configurando SiteMesh */

SiteMesh 2

2012-09-14T15:44:18Z

Maro: /* Instalar SiteMesh Manualmente */

SiteMesh 2

2012-09-14T15:43:11Z

Maro: /* Configurando SiteMesh */

SiteMesh 2

2012-09-14T15:16:09Z

Maro: /* Cómo se implementa */

SiteMesh 2

2012-09-14T15:15:36Z

Maro: /* Instalar SiteMesh Manualmente */

SiteMesh 2

2012-09-14T15:06:38Z

Maro: /* Cómo se implementa */

SiteMesh 2

2012-09-14T14:57:33Z

Maro: /* Para qué se usa */

SiteMesh 2

2012-09-14T14:49:38Z

Maro: Página creada con '== Qué es SiteMesh == Es un framework Java para aplicaciones web que aplica el patrón de diseño [http://es.wikipedia.org/wiki/Decorator_(patr%C3%B3n_de_dise%C3%B1o) Decorator…'

Java

2012-09-14T14:48:00Z

Maro: /* Frameworks de presentación */

[[Category:Java]]
Java es un lenguaje de programación, aunque también se suele hacer referencia con este nombre a toda una plataforma para el desarrollo de aplicaciones. Hay un buen [http://es.wikipedia.org/wiki/Java_%28Sun%29 resumen de Java en la wikipedia].

Al desarrollar un sistema se suele basar en una [[Arquitectura De Software]] para crear los componentes.

Java se caracteriza por una enorme cantidad de proyectos libres.

== Algunas tecnologías Java ==
=== Frameworks de base===
* [[Spring Framework]]
* [[Terracotta]]
* [[EJB]]
* [[Restlet]]

===Acceso a datos===
* [[Hibernate]]
* [[Apache Lucene]]

===Frameworks de presentación===
* [[Apache Tiles]]
* [[Struts]]
* [[JSF]]
* [[JSTL]]
* [[GWT]]
* [[SiteMesh 2]]

===Librerías===
* [[Google Guava]]
* [[Jawr]]

===Mensajeria===
* [[JMS]]

===Web Services===
* [[Web Service]]
* [[Web Service Con Spring]]

===Ejecuciones batch y programadas===
* [[Quartz]]
* [[Spring Batch]]

===Seguridad===
* [[Spring Security]]

===Cuestiones generales de Java===
* [[Fechas En Java]]
* [[Numeros En Java]]
* [[Encoding En Java]]
* [[Serializacion De Objetos En Java]]
* [[Log4J]]
* [[SLF4J]]
* [[Cache De Objetos Java]]
* [[Exportacion Hacia Archivos]]

Equipo Pnt

2012-04-23T21:12:47Z

Maro: /* Integrantes */

PNT (Proyectos de Nuevas Tecnologías) es un equipo de desarrollo de una consultora de sistemas, trabajando en proyectos de una empresa multinacional de telefonía.

PNT fue formado inicialmente en diciembre de 2004 para resolver el diseño y desarrollo de proyectos basados en tecnologías Java.

La experiencia de PNT fue documentada a lo largo de los años por varios de sus integrantes en una intranet propia del grupo, a través de notas en un [[Joomla]]. Luego experimentaron el uso de [[Team Elements]] y actualmente su gestiòn de conocimientos está desarrollada en una wiki de la consultora.

== Integrantes ==
Los integrantes actuales de PNT son:
* Adrian Prados
* Carlos Benitez
* Carolina Barbiero
* Claudia Blatter
* Diego Gomez
* Diego Romero
* Emiliano Estevez
* Favio Tolosa
* Fernando Guerra
* Fernando Martinez
* Franco Morinigo
* Gerardo Matsui
* Ignacio Capodanno
* Jonathan Lijs
* Juan Manual Aguero
* Laureano Clausi
* Leandro Gutierrez
* Leonardo De Seta
* Lucas Martinez
* Mariano Rafael Sola
* Matias Novillo Caceres
* Matias Zamorano
* Maximiliano Ganuza
* Pablo Novas
* Pablo Rivero
* Sebastian Murua

== Ex-integrantes ==
Las siguientes personas fueron miembros de PNT y aportaron a Dos Ideas a través de artículos y notas varias:
* Agustin Fernandez
* Agustin Gallego
* Alejandra Holman
* Alejandro Amaya
* Andrea Girimonte
* Andres Candal
* Cristian DeBenedetti
* Demian Berjman
* Fabian Soliz
* Federico Cherchyk
* Federico Ferrer
* Fernando Piccirillo
* Fernando Requena
* Gabriel Teolis
* German DelTuffo
* Juan José Barrera
* Marcela Diaz
* Marcelo Zabalet
* Mariano Cifre
* Mariela Eujanian
* Nicolas Ferrucci
* Ramiro Gomez Mazza
* Sergio Sanchez
* Valeria Molinari
* Victor Cabas

== Otros participantes ==
Las siguientes personas interactuaron directamente con PNT y también realizaron aportes:
* Alejandro Vega
* Carlos Alvarez