Este pequeño script jQuery permite crear enlaces externos XHTML válidos usando la etiqueta “rel”. Este atributo se relaciona directamente con el script y adquiere el valor de enlace externo, para que pueda abrirse en una nueva ventana.

Para mantener la semántica de los microformatos usamos la etiqueta rel con el valor external, y lo llamamos a través de jQuery. Simple y muy útil, ya no hay excusa para no validar en la W3C.

Enlaces válidos

	
		
		

		
	
	
		Google!
		My site!
	

Fuente

No margin for errors

En este tutorial usaremos jQuery para crear un pequeño script que cambie el tamaño de la fuente al presionar un botón. Vamos a crear una sencilla interfaz con 3 botones, un texto y un poco de jQuery, uno de los frameworks javascript mas fáciles de usar.

La estructura xHtml y CSS

Antes que nada, debes establecer la llamada al archivo CSS y JS en el head del documento, para este ejemplo uso la versión 1.3.2 de jQuery.

En el “Body” tenemos el div “Botones” que contiene en su interior tres divs llamados “Boton” que alternarán el tamaño de la tipografía del texto cada vez que se haga click sobre ellos. Como podrás ver “Texto grande” y “Texto chico” tienen unas ID que se llaman “aumentar” y “disminuir”, esas ID son las que vamos a usar en el script para determinar cuando cambiar el tamaño tipográfico usando el condicional If/Else.

En el CSS, debemos especificar un tamaño de fuente para el “Body” que será el “Texto normal” y también crear las clases “grande” y “chica” con sus respectivos font-size.

Texto Grande
Texto Normal
Texto Chico


Titulo del texto

<p>In tempus lacus justo. Ut varius sagittis odio, et pretium metus mattis
at. Vivamus eleifend convallis nunc non scelerisque. Nulla tincidunt neque sed tortor
venenatis viverra. Nulla adipiscing rhoncus elit, fermentum cursus nisi ornare sit amet.
 Nunc sit amet neque ut lacus adipiscing gravida vel sit amet ante.</p>
<p>In tempus lacus justo. Ut varius sagittis odio, et pretium metus mattis at.
Vivamus eleifend
convallis nunc non scelerisque. Nulla tincidunt neque sed tortor venenatis viverra.
Nulla adipiscing rhoncus elit, fermentum cursus nisi ornare sit amet. Nunc sit amet
neque ut lacus adipiscing gravida vel sit amet ante.</p>

body{
font-size:12px;
background-color:#FFFAE6;
font-family:Arial, Helvetica, sans-serif;
}
#cuadro{
border:1px solid #CCCCCC;
width:700px;
}
/*Botones*/
#botones{
border:1px solid #CCCCCC;
padding:10px;
float:left;
margin-bottom:10px;
margin-right:30px;
}
.boton{
border:1px solid #FFFFCC;
background-color:#003366;
color:#FFFFFF;
font-size:14px;
float:left;
margin-right:10px;
padding:6px;
}
/*Tamaños de tipografías*/
.grande{
font-size:16px;
}
.chica{
font-size:9px;
}
/*Efecto de boton activo y hover*/
.seleccion{
font-weight:800;
}
.sobre{
background-color:#CC0000;
cursor:pointer;
}

El Script jQuery

El script en si es muy sencillo de entender, lo único que hace es agregar y quitar las clases “grande” y “chica” que están activas sobre el “Body”.

$(document).ready(function(){
$('#botones .boton').click(function(){ /*al hacer click en un botón*/
$('body').removeClass();    /*borre todas las clases*/
if(this.id == 'aumentar'){   /*si la clase botón tiene el ID aumentar*/
	$('body').addClass('grande');  /*cargue desde el CSS la clase grande*/
	}
else if(this.id == 'disminuir'){ /*si el ID es disminuir*/
	$('body').addClass('chica'); /*cargue la clase chica*/
}
$('#botones .boton').removeClass('seleccion'); /*elimine la negrita del boton*/
    $(this).addClass('seleccion');/*agregue la negrita al botón activo*/
 });
});

