24Sep 2009 0 Comments

javascript redirigir actualizar pasado un tiempo

Categories: html, javascript - Tags: html, javascript

Muchas veces requerimos que una página se redirija a otra automáticamente por ejemplo para mostrar mensajes del tipo “esta página no esta disponible”, “estamos en mantenimiento”, “hemos cambiado a la siguiente direccion, por favor espere unos segundos para ser redirigido”, etc.

Es muy fácil crear este tipo de mensajes, primero debemos hacer que se llame al cargar la página web, para eso usamos un código como este:

1	<body onLoad="redireccionar()">

Y ahora faltaría crear la función que redirija nuestra página web, que sería algo como esto en nuestro encabezado:

1
2
3
4
5

El comando setTimeout nos permite que transcurrido un tiempo, en este caso 5000 milisegundos (5 segundos) se produzca la redirección.

Actualización automática de la página

En este caso vamos a usar otro comando dentro del setTimeout

1	setTimeout('document.location.reload()',10000);

En este caso se actualizará automáticamente cada 10 segundos

Regresar a la página anterior

Si quisieramos mostrar un mensaje y que luego se dirija a la página anterior sería

1	setTimeout('history.back()',10000);

18Sep 2009 0 Comments

Photoshop CS4 herramientas de selección

Categories: Diseño, photoshop - Tags: photoshop

Voy a aprovechar que estoy llevando un curso de Photoshop para escribir algo al respecto. Creo que todos lo que hayamos manejado alguna vez Photoshop conocemos las herramientas de selección, doy un click arrastro el mouse y ya, pero hay algunas opciones adicionales que podemos aprovechar para explotar al máximo nuestro Photoshop.

Opciones de Selección

Como ya sabemos en nuestra barra de herramientas hay 2 opciones selección rectangular y selección elíptica pero ambas tienen algunas variantes que permiten no sólo crear una nueva selección sino que además es posible modificar nuestra selección cortando partes de esta o agregando trozos de selección.

photoshop cs4 seleccion

Modificando nuestra selección

¿Cómo muevo mi selección?

Si quisieramos mover nuestra selección cuando aún no hemos soltado el mouse debemos apretar la barra espaciadora y al mover el mouse se moverá nuestra selección.
Si ya soltamos el mouse entonces al pasar el mouse sobre la selección manteniendo activa la herramienta selección veremos que el cursor cambia y al darle click y arrastrar la selección esta se moverá.

¿Cómo selecciono un cuadrado o un círculo?

Si queremos que la selección se escale de forma precisa debemos apretar la tecla mayúsulas (shift) y asi obtendremos ya no un rectángulo sino un cuadrado o un círculo según corresponda.

¿Cómo hago crecer la selección desde el centro?

Normalmente la selección crece desde una esquina pero que crezca desde el centro para lo cual debemos apretar la tecla ALT y al arrastrar el mouse esta crecerá desde el centro.

Modificar bordes de mi selección

Una vez hecha nuestra selección elegimos en el menu seleccion/modificar/suavizar o en inglés selection/modify/smooth allí podremos elegir cuantos pixeles desemos como borde redondeado. También es posible agrandar, reducir e incluso crear un desvanecimiento de nuestra selección usando las opciones de selección/modificar

Transformar nuestra selección

Una vez hecha la selección es posible rotar y escalar en la opción del menú selección/transformar selección

Pintar la selección

Si la idea es colorear la selección hay 2 opciones CTRL+BACKSPACE y ALT+BACKSPACE con esta combinación nuestra selección se pintará con el color de fondo o el color frontal respectivamente.

Invertir la selección

Usando la combinación CTRL + MAYÚSCULAS(SHIFT) + I la parte no seleccionada se selecciona y la parte que estuvo seleccionada se deselecciona esto es muy util para cambiar el fondo o eliminarlo.

14Sep 2009 6 Comments

Reemplazar texto por imagenes maquetacion CSS

Categories: Posicionamiento, seo - Tags: CSS, html, maquetación, Posicionamiento, seo

