Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-content/themes/bootstrap_blog/functions.php:89) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1719 {"id":205,"date":"2010-05-31T15:01:36","date_gmt":"2010-05-31T13:01:36","guid":{"rendered":"https:\/\/www.pcpolis.es\/blog\/?p=205"},"modified":"2013-02-14T21:25:07","modified_gmt":"2013-02-14T19:25:07","slug":"llamadas-de-texto-y-notas-al-pie","status":"publish","type":"post","link":"https:\/\/www.pcpolis.es\/blog\/css\/llamadas-de-texto-y-notas-al-pie\/","title":{"rendered":"Llamadas de texto y Notas al Pie"},"content":{"rendered":"

Una vez que tenemos a mano una herramienta tan \u00fatil como las Hojas de Estilo (CSS), el siguiente paso es comenzar a automatizar los procesos para hacerlos m\u00e1s r\u00e1pidos y eficientes. En su curso sobre JQuery, el profesor Jesús Conde nos muestra diversas técnicas para modificar el DOM, utilizando esta\u00a0 librer\u00eda\u00a0 de Javascript, as\u00ed que hagamos un poco de pr\u00e1ctica.<\/p>\n

He escogido estos dos ejemplos porque me parecen muy \u00fatiles hoy en d\u00eda en los que el aluvi\u00f3n de informaci\u00f3n que se nos ha echado encima – aut\u00e9ntico aguacero de Mayo, dir\u00eda yo- , requiere ir incorporando algunas t\u00e9cnicas que ya est\u00e1n sobradamente probadas en el mundo gr\u00e1fico, para poner un poco de orden en este mariavilloso caos.<\/p>\n

Ej. 1 -Llamadas de Texto<\/h6>\n

En este ejemplo, se copia autom\u00e1ticamente parte del contenido de la web y se sit\u00faa a la derecha, con un formato de \u00abllamada\u00bb.<\/p>\n

Para crear el Sist. de Llamadas, ser\u00e1 necesario:<\/h6>\n
    \n
  1. Incluir la librer\u00eda Jquery.<\/li>\n
  2. Incluir el archivo con las funciones propias del Sistema de Llamadas.<\/li>\n
  3. Incluir los Estilos necesarios.<\/li>\n
  4. Colocar las etiquetas de manera correcta en el cuerpo de la p\u00e1gina, para ello hay que enmarcar el texto que deseemos resaltar con una etiqueta span con la clase \u00abllamada\u00bb y dentro de ella enmarcar el texto a quitar y sustituir por puntos suspensivos por otra etiqueta span, con la clase \u00abquitar\u00bb .<\/li>\n
  5. Aprovechar el material que se incluye al final del art\u00edculo.<\/li>\n
  6. Revisar los Tutoriales de JQuery en la p\u00e1gina de Illasaron, espec\u00edficamente el videotutorial N\u00ba 12 -Copiar Elementos<\/a><\/li>\n<\/ol>\n

    \"grabado-de-goya\"<\/p>\n

    \n

    CAPRICHO NOCTURNOEste relato al principio se llam\u00f3 \u00abEl alma en el cuerpo\u00bb, porque en \u00e9l se trata el tema de la existencia del alma, su transmigraci\u00f3n y la posibilidad de vida despues de la muerte. Eran temas que me interesaban en ese momento. Luego me top\u00e9 con los Caprichos de Goya, y en particular el que aqu\u00ed se muestra, y me pareci\u00f3 que el nuevo t\u00edtulo le ven\u00eda como anillo al dedo. Adem\u00e1s, tambi\u00e9n va de sue\u00f1os y Goya concibi\u00f3 inicialmente esta serie de grabados como Sue\u00f1os…, as\u00ed que todo encajaba.<\/span><\/h2>\n

    \u00ab…la muerte es el resultado inevitable de la vida… cuando lo m\u00e1s grande de la vida, la vida misma, no puede arriesgarse… buscamos soluciones\u00bb.<\/p>\n

    Sigmund Freud<\/p>\n<\/div>\n

    \n

    Ah\u00ed fuera se est\u00e1 acabando el mundo (G\u00e9 7:11) El a\u00f1o seiscientos de la vida de No\u00e9, el mes segundo, a los diecisiete d\u00edas del mes, en ese mismo d\u00eda se rompieron todas las fuentes del gran abismo, y las compuertas del cielo fueron abiertas.<\/span><\/strong>, lo viene haciendo desde ayer, as\u00ed que parece que se va a tomar su tiempo. En el noticiero informaron que las lluvias torrenciales que han ca\u00eddo en diversos puntos de la regi\u00f3n, especialmente en la zona sur, provocaron importantes inundaciones en las chabolas del poblado marginal de la Celsa. El temporal tambi\u00e9n colaps\u00f3 el servicio de bomberos de Getafe En 1326, los pobladores de varia aldeas del actual t\u00e9rmino municipal de Getafe se unieron en un pueblo situado a lo largo del camino real que un\u00eda Madrid con Toledo. A este nuevo pueblo se le llam\u00f3 Xatafi. Este nombre ven\u00eda de la palabra \u00e1rabe Jata, que significa \u201calgo largo\u201d. De ah\u00ed se dedujo que Xatafi se refer\u00eda a la larga calle principal del pueblo, que no era otra que el camino real. Por tanto, Xetafe significa \u201ccalle larga\u201d. A partir de ah\u00ed, el nombre evolucion\u00f3 pasando por Xetafi, Jetafee, Jetaphe, Jetafe y, finalmente, Getafe.<\/span>, donde a las 17:40 horas ten\u00edan 55 llamadas en espera para acudir a retirar el agua de s\u00f3tanos, garajes y comercios de varios municipios de Madrid. Pues bien, en lo que se rompen todos los manantiales de la vasta profundidad acuosa, y las compuertas de los cielos se abren para intentar sumergir todo lo que hay de vida corrupta superficial, aprovechar\u00e9 para contarles lo que sucedi\u00f3 una noche muy parecida a \u00e9sta mientras me encontraba de guardia aqu\u00ed, en el Ram\u00f3n y Cajal. Reconozco que todo lo ocurrido fue bastante raro, que sonar\u00e1 a f\u00e1bula de galeno ocioso y embustero, pero cr\u00e9anme, fue incre\u00edblemente real y muy intrigante.<\/p>\n

    Comenzar\u00e9 present\u00e1ndome: me llamo Ren\u00e9 Marf\u00e1n y soy residente de quinto a\u00f1o de medicina. Debo aclarar, no obstante, que en determinadas circunstancias no me gustan los hospitales. Detesto sobre todo estas jornadas interminables en las que debo permanecer de guardia durante noches enteras, aguardando la fatalidad a cada momento, esperando ah\u00edto de morbosa impaciencia poder atender con premura casos de urgencia que se presentan casi siempre de madrugada, y que por lo general constituyen el desenlace fatal de siniestros acontecimientos. Y es que en ciertos horarios, los hospitales dejan de ser trincheras en las que opera todo un ej\u00e9rcito de salvaci\u00f3n, para convertirse en macabros refugios solapados con piel de m\u00e1rmol y arterias de flujo vol\u00e1til. A partir de cierta hora, los amplios salones que antes hab\u00edan sido luminosos y concurridos, se transforman en cub\u00edculos ifectados por el as\u00e9ptico olor de la lej\u00eda. En esos momentos de desolaci\u00f3n nocturna en los que \u00fanicamente prevalece la g\u00e9lida ingravidez del vac\u00edo, se pueden escuchar \u2013con dificultad generalmente, lo que obliga a la quietud en aras de un inter\u00e9s malsano\u2013, como las paredes devuelven con cierto retraso, el eco prolongado de los lamentos que recogieron durante el bullicioso d\u00eda: todo un compendio de dolor, miedos y frustraciones mucho m\u00e1s duraderos en el tiempo que la fugaz palabra que empleamos para describirlos.<\/span><\/span><\/p>\n

    Hoy, sin ir m\u00e1s lejos, hay frente a m\u00ed un reloj que semeja una luna llena numerada. Lo miro y tengo la sensasci\u00f3n de que el tiempo se ha detenido, pues lleva cinco minutos marcando las dos de la ma\u00f1ana. Todo est\u00e1 muy tranquilo, demasiado tranquilo dir\u00eda yo, de manera que referir alguno de los sucesos extraordinarios que me han ocurrido en este hospital, ser\u00e1 una estupenda forma de matar el tiempo \u2013aunque eso vaya contra mis principios\u2013 y de combatir el estr\u00e9s que, como antes he mencionado, me produce esta peque\u00f1a fobia.<\/p>\n

    Ej. 2 -Notas al Pie<\/h6>\n

    Este cap\u00edtulo del tutorial tambi\u00e9n me pareci\u00f3 muy \u00fatil. En este caso se trata de separar parte del texto que se utiliza espec\u00edficamente para ampliar la informaci\u00f3n sobre determinado tema, sustituirlo por n\u00fameros \u00edncide que a su vez tendr\u00e1n un enlace al pie de p\u00e1gina, donde se tralsadar\u00e1n los textos en un orden sucesivo.<\/p>\n

    No me result\u00f3 f\u00e1cil llevar estos ejemplos a WordPress, por ello insisto en que estoy siguiendo un m\u00e9todo de resumen que me permita practicar y al mismo tiempo localizar con rapidez cualquier tema. Pondr\u00e9 enlaces que permitir\u00e1n\u00a0 profundizar en cada materia.<\/p><\/blockquote>\n

    Para crear el Sist. de Notas al Pie de P\u00e1gina, ser\u00e1 necesario:<\/h6>\n
      \n
    1. Incluir la librer\u00eda Jquery.<\/li>\n
    2. Incluir el archivo con las funciones propias del Sistema de Notas al Pie.<\/li>\n
    3. Incluir los Estilos necesarios.<\/li>\n
    4. Colocar las etiquetas de manera correcta en el cuerpo de la p\u00e1gina, para ello hay que enmarcar el texto que ser\u00e1 sustituido por el \u00edndice con una etiqueta span con la clase \u00abnotapie\u00bb.<\/li>\n
    5. Aprovechar el material que se incluye al final del art\u00edculo.<\/li>\n
    6. Revisar los Tutoriales de JQuery en la p\u00e1gina de Illasaron, espec\u00edficamente el videotutorial N\u00ba 11 -Mover Elementos<\/a><\/li>\n<\/ol>\n<\/div>\n
      Mostrar \/ Ocultar el C\u00f3digo<\/h6>\n

      <\/a>(+\/-)<\/a><\/p>\n

      \n
      Archivos necesarios:<\/h6>\n
        \n
      1. La librer\u00eda de JQuery ( jquery.js )<\/li>\n
      2. El archivo con las funciones que permiten automatizar el c\u00f3digo ( copiar.js )
        \n\/\/ JavaScript Document\/* SIST. DE LLAMADAS *\/
        \n$(document).ready(function() {
        \n$(‘span.llamada’).each(function(index) {
        \nvar $parrafoPadre = $(this).parent(‘p’);
        \n$parrafoPadre.css(‘position’, ‘relative’);
        \nvar $copiaClonada = $(this).clone(); \/\/copiamos el p\u00e1rrafo implicado
        \n\/\/ encuentra la clase quitar y la sutituye por puntos suspensivos, luego end()
        \n$copiaClonada.addClass(‘llamar’).find(‘span.quitar’).html(‘&hellip;’).end().prependTo($parrafoPadre).wrap(‘<div class=\u00bbenvolver-llamada\u00bb><\/div>’);
        \n\/\/ el texto que est\u00e1 en la variable $copia clonada se loa damos a $textoClonado.
        \nvar textoClonado = $copiaClonada.text();
        \n$copiaClonada.html(textoClonado);<\/p>\n

        });
        \n});<\/p>\n

        \/* SIST. DE NOTAS AL PIE *\/
        \n$(document).ready(function() {
        \n\/\/ Inserta una lista numerada con el id notas, despu\u00e9s de la capa capitulo.
        \n$(‘<ol id=\u00bbnotas\u00bb><\/ol>’).insertAfter(‘div.capitulo’);
        \n\/\/ Crea un \u00edndice para esta lista
        \n$(‘span.notapie’).each(function(index) {
        \n$(this)
        \n\/\/ coloca un super\u00edndice(<sup> despu\u00e9s de la notapie con enlace <a href… al pie.
        \n.before(‘<a href=\u00bb#nota-pie-‘ + (index+1) + ‘\u00bb id=\u00bbcontexto-‘ + (index+1) + ‘\u00bb class=\u00bbcontexto\u00bb><sup>’ + (index+1) + ‘<\/sup><\/a>’)
        \n\/\/ con esto env\u00eda cada nota al pie que ya se ha creado antes
        \n.appendTo(‘#notas’)
        \n.append( ‘&nbsp;(<a href=\u00bb#contexto-‘ + (index+1) + ‘\u00bb>contexto<\/a>)’ )
        \n\/\/ Envuelve cada nota pie con una etiqueta de lista para ser identificada
        \n.wrap(‘<li id=\u00bbnota-pie-‘ + (index+1) + ‘\u00bb><\/li>’);
        \n});
        \n});<\/li>\n

      3. El archivo de Estilo<\/li>\n<\/ol>\n

        \/* ESTILOS PARA COPIAR *\/<\/p>\n

        .cita {
        \nfloat:right;
        \nmargin-top:70px;
        \npadding-left:30px;
        \ntext-align:justify;
        \nwidth:350px;
        \n}<\/p>\n

        .capitulo p {
        \nline-height: 2em;
        \ntext-indent:25px;
        \ntext-align: justify;
        \nfont-family: Georgia, \u00abTimes New Roman\u00bb, Times, serif;
        \nfont-size: 12px;
        \n}<\/p>\n

        .llamar {
        \nbackground: url(..\/imagenes\/llamada_abajo.jpg) no-repeat left bottom;
        \nposition: relative;
        \ndisplay:block;
        \nwidth: 185px;
        \npadding: 0 20px 24px 15px;
        \ntext-align:left;
        \nfont-family: Georgia, \u00abTimes New Roman\u00bb, Times, serif;
        \nfont-size: 1.2em;
        \nfont-style: italic;
        \nmargin-top:5px;
        \n}<\/p>\n

        .envolver-llamada {
        \nbackground: url(..\/imagenes\/llamada_arriba.jpg) no-repeat left top;
        \nposition: absolute;
        \nwidth: 220px;
        \nright: -255px;
        \ntop:0px;
        \npadding-top: 18px;
        \n}<\/p>\n

        \/* ESTILOS PARA NOTA AL PIE *\/<\/p>\n

        span.notapie {
        \nfont-style: italic;
        \nfont-family: \u00abTimes New Roman\u00bb, Times, serif;
        \nmargin: 1em 0;
        \ndisplay:block;
        \n}<\/p>\n

        .capitulo span.notapie {
        \ndisplay:inline;
        \n}<\/p>\n

        .texto-referencia {
        \nfont-weight: bold;
        \n}<\/p>\n

        #notas li {
        \nmargin: 1em 0;
        \n}<\/p>\n

        #notas {
        \nmargin-top: 1em;
        \nborder-top: 1px solid #dedede;
        \n}<\/p>\n

        #nota-pie{
        \nmargin-top: 1em;
        \nborder-top: 1px solid #dedede;
        \n}<\/p><\/div>\n

        \n","protected":false},"excerpt":{"rendered":"

        Una vez que tenemos a mano una herramienta tan \u00fatil como las Hojas de Estilo (CSS), el siguiente paso es comenzar a automatizar los procesos para hacerlos m\u00e1s r\u00e1pidos y eficientes. En su curso sobre JQuery, el profesor Jesús Conde nos muestra diversas técnicas para modificar el DOM, utilizando esta\u00a0 librer\u00eda\u00a0 de Javascript, as\u00ed que […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[15,19],"tags":[],"_links":{"self":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/205"}],"collection":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":42,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/205\/revisions"}],"predecessor-version":[{"id":209,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/205\/revisions\/209"}],"wp:attachment":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/media?parent=205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/categories?post=205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/tags?post=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}