junio 22, 2008

Comentarios (0)

Ribbon Rules Generator – Generador online de Ribbon superiores

, , , , ,

Seguramente habrás notado otra de las nuevas tendencias 2.0 que se pueden ver en diversos blog populares, básicamente unas franjas de colores en la parte superior de nuestro blog. La verdad que es un detalle realmente simple, pero admito que siempre logra captar mi atención, lo que sin duda es muy bueno, para resaltar contenido en nuestro encabezado. Y por otro lado, quedan realmente muy bonitos, pero claro, esto ya es cuestión de gustos personales. Ribbon Rules Generador, es una nueva herramienta o generador online de Ribbon “superiores” que llega desde dynamicdrive, con el prácticamente será realmente simple crear estas cintas de colores, inclusive podremos generarlas de dos formas. Una solo ingresando un color base, y dejando que Ribbon Rules Generador nos genere una cinta respetando una cierta gama, o bien ingresando de forma manual cada uno de los tonos que deseamos para nuestra franja de colores. Una vez generado nuestro Ribbon, descargamos la imagen generada, y copiamos el código CSS que pegaremos posteriormente en la hoja de estilo de nuestro blog.

Enlace Ribbon Rules Generador

PLAIN TEXT

CSS:
  1. body{

  2. background: white url(ribbon.gif) top left repeat-x;

  3. padding-top: 10px;

  4. }

junio 22, 2008

Comentarios (0)

The Featured Content Gallery – Plugin WP para generar contenido destacado

, , , , , , , , , , , , ,

The Featured Content Gallery, es un agradable plugin wordpress desarrollado por wpelements, el mismo nos permitirá montar en nuestros themes wordpress, de una forma sumamente simple, una galería muy agradable que hemos comentado en alguna oportunidad: SmoothGallery de JonDesigns. Lo genial de esta galería, transformada en plugin wordpress, es que una vez integrada a nuestro theme la podremos actualizar desde nuestro propio administrador wordpress, donde básicamente gestionaremos las 5 imágenes a mostrar, el titulo que llevara cada una de nuestras imágenes, acompañada de una breve descripción, e inclusive nos permite añadir el link hacia un post especifico donde redireccionaremos a nuestros usuarios al hacer clic sobre una imagen en particular. Sin duda, este plugin es una muy buena opción para generar Featured o post destacados en nuestros themes wordpress, sin complicarnos tanto la vida.

Instalar The Featured Content Gallery Plugin

  • Descargamos el plugin “content-gallery.zip” by wpelements

  • Subimos el plugin a la carpeta /wp-content/plugins/ de tu WordPress ej: p-content/plugins/content-gallery/

  • Activamos el plugin desde el panel de administración WordPresss

  • Añadimos el siguiente código dentro de algún archivo de nuestro theme donde deseamos mostrar la galería. (sidebar, index, etc)

PLAIN TEXT

PHP:
  1. <?php include (ABSPATH . ‘/wp-content/plugins/content-gallery/gallery.php’); ?>

Gestionamos

Nos dirigimos dentro de nuestro Panel administrador Wp a la opción “setting” u opciones generales, una vez allí buscamos la opción “Featured Content Gallery” y comenzamos a gestionar nuestra galería. La cual es muy simple de entender.

fotoadmingaleria.jpg

Ajustar el ancho y altura de nuestra galería (Opcional)

Para modificar el ancho y el alto de la galería, editar el archivo “jd.gallery.css” que se encuentra dentro de la carpeta “css” del plugin de Galería. EJ:

PLAIN TEXT

CSS:
  1. #myGallery, #myGallerySet, #flickrGallery
  2. {

  3. width: 460px; /* this is the width of your gallery */

  4. height: 345px; /* this is the height of your gallery */

  5. z-index:5;

  6. border: 1px solid #000;

  7. }

Para ampliar Informacion The Featured Content Gallery by wpelements

Gracias Cesar

junio 14, 2008

Comentarios (0)

Reflejar imagenes con javascript

, , , , , ,

En nuestro artículo “Reflejar objetos o texto con Photoshop” te enseñamos a hacer el efecto de reflejo en las imagenes con photoshop y ahora te mostraremos un script que puede hacerte esta misma función. El script se llama Reflection y trabaja de una manera muy sencilla:

  1. Descarga el script desde aquí o en su página oficial.

  2. Dentro del .zip encontraras un archivo llamado reflection.js, descomprimelo y subelo a tu host propio o gratuito.

  3. Llama al script desde tu web, esto es, coloca la referencia entre las etiquetas <head></head>: 
    <script type="text/javascript" src="reflection.js"></script>

  4. Lo siguiente es utilizar el script. El script funciona sencillamente al aplicar una clase predifinida a la imagen, esta clase es “reflect”, por ejemplo:

    5. <img src="iglesia-de-tlayecac.gif" class=”reflect” alt=”Iglesia de Tlayecac”>

    Que da como resultado lo siguiente:

  5. Otra utilidad importante del script es que puedes controlar la opacidad y esto se hace agregando tambien una clase a la imagen, pero esta vez, contiene el porcentaje de opacidad deseado, por ejemplo, la clase “reflect rheight50” producira una imagen reflejada con 50% de opacidad, la clase “reflect rheight80” producira una imagen reflejada con 80% de opacidad y así para la opacidad que deseemos.

