Tutoriales

URL cortas con nuestro propio dominio

Comments
publicado el 4 de February del 2010 bajo , , , , .

No cabe duda de que las URL cortas son algo muy útiles y en un blog se les puede sacar mucho rendimiento. Yo en este blog lo uso principalmente para permitir a los visitantes compartir una noticia en Twitter.

Para crear una URL tipo http://guiabreve.com/1234 tenemos que modificar el archivo .htaccess situado en el directorio raíz de nuestro blog añadiendo debajo de RewriteEngine On lo siguiente:

[COPIAR]
Código CODE (Copiar):
  1. RewriteRule ^([0-9]+)$ ?p=$1 [R=301,L]

Luego ya podremos generar la URL corta añadiéndola a cualquier parte de nuestro blog de la siguiente forma:

[COPIAR]
Código PHP (Copiar):
  1. <?php echo get_bloginfo('url').'/'.get_the_ID(); ?>

Tutoriales

Crea un Theme con página de opciones

Comments
publicado el 11 de April del 2009 bajo , , , , , , , , , , , , , , , , , , , , , , , , , , , , .

options-pageLos themes que tienen una página de configuración son muy útiles para los usuarios. El desarrollador del theme puede ofrecer al usuarios unas cuantas opciones de personalización para que este configure su theme de forma sencilla y sin complicaciones.

Últimamente estoy comenzando a crear un theme y al igual que hice con mi anterior creación quería que este tuviera una página de opciones.

Buscando por internet sobre la posibilidad de crear una página de opciones para el theme me encontré con este artículo que nos da el código básico para crear una página de opcines de forma sencilla. Solo tendremos que modificar un array para definir las distintas opciones que tendrá nuestra página. Continuar »

CMS Recursos

Crea tu propio CMS y aprende un poco acerca de como funcionan

Comments
publicado el 31 de January del 2009 bajo , , , , , , , , , , , , , , .

phpmysql-4En CSS-Triks han publicado un artículo interesante sobre como crear tu propio CMS en PHP. El articulo, está explicado de manera sencilla, aunque esté en ingles, y con el podremos crear el código base de un CMS de forma sencilla, e incluso descargar los archivos ya creados.

En el articulo tocaremos los siguientes puntos:

  • Crear una base de datos.
  • Conectar con una base de datos.
  • Mostrar un formulario con dos campos.
  • Guardar los datos del formulario en la base de datos.
  • Mostrar los datos que se han guardado.

Si estas interesados en crear vuestro propio CMS para un proyecto propio o como un simple reto este articulo te vendrá de perlas. Si no, simplemente te vendrá bien para ver un poco el funcionamiento básico de Wordpress o cualquier otro CMS.

#
Muchas veces, el Hotlinking puede convertirse en un problema de cara al consumo de banda ancha del servidor. Este tutorial nos enseña a evitar el problema por medio de un archivo .htaccess.
Wordpress

Como separar Comentarios y Trackbacks en Wordpress

Comments
publicado el 9 de August del 2008 bajo , , , .

En este pequeño tutorial enseñare como separar los Trackbacks de los Comentarios además de como crear un contador independiente para cada uno de ellos. Yo lo he hecho con el theme default de Wordpress, pero es perfectamente aplicable a cualquier otro theme simplemente siguiendo los pasos.

¡Empezamos!

1º Filtramos los comentarios para que no muestren Trackbacks.

Para ello buscamos <?php foreach ($comments as $comment) : ?> en el archivo comments.php y añadimos justo debajo o siguiente:

[COPIAR]
Código PHP (Copiar):
  1. <?php $comment_type = get_comment_type(); ?>
  2. <?php if($comment_type == ‘comment’) { ?>

Luego tenemos que buscar <?php endforeach; /* end for each comment */ ?> y añadir justo antes <?php } /* End of is_comment statement */ ?>

Con esto ya hemos conseguido que no se muestren los Trackbacks. Continuar »

Tutoriales

Menú superior desplegable con jQuery

Comments
publicado el 18 de May del 2008 bajo , , , , , , .

 

Las ventajas de un menú superior desplegable es que nos permite ofrecerle al usuario una serie de accesos directos a los enlaces más importante de nuestra web de forma que no estén continuamente en pantalla si no que solo se desplieguen cuando el usuario desee.

Para hacer este menú hemos utilizado la librería jQuery, para conseguir ese efecto. Para aplicarlo en nuestra web tenemos que incluir el código Javascript y la llamada a la librería entre las etiquetas <head></head> de la siguiente forma:

