blog entrepixels - diseño, desarrollo web y fotografía

oct 18

Insertar contenido web por id o por título en tema de apariencia (theme) Liferay 7 o DXP

Escrito por entrepixels | Diseño Web, Liferay | No hay comentarios

Hoy os contamos cómo insertar un contenido web en un tema de apariencia (theme) de Liferay 7 o DXP, referenciándolo por el id del contenido o por su título, concretamente por su “url title”. Lo haremos en lenguaje freemarker, ya que el propio Liferay ya nos desaconseja utilizar velocity por ser un lenguaje obsoleto (deprecated).

Hay que matizar que en estos ejemplos el contenido web se insertará sin portlet de webcontent que lo contenga, por lo que se mostrará únicamente el HTML relacionado con el propio contenido.

En primer lugar tendremos que recoger el servicio Journal Article para poder encontrar los artículos que deseemos mostrar.

<#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")/>

Una vez recogido el servicio en la variable “journalArticleLocalService” tenemos dos opciones, buscar un contenido del que conocemos su id, o bien un artículo del que conocemos su url title, que se trata simplemente de transformar su título pasando todas sus letras a minúsculas (sin acentos) y los espacios se transforman en guiones altos “-” (ej: “Título de mi contenido” tendría como url title titulo-de-mi-contenido)

Vemos primero la opción de recoger el contenido por id

<#-- Mediante un attemp controlamos la posible excepción que se daría si no existe el id. Si no existe, hacemos que la variable valga vacío para luego controlarlo --> <#-- group_id es una variable que ya está declarada por defecto en el tema (init.ftl) y referencia al site actual. Si el artículo se encontrase en otro site deberíamos poner el correspondiente --> <#attempt> <#assign myArticle = journalArticleLocalService.fetchArticle(group_id, "34004")/> <#recover> <#assign myArticle = ""/> < /#attempt>

<#-- Controlamos que hemos recogido algún contenido para mostrarlo. La variable locale hará que si el contenido está internacionalizado se muestre en el idioma actual --> <#if myArticle !=""> ${journalArticleLocalService.getArticleContent(myArticle, myArticle.getDDMTemplateKey(), "VIEW", locale, themeDisplay)} < /#if>

Ahora vamos con la opción de recoger el contenido por título

<#-- Mediante un attemp controlamos la posible excepción que se daría si no existe el id. Si no existe, hacemos que la variable valga vacío para luego controlarlo --> <#-- group_id es una variable que ya está declarada por defecto en el tema (init.ftl) y referencia al site actual. Si el artículo se encontrase en otro site deberíamos poner el correspondiente --> <#attempt> <#assign myArticle = journalArticleLocalService.getArticleByUrlTitle(group_id, "titulo-de-mi-contenido")/> <#recover> <#assign myArticle = ""/> < /#attempt> <#if myArticle !=""> ${journalArticleLocalService.getArticleContent(myArticle, myArticle.getDDMTemplateKey(), "VIEW", locale, themeDisplay)} < /#if>

Con estas pocas líneas de código podremos insertar todos los contenidos web que sean necesarios en nuestro tema de apariencia (theme) de Liferay 7 o DXP

may 13

Integración de BootStrap 3 con Liferay 6.2

Escrito por entrepixels | Entrepixels, Liferay | 9 Comentarios

16/05/2016: Editamos la entrada con una mejora sobre la forma de importar la CSS de BootStrap

18/05/2016: Editamos nuevamente aportando algunas mejoras de importación y mantenibilidad de BootStrap (gracias a Marcos Castro de Liferay por el aporte)

En este post intentaremos arrojar algo de luz, después de nuestra experiencia en varios proyectos, sobre la integración de bootstrap 3 en Liferay 6.2

Buscando por la red podemos encontrar bastante información al respecto y los problemas que plantea esta integración. Tras analizar y dar vueltas a todas las posibles soluciones y con la experiencia adquirida en varios proyectos os planteamos la que para nosotros es la mejor opción.

La problemática

