producto añadido a tu cesta!

Entrepixels Archives - entrepixels · diseño, maquetación, desarrollo páginas web y Fotografía

Liferay 6.2 y bootstrap 3

Integración de BootStrap 3 con Liferay 6.2

Escrito por | 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

Liferay 6.2 con BootStrap 3

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

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

Liferay 7

Desarrollo de temas de apariencia -themes- en Liferay 7

Escrito por | 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.

Symposium Liferay 2015

Entrepixels · Nos vamos al Symposium de Liferay

Escrito por | 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!

WebAsturianaCabecera

Entrepixels nominada a la mejor web empresarial de Asturias

Escrito por | Diseño Web, Entrepixels | 4 Comentarios

Nos alegra comunicaros que nuestra web ha sido nominada en la “XV edición Mejor Web de Asturias” organizada por el diario El Comercio, como mejor web en la categoría empresarial.

Desde aquí os animamos a visitar la web del concurso y a que comentéis vuestras impresiones.

El equipo que formamos entrepixels estamos muy contentos por esta nominación y nos anima a seguir mejorando.

aurora-blog-cabecera

Habilitamos la tienda de entrepixels

Escrito por | Entrepixels | No hay comentarios

Desde hoy está habilitada la sección tienda de entrepixels.

Inicialmente está pensada para que puedas adquirir alguna de nuestras fotografías si así lo deseas. Todas ellas están a muy alta resolución para que puedas revelarlas al tamaño que desees. No están pensadas para uso comercial pero si deseas hacer uso de ellas con esos fines, ponte en contacto con nosotros a través del correo ventas@entrepixels.com y no habrá ningún problema.

El proceso de compra es sencillo. Sólo tienes que rellenar un formulario con tus datos, para poder contactar contigo si hubiese algún problema en el proceso, y podrás pagar a través de Paypal (que te permitirá también pagar con tarjeta).

Una vez completado el pedido te llegará un correo electrónico con los enlaces para la descarga de aquellas imágenes que hayas adquirido. Para evitar problemas el pedido se revisa de forma manual, por lo que es posible que pueda tardar unas horas en llegar el correo electrónico para las descargas.

Recomendamos no utilizar correos de hotmail, ya que suele dar problemas con el envío automático de correos. Pero no te preocupes si lo has usado, pues todos los pedidos son revisados y te haríamos llegar las descargas de forma manual.

Ahora hay poquitas fotos pero hay más en camino. Esperamos que las disfrutes.

Inauguración entrepixels

Inauguramos entrepixels.com!

Escrito por | Entrepixels | No hay comentarios

Hola a todos. Ya estamos en línea!

Después de unos días y noches de trabajo, de debatir sobre diseños, arquitectura de información, colores, logos y demás ha llegado la hora de publicar nuestra página web.

Como algunos ya sabeis,  entrepixels es un grupo de personas freelance con amplia experiencia en el sector Web y fotografía digital.

Porque la imagen es importante ofrecemos soluciones Web y fotográficas con las que nuestro cliente esté cómodo y se sienta identificado.

Realizamos desarrollo de páginas Web totalmente personalizadas para particulares y PYMES, diseño y maquetación Web profesional para empresas del sector TIC.

Estamos especializados en el desarrollo de temas de apariencia (themes) avanzados bajo Liferay y Hybris, ofreciendo tanto desarrollo como formación a las empresas que trabajan con estas herramientas.

En el ámbito fotográfico, ofrecemos la realización de todo tipo de reportaje: bodas, despedidas de soltero/a, comuniones, mascotas, todo tipo de eventos, aquel deporte que practiques, etc.

Además ofrecemos cursos de fotografía tanto de iniciación como personalizado, orientándolo a las necesidades de cada uno.

En los próximos días iremos añadiendo información a algunas de nuestras secciones, imágenes a la galería, e intentaremos hacer de esta web, especialmente a través de este blog, un sitio dinámico en el que puedas pasar un buen rato.

Y como nos gustan las críticas constructivas os animamos a que nos comentéis qué os gusta o no os gusta de la página y en qué podemos mejorarla.

Muchas gracias a todos por vuestra visita.

Nos vemos en entrepixels.com