WikiLIDs http://wiki.backendlid.com.ar/ es SPIP - www.spip.net Google AMP - Accelerated Mobile Pages https://wiki.backendlid.com.ar/spip.php?page=article&id_article=212 https://wiki.backendlid.com.ar/spip.php?page=article&id_article=212 2018-04-25T17:21:14Z text/html es Keila <p>Google AMP es una plataforma abocada a que los sitios puedan optimizar el rendimiento de sus páginas en versión Mobile, siendo una una alternativa a los contenidos nativos.</p> - <a href="https://wiki.backendlid.com.ar/spip.php?page=rubrique&id_rubrique=11" rel="directory">Programación y diseño</a> <div class='rss_texte'><p>Avances</p> <p>HTML Estatico</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><!doctype html> <html > <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>La izquierda diario amp version1</title> <link rel="canonical" href="hola-mundo.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> </head> <body> <h1>¡La Izquierda Diario!</h1> <amp-story-page id="amp-img"> <amp-story-grid-layer template="fill"> <amp-img src="http://notasdejl.com/wp-content/uploads/2016/09/La-izquierda-diario-577x445.png" grid-area="middle-third" width="400" height="350" layout="responsive"></amp-img> </amp-story-grid-layer> <amp-story-grid-layer template="thirds"> <h1 grid-area="upper-third">amp-img</h1> </amp-story-grid-layer> </amp-story-page> </body> </html></code></pre></div> <p>1- Volver a genera archivo html estático</p> <p>2- Se creó archivo pruebaAMP.html con un bucle</p> <p>3- Ir reemplazando y completando el contenido del artículo.</p> <p>4- Ver como está hecho gacetilla.html. Fijate que recibe como parámetro el id_article: <a href="http://www.laizquierdadiario.com/spip.php?page=gacetilla-articulo&id_article=102659" class="spip_url spip_out auto" rel="nofollow external">http://www.laizquierdadiario.com/spip.php?page=gacetilla-articulo&id_article=102659</a></p> <p>5- De la misma manera reemplazar el bucle para que reciba como parámetro el id_article.<br class='autobr' /> De esta manera (): <br class='autobr' /> <code class='spip_code spip_code_inline' dir='ltr'><BOUCLE_articulo(ARTICLES){id_article}></code><br class='autobr' /> Y al llamarse se llama así:<br class='autobr' /> <a href="http://www.laizquierdadiario.com/spip.php?page=pruebaAMP&id_article=102659" class="spip_url spip_out auto" rel="nofollow external">http://www.laizquierdadiario.com/spip.php?page=pruebaAMP&id_article=102659</a></p> <p>Ultima version al 11/05.</p> <p>El código hasta ahora, muestra cualquier<br class='autobr' /> articulo, sin estilos, muestra la foto en tamaño reducido para que se<br class='autobr' /> vea bien en el celular, y linkea los nombres de los autores a sus<br class='autobr' /> perfiles.<br class='autobr' /> Según las pruebas realizadas abre aproximadamente 3 veces mas rápido<br class='autobr' /> los artículos y por ahora muestra solo el logo principal. Con<br class='autobr' /> velocidad 4G una noticia de LID la puedo abrir en 9/10 seg y la<br class='autobr' /> versión de AMP se abre en tan solo 3.<br class='autobr' /> Falta desarrollar una parte del codigo para que si son varias fotos<br class='autobr' /> las muestre todas como hace la gacetilla. Con agregarle estilos y<br class='autobr' /> algunos inclure(entiendo x lo que vi en la gacetilla), ya quedaria de<br class='autobr' /> forma muy similar a cuando un articulo se muestra por gacetilla.<br class='autobr' /> Ya que no existe una dirección url fija para cada vez que se accede a<br class='autobr' /> la versión gacetilla(intente buscar via google para comprobar.. y no encontré nada),<br class='autobr' /> hacer esta versión de pruebaAMP es un avance, pero no nos<br class='autobr' /> sirve aun para implementar. Ya que de esta forma el buscador de google<br class='autobr' /> no lo encontraría, ni se podría acceder a la versión amp desde<br class='autobr' /> cualquier link que cualquier usuario comparte, o que aparezca linkeado<br class='autobr' /> en LID.</p> <p>Entiendo que habría que modificar una serie de esqueletos que son los<br class='autobr' /> que arman los artículos para ver como continuar trabajando sobre<br class='autobr' /> gAMP(no hago propuesta concreta sobre esto porque hay cosas que no<br class='autobr' /> entiendo como funcionan). Pensar si hacer que todos los artículos<br class='autobr' /> puedan ser AMP o si solo los que aparezcan en la portada o los mas<br class='autobr' /> visitados.</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><!doctype html> <html> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>LID esta probando amp..</title> <link rel="canonical" href="hola-mundo.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> </head> <body> <BOUCLE_amp(ARTICLES){id_article}> <ul> <li> <p>#SURTITRE</p> <h1><p>#TITRE</p></h1> <p>#CHAPO</p> <BOUCLE_auteurs(AUTEURS){id_article}{" "}> <a href= #URL_AUTEUR <p>#NOM</p> </a> </BOUCLE_auteurs> [(#LOGO_ARTICLE|image_reduire{300,300})] <p>#TEXTE</p> </li> </ul> </BOUCLE_amp> </body> </html> </code></pre></div><h2 class="spip">REFERENCIAS</h2> <p>Excelente y detallada explicación del equipo de Google AMP, con todas las ventajas de usar esta plataforma. 7 min, en Ingles. Muy completo.<br class='autobr' /> <a href="https://www.youtube.com/watch?v=lBTCB7yLs8Y" class="spip_url spip_out auto" rel="nofollow external">https://www.youtube.com/watch?v=lBTCB7yLs8Y</a></p> <p>Explicacion larga, desde cero y en español. <br class='autobr' /> <a href="https://www.youtube.com/watch?v=Dtyzfot04VA" class="spip_url spip_out auto" rel="nofollow external">https://www.youtube.com/watch?v=Dtyzfot04VA</a></p> <p><strong>Detalla la estructura de AMP y sus funciones. (en inglés)</strong><br class='autobr' /> <a href="https://www.youtube.com/watch?v=bAFfuAXzYmU" class="spip_url spip_out auto" rel="nofollow external">https://www.youtube.com/watch?v=bAFfuAXzYmU</a></p> <p><strong>Páginas para especificar:</strong> <br /><span class="spip-puce ltr"><b>–</b></span> <a href="https://www.ampproject.org/es" class="spip_url spip_out auto" rel="nofollow external">https://www.ampproject.org/es</a> <br /><span class="spip-puce ltr"><b>–</b></span> <a href="https://developers.google.com/amp" class="spip_url spip_out auto" rel="nofollow external">https://developers.google.com/amp</a></p> <p><strong><br class='autobr' /> Etiquetas de html en AMP para desarrollar codigo</strong><br class='autobr' /> <a href="https://ampbyexample.com/" class="spip_url spip_out auto" rel="nofollow external">https://ampbyexample.com/</a></p> <p><strong>SPIP + AMP</strong><br class='autobr' /> Foros donde programadores han intentado combinar ambos lenguajes, pero ninguno desarrollo algo muy avanzado.</p> <p><a href="https://forum.spip.net/fr_264038.html" class="spip_url spip_out auto" rel="nofollow external">https://forum.spip.net/fr_264038.html</a><br class='autobr' /> <a href="https://contrib.spip.net/AMP-pour-SPIP-Accelerated-Mobile-Pages" class="spip_url spip_out auto" rel="nofollow external">https://contrib.spip.net/AMP-pour-SPIP-Accelerated-Mobile-Pages</a></p> <p><strong>Explicación breve: ¿Qué es Google AMP?</strong><br class='autobr' /> <a href="https://www.youtube.com/watch?v=rzxPZUJX9vE" class="spip_out" rel="external">https://www.youtube.com/watch?v=rzxPZUJX9vE</a></p> <p><strong>¿Cómo funciona G. AMP? Con ejemplos. (en inglés)</strong><br class='autobr' /> <a href="https://www.youtube.com/watch?v=XCyFgt57ouE" class="spip_url spip_out auto" rel="nofollow external">https://www.youtube.com/watch?v=XCyFgt57ouE</a></p> <p><strong>Ventajas de AMP (en inglés)</strong><br class='autobr' /> <a href="https://www.youtube.com/watch?v=hC2e9KtMPKg" class="spip_url spip_out auto" rel="nofollow external">https://www.youtube.com/watch?v=hC2e9KtMPKg</a></p> <p>Otras paginas para chusmear si tenes tiempo:</p> <ul class="spip" role="list"><li> <a href="https://neilpatel.com/blog/the-definitive-guide-to-accelerated-mobile-pages-amp" class="spip_url spip_out auto" rel="nofollow external">https://neilpatel.com/blog/the-definitive-guide-to-accelerated-mobile-pages-amp</a></li><li> <a href="https://www.somoswaka.com/blog/2017/05/que-es-amp-project-de-google" class="spip_url spip_out auto" rel="nofollow external">https://www.somoswaka.com/blog/2017/05/que-es-amp-project-de-google</a></li><li> <a href="https://www.somoswaka.com/blog/2017/05/que-es-amp-project-de-google" class="spip_url spip_out auto" rel="nofollow external">https://www.somoswaka.com/blog/2017/05/que-es-amp-project-de-google</a></li><li> <a href="https://www.web-media.com.ar/nuestro-blog/actualidad/que-es-amp-de-google-y-como-funciona.html" class="spip_url spip_out auto" rel="nofollow external">https://www.web-media.com.ar/nuestro-blog/actualidad/que-es-amp-de-google-y-como-funciona.html</a></li><li> <a href="https://es.wikipedia.org/wiki/Accelerated_Mobile_Pages" class="spip_url spip_out auto" rel="nofollow external">https://es.wikipedia.org/wiki/Accelerated_Mobile_Pages</a></li><li> <a href="https://blogginzenith.zenithmedia.es/google-amp-diczionario" class="spip_url spip_out auto" rel="nofollow external">https://blogginzenith.zenithmedia.es/google-amp-diczionario</a></li><li> <a href="https://searchengineland.com/amp-stories-new-accelerated-mobile-pages-format-google-291907" class="spip_url spip_out auto" rel="nofollow external">https://searchengineland.com/amp-stories-new-accelerated-mobile-pages-format-google-291907</a></li></ul></div> Forms en HTML y BOOTSTRAP https://wiki.backendlid.com.ar/spip.php?page=article&id_article=204 https://wiki.backendlid.com.ar/spip.php?page=article&id_article=204 2018-02-09T15:30:00Z text/html es Keila <p>Tutoriales con ejercicios <br class='autobr' /> Elementos del formulario en HTML y sus valores https://www.w3schools.com/html/html_form_elements.asp <br class='autobr' /> Formularios de HTML, sus elementos y sus atributos https://www.w3schools.com/html/html_forms.asp <br class='autobr' /> Diferentes tipos de entrada para el elemento <input> en HTML https://www.w3schools.com/html/html_form_input_types.asp <br class='autobr' /> Diferentes atributos de entrada en HTML https://www.w3schools.com/html/html_form_attributes.asp <br class='autobr' /> Diferentes entradas de Forms en Bootstrap (…)</p> - <a href="https://wiki.backendlid.com.ar/spip.php?page=rubrique&id_rubrique=11" rel="directory">Programación y diseño</a> <div class='rss_texte'><h2 class="spip">Tutoriales con ejercicios</h2> <p>Elementos del formulario en HTML y sus valores<br class='manualbr' /><a href="https://www.w3schools.com/html/html_form_elements.asp" class="spip_url spip_out auto" rel="nofollow external">https://www.w3schools.com/html/html_form_elements.asp</a></p> <p>Formularios de HTML, sus elementos y sus atributos<br class='manualbr' /><a href="https://www.w3schools.com/html/html_forms.asp" class="spip_url spip_out auto" rel="nofollow external">https://www.w3schools.com/html/html_forms.asp</a></p> <p>Diferentes tipos de entrada para el elemento <code class='spip_code spip_code_inline' dir='ltr'><input></code> en HTML<br class='manualbr' /><a href="https://www.w3schools.com/html/html_form_input_types.asp" class="spip_url spip_out auto" rel="nofollow external">https://www.w3schools.com/html/html_form_input_types.asp</a></p> <p>Diferentes atributos de entrada en HTML<br class='manualbr' /><a href="https://www.w3schools.com/html/html_form_attributes.asp" class="spip_url spip_out auto" rel="nofollow external">https://www.w3schools.com/html/html_form_attributes.asp</a></p> <p>Diferentes entradas de Forms en Bootstrap<br class='manualbr' /><a href="https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp" class="spip_url spip_out auto" rel="nofollow external">https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp</a></p> <p>Distintos tamaños que tienen las entradas de Bootstrap<br class='manualbr' /><a href="https://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp" class="spip_url spip_out auto" rel="nofollow external">https://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp</a></p> <p>El siguiente link explica el uso del atributo <code class='spip_code spip_code_inline' dir='ltr'><select></code> para un formulario en HTML que realiza una acción al seleccionar una opción<br class='manualbr' /><a href="https://www.w3schools.com/tags/att_select_form.asp" class="spip_url spip_out auto" rel="nofollow external">https://www.w3schools.com/tags/att_select_form.asp</a></p></div> Modal en Bootstrap https://wiki.backendlid.com.ar/spip.php?page=article&id_article=202 https://wiki.backendlid.com.ar/spip.php?page=article&id_article=202 2017-12-28T21:58:11Z text/html es Keila <p>Documentación sobre el uso de las ventanas Modal en Bootstrap</p> - <a href="https://wiki.backendlid.com.ar/spip.php?page=rubrique&id_rubrique=11" rel="directory">Programación y diseño</a> <div class='rss_texte'><p><strong>Complemento Modal Bootstrap</strong><br class='autobr' /> El siguiente link explica como crear un modal básico y cómo modificar su tamaño.<br class='autobr' /> <a href="https://www.w3schools.com/bootstrap/bootstrap_modal.asp" class="spip_url spip_out" rel="external">https://www.w3schools.com/bootstrap...</a></p> <p><strong>Bootstrap JS Modal</strong><br class='autobr' /> El siguiente link indica como configurar Modal en Bootstrap con JS utilizando distintos tipos de complementos de Modal.<br class='autobr' /> <a href="https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp" class="spip_url spip_out" rel="external">https://www.w3schools.com/bootstrap...</a></p> <p><strong>Métodos modales</strong><br class='autobr' /> El siguiente nos permite practicarla creación y modificación de un modal online.<br class='autobr' /> <a href="https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show_hide&stacked=h" class="spip_url spip_out" rel="external">https://www.w3schools.com/bootstrap...</a></p> <p><strong>Encabezado modal</strong><br class='autobr' /> El siguiente link nos muestra como funciona el encabezado de un Modal online.<br class='autobr' /> <a href="https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_event_show&stacked=h" class="spip_url spip_out" rel="external">https://www.w3schools.com/bootstrap...</a></p> <p><strong>Mostrando Bootstrap modal después de un retraso [duplicado]</strong><br class='autobr' /> El siguiente link nos muestra cómo se puede mostrar un modal Bootstrap después de determinado tiempo sin activar el modal mediante un botón.<br class='autobr' /> <a href="https://stackoverflow.com/questions/27394729/showing-bootstrap-modal-after-a-delay" class="spip_url spip_out" rel="external">https://stackoverflow.com/questions...</a></p></div> Ejercicios de SPIP https://wiki.backendlid.com.ar/spip.php?page=article&id_article=195 https://wiki.backendlid.com.ar/spip.php?page=article&id_article=195 2017-10-25T19:47:53Z text/html es Iván, Keila, Leonardo Vázquez Programación LID Argentina SPIP <p>– 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 (…)</p> - <a href="https://wiki.backendlid.com.ar/spip.php?page=rubrique&id_rubrique=11" rel="directory">Programación y diseño</a> / <a href="https://wiki.backendlid.com.ar/spip.php?page=mot&id_mot=3" rel="tag">Programación</a>, <a href="https://wiki.backendlid.com.ar/spip.php?page=mot&id_mot=8" rel="tag">LID Argentina</a>, <a href="https://wiki.backendlid.com.ar/spip.php?page=mot&id_mot=13" rel="tag">SPIP</a> <div class='rss_texte'><p><span class="spip-puce ltr"><b>–</b></span> Para hacer los ejercicios, probar desde el esqueleto para pruebas /squelettes/ejercicios.html que se prueba: ... /spip.php?page=ejercicios</p> <p><span class="spip-puce ltr"><b>–</b></span> Tomar como referencia, los links del manual SPIP del siguiente artículo <a href="http://wiki.backendlid.com.ar/spip.php?page=article&id_article=3" class="spip_url spip_out auto" rel="nofollow external">http://wiki.backendlid.com.ar/spip.php?page=article&id_article=3</a> y seguir buscando en caso de ser necesario.</p> <p><span class="spip-puce ltr"><b>–</b></span> Para cada prueba eliminar del archivo las consultas anteriores así ejecutamos una sóla por vez.</p> <p><span class="spip-puce ltr"><b>–</b></span> IMPORTANTE: LIMITAR SIEMPRE LOS RESULTADOS DE LOS BUCLES PARA QUE NO EJECUTE CONSULTAS DEMASIADO GRANDES.</p> <p><span class="spip-puce ltr"><b>–</b></span> 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<br class='autobr' /> Grupos de palabras claves".</p> <p><span class="spip-puce ltr"><b>–</b></span> 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.</p> <p><strong>Ejemplo: Listar las primeras 3 notas de política.</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><BOUCLE_ejemplo(ARTICLES){id_mot=12}{0,3}> - #TITRE</br> </BOUCLE_ejemplo></code></pre></div> <p><strong>Ejercicio 1: Listar las últimas 3 notas de género.</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><BOUCLE_ejemplo1(ARTICLES){id_mot=17}{par date}{inverse}{0,3}> - #TITRE</br> </BOUCLE_ejemplo1></code></pre></div> <p>Tener en cuenta que en el caso de tener la misma fecha, ordena por hora.</p> <p><strong>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.</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><BOUCLE_ejemplo2(ARTICLES){id_rubrique=5442}{par date}{inverse}{0,3}> <p><a href="#URL_ARTICLE" target="_blank">#TITRE</a></p> </BOUCLE_ejemplo2></code></pre></div> <p><strong>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.</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div> <p><strong>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.</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><B_ejemplo4> <ul> <BOUCLE_ejemplo4(ARTICLES){id_rubrique=5442}{id_mot IN 12,9627}{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_ejemplo4> </ul> </B_ejemplo4></code></pre></div> <p><span class="spip-puce ltr"><b>–</b></span> 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:</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><B_n> ... <BOUCLE_n(TYPE){id_rubrique=x}{id_mot=x}> ... </BOUCLE_n> ... </B_n></code></pre></div> <p>Luego indicarle que traiga artículos de una carpeta inexistente, y así vamos a poder ver que el BOUCLE no traerá nada. Ver <a href="https://www.spip.net/es_article87.html" class="spip_out" rel="external">sintaxis completade los bucles</a></strong>.</p> <p><strong>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.</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div> <p><strong>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).</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div> <p><strong>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).</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div> <p><strong>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).</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div> <p><strong>Ejercicio 9: Listar las 5 notas más "populares" de Género y Sexualidades.</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div> <p><strong>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).</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div> <p><strong>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.</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div> <p><strong>Ejercicio 12: Partiendo del bucle anterior probar y armar un ejemplo con los filtros del logo que se muestran en el ejemplo <a href="https://www.spip.net/es_article4861.html" class="spip_url spip_out auto" rel="nofollow external">https://www.spip.net/es_article4861.html</a></strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div> <p><strong>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.</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div> <p>Para probar si muestra con coma, cambiar id_mot por 16(sección Juventud) que se suelen escribir notas de a dos.</p> <p><strong>Ejercicio 14: Al bucle anterior en el bucle de los autores agregar que se muestren nombre del autor, descripción e imagen principal.</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div> <p><strong>Ejercicio 15: Al bucle anterior, mostrar las imágenes adjuntas del artículo si tiene galería, generando miniaturas de un ancho de 300px.</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div> <p><strong>Ejercicio 16: Partiendo del ejercicio anterior, mostrar las imágenes en forma circular usando bootstrap como este ejemplo <a href="https://www.w3schools.com/bootstrap/bootstrap_images.asp" class="spip_url spip_out auto" rel="nofollow external">https://www.w3schools.com/bootstrap/bootstrap_images.asp</a>.</strong></p> <p><strong>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 <a href="https://www.spip.net/es_article147.html" class="spip_out" rel="external">bloques de código con INCLURE</a></strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><!DOCTYPE HTML> <html> <head></head> <body> <INCLURE{fond=ejercicios_sub1}> <INCLURE{fond=ejercicios_sub2}> </body> </html></code></pre></div><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><html> <head></head> <body> <h1> Ejercicio 17 </h1> </body> </html></code></pre></div><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div> <p><strong>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.</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><!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></code></pre></div><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><html> <head></head> <body> <h1>Ejercicio 18</h1> </body> </html></code></pre></div><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div> <p><strong>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.</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><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></code></pre></div></div> PWA: Notificaciones push https://wiki.backendlid.com.ar/spip.php?page=article&id_article=193 https://wiki.backendlid.com.ar/spip.php?page=article&id_article=193 2017-10-06T21:07:19Z text/html es Leonardo Vázquez Programación LID Argentina Javascript <p>Desarrollo: https://www.laizquierdadiario.com/push/app/ <br class='autobr' /> 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/ <br class='autobr' /> 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/ <br class='autobr' /> Seguir con la siguiente (…)</p> - <a href="https://wiki.backendlid.com.ar/spip.php?page=rubrique&id_rubrique=11" rel="directory">Programación y diseño</a> / <a href="https://wiki.backendlid.com.ar/spip.php?page=mot&id_mot=3" rel="tag">Programación</a>, <a href="https://wiki.backendlid.com.ar/spip.php?page=mot&id_mot=8" rel="tag">LID Argentina</a>, <a href="https://wiki.backendlid.com.ar/spip.php?page=mot&id_mot=21" rel="tag">Javascript</a> <div class='rss_texte'><p>Desarrollo:<br class='autobr' /> <a href="https://www.laizquierdadiario.com/push/app/" class="spip_url spip_out auto" rel="nofollow external">https://www.laizquierdadiario.com/push/app/</a></p> <p>Tutorial en castellano: <a href="https://developers.google.com/web/fundamentals/codelabs/push-notifications/" class="spip_url spip_out auto" rel="nofollow external">https://developers.google.com/web/fundamentals/codelabs/push-notifications/</a><br class='autobr' /> Tiene el link para enviar notificaciones push desactualizado que no funciona: <a href="https://web-push-codelab.appspot.com/" class="spip_url spip_out auto" rel="nofollow external">https://web-push-codelab.appspot.com/</a></p> <p>La nueva versión del tutorial en inglés: <a href="https://codelabs.developers.google.com/codelabs/push-notifications" class="spip_url spip_out auto" rel="nofollow external">https://codelabs.developers.google.com/codelabs/push-notifications</a><br class='autobr' /> Tiene nuevo link para enviar notificaciones: <a href="https://web-push-codelab.glitch.me/" class="spip_url spip_out auto" rel="nofollow external">https://web-push-codelab.glitch.me/</a></p> <p>Seguir con la siguiente documentación:<br class='autobr' /> <a href="https://developers.google.com/web/fundamentals/push-notifications/" class="spip_url spip_out auto" rel="nofollow external">https://developers.google.com/web/fundamentals/push-notifications/</a></p> <hr class="spip" /><h2 class="spip">Segunda parte</h2> <p><strong>1) Web Push Notifications: Timely, Relevant, and Precise</strong></p> <p>Qué es un service worker<br class='autobr' /> <a href="https://developers.google.com/web/fundamentals/primers/service-workers/" class="spip_url spip_out auto" rel="nofollow external">https://developers.google.com/web/fundamentals/primers/service-workers/</a></p> <p>Ejemplos:<br class='autobr' /> <a href="https://github.com/GoogleChrome/samples/tree/gh-pages/push-messaging-and-notifications" class="spip_url spip_out auto" rel="nofollow external">https://github.com/GoogleChrome/samples/tree/gh-pages/push-messaging-and-notifications</a> <br /><span class="spip-puce ltr"><b>–</b></span> Ver <a href="https://www.chromestatus.com/feature/5416033485586432" class="spip_out" rel="external">Push API</a> y <a href="https://www.chromestatus.com/feature/5480344312610816" class="spip_out" rel="external">Notifications using Service Workers</a> <br /><span class="spip-puce ltr"><b>–</b></span> <a href="https://console.firebase.google.com/?pli=1" class="spip_out" rel="external">Firebase Console</a> y <a href="https://firebase.google.com/?hl=es-419" class="spip_out" rel="external">Firebase</a></p> <p><span class="spip-puce ltr"><b>–</b></span> <a href="https://tests.peter.sh/notification-generator/" class="spip_url spip_out auto" rel="nofollow external">https://tests.peter.sh/notification-generator/</a> <br /><span class="spip-puce ltr"><b>–</b></span> <a href="https://serviceworke.rs/push-payload_demo.html" class="spip_url spip_out auto" rel="nofollow external">https://serviceworke.rs/push-payload_demo.html</a></p> <p><strong>2) How Push Works</strong></p> <p>Ver si puedo hacer funcionar un ejemplo con la API Key que saqué desde la cuenta de LID.</p></div> Introducción a la programación estructurada https://wiki.backendlid.com.ar/spip.php?page=article&id_article=192 https://wiki.backendlid.com.ar/spip.php?page=article&id_article=192 2017-10-03T12:25:32Z text/html es Leonardo Vázquez Programación <p>Primera parte <br class='autobr' /> – Ver el video de la primer clase: https://www.youtube.com/watch?v=RRuSYMhMcSE <br class='autobr' /> (abstraerse del lenguaje utilizado, y usar en cambio instrucciones equivalentes del lenguaje estructurado que se quiera aprender por ej Javascript). <br class='autobr' /> – Leer el primer módulo de la materia y hacer los ejercicios de la siguiente manera: <br class='autobr' /> – 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 (…)</p> - <a href="https://wiki.backendlid.com.ar/spip.php?page=rubrique&id_rubrique=11" rel="directory">Programación y diseño</a> / <a href="https://wiki.backendlid.com.ar/spip.php?page=mot&id_mot=3" rel="tag">Programación</a> <div class='rss_texte'><h2 class="spip">Primera parte</h2> <p><span class="spip-puce ltr"><b>–</b></span> Ver el video de la primer clase: <a href="https://www.youtube.com/watch?v=RRuSYMhMcSE" class="spip_url spip_out auto" rel="nofollow external">https://www.youtube.com/watch?v=RRuSYMhMcSE</a><br class='autobr' /> (abstraerse del lenguaje utilizado, y usar en cambio instrucciones equivalentes del lenguaje estructurado que se quiera aprender por ej Javascript).</p> <p><span class="spip-puce ltr"><b>–</b></span> Leer el primer módulo de la materia</p> <dl class='spip_document_204 spip_documents spip_documents_center'> <dt><a href='https://wiki.backendlid.com.ar/IMG/doc/modulo_1_guia_teorico-practica.doc' title='Word - 617 kio' type="application/msword"><img src='https://wiki.backendlid.com.ar/local/cache-vignettes/L64xH64/doc-d03fe.svg?1782435100' width='64' height='64' alt='' /></a></dt> </dl> <p>y hacer los ejercicios de la siguiente manera:</p> <p><span class="spip-puce ltr"><b>–</b></span> Es importante siempre comenzar por dibujar el algoritmo correspondiente. Se puede usar esta página <a href="https://www.draw.io" class="spip_url spip_out auto" rel="nofollow external">https://www.draw.io</a> o dibujarlo con lápiz y papel directamente.</p> <p><span class="spip-puce ltr"><b>–</b></span> 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.</p> <p><span class="spip-puce ltr"><b>–</b></span> Comenzar siempre por el diagrama y la tabla de datos, para luego codificar el mismo en el lenguaje correspondiente.</p></div> Agregar Instant Articles https://wiki.backendlid.com.ar/spip.php?page=article&id_article=190 https://wiki.backendlid.com.ar/spip.php?page=article&id_article=190 2017-08-18T21:43:07Z text/html es Leonardo Vázquez <p>Ver un par de videos que expliquen que son los Instant Articles <br class='autobr' /> XML: https://www.w3schools.com/xml/default.asp <br class='autobr' /> XML Web Services: https://www.w3schools.com/xml/xml_services.asp <br class='autobr' /> XML RSS: https://www.w3schools.com/xml/xml_rss.asp <br class='autobr' /> RSSs de LID: http://www.laizquierdadiario.com/RSS <br class='autobr' /> RSS Portada: http://www.laizquierdadiario.com/spip.php?page=backend_portada > backend_portada.html <br class='autobr' /> RSS Género y Sex: http://www.laizquierdadiario.com/spip.php?page=backend&id_mot=17 > backend.html (…)</p> - <a href="https://wiki.backendlid.com.ar/spip.php?page=rubrique&id_rubrique=11" rel="directory">Programación y diseño</a> <div class='rss_texte'><p>Ver un par de videos que expliquen que son los Instant Articles</p> <p>XML:<br class='autobr' /> <a href="https://www.w3schools.com/xml/default.asp" class="spip_url spip_out auto" rel="nofollow external">https://www.w3schools.com/xml/default.asp</a></p> <p>XML Web Services:<br class='autobr' /> <a href="https://www.w3schools.com/xml/xml_services.asp" class="spip_url spip_out auto" rel="nofollow external">https://www.w3schools.com/xml/xml_services.asp</a></p> <p>XML RSS:<br class='autobr' /> <a href="https://www.w3schools.com/xml/xml_rss.asp" class="spip_url spip_out auto" rel="nofollow external">https://www.w3schools.com/xml/xml_rss.asp</a></p> <p>RSSs de LID:<br class='autobr' /> <a href="http://www.laizquierdadiario.com/RSS" class="spip_url spip_out auto" rel="nofollow external">http://www.laizquierdadiario.com/RSS</a></p> <p>RSS Portada:<br class='autobr' /> <a href="http://www.laizquierdadiario.com/spip.php?page=backend_portada" class="spip_url spip_out auto" rel="nofollow external">http://www.laizquierdadiario.com/spip.php?page=backend_portada</a></p> <p><span class="spip-puce ltr"><b>–</b></span> > backend_portada.html</p> <p>RSS Género y Sex:<br class='autobr' /> <a href="http://www.laizquierdadiario.com/spip.php?page=backend&id_mot=17" class="spip_url spip_out auto" rel="nofollow external">http://www.laizquierdadiario.com/spip.php?page=backend&id_mot=17</a></p> <p><span class="spip-puce ltr"><b>–</b></span> > backend.html</p> <p>Ejemplo de backend.html</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#HTTP_HEADER{Content-type: text/xml[; charset=(#CHARSET)]})] <?xml version="1.0"[ encoding="(#CHARSET)"]?> <rss version="2.0" [(#REM) rss 2.0.9)] xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"> <channel[ xml:lang="(#LANG)"]> <title>[(#NOM_SITE_SPIP|textebrut|texte_backend)]</title> <link>#URL_SITE_SPIP/</link> <description>[(#DESCRIPTIF_SITE_SPIP|supprimer_tags|texte_backend)]</description> <language>#LANG</language><generator>SPIP - www.spip.net</generator> [<image> <title>[(#NOM_SITE_SPIP|texte_backend)]</title> <url>(#LOGO_SITE_SPIP|image_reduire{144,400}|extraire_attribut{src}|url_absolue|texte_backend)</url> <link>#URL_SITE_SPIP/</link> [<height>(#LOGO_SITE_SPIP|image_reduire{144,400}|extraire_attribut{height})</height>] [<width>(#LOGO_SITE_SPIP|image_reduire{144,400}|extraire_attribut{width})</width>] </image>] <BOUCLE_recents(ARTICLES){id_rubrique !IN 133,1201,1101,1714,1252,2653,3508,5443,5482,5442,5481,5441,5483}{lang ?}{branche ?}{id_mot ?}{id_auteur ?}{par date}{inverse}{age<5}{0,30}> <INCLURE{fond=inc-rss-item, id_article}/> </BOUCLE_recents> </channel> </rss></code></pre></div> <p>En el bucle usa: inc-rss-item.html por cada artículo.</p> <p>Esto muestra la información de cada artículo en formato XML para RSS.</p> <p><strong>Facebook usa otra variante no estándar de RSS</strong></p> <p>Documentación de Facebook para desarrolladores:<br class='autobr' /> <a href="https://developers.facebook.com/docs/instant-articles" class="spip_url spip_out auto" rel="nofollow external">https://developers.facebook.com/docs/instant-articles</a></p> <p>RSS para Instant Articles de México:<br class='autobr' /> <a href="http://www.laizquierdadiario.mx/spip.php?page=backend_fb_mx" class="spip_url spip_out auto" rel="nofollow external">http://www.laizquierdadiario.mx/spip.php?page=backend_fb_mx</a></p> <p><span class="spip-puce ltr"><b>–</b></span> > backend_fb_mx.html -> inc-rss-item-fb-1714.html</p> <p>RSS para Instant Articles de Argentina:<br class='autobr' /> <a href="http://www.laizquierdadiario.mx/spip.php?page=backend_fb_ar" class="spip_url spip_out auto" rel="nofollow external">http://www.laizquierdadiario.mx/spip.php?page=backend_fb_ar</a></p> <p><span class="spip-puce ltr"><b>–</b></span> > backend_fb_ar.html -> inc-rss-item-fb.html</p> <p>Ver y analizar estos dos últimos esqueletos</p> <hr> <p>Lo que hay que hacer es implementar un esqueleto similar para Brasil (tomar el de Argentina como referencia).</p> <p>En Brasil existe RSS:<br class='autobr' /> <a href="http://www.esquerdadiario.com.br/spip.php?page=backend" class="spip_url spip_out auto" rel="nofollow external">http://www.esquerdadiario.com.br/spip.php?page=backend</a></p> <p>Pero este esqueleto no sirve para Facebook Instant Articles, por lo que hay que usar el mismo esqueleto de Argentina, pero con los datos de Brasil.</p></div> Columnistas vertical https://wiki.backendlid.com.ar/spip.php?page=article&id_article=178 https://wiki.backendlid.com.ar/spip.php?page=article&id_article=178 2017-06-20T12:04:09Z text/html es María Renci <p>Se incorpora un bloque "columnistas verticales", para incorporar el mismo, primero lo trabajas en un sommaire2, por lo tanto este es el primer paso a realizar. <br class='autobr' /> Las maquetas están en: www.laizquierdadiario.com/entregas/2016-columnistas-verticales <br class='autobr' /> Ya fueron incorporados todos los link, scrips, estilos y funciones que hacen a este bloque. <br class='autobr' /> Lo que tenés que hacer es agregar el bloque en el html (sommaire2) de la siguiente manera : <br class='autobr' /> En index.php buscar el siguiente bloque y agregarlo en el (…)</p> - <a href="https://wiki.backendlid.com.ar/spip.php?page=rubrique&id_rubrique=11" rel="directory">Programación y diseño</a> <div class='rss_texte'><p>Se incorpora un bloque <a href="http://www.laizquierdadiario.com/entregas/2016-columnistas-verticales/index.php" class="spip_out" rel="external">"columnistas verticales"</a>, para incorporar el mismo, primero lo trabajas en un sommaire2, por lo tanto este es el primer paso a realizar.</p> <p>Las maquetas están en: <a href="http://www.laizquierdadiario.com/entregas/2016-columnistas-verticales" class="spip_url spip_out auto" rel="nofollow external">www.laizquierdadiario.com/entregas/2016-columnistas-verticales</a></p> <p>Ya fueron incorporados todos los link, scrips, estilos y funciones que hacen a este bloque.</p> <p>Lo que tenés que hacer es agregar el bloque en el html (sommaire2) de la siguiente manera :</p> <p>En index.php buscar el siguiente bloque y agregarlo en el bloque correspondiente (está identificado con comentarios):</p> <p><span class='spip_document_168 spip_documents spip_documents_center'> <img src='https://wiki.backendlid.com.ar/local/cache-vignettes/L500xH244/index-a8240.jpg?1782435219' width='500' height='244' alt="" /></span></p> <p>Ya existe el archivo: <strong>2016_mod_noticias_columnistas_verticales.html</strong><br class='autobr' /> Donde copiamos el html de la maquet, hay que probar que funcione y reemplazar los links de las imágenes por los paths absolutos.</p> <p>Primer copias el código html, tal cual está en la maqueta, y debería mostrar los mismo que en la maqueta.</p> <p>Y agregar en sommaire2.html:</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><INCLURE{fond=2016_mod_noticias_columnistas_verticales}{id_mot=9611}></code></pre></div> <p>Para ver los cambios: <a href="http://www.laizquierdadiario.com/spip.php?page=sommaire2" class="spip_url spip_out auto" rel="nofollow external">http://www.laizquierdadiario.com/spip.php?page=sommaire2</a></p> <p>El bloque será similar al de columnistas y usará la palabra clave:<br class='autobr' /> <a href="http://www.laizquierdadiario.com/ecrire/?exec=mot&id_mot=9611" class="spip_url spip_out auto" rel="nofollow external">http://www.laizquierdadiario.com/ecrire/?exec=mot&id_mot=9611</a></p> <hr class="spip" /> <p>Una vez que funcione la maqueta (sin programación), hay que agregar la programación (el bucle que traiga los artículos de los columnistas, según la palabra clave que recibe como parámetro). De manera similar a 2016_mod_columnistas.html, pero manteniedo los códigos html que obtuviste de la maqueta.</p></div> Informes Mensuales https://wiki.backendlid.com.ar/spip.php?page=article&id_article=165 https://wiki.backendlid.com.ar/spip.php?page=article&id_article=165 2017-05-20T15:05:16Z text/html es María Renci <p>Tutorial para generar los informes mensuales.</p> - <a href="https://wiki.backendlid.com.ar/spip.php?page=rubrique&id_rubrique=11" rel="directory">Programación y diseño</a> <div class='rss_texte'><p>Todos los meses generamos los informes mensuales correspondientes a las notas totales por día y el informe de notas totales por local.</p> <p>Para procesar los informes se debe ingresar a través de FTP a LID. Siempre cuando se trabaja con FTP tenemos que crear una copia de seguridad.</p> <p><span class="spip-puce ltr"><b>–</b></span> <a href='https://wiki.backendlid.com.ar/spip.php?page=article&id_article=163'><strong>Informe Mensual por día</strong></a></p> <p><span class="spip-puce ltr"><b>–</b></span> <a href='https://wiki.backendlid.com.ar/spip.php?page=article&id_article=164'><strong>Informe Mensual por local</strong></a></p></div> Informe Mensual por día https://wiki.backendlid.com.ar/spip.php?page=article&id_article=163 https://wiki.backendlid.com.ar/spip.php?page=article&id_article=163 2017-05-20T14:53:44Z text/html es María Renci <p>Tutorial para generar los informes mensuales.</p> - <a href="https://wiki.backendlid.com.ar/spip.php?page=rubrique&id_rubrique=11" rel="directory">Programación y diseño</a> <div class='rss_texte'><p>Todos los meses generamos los informes mensuales correspondientes a las notas totales por día y el informe de notas totales por local.</p> <p>Para procesar los informes se debe ingresar a través de FTP a LID. Siempre cuando se trabaja con FTP tenemos que crear una copia de seguridad.</p> <h2 class="spip">Informe Mensual por día</h2> <p>Se trabaja sobre el html informes_totales_mensuales.html y article-8587.html</p> <h2 class="spip"><strong>article-8587.html</strong></h2> <p><span class='spip_document_156 spip_documents spip_documents_center'> <img src='https://wiki.backendlid.com.ar/local/cache-vignettes/L500xH294/8587-a42d6.jpg?1782435219' width='500' height='294' alt="" /></span></p> <p><strong>1</strong> Copiamos la línea que está comentada y pegamos la nueva línea arriba de ésta, la cual dejamos preparada para el mes siguiente. La que corresponde al mes del informe se descomenta y se modifican los datos referidos al mes del informe.</p> <p><strong>2</strong> Copiamos la línea que está comentada y pegamos la nueva línea arriba de ésta, la cual dejamos preparada para el mes siguiente. La que corresponde al mes del informe se descomenta y se modifican los datos referidos al mes del informe.</p> <p>Guardamos y subimos al FTP</p> <h2 class="spip"><strong>informes_totales_mensuales.html </strong> </h2> <p>Vamos a la última copia que dejamos preparada el mes anterior ya que la misma contiene la consulta.</p> <p><strong>Realizamos una copia para el mes siguiente</strong>, la guardamos y la subimos al FTP.<br class='autobr' /> Con la copia del mes de la consulta realizamos los siguiente</p> <p><span class='spip_document_157 spip_documents spip_documents_center'> <img src='https://wiki.backendlid.com.ar/local/cache-vignettes/L500xH221/mensual-91816.jpg?1782435219' width='500' height='221' alt="" /></span></p> <p><strong>1</strong> Colocamos la fecha en que se realiza la consulta</p> <p><strong>2</strong> Corregimos con las fechas que queremos consultar.</p> <p>Guardamos y subimos al FTP</p> <p>Una vez que subimos ambos html, vamos al <a href="http://www.laizquierdadiario.com/intranet-informes-mensuales" class="spip_out" rel="external">informe diario</a> y actualizamos. <br class='autobr' /> Aparecerá la solapa con el nuevo mes</p> <p><span class='spip_document_158 spip_documents spip_documents_center'> <img src='https://wiki.backendlid.com.ar/local/cache-vignettes/L500xH281/otro_mens-eacb7.jpg?1782435219' width='500' height='281' alt="" /></span></p> <p>Como la consulta va a la base de datos, tenemos que dejar la misma como una foto, por lo cual desde ahí apretamos F12</p> <p><span class='spip_document_160 spip_documents spip_documents_center'> <img src='https://wiki.backendlid.com.ar/local/cache-vignettes/L500xH281/otro-aea65.jpg?1782435219' width='500' height='281' alt="" /></span></p> <p><strong>1</strong> Nos posicionamos en <i>div class="tab-content"</i>, luego abrimos y seleccionamos el tag del mes correspondiente que queremos copiar. Y con el botón derecho del mouse copiamos como muestra la imagen:</p> <p><span class='spip_document_161 spip_documents spip_documents_center'> <img src='https://wiki.backendlid.com.ar/local/cache-vignettes/L500xH431/sin_titulo.jpotromasg-d11e9.jpg?1782435219' width='500' height='431' alt="" /></span></p> <p>Una vez que lo tenemos, lo copiamos en el html informes_totales_mensuales.html</p> <p><span class='spip_document_162 spip_documents spip_documents_center'> <img src='https://wiki.backendlid.com.ar/local/cache-vignettes/L500xH281/copiado-3aacf.jpg?1782435219' width='500' height='281' alt="" /></span></p> <p>Esto debe reemplazar a la consulta (indicada por la flecha 2)</p> <p><span class='spip_document_157 spip_documents spip_documents_center'> <img src='https://wiki.backendlid.com.ar/local/cache-vignettes/L500xH221/mensual-91816.jpg?1782435219' width='500' height='221' alt="" /></span></p> <p>Antes de seguir, probar bien el funcionamiento de las pestañas, que cambie de mes y la primera aparezca activa. Es importante chequear que todos los tags de html tengan apertura y su correspondiente cierre y sean los mismos que los meses anteriores.</p> <p>Por último, para los totales:</p> <p><span class="spip-puce ltr"><b>–</b></span> Seleccionamos y copiamos los valores que aparecen en el navegador, sólo la grilla sin las cabeceras. Y lo pegamos en un Excel (si no va probar Pegado especial con Texto Unicode o usar hoja de cálculo de Google).</p> <p><span class="spip-puce ltr"><b>–</b></span> Calculamos los totales. La primer columna es la fecha, la segunda la cantidad de notas por día (no tiene promedio), luego son tres columnas más siempre iguales: <br class='autobr' /> 1) Cantidad (hay que sumar los valores)<br class='autobr' /> 2) Visitas (hay que sumar los valores)<br class='autobr' /> 3) Promedio (Vistas / Cantidad). A este valor lo dejamos sin decimales, seleccionando Formato -> Número -> y poniendo cero decimales<br class='autobr' /> Luego copiamos las tres fórmulas y las pegamos en las filas de los totales sucesivamente.</p> <p><span class="spip-puce ltr"><b>–</b></span> Luego copiamos y pegamos la fila de totales, en un Notepad. Los totales deben ir separados por los correspondientes tags de columnas de html <code class='spip_code spip_code_inline' dir='ltr'><td>999</td></code>. Cada espacio de tabuladores los remplazamos por los tags de las columnas, de manera similar a los totales del mes anterior. Luego agregar la fila de totales <code class='spip_code spip_code_inline' dir='ltr'><tr></tr></code> al final del archivo HTML.</p> <p><span class="spip-puce ltr"><b>–</b></span> Guardamos y subimos al FTP. Verificar que los totales y promedios den bien.</p></div>