Liferay 6.2 viene con las CSS de BootStrap 2.3.2 de manera nativa, no así con su JavaScript asociado, por lo que la verdadera problemática se basa únicamente en la CSS. Si alguno ha intentado insertar en un tema de apariencia de Liferay 6.2 la CSS de BootStrap 3 se encontraría con que todo deja de funcionar allá donde está aplicado el tema (dockbar, configuraciones de portlets, etc…).

Vamos con un caso práctico. En este caso hemos usado la CSS de BootStrap 3.3.5, pero es aplicable a cualquier versión de BootStrap 3. Insertamos en nuestro tema de apariencia la CSS de BootStrap 3.

CSS bootstrap 3 en Liferay 6.2

Main css Liferay 6.2

Seleccionamos nuestro tema de apariencia con la CSS de BootStrap 3 insertada y nos encontramos ya con problemas. El dockbar de Liferay 6.2 aparece vacío y los controles de los portlets han desaparecido.

Tema Liferay 6.2 BootStrap 3 seleccionado

Problemas BootStrap 3 con Liferay 6.2

Como podemos comprobar la problemática es suficientemente grande como para echarnos para atrás y desechar la idea de BootStrap 3. En realidad, si no es absolutamente necesario quizá la mejor opción sea aprovechar BootStrap 2.3.2 que viene integrado, pero si el beneficio de usar BootStrap 3 os va compensar vamos a proponeros una solución.

Solución para integrar BootStrap 3 en Liferay 6.2

Se nos planteó un proyecto en el que se nos exigía usar BootStrap 3 con Liferay 6.2, entonces había que darle una vuelta al asunto. Si la problemática es únicamente vía CSS centrémonos en ella. Veremos que la solución no es para nada compleja. Os planteamos dos opciones en función de si os manejáis bien con NodeJS y/o Bower o no.

Opción 1 si no nos manejamos con NodeJs y/o Bower y menos elegante

Partimos de la CSS de BootStrap 3.3.5 que nos podemos descargar en http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/. Vamos a partir de la CSS de BootStrap 3 sin comprimir, para poder ver un par de problemáticas (después podéis importar la versión minificada). Aprovechamos que Liferay 6.2 soporta SASS porque si no la labor sería insufrible. Lo que vamos a hacer es “envolver” toda la CSS de BootStrap con una clase padre, que luego aplicaremos a una capa que englobe el contenido en Liferay. Si con palabras no se entiende del todo bien lo vemos con un ejemplo.

En primer lugar englobamos todo el contenido de nuestra template “portal_normal.vm” (o ftl) en una capa con la clase “bs3″ (podéis poner la clase que queráis).

Portal normal Liferay 6.2 con BootStrap 3

Después hemos de envolver todas las clases de la CSS de BootStrap 3 con la clase padre .bs3, que a su vez hemos de englobar con la clase .aui para sobreescriba la mayor parte de estilos que puedan chocar con la versión 2.3.2 de BootStrap. Para ello nos aprovechamos de que Liferay soporta SASS, modificamos la extensión de la CSS de BootStrap con la extensión .scss y posteriormente procederemos a importarla desde la CSS de aui.css. Por tanto, en este punto, donde antes habíamos importado la CSS desde el main.css de Liferay deberíamos quitarlo, pues BootStrap 3 lo importaremos desde el fichero aui.css.

AUI CSS con bootstrap 3

aui.css
AUI CSS con bootstrap 3

Como podéis ver en la captura del “portal_normal.vm”, la capa bs3 está dentro del body, por lo que todos los estilos que afecten al elemento html y body quedarían fuera. Con esto hacemos que BootStrap 3 afecte sólo al contenido de Liferay y no de problemas con el “core”.

De la CSS de BootStrap tendremos que copiar algunos estilos que por la importación mediante SASS unos, y porque no les afecta la clase bs3 otros, no se aplican correctamente. Nosotros los movemos al custom.css.

Las clases iniciales que afectan al html y al body.
El font-face de los glyphicons.
Los keyframes.

Liferay 6.2 con BootStrap 3

custom.css
Liferay 6.2 con BootStrap 3

Opción 2 usando Bower.

El concepto es exactamente el mismo que en la opción 1, pero aprovecharemos el gestor de paquetes bower para facilitar la mantenibilidad ante posibles actualizaciones de BootStrap.

