Deprecated: Return type of Requests_Cookie_Jar::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 63 Deprecated: Return type of Requests_Cookie_Jar::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 73 Deprecated: Return type of Requests_Cookie_Jar::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 89 Deprecated: Return type of Requests_Cookie_Jar::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 102 Deprecated: Return type of Requests_Cookie_Jar::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 111 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 40 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 51 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 68 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 82 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 91 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/feed-rss2.php on line 8 JQuery – Ideas Fugaces https://www.pcpolis.es/blog Algunas buenas ideas que se presentan sin avisar... Sun, 10 Sep 2017 10:12:09 +0000 es hourly 1 https://wordpress.org/?v=5.9.9 Transiciones con CSS https://www.pcpolis.es/blog/css/animar-con-css/ Sat, 23 Jan 2016 17:10:33 +0000 https://www.pcpolis.es/blog/?p=610
fondo
anim_css3
panel
auto
rueda1
rueda2

01 Definición

Las transiciones son animaciones simples, que permiten cambiar los valores de las propiedades CSS de manera gradual, proporcionando una duración. La propiedad Transition es, por tanto, el primer paso en CSS3 para lo que luego se conseguirá con la regla @keyframes, a la que dedicaremos un artículo próximamente. En este ejemplo también se ha utilizado la propiedad transform que permite que un objeto se pueda rotar, mover, inclinar, etc.

Transition (Sintaxis) Forma abreviada: las propiedades separadas por coma y los parámetros por espacio. El orden es importante.

transition: propiedad duración retraso, propiedad2 duración retraso;

Ej. transition: width 2s 1s; height 2s 1s;

Transform ( Sintaxis ) Ver lista completa de las propiedades en el enlace de referencia.

transform: propiedad (valor);

Ej. transform: rotate(15deg);

02 Componentes del ejemplo

Nota. Los valores CSS se muestran abajo, en la pestaña: Ver Código.

Banner

Es el contenedor y se ha posicionado de manera relativa, para que contenga el resto de elementos de forma absoluta, entre ellos, la imagen del fondo. Además, se le ha dado la propiedad overflow: hidden; para que todo lo que sobrepase los límites quede oculto.

Título

  • Se anima su posición de derecha (1300px) a izquierda (110px). Con la ayuda de javascript (JQuery), al cargar la página se le añade la clase "animado" que produce el cambio.
  • La propiedad transition, otorga 0.5 segundos a esta transición, que se realiza de forma lenta tanto al principio como al final (ease-in-out) y sin retraso..

Panel

  • Se desplaza hacia abajo. Al cargar la página se le añade la clase "animado", que lo coloca en su posición final. A la capa #panel, se la han dado unos valores para la transición de la posición (top) de 1.5 segundos, de forma rápida al comienzo y al final (ease) y sin retraso.

Auto

  • Se anima su posición de derecha a izquierda. Su transición, aplicada a la capa #auto es de 3 segundos y para la forma en que debe hacerlo se usa un función (cubic-bezier) que consta de 4 valores (0.31, 1.58, 0.35, 1.08), y que consigue el efecto de retroceso. Esta acción tiene un retraso es de 1 segundo, para que llegue el último..

Ruedas

  • Son elementos independientes (#rueda_1 y #rueda_2) porque además de desplazarse hacia la izquierda de la misma forma que el auto, deben girar. La posición final está condicionada por la del auto, al igual que el movimiento, y por eso deben tener los mismos valores de la función cubic-bezier (0.31, 1.58, 0.35, 1.08). También el retraso debe ser de 1 segundo.
  • Para que roten, se le aplica la propiedad transform: rotate(-1080deg); y la propiedad transform-origin, para precisar el punto exacto del eje, sobre el que debe rotar la imagen.
Fuentes / Recursos

Transición en 3schools | Función cubic-bezier | Transform | Agregar Clase en W3Scool y aguí>

Problemas

  1. Las ruedas no giraban de manera armónica, lo hacían como si estuvieran descentradas.S/ Por alguna razón, el navegador no cogía automáticamente el centro de la imagen para rotar sobre los ejes. Tuve que especificar ese centro de rotación con la propiedad transform-origin: 50% 48% 0;.
Ver Código (+/-)

JQuery

CSS

#banner {
	width: 500px;
	height:320px;
	margin: 30px auto;
	position: relative;
	-webkit-perspective: 500px;
	-moz-perspective: 500px;
	-o-perspective: 500px;
	perspective: 500px;
	overflow: hidden;
}

#titulo {
	position: absolute;
	left: 1300px;
	top: 10px;
}

#titulo.animado {
	left: 110px;
	 -webkit-transition: all .5s ease-in-out;
	 -moz-transition: all .5s ease-in-out;
	 -o-transition: all .5s ease-in-out;
	 transition: left .5s ease-in-out;
}

