div como link (Hacer un div clickeable)

Simple con javascript :D

colocamos el div de la siguiente forma

<div id=”clickeable” onclick=”location.href=’http://www.nuestraURL.com’;” ></div>

ahora para que al pasar el mouse por encima muestre este como link debemos colocar el estilo:

cursor:pointer;

podemos hacerlo dentro de la hoja de estilo sino dentro de la misma etiqueta del div de la siguiente forma:

<div id=”clickeable” onclick=”location.href=’http://www.nuestraURL.com’;” style=”cursor:pointer;” ></div>

detectar IE6

si te cansaste de lidiar con internet explorer 6 podemos mediante PHP detectarlo y decidir que hacer en caso de encontrar algun usuario navegando con el.

$usr_brwsr = $_SERVER['HTTP_USER_AGENT'];

$usr_brwsr = substr(“$usr_brwsr”, 25, 8);

if ($usr_brwsr == “MSIE 6.0″){

/* Aqui colocamos el codigo de lo que hacemos si el usuario navega con IE6, podemos poner un aviso de que esta navegando el sitio con un navegador desactualizado o crear una variable que contenga una hoja de estilos diferente.*/
}

ejemplo de mensaje: echo ‘<p style=”padding:5px; margin:5px; display:block; background:#f5d343; color:#000; text-align:center; “>”You are using an outdated browser, please upgrade your browser”</p>’;

ejemplo de hoja de estilo diferente:

dentro de una variable guardamos la ruta de nuestras hojas de estilo.

$linkstyles=’<link href=”assets/style-ie6.css” rel=”stylesheet” type=”text/css” />’;

y luego restaria dentro de nuestras etiquetas <head> colocar un <?php echo $linkstyles; ?>

Reset css limpiando estilos del navegador | cleaning browser Styles

nada mejor que antes de comenzar un nuevo desarrollo limpiar los estilos por default de los navegadores para poder tener un mayor control sobre nuestros estilos.

codigo CSS:

body, div, dl, dt, dd, li, pre,
form, fieldset, input, textarea, p, blockquote, th, td, button { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: 100%; font-weight: normal; }
address, caption, cite, code, dfn, em, strong, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th { text-align: left; font-weight: normal; font-style: normal; }
acronym, abbr, fieldset, img { border: 0;}
:focus { outline: 0; }

nothing better before start a new development use a reset css, can clean default styles of browsers and you obtain more control of your own styles.

funcion focus | poner puntero en campo

para poner el puntero sobre un input o un textarea podemos usar javascript con la siguiente funcion:

<script type=”text/javascript”>
function myfocus(){
document.myform.myfield.focus();
}
</script>

donde seria myform el nombre de nuestro formulario y myfield el nombre del campo donde queremos q se situe el puntero. restaria solamente decirle a nuestra pagina que al cargarse cargue nuestra funcion de la siguiente forma:

en la etiqueta de apertura de <body> colocariamos asi:

<body onload=”myfocus();” >

Creador de sitemaps gratuito

free sitemap creator.

en el sitio http://www.xml-sitemaps.com/

Free Sitemap Creator
podemos ingresar la url de nuestro sitio y nos devuelve sin costo alguno nuestro sitemap en xml validado y podemos descargarlo comprimido o no, como ror o html
lo probe con MeetBuilder.com y funciona bastante bien y sobre todo rapido

una vez descargado en el formato que nos guste resta subirlo a nuestro sitio y ya podemos ir a nuestra cuenta de webmasters de google.

chequear diseño web en diferentes navegadores

Test your web design in different browsers

muchas veces necesitamos chequear nuestro sitios en diferentes navegadores para comprobrar errores en css o ver como toman los hack cada browser de forma diferente.

existe un sitio gratuito que permite seleccionar distintos tipos de navegadores para Mac, Linux, Windows.

el sitio es : http://browsershots.org/

podemos enviar la URL de nuestro diseño y luego de esperar unos minutos el sitio nos muestra diferentes screenshots de como se ve nuestro sitio en los navegadores que seleccionamos.

podemos incluso hacer un download de las pantallas

el sistema funciona con diferentes equipos distribuidos con cada navegador instalado que al recibir nuestra URL abren la direccion , generan una impresion de la pantalla y luego la envian al servidor para que se puedan descargar o ver online.

Favicon Animado

Desde hace un tiempo comenzo a verse en algunos sitios la posibilidad de incorporar el icono de favoritos animado.

ya hay sitios donde podes subir tu archivo y te lo crea automaticamente y luego resta agregar entre <head> y </head> la siguiente linea:

<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” href=”animado_favicon.gif” type=”gif” >

dejo un par de sitios donde podes subir tu imagen y te genera automaticamente el gif animado o el icono sin animacion:

Favicon Animado:

http://www.html-kit.com/favicon/

Favicon sin Animacion:

http://tools.dynamicdrive.com/favicon/

Google Sitemaps

Un sitemap consiste en un listado detallado que podemos poner a disposicion de las arañas o robots que utilizan los buscadores para realizar el indexzado de paginas de un sitio.

es un simple archivo XML donde describimos cada pagina de un sitio junto con informacion adicional como la frecuencia de modificacion de cada pagina o la proiridad de importancia que tiene cada una de estas.

la estructura del archivo XML es la siguiente:

el archivo comienza con la etiqueta <urlset> y finaliza con </urlset>

dentro de estas etiquetas colocaremos etiquetas <url> y </url>. y dentro de cada una de estas colocaremos etiquetas hijas:

<loc> <lastmod> <changefrec> y <priority>

dentro de <loc>la direccion URL de la pagina

<loc>http://www.dominio-de-misitio.com.ar/nombre-pagina.html</loc>

dentro de <lastmod> colocaremos la fecha de la ultima modificacion del archivo.esta etiqueta es opcional y el formato de la fecha que insertemos tiene que cumplir con lo requerido dentro del formato dispuesto por la W3C, de esta forma AAAA-MM-DD.

<lastmod>2006-08-01</lastmod>

dentro de <changefreq> tambien opcional, colocaremos la frequencia de actualizacion del archivo q puede ser en los siguientes valores:hourly, daily, weekly, monthly o yearly.

<changefreq>weekly</changefreq>

y por ultimo agregaremos la etiqueta <priority> esta es una etiqueta tambien opcional, donde incluiremos la importancia del archivo en cuanto a prioridad con respecto a las otras URLs q tenemos demarcadas en el documento podemos insertar valores desde 0,0 hasta 1,0. el valor standard es 0.5

<priority>0.5</priority>

el archivo final quedaria de esta forma:

<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″>
<url>
<loc>http://www.Dominio.com.ar/pagina1.html</loc>
<lastmod>2007-07-20</lastmod>
<changefreq>weekly</changefreq>
<priority>0.50</priority>
</url>
<url>
<loc>http://www.Dominio.com.ar/pagina2.html</loc>
<lastmod>2007-07-20</lastmod>
<changefreq>weekly</changefreq>
<priority>0.50</priority>
</url>
</urlset>

por ultimo solo nos resta enviar nuestro archivo a google mediante el siguiente enlace, previa registracion gratuita en el servicio de herramientas para webmasters que ofrece google.

http://www.google.com/webmasters/sitemaps/