La modificación en el fichero portal_normal.vm (o ftl) es exactamente la misma, es decir, añadimos una capa con la clase .bs3 que englobe a todo el contenido

Portal normal Liferay 6.2 con BootStrap 3

Desde línea de comandos nos situamos sobre nuestro directorio css del tema e instalamos el paquete de bootstrap-sass en su versión 3.3.5. Para ello introducimos lo siguiente: bower install bootstrap-sass#3.3.5

Install bootstrap sass width bower

bootstrap sass instalado

Ahora en nuestra aui.css la importación de BootStrap 3.3.5 quedaría de la siguiente manera.

Importar bootstrap sass en liferay

De este modo si sabemos de alguna actualización de BootStrap que queramos utilizar, gracias a bower podemos realizarla con el siguiente código sobre nuestra carpeta css: bower update bootstrap-sass

Para este caso la problemática del font-face y los keyframes persiste, por lo que nos tendremos que llevar a nuestra custom.css esos estilos para que funcionen correctamente

Custom css Liferay 6.2

Vemos una vez finalizada la “conversión” de la CSS el resultado.

Liferay 6.2 con BootStrap 3

Ya tenemos todo funcionando y sin problemas. Es muy probable que en alguna cosa tengamos algún conflicto entre las propiedades CSS de BootStrap 2.3.2 de Liferay 6.2 y las de nuestro BootStrap 3, pero es cuestión de casos puntuales que tendremos que pulir. Para finalizar añadimos el JavaScript de BootStrap 3 (y jquery si no lo hemos hecho), las “fonts” para los glyphicons, compilamos y probamos a hacer algunas pruebas para ver si funcionan los componentes de BootStrap 3.

Ejemplo Liferay 6.2 con BootStrap 3

Para finalizar, comentar que las layouts de Liferay 6.2 siguen el marcado de BootStrap 2.3.2. Esto no supone ningún problema, pues seguirán funcionando correctamente. Si queremos hacer uso de BootStrap 3 también para las layouts tendremos que replicar las que hay modificando el marcado adaptándolo a la grid de BootStrap 3. Si además queremos meter algún tema de BootStrap 3 en nuestro tema de Liferay 6.2 tendremos que hacer el mismo proceso de englobar las clases en .aui .bs3 {} para la CSS correspondiente.

Espero que este post os haya sido de utilidad

nov 11

Desarrollo de temas de apariencia -themes- en Liferay 7

Escrito por entrepixels | Entrepixels, Liferay | No hay comentarios

Liferay nos ha anunciado el lanzamiento de su nueva versión Liferay 7 para el primer trimestre de 2016. Para estar al día de su evolución y sus novedades disponemos ya de su versión Alpha 2 que podemos descargarnos de SourceForge: página de descarga de Liferay 7 Alpha 2

Nos descargamos el bundle con tomcat y lo arrancamos de manera habitual (tomcat-dir/bin/startup.bat o .sh).

Desde Entrepixels, como especialistas en desarrollo de temas de apariencia -themes- Liferay, nos gusta estar al día y os contaremos en detalle aquellas novedades que nos encontraremos a la hora de crear temas de apariencia en esta nueva versión.

Una de las grandes problemáticas que nos encontramos a la hora de trabajar con los temas de apariencia de Liferay es su lentitud de compilación. Tanto si utilizamos ant, como maven, y dependiendo de la máquina y del número de líneas css, podíamos tardar minutos en una sola compilación. Liferay se ha dado cuenta de esto y quiere poner remedio para la versión 7.

Si alguno de vosotros tiene experiencia en el desarrollo de temas quizá se haya dado cuenta de que hemos hablado de descargar el bundle con tomcat, pero no la sdk de plugins. Aquí reside el gran cambio; pese a que vamos a poder seguir desarrollando temas como veníamos haciendo hasta ahora con el plugins sdk (ver tutorial para desarrollo de temas de apariencia en Liferay6.2), podremos pasar a trabajar con herramientas mucho más ágiles.

¡Comenzamos!

Dependencias

Nosotros trabajamos sobre Windows por lo que las explicaciones las realizaremos para el trabajo bajo esta plataforma, aunque creemos que es fácilmente extrapolable a aquellos que trabajen bajo Linux o Mac.