#auto {
	position: absolute;
	top: 190px;
	left: 1000px;
}

#auto.animado {
	left:100px;
	-webkit-transition: all 3s ease;
	-moz-transition: all 3s ease;
	-o-transition: all 3s ease;
	transition: all 3s /*ease*/cubic-bezier(/*.42,1.35,.47,1.29*/.31, 1.58, .35, 1.08);
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 1s;
	-o-transition-delay: 1s;
	transition-delay: 1s;
}

#panel {
	position: absolute;
	top: -1000px;
	left: 100px;
}

#panel.animado {
	top:70px;
	-webkit-transition: top 1.5s ease;
	-moz-transition: top 1.5s ease;
	-o-transition: top 1.5s ease;
	transition: top 1.5s ease;
}

#rueda_1 {
	position: absolute;
	left: 1060px;
	top: 227px;
}

#rueda_2 {
	position: absolute;
	left: 1290px;
	top: 227px;
}

.rueda {
	-webkit-transition-property: left, opacity, -webkit-transform;
	-webkit-transition-duration: 3s, 4s, 3s;
	-webkit-transition-timing-function: ease, ease, ease-out;
	-webkit-transition-delay: 1s, .5s, 1s;

	-moz-transition-property: left, opacity, -moz-transform;
	-moz-transition-duration: 3s, 4s, 3s;
	-moz-transition-timing-function: ease, ease, ease-out;
	-moz-transition-delay: 1s, .5s, 1s;

	-o-transition-property: left, opacity, -o-transform;
	-o-transition-duration: 3s, 4s, 3s;
	-o-transition-timing-function: ease, ease, ease-out;
	-o-transition-delay: 1s, .5s, 1s;

	transition-property: left, opacity, transform;
	transition-duration: 3s, 4s, 3s;
	transition-timing-function: /*ease*/cubic-bezier(/*.42,1.35,.47,1.29*/.31, 1.58, .35, 1.08), ease, /*ease-out*/ cubic-bezier(/*.42,1.35,.47,1.29*/.31, 1.58, .35, 1.08);
 	transition-delay: 1s, .5s, 1s;
}

#rueda_1.animar {
	left:158px;
}

#rueda_2.animar {
	left: 367px;
}

.rueda.animar {
	-webkit-transform: rotate(-1080deg);
	-moz-transform: rotate(-1080deg);
	-o-transform: rotate(-1080deg);
	transform: rotate(-1080deg);
	opacity: 1;
	transform-origin: 50% 48% 0;
}



]]> Web adaptable ( Responsive ) https://www.pcpolis.es/blog/css/web-adaptable-responsive/ Mon, 26 Jan 2015 18:15:01 +0000 https://www.pcpolis.es/blog/?p=529 responsive

01 Introducción

La aparición de dispositivos cada vez más pequeños con acceso a internet ha traido consigo la necesidad de adaptar las Webs, utilizando el código que en los últimos tiempos ha surgido para cubrir esta necesidad. Estoy hablando de HTML5, CSS3 y, como no, del siempre útil del lado del cliente JavaScript. He resumido los pasos, pero abajo tienes el videotutorial que me ha servido de guía.

02 Pasos para hacer la web adaptable ( responsive design )

HTML

Lo primero es colocar en la cabecera html (head) la etiqueta de nombre «viewport«,  (todo el dódigo está abajo), que permitirá definir la «ventana» correcta, dependiendo del dispositivo. También habrá que agregar el código de la capa que contendrá un menú alternativo para resoluciones pequeñas, se puede colocar justo antes de la capa que contiene el menú actual.

Si usamos Font-aweson para el icono, agregar en la cabecera (head) el enlace a la hoja de estilos de Font-aweson. Previamente se deben haber descargado y situado estos ficheros en la web.

CSS

Incluir las Media Queries en la hoja de estilos, con las modificaciones necesarias. Lo que intentamos conseguir es lo siguiente: cuando un dispositivo tenga una resolución inferior a 500 pixeles , por ejemplo, se ocultará o desplazará el menú actual y se mostrará la nueva capa, mucho más simple, que incluye el texto e iconos identificativos. Al pulsar sobre el icono, aparecerán todos los elementos del menú que teníamos previamente, pero adaptados a las nuevas medidas. Esto lo conseguimos con Javascript, específicamente con su librería jquery.

JQuery

Agregar el código javascrip necesario para cargar la biblioteca Jquery y el archivo menu_responsive.js, con las funciones que permitirán alternar entre menús. Este código se coloca justo antes del cierre de la equiqueta html body.

03 Conclusión

