Si afinan un poco la mirada, podrán darse cuenta que las etiquetas “Beta” que están en las bajadas de los logos de las aplicaciones de google desaparecieron.

Gmail, Google Talk, Calendar… en realidad todas pasaron a ser versiones “estables”. Supongo que esto es porque están preparando su primer sistema operativo, que tendrán en mente? seguro hay alguna sorpresa detrás del logo. Lo único que espero es que Google Talk solucione sus problemas de conexión y retardo, para mi sigue siendo una Beta.

Via: SitePoint

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.

Un nuevo tema gratuito para Wordpress fue lanzado hace algunos días, WP typo no usa imágenes, es 100% tipográfico y minimalista.

Además de poder descargar el theme, el paquete trae el archivo .PSD* editable y no hay restricciones de uso o de atribución.

Descargar: WP-Typo

CSS3 promete solucionar muchos de los problemas y necesidades de los maquetadores web. Todavía hay incompatibilidades con CSS2.1 en algunos navegadores, pero esto no desmerece estudiar y practicar sobre esta nueva promesa.

La propiedad Opacity permite hacer transparencias con valores Alpha que van del 0.0 al 1.0, esto equivale a 0% y 100%. Muy facil de usar solo hay que poner la propiedad y su valor, esta propiedad funciona correctamente en Firefox 3+ y no da señales de vida en IE.

Para este ejemplo use dos divs, el primero sin transparencia y el segundo con una transparencia del 50%.

Código CSS:

.div{
position:absolute;/*Para que no choquen los divs*/
width:200px;
height:200px;
top:60px;
left:150px;
background-color:#FFCC00;
}
.div2 {
width:200px;
height:200px;
opacity:0.5; /*Opacidad de 50%*/
background-color:#990000;
}

Código XTML:

 Div sin Transparencia
Div Transparente

Resultado

Descargar el Ejemplo

Zapatos, botas, marroquinería… y mas productos habitan en un local comercial que necesita urgente una imagen acorde y dinámica, para implementarla en múltiples formatos.

En este caso, Gamusa (es un apellido por eso es con “S”) solicita un diseño de logo y una posterior campaña de identidad corporativa. El revelamiento esta completo y la creatividad a la espera.

1 - Datos del Cliente

Gamusa Shoes incursiona recientemente en la venta de calzados, ofreciendo soluciones femeninas y masculinas en una zona comercial donde existe la competencia.

2 - Investigación

Como primer punto de partida me fije en lo locales vecinos para no caer en la misma tonalidad de colores y formas. La marca pretende posicionarse en un sector donde hay mas de 7 negocios del mismo rubro. Lo mejor que pude hacer es analizar los logros y errores del vecino.

2 - Casos de Exito

El rubro de ventas de zapatos se destaca por diseños exclusivos con marca propia. Este no es el caso porque simplemente son revendedores, entonces lo mas practico fue intentar reflejar el estilo de los productos en el diseño del logo.

2 - Buscando un concepto

Como primer paso busque una tipografía entre las familias que tengo instaladas, necesitaba encontrar una que simule las curvas y la elegancia de un calzado. Basandome en una simple vectorización me quede con la Futura MD BT.

Con simpleza y fácil implementación designe como elemento la letra “r” minúscula, al invertirla tomó forma similar a un calzado.

Después de varios bocetos obtuve una primera impresión que me pareció correcta, el logo quedo sencillo y fácil de implementar en formatos como letras corpóreas y cortes de vinilo.

5 - Pausa

Un poco de trote y baloncesto me sirvió para recargar las pilas y despejar la mente. Siempre es bueno tomarse un descanso con alguna actividad extra programática.

6 - Diseño del Logo

Llego la hora de hacer algunos ajustes y buscar los colores. Me pareció buena la combinación del verde con los colores tierra porque es notable su presencia en los calzados habituales.

Ejemplo en contexto

La funcionalidad del logo se ve cuando interactúa con el contexto (imagenes, folletos, web…). Les dejo un ejemplo en el que lo implemente para probar su efectividad, sobre una fotografía que saque al azar de sxc.hu.

En el ejemplo tenemos un pequeño menú con 6 opciones, vamos a mover la del centro unos pixeles arriba sin que deje de ocupar su espacio en la lista. Con Position:relative se puede mover un elemento sin que este deje vacío su lugar de origen.

Los Elementos 1, 3, 4, 5 y 6 se mantienen intactos sin ser afectados por el Elemento 2. Para modificar su ubicación tenemos que usar las propiedades Top y Left con valores aceptados por CSS, en este caso use pixeles con un valor negativo para que este se mueva hacia arriba.

Código CSS:

ul{
color:#FFFFFF;
margin-top:50px;
}
li{
display:inline;
background-color:#003366;
border:1px solid #003333;
margin-left:10px;
}
.mover{
position:relative;
top:-20px;
}

Código XTML:

Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
Elemento 6

Descargar Ejemplo

No quiero hablar de optimización de tiempo, por naturaleza sabemos que los frameworks acortan las horas de trabajo, pero lo mas importante es que ofrecen soluciones concretas y sin errores.

Porque programar puede ser una pesadilla para cualquier iniciado en PHP, aunque puede ser fácil aprender, aplicar lo aprendido conlleva otros factores como familiarizarse con los servidores y la seguridad.

Gracias a Dreamcss nos encontramos con estos 10 frameworks PHP, CodeIgniter,CakePHP, Zend PHP y otros que no conocía como Prado.

Descarga los Frameworks PHP