Scripts, Tutoriales, Diseño Web

NETTUTS es un blog muy reciente que estará enfocado al desarrollo web y tips de gran utilidad, sin duda es un blog que promete mucho. Si notan un diseño similar al de PSDTUTS, es precisamente porque son ellos quienes están detrás de este blog. Tan solo lleva días online, pero ya podremos encontrar algunos tips muy interesantes, por ejemplo:

Crear Tabs usando CSS y jQuery - Una de las formas mas simples de introducir mucho contenido en una sección reducida, es mediante la utilización de “tabs”, en Nettuts podremos encontrar un tutorial muy completo para crear bonitos tabs que podremos usar posteriormente en nuestros proyectos. Si buscas algo simple será muy útil, pero les recomiendo el ejemplo en el cual se ha utilizado jQuery, porque posee unos efectos realmente extraordinarios.
Ver Demo - Mas Info Create a Slick Tabbed Content Area using CSS & jQuery

Crear formularios de pagos Paypal - Un tips muy agradable que le servirá a aquellos que desean tener desde sus web un formulario integrado a su cuenta paypal, y el cual permita recibir los montos de una forma mas directa o simple. Tips útil para recibir donación o vender.
Ver demo y mas Info Creating a PayPal Payment Form
Via css-tricks
Compartelo
CSS, WordPress, Tutoriales

Para aquellos que siempre están pensando en agregar cositas nuevas a sus themes wordpress, acabo de ver este agradable tip para generar paginación con nuestros articulos recientes.
Ver demo en raproject - Mas info weblogtoolscollection
Uso:
Agregamos a nuestro sidebar el siguiente codigo
JavaScript:
-
<div id="recientespag">
-
<h3>Articulos Recientes</h3>
-
<ul>
-
<?php
-
$temp = $wp_query;
-
$wp_query= null;
-
$wp_query = new WP_Query();
-
$wp_query->query('showposts=5'.'&paged='.$paged);
-
?>
-
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
-
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
-
<?php endwhile; ?>
-
</ul>
-
<div class="navigation">
-
<div class="alignleft"><?php previous_posts_link('« Otros') ?></div>
-
<div class="alignright"><?php next_posts_link('Leer Mas »') ?></div>
-
</div>
-
<?php $wp_query = null; $wp_query = $temp;?>
-
</div>
un poco de estilo (Básicamente el estilo que muestro en la foto del post)
CSS:
-
#recientespag {
-
width:300px;
-
background: #1B1B19;
-
border: 1px solid #2A2A2A;
-
float:right;
-
padding:13px 15px 8px 15px;
-
}
-
#recientespag h3 {
-
font-family: Georgia, "Times New Roman", Times, serif;
-
font-size: 2.2em;
-
color: #C7C54F;
-
}
-
-
#recientespag ul {
-
margin-top:-5px;
-
}
-
-
#recientespag li {
-
border-bottom:1px solid #2A2A2A;
-
list-style:none;
-
padding:7px 0 7px 0px;
-
}
-
-
#recientespag a, #recent a:visited {
-
color:#999831;
-
font-size:0.9em;
-
font-family: Verdana, Arial, Helvetica, sans-serif;
-
}
Compartelo
CSS, Tutoriales, Diseño

