Este documento describe 3 niveles para optimizar Liferay para múltiples dispositivos: 1) la interfaz de usuario mediante reglas móviles, 2) el back-end utilizando el objeto Device para detectar características del dispositivo, y 3) el front-end usando media queries y reglas CSS específicas para adaptar el diseño dependiendo del dispositivo.

1. Optimizando Liferay para
múltiples dispositivos

2. 3 Niveles a optimizar
1. Desde la interfaz de Usuario
2. Desde el back-end
3. Desde el front-end

3. 1. Desde la
interfaz de usuario

4. Mobile Device Rules

8. 2. Desde el
back-end

9. Objeto Device
themeDisplay.getDevice()

10. Device
Device device = themeDisplay.getDevice();
device.getScreenSize()
device.getBrand()
device.getOS()
device.getCapabilities()
device.isTablet()
device.hasQwertyKeyboard()
...
http://docs.liferay.com/portal/6.1/javadocs/

11. Está en todas partes...
•En los JSPs
<liferay-theme:defineObjects />
•En la request
ThemeDisplay themeDisplay =
(ThemeDisplay)actionRequest.getAttribute(
WebKeys.THEME_DISPLAY);
•En los temas:
#set ($device = theme_display.getDevice())

12. 3. Desde el
front-end

13. Media Queries
•Reglas CSS específicas para dispositivos
// Tablet
@media screen and (max-width : 1024px) {
body {
background-color: red;
}
}
// Phone
@media screen and (max-width : 480px) {
body {
background-color: blue;
}
}
http://www.w3.org/TR/css3-mediaqueries/

14. mediaqueri.es

15. Reglas típicas de Liferay
.portlet-column {
display: block;
width: 100%;
.portlet-column-content {
padding: 0;
}
}
* linealiza todas las columnas

16. Reglas típicas de Liferay
#heading {
h1 {
float: none;
width: 90%;
}
#navigation {
li {
float: none;
width: 80%;
}
}
}
* linealiza el logo y la navegación

17. Pantalla táctil? (Alloy)
if (A.UA.touch) {
// Esto est táctil
}

18. www.freezity.com
www.cabina14.es

19. Gracias!
@liferay
@juliocamarero
julio.camarero@liferay.com