[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: Tutoriales

  • Sideblog – Pequeños post en tu sidebar

    sideblog.jpg

    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

    option.jpg

    1. En nuestro tablero wordpress nos deberemos dirigir a la sección de “opciones”
    2. dentro de el seleccionaremos la opción sideblog.
    3. Marcaremos la casilla de la categoría que hemos creado para escribir nuestros minipost.
    4. Configuraremos la forma en la que deseamos mostrar nuestros minipost. De forma estándar la encontraremos así.
    1. <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í:

    1. <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.

    1. #asides  {
    2.   background: #231D19;
    3.   font: normal 11px Verdana, Helvetica, sans-serif;
    4. color:#fff;
    5. }
    6.  
    7. #asides ul {
    8.         list-style-type: none;
    9.         width:90%;
    10. }
    11.  
    12. #asides li {
    13.         border-bottom: 1px dashed #443B34;
    14. }
    15.  
    16. #asides li a {
    17.         color: #E15F13;
    18.         font: bold 11px Arial, Helvetica, sans-serif;
    19.         padding: 0px;
    20.         text-decoration: none;
    21.      }

    Por ultimo agregar los minipost al sidebar:
    Pegaremos este código donde deseamos mostrar nuestros minipost.

    1. <div id="asides">
    2.  
    3. <?php sideblog(asides); ?>
    4.  
    5.  
    6.     </div>

  • Navegación por franjas mediante CSS

    franjas.jpg

    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

  • Centrando en el centro

    ¿Qué?. Ahora lo entenderemos todos. Supongamos que necesitamos centran un div o imagen en el centro mismo de la pantalla (por ejemplo el logotipo de una web en la pantalla de presentación para el sitio) y no damos con la solución.CSS Tricks nos la da. Lo más lógico es crear una clase para esa imagen o div que queremos centrar (si es un div tenemos que darle un ancho y un alto fijo), proporcionando un porcentaje superior del 50% e izquierdo de otro 50%:

    1. .centered {
    2. position: fixed;
    3. top: 50%;
    4. left: 50%;
    5. }

    Pero esto como muchos habrán deducido no nos vale, porque lo que hace es centrar la esquina superior izquierda de la imagen o div en el centro de la pantalla, pero no el centro de la imagen en el centro de la pantalla.

    not-centered-csstrick.gif

    *Imagen de CSS Trick

    La solución es simple, añadiremos un margen superior negativo dándole como medida la mitad de la altura que tenga la imagen o div y otro margen izquierdo negativo dándole como medida la mitad de la anchura de la imagen o div:

    1. .centered {
    2. position: fixed;
    3. top: 50%;
    4. left: 50%;
    5. margin-top: -50px;
    6. margin-left: -100px;
    7. }

     

    centered-csstrick.gif

    *Imagen de CSS Trick

    ¿Solucionado? No, porque IE6 interpreta como le da la gana, así que tendremos que añadir a todo lo anterior un hack en nuestra hoja de estilos:

    1. *html .centered {
    2. position:absolute
    3. }

    Ahora sí, ya tenemos la imagen o div centrado en el centro de la pantalla para IE6, IE7 y FireFox.

    ACTUALIZACIÓN: Todo lo dicho anteriormente sigue siendo válido pero actualizamos para explicar como eliminar el hack (anieto2k nos lo comentó en los comentarios de esta misma entrada pero se perdieron debido a la mudanza del blog), solo tendremos que cambiar el valor de “position” poniéndolo en “absolute”. Así quedaría el código:

    1. .centered {
    2. position: absolute;
    3. top: 50%;
    4. left: 50%;
    5. }

    Para el segundo ejemplo sería lo mismo, cambiar la propiedad de position por absolute. Con esto evitamos el uso de ningún tipo de hack.

    Autoría original del tutorial: CSS Tricks Títuolo original: Quick CSS Trick: How To Center an Object Exactly In The Center

    Escrito por redactor invitado: Elías Notario
    Blog: diarioTHC

  • RSS: Técnicas, tutoriales e iconos

    Últimamente me he dado cuenta lo mucho que me agrada ver la creatividad que ponemos en los iconos que utilizamos para nuestros canales de Feed. Por mi parte no solo me fijo en los diseños empleados, técnicas, sino también en los espacios que se le dedican a ellos. Vale recalcar que de todas formas hoy en día estamos tan familiarizados con esto de los feed que no es preciso poner un icono enorme en un sitio con el hecho de atraer mas lectores, sin duda si un sitio nos agrada, por mas pequeñito que sea el enlace o icono encontremos la url del feed para agregarlo a nuestro lector diario. Como de costumbre los chicos de smashingmagazine han hecho una bonita recopilación sobre todo lo relacionado a los RSS, dentro del articulo encontraremos algunas técnicas muy llamativas empleadas por algunos blog, varios tutoriales, y como no podía faltar, algunos bonitos iconos para descargar.

     

    Les dejo el enlace para descargar el icono que vemos en el post, que me ha gustado mucho.

    Y El enlace a smashingmagazine – RSS: Best Design Practices And Icons con cantidad de recursos sobre RSS

     

  • Diseñar nuestro menú con efecto acuarela

    Para los que están buscando siempre originalidad en sus trabajos, webdesignerwall acaba de publicar la primera parte de un tutorial muy bonito. El mismo consta en armar un menú con efecto acuarela, trabajando siempre con photoshop. Básicamente en esta primera parte se vera como lograr los efectos gráficos o artísticos que serán parte del menú. Inclusive podremos descargar el archivo PSD con el trabajo terminado.
    En la segunda parte del tutorial (que vendrá muy pronto), se enseñara el código CSS y los diferentes efectos sobre el menú.

    Enlace Design Watercolor Effect Menu

  • (E)2 Photo Gallery – Extraordinaria galería bajo Mootools JS

    galeria

    (E)2 Photo Gallery es una galería open source desarrollada bajo Mootools Javascript Library. En cuánto a diseño y funcionalidad es realmente extraordinaria. Permite configurar prácticamente todo, inclusive optar por varios estilos que los usuarios podrán elejir. (E)2 Photo Gallery nos permite gestionar o actualizar nuestra galería de dos formas diferentes.

    1. Utilizando una carpeta estándar y subir nuestras imágenes via ftp
    2. O bien utilizando un administrador donde deberemos introducir nuestro nombre de usuario y password, y luego subir nuestras imágenes a la carpeta deseada, y automáticamente cargará las imágenes a la galería.

    Características

    • Transiciones de imágenes
    • Cambio rápido entre 4 diseños
    • Visualizador de Thumbnail (Imágenes miniaturas)
    • Detección automática de fotos
    • Administrador para cargar nuestras imágenes rápidamente
    • No requiere base de datos
    • Ajuste automático en los tamaños de imagen
    • Lee los meta datos de las imágenes (IPTC el Info)
    • Títulos
    • Descripciones
    • Copyright Info
    • Autor
    • Construido dinámicamente usando PHP
    • Fácil actualización y mantenimiento

    (E)2 Photo Gallery viene en dos versiones E)2 Photo Gallery Simple Version y (E)2 Photo Gallery Full Version, ambas gratuitas. Que si bien encontraremos algunas pequeñas diferencias, instalarlas y adminístralas es prácticamente lo mismo en cualquiera de las versiones.

    (E)2 Photo Gallery Simple Version

    Versión optimizada y simple. No posee estilos adicionales. Peso 96k. Incluye mootols y administrador para subir imágenes. Descarga

    (E)2 Photo Gallery Full Version

    Esta versión contiene estilos adicionales que el usuario podrá cambiar a la hora de visitar nuestra galería, y todo viene incluido en el paquete de descarga. Incluye mootools, el administrador para subir imágenes y 4 estilos prediseñados. Descarga

    Instalacion

    Después de ver el demo sin dudarlo la instale en mi host (Mi galeria), Sinceramente esta galería me ha encantado. Aunque es sumamente fácil de instalarla, les explicare los pasos básicos, y a su vez corregiremos un pequeño error con el que me he encontrado a la hora de subir las imágenes.

    Pasos

    1. Primero descargaremos alguna de las galerías, como dijimos podemos bajar una versión simple o full
    2. Descomprimiremos el fichero
    3. Antes de subir la galería a nuestro host, es necesario que configuremos algunos parámetros. Entre ellos, nuestro nombre de usuario y password que nos dará acceso al administrador y nos permitirá luego subir nuestras imágenes. También es necesario configurar la ruta de la carpeta de nuestras imágenes. Y algo opcional a configurar es la velocidad de la transición que existirá entre una imagen y otra al navegar por las imágenes de nuestra galería.
    4. Para configurar todo esto (necesario para su funcionamiento) abriremos el archivo (config.php), y comenzaremos a configurar.
    1. //Definir la carpeta donde tus fotos serán alojadas en tu servidor.
    2.     $gallerypath="uploader/images";         //ruta de la carpeta de las imagenes Ej. images o ../gallery/images
    3.     $thumbpath="uploader/imagethumbs";  //ruta de la carpeta de las miniaturas EJ.  uploader/imagethumbs
    4.     $transitionspeed="500";     //Velocidad de animaciones de Transición
    5.     $fadespeed="300";           //Velocidad de animaciones al seleccionar una imagen a mostrar
    6.     $users[]="Jaimito"; //Nombre de usuario para acceder al administrador y subir nuestras imágenes
    7.     $passw[]="12345678";        //Password administrador

    Corregir Error

    error

    Antes de seguir con otras cosas, es importante corregir un error con el que me he encontrado al intentar subir las imágenes desde el administrador.
    Para ello deberos abrir el archivo index.php que se encuentra en la carpeta uploader (uploader/index.php), deberos sustituir las líneas 118-123, ósea estas:

    1. $crop1=$_POST['crop1'];
    2.     $crop2=$_POST['crop2'];
    3.     $crop3=$_POST['crop3'];
    4.     $crop4=$_POST['crop4'];
    5.     $crop5=$_POST['crop5'];
    6.     $crop6=$_POST['crop6'];

    Y cambiarlas por estas:

    1. $crop1=isset($_POST['crop1']) ? $_POST['crop1'] : '';
    2. $crop2=isset($_POST['crop2']) ? $_POST['crop2'] : '';
    3. $crop3=isset($_POST['crop3']) ? $_POST['crop3'] : '';
    4. $crop4=isset($_POST['crop4']) ? $_POST['crop4'] : '';
    5. $crop5=isset($_POST['crop5']) ? $_POST['crop5'] : '';
    6. $crop6=isset($_POST['crop6']) ? $_POST['crop6'] : '';

    Actualizar la galería

    Para actualizar la galería el proceso es realmente simple. Simplemente deberemos dirigirnos a donde la hemos ubicado y luego a la carpeta “Upload”

    1. http://www.tusitioweb.com/galeria/upload/

    nos encontramos ahí que deberemos ingresar un nombre de usuario y password, los cuales son los mismos que hemos configurado al principio en el archivo config.php.

    login

    Subir imagenes

    En este panel deberemos escribir primero el nombre de las carpetas donde serán almacenadas las imágenes, ósea la carpeta que almacenera las imágenes en tamaño normal y las miniaturas. En mi caso deje los nombres por defecto. Simplemente luego deberemos seleccionar todas las imágenes que deseamos subir, las cuales podrán ser varias simultáneamente. Automáticamente se cargaran a la galería.

    subir

    Ver Demo

    Les dejo mi galeria – y el demo del sitio oficial

    Nota

    Para evitar un problema sencillo, al configurar en el primer paso de la instalación las carpetas que almacenaran nuestras imágenes de la galería, es recomendable configurarlas dentro de la carpeta “uploader” tal cual figura en el ejemplo. Básicamente porque al subir las imágenes desde el panel, las mismas se almacenaran dentro de ellas.

  • Agregar curvas a las fotos

    Muchos quizás no le den importancia a las imágenes que introducen en cada uno de los post, pero muchos de ustedes se que si. Pues aquí Hongkiat acaba de publicar un tutorial muy ilustrativo para conseguir agregar curvas a las fotos, que desde ya es un efecto que le da a las fotos un estilo muy agradable. Podrán seguir el tutorial para por paso y si desean descargar el archivo PSD del mismo.

    Enlace tutorial y descarga PSD: Create Photo Curves


Pagina 3 de 41234