A continuación tienes el código para un ejemplo sencillo de Menú adaptable, pero es sólo una referencia que deberás sustituir según tus propias necesidades. Por ejemplo, en el caso de este blog, como todos los enlaces eatán dentro de la columna derecha, la he considerado como la capa de menú.

Recuerda que las etiquetas de los iconos también deben llevar sus propias clases según las intrucciones que encontrarás en la página de Font Awesome.

Fuentes / Recursos

Font aweson > | videotutorial > | videotutorial  (inglés)> | Media queries | CSS clip Property (para recortar imágenes) |

Ver Código (+/-)

HTML

Menu adaptable (responsive)




Menú


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at sapien tempor, placerat augue sit amet, luctus odio. Morbi tempor sem quis arcu lacinia, sit amet finibus magna venenatis. Nam ac sem et sem vulputate semper. Curabitur justo tellus, pretium at consequat vel, fermentum in arcu. Integer sit amet mi in turpis maximus egestas. Donec ornare pharetra ultrices. Cras tristique non nunc eget condimentum. Ut neque orci, elementum id mattis non, pellentesque quis lectus. Aliquam at risus metus. Mauris eleifend nunc non tellus blandit luctus. Phasellus consectetur rutrum dolor, non interdum arcu vulputate non. Donec interdum sagittis vestibulum. Proin facilisis porta diam, in condimentum risus maximus a. Phasellus lorem dolor, lacinia sit amet sagittis in, commodo in urna.

CSS

/* estilos.css */

* {
	margin:0;
	padding:0;
}

body	{
	backgrond:#fffffa;
}

p	{
	margin-bottom:1em;
}

section	{
	width:90%;
	min-width:320px;
	margin:0 auto;
	padding-top:40px;
}

header	{
	width:100%;
}

header nav	{
	left:-100%;
	width:90%;
	max-width:1000px;
	margin:20px auto;
	background:#024956;
	overflow:hidden;
}

.menu_bar {
	display:none;
}

ul	{
	overflow:hidden;
}

ul li {
	list-style:none;
	float:left;
	overflow:hidden;
}

ul li a {
	font:Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#CCCCFF;
	text-decoration:none;
	padding:20px;
	display:block;
}

ul li a:hover {
	background: #037e8c;
}

ul li a i {
	padding-right:7px;
}

@media screen and (max-width:720px) {
	header nav {
	width:80%;
	height:100%;
	margin: 65px 0 0;
	position:fixed;
	}

	header nav li	{
		display:block;
		float:none;
		border-bottom:1px solid rgba(255,255,255, .3);
	}

	.menu_bar {
		display:block;
		position:fixed;
		width:100%;
		background:#037e8c;
	}

	.menu_bar .btn_menu {
		display:block;
		padding:20px;
		background: #037e8c;
		color:#FFFFFF;
		text-decoration:none;
		font-weight:bold;
		text-transform: uppercase;
		font-family:Arial, Helvetica, sans-serif;
		font-size:22px;
		box-sizing:border-box;
		letter-spacing: 0.5em;
	}

	.menu_bar .btn_menu i	{
	float: right;
	font-size:32px;
	}

	section {
	padding-top: 75px; /*Para que el texto no quede oculto tras fijar el menú*/
	}
}

JQuery

// menu_responsive.js

$(document).ready(main);

var contador = 1 ;

function main(){
	$('.menu_bar').click(function(){
		//$('nav').toggle(); opción simple, sin variable contador
		if(contador == 1){
			$('nav').animate({
			left: '0'
			});
			contador = 0;
		} else {
			contador = 1;
			$('nav').animate({
				left: '-100%'
			});
		}
	});
}
]]> Animación de Imagen de Fondo con JQuery https://www.pcpolis.es/blog/css/animacion-de-imagen-de-fondo-con-jquery/ Sun, 22 Aug 2010 15:48:54 +0000 https://www.pcpolis.es/blog/?p=279 Lo que sique es una continuación del efecto "nudging", que vimos anteriormente. En este caso animaremos el fondo como solíamos hacer en flash, con la ventaja de que ahora ganamos un poco en accesibilidad.

Ej. 1: animación vertical

HTML

Partimos de una simple lista desordenada, a cuyo elemento padre (ul) hemos otorgado la regla «nav».

CSS

Los elementos de la navegación (li) flotan a la izquierda y se les ha dado un alto de línea equivalente al de la parte de la imagen a mostrar, para poder centrar el texto. Cada enlace se muestra en bloque.

Hay que destacar que el estado hover ha sido declarado, por lo que los usuarios que no tengan activado javascript en su navegador, podrán ver al menos la posición final.

Se ha establecido una posición inicial para este fondo, de forma que funcione en los navegadores que no establecen una posición de forma predeterminada.

Imagen

