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 CSS – Ideas Fugaces https://www.pcpolis.es/blog Algunas buenas ideas que se presentan sin avisar... Fri, 22 Nov 2019 17:33:18 +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%'
			});
		}
	});
}
]]> Usabilidad y Accesibilidad de la Web https://www.pcpolis.es/blog/css/usabilidad-y-accesibilidad-de-la-web/ Fri, 12 Nov 2010 16:18:58 +0000 https://www.pcpolis.es/blog/?p=311

El avance de Internet y el desarrollo de la tecnología, hacen necesario adecuarse a estos cambios. Con ello conseguimos que nuestra web siga funcionando correctamente y lo haga conforme a las nuevas tendencias y normativas.

Uno de los aspectos más importantes está relacionado con la Usabilidad y Accesibilidad. Ley 56/2007: «A partir del 31 de diciembre de 2008, las páginas de Internet de las Administraciones Públicas satisfarán, como mínimo, el nivel medio de los criterios de accesibilidad al contenido generalmente reconocidos… No basta con tener una Web estética si al mismo tiempo no es fácil de usar y accesible a todo tipo de usuarios. Para conseguir este objetivo se han ido implementando una serie de normas por las que podemos guiarnos y herramientas que nos hacen más fácil el trabajo.

En el Sitio del Consorcio W3C podemos encontrar más información al respecto, además de enlaces a herramientas que nos permiten validar nuestro código XHTML y CSS.

Una vez comprobado y validado el código, debemos encargarnos de los detalles de la Accesibilidad. Se han definido diferentes niveles de conformidad con las WCAG 1.0:

Niveles de Accesibilidad

Niveles de Accesibilidad

Niveles de Accesibilidad

  • Nivel «A» de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1;
  • Nivel «Doble-A» de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1 y 2;
  • Nivel «Triple-A» de Conformidad: Se han satisfecho todos los puntos de verificación de Prioridad 1, 2, y 3.

Estas son las directrices de la W3C que podemos usar como lista de comprobación para conseguir que nuestra página sea accesible.

Directrices

  1. PROPORCIONAR ALTERNATIVAS EQUIVALENTES PARA EL CONTENIDO VISUAL Y AUDITIVO
    Proporcionar contenido que, cuando se le presente al usuario, tenga esencialmente la misma función o propósito tanto como contenido visual como auditivo.
  2. NO CONFÍE SÓLO EN EL COLOR
    Asegúrese de que el texto y los gráficos son comprensibles cuando se vean sin color
  3. USO APROPIADO DEL CÓDIGO Y DE LAS HOJAS DE ESTILO
    Cree los documentos con los elementos estructurales apropiados. Use Hojas de Estilos en la presentación, en lugar de utilizar los atributos en el propio código.
  4. PROCURAR EL USO DE LENGUAJE NATURAL
    Utilizar código que facilite la pronunciación o interpretación de texto abreviado o en otro idioma
  5. CREE TABLAS QUE SE TRANSFORMEN CORRECTAMENTE
    Asegúrese de que las tablas poseen el código necesarios para transformarlas mediante navegadores accesibles y otros agentes de usuario.
  6. ASEGÚRESE DE QUE LAS PÁGINAS QUE USAN NUEVAS TECNOLOGÍAS SE TRANSFORMAN CORRECTAMENTE
    Asegúrese de que las páginas son accesibles incluso cuando las nuevas tecnologías no sean compatibles o están apagadas.
  7. ASEGURAR EL CONTROL DE USUARIO DE LOS CONTENIDOS SENSIBLES A LOS CAMBIOS DE TIEMPO
    Asegúrese de que el movimiento, desplazamiento, o la actualización automática de objetos y páginas puede ser pausada o detenerse.
  8. ASEGURAR LA ACCESIBILIDAD DIRECTA DE LAS INTERFACES DE USUARIO INCRUSTADAS
    Asegúrese de que la interfaz de usuario sigue los principios del diseño accesible: independiente del dispositivo de acceso a la funcionalidad, operatividad del teclado, voz propia, etc.
  9. DISEÑO PARA DISPOSITIVOS INDEPENDIENTES
    Uso de las características que permiten la activación de elementos de la página a través de una variedad de dispositivos de entrada.
  10. UTILICE SOLUCIONES PROVISIONALES
    Utilice soluciones de accesibilidad provisionales por lo que las ayudas técnicas y los navegadores más antiguos funcionarán correctamente.
  11. Utilice las tecnologías del W3C y las directrices
    Utilice las tecnologías W3C (de acuerdo a las especificaciones) y siga las pautas de accesibilidad. Cuando no sea posible utilizar una tecnología W3C, o hacer que los resultados en el material no se transformen correctamente, proporcione una versión alternativa del contenido que sea accesible.
  12. PROPORCIONAR INFORMACIÓN DE CONTEXTO Y ORIENTACIÓN
    Proporcionar información de contexto y orientación para ayudar a los usuarios a entender las páginas o elementos complejos.
  13. PROPORCIONE MECANISMOS CLAROS DE NAVEGACIÓN
    Proporcionar mecanismos de navegación coherente y clara – información de orientación, barras de navegación, un mapa del sitio, etc – para aumentar la probabilidad de que una persona va a encontrar lo que busca en el sitio.
  14. ASEGÚRESE DE QUE LOS DOCUMENTOS SEAN CLAROS Y SIMPLES
    Asegúrese de que los documentos sean claros y simples para que puedan ser más fáciles de entender.