/*EFECTO HOVER*/
$(document).ready(function() {
  $('#botones .boton').hover(function() {
    $(this).addClass('sobre'); /*agregue efecto hover*/
  }, function() {
    $(this).removeClass('sobre');  /*quite efecto hover*/
  });
});

Resultado

En el siguiente enlace esta el ejemplo funcional del script. Con un poco de astucia se lo puede mejorar agregando botones y combinándolo con nuevas ideas.

Ver el ejemplo

Recursos complementarios

Descarga el framework jQuery

Además de poder descargar el framework, el sitio oficial tiene infinidad de recursos y tutoriales interesantes.

Ordena tus hojas de estilos

Stylenet es una herramienta online que ordena hojas de estilos CSS.

Aunque esto suene amateur, que por cierto los es para todos, día a día la gente se va sumando a internet y entre ellos están nuestros Padres, Abuelos y Tios que quizás alguna vez usaron la PC pero nunca entraron a internet.

Para todos ellos que escuchan hablar de correos, chat, flogs y mas, les dejo este tutorial para que puedan aprender a crear sus cuentas e insertarse en un nuevo mundo. El tutorial fue publicado por extremisimo.com donde describen paso a paso como crear una cuenta y como ingresar a la misma.

Via: Hotmail Correo

Incrustar un video en un sitio flash es muy sencillo, con unos simples pasos y la ayuda de Flash Encoder, nuestros videos pasaran a ser compatibles con la web y podrán reproducirse con los controles básicos FLVPlayback.

Como primer paso debemos convertir el video a formato .FLV, esto lo hacemos con el programa Flash Encoder que viene con el mismo Flash. Importamos el video, configuramos los parámetros a gusto (foto 2), tamaño, calidad, nombre etc.. y hacemos la conversión presionando el botón Iniciar Cola.

Al finalizar la conversión, cerramos el Flash Encoder y abrimos Flash, creamos un documento nuevo y presionamos CRTL + F7 para abrir el panel de componentes. Arrastramos el reproductor de video FLVPLayback al escenario.

Hacemos la combinación Mayus + F7 para abrir las propiedades del componente. En este panel seleccionamos la ruta al video que convertimos en Flash decoder. En el mismo panel podemos seleccionar la apariencia del reproductor modificando el parámetro Skin.

Hacemos CRTL + Enter y ya podemos ver el video funcionando con el componente de flash. Nota: El Skin que seleccionamos para el reproductor aparece como un archivo separado junto a los archivos trabajados, siempre hay que incluirlo en la misma carpeta para que los controles de reproducción sean visibles.

Newsticker fue recomendado hace un tiempo por Xiberneticos, un script JQuery que permite crear cajas animadas con noticias breves, esto desencadeno este post donde voy a fusionar Newsticker con Wordpress.

El efecto logrado es similar al que se puede ver en los post aleatorios de la sidebar del theme actual de Puente Cromático. A continuación vamos a crear los archivos newsticker.php, newsticker.css, newsticker.js, vamos a agregar algunas funciones a functions.php y descargaremos el framework jQuery.

Configurando el Header

En el header necesitamos poner los enlaces a los archivos .js, .css y una función llamada jQuery.noConclict() que se encarga de evitar el conflicto con los otros scripts jQuery que usa Wordpress.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/newsticker.css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/newsticker.js"></script>
<script type="text/javascript" > jQuery.noConflict();</script>

newsticker.php

Hacemos una consulta a la base de datos y obtenemos los Post del blog en orden aleatorio (orderby=rand), los artículos pasan al bucle While mostrando los resultados a traves de las funciones de Wordpress. Para mostrar los Thumbnail implemente un script creado por Metacortex, el cual toma las imágenes directamente de la BD sin necesidad de estar cargándolas con un campo personalizado.