Se pueden conseguir diferentes efectos variando el formato y el movimiento de la imagen. En este caso se desplazará hacia arriba hasta mostrar la banda decorativa que está en la parte inferior y que servirá además de marcador. Esta configuración se repetira también para el elemento activo.

Imagen de Fondo

Fig. 1: Imagen de Fondo

El antes y el después para la imagen de la Fig. 1, se consigue con un desplazamiento vertical de 79 pixeles, lo que corresponde a la mitad de su altura. De manera predeterminada en la hoja de estilos, la banda inferior permanecerá oculta hasta que el usuario pase el ratón sobre el enlace.

Script

Finalmente, el script es muy simple: la imagen del fondo debe moverse cuando el usuario pasa el ratón por encima, variando su posición. Los eventos implicados son «mouseover» y «mouseout».

Hay que destacar en esta función que cada animación es detenida antes de su comienzo, y con esto se evitan comportamientos inapropiados o repeticiones innecesarias que se producen cuando el ratón pasa repetidas veces por un enlace. jQuery también tiene un método .hover que puede ser utilizado para simplificar el script.

Por último, hay que recordar que es necesario, además de la propia librería jquery, el plugin Background-Position que permite estos movimientos de la imagen de fondo. Ambos ficheros deben ser enlazados de la manera habitual en la cabecera del documento.

Ver Código (+/-)

HTML


<ul id="nav">
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Contactar</a></li>
</ul>

CSS

/*
   --- Animación de Imagen de Fondo en Menu  ---
*/

#animar_fondo ul {
	list-style:none;
	margin:0;
	padding:0;
	height:79px;
}

#animar_fondo li {
	float:left;
	width:153px;
	height:79px;
	margin:0;
	padding:0;
	text-align:center;
	line-height:79px;
}
#animar_fondo li a {
	display:block;
	color:#d4b596;
	text-decoration:none;
}
#animar_fondo li a {
	background-image: url(../imagenes/animar_fondo/menu_fondo.jpg);
	background-repeat: repeat;
	background-position: 0 0;
}
#animar_fondo li a:hover {
	background-position:0px -79px;
}

JQuery

/*
--- Animación de Imagen de Fondo en Menu
*/

$(function(){
	$('#nav a')
		.css( {backgroundPosition: "0 0"} )
		.mouseover(function(){
			$(this).stop().animate({backgroundPosition:"(0 -79px)"}, {duration:500})
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:200, complete:function(){
				$(this).css({backgroundPosition: "0 0"})
			}})
		})
});

La referencia para esta práctica la he tomado del blog de Jonathan Snook aquí. Espero que hayas disfrutado del tutorial y que te haya sido de utiliad. Que tengas un buen día.

]]> Efecto Nudging con JQuery https://www.pcpolis.es/blog/css/efecto-nudging-con-jquery/ Thu, 12 Aug 2010 15:51:48 +0000 https://www.pcpolis.es/blog/?p=273 Los menús son la puerta de entrada a la web, y por eso siempre me han interesado mucho. Si un menú es soso, es como ponerle mala cara a nuestro invitado, de manera que un diseñador debe procurar que los visitantes se sientan cómodos y sin llegar a la «pedantería» de excesos o diseños de mal gusto, debemos invitarlos «cordialmente» a pasar.

En el denominado «efecto nudging» –codazo– que yo traduciría mejor como «empujoncito», el hecho de que las letras se desplacen un poco y que en ocasiones aparezca una flecha es como decir: venga… anímate y pasa. Así que voy a estudiar un poco cómo está construída esta «invitación»  utilizando JQuery y CSS.

Ejemplo 1
Paso 1: hacer una lista desordenada con los elementos del menú