Espero que hayas disfrutado del artículo y que sea de utilidad. Para más información puedes visitar este aparartado en la W3C.

Test de Accesibilidad

Entre las herramientas que nos permiten comprobar el nivel de accesibilidad de nuestro Sitio, están los siguientes:

]]> 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>
]]> Fichas con JavaScript https://www.pcpolis.es/blog/css/fichas-con-javascript/ Thu, 01 Jul 2010 16:19:19 +0000 https://www.pcpolis.es/blog/?p=259 En este tutorial se muestra la manera de hacer fichas ( Slick Tabbed ) similares a las que se pueden hacer con Dreamweaver y la librería Spry. En este caso la librería que utilizaremos en primer lugar será JQuery, pero lo importante es comprender la manera en que está construido este fichero y cómo utiliza tanto los elementos de Estilos CSS como los scripts que permiten su ejecución.

Este es el resultado final:

Olvídate de MíFicha Técnica

  • Título OriginalEternal Sunshine of the Spotless Mind
  • Año2004
  • PaísU.S.A.
  • DirectorMichel Gondry
  • RepartoJim Carrey, Kate Winslet
  • Joel (Jim Carrey) se queda asombrado y aturdido cuando se entera de que su novia Clementine (Kate Winslet) ha borrado de su cerebro los recuerdos de su tumultuosa relación. Desesperado, Joel contacta con el inventor del proceso, el Dr. Howard Mierzwiak (Tom Wilkinson) para eliminar cualquier recuerdo de Clementine de su propia memoria.Pero sucede que, mientras los recuerdos progresivamente desaparecen, Joel comienza a redescubrir su pasión inicial. (FILMAFFINITY)
Trailer situado en Youtube.

Lo que viene a continuación es una interpretación del excelente tutorial en inglés que encontré en la página de nettut+, y esta vez voy evitar la técnica de resumen que caracteriza a este blog por respeto a la meticulosidad y paciencia que nos ha ofrecido su autor. Por supuesto, he procurado aportar algo yo también.

Aquí puedes ver el Ejemplo de NetTut+ en acción.

Paso 1: crear una apariencia adecuada para las fichas

He descargado el psd del ejemplo para practicar, pero luego he creado una apariencia diferente en Photoshop. Aunque, como podrán comprobar, la mayor parte del formato se consigue con los colores de fondo.

Paso 2: crear la estructura del fichero

1) Crear un div contenedor, lo que nos facilitará su manipulación.

2) Crear el encabezado, probablemente con una etiqueta de título (h)

3) Debajo hay que crear otro div que contenga todas las pestañas y el contenido. Será la que tenga el fondo gris oscuro (en el original).

4) Los siguiente será un div que contenga una lista desordenada en la que cada elemento (li) será una pestaña y sus enlaces <a> nos permitirán configurar su apariencia, darles comportamiento de rollovers y cambiar su estado a on/off.

5) Finalmente crearemos div en los que estará el contenido de cada pestaña, y lo mostraremos u ocultaremos dependiendo de qué pestaña esté activa. Todo quedaría de la siguiente manera:

¡Importante! Si no vez el código, recarga la página.

<div>
<h4>Heading</h4>
    <div>
        <ul>
            <li><A>Pestaña</A></li>
            <li><A>Pestaña</A></li>
            <li><A>Pestaña</A></li>
        </ul>
        <div>Contenido Tab 1</div>
        <div>Contenido Tab 2</div>
        <div>Contenido Tab 3</div>
</div>
Paso 3: crear el fondo en Photoshop

Yo he utilizado una superposición de motivo: polvo azul ( 128 x 128 ). También he creado dos degradados, uno para los enlaces y otro para el fondo de la ficha, lo que crea un bonito efecto de sombra.

polvo azul
Degradado del Enlace
Degradado del Fondo

