Aquí vamos a explicar el proceso, así que, para no desviarnos con las particularidades de uno u otro framework, vamos a dinamizar esa maqueta en HTML con JavaScript "a secas", sin el apoyo de ninguna libería, ni siquiera jQuery.
Para ello, vamos a dividir el proceso en dos casos cuyas soluciones presentaremos por separado: dinamizar el contenido de una maqueta con una cantidad fija de información y, después, dinamizar el contenido de una maqueta con una cantidad de información variable.
Ejemplo de sección con una cantidad fija de información
Supongamos que tenemos la Web de una escuela en la que, cada día, se publican los datos de un alumno destacado mostrando el nombre del alumno, su foto y un pequeño párrafo diciendo los motivos por los que se le considera un alumno destacado. La sección maquetada podría ser como sigue:
<div id="alumnoDestacado">
<h3>Nombre del alumno</h3>
<img src="img/persona.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vehicula dictum lectus vel auctor.</p>
</div>
Cuyo resultado es el siguiente (después de formatearlo un poco con CSS):
Nombre del alumno
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vehicula dictum lectus vel auctor.
Supongamos ahora que en dicha Web, hay un servicio REST que, al consultarlo, devuelve un JSON con los datos del alumno destacado. Por ejemplo, el JSON podría tener la estructura siguiente:
{
"nombre": "María López González",
"foto": "img/alumnos/maria-lopez-gonzalez.jpg",
"motivo": "Galardonada en las Olimpiadas Municipales de Lengua Inglesa"
}
En la maqueta anterior, aún no hay cambios en el contenido pues es solo una maqueta. Entonces: ¿cómo transformar la maqueta para mostrar dinámicamente el contenido del JSON obtenido desde servicio REST?
Proceso para convertir el contenido de una maqueta en HTML con una cantidad fija de información en una Web con contenido dinámico
Por supuesto, hay muchas formas de solucionar este problema. Aquí propondremos una (de entre tantas) en la que basarse para buscar alternativas y soluciones propias. De modo que el proceso quedaría como sigue:
- Identificar el evento ante el cuál queremos actualizar la plantilla con los datos dinámicos.
- Modificar la plantilla HTML asignando un identificador único a cada elemento cuyo contenido queremos actualizar dinámicamente (desde JavaScript).
- Crear una función en JavaScript que reciba como parámetro los datos a mostrar y modifique el HTML para reflejar los cambios. Para ello, para cada dato a actualizar:
- Obtener el elemento HTML con el identificador correspondiente al dato a actualizar
- Modificar el atributo a actualizar, con el dato correspondiente
- Crear una función en JavaScript que cargue los datos que se quieren mostrar y llame a la función del paso 3 con los datos cargados.
- Cuando se produzca el evento deseado (identificado en el paso 1), llamar a la función de carga de datos (creada en el paso 4).
- Fin.
Para ilustrar el proceso anterior, veamos cómo dinamizar los datos de la plantilla del "alumno destacado".
Ejemplo del proceso, ilustrado y explicado, paso a paso
1 Identificar el evento ante el cuál queremos actualizar la plantilla con los datos dinámicos
2 Modificar la plantilla HTML asignando un identificador único a cada elemento cuyo contenido queremos actualizar dinámicamente (desde JavaScript)
En este caso, los datos a mostrar son el nombre, la foto y la descripción que se corresponderán con las etiquetas h3, img y p, respectivamente. De modo que, asignaremos un id único a cada etiqueta para su actualización desde JavaScript, quedando la plantilla modificada, como sigue:
<div id="alumnoDestacado">
<h3 id="nombre">Nombre del alumno</h3>
<img id="foto" src="img/persona.png" />
<p id="motivo">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vehicula dictum lectus vel auctor.</p>
</div>3 Crear una función en JavaScript que reciba como parámetro los datos a mostrar y modifique el HTML para reflejar los cambios.
Este es el pollo del arroz con pollo: aquí es donde hay que poner énfasis pues es la parte donde se hace la actualización de los datos en cuestión. Para ello, hay que intentar ser claros y consecuentes con los nombres que se asignen a variables y funciones. La función que vamos a implementar va a actualizar los datos del alumno destacado así que la llamaremos
actualizarAlumnoDescataco. Luego, recibirá los datos del alumno destacado, por lo que tendrá un parámetro que llamaremos datosAlumno. Finalmente, va a actualizar los datos nombre, foto y motivo; por lo que el proceso de actualización será:- Localizar el elemento que contendrá el nombre y actualizar el texto del mismo, con el nombre del alumno.
- Localizar el elemento que contendrá la foto y actualizar la url de la imagen, con la url de la foto del alumno.
- Localizar el elemento que contendrá el motivo y actualizar el texto del mismo, con el motivo por el que se destaca el alumno.
Teniendo en cuenta lo anterior, el código de la función quedaría más o menos como sigue:
/**
* Actualiza los datos de un alumno, en la sección de alumno destacado
* @param datosAlumno - Objeto con los datos del alumno: nombre, foto y motivo
*/
function actualizarAlumnoDescatado(datosAlumno) {
$('#nombre').text(datosAlumno.nombre);
$('#foto').attr('src', datosAlumno.foto);
$('#motivo').text(datosAlumno.motivo);
}4 Crear una función en JavaScript que cargue los datos que se quieren mostrar y llame a la función del paso 3 con los datos cargados
Usualmente, la fuente de obtención de datos puede variar: puede venir de un servicio REST propio, de uno externo, o ser un dato calculado o generado a partir de otros ya cargados. De modo que la implementación de esta función variará, según la fuente de los datos. No obstante, en el caso del alumno destacado hemos supuesto que la Web cuenta con un servicio REST que devuelve un JSON con los datos del alumno; por lo que, en este punto, necesitaremos:
- Identificar la Url del servicio REST
- Pedir los datos JSON mediante Ajax
- Llamar a la función del paso 3, con los datos obtenidos.
Una vez más, intentaremos ser organizados y consecuentes con los nombres, así que supongamos que el servicio REST está en la misma Web, en la Url relativa "api/alumnoDestacado" y que llamaremos a la función
cargarAlumnoDestacado, quedando la función como sigue:/**
* Carga los datos del alumno destacado y actualiza la interfaz
* con los datos cargados
*/
function cargarAlumnoDestacado() {
var url = "api/alumnoDestacado";
$.getJSON(url, function (result) {
if (result) {
actualizarAlumnoDestacado(result);
}
});
}Esta implementación, por supuesto, es muy básica e ignora muchos posibles casos de fallo: ¿Qué pasa si no se obtienen resultados del servicio REST? ¿Qué pasa si se produce un error en la llamada Ajax? ¿Qué pasa si los datos no tienen la estructura esperada...? Estos y muchos otros fallos quedan aquí sin tratar, porque complejizarían el código de la función y lo que pretendemos aquí es mostrar lo mínimo necesario para lograr un objetivo: cargar los datos desde un servicio y mostrarlo en nuestra Web. De modo que, queda como ejercicio personal extender éste código y tratar todos los casos que se nos puedan ocurrir.
5 Cuando se produzca el evento deseado (identificado en el paso 1), llamar a la función de carga de datos (creada en el paso 4)
Este paso final es el aglomerador: aquí es donde pondremos a funcionar nuestro código, partiendo del acontecidmiento de un evento determinado. En nuestro ejemplo, definimos que la carga y visualización del alumno destacado se produciría una única vez, después de haber cargado la página; por lo que la llamada a la función de carga de datos quedaría como sigue:
$(document).ready(cargarAlumnoDestacado);Poniéndolo todo junto
Para ver el resultado completo de todo lo anterior, ir a los siguiente enlaces, donde están las páginas funcionando y el código fuente de las mismas:
- Código fuente de la maqueta HTML: https://github.com/carlosbello/efectodemo/blob/gh-pages/MaquetaHTML2WebDinamica/maqueta_alumno_destacado.html
- Maqueta HTML funcionando: http://carlosbello.github.io/efectodemo/MaquetaHTML2WebDinamica/maqueta_alumno_destacado.html
- Código fuente de la página Web dinámica:
- Página Web funcionando: http://carlosbello.github.io/efectodemo/MaquetaHTML2WebDinamica/alumno_destacado.html
Conclusiones y siguientes pasos
Como hemos visto hasta aquí, el proceso para convertir el contenido de una maqueta en HTML en una Web con contenido dinámico puede reducirse a:
- Modificar la maqueta para prepararla para su actualización desde JavaScript.
- Crear funciones en JavaScript para cargar y visualizar el contenido dinámico.
- Ejecutar las funciones de carga y visualización, luego de la ejecución de un evento determinado.
No obstante, las particularidades de la implementación varían si la cantidad de contenido dinámico es fija o variable. Aquí mostramos el proceso para convertir el contenido de una maqueta en HTML con una cantidad fija de información en una Web con contenido dinámico y en el post siguiente veremos el proceso para convertir el contenido de una maqueta en HTML con una cantidad variable de información en una Web con contenido dinámico.
Si tienes alguna duda, comentario o sugerencia... ponla en los comentarios.
No hay comentarios:
Publicar un comentario