Lo esencial en esta lista, es que a cada elemento debemos asignarle la clase relacionada con el efecto, que es: nudge (cuyo nombre respetaré en inglés porque es una palabra muy específica que significa –dar suavemente con el codo-, y no está de más agregarla a nuestro vocabulario técnico.

Paso 2: definimos los estilos CSS a la lista de menú

Imagen de Fondo
Imagen de Fondo

Lo quedebemos destacar del estilo es que para la etiqueta de enlace anchor (a) se modifica la imagen de fondo al poner el ratón encima y por acción del script cambia también el padding original de 15px a 35px. Por supuesto, todas estas medias varían dependiendo del tamaño y forma del menú.

Paso 3: aplicamos una función que permitirá los cambios de estilo

Primero localizamos el elemento al que se la ha aplicado la regla de estilo «nudge». La clase .hover permite manejar los dos estados del elemento sobre el que se pasa el raton: uno cuando «entra» y otro cuando «sale». En ambos estados se aplica .animate, a la que se le pasa como primer parámetro la regla» padding» y como segundo el tiempo en milisegundos que esta animación debe durar.

Ver Código (+/-)

HTML

<div id="menu">
	<ul>
		<li><a href="#" class="nudge">home</a></li>
		<li><a href="#" class="nudge">acerca de nosotros </a></li>
		<li><a href="#" class="nudge">servicios</a></li>
		<li><a href="#" class="nudge">productos</a></li>
		<li><a href="#" class="nudge">contacta con nosotros</a></li>
	</ul>
</div>

Lo esencial en esta lista, es que a cada elemento debemos asignarle la clase relacionada con el efecto, que es: nudge (cuyo nombre respetaré en inglés porque es una palabra muy específica que significa –dar suavemente con el codo-, y no está de más agregarla a nuestro vocabulario técnico.

JQuery

<script language="javascript">
$(document).ready(function() {
	$('a.nudge').hover(function() {
		$(this).animate({ paddingLeft: '35px' }, 400);
	}, function() {
		$(this).animate({ paddingLeft: '15px' }, 400);
	});
});
</script>

Localizamos el elemento al que se la ha aplicado la regla de estilo «nudge». La clase .hover permite manejar los dos estados del elemento sobre el que se pasa el raton: uno cuando «entra» y otro cuando «sale». En ambos estados se aplica .animate, a la que se le pasa como primer parámetro la regla» padding» y como segundo el tiempo en milisegundos que esta animación debe durar.

CSS

#menu_nudging{
	width:235px;
	background-color: #fff;
}
#menu_nudging ul{
	list-style:none;
}
#menu_nudging li{
	list-style:none;
	margin:1px 0;
}
#menu_nudging li a{
	list-style:none;
	background: url(../imagenes/efecto_nudging/fdo_normal.gif) no-repeat;
	color:#fff;
	text-transform:uppercase;
	font-size:14px;
	text-decoration:none;
	display:block;
	height:30px;
	line-height:30px;
	padding:0 0 0 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
#menu_nudging li a:hover{
	background: url(../imagenes/efecto_nudging/fdo_sobre.gif) no-repeat;
	color:#fff;
	text-decoration:none;
}

La referencia para esta práctica la he tomado del blog de webintenta, al que te remito para completar la información y distrutar de alguno de sus excelentes artículos. Espero que te la hayas pasado bien por aquí.

]]> Acordeon con JQuery y CSS https://www.pcpolis.es/blog/css/acordeon-con-jquery-y-css/ Wed, 21 Jul 2010 12:34:08 +0000 https://www.pcpolis.es/blog/?p=269 Este es uno de los widgets que más se están usando por su funcionalidad y sencillez. El códio lo he visto en la página de SohTanaka, y me gustó mucho la forma en que presenta el tutorial, así que he decidido seguir sus consejos e intentar analizar el código para ver cómo funciona, además de aportar algo más en el diseño.

Ej. 1: Acordeon con JQuery y CSS

JQuery + CSS
AcordeonMétodo: .toggle()

Diseño y Mantenimiento Web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor. Duis vel tortor sit amet orci egestas laoreet id ac nibh.

MAQUETACIÓN

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Distintos lengüajes de diseño

HTML, CSS, JavaScript

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor.

Duis vel tortor sit amet orci egestas laoreet id ac nibh. Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris.

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Proyectos

Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris. Fusce mattis euismod mi, ut condimentum lectus consectetur quis. Ut lectus sem, ullamcorper ut gravida sagittis, consequat scelerisque lacus.

Desarrollo y Mantenimiento

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Páginas Comerciales

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante odio, aliquet id blandit ut, varius vel neque. Nam adipiscing, magna ac pulvinar porta, orci sapien convallis nisi, id imperdiet odio purus quis orci. Phasellus sed elit sapien, vel viverra est. Morbi leo leo, posuere et fermentum non, vulputate at tortor. Duis vel tortor sit amet orci egestas laoreet id ac nibh. Suspendisse malesuada risus velit. Quisque egestas sem non ligula pellentesque pharetra. Sed sed est mauris. Fusce mattis euismod mi, ut condimentum lectus consectetur quis. Ut lectus sem, ullamcorper ut gravida sagittis, consequat scelerisque lacus.

Asesoramiento

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

HTML

Consiste en varios pares de bloques compuestos de Título y Contenido.

<div class="acordeon">
    <!--Pares de Título y Contenido -->
    <!--Par-1 -->
    <h2 class="accion"><a href="#">Título</a></h2>
    <div class="acordion_cont">
        <div class="bloque">
        	<!--Texto e Imágenes -->
        </div>
    </div>
</div>
CSS

Lo más importante es el fondo y el padding de la etiqueta h2. Aquí se ha utilizado una misma imagen para los dos estados, activo y reposo, variando la posición de la imagen de top para el esado en reposo y bottom para el estado activo.