Paso 4: crear los ficheros fichas.html y estilos.css
fichas.html

La estructura del fichero html quedaría como sigue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Ejemplo de fichas - Simple</title>
	<link rel="stylesheet" href="estilos.css" type="text/css" media="screen" />
</head>

<body>

<div id="tabbed_box_1" class="tabbed_box">
	<h4>Olvídate de mí<small>Ficha técnica</small></h4>
    <div class="tabbed_area">

        <ul class="tabs">
            <li><a href="" id="tab_1" class="active">Fichas</a></li>
            <li><a href="" id="tab_2">Sinopsis</a></li>
            <li><a href="" id="tab_3">Trailer</a></li>
        </ul>

        <div id="content_1" class="content">Contenido de la Ficha 1</div>
        <div id="content_2" class="content">Contenido de la Ficha 2</div>
        <div id="content_3" class="content">Contenido de la Ficha 3</div>

    </div>

</div>

</body>
</html>

Estos son algunos aspectos a destacar sobre la estructura del código:

  1. El título se ha colocado en un elemento <small> cuyo contenido de texto siempre será inferior en una unidad al tamaño del elemento que lo precede. Para un texto normal, equivaldría a <Font size = “-1”>
  2. Se le ha dado un id a los div para poder utilizarlos en la página.
  3. Se le ha dado una clase al elemento <ul>.
estilos.css

Estos son algunos de los aspectos a tener en cuenta para los estilos.

Hay que insistir que el método de ir dando los estilos de afuera hacia adentro se debe a la forma en que funcionan las Hojas de Estilo en Cascada, es decir, nos aseguramos que cualquier estilo de los elementos interiores se sobrescriba y no a la inversa.

Estilos del Título
  1. Centraremos el div contenedor #tabbed_box dándole un ancho determinado y asignando a los márgenes izquierdo y derecho la propiedad: auto.
  2. Se ha dado estilo a la etiqueta h4 como parte de un div (.tabbed_box h4) y no directamente, teniendo en cuenta que puede cambiar en página grandes. Se ha establecido su margen de fondo en 10 pix. Hay que tener en cuenta que muchos elementos tienen valores predeterminados y en el caso de la etiqueta h4 el margen de fondo es mayor que el que deseamos, por ello hay que especificarlo.
  3. Se le ha dado una posición relativa al elemento <small> para poder posicionarlo un poco más a la derecha y arriba. Su espacio entre letras se ha tenido que redefinir a 0, pues en caso contrario heredaria el espaciado -1 de la etiqueta h4.
Estilos de la Lista Desordenada
  1. Para los elementos de la lista desordenada, quitamos todos los paddings y margins otorgándoles un valor de cero. La propiedad ‘inline’ los mantendrá a todos dispuestos en la misma línea y no cada uno en una lína diferente, como correspondería a la forma predeterminada de display: block. También se eliminan los iconos que de manera predeterminada llevan todas las listas desordenadas.
Estilos de los enlaces de cada una de las tres pestañas
  1. Se han creado los estilos para los estados de: reposo, sobre y activo.
  2. En este paso se le dice a todos los elementos con la clase contenido que deben tener un fondo blanco, y se hacen invisibles los elementos que no están activos.

Nota.

Mas tarde, con el uso de JavaScript se alternarán los estados visible y oculto de estos elementos con las propiedades display: block y display:none.

Otros estilos a destacar
  1. Para eliminar el borde sobrante en la parte inferior, se ha utilizando un pseudo-selector denominado last-clild ( último elemento hijo ).

Código JavaScript

( sin JQuery )

  1. En primer lugar hay que crear un archivo javascrip con la función o funciones que permitirán ejecutar las acciones de ocultar y mostrar el contenido.

    2. La función javascript que utilizamos es la siguiente:

    function tabSwitch_2(active, number, tab_prefix, content_prefix) {   

    for (var i=1; i < number+1; i++) {
      document.getElementById(content_prefix+i).style.display = 'none';
      document.getElementById(tab_prefix+i).className = '';
    }
    document.getElementById(content_prefix+active).style.display = 'block';
    document.getElementById(tab_prefix+active).className = 'active';       

}

    En esta función se asume que tenemos un juego de pestañas y su correspondiente contenido con un prefijo que será: tab_1, tab_2 … and content_1, content_2 …

    El primer argumento de la función: active, hace referencia al elemento activo que debe mostrarse. El segundo argumento: number, se refiere al número de pestañas que están siendo usadas. Y el tercer y cuarto argumentos se refieren a los prefijos usados en los Ids de nuestros elementos del dom.

    – Eso significa que si queremos que haya dos ficheros, sólo tendremos que cambiar los prefijos y podremos usar la misma función todas las veces que queramos.

  2. Crear un enlace a este archivo en la cabecera del archivo html.
  3. Agregar código javascript en cada uno de los tres enlaces contenidos en los elementos li de la siguiente manera:
       <ul class="tabs">
            <li><a href="javascript:tabSwitch_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">Fichas</a></li>
            <li><a href="javascript:tabSwitch_2(2, 3, 'tab_', 'content_');" id="tab_2">Sinopsis</a></li>
            <li><a href="javascript:tabSwitch_2(3, 3, 'tab_', 'content_');" id="tab_3">Trailer</a></li>
        </ul>

