WordPress 3.1, estas son las nuevas características

“Reinhardt” el nombre clave para la versión 3.1 de WordPress fue liberada este miércoles con una gran cantidad de características para usuarios y desarrolladores.

Desde el punto de vista de la interfaz, WordPress 3.1 tiene el mismo look que WordPress 3.0. Se han hecho algunos pequeños cambios en el Dashboard con un aspecto más limpio, el diseño en general sigue siendo el mismo.

Formatos de Post

Esta clomid tablets nueva característica de WordPress sirve para personalizar la forma en que un Post de WordPress se presenta en la web. Aunque no es una característica necesaria, los diseñadores de themes pueden aplicarla para mostrar mejor determinados tipos de contenido.

Los formatos de posts son útiles en aquellos que desean crear una experiencia de usuario similar a Tumblr en un blog de WordPress. Esto significa que el autor pueda designar un determinado estilo de presentación para un enlace, video, imagen, cita, audio, galería, etc.

Enlaces internos

Esta es una característica para blogs con mucho contenido, ya que el objetivo es facilitar a los e

9;One Hour Video System'>One Hour Video Systemditores de blogs, buscar contenidos publicados anteriormente. Estos enlaces se utilizan generalmente para ampliar el conocimiento sobre un determinado tema.

Para utilizarla simplemente haga clic en el botón de enlace en el panel de escritura, ingresa alguna palabra clave y se mostraran entradas relacionadas a la frase.

El Admin Bar

Los usuarios de WordPress.com probablemente estarán familiarizados con el Admin Bar, ya que todos los blogs alojados en wordpress.com tienen un acceso rápido a diferentes herramientas mediante esta barra, como por ejemplo tener acceso directo para editar un post al estar viéndolo, agregar un post, ver los comentarios nuevos, desloguearse, etc.

Para los usuarios que no quieran esta opción, pueden entrar a su perfil de usuario y desactivarla.

WordPress 3.1 está disponible para descarga y también podemos hacer un update automático desde nuestro admin panel.

Vía: Mashable

zp8497586rq
zp8497586rq

Drag and Drop + Cookies con jQuery

Arrastrar y soltar (drag and drop) es una manera de personalizar el orden de módulos específicos de una pagina, ordenar una fila de registros entre otras cosas mas. Centrándonos en el concepto de la Web 2.0 esta es una funcionalidad indispensable para brindar personalización a nuestros usuarios.

En este tutorial implementaremos el Drag and drop en un HTML logrando mover modulos y guardándolos en cookies, esto para que el usuario al refrescar la pagina tenga su configuración guardada.

JavaScript

Necesitaremos incluir las librerías de jQuery, jQuery UI y jQuery Cookie en nuestro HTML.
[html]
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
[/html]
En el siguiente script declaramos variables y funciones que servirán para recorrer elementos, ordenarlos, y especificar zonas para el drag and drop.
[javascript]
<script type="text/javascript">
var divid = ‘sidebar’;
var cookiename = ‘sidebar-cookie’;
function getItems(id){
return $(‘#’+id+’-list’).sortable(‘toArray’).join(‘,’);
}
function renderItems(id, itemStr){
var list = $(‘#’ + id + ‘-list’);
var items = itemStr.split(‘,’)
for ( var i in items ){
html = ‘<li class="sortable-item’;
html += ‘" id="’ + items[i] + ‘"><div class="loader"></div></li>’;
list.append(html);
$(‘#’ + items[i]).load(‘content/’ + items[i] + ‘.html’);
}
}
var sidebarSource = ‘search,entries,board,topics’;
if($.cookie(cookiename) != null){
sidebarSource = $.cookie(cookiename);
}
$(document).ready(function(){
renderItems(divid, sidebarSource);
$(‘#’+divid+’ .sortable-list’).sortable({
axis: ‘y’,
containment: ‘parent’,
forceHelperSize: true,
forcePlaceholderSize: true,
handle: ‘.section-title’,
opacity: 0.8,
placeholder: ‘placeholder’,
update: function(){
$.cookie(cookiename, getItems(divid));
}
});
});
</script>
[/javascript]

 

HTML

El contenedor de los elementos amoxil side effects sera un UL, este deberá tener el identificador y clases que pusimos en el Javascript:
[html]
<div class="right sidebar" id="sidebar">
<ul class="sortable-list" id="sidebar-list"></ul>
</div>
[/html]
Los módulos cargaran mediante Ajax, y el nombre del html sera igual a la variable declarada:
[javascript]
var sidebarSource = ‘search,entries,board,topics’;
[/javascript]
Osea: tendremos HTML´s de forma: search.html, entries.html, board.html, topics.html.
Los módulos deben manejar un estándar para reconocer zonas de donde hacer el drag and drop.
[html]
<div class="section">
<div class="section-title">Search</div>
<div class="section-content">
<form method="post" action="">
<input type="text" class="text" size="28" />  
<input type="submit" class="button" value="Submit" />
</form>
</div>
</div>
[/html]
ver demodescargar
Vía: DevHeart

Detectar caras con jQuery

a target=”_blank” href=”http://facedetection.jaysalvat.com/”>jQuery Face Detection es un plugin para jQuery que permite reconocer las caras humanas dentro de una imagen y enmarcarlos, sin duda un impresionante plugin que nos puede Order cialis usa servir para etiquetar personas o cubrir rostros que no deberían mostrarse.
Antes de implementarlo en nuestra Web lo que debemos hacer es bajarnos el plugin.

 

Descargar Plugin

 

Javascript

Estas librerías realizaran la funcionalidad de detectar las caras, todos son necesarios para el propósito.
[html]
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="js/facedetection/ccv.js"></script>
<script src="js/facedetection/face.js"></script>
<script src="js/jquery.facedetection.js"></script>
[/html]
Este script servirá para guardar las coordenadas de cada rostro en un array de objetos, luego lo recorrera para armar el cuadro que los etiquetara, finalmente insertamos el html generado en un elemento que encierre a la imagen. (Este script debe estar justo antes de cerrar el </body>).
[javascript]
&lt;script&gt;
$(function() {
var $this = $(this);
var coords = $(‘img’).faceDetection();
for (var i = 0; i &lt; coords.length; i++) {
$(‘&lt;div&gt;’, {
‘class’:’face’,
‘css’: {
‘position’: ‘absolute’,
‘left’: coords[i].positionX +’px’,
‘top’: coords[i].positionY +’px’,
‘width’: coords[i].width +’px’,
‘height’: coords[i].height +’px’
}
})
.appendTo(‘#content’);
}
});
&lt;/script&gt;
[/javascript]

HTML

Esta es la estructura que debe tener el html de la imagen.
[html]
&lt;div id="content"&gt;
&lt;img src="img/faces.jpg" /&gt;
&lt;/div&gt;
[/html]

 

descargar