WikiLIDs

Ejercicios de SPIP

Iván, Keila, Leonardo Vázquez — 2017-10-25T19:47:53Z

– 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.

 - #TITRE

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

 - #TITRE

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.

 #TITRE

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.

   #SURTITRE
 #TITRE
 #DESCRIPTIF

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.

#SURTITRE #TITRE [(#DESCRIPTIF|couper{200})]

– 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:

... ... ...

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.

    #SURTITRE
 #TITRE
 [(#DESCRIPTIF|couper{200)]

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).

   #TITRE

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).

   #TITRE

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).

   #TITRE

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

     #SURTITRE
 #TITRE

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).

  #SURTITRE
 #TITRE
 [(#DESCRIPTIF|couper{200)]

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.

       #TITRE
 #SURTITRE
 [(#DESCRIPTIF|couper{200})]
 [(#LOGO_ARTICLE|left|image_reduire{500})]

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

     [(#LOGO_ARTICLE|left|fichier)]  
  
      [(#LOGO_ARTICLE||image_reduire{50,50})] 
   
 
      [(#LOGO_ARTICLE|#URL_ARTICLE||inserer_attribut{alt,#TITRE})]

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.

     #TITRE
 
 
 Autor/es: 
 
  #NOM

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.

     #TITRE
 
 Autor/es: 
  #NOM  #DESCRIPTIF
 #LOGO_ARTICLE|

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

     #TITRE
 
 Autor/es: 
  #NOM  #DESCRIPTIF
  #LOGO_DOCUMENT [(#FICHIER|image_reduire{300})]

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

    Ejercicio 17

        #TITRE
 
 Autor/es: 
  #NOM  #DESCRIPTIF
 #LOGO_ARTICLE|

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.

   Ejercicio 18

       #TITRE
 
 Autor/es:
  #NOM  #DESCRIPTIF
 #LOGO_ARTICLE

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.

       #TITRE
 #ID_ARTICLE
 
 Autor/es:
  #NOM  #DESCRIPTIF
   SIN RESULTADOS

PWA: Notificaciones push

Leonardo Vázquez — 2017-10-06T21:07:19Z

Desarrollo:
https://www.laizquierdadiario.com/push/app/

Tutorial en castellano: https://developers.google.com/web/fundamentals/codelabs/push-notifications/
Tiene el link para enviar notificaciones push desactualizado que no funciona: https://web-push-codelab.appspot.com/

La nueva versión del tutorial en inglés: https://codelabs.developers.google.com/codelabs/push-notifications
Tiene nuevo link para enviar notificaciones: https://web-push-codelab.glitch.me/

Seguir con la siguiente documentación:
https://developers.google.com/web/fundamentals/push-notifications/

Segunda parte

1) Web Push Notifications: Timely, Relevant, and Precise

Qué es un service worker
https://developers.google.com/web/fundamentals/primers/service-workers/

Ejemplos:
https://github.com/GoogleChrome/samples/tree/gh-pages/push-messaging-and-notifications
– Ver Push API y Notifications using Service Workers
– Firebase Console y Firebase

– https://tests.peter.sh/notification-generator/
– https://serviceworke.rs/push-payload_demo.html

2) How Push Works

Ver si puedo hacer funcionar un ejemplo con la API Key que saqué desde la cuenta de LID.

Introducción a la programación estructurada

Leonardo Vázquez — 2017-10-03T12:25:32Z

Primera parte

– Ver el video de la primer clase: https://www.youtube.com/watch?v=RRuSYMhMcSE
(abstraerse del lenguaje utilizado, y usar en cambio instrucciones equivalentes del lenguaje estructurado que se quiera aprender por ej Javascript).

– Leer el primer módulo de la materia

y hacer los ejercicios de la siguiente manera:

– Es importante siempre comenzar por dibujar el algoritmo correspondiente. Se puede usar esta página https://www.draw.io o dibujarlo con lápiz y papel directamente.

– Anotar en un papel o excel, las variables que participan en el algoritmo para su seguimiento paso por paso e ir actualizando los valores que van tomando.

– Comenzar siempre por el diagrama y la tabla de datos, para luego codificar el mismo en el lenguaje correspondiente.

Generación de contenido multiplataforma (1ra etapa) - Publicador en Twitter

Ariel Leucipo, Leonardo Vázquez — 2016-11-10T19:32:46Z

Generación de contenido multiplataforma (1ra etapa) - Publicador en Twitter

1- En Twitter estamos publicando cada media hora, de manera automática (con un delay de 30 segundos) las nota de esta sección http://www.laizquierdadiario.com/Seccion-Mundo-Obrero

2- Esto lo obtenemos de un feed de este tipo: http://www.laizquierdadiario.com/spip.php?page=ultimos_articulos_ejemplo (ultimos_articulos_ar.html). Es un "bucle" de artículos en SPIP.

3- Este bucle trae los últimos artículos publicados cada media hora y ejecuta mediante un CRON a nivel del servidor cada dicho intervalo.

4- Lo que se ejecuta es un php TWAutoPublic.php que se alimenta de esa entrada. Y usando la librería codebird.php publica en una cuenta de Twitter usando la API y tokens correspondientes en la cuenta https://twitter.com/MapaResistencia de esta manera la cuenta se mantiene actualizada con los artículos publicados en esa sección.

Objetivos:

Buscamos poder generar distintos tipos de tuits en distintas cuentas, de manera segmentada según sus intereses, etc.

El objetivo es mejorar la función para poder configurar n cuentas, agregando fácilmente en el código sus atributos, que incluirán la información necesaria para publicar(claves de acceso o tokens), una URL del feed o alimentación de notas para cada cuenta. Lo importante es que sea sencillo para agregar cuentas. Más adelante en una segunda etapa, esta información para cada cuenta podremos leerla de otro lado como un archivo o una base de datos.

Queremos mejorar la función de manera modular, distribuyendo los comportamientos, de manera que nos permita flexibilidad y reutilización del código. También es importante para nosotros que el código aunque sea sencillo esté lo más claro, ordenado y "autodocumentado" posible, para facilitar su mantenimiento.

Queremos ver también que alternativas podemos utilizar en lugar del delay que estamos usando en php, que lo usamos para no quede como spam. Por ejemplo algún tipo de cola (FIFO) que vayamos alimentando por un lado y consumiendo por el otro, sin que tenga que ser sincrónico el proceso.

Queremos investigar además que otras mejora podemos hacer al respecto, en relación a las publicaciones, por ejemplo mejorar el contenido del tuit a publicar. La información a publicar por cada artículo Twitter la toma de los metatags de cada artículo. Por ejemplo nos falta analizar la posibilidad de agregar Hashtags, agregando un campo

. Lo mismo con los artículos que tienen videos adjuntos, habría que ver como hacemos para generar un tuit con video en esos casos.

Estructura de datos

– ID de la cuenta: "maparesistencia"
– Token de la API - Clave: "9MyLzrtZJmgfUkkz9OK5449F4"
– Token de la API - Valor: "o7k6Tbkx83yx7EReubmUB...."
– Token de la cuenta- Clave: "4847390206-6n29BGGg48u3TOqZazRs3UlllaqkicndBumWtxt"
Token de la cuenta - Valor: "QXoRTuwWIifFSxvHM0b7WyR5Yypsd..."
– URL: "http://www.laizquierdadiario.com/spip.php?page=ultimos_articulos_ar&id_mot=15."

Mejoras pendientes en pts.org.ar

Leonardo Vázquez — 2016-10-21T18:38:00Z

Pedido con los comentarios de cada cosa.

El 12 de diciembre de 2016, 9:21, Elizabeth Yang escribió:

Muy bueno Ale!, mejoró un montón.

Te marco las cosas para ir solucionando:

1 - En "ver números anteriores" de LID impreso aparecen de La Verdad Obrera.
Listo

2 - En las pestañas de portada aparece BLOGS lo sacaría porque no tiene sentido en el sitio PTS quedaría para LID on line. Además hay Blogs de compañeros que ya no militan.
Listo

3 - Habría que avisar a los responsables de regionales para que actualicen en la página del PTS, porque sino quedan notas muy viejas. No sé si desde las regionales lo pueden hacer, o sea si tienen códigos para entrar, etc.
Lo que pensamos hacer en breve es poner los links a las secciones regionales de LID, incluyendo regionales del GBA.

4 - En Sala de Prensa, donde están los celulares de prensa habría que dejar solo los de Buenos Aires o poner todos, sino parece que del resto del país no tenemos. Lo mejor sería poner todos.
En breve: lo que pensamos hacer en breve es poner los links a las secciones regionales de LID, incluyendo regionales del GBA, con lo cual no haría falta mantenimiento de esto.

5 - Las pestañas de arriba de todo, salvo CEIP e IPS, el resto hay que actualizarlas. TV pts, Pan y Rosas, Juventud del PTS, Ceprodh, Internacional. No sé como se haría, si hay que avisar a cada sector. Lo mismo con el buscador que trae cosas viejas.
En breve: Hablo con PyR y con Ceprodh, charlaba con Gloria y Andy de migrar los sitios a wordpress respectivamente (mientras podrían ir a seccion Género o más bien tag Pan y Rosas y Libertades Democráticas respectivamente), deberíamos encargar este trabajo desde ahora. Actualizo IPS por Ediciones IPS, elimino Radio, reemplazo TVPTS por La Izquierda Diario TV, Juventud que lleve a seccion Juventud de LID, el último corriente internacional podría ir a http://laizquierdadiario.com/Red-Internacional

6 - De los columnistas falta Octavio y los de Mendoza.
Habría que definir quienes de Mendoza, conseguir las imágenes como las otras (y toda la demás info de las figuras, no puedo encargarme de esto, debería encargase el responsable de la página). Luego con todo esto deberíamos juntarnos un día para ver como queda, entonces así puedo armarlo para que quede. Pero el mantenimiento es manual como el de los demás columnistas y las demás ubicaciones superiores de la portada.

7 - Hay que actualizar la tapa de Ideas de Izquierda que está la tapa amarilla con Nico. Al entrar linkea bien, a la última con Trump.
Actualicé la de Ideas, pero las tapas, tanto de la Revista como de la Estrategia se actualizan manualmente desde el administrador, sería sólo cuando sale la nueva.

Bueno, por ahora esto, pero desde ya que está mucho mejor, y en general se actualizaría automáticamente.

Se pueden automatizar más bloques, por ejemplo los 3 que están arriba de columnistas, o directamente sacarlos así no queda desactualizado ni requiere tanto mantenimiento. Dos cosas más, la actualización de la portada con las nuevas notas de LID se realiza cuando se le dá "Actualizar" a la página del PTS. Puede darse el caso de notas que estén repetidas, o no queremos que aparezcan, se puede hacer que no aparezcan manualmente desde el administrador. Si me consultan les explico como se hace o lo vemos un día en el IP.

Forwarded message ---------
From: Leonardo Vazquez
Date: mié., 23 may. 2018 a las 22:10
Subject: Re: Fwd: Ale, dos cosas por la página de LID
To: Fernando S
Cc: F Lizarrague , F Lizarrague

Sobre los pedidos de agregar PTS FIT, disculpen las demoras, la salida del Idz, Campus, ataques y problemas de infraestructura, sumadas al resto de las tareas de avances en varios temas, nos tuvo (tiene) con poco tiempo en estos días.

1- Les pasamos una opción para poder implementar en pocos días con la modificación en el menu, agregando la opción PTS-FIT. Esta opción está acompañada de una modificación importante que teníamos pendiente que es que el diario se adapte al ancho completo de los monitores más ancho (para que pueda entrar bien la opción en el menu).
Menu PTS-FIT y LID ancho completo: http://www.laizquierdadiario.com/spip.php?page=sommaire-0.6v3 (por el tema del ancho completo queda pendiente analizar un ajuste en el header)

2- Luego, pasamos dos versiones de logo modificados precariamente para que puedan tener una idea como queda, elegir una variante y encargarla a un diseñador (la diseñadora del diario que no puede, nos pasó el dato de otro diseñador al que le podríamos pedir un presupuesto para la versión que elijamos o pedirle posibles variantes).
LOGO PTS-FIT: http://www.laizquierdadiario.com/spip.php?page=sommaire-0.6v1
LOGO PTS - Frente de Izquierda: http://www.laizquierdadiario.com/spip.php?page=sommaire-0.6v2

3- Sobre las modificaciones en la página del PTS, les comento algunas propuestas:

a- Un tema que habría que encarar de esta página es la renovación de su estructura para que sea apta para celulares(responsive), se puede mantener la estética,colores y tipografía general para no recurrir a un rediseño que es más problemático todavía. Para esta tarea y para otras de diseño web, tenemos una punta muy importante que es el maquetador que hizo LID junto con la diseñadora (ella lo tercerizaba), hablamos con él y nos puede facturar por trabajos, y por la experiencia que tenemos es muy bueno y trabaja muy bien, por lo que le podemos pedir un presupueto de nueva maquetación para pts.org.ar que nos permitiría también evolucionar mejor en los ajustes que haya que seguir haciendo hacia el futuro. En cuanto a la programación y el resto de las tareas que hacen al seguimiento de las páginas, podemos decirle a los dos compañeros de juventud que están tomando tareas de programación por hora en las páginas para que lo tomen.

b- Como temas más inmediatos. Tenemos fotos figuras públicas que están muy mal puestas en el diario, como la de Seligra en la portada y las fotos de las secciones internas de Andy y Godoy que también están muy mal, corresponde que vayan imágenes transparentes que hay que conseguir o ponerse a armar. Desde Jujuy me consultaron para armar también secciones similares de sus figuras públicas, que incluyen Rendición de cuentas, etc. Hay que ponerse a armar estas secciones y capacitar en la carga a los compañeros. Esto sumado a las mejoras más inmediatas, como los criterios para carga automática de notas. Esto habría que ver si hay algún responsable que lo tome y también los compañeros de la juventud podrían volcarse a esto.

Saludos

Introducción al SPIP

Leonardo Vázquez — 2015-07-16T21:33:12Z

Que es SPIP

SPIP es una de las tantas aplicaciones de gestión de contenidos en inglés CMS.

Es un sistema básico de origen francés, especialmente orientado a sistemas de publicaciones, desarrollado en PHP y MySQL, de código abierto y libre y documentación en varios idiomas.

Dentro del administrador y la base de datos, la información se organiza en articulos, secciones o carpetas, palabras claves y autores. Las carpetas pueden tener subcarpetas. Los artículos están dentro de carpetas y pueden tener palabras claves y autores. Las palabras se pueden agrupar en grupos de palabras clave.

De esta manera, el CMS permite organizar la información y realizar consultas muy avanzadas en PHP y MySQL de manera muy sencilla sin requerir conocimientos de programación, abstrayéndose de la complejidad de dichos lenguajes. A su vez tiene un avanzado sistema de cache y generación de miniaturas de imágenes que permite optimizar las consultas a la base de datos y el manejo de imágenes en los sitios.

A su vez, se maneja de manera relativamente separada la vista o diseño de los sitios de la programación del mismo. Esta ventaja permite adaptar cualquier diseño o maqueta en (html, css, js, etc) y hacerlo dinámico, es decir que el contenido del mismo se pueda actualizar fácilmente desde el administrador. Permitiendo articular de manera relativamente independiente las distintas partes de una redacción digital como: "diseño y maquetación", "programación" y "actualización del contenido".

En la siguiente imagen puede verse un esquema del funcionamiento de las distintas tecnologías, donde SPIP simplifica la programación en php y mysql:

¿Cómo funciona?

El sistema, se basa en "esqueletos" o estructuras, en html, que tienen "bucles" y "balizas", que permiten realizar consultas avanzadas sobre la base de datos así como una serie de herramientas orientados a la redacción de un diario.

Esos "bucles", "llenan" de contenido los esqueletos con el contenido de la base de datos (usa una base de datos MySql). Los bucles equivalen a las consultas a una "tabla" de la base de datos, como por ejemplo los artículos. Donde cada artículo es una fila de la tabla y las "balizas" son las columnas o campos de las mismas. A su vez, es conveniente organizar los sitios en pequeños "bloques" (include en php) que permiten modularizar y reutilizar comportamientos, simplificando la organización de sitios complejos. De esta manera, estos conceptos se combinan para organizar toda la información en el sitio.

Partiendo de la aplicación ya instalada. Los "esqueletos" del sitio, son archivos .html, ubicados en una carpeta llamada squelettes. Mediante estos archivos, se pueden modificar maquetas diseñadas en html, css, js haciendo que muestren el contenido que nosotros queramos.

Esqueletos principales (en la carpeta squelettes)

– sommaire.html : Portada (equivalente a index.html)
– article.html : Artículos
– rubrique.html: Sección
– mot.html : Palabra Clave
– auteur.html : Autor

Documentación de consulta

Bucles y balizas
http://www.spip.net/es_article2130.html

Balizas propias
http://www.spip.net/es_article2132.html

Sintaxis de bucles
http://www.spip.net/es_article87.html

Criterios comunes bucles
http://www.spip.net/es_article139.html

Bucle Articulo
http://www.spip.net/es_article116.html

Bucles Mots
http://www.spip.net/es_article145.html

Bucles en bucles
http://www.spip.net/es_article98.html

El sistema de paginación
http://www.spip.net/es_article3446.html

Filtros
http://www.spip.net/es_article149.html

Las variantes de los esqueletos
http://www.spip.net/es_article3644.html

Incluir bloques de código
https://www.spip.net/es_article147.html