( JQuery )

Podemos usar esta librería para dar un poco más de animación al fichero que hemos conseguido. Lo primero es ir al sitio oficial de JQuery y descargar la última versión.

La librería JQuery contiene una gran cantidad de funciones que permiten seleccionar grupos de elementos. Por ejemplo, si quisieramos seleccionar todos los enlaces (<a>) de una página y hacer que desaparecieran con un efecto de deslizado hacia arriba, tendríamos que poner en la cabecera de la página el siguiente codigo:

<script src="scripts/jquery-1.2.3.min.js"></script>

<script>

//Cuando se cargue el Dto. ejecuta el contenido ...

$(document).ready(function(){

$("a").slideUp();

});

</script>

Colocando el código anterior en la cabecera de nuestro documento podremos comprobar que todos los enlaces desaparecen con un efecto de deslizamiento hacia arriba.

Trabajo con los Selectores ( Pestañas )

Después de practicar, vamos a modificar el código de nuestras pestañas eliminando la parte de javascript y añadiendo el atributo title y una clase más: tab. De esta manera podremos referirnos a todos los elementos que contengan la clase tab o cuyo id corresponda al atributo title.

        <ul class="tabs">
            <li><a href="#" title="content_1" class="tab active">Ficha</a></li>
            <li><a href="#" title="content_2" class="tab">Sinopsis</a></li>
            <li><a href="#" title="content_3" class="tab">Trailer</a></li>
        </ul>

Ahora, con estos dos elementos, se pueden utilizar todos los enlaces con la clase “tab” y se puede localizar cualquier elementos cuyo Id sea igual que el atributo title del enlace que haya sido pulsado. Necesitamos añadir el enlace a la librería en la cabecera de nuestra página y añadir una nueva función a nuestro fichero javascript:

<script src="scripts/jquery-1.2.3.min.js"></script>

Esta nueva función, básicamente, lo que hace es ocultar todas las pestañas cuando se carga el documento y dejar visible sólo la que está activa:

// cuando el documento se cargue, ejecuta el contenido ...
$(document).ready(function(){

// cuando se pulsa un enlace
$("a.tab").click(function () {

// desactiva todas las fichas
$(".active").removeClass("active");

// activa la ficha seleccionada
$(this).addClass("active");

// oculta los elementos con la clase 'content' con deslizamiento hacia arriba
$(".content").slideUp();

// Detecta el atributo 'title' de la ficha seleccionada y encuentra el elemento con el miso Id. Entonces lo muestra con un deslizamiento hacia abajo.
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();

});

});
</script>

Y con eso queda terminado nuestro ejemplo. En la página de Jquery hay una variante para la construcción de un fichero que aporta sencillez y otra manera de conseguir los mismos resultados.

Nos queda pendiente un ejemplo de fichero con las facilidades que nos brinda Dreamweaver, y la librería Spry. Espero que hayas disfrutado del tutorial.

A continuación tienes el código de mi ejemplo, varía sobre todo en los estilos, pues he tenido que adaptarlo a WordPress. Recuerda que el artículo original de Collis Ta’eed está muy bien detallado.

Ver Código (+/-)
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>Ejemplo de Fichas con JQuery</title>
    <!--Cargar los estilos -->
    <link rel=”stylesheet” href=”fichas_estilos.css” type=”text/css” media=”screen” />
    <!--Cargar la librería jquery el archivo con las funciones javascript -->
    <script src=”scripts/jquery-1.4.2.min.js”></script>
    <!--Cargar el archivo con las funciones javascript -->
    <script src=”fichas_functions.js” type=”text/javascript”></script>
