Llamadas de texto y Notas al Pie

Escrito por Germanet el 31 de mayo de 2010 | 3:01 pm

Una vez que tenemos a mano una herramienta tan útil como las Hojas de Estilo (CSS), el siguiente paso es comenzar a automatizar los procesos para hacerlos más rápidos y eficientes. En su curso sobre JQuery, el profesor Jesús Conde nos muestra diversas técnicas para modificar el DOM, utilizando esta  librería  de Javascript, así que hagamos un poco de práctica.

He escogido estos dos ejemplos porque me parecen muy útiles hoy en día en los que el aluvión de información que se nos ha echado encima – auténtico aguacero de Mayo, diría yo- , requiere ir incorporando algunas técnicas que ya están sobradamente probadas en el mundo gráfico, para poner un poco de orden en este mariavilloso caos.

Ej. 1 -Llamadas de Texto

En este ejemplo, se copia automáticamente parte del contenido de la web y se sitúa a la derecha, con un formato de «llamada».

Para crear el Sist. de Llamadas, será necesario:
  1. Incluir la librería Jquery.
  2. Incluir el archivo con las funciones propias del Sistema de Llamadas.
  3. Incluir los Estilos necesarios.
  4. Colocar las etiquetas de manera correcta en el cuerpo de la página, para ello hay que enmarcar el texto que deseemos resaltar con una etiqueta span con la clase «llamada» y dentro de ella enmarcar el texto a quitar y sustituir por puntos suspensivos por otra etiqueta span, con la clase «quitar» .
  5. Aprovechar el material que se incluye al final del artículo.
  6. Revisar los Tutoriales de JQuery en la página de Illasaron, específicamente el videotutorial Nº 12 -Copiar Elementos

grabado-de-goya

CAPRICHO NOCTURNOEste relato al principio se llamó «El alma en el cuerpo», porque en él se trata el tema de la existencia del alma, su transmigración y la posibilidad de vida despues de la muerte. Eran temas que me interesaban en ese momento. Luego me topé con los Caprichos de Goya, y en particular el que aquí se muestra, y me pareció que el nuevo título le venía como anillo al dedo. Además, también va de sueños y Goya concibió inicialmente esta serie de grabados como Sueños…, así que todo encajaba.

«…la muerte es el resultado inevitable de la vida… cuando lo más grande de la vida, la vida misma, no puede arriesgarse… buscamos soluciones».

Sigmund Freud

Ahí fuera se está acabando el mundo (Gé 7:11) El año seiscientos de la vida de Noé, el mes segundo, a los diecisiete días del mes, en ese mismo día se rompieron todas las fuentes del gran abismo, y las compuertas del cielo fueron abiertas., lo viene haciendo desde ayer, así que parece que se va a tomar su tiempo. En el noticiero informaron que las lluvias torrenciales que han caído en diversos puntos de la región, especialmente en la zona sur, provocaron importantes inundaciones en las chabolas del poblado marginal de la Celsa. El temporal también colapsó el servicio de bomberos de Getafe En 1326, los pobladores de varia aldeas del actual término municipal de Getafe se unieron en un pueblo situado a lo largo del camino real que unía Madrid con Toledo. A este nuevo pueblo se le llamó Xatafi. Este nombre venía de la palabra árabe Jata, que significa “algo largo”. De ahí se dedujo que Xatafi se refería a la larga calle principal del pueblo, que no era otra que el camino real. Por tanto, Xetafe significa “calle larga”. A partir de ahí, el nombre evolucionó pasando por Xetafi, Jetafee, Jetaphe, Jetafe y, finalmente, Getafe., donde a las 17:40 horas tenían 55 llamadas en espera para acudir a retirar el agua de sótanos, 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é para contarles lo que sucedió una noche muy parecida a ésta mientras me encontraba de guardia aquí, en el Ramón y Cajal. Reconozco que todo lo ocurrido fue bastante raro, que sonará a fábula de galeno ocioso y embustero, pero créanme, fue increíblemente real y muy intrigante.