La clase «acordion_cont» asignada al div que le sigue al título, será luego utilizada para localizar el elemento que debe mostrarse y ocultarse. Contine a su vez un div al que se le ha aplicado la clase «bloque» con un padding de 20px.

JQuery
/* Acordeon */
$(document).ready(function(){
	$(".acordion_cont").hide();
	$('.accion:first').addClass('active').next().slideToggle("slow");
	$('.accion').click(function(){
	if( $(this).next().is(':hidden') ) {
		$('.accion').removeClass('active').next().slideUp();
		$(this).toggleClass('active').next().slideDown();
	}
	return false;
	});
});

Cuando se carga el documento:

    1. Se oculta todo el contenido con la clase que se ha pasado como localizador, en este caso: .acordion_cont
    2. La pseudoclase :first permite determinar el primero de los elementos al que se le ha aplicado la clase ‘accion’, para activarlo. Luego se localiza de manera similar el siguiente elementto del mismo tipo (div) y se le aplica el método .slideToggle(), que consiste en colapsar alternativamente su altura.

Cuando hacemos click:

    1. Se le aplica el método .toggleClass() al elemento pulsado. Este método permite agregar o quitar la clase ‘active’ que es la que se le ha pasado como parámetro. Acto seguido se determina el siguiente elemento y se muestra mediante .slideDown().
    2. Una línea más se ha agregado como condicional, para completar la funcionalidad del widget y que no se nos queden abiertas las ventanas según las usamos. Para ello se usa el condicional «if» que determina en primer lugar si presionamos el título de una ventana que esté cerrada, de otra manera no ocurrirá nada. Si la ventana está cerrada, quitará todos los elementos que tengan la clase ‘active’ y cerrará el contenedor abierto. Finalmente otorga la clase ‘active’ al elemento pulsado y abre el contenedor que le corresponde, y que es el siguiente.
]]> Menú con JQuery y CSS https://www.pcpolis.es/blog/css/menu-con-jquery-y-css/ Sat, 17 Jul 2010 17:02:29 +0000 https://www.pcpolis.es/blog/?p=264 ¿Echas de menos Flash? Los efectos que se logran con este programa son irremplazables, pero ha habido que ceder un poco a favor de la funcionalidad e interactividad de la Web. En cualquier caso Flash también es código, así que para conseguir algunos movimientos útiles también nos podemos ayudar de JavaScript, en este caso de la librería JQuery.

Ejemplo 1: Menú con Desplazamiento Horizontal

HTML

Un div contenedor (#menu_hor) y otros tantos div(#menu1, #menu2 y #menu3) como elementos de menú se quiera.

CSS

Es importante que el div contenedor (#menu_hor) tenga asignada una posición relativa, de esa manera al asignarle una posición absoluta a los tres menus interiores, su posición será con respecto a este div. Otra propiedad importante sera que el desbordamiento sea oculto, para que únicamente muestre aquella parte de las imagenes que nos interesa. Sus medidas dependeran de las imagenes que se utilicen.

Para los elementos del menú, la clase que apliquemos servirá de referenencia para ejecutar los cambios con javascript. Aquí lo importante es su posicionamiento, que debe ser absoluto, y su ubicación dentro del contenedor, que dependerá de cada elemento: left:0px, left:40px y left:80px. De esa forma se muestran las leyendas situadas en el extremo izquierdo.

JQuery

La clase JavaScript necesaria para conseguir este efecto es .animate(), su sintaxis es la siguiente:

.animate( properties, [ duration ], [ easing ], [ callback ] )

y la función clave sería la siguiente:

$(document).ready(function(){

	/* menu1 */
	$("#menu1").mouseover(function(){
      $(".bloque2").animate({"left": "440px"}, "slow");
	  $(".bloque3").animate({"left": "480px"}, "slow");
    });
});
  1. En primer lugar nos auxiliamos de un gestor de eventos ( mouseover) que se ha asignado al div #menu1, que desencadena el resto de acciones
  2. La función clave, a la que se le pasan dos parámetros: la propiedad css de la capa que tiene asignada la clase bloque2 y el tiempo en el que se desea que se ejecute esta acción.

El resto del script, que puedes ver a continuación en la sección de código, es una variación de esta primera parte, combinándola como se desee que ocurran las transiciones en el resto de elementos del menú.

Ver Código(+/-)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://www.pcpolis.es/blog/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

<script>
$(document).ready(function(){

/* menu1 */
$("#menu1").mouseover(function(){
$(".bloque2").animate({"left": "440px"}, "slow");
$(".bloque3").animate({"left": "480px"}, "slow");
});

/* menu2 */
$("#menu2").mouseover(function(){
$(".bloque2").animate({"left": "40px"}, "slow");
$(".bloque3").animate({"left": "480px"}, "slow");
});

/* menu3 */
$("#menu3").mouseover(function(){
$(".bloque3").animate({"left": "80px"}, "slow");
$(".bloque2").animate({"left": "40px"}, "slow");
});

});
</script>
<style>
img {
border:none;
}

#contenedor {
width:520px;
background-color: #999999;
height:250px;
overflow:hidden;
position:relative;
}

.bloque1 {
background-color:#757C08;
left:0px;
width:440px;
height:250px;
margin:0px;
top: 0px;
position:absolute;
}

.bloque2 {
background-color:#6F8C94;
left:440px;
width:440px;
height:250px;
margin:0px;
top: 0px;
position:absolute;
}

.bloque3 {
background-color:#782748;
left:480px;
width:440px;
height:250px;
margin:0px;
top: 0px;
position:absolute;
}
</style>
</head>
<body>
<div id="contenedor">



</div>
</body>
]]> Tooltip con JQuery https://www.pcpolis.es/blog/css/tooltip-con-jquery/ Wed, 16 Jun 2010 11:31:18 +0000 https://www.pcpolis.es/blog/?p=252 Todo lo que a los ojos del usuario es sencillo y funcional: es bueno. De manera que practiquemos un poco más con las posibilidades que nos ofrece la librería JQuery para mejorar y optimizar la presentación del contenido de nuestra web.Un tooltip es ese pequeño letrero con fondo amarillo que nos muestra información adicional cuando situamos el puntero sobre un determinado enlace. Partiendo de ahí ha evolucioado hasta el punto en que ya podemos cargar contenidos mucho más complejos.  Aquí van unos cuantos ejemplos de cómo se pueden combinar el código javascript -especialmente la librería JQuery- y las Hojas de Estilo (CSS) para conseguir estos resultados.

