Integrar OpenUI5 en nuestro blog (y V): Página principal de Blogger responsive

Hasta ahora, hemos ido añadiendo controles OpenUI5 en nuestro blog de Blogger, pero no hemos dejado muy bonita la página principal: Un tile debajo de otro, todo amontonado, que ni es responsive ni nada, y eso siempre resulta interesante, ¿no?

Eso es lo que vamos a hacer ahora: La página principal, que nos mostraba el listado de artículos mediante tiles, va a ser responsive, de tal manera que, dependiendo del tamaño de la ventana, mostrará más o menos tiles en cada línea.

Para eso, tenemos que investigar los siguientes puntos:

• Cómo añadir un Grid de OpenUI5 en la página principal.
• Cómo cambiar el ancho mínimo y máximo de Blogger, ya que por defecto nos fuerza a un ancho fijo.

Y así, nuestra página principal ya será responsive.

El resultado se puede ver en https://jgctest3.blogspot.com/

Integrar OpenUI5 en nuestro blog (IV): Página principal sólo con tiles

Habíamos creado nuestra página inicial de Blogger para mostrar los artículos como Tiles, pero de momento no nos había quedado muy bonito. Es como si quisiésemos hacer una web élfica y sólo hubiésemos conseguido crear una web orca, todo aún muy feo. Los tiles aparecían tanto en la entrada principal como en cada artículo, y ni siquiera podíamos navegar con ellos. Así que vamos a cambiar esa funcionalidad. Para ello, nuestros objetivos son:

• Al pulsar un tile, se navegará al artículo correspondiente.
• En la página principal sólo se verán los tiles.
• En cada artículo, no se verán los tiles.

Para obtener algo como lo siguiente:

Y diréis, "oye, que todavía queda feo". Pues sí, ¿pero a que no tanto como antes? Poquito a poco vamos mejorando.

Integrar OpenUI5 en nuestro blog (III): Usando agregaciones

Estamos integrando la librería OpenUI5 en nuestro blog, que nada tiene que ver con SAP. En nuestro ejemplo en particular, se trata de un blog de Blogger (Google). En los dos artículos anteriores habíamos aprendido:

1. Lo básico, con un artículo introductorio;
2. A crear un Hola Mundo en versión friki y con OpenUI5, para invocar a Cthulhu.

Ahora vamos a ver cómo podemos avanzar. Como siempre, haremos algo básico para ir aprendiendo conceptos técnicos.

Lo que vamos a hacer es añadir, en la página principal, cada artículo en un Tile con el título y la primera imagen. En posteriores artículos dejaremos sólo los tiles y con ellos navegaremos al artículo en sí. El ejemplo se puede ver en https://jgctest2.blogspot.com/

Sí, de momento es cutrecillo, pero es el primer paso
para conseguir algo más grande: ¡La Estrella de la Muerte! 

Con este proceso aprenderemos dos cosas:

• A localizar en Blogger dónde podemos tratar nuestros posts y las etiquetas básicas: Buscaremos el LOOP.
• A usar agregaciones en OpenUI5 mediante HTML declarativo.

Oye, que eso no es moco de pavo.

Integrar OpenUI5 en nuestro blog (II)

En el artículo anterior, habíamos establecido unos objetivos, un poco vagamente, para ver qué nos encontrábamos: Aprender a utilizar OpenUI5 en una web normal.

Así que ahora nos toca llevar a cabo la parte práctica, en plan básico: Añadir la librería en nuestro sitio web y poner un simple botón que nos soltará un "Hola, mundo". Por supuesto, lo vamos a hacer un poco más friki y vamos a intentar invocar a Cthulhu.

El Hola mundo friki

La web que vamos a utilizar será un simple blog de Blogger (de Google), aunque este artículo sería aplicable a otros sitios web (excepto, claro está, la parte específica de Blogger).

Y los pasos que vamos a seguir son los siguientes:

• Editar el tema de Blogger.
• Añadir la librería de OpenUI5.
• Ver cómo se añaden componentes OpenUI5 con etiquetas HTML (HTML declarativo).
• Crear un botón de tipo sap.m.Button.
• Añadir un evento al botón, que lanzará un mensaje de tipo sap.m.MessageToast.

Se puede ver el resultado en el blog https://jgctest1.blogspot.com.

Integrar OpenUI5 en nuestro blog (I)

Un día, un tal aancos me decía que si mi web hablaba de UX, que si no debería ser más amigable, más moderna, más usable... Y no le faltaba razón. La verdad es que mi objetivo en el blog es aprender, sobre todo, la parte técnica relacionada con SAP UX. No me he preocupado demasiado en darle un formato más bonito al propio blog, sólo en publicar lo que voy aprendiendo.

Y ahí pensé, que anda que no quedaría chulo "fiorizar" el propio blog. No sé, ponerle botones típicos de SAPUI5, añadirle tiles, crear mallas que se adapten a la resolución.

Ya había hecho alguna prueba con Blogger (de Google, donde tengo este blog) para poder crear navegaciones de más de un nivel, ya que por defecto Blogger sólo permite un nivel. Para ello, había utilizado la librería jQuery, que había cargado en el propio blog.

Así que, ya con esa idea en la mente, integrar SAPUI5 no podía ser muy difícil. ¿Qué debería tener en cuenta?