Portada del sitio > Documentación > Programación y diseño > Ejercicios de SPIP

Ejercicios de SPIP

Miércoles 25 de octubre de 2017, por Iván, Keila, Leonardo Vázquez

– Para hacer los ejercicios, probar desde el esqueleto para pruebas /squelettes/ejercicios.html que se prueba: ... /spip.php?page=ejercicios

– Tomar como referencia, los links del manual SPIP del siguiente artículo http://wiki.backendlid.com.ar/spip.php?page=article&id_article=3 y seguir buscando en caso de ser necesario.

– Para cada prueba eliminar del archivo las consultas anteriores así ejecutamos una sóla por vez.

– IMPORTANTE: LIMITAR SIEMPRE LOS RESULTADOS DE LOS BUCLES PARA QUE NO EJECUTE CONSULTAS DEMASIADO GRANDES.

– Para encontrar una palabre clave hacerlo desde LID-Ecrire/Edicion/Palabras Clave y guiarse para acceder desde el bloque de la izquierda que dice "Palabras clave
Grupos de palabras claves".

– Recordar que si se indica que se ordenen de forma "inverse" se tiene que indicar un parametro como "par popularite" o "par date", para que tenga un criterio por el cual ordenarlas de forma inversa.

Ejemplo: Listar las primeras 3 notas de política.

<BOUCLE_ejemplo(ARTICLES){id_mot=12}{0,3}>
- #TITRE</br>
</BOUCLE_ejemplo>

Ejercicio 1: Listar las últimas 3 notas de género.

<BOUCLE_ejemplo1(ARTICLES){id_mot=17}{par date}{inverse}{0,3}>
- #TITRE</br>
</BOUCLE_ejemplo1>

Tener en cuenta que en el caso de tener la misma fecha, ordena por hora.

Ejercicio 2: Listar las últimas 3 notas de la carpeta Venezuela. A las notas ponerle el link que abra en una ventana aparte. Poner los links dentro de un párrafo.

<BOUCLE_ejemplo2(ARTICLES){id_rubrique=5442}{par date}{inverse}{0,3}>
<p><a href="#URL_ARTICLE" target="_blank">#TITRE</a></p>
</BOUCLE_ejemplo2>

Ejercicio 3: Listar las últimas 3 notas de la carpeta Venezuela que sean también de género. Listarlas usando una lista de html (con un sólo ul para toda la lista y un li por cada artículo o sea quedaría con 3 li). Agregar también el link, la volanta (antetítulo) y la descripción breve.

<ul>
<BOUCLE_ejemplo3(ARTICLES){id_rubrique=5442}{id_mot=17}{par date}{inverse}{0,3}>
<li>
	<p>#SURTITRE</p>
	<p><a href="#URL_ARTICLE" target="_blank">#TITRE</a></p>
	<p>#DESCRIPTIF</p>
</li>
</BOUCLE_ejemplo3>
</ul>

Ejercicio 4: Listar las últimas 3 notas de la carpeta Venezuela que sean de género o de mundo obrero venezuela. Usar también listas, pero hacer que si no hay artículos (con li) tampoco haya ul. Agregar también el link, la volanta (antetítulo) y la descripción breve, pero sólo los primeros 200 caracteres usando el filtro couper.

<B_ejemplo4> <ul> <BOUCLE_ejemplo4(ARTICLES){id_rubrique=5442}{id_mot IN 12,9627}{par date}{inverse}{0,3}> <li> #SURTITRE <a href="#URL_ARTICLE" target="_blank">#TITRE</a> [(#DESCRIPTIF|couper{200})] </li> </BOUCLE_ejemplo4> </ul> </B_ejemplo4>

– Para hacer una simulación para comprobar que en el caso de que no hubiese artículos para mostrar el BOUCLE de hecho no traería nada, hay que utilizar la condición que se indica en el código HTML:

<B_n> ... <BOUCLE_n(TYPE){id_rubrique=x}{id_mot=x}> ... </BOUCLE_n> ... </B_n>

Luego indicarle que traiga artículos de una carpeta inexistente, y así vamos a poder ver que el BOUCLE no traerá nada. Ver sintaxis completade los bucles.