Hoy en día todos los que llevamos un blog adelante, o estamos constantemente ligados a Internet por nuestro trabajo, es prácticamente común que no solo dediquemos tiempo a escribir en nuestros blog, sino que también a veces solemos buscar una forma de salir un poco de la rutina diaria participando en diferentes redes sociales, donde solemos compartir imágenes, contar lo que estamos haciendo en un determinado momento, divertirnos con amigos, en fin. Aunque también es común, que no siempre solemos brindar desde nuestro blog los enlaces a ese tipo de redes, sean: twitter, pownce, flickr etc en las cuales participamos. Pero si deseáramos hacerlo, como una forma de que nuestros usuarios nos comiencen a conocer un poco mas, no necesariamente deberemos crear enormes banner que llamen la atención de nuestros usuarios, ya que siempre existen otras alternativas, mas simples, limpias, ordenadas y agradables, que llamara de la misma forma la atención de nuestros usuarios, pero evitando arruinar el diseño de nuestro blog que tanto trabajo no haz costado. La forma más simple, es crear listas con iconos personalizados.
Ver Demo - Descarga Ejemplo
CSS:
-
.mac {
-
font-size: 11px;
-
padding-left: 17px;
-
margin-left: 2px;
-
margin-bottom: 5px;
-
background:url(images/macosx.gif) bottom left no-repeat;
-
List-style:none;
-
}
-
-
-
.clickideas {
-
font-size: 11px;
-
padding-left: 17px;
-
margin-left: 2px;
-
margin-bottom: 5px;
-
background:url(images/cli.gif) bottom left no-repeat;
-
List-style:none;
-
}
-
.pownce {
-
font-size: 11px;
-
padding-left: 17px;
-
margin-left: 2px;
-
margin-bottom: 5px;
-
background:url(images/pow.gif) bottom left no-repeat;
-
List-style:none;
-
}
-
.flickr {
-
font-size: 11px;
-
padding-left: 17px;
-
margin-left: 2px;
-
margin-bottom: 5px;
-
background:url(images/flickr.gif) bottom left no-repeat;
-
List-style:none;
-
}
-
.wordpress {
-
font-size: 11px;
-
padding-left: 17px;
-
margin-left: 2px;
-
margin-bottom: 5px;
-
background:url(images/wordpress.gif) bottom left no-repeat;
-
List-style:none;
-
}
-
.blog {
-
font-size: 11px;
-
padding-left: 17px;
-
margin-left: 2px;
-
margin-bottom: 5px;
-
background:url(images/blog.gif) bottom left no-repeat;
-
List-style:none;
-
}
-
.mail {
-
font-size: 11px;
-
padding-left: 17px;
-
margin-left: 2px;
-
margin-bottom: 5px;
-
background:url(images/mail.gif) bottom left no-repeat;
-
List-style:none;
-
}
-
.tarjeta {
-
font-size: 11px;
-
padding-left: 17px;
-
margin-left: 2px;
-
margin-bottom: 5px;
-
background:url(images/tarjeta.gif) bottom left no-repeat;
-
List-style:none;
-
}
-
.info {
-
font-size: 11px;
-
padding-left: 17px;
-
margin-left: 2px;
-
margin-bottom: 5px;
-
background:url(images/info.gif) bottom left no-repeat;
-
List-style:none;
-
}
Estructura
HTML:
-
-
-
<li class="mac">Usando
<a href="http://www.apple.com">Macintosh
</a></li>
-
<li class="wordpress">Powered by
<a href="http://www.wordpress.org">Wordpress
</a></li>
-
<li class="clickideas">Design by
<a href="http://www.clickideas.net">Clickideas
</a></li>
-
<li class="pownce">My
<a href="http://www.pownce.com/nikko">Pownce
</a></li>
-
<li class="flickr">My Photos
<a href="http://www.flickr.com/photos/14412260@N08/">Flickr
</a></li>
-
<li class="blog">My
<a href="http://www.xyberneticos.com/">blog
</a></li>
-
<li class="mail">My
<a href="http://www.xyberneticos.com/index.php/contacto/">E-mail
</a></li>
-
<li class="tarjeta">My
<a href="http://www.xyberneticos.com/index.php/acerca-de/">vcard
</a></li>
-
<li class="info">More
<a href="http://www.xyberneticos.com/index.php/acerca-de/">Info
</a></li>
-
-
</ul>
Compartelo
php, Scripts, WordPress, Tutoriales, Diseño Web