[COPIAR]
Código PHP (Copiar):
  1. <script type="text/javascript" src="jquery.js"></script>  <!-- Libreria jQuery -->
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4.  
  5.     $(".btn-slide").click(function(){
  6.         $("#panel").slideToggle("slow");
  7.         $(this).toggleClass("active"); return false;
  8.     });
  9.    
  10.     
  11. });
  12. </script>

El código html quedaría de la siguiente forma:

[COPIAR]
Código HTML (Copiar):
  1. <div id="panel">
  2.     <ul class="list">
  3.         <li><a href="#">Inicio</a></li>
  4.         <li><a href="#">Contacto</a></li>
  5.         <li><a href="#">Portafolio</a></li>
  6.         <li><a href="#">Sobre...</a></li>
  7.         <li><a href="#">Ayuda</a></li>
  8.         <li class="buscar"><input value="Buscar" /></li>
  9.     </ul>
  10.     <div class="clear"></div>
  11. </div>
  12.  
  13. <p class="slide"><a href="#" class="btn-slide">Men&uacute;</a></p>

Y por último necesitamos darle estilo mediante CSS quedando de la siguiente forma:

[COPIAR]
Código CSS (Copiar):
  1. #panel {
  2.     background: #CCC093;
  3.     height: 50px;
  4.     display: none;
  5. }
  6. .slide {
  7.     margin: 0;
  8.     padding: 0 0 0 5px;
  9.     border-top: solid 4px #825948;
  10.     height: 40px;
  11. }
  12. .btn-slide {
  13.     float: left;
  14.     background: #825948 url(white-arrow.gif) no-repeat right -50px;
  15.     text-align: center;
  16.     width: 144px;
  17.     height: 31px;
  18.     padding: 10px 10px 0 0;
  19.     margin: 0 auto;
  20.     display: block;
  21.     font: bold 120%/100% Arial, Helvetica, sans-serif;
  22.     color: #fff;
  23.     text-decoration: none;
  24. }
  25. .active {
  26.     background-position: right 12px;
  27. }
  28.  
  29. ul.list {margin: 0px; padding: 16px 0px 0px 10px; list-style: none;}
  30. ul.list li {float: left; width: auto;}
  31. ul.list a {text-decoration: none; background: #453027; margin: 5px; padding: 4px;}
  32. ul.list a:hover {text-decoration: none; background: #825948;}
  33.  
  34. ul.list li.buscar {float: right; margin-right: 5px;}
  35. ul.list li.buscar input {background-color: #453027; border: 0px; color: #CCC093; font-size: 18px; margin: 0px; width: 300px;}

Si queréis ver un ejemplo de como queda, tenéis esta página disponible. La librería jQuery la tenéis aquí.

CSS Tutoriales

Como mostrar una imagen mientras se carga un vídeo

Comments
publicado el 16 de May del 2008 bajo , , , .

El titulo no se si es lo suficientemente descriptivo como para entender el contenido de esta entrada, pero, básicamente, lo que vamos a hacer es que mientras que los vídeos de nuestra web cargan se muestre una imagen indicando que el vídeo esta cargando.

Todo ello usando solamente CSS. La técnica es sencilla, consiste en darle estilo al div del vídeo para que muestre una imagen de fondo, una vez que el vídeo cargue, la imagen quedará en el fondo y conseguiremos ese efecto de imagen de carga que buscamos. El código CSS quedaría de la siguiente forma:

[COPIAR]
Código CSS (Copiar):
  1. .video {
  2. border: 20px solid #825948;
  3. background: url(video-bg.gif) center no-repeat;
  4. margin: auto;
  5. background-color: #825948;
  6. height: 355px;
  7. width: 425px;
  8. }

Por supuesto el código anterior es personalizable, yo además a añadido un borde y lo he alineado al centro, pero cada uno lo puede personalizar a su gusto.

El código Html sería algo así:

[COPIAR]
Código CODE (Copiar):
  1. <div class="video"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="355" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="http://www.youtube.com/v/KA2B5X0LhMY&amp;hl=en" /><embed type="application/x-shockwave-flash" width="425" height="355" src="http://www.youtube.com/v/KA2B5X0LhMY&amp;hl=en" wmode="transparent"></embed></object></div>

Podeís ver un ejemplo de como queda el código o descargar la imagen que he usado en el ejemplo.

Más noticias & Buscar »