Comenzaré presentándome: me llamo René Marfán y soy residente de quinto año 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íto 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ército de salvación, para convertirse en macabros refugios solapados con piel de mármol y arterias de flujo volátil. A partir de cierta hora, los amplios salones que antes habían sido luminosos y concurridos, se transforman en cubículos ifectados por el aséptico olor de la lejía. En esos momentos de desolación nocturna en los que únicamente prevalece la gélida ingravidez del vacío, se pueden escuchar –con dificultad generalmente, lo que obliga a la quietud en aras de un interés malsano–, como las paredes devuelven con cierto retraso, el eco prolongado de los lamentos que recogieron durante el bullicioso día: todo un compendio de dolor, miedos y frustraciones mucho más duraderos en el tiempo que la fugaz palabra que empleamos para describirlos.

Hoy, sin ir más lejos, hay frente a mí un reloj que semeja una luna llena numerada. Lo miro y tengo la sensasción de que el tiempo se ha detenido, pues lleva cinco minutos marcando las dos de la mañana. Todo está muy tranquilo, demasiado tranquilo diría yo, de manera que referir alguno de los sucesos extraordinarios que me han ocurrido en este hospital, será una estupenda forma de matar el tiempo –aunque eso vaya contra mis principios– y de combatir el estrés que, como antes he mencionado, me produce esta pequeña fobia.

Ej. 2 -Notas al Pie

Este capítulo del tutorial también me pareció muy útil. En este caso se trata de separar parte del texto que se utiliza específicamente para ampliar la información sobre determinado tema, sustituirlo por números íncide que a su vez tendrán un enlace al pie de página, donde se tralsadarán los textos en un orden sucesivo.

No me resultó fácil llevar estos ejemplos a WordPress, por ello insisto en que estoy siguiendo un método de resumen que me permita practicar y al mismo tiempo localizar con rapidez cualquier tema. Pondré enlaces que permitirán  profundizar en cada materia.

Para crear el Sist. de Notas al Pie de Página, será necesario:
  1. Incluir la librería Jquery.
  2. Incluir el archivo con las funciones propias del Sistema de Notas al Pie.
  3. Incluir los Estilos necesarios.
  4. Colocar las etiquetas de manera correcta en el cuerpo de la página, para ello hay que enmarcar el texto que será sustituido por el índice con una etiqueta span con la clase «notapie».
  5. Aprovechar el material que se incluye al final del artículo.
  6. Revisar los Tutoriales de JQuery en la página de Illasaron, específicamente el videotutorial Nº 11 -Mover Elementos
Mostrar / Ocultar el Código

(+/-)

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

    });
    });

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

  3. El archivo de Estilo

/* ESTILOS PARA COPIAR */

.cita {
float:right;
margin-top:70px;
padding-left:30px;
text-align:justify;
width:350px;
}

.capitulo p {
line-height: 2em;
text-indent:25px;
text-align: justify;
font-family: Georgia, «Times New Roman», Times, serif;
font-size: 12px;
}

.llamar {
background: url(../imagenes/llamada_abajo.jpg) no-repeat left bottom;
position: relative;
display:block;
width: 185px;
padding: 0 20px 24px 15px;
text-align:left;
font-family: Georgia, «Times New Roman», Times, serif;
font-size: 1.2em;
font-style: italic;
margin-top:5px;
}

.envolver-llamada {
background: url(../imagenes/llamada_arriba.jpg) no-repeat left top;
position: absolute;
width: 220px;
right: -255px;
top:0px;
padding-top: 18px;
}

/* ESTILOS PARA NOTA AL PIE */

span.notapie {
font-style: italic;
font-family: «Times New Roman», Times, serif;
margin: 1em 0;
display:block;
}

.capitulo span.notapie {
display:inline;
}

.texto-referencia {
font-weight: bold;
}

#notas li {
margin: 1em 0;
}

#notas {
margin-top: 1em;
border-top: 1px solid #dedede;
}

#nota-pie{
margin-top: 1em;
border-top: 1px solid #dedede;
}

Los comentarios están cerrados.