<ul id="listticker">
<?php $my_query = new WP_Query('orderby=rand'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post();?>
	<li>
    <?php mi_imagen($tamano = 'mini');?>
	<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="news-title"><?php the_title(); ?></a>
	<span class="news-text">Categor&iacute;a:<?php the_category(); ?></span>

	</li>
	<?php endwhile; ?>
</ul>

newsticker.css

Basicamente es el CSS que trae Newsticker, solo modifique el tamaño de las imagenes.

body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}
#listticker{
	height:200px;
	width:400px;
	overflow:hidden;
	border:solid 1px #DEDEDE;
	padding:6px 10px 14px 10px;;
}
#listticker li{
	border:0; margin:0; padding:0; list-style:none;
}

#listticker li{
	height:60px;
	padding:5px;
	list-style:none;
}
#listticker a{
	color:#000000;
	margin-bottom:
}
#listticker .news-title{
	display:block;
	font-weight:bold;
	margin-bottom:4px;
	font-size:11px;
}
#listticker .news-text{
	display:block;
	font-size:11px;
	color:#666666;
}
#listticker img{
	float:left;
	margin-right:14px;
	padding:4px;
	border:solid 1px #DEDEDE;
	width:50px;
	height:50px;
}

newsticker.js

Para que el script no genere conflictos en wordpress, hay que modificar el identificador “$” agregandole un nombre único, en este caso le puse $e. Esta variable se define en la primera linea con el valor de jQuery.noConflict();.

var $e = jQuery.noConflict();
$e(document).ready(function(){

	var first = 0;
	var speed = 700;
	var pause = 3500;

		function removeFirst(){
			first = $e('ul#listticker li:first').html();
			$e('ul#listticker li:first')
			.animate({opacity: 0}, speed)
			.fadeOut('slow', function() {$e(this).remove();});
			addLast(first);
		}

		function addLast(first){
			last = '<li style="display:none">'+first+'</li>';
			$e('ul#listticker').append(last)
			$e('ul#listticker li:last')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
		}

	interval = setInterval(removeFirst, pause);

});

El archivo jQuery y la modificación de functions.php

Hay que agregar estas lineas de código al principio del archivo functions.php para poder llamar las imágenes automaticamente. Este script puede devolverlas en 3 tamaños, en este caso vamos a usar “mini” para tomar las miniaturas creadas por Wordpress. No es necesario cambiar la configuración de las mismas desde el panel del blog, ya que en newsticker.css les puse dimensiones fijas.

<?php
// Función para extraer imagen de artículo. Autor: Darío Ferrer (alias: metacortex) 13/12/2008 - 4:45
// http://www.forosdelweb.com
// Licencia GNU/GPL. Puedes remover estos créditos si quieres.
      function mi_imagen($tamano = '') {
        if ( $images = get_children( array (
          'post_parent'    => get_the_ID(),
          'post_type'      => 'attachment',
          'numberposts'    => 1,
          'post_mime_type' => 'image'
         )));
        {
          if(!empty($images)) { //Solo añadí esta línea
              foreach( $images as $image ) {
                if($tamano == 'mini') {
                $imagen = wp_get_attachment_image( $image->ID, 'thumbnail' );
                } if($tamano == 'medio') {
                $imagen = wp_get_attachment_image( $image->ID, 'medium' );
                } if($tamano == 'grande') {
                $imagen = wp_get_attachment_image( $image->ID, 'full' );
                }
                echo $imagen;
              }
          } // y su respectivo cierre
        }
      }
?>

Por ultimo se necesita el archivo jQuery que se puede descargar desde este enlace. Al ser un archivo .txt, se debe remplazar la extensión a .js o copiamos el texto y creamos el archivo .js con cualquier editor web.

Colocamos jquery-1.3.2.js y newsticker.js dentro de la carpeta js del theme, si no existe hay que crearla. Los archivos newsticker.php y newsticker.css van en la raiz del theme donde se encuentra functions.php, index.php, sidebar…

Llamando a Newsticker desde el Theme

Para ver a Newsticker en cualquier parte del blog, hay que usar la función include con la ruta a newsticker.php.

<?php include (TEMPLATEPATH . '/newsticker.php'); ?>

Nota:
Los archivos aleatorios se dejan de visualizar una ves que se termina el While. Esto no es un problema para los blogs que tienen muchos post. Seria muy bueno si alguien puede colaborar con un poco de código, este script puede ser muy útil para todos los bloggers.