Si han dejado algún comentario en el pasado, habrán notado que la opción para mostrar sus Gravatar estaba aun desactivada. Cada día al despertar me repetía, bueno hoy haré esto, corregiré esto otro, etc. La verdad es que siempre termino haciendo el 70% de lo que planeo cada día. Obviamente siempre por ser productivo en mi trabajo diario y dedicar tiempo a cosas que considero mas importante. Pero bueno, hoy si he decidido corregir la opción que permita ver los gavatar en los comentarios (quizás por curiosidad de sus rostros), y creo que fue mi día de suerte, gracias a este post, lo hice en tan solo 5 segundos.
How to Setup Gravatars for your Blog , es un pequeño tips que nos servirá para agregar un avatar, una pequeña imagen asociada a un usuario, para ser precisos, a un correo electrónico. Lo genial, es que no necesitaremos ningún plugin, y podremos adaptarlo sin problemas a WordPress, pero funcionan con cualquier sistema basado en PHP. Tan simple como abrir nuestro comments.php y agregar el siguiente código donde deseamos implementar nuestro gravatar:
PHP:
-
<?
-
$email = $comment->comment_author_email;
-
$default = ""; // link to your default avatar
-
$size = 62; // size in pixels squared
-
$grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=
-
" .
md5($email) .
"&default=" .
urlencode($default) .
"&size=" .
$size;
-
?>
-
<img src="<?=$grav_url ?>" height="<?=$size ?>" width="<?=$size ?>" alt="User Gravatar" />
Mas info How to Setup Gravatars for your Blog
Fuente Unblogged
Compartelo
Recursos Web, Tutoriales, Blog

Vectips, es un agradable sitio, realmente muy nuevo, enfocado en Adobe Illustrator, en el podremos encontrar consejos, trucos y tutoriales sobre illustrator, tanto para principiantes como para aquellos con experiencia previa. El sitio aun cuenta con poca información, pero es un sitio que promete mucho, es por ello que ya acabo agregar a mi lector de feed. Se los recomiendo.
Enlace Vectips
Compartelo
Themes, WordPress, Tutoriales

WP Contact Manager es una especie de theme muy diferente a los acostumbrados para WordPress. Con un poco de trabajo y tiempo podremos trasformar nuestra plataforma WordPress en un administrador de contactos muy completo y funcional. Se pueden añadir contactos regulares a través de la interfaz de administrador, etiquetar cada uno de ellos, realizar búsquedas sobre ellos y mucho más. Algo a tener en claro es que no se trata de un theme independiente sino que necesita de plugin adicionales que deberemos descargar e instalar, para lo cual no tendrán problema alguno, los pasos a seguir son realmente fáciles, y se explica muy bien cada uno de ellos, pasando por su instalación hasta su completa configuración.
Ver demostracion online - Enlace WP Contact Manager (Con todos los pasos a seguir)
Compartelo
CSS, Tutoriales, Fotografia

Una practica técnica para crear mediante CSS una especia de estampillas con nuestras imágenes. No se que tan útil podrá ser para tus proyectos, pero quien sabe, por ahí en el futuro sientas deseos de utilizarlo en alguna sección. Todo sirve, todo sirve.
Ver demo
Nuestro CSS
CSS:
-
.estampilla{
-
border:5px dotted #fff !important;
-
padding:4px;
-
background:#ccc !important;
-
border:5px dashed #ccc;
-
}
Uso: Simplemente agregamos la clase estampilla a nuestras imágenes
HTML:
-
<img alt="tip" class="estampilla" src="imagen.jpg">
Compartelo
Navegadores, Firefox, WordPress, Tutoriales, Fotografia, Web 2.0

CSS Text Wrappe es un script que seguramente podrá sernos útil para algún proyecto en mente. Básicamente lo que nos permitirá será, transformar nuestros párrafos tradicionales, en párrafos un poco más originales o con diseños sin duda más llamativos. Lograr párrafos siguiendo el diseño de un circulo, Zig-Zag, curvas y demás. Personalizar este tipo de estilos para nuestros párrafos es realmente muy sencillo, ya que el sitio posee una herramienta que hará esta tarea realmente fácil. Tan fácil como tomar las barras laterales y especificar hacia donde nos gustaría mover nuestro texto. Luego simplemente generar el estilo a utilizar, copiaremos el código que posteriormente incluiremos en nuestro sitio, sin olvidarnos de descargar shapewrapper.js
Algunos ejemplos - Enlace CSS Text Wrapper
Via anieto2k
Compartelo
WordPress, Plugin, Tutoriales