</head>
<body>
<div id=”tabbed_box” class=”tabbed_box”>
  <h4>Olvídate de Mí<small>Ficha Técnica</small></h4>
  <div class=”tabbed_area”>
    <ul class=”tabs”>
      <li><a href=”#” title=”content_1″ class=”tab active”>FICHA</a></li>
      <li><a href=”#” title=”content_2″ class=”tab”>Sinopsis</a></li>
      <li><a href=”#” title=”content_3″ class=”tab”>Trailer</a></li>
    </ul>
    <div id=”content_1″ class=”content”>
      <ul>
        <li><img src=”imagenes/olvidate_de_mi.jpg” /></li>
        <li>Título Original<small>Eternal Sunshine of the Spotless Mind</small></li>
        <li>Año<small>2004</small></li>
        <li>País<small>U.S.A.</small></li>
        <li>Director<small>Michel Gondry</small></li>
        <li>Reparto<small>Jim Carrey, Kate Winslet</small></li>
      </ul>
    </div>
    <div id=”content_2″ class=”content”>
      <ul>
        <li>Joel (Jim Carrey) se queda asombrado y aturdido cuando se entera de que su novia Clementine (Kate Winslet) ha borrado de su cerebro los recuerdos de su tumultuosa relación. Desesperado, Joel contacta con el inventor del proceso, el Dr. Howard Mierzwiak (Tom Wilkinson) para eliminar cualquier recuerdo de Clementine de su propia memoria.
          <P>Pero sucede que, mientras los recuerdos progresivamente desaparecen, Joel comienza a redescubrir su pasión inicial. (FILMAFFINITY)</P>
        </li>
      </ul>
    </div>
    <div id=”content_3″ class=”content”>
      <ul>
        <li>Trailer situado en Youtube, con subtítulos.</li>
        <li>
          <object width=”425″ height=”344″>
            <param name=”movie” value=”http://www.youtube.com/v/IVpd3iGszU0&hl=es_ES&fs=1&”>
            </param>
            <param name=”allowFullScreen” value=”true”>
            </param>
            <param name=”allowscriptaccess” value=”always”>
            </param>
            <embed src=”http://www.youtube.com/v/IVpd3iGszU0&hl=es_ES&fs=1&” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”344″></embed>
          </object>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>
estilos.css
@charset "utf-8";
/* CSS Document */

body {
	background-image:url(imagenes/fondo_2.jpg);
	margin:40px;
}

/* Centrar el contenido */
#tabbed_box {
	margin: 0px auto 0px auto;
	width:500px;
}

/* Encabezado */
.tabbed_box h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	color:#ffffff;
	letter-spacing:-1px;
	margin-bottom:10px;
}

.tabbed_box h4 small {
	color:#e3e9ec;
	font-weight:normal;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	position:relative;
	top:-4px;
	left:6px;
	letter-spacing:0px;
}

/* Elementos internos */
.tabbed_area {
	border:1px solid #494e52;
	background-color:#fff7b3;
	padding:8px;
}

/* Elementos de la lista */
ul.tabs {
	margin:0px; padding:0px;
}

ul.tabs li {
	list-style:none;
	display:inline;
}

/* Estilos a los enlaces de la lista desordenada */
ul.tabs li a {
	background-color:#464c54;
	color:#FFFFCC;
	padding:8px 14px 8px 14px;
	text-decoration:none;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	border:1px solid #464c54;
}
ul.tabs li a:hover {
	background-color:#2f343a;
	border-color:#2f343a;
}
ul.tabs li a.active {
	background-color:#ffffff;
	color:#282e32;
	border:1px solid #464c54;
	border-bottom: 1px solid #ffffff;
}

/* Estilos del contenido */
.content {
	background-color:#ffffff;
	padding:10px;
	border:1px solid #464c54;
}

#content_2, #content_3 { display:none; }

ul.tabs {
	margin:0px; padding:0px;
	margin-top:5px;
	margin-bottom:6px;
}

/* Paso 13. Agregar algunos estilos al contenido */
	.content ul {
	margin:0px;
	padding:0px 20px 0px 20px;
}
.content ul li {
	list-style:none;
	border-bottom:1px solid #d6dde0;
	padding-top:15px;
	padding-bottom:15px;
	font-size:14px;
}
.content ul li a {
	text-decoration:none;
	color:#3e4346;
}
.content ul li small {
	color:#8b959c;
	font-size:9px;
	text-transform:uppercase;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:relative;
	left:10px;
	top:0px;
}

.content ul li:last-child {
	border-bottom:none;
}

/* Paso 15. Imágenes para las pestañas y el fondo */
ul.tabs li a {
	background-image:url(imagenes/tab_off.jpg);
	background-repeat: repeat-x;
	background-position: top;
}
ul.tabs li a.active {
	background-image:url(imagenes/tab_on.jpg);
	background-repeat:repeat-x;
	background-position:top;
}
.content {
	background-image:url(imagenes/content_bottom.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
}
]]> 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;
}

]]>