Warning: ksort() expects parameter 1 to be array, object given in /homepages/3/d382450142/htdocs/BLOG BLANGGO/wp-content/plugins/bbpress/includes/core/template-functions.php on line 316
¿Cómo utilizar HTML dinámico? | Blog | Blanggo.com

¿Cómo utilizar HTML dinámico?

El HTML dinámico “es un mecanismo que permite el mapeo de los valores de algunos datos JSON en un código HTML definido en un archivo específico. El resultado será un HTML muy bien diseñado con algunos datos personalizados de JSON.

¿Cómo funciona?

Los componentes necesarios para el HTML dinámico son:

– Datos de JSON

– Archivo de plantilla HTML.

Los datos JSON proporciona el contenido que se mostrará en la página. Por lo general, se solicita de un servidor. La solicitud puede ser específica para un usuario o un lugar.

La plantilla HTML proporcionará la estructura y diseño del contenido. Esto suele ser un archivo que ya existe en el dispositivo. El HTML contiene bloques específicos de texto que actúan ya sea como marcadores de posición de algunos datos (como “[% = first_name%]”) o introducir una lógica de procesamiento para los datos (como “[% para cada pics%] <img src =” / [% =.%] “/> [% end for-each%]”)

Las páginas HTML locales también se pueden actualizar mediante el módulo de sincronización. Las páginas HTML no son estáticas. Ellos se rellenarán con los datos del servidor de forma dinámica. Su funcionamiento es muy similar a las transformaciones XSLT.

Ejemplo de un archivo HTML con nuestras etiquetas especiales:

<html>
<head>
<title>[%=profile.pagetitle%]</title>
</head>
<body>
<div>[%=profile.pagesubtitle%]</div>
<img src=”/[%=profile.imgsrc%]”><br>
Messages:<br>
<table>
[%for-each profile.messages%]
<tr>
   <td>[%=messagetext%]</td>
   <td>[%=messagedate%]</td>
</tr>
[%end for-each%]
</table>
</body>
</html>
En el archivo “app.xml” para la etiqueta de página correspondiente se debe especificar la URL de origen de datos JSON, es el atributo “jsonurl” para la “página” de etiquetas y puede ser cualquier url.
La respuesta esperada en el cuerpo debe contener la siguiente JSON:
{“profile”:{
pagetitle : “atitle”,
pagesubtitle : “asubtitle”,
imgsrc : “http://dine.com/images/image123.png”,
messages: [
{messagedate:”1/5/2011″, messagetext:”text1″},
{messagedate:”3/5/2011″, messagetext:”text2″},
{messagedate:”6/5/2011″, messagetext:”text3″}
]
}}
Las etiquetas personalizadas en el código HTML de arriba se reemplazarán con los datos de la respuesta JSON que resulta en un HTML temporal que se representa en la pantalla del dispositivo.
<html>
<head>
<title>atitle</title>
</head>
<body>
<div>asubtitle</div>
<img src=”http://dine.com/images/image123.png”><br>
Messages:<br>
<table>
<tr>
   <td>text1</td>
   <td>1/5/2011</td>
</tr>
<tr>
   <td>text2</td>
   <td>3/5/2011</td>
</tr>
<tr>
   <td>text3</td>
   <td>6/5/2011</td>
</tr>
</table>
</body>
</html>
NOTA: Este tipo de representación de los datos que los usuarios puedan rellenar dinámicamente el contenido de páginas HTML/Nativas sin ningún cambio de diseño. Esta función ofrece la posibilidad de interconectar la aplicación para el iPhone con la base de datos desde su propio servidor y hacerlo más interactivo.

Blanggo.com