website header with random images on php

1) first create a folder with images to show into your website header.

2) rename images with names combined with numbers, example: header1.jpg, header2.jpg, header3.jpg ……

3) copy and paste this code into you php document before of <head> and edit with your settings

<?php
//this made a random from 1 to 3
$random = mt_rand(1, 3);
$header_rotator = ‘#header{width: 800px; height: 120px; background:url(headers/header’.$random.’.jpg) no-repeat; }’;
?>

4) now before </head>  paste this code:

<style type=”text/css”>
<?php
echo $header_rotator;
?>
</style>

5) into your document after <body> in the place that you want see your new header:

<div id=”header”></div>

Ready ;)

//

1) crear una carpeta con las imagenes a mostrar en la cabecera.

2) renombrar las iamgenes con nombres convinados con numeros: header1.jpg, header2.jpg, header3.jpg ……

3) copiar y pegar esto antes de la etiqueta <head>y editar con tus preferencias

<?php
//esto genera un random de  1 a 3
$random = mt_rand(1, 3);
$header_rotator = ‘#header{width: 800px; height: 120px; background:url(headers/header’.$random.’.jpg) no-repeat; }’;
?>

4) ahora antes de la etiqueta </head>  copiar esto:

<style type=”text/css”>
<?php
echo $header_rotator;
?>
</style>

5) dentro del documento despues de  <body> (en el lugar que pretendas mostrar el header):

<div id=”header”></div>

listo! ;)

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();” >

generar codigos aleatorios | php random codes

para generar codigos aleatorios de letra o numeros puedes hacerlo de la siguiente forma:

<?php

//values for generate a random, can use only letters or only numbers

//valores para generar el random, puede usarse letras solamente o solo numeros
$random_values = “0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz”;

$long = 10;

$my_random = “”;

$key=strlen($random_values)-1;

for ($i=0;$i<$long;$i++) {

$my_random .= substr($random_values, rand(0, $key), 1);

}

echo $my_random;

?>

abrir Pop Up – ventana emergente

<script type=”text/JavaScript”>
function newPopUp (URL){
window.open(URL,”window”,”width=400, height=300, scrollbars=no, menubar=no, location=no, resizable=yes”)
}
</script>

copiar y pegar entre <header> y </header> y luego llamar desde un link en la parte de tu pagina en la que desees con el siguiente link: <a href=”javascript:newPopUp (‘pop_up.html’)”>open Pop Up</a>

copy and paste inside <header> and </header> and call into your page with this link :<a href=”javascript:newPopUp (‘pop_up.html’)”>open Pop Up</a>

Refrescar pagina cada cierto tiempo con setInterval()

Funcion para recargar pagina cada cierto tiempo utilizando setInterval()

hacer copy paste de este script en la pagina y editar la cantidad de milisegundos deseados para la recarga.

<script type=”text/javascript”>
function reloadPage() {
location.reload(true)
}

setInterval(‘reloadPage()’,’4000′);
//hubermann.com:: funcion para refrescar pagina cada 4 segundos
//editar aqui setInterval(‘reloadPage()’,’4000′); cambiando 4000 por la cantidad de milisegundos deseados
</script>

function for reload page with setInterval();

copy and paste this code and edit ’4000′ for the quantity of second for reload.

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.

Nueva API de google para graficos

Google Charts API

google lanzo una nueva API para la generacion de graficos en desarrollos.
funciona de manera remota donde solo basta enviarle los parametros que necesitemos para nuestro grafico.
podemos enviarle parametros como colores, dimensiones de nuestro grafico, etiquetas para identificar cada dato y obiamente la informacion a representar en el grafico.
permite que manejemos mediante css la estetica y cuenta con varios formatos de graficos como barras, torta, torta 3D,lineas, etc.

les recomiendo una visita por la guia para desarolladores de google donde esta detallada la forma en que recibe cada tipo de grafico sus parametros y las diferentes formas de customizarlas

http://code.google.com/apis/chart/
dejo un ejemplo en php para que vean el funcionamiento

–codigo–
< ?php

$valor1=100;
$valor2=25;
$valor3=500;
//valores a utilizar podrian ser dinamicos

$grafico = “http://chart.apis.google.com/chart?”; //llamamos a la api de google
$grafico.= “cht=p3″; //tipo de grafico en este caso usamos ‘p3′ para una torta 3D
$grafico.= “&chd=t:”; //valores para el grafico separados por coma
$grafico.= $valor1;
$grafico.= “,”; // separacion (,)
$grafico.= $valor2;
$grafico.= “,”;
$grafico.= $valor3;

$grafico.= “&chs=”; //chart size, dimensiones de nuestro grafico
$grafico.= “350×150″;
$grafico.= “&chl=”; //etiquetas de cada seccion (Labels)
$grafico.= “Dato1|Dato2|Dato3″;

?>
–fin Codigo –

en el html abrimos una etiqueta para image y le incorporamos la variable $grafico

<img src=”<?php echo $grafico; ?>” />

y el resultado es este

descargar ejemplo

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.