Necesitaremos tener instalado lo siguiente:

Nodejs
Python 2.7.10 (Sólo en Windows)
Visual Studio (Sólo en Windows). A la hora de instalarlo sólamente necesitaremos marcar la siguiente casilla, el resto podemos desmarcarlas todas: Custom > Programming… > Visual C++ (el proceso de instalación es largo)

Una vez instaladas todas las dependencias procederemos con el siguiente paso:

Yeoman, Gulp y Bower

Yeoman, Gulp y Bower son las tres herramientas en las que nos basaremos para crear y compilar nuestros nuevos temas de apariencia. Hay que tener en cuenta que nos encontramos ante una versión Alpha de Liferay, por lo que nos podremos encontrar problemas que se irán arreglando con el tiempo, pero es importante ir acostumbrándose a las nuevas metodologías de trabajo que nos facilitarán la vida.

Resumimos:

Yeoman. Ellos se definen como un “andamio web para aplicaciones modernas”. Podemos decir que es un asistente que nos ayuda a crear nuestros proyectos web.
Gulp será nuestra herramienta de nodejs para compilar nuestros temas de apariencia.
Bower será nuestra herramienta para gestionar dependencias

¡Manos a la obra! En primer lugar vamos a proceder a instalar Yeoman, Gulp y Bower. Nos situamos sobre la consola de Windows y tecleamos el siguiente comando:

npm install -g yo gulp bower

Instalando Yo, Gulp y Bower

Ahora toca instalar el generador de temas de liferay. Para ello, en la misma línea de comandos escribiremos lo siguiente:

npm install -g generator-liferay-theme

Instalando generador de temas de Liferay

Ya disponemos de todas nuestras herramientas listas para empezar.

Creando temas de apariencia

Para la creación del tema de apariencia utilizaremos Yeoman. En la línea de comandos, sobre el directorio que queramos crear el tema, tecleamos:

yo liferay-theme

Creando tema de apariencia con Yeoman

Comienza aquí nuestro asistente para crear el tema. En primer lugar indicaremos el nombre que le queremos dar, por ejemplo, “tema-prueba”.

Creando tema de prueba Liferay con Yeoman

Después nos pregunta si queremos usar ese nombre como id para el tema. Esto lo dejamos a vuestro gusto. (Tened en cuenta que a medida que evolucionen la herramienta es posible que alguno de los pasos cambie).

En el siguiente paso seleccionaremos si queremos que el tema sea para la versión 7 o las 6.2 de Liferay (aún no hemos probado qué tal funciona con la versión 6.2). Seleccionaremos la 7.

Seleccionamos Liferay 7 en yeoman

Tras esto nos preguntará si queremos usar velocity o freemarker para nuestro tema. Elegís con la que soláis trabajar. En nuestro caso velocity.

Freemarker o velocity para nuestro tema

Ahora nos preguntará si queremos usar Sass o no en nuestro tema (Nota: en estas versiones iniciales ha habido complicaciones si elegimos sí en este paso, si te ocurre entiendo que se solucionarán en breve).

Yeoman pregunta si queremos sass en nuestro tema

Ya tendremos nuestro tema creado y por último nos pregunta la ruta de nuestro tomcat de liferay.

Seleccionamos nuestro directorio de tomcat

Ya tenemos nuestro tema creado y listo para trabajar.

Tema creado

Podéis trastear un poco con el tema para analizar algunas novedades respecto al método de trabajo con ant o maven. Por ejemplo ahora en el fichero package.json es donde queda definido el tema padre, si hemos decidido usar velocity o freemarker o el nombre del tema. En liferay-theme.json se definirán los paths del tema y el tomcat, por ejemplo. El resto funcionará como en versiones anteriores. Dentro de la carpeta src iremos colocando nuestras carpetas css, js, templates, images… con sus ficheros correspondientes (visitad nuestro tutorial para liferay 6.2 si queréis más detalles).

Ahora sólo nos quedará compilar nuestro tema de apariencia. Para ello nos situamos sobre el directorio del tema desde consola y tecleremos lo siguiente:

gulp build ó gulp deploy