Cuando comencé a trabajar en el rediseño de xberneticos, algo que provee en otros diseños que al final en este no agregue fue la implementación de minipost en mi sidebar. Aunque aun estoy a tiempo, por supuesto.
Pues bien, aunque la palabra “minipost” hace deducir fácilmente de lo que estamos hablando no vendría mal una breve, muy breve explicación: “ Los minipost son pequeños artículos de algo que deseamos comentar pero a la vez no Extendernos tanto al hacerlo. Esto es muy útil cuando al hablar de un link interesante que deseamos compartir desde nuestro blog, nos damos cuenta que solo nos llevara dos líneas de texto o quizás menos”.
Entonces, creo que la idea es muy sencilla, evitar tener que introducir estos pequeñitos artículos en nuestro contenido central, y hacerlo mejor desde un espacio destinado a compartir pequeños enlaces interesantes. Aunque, siempre existen otras alternativas.
Sideblog v3.0 es un plugin wordpress que nos permitirá realizar esto de una manera practica, sencilla, y sin complicaciones. Aunque también posee algunos parámetros que podremos configurar de cuales hablare.
Instalacion:
- Descargar plugin Sideblog v3.0 o desde la misma web oficial
- Descomprimir y alojar en la carpeta de plugin ‘wp-content/plugins /’.
- Volver a la pestaña Plugins en el panel de control y activar Sideblog.
Configurar: paso 1
Sideblog v3.0 plugin, necesitara que definamos una categoría, la que evidentemente será la que contendrá todos nuestros minipost. Entonces crearemos una categoría destinada exclusivamente a este fin. Crearemos una nueva categoría de nombre “Asides”.
Configurar: paso 2

- En nuestro tablero wordpress nos deberemos dirigir a la sección de “opciones”
- dentro de el seleccionaremos la opción sideblog.
- Marcaremos la casilla de la categoría que hemos creado para escribir nuestros minipost.
- Configuraremos la forma en la que deseamos mostrar nuestros minipost. De forma estándar la encontraremos así.
CSS:
-
<li>%content% - %permalink%</li>
Lo que significa que mostrara el contenido del articulo y un pequeño link al articulo completo. Entonces lo modificaremos para que muestre en el minipost también el titulo del artículo junto con el contenido. Nos debería quedar así:
CSS:
-
<ul><li>%title_url% - <em> %content% </em> </li></ul>
Verán aun mas opciones si desean para implementar (fecha del artículo, etc). Obvio todo opcional y a gusto de ustedes.
En la opción 5 de la foto de ejemplo, podremos especificar la cantidad de post que deseamos mostrar yo seleccione solo los últimos 3 post, y la opción marcada como 6 nos permite decidir si deseamos excluir de nuestro feed la lectura de estos minipost, algo también opcional.
Dar un poco de estilo:
Daremos un poco de estilo a nuestros minipost, agregando algunas líneas en nuestra hoja de estilo.
CSS:
-
#asides {
-
background: #231D19;
-
font: normal 11px Verdana, Helvetica, sans-serif;
-
color:#fff;
-
}
-
-
#asides ul {
-
list-style-type: none;
-
width:90%;
-
}
-
-
#asides li {
-
border-bottom: 1px dashed #443B34;
-
}
-
-
#asides li a {
-
color: #E15F13;
-
font: bold 11px Arial, Helvetica, sans-serif;
-
padding: 0px;
-
text-decoration: none;
-
}
Por ultimo agregar los minipost al sidebar:
Pegaremos este código donde deseamos mostrar nuestros minipost.
HTML:
-
-
-
<?php sideblog(asides); ?>
-
-
-
</div>
Compartelo
CSS, Tutoriales, Diseño Web

Guardaba un post a Intenta desde hace tiempo. Una bonita técnica que han puesto a practica siguiendo este articulo "A Stripe of List Style Inspiration". El cual consiste en lograr solo utilizando CSS un sistema de navegación horizontal mediante franjas. El resultado es realmente muy bonito y a la vez muy útil si lo piensas, basta usar un poco la imaginación para ver donde puedes llegar a implementarlo. En intenta encontraran el código utilizado y el ejemplo para descargar.
Ver Demo – Enlace Sistema de navegación por franjas con CSS
Compartelo