Este script tiene por ahi, un par de opciones más que puedes encontrar desde su página principal, pero estas son las más utiles. El efecto de reflejo que brinda este script es muy bueno y de mucha ayuda si queremos darle reflejo a muchas o todas nuestras imagenes.

junio 14, 2008

Comentarios (0)

Dar estilo a los links de diferentes tipos con jQuery

, , , , , , , ,

Dar estilo a los links de diferentes tipos es muy sencillo con CSS3, pues permite recoger la extensión de cualquier archivo con una instrucción y darle estilos directamente. Por ejemplo:

a[href $='.pdf'] {padding-right: 20px;background: url(icono-pdf.gif) no-repeat right;}

Desafortunadamente estos selectores no son soportados por IE6 (raro ¿verdad?) pero en Web Designer Wall nos dan una solución para hacerlo por medio de la librería jQuery.

  1. Descargamos la librería y hacemos el llamado entre las etiquetas <head> y </head>. 
    <script type="text/javascript" src="jquery.js"></script>

  2. Enseguida después del llamado, agregamos la función que hará que se le otorgue una clase a cada tipo de link y otro que abrirá los enlaces externos en una nueva ventana. 
    <script type="text/javascript">$(document).ready(function(){

//Definición de clases para cada tipo de archivo.    $("a[@href$=pdf]").addClass("pdf");

    $("a[@href$=zip]").addClass("zip");

    $("a[@href$=doc]").addClass("doc");

//Estilos y atributos a los enlaces externos.    $("a:not([@href*=http://blogandweb.com])").not("[href^=#]")      .addClass("externo")      .attr({ target: "_blank" });

});</script>

  3. Ahora solo falta definir los estilo para cada tipo de archivo. Por ejemplo, agregándole un icono al inicio que lo identifique: 
    .pdf {padding-left: 20px;background: transparent url(icono-pdf.png) left top no-repeat;}

.zip {padding-left: 20px;background: transparent url(icono-zip.png) left top no-repeat;}

.doc {padding-left: 20px;background: transparent url(icono-doc.png) left top no-repeat;}

.externo {padding-left: 20px;background: transparent url(icono-ext.png) left top no-repeat;}

    Estos estilos los definimos dentro de la hoja de estilos (style.css) o dentro de la sección css.

  4. Ahora cada vez que usemos un enlace con alguna de las extensiones definidas tendrán los atributos de la clase que le corresponde. Por ejemplo: 
    <div id="enlaces"> <p><a href="documento.pdf">Archivo PDF</a></p> <p><a href="documento.zip">Archivo ZIP</a></p> <p><a href="documento.doc">Archivo DOC</a></p> <p><a href="http://btemplates.com">BTemplates - enlace externo</a></p> <p><a href="http://serturista.com">Ser Turista - enlace externo</a></p> <p><a href="http://blogandweb.com/2008/05/06/dar-estilo-a-los-links-de-diferentes-tipos-con-jquery/">Regrasar al tutorial - enlace local</a></p> <p><a href="#enlaces">Enlace local #</a></p></div>

Demo | Descargar ejemplo

junio 14, 2008

Comentarios (0)

Desaparecer elementos web con jQuery

, , , , , , , , ,

Para hacer un sitio web o un blog más dinámica es necesario darle control al usuario. Control como el hecho de decidir que quiere elementos quiere ver y cuales no y se lo podemos otorgar gracias jQuery y un sencillo script gracias a Web desginer wall.

El script y la librería te permitirán hacer desaparecer cualquier elemento de la página al cliquear en un botón. Por ejemplo, podemos colocar una nota en la barra lateral de la página con un aviso y colocar un botón para que desaparezca si le estorba al lector. (Ver demo)

  1. Como siempre, lo primero es descargamos la librería y hacemos el llamado entre las etiquetas <head> y </head>. 
    <script type="text/javascript" src="jquery.js"></script>

  2. Enseguida después del llamado, agregamos la función que usa la librería y le dice que al cliquear el elemento con clase “eliminar” (en este caso el botón) desaparezca el elemento con clase “contenedor” (en este caso el div del mensaje). 
    <script type="text/javascript">$(document).ready(function(){

 $(".contenedor .eliminar").click(function(){  $(this).parents(".contenedor").animate({ opacity: 'hide' }, "slow"); });

});</script>

  3. Ahora solo hay que usar las clases del script en la estructura html. 
    <div class="contenedor"> <h2>Lorem ipsum 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p><a href="">Regresar al tutorial</a></p> <img src="eliminar.png" alt="cerrar" class="eliminar" /></div>

  4. Y darle estilo a cada clase, es decir, al contenedor y al botón con los respectivos atributos generales. 
    .contenedor { margin:20px auto; background:#F5E38E; border:2px solid #EBCA4F; padding:10px; width:500px; position:relative;}.contenedor .eliminar { position: absolute; top: 10px; right: 10px; cursor: pointer;}h2 { color:#ff0000; font-size:15px; }p { font-size:11px; padding: 0 0 11px; color:#333; }a { color:#ff8400; }body { font-family:verdana, arial; }

Las posibilidades son muchas y de hecho este es en esencia el mismo funcionamiento que tienen los menús de pestañas (tabs).

Demo | Descargar el ejemplo



Page 5 of 10« First...34567...10...Last »