Ej. 1 : Tooltip de Texto

Cuando sitúe el puntero del ratón sobre este enlace, aparecerá un pequeño texto de información. Al mover el puntero, la caja de texto se moverá también mientras nos encontremos dentro de los límites del enlace, y desaparecerá cuando nos alejemos. Para conseguir este resultado necesitamos:

  1. La librería JQuery
  2. Una función JavaScript que permita añadir un nuevo elemento html a la página y otra  que calcule la posición en la que estará situado el puntero del ratón. Ambas en el fichero tooltip.js que más abajo se incluye con las anotaciones del autor.
  3. También necesitaremos una hoja de estilo que defina la apariencia de la caja de texto o elemento emergente.
Ej. 2: Tooltip con Imágenes

Galería (sin Leyenda)

  • gallery thumbnail
  • gallery thumbnail
  • gallery thumbnail
  • gallery thumbnail

Galería (con Leyenda)

  • gallery thumbnail
  • gallery thumbnail
  • gallery thumbnail
  • gallery thumbnail
Ejemplo 3: Tooltip con Imágenes y texto

Pasa el puntero por el siguiente enlace de Plantillas para obtener una vista previa de la imagen. Y en el enlace de PCPolis encontrarás la misma imagen que incluye un texto explicativo.

Problemas y Soluciones

A continuación relaciono los problemas con los que me encontré llevando a la práctica los ejemplos de este artículo y la forma en que pude solucionarlos. Me parece una buena idea incluir este apartado, pues la mayoría de las veces cometemos errores que suelen ser comunes y a pesar de ser pequeños generan auténticos dolores de cabeza.

  1. En el Ej.1 no aparecía el tooltip. Solución: La etiqueta anchor del enlace debe tener la clase tooltip y no la había incluído: <a class=»tooltip» title=»Ejemplo de…
  2. En el Ej..2 no aparecían las imágenes. Solución: No tenía bien escrita la ruta a las imagenes, que es diferente en mi caso.
  3. Había un conflicto entre librerías JQuery debido a que estaba cargando dos archivos jquery.js distintos. La plantilla que utilizo carga esta librería automáticamente desde wp-includes / js / jquery /jquery.js y en algunos casos habrá que sustituirla por una versión más reciente.
ENLACES RELACIONADOS

Alen Grakalic (http://cssglobe.com)

En cssglobe puedes ver el artículo original en inglés y descargar los archivos de ejemplo. Espero que hayas disfrutado y que este artículo haya resultado de utilidad.

Mostrar / Ocultar el Código

(+/-)

Estilos CSS
Nota. En el ejemplo original están incluídos en el propio archivo html. Los que incluyo tienen algunas modificaciones necesarias para wordpress.

/* ESTILOS PARA TOOLTIP

Ejemplo 1 */

#emergente1 h1{
font-size:180%;
font-weight:normal;
color:#555;
}