Ejercicio 5: Listar las últimas 3 notas de la carpeta España que sean de género y de mundo obrero españa. Usar también listas, pero hacer que si no hay artículos (con li) tampoco haya ul. Agregar también el link, la volanta (antetítulo) y la descripción breve, pero sólo los primeros 200 caracteres usando el filtro couper.

<B_ejemplo5>
<ul>
<BOUCLE_ejemplo5(ARTICLES){id_rubrique=2653}{id_mot=17}{id_mot=7866}{par date}{inverse}{0,3}>
	<li>
	  <p>#SURTITRE</p>
	  <p><a href="#URL_ARTICLE" target="_blank">#TITRE</a></p>
	  <p>[(#DESCRIPTIF|couper{200)]</p>
	</li>
</BOUCLE_ejemplo5>
</ul>
</B_ejemplo5>

Ejercicio 6: Listar las 3 primeras palabras clave de la carpeta España. Con título y link, con ul y li (si no hay datos no mostrar nada).

<B_ejemplo6>
<ul>
<BOUCLE_ejemplo6(MOTS){id_rubrique=2653}{par id_mot}{0,3}>
	<li><a href="#URL_MOT">#TITRE</a></li>
</BOUCLE_ejemplo6>
</ul>
</B_ejemplo6>

Ejercicio 7: Listar las 3 primeras palabras clave de la carpeta Jujuy, que sólo sean del grupo de palabras clave Locales del partido. Con título y link, con ul y li (si no hay datos no mostrar nada). Las palabras claves de locales están en el grupo de palabras clave correspondiente (ver cual es en el administrador).

<B_ejemplo7>
<ul>
<BOUCLE_ejemplo7(MOTS){id_rubrique=6445}{id_groupe=6}{par id_mot}{0,3}>
	<li><a href="#URL_MOT">#TITRE</a></li>
</BOUCLE_ejemplo7>
</ul>
</B_ejemplo7>

Ejercicio 8: Listar todas las palabras clave de la carpeta Jujuy, que no sean Locales. Con título y link, con ul y li (si no hay datos no mostrar nada).

<B_ejemplo8>
<ul>
<BOUCLE_ejemplo8(MOTS){id_rubrique=6445}{id_groupe!=6}>
	<li><a href="#URL_MOT">#TITRE</a></li>
</BOUCLE_ejemplo8>
</ul>
</B_ejemplo8>

Ejercicio 9: Listar las 5 notas más "populares" de Género y Sexualidades.

<html>
<head></head>
<body>
<BOUCLE_ejemplo09 (ARTICLES){id_mot=17}{par popularite}{inverse}{0,5}> 
<ul>
          <p>#SURTITRE</p>
          <p><a href="#URL_ARTICLE" target="_blank">#TITRE</a></p>
          
</ul>
</BOUCLE_ejemplo09>
</body>
</html>

Ejercicio 10: Listar las 5 notas más "populares" de Género y Sexualidades, con antetítulo, título, descripción breve (cortar si tiene más de 200 caracteres).

<BOUCLE_ejemplo10 (ARTICLES){id_mot=17}{par popularite}{inverse}{0,5}> 
<ul>
	  <p>#SURTITRE</p>
	  <p><a href="#URL_ARTICLE" target="_blank">#TITRE</a></p>
	  <p>[(#DESCRIPTIF|couper{200)]</p>
</ul>
</BOUCLE_ejemplo10>

Ejercicio 11: Al bucle anterior agregar que muestre el logo principal del artículo. Que quede bien el logo y que reduzca el ancho de la misma a un ancho de 500px. Verificar que se generen las miniaturas correspondientes.

<html>
<head></head>
<body>
<B_ejemplo10>
<ul>
<BOUCLE_ejemplo11 (ARTICLES){id_mot=17}{par popularite}{inverse}{0,5}> 
<li>
<p><a href="#URL_ARTICLE" target="blank">#TITRE</a></p>
<p>#SURTITRE</p>
 <p>[(#DESCRIPTIF|couper{200})]</p></li>
 <li><p>[(#LOGO_ARTICLE|left|image_reduire{500})]</p></li>
</BOUCLE_ejemplo11>
</ul>
</B_ejemplo10>
</body>
</html>

Ejercicio 12: Partiendo del bucle anterior probar y armar un ejemplo con los filtros del logo que se muestran en el ejemplo https://www.spip.net/es_article4861.html

<div>
<B_ejemplo12>
<ul>
<BOUCLE_ejemplo10x (ARTICLES){id_mot=17}{par popularite}{inverse}{0,1}> 
<li>
 [(#LOGO_ARTICLE|left|fichier)]
</li></BOUCLE_ejemplo10x>
</ul>
</B_ejemplo10x>
</div>

<div>
<B_ejemplo12a>
<ul>
<BOUCLE_ejemplo12b (ARTICLES){id_mot=17}{par popularite}{inverse}{0,1}>
<li> [(#LOGO_ARTICLE||image_reduire{50,50})]
</li>
</BOUCLE_ejemplo12b>
</B_ejemplo12a>
</ul>
</div>

<div>
<B_ejemplo12c>
<ul>
<BOUCLE_ejemplo10c (ARTICLES){id_mot=17}{par popularite}{inverse}{0,1}>
<li> [(#LOGO_ARTICLE|#URL_ARTICLE||inserer_attribut{alt,#TITRE})]
</li>
</BOUCLE_ejemplo10c>
</ul>
</B_ejemplo12c>
</div>

Ejercicio 13: Listar las 10 notas más "populares" de la sección Enfoque Rojo. Agregar autor si tiene. Y en el caso de que tenga más de uno autor mostrarlos separador por coma.

<B_ejemplo13>
<ul>
<BOUCLE_ejemplo13(ARTICLES){id_mot=128}{par popularite}{inverse}{0,10}> 
<li>
	<h3> <p>#TITRE</p> </h3>
</li>
	<h4><p>Autor/es: </p> </h4>
<BOUCLE_auteurs(AUTEURS){id_article}{", "}>
  #NOM
</BOUCLE_auteurs>
</BOUCLE_ejemplo13>
</ul>
</B_ejemplo13>

Para probar si muestra con coma, cambiar id_mot por 16(sección Juventud) que se suelen escribir notas de a dos.

Ejercicio 14: Al bucle anterior en el bucle de los autores agregar que se muestren nombre del autor, descripción e imagen principal.

<B_ejemplo14>
<ul>
<BOUCLE_ejemplo14(ARTICLES){id_mot=128}{par popularite}{inverse}{0,10}> 
<li>
	<h3> <p>#TITRE</p></h3>
</li>
	<h4><p>Autor/es: </p></h4>
<BOUCLE_auteurs(AUTEURS){id_article}{", "}>
   #NOM
</BOUCLE_auteurs>
<p>#DESCRIPTIF</p>
<p>#LOGO_ARTICLE|</p>
</BOUCLE_ejemplo14>
</ul>
</B_ejemplo14>

Ejercicio 15: Al bucle anterior, mostrar las imágenes adjuntas del artículo si tiene galería, generando miniaturas de un ancho de 300px.

<B_ejemplo15>
<ul>
<BOUCLE_ejemplo15(ARTICLES){id_mot=128}{par date}{inverse}{0,5}> 
	<li>
	<h3> <p>#TITRE</p></h3>
	</li>
	<h4><p>Autor/es: </p></h4>
	<BOUCLE_auteurs(AUTEURS){id_article}{", "}>
	#NOM
	</BOUCLE_auteurs>
	<p>#DESCRIPTIF</p>
	<BOUCLE_galeria(DOCUMENTS){id_article}{mode=image}>
	#LOGO_DOCUMENT
	[(#FICHIER|image_reduire{300})]
	</BOUCLE_galeria>
</BOUCLE_ejemplo15>
</ul>
</B_ejemplo15>

Ejercicio 16: Partiendo del ejercicio anterior, mostrar las imágenes en forma circular usando bootstrap como este ejemplo https://www.w3schools.com/bootstrap/bootstrap_images.asp.

Ejercicio 17: Dividir el html anterior en dos nuevos sub-esqueletos ejercicios_sub1.html con el título en html estático, ejercicios_sub2.html con el bucle, incluídos ambos en el esqueleto principal ejercicios.html. Ver bloques de código con INCLURE

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<INCLURE{fond=ejercicios_sub1}>
<INCLURE{fond=ejercicios_sub2}>
</body>
</html>

<html>
<head></head>
<body>
<h1> Ejercicio 17 </h1>
</body>
</html>

<html>
<head></head>
<body>
<B_ejemplo17>
<ul>
<BOUCLE_ejemplo17(ARTICLES){id_mot=128}{par popularite}{inverse}{0,10}> 
<li>
        <h3> <p>#TITRE</p></h3>
</li>
        <h4><p>Autor/es: </p></h4>
<BOUCLE_auteurs(AUTEURS){id_article}{", "}>
  #NOM
</BOUCLE_auteurs>
<p>#DESCRIPTIF</p>
<p>#LOGO_ARTICLE|</p>
</BOUCLE_ejemplo17>
</ul>
</B_ejemplo17>
</body>
</html>

Ejercicio 18: Modificar el bucle del subesqueleto ejercicios_sub2.html, para que reciba como parámetro el id_mot de la sección correspondiente y que el bucle muestre los artículos de la palabra clave que recibe como parámetro. Y modificar el esqueleto principal, agregando 3 llamados al mismo sub esquleto, con distintas palabras clave. De esta manera se puede reutilizar el código del nuevo bloque creado.

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<INCLURE{fond=ejercicios_sub1}>
<INCLURE{fond=ejercicios_sub2}{id_mot=36}>
<INCLURE{fond=ejercicios_sub2}{id_mot=44}>
</body>
</html>

<html>
<head></head>
<body>
<h1>Ejercicio 18</h1>
</body>
</html>

<html>
<head></head>
<body>
<B_ejemplo18>
<ul>
<BOUCLE_ejemplo18(ARTICLES){id_mot}{par date}{inverse}{0,3}> 
	<li>
	<h3><p>#TITRE</p></h3>
	</li>
	<h4><p>Autor/es:</p></h4>
	<BOUCLE_auteurs(AUTEURS){id_article}{", "}>
		#NOM
	</BOUCLE_auteurs>
	<p>#DESCRIPTIF</p>
	<p>#LOGO_ARTICLE</p>
</BOUCLE_ejemplo18>
</ul>
</B_ejemplo18>
</body>
</html>

Ejercicio 19: Al nuevo subesqueleto o bloque del ejemplo anterior, agregarle que además reciba como parámetro id_rubrique, id_auteur y probar en los tres llamados distintos valores verificando los distintos resultados en cada caso.

<html>
<head></head>
<body>
<INCLURE{fond=ejercicios_sub1}>
<INCLURE{fond=ejercicios_sub2}{id_rubrique=1}{id_mot=507}{id_auteur=559}>
<INCLURE{fond=ejercicios_sub1}>
<INCLURE{fond=ejercicios_sub2}{id_mot=13}>
<INCLURE{fond=ejercicios_sub1}>
<INCLURE{fond=ejercicios_sub2}{id_mot=13}{id_auteur=81}>
</body>
</html>

<html>
<head></head>
<body>
<ul>
<B_muestraVariosCriterios>
<BOUCLE_muestraVariosCriterios(ARTICLES){id_rubrique?}{id_mot?}{id_auteur?}{par date}{inverse}{0,3}> 
	<li>
	<h3><a href="#URL_ARTICLE" target="_blank">#TITRE</a></h3>
	<p>#ID_ARTICLE</p>
	</li>
	<h4><p>Autor/es:</p></h4>
	<BOUCLE_auteurs(AUTEURS){id_article}{", "}>
		#NOM
	</BOUCLE_auteurs>
	<p>#DESCRIPTIF</p>
</BOUCLE_muestraVariosCriterios>
</B_muestraVariosCriterios>
<h2>SIN RESULTADOS</h2>
<//B_muestraVariosCriterios>
</ul>
</body>
</html>