El primero compilará nuestro tema y generará un war, el segundo además mandará una copia a nuestro servidor.

Compilando con gulp

Como podremos observar los tiempos de compilación son mucho más reducidos.

Tiempo compilación

Si hemos hecho “gulp deploy” nos vamos al panel de control de nuestro Liferay y ahí tenemos nuestro tema (como no hemos hecho nada nos sale sin imagen representativa ni nada).

Seleccionamos nuestro tema en el panel de control de Liferay

Hasta aquí el desarrollo de nuestros temas apariencia para Liferay 7. Como véis se agiliza mucho el proceso de compilación.

Apuntes finales

Antes de terminar un apunte sobre dos comandos que ya existen con las nuevas herramientas (seguro que habrá más) y que nos pueden resultar de utilidad.

gulp init

Sobre nuestro tema de apariencia este comando nos relanza el asistente de yeoman por si queremos modificar algún parámetro.

gulp watch

Sobre nuestro tema de apariencia este comando hace que los cambios se desplieguen en caliente sobre nuestro servidor sin necesidad de compilar.

Esperamos que este post os haya sido de utilidad. Próximamente os contaremos algunas novedades más sobre Liferay 7, como es el tema de los themelets.

oct 19

Entrepixels · Nos vamos al Symposium de Liferay

Escrito por entrepixels | Entrepixels, Liferay | No hay comentarios

Los próximos 21 y 22 de Octubre tendrá lugar en el Hotel Mirasierra de Madrid, el Symposium de Liferay 2015 en España.

Como especialistas en temas de apariencia de Liferay, desde entrepixels queremos estar al día de las últimas novedades que nos traerá Liferay 7 y por eso asistiremos al evento para tomar parte de interesantes charlas y un workshop sobre el desarrollo de temas de apariencia en Liferay 7, que pronto verá la luz y parece que vendrá plagado de novedades.

Aprovechamos a recordaros que podéis descargaros, de forma gratuita, un tema de apariencia para Liferay 6.2 que hemos colgado recientemente en nuestra web desde el siguiente enlace: Descarga gratuita tema de apariencia entrepixels Liferay 6.2

Si tú también asistes al Symposium nos vemos por Madrid!

oct 05

Tema de apariencia responsivo gratuito para Liferay 6.2 entrepixels-theme

Escrito por entrepixels | Diseño Web, Liferay | Un comentario

Hoy queremos compartir un tema de apariencia (theme) para Liferay 6.2 que hemos creado para su descarga de forma gratuita.

Consiste en un tema responsivo, con una estructura muy adecuada para sitios corporativos y que viene con una plantilla de sitio con la que poder crear un portal desde cero en muy pocos pasos.

El tema de apariencia es compatible con todos los paquetes de Liferay 6.2, incluídas las versiones Community y Enterprise.

Para poder utilizarlo es muy sencillo. Simplemente descarga el tema desde nuestra página de descargas que os indicamos a continuación: https://www.entrepixels.com/producto/tema-de-apariencia-entrepixels-para-liferay-6-2-ce-y-ee/

Una vez descargado copia el fichero .war en tu directorio deploy de Liferay y el tema quedará instalado automáticamente. Tras la instalación, si quieres ver un ejemplo de sitio completo solamente has de acceder al panel de control e ir a sitios web como se indica en la siguiente captura.

Cuando estemos dentro podemos situarnos sobre la pestaña plantillas de sitio, seleccionar Entrepixels-theme y pinchar en el enlace visitar: página del sitio web para ver cómo está hecho.

O bien añadir un nuevo sitio con la plantilla de entrepixels-theme como se muestra a continuación.

El aspecto del tema de apariencia debería ser como el que os mostramos a continuación.

Tema de apariencia entrepixels para Liferay 6.2 CE y EE

Esperamos que os guste y os sirva de ayuda. Si necesitáis ayuda intentaremos resolverla lo antes posible.

ago 28

Fotos Concurso Hípico Internacional de Gijón 2015

Escrito por entrepixels | animales, Caballos, Deportes, Fotografía | No hay comentarios