#emergente1 a{
text-decoration:none;
color:#f30;
}

#emergente1 a:hover {
background-color: transparent;
}

#emergente1 p{
clear:both;
margin:0;
padding:.5em 0;
}

#emergente1 pre{
display:block;
font:100% «Courier New», Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

#tooltip{
position:absolute;
border:1px solid #CCCCCC;
padding:2px 5px;
color:#FFFFFF;
display:none;
background-color: #2d83d5;
font-weight: bold;
}

#emergente a:hover {
background-color: transparent;
}

/* Ejemplo 2 */

#emergente2 {
display:block;
overflow:hidden;
}

#emergente2 h1{
font-size:180%;
font-weight:normal;
color:#555;
}

#emergente2 h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}

#emergente2 a{
text-decoration:none;
color:#f30;
}

#emergente2 p{
clear:both;
margin:0;
padding:.5em 0;
}

#emergente2 pre{
display:block;
font:100% «Courier New», Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

#emergente2 img    {
border: 1px solid #CCCCCC;
margin-bottom:7px;
}

#emergente2 ul,li{
margin:0!important;
padding:0;
}

#emergente2 li{
list-style:none;
float:left;
display:inline;
margin-right:0px;
}

#preview{
position:absolute;
border:1px solid #ccc;
padding:5px;
display:none;
color:#666666;
background-color: #fff;
text-align: center;
line-height: 2em;
}

#emergente2 a:hover {
background-color: transparent;
}

/* Ejemplo 3  */

#emergente3 h1{
font-size:180%;
font-weight:normal;
color:#555;
}

#emergente3 h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}

#emergente3 a{
text-decoration:none;
color:#f30;
}

#emergente3 p{
clear:both;
margin:0;
padding:.5em 0;
}

#emergente3 pre{
display:block;
font:100% «Courier New», Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

#emergente3 img{border:none;}

#emergente3 ul,li{
margin:0;
padding:0;
}

#emergente3 li {
list-style:none;
float:left;
display:inline;
margin-right:10px;
}

#screenshot {
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
line-height:2em;
text-align:center;
}

#emergente3 a:hover {
background-color: transparent;
}

Arvhivo JavaScript

tooltips.js

/*
* Tooltip script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/

this.tooltip = function(){
/* CONFIG */
xOffset = -18;
yOffset = 0;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$(«a.tooltip»).hover(function(e){
this.t = this.title;
this.title = «»;
$(«body»).append(«<p id=’tooltip’>»+ this.t +»</p>»);
$(«#tooltip»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»)
.fadeIn(«fast»);
},
function(){
this.title = this.t;
$(«#tooltip»).remove();
});
$(«a.tooltip»).mousemove(function(e){
$(«#tooltip»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»);
});
};

// starting the script on page load
$(document).ready(function(){
tooltip();
});

/*
* Image preview script
*/

this.imagePreview = function(){
/* CONFIG */

xOffset = -18;
yOffset = 0;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/*     END CONFIG NOTAS:
hover es un gestor de evento para cuando se pasa el ratón sobre un objeto
hover( over, out )
*/
$(«a.preview»).hover(function(e){
this.t = this.title;
this.title = «»;
var c = (this.t != «») ? «<br/>» + this.t : «»;
$(«body»).append(«<p id=’preview’><img src='»+ this.href +»‘ alt=’Image preview’ />»+ c +»</p>»);
$(«#preview»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»)
.fadeIn(«fast»);
},
function(){
this.title = this.t;
$(«#preview»).remove();
});
$(«a.preview»).mousemove(function(e){
$(«#preview»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»);
});
};

// starting the script on page load
$(document).ready(function(){
imagePreview();
});

/*
* Url preview script
*/

this.screenshotPreview = function(){
/* CONFIG */

xOffset = -18;
yOffset = 0;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/* END CONFIG */
$(«a.screenshot»).hover(function(e){
this.t = this.title;
this.title = «»;
var c = (this.t != «») ? «<br/>» + this.t : «»;
$(«body»).append(«<p id=’screenshot’><img src='»+ this.rel +»‘ alt=’url preview’ />»+ c +»</p>»);
$(«#screenshot»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»)
.fadeIn(«fast»);
},
function(){
this.title = this.t;
$(«#screenshot»).remove();
});
$(«a.screenshot»).mousemove(function(e){
$(«#screenshot»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»);
});
};

// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});

]]> Llamadas de texto y Notas al Pie https://www.pcpolis.es/blog/css/llamadas-de-texto-y-notas-al-pie/ Mon, 31 May 2010 13:01:36 +0000 https://www.pcpolis.es/blog/?p=205 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;
}

]]>