Archive for month: August, 2009

Como vectorizar un logotipo con illustrator

Categories: Otros - Tags: ,

Vectorizar un logotipo en illustrator no es complicado sin embargo es importante tener en cuenta algunos detalles:

  • Es preferible que la imagen esté en blanco y negro y luego la pintamos una vez vectorizada
  • Debemos conseguir un logo a buena resolución para conseguir mejores resultados
  • Es preferible usar una imagen con fondo blanco o fondo transparente
  • El programa ayuda pero no es que haga todo por nosotros asi que siempre tendremos que dar algunos retoques

Optimizar la imagen

Como indiqué antes es mejor una imagen en blanco y negro y limpiarla lo más posible, para eso nos vamos a ayudar con Photoshop, ajustando el brillo y contraste y asi eliminar manchas u otras interferencias.

vectorizar logo 1

vectorizar logo 1

Usar Live Trace

En Adobe Illustrator copiamos la imagen que hemos limpiado usando Photoshop, al seleccionar vemos la opción “Live Paint” y a su costado hay diversas opciones para vectorizar para este caso usaré la opción “Simple Trace”

logo vectorizar 2

logo vectorizar 2

Retoques Finales

Antes de poder aplicar estilos o editar nuestro grafico vectorizado debemos elegir la opción “Expand” que esta al lado de Live Paint, eso convertirá nuestro gráfico vectorizado en un grupo, si le damos click derecho y luego “Ungroup” ya estará listo para editar los nodos del objeto

logo-vectorizar5

logo-vectorizar5

Logos gratis para tu pagina web

Categories: Diseño, Otros - Tags: ,

Si es que el diseño no es tu fuerte o necesitas un logo para salir del apuro, seguro que esta página te va a ser muy útil, estos logos pueden ser usados libremente no requieres suscribirte para descargarlos y lo mejor claro esta es gratis.
Si eres un diseñador profesional no esperes encontrar maravillas obviamente pero para salir del paso genial.

Busca AQUI

Web modular PHP con AJAX

Categories: AJAX, PHP - Tags: , , ,

Hace no mucho tuve un cliente que insitia en tener un flash con musica en su pagina web y que esta no se corte cuando cambie de página para lograr esto hay que evitar que se recargue la pagina, lo que se puede lograr usando iframes sin embargo esta solución implicaba reprogramar varias cosas, intenté convencer al cliente de lo inconveniente de usar frames y de poner música pero no aceptó.

En vista de esto tuve que inventar algo que permita que mi página funcione sin demasiados cambios y darle el gusto al cliente, por lo que implementé esta solución usando AJAX, para ser más preciso jquery.

Web Modular

La web modular se basa en varios pedazos de código que se juntan (encabezado, menu, contenido, pie de pagina), eso ya lo expliqué en un post anterior.

Cargar los contenidos sin recargar

Aqui va la parte interesante, hay que hacer que los links llamen contenidos via ajax (jquery), lo que se logra primero agregando a cada link la clase ajaxmenu

1
2
3
4
<a href="pages/homepage.php" class="ajaxmenu">Homepage</a>&nbsp;&nbsp;|&nbsp;&nbsp;    
    <a href="pages/aboutus.php" class="ajaxmenu" >About Us</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="pages/services.php" class="ajaxmenu" >Services</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="pages/contactus.php" class="ajaxmenu" >Contact Us</a>

y agregando este código al top_page.php dentro del header y entre etiquetas script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function(){
    $.ajaxSetup ({
        cache: false
    });
       //// Imagen mientras carga el contenido
    var ajax_load = "<img src='img/load.gif' alt='loading...' />";
   
    // Interceptar el link de los menus
    $(".ajaxmenu").click(function(){    
                /// Extraemos el nombre de la pagina que esta en el link
        var loadUrl = $(this).attr('href');
                /// Llamamos el contenido
        $("#contenido").html(ajax_load).load(loadUrl);
        return false;
    });
});






En la segunda parte de este tutorial explico como hacerlo funcionar cuando los links son internos, y más importante cuando usamos anclas

Videotutorial como diseñar paginas web con Photoshop

Categories: Diseño, videotutorial - Tags: , ,

Este es el primer video tutorial que grabo y publico en mi pagina web.

No olvides votar por el video en youtube

La idea era mostrar como se hace el diseño (layout) del sitio antes de proceder a maquetarlo, en un futuro tutorial publicaré el
proceso de convertir este diseño en XHTML y CSS.

Primero voy a resumir el video:

El primer paso es crear un nuevo archivo en Photoshop, el ancho depende de nuestro diseño, vamos a ver algunas pautas para ello

Lineas Guia

Para hacer nuestro diseño es necesario definir un ancho que sea compatible con la mayoría de monitores, lo cual suele ser 1024 x 768px sin embargo hay varios pixeles que ya son ocupados por el propio navegador asi que como tamaño máximo no debemos usar mas de 1000px de ancho, si además desea poner un fondo visible lo mejor sería no exceder del 960px. Con Photoshop procedemos a poner estas primeras guias que fijaran el ancho del sitio.

Estructura de las Capas

Es imporatnte ser ordenados al momento de diseñar, eso ayudará mucho al programador o a nosotros mismos nos ayudará a hacer cambios posteriores por lo que sugiero crear una carpeta por cada sector: encabezado, menu, contenido,… y dentro de estas otras carpetas por ejemplo dentro de encabezado iria logo, slogan…..

Videotutorial Photoshop

Descarga el layout photoshop

Puedes bajar el archivo photoshop creado en el video desde AQUI

Evitar spam en WordPress

Categories: Wordpress - Tags: ,

Cuando uno tiene un blog, uno de los principales problemas es que nos llenen de spam, hay varias formas de evitarlos así reducir de cientos de mensajes no deseados a solo unos cuantos por semana (aún no existe una solución 100% efectiva)

Aunque en este post voy a ahablar especificamente de WordPress, estas mismas ideas pueden ser usadas en otros blogs o

Voy a explicar algunos de los métodos anti-spam que me han dado buen resultado

Agregar captcha a los comentarios

Un captcha son esas letras algo distorcionadas que debemos insertar, este sistema nos libra de la mayoría de los robots que atacan con spam, hay varios plugins que cumplen con esta tarea, uno de los mejores es Captcha! Plugin es un plugin fácilmente personalizable, requiere de la clase GD2 para funcionar (el 99% de servidores la incluyen)

Akismet plugin

Los mensajes spam tienen ciertas palabras y cierta estructura que nos indica que es un mensaje indeseado este plugin los identifica, no requieres descargarlo ya que viene por defecto con WordPress.

Bloquear Ip, correo, etc

Muchos de estos mensajes no deseados vienen del mismo IP o correo, y cuando fallan los anteriores métodos aún nos queda este plugin que nos permite fácilmente bloquear según el criterio deseado, pueden bajarlo aqui