Ayer jueves, nos pasamos por el Concurso Hípico Internacional de Gijón 2015 y aprovechamos a llevar la cámara para echar unas fotos. No contábamos con que un día por semana iba a haber tanta gente, pero el clima acompañaba y el recinto de Las Mestas se llenó.

Es la primera vez que acudimos, por lo que en la mochila iba buena parte del equipo pues no sabíamos lo que íbamos a necesitar. Finalmente al no estar acreditados, tuvimos que montar el 400mm debido a la distancia.

Os dejamos algunas fotos de la prueba que finalmente ganó el Irlandés Billy Twomey, montando a Tinka’s Serenade.

ago 26

Lucía Martiño, nuestra surfista asturiana más internacional

Escrito por entrepixels | Deportes, Fotografía, surf | No hay comentarios

El pasado fin de semana en Playa España, con motivo del campeonato de Surf organizado por OUT y SkoolSurf pudimos disfrutar de la presencia de Lucía Martiño, nuestra surfista asturiana más internacional.

Debido a sus numerosos compromisos (viajes con patrocinadores, campeonatos,…) cada vez es más difícil verla por aguas asturianas, y estamos encantados de poder haber estado allí para hacerle unas fotos en una free session y ver cómo mejora cada día su surfing.

Aprovechamos desde Entrepixels a desearle suerte en el WLS Anglet que está disputando estos días.

Y sin más os dejamos unas fotos del baño del pasado domingo en Playa España.

jun 03

Sesión fotográfica futuros papás

Escrito por entrepixels | embarazo, Fotografía, Sin categoría | No hay comentarios

Recientemente hemos tenido la visita de dos parejas a puntito de ser futuros papás, de hecho en el momento de escribir este post, una de ellas ya ha dado a luz; ¡enhorabuena!

Un par de sesiones divertidas, en las que las protagonistas han sido las mamás, pero siempre con la inestimable colaboración y participación de los futuros papás. Intentamos, además de ofrecer una sesión fotográfica, que los protagonistas se sientan cómodos, y por qué no, tratamos de pasar entre todos un rato divertido. Y creo que lo hemos conseguido.

Todo ello acompañado por los maquillajes y dibujos de Laura Díaz Salazar, una auténtica crack del maquillaje.

Os dejamos unas fotos de las sesiones.

Esperamos que os gusten.

may 17

Entre lápices y papeles: Papelería creativa, scrapbooking, artículos de fiesta y mucho más

Escrito por entrepixels | Diseño Web, Tienda online | No hay comentarios

Hoy queremos presentaros Entre lápices y papeles, un espacio web en el que podéis encontrar blog y tienda online dedicado a la Papelería creativa, scrapbooking, artículos de fiesta y mucho más.

Detrás de este proyecto se encuentra Ana Peña, amante de las manualidades (como ella misma se define) y gran aficionada a las libretas bonitas, los lápices, los sellos, el washiptape, las telas adhesivas, los artículos para decorar bodas y fiestas infantiles. Fruto de ello nace Entre lápices y papeles, con una tienda física situada en Oviedo y una web con tienda online donde se pueden encontrar y adquirir numerosos artículos.

En Entrepixels estamos encantados de que Ana haya contado con nosotros para colaborar con su web, realizando el diseño de la portada de la web y echando una mano a la implantación de la tienda online. Desde aquí os animamos a que entréis para disfrutar de todos los artículos chulos y originales que ofrece.

http://www.entrelapicesypapeles.es/

dic 21

Mañana de Surf con Dani Aznar en la Skoolsurf, Gijón

Escrito por entrepixels | Deportes, Fotografía, surf | No hay comentarios

Hacía tiempo que teníamos pendiente un sesión de fotos de surf con Dani Aznar de la SkoolSurf en Gijón.

Aprovechando los buenos fondos que hay estos días por el arenal de San Lorenzo y que el tiempo acompañaba, quedamos en la escuela y tras un par de horas esperando al punto de marea adecuado, Dani se puso su Narval y con una tabla un poco pequeña para el tamaño que había (entró más mar de lo previsto) se puso manos a la obra.

Una sesión divertida, con alguna que otra ola buena y la vuelta a las fotos de surfing que las teníamos un poco descuidadas.

Aquí va alguna foto del día. Esperamos que os gusten.