Cuando lees el título lo primero que te preguntas y ¿por qué deberia cambiar un texto por una imagen mejor inserto directamente una imagen?, viéndolo así parece más práctico pero si lo vemos desde la óptica de SEO (Optimizacion de nuestro sitio para buscadores) nos damos cuenta que es importante hacer nuestra página semánticamente correcta por ejemplo que nuestro logo no sea simplemente una imagen sino un H1 osea el titulo principal eso lo hace más “apetitoso” nuestro contenido para google.

Veamos algunas técnicas para lograr esto

Reemplazo clásico

Aqui lo que hacemos es agregar a nuestro titulo una etiqueta span que ocultaremos usando CSS, lo malo es que aunque el titulo es semanticamente correcta span no lo es.

1
2
3

<h3 id="header">
<span>Revised Image Replacement</span>
</h3>

1
2
3
4
5
6
7
8

#header {
width: 329px;
height: 25px;
background-image: url(sample-opaque.gif);
}
#header span {
display: none;
}

Usando margen

En este método no hace falta agregar etiquetas HTML adicionales lo que hacemos es enviar nuestro texto muy lejos de tal forma que no sea visible. El problema es que si la imagen faltara no se marcará, bueno tampoco es tan grave de hecho en todos los casos ocurre eso.

1
2
3
4
5
6
7
8
9
10
11

<h3 id="header">
Revised Image Replacement
</h3>
[/css]
[cc lang="css"]
#header {
background: url(sample-opaque.gif) no-repeat top right;
width: 2329px;
height: 25px;
margin: 0 0 0 -2000px;
}

Usando indentación

Este método es muy similar al anterior lo que hace es enviar nuestro texto lejos pero no usando un margen sino indentación, el problema es que según parece genera problemas en IE5 si es que aún alguien lo usa claro esta.

1
2
3

<h3 id="header">
Revised Image Replacement
</h3>

1
2
3
4
5

#header {
text-indent: -5000px;
background: url(sample-opaque.gif);
height: 25px;
}

Existen algunos otros métodos más pero la verdad son sólo ligeras variantes de los anteriores.

09Sep 2009 3 Comments

Forzar compatibilidad con IE7 en IE8

Categories: Diseño, Otros - Tags: CSS, html

Ya hace un tiempo que salió la versión oficial de IE8 lo que significa que los diseñadores debemos hacer compatibles nuestras páginas con IE6, IE7 y encima IE8, por lo general Firefox no da lios y si funciona ahi es 99.99% probable que funcione en Chrome, Opera y Safari pero tal vez no en IE8 :X

Tenemos 2 opciones o nos rompemos la cabeza intentando comprender porque a Microsoft le importan tan poco los estándares o hacemos que IE8 se comporte como si fuera IE7, para esto último tenemos que agregar un código como este:

1
2
3
4
5
6
7
8
9
10

<html>
<head>

<title>My Web Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
<body>
<p>Aqui nuestro contenido</p>
</body>
</html>

De esa forma nos ahorramos rompernos la cabeza con IE8 y le sumamos un hack mas a la laaaaarga lista de hacks para que IE funcione medianamente bien.

08Sep 2009 1 Comment

Ventana modal con jquery

Categories: AJAX - Tags: AJAX, jquery

Podriamos progamar una ventana modal desde cero pero es mucho más facil si usamos algun plugin de jquery, para eso voy a usar Simple Modal

Primero incluimos jquery y el plugin simple modal en nuestra cabecera

1 2	<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.simplemodal-1.3.min.js "></script>

Luego debemos elegir que elementos deben ser afectados por simplemodal usando los selectores de jquery, con lo que podría quedar asi:

1	$("#sample").modal();

O podriamos incluir algunos parámetros adicionales como por ejemplo cambiar el color de fondo y la opacidad

1
2
3
4

$("#sample").modal({
overlay:80,
overlayCss: {backgroundColor:"#fff"}
});

Existen opciones más avanzadas como animaciones uso de iframes entre otras su pagina web

Archive for month: September, 2009