martes, 18 de enero de 2011

Centrar un div horizontalmente

En el post anterior les mostraba como alinear un div verticalmente hacia abajo. Ok pero ¿para centrarlo horizontalmente? Bueno también es sencillo. Debemos de fijar las siguientes propiedades CSS: Al div contenedor del div que deseamos centrar la propiedad TEXT-ALIGN la ponemos en CENTER, al div que deseamos centrar fijamos la propiedad MARGIN al valor 0 AUTO. Con esto queda nuestro div centrado, pero su contenido también (y lo más probable es que no deseemos esto), si este es tu caso al div centrado también debes de agregarle la propiedad TEXT-ALIGN a LEFT o RIGHT (como desees).

Pues eso es todo. Aquí también te dejo un ejemplo para que lo pruebes por ti mismo:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
.content
{
width:600px;
height:600px;
background-color:#FFC;
/*---*/
text-align:center;
}
.info
{
width:300px;
height:300px;
background-color:#CCF;
/*---*/
margin:0 auto;
text-align:left;
}
</style>
</head>
<body>

<div class="content">
<div class="info">texto centrado</div>
</div>

</body>
</html>

Alinear un DIV hacia abajo

Si deseas que un div este alineado verticalmente hacia abajo solo necesitas 3 estilos con CSS y todo queda muy bien. Primero debes de fijar la propiedad POSITION del contenedor a RELATIVE, luego al div que deseas alinear hacia abajo las propiedades BOTTOM a 0px y POSITION a ABSOLUTE. Eso es todo, sencillo ¿no?

Aquí les dejo un ejemplo de como seria implementado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
.content
{
position:relative;
height:500px;
}
.copyright
{
bottom: 0px; 
position: absolute;
}
</style>
</head>
<body>

<div class="content">
<p>texto texto texto texto texto texto texto</p>
    
    <div class="copyright">Copyright Copyright Copyright Copyright Copyright</div>
</div>

</body>
</html>

Dar formato al código en Dreamweaver

¿Copiaste código de alguna página de internet y se pegó todo un desastre? Aquí tengo un tip para que en segundos quede todo solucionado.

En Dreamweaver en el menú Commands / Apply Source Formatting

Problema solucionado, espero que les sirva.
Saludos.

martes, 11 de enero de 2011

Crear una paleta de colores

Kuler es una herramienta de adobe que permite tanto extraer una paleta de colores de una imagen (como mostrábamos en el post anterior) o crearla tú mismo. Adicionalmente kuler te muestra varias paletas prediseñadas por otros usuarios.

Esta herramienta es muy sencilla de utilizar, simplemente entras en http://kuler.adobe.com y presionas “Create”, en “Select a rule” tienes 7 opciones, selecciona la que más se adecue a tus necesidades.

En el círculo de colores mueve lo puntos seleccionando los colores que desees y hasta que estés satisfecho. Para cada color puedes aumentar o disminuir el brillo en la barra que está justo debajo.



Finalmente aquí están 2 páginas que te pueden servir de utilidad:

http://www.imageandart.com/tutoriales/teoria/esquemas_color/index.html es una sencilla página donde te da una pequeña descripción de cada esquema básico del color, así como un ejemplo.

Color in motion es una interesante página donde de forma muy creativa te muestra las propiedades de cada color, es una buena forma de saber por ejemplo que sentimientos representa cada color, o que color debes usar si quieres transmitir sensación de comodidad, calor, educado, formal, etc.

Como extraer la paleta de colores de una imagen

¿Eres de los que tiene problemas a la hora de elegir colores para una página web? ¿O simplemente deseas extraer la paleta de colores de una imagen? Bueno esta herramienta te puede facilitar mucho al vida, simplemente seleccionas la imagen que desees y le das “Upload and process” y listo! Te muestra el color dominante de la imagen, así como una paleta de colores con los 10 más comunes. Adicionalmente te da la opción de descargarla en 2 formatos.

Ha si, la herramienta online se llama: whats its color


sábado, 8 de enero de 2011

Métodos abreviados

Para los usuarios avanzados los métodos abreviados les pueden facilitar mucho la vida. Si eres de los que odia tener que dejar el teclado para agarrar el mouse, los siguientes son algunos de los métodos abreviados que manejo y te pueden ser de utilidad. Cabe destacar que este post lo estaré actualizando constantemente.

PHOTO SHOP

Ctrl + N         - Nuevo
Ctrl + Alt + j  - Nueva capa
Ctrl + Alt + i  - Tamaño de imagen
Ctrl + Alt + c - Tamaño del lienzo (o canvas)
Ctrl + D         - Deseleccionar
Shift + Ctrl + X - Liquify
V                   - Mover
M                  - Seleccionar
C                   - Recortar (Crop)
G                   - Bote de pintura (Rellenar)
T                   - Texto
J                    - Herramienta de parche

INTERNET EXPLORER 9

Ctrl + W        - Cerrar la pestaña actual
Alt + Enter     - Navegar a la direccion escrita en una pestaña nueva (debes tener el cursor en la barra de dirrecciones)

VISUAL STUDIO

Ctrl + M + O    - Contraer el codigo
F5                     - Start debugging
Ctrl + F5           - Start (No debugging)
Shift + F5         - Stop debugging
Ctrl + Shift + F5 - Restart
Ctrl + Alt + Q    - Quick Watch
Alt + F7             - Cambiar entre tools
Alt + Shift + F7  - Cambiar entre tools inverso
Ctrl + Alt + S     - Server explorer
Ctrl + Alt + X     - Tool Box
Shift + Alt + D    - Data Sources
Ctrl + Shift + S   - Save All
Ctrl + Shift + B   - Build Solution
F3                      - Buscar siguiente
Ctrl + T              - Desplazar el caracter anterior a la derecha
Ctrl + Shift T      - Desplaza la palabra a la derecha
Ctrl + Alt + B     - Todos los Breakpoints

viernes, 7 de enero de 2011

Olvidaste la contraseña del administrador de Joomla?

Si tienes un sitio web en Joomla y olvidaste la contraseña del usuario administrador (de hecho este truco funciona para cualquier usuario) no desesperes, hay una solución. Simplemente has lo siguiente:

1.- Inicia sesión en PhpMyAdmin (si no tienes el usr y el password de MySQL vas por mal camino :p ). Si es un sitio local y no tienes PhpMyAdmin lo puedes bajar de http://www.phpmyadmin.net . si tienes contratado un hosting, desde el cPanel puedes acceder a PhpMyAdmin

2.- Selecciona la base de datos de Joomla

3.- En la tabla ‘Users’, selecciona el usuario que te interesa y cambia el valor del campo ‘Password’ por lo siguiente: ‘af9083d4b82dbc0745b124db3b3cf15d:M0WuLowO4rtRTddG’

Este montón de letras raras es en realidad la palabra ‘admin’ encriptada con MD5 (Joomla 1.5 encripta ‘palabra clave’+salt con MD5).

4.- Una vez hecho este cambio inicia sección en el ‘Administrator’ con el usuario ‘admin’ (o el que sea si le cambiaste de nombre) y la contraseña ‘admin’

Cuando puedas entrar de nuevo al administrador de Joomla, No olvides cambiar la contraseña por una más fuerte.