Guias para la Web

Cambiar el logo de tu sitio web con PHP y JQuery

Escrita por UTAN, 5 Julio 2010 (0) Comentario
Cambiar el logo de tu sitio web con PHP y JQuery

En esta guia te mostrare como cambiar tu cabecera de tu sitio usando JQuery y PHP.
Lo primero que debes de saber esque tu hosting corre PHP, casi todos lo hacen ya que PHP se a vuelto tan usado a nivel mundial…
Lo que aremos es hacer un pequeño script que hara que tu foto o logo de cabecera cambie en determinado tiempo sin que se note el cambio al refrescar, “nota:tambien puedes mostrar una base de datos en mysql” ,  en php esto no es posible completamente, es por eso que tenemos a la mano el JQuery..

  1. Creamos una pagina en html y la nombramos cabecera.html, si quiere que tenga extensión “php” también lo puedes hacer pero no es necesario, crea lo necesario..
     
<html>
<head>
<title>Cambia el logo de tu sitio con php y ajax</title>
<script type="text/javascript" src="jquery-latest.js"></script>
<script language="javascript" type="text/javascript">
 $(document).ready(function() {
    $("#cabecera").load("cambiar_logo.php");
   var refreshId = setInterval(function() {
      $("#cabecera").load('cambiar_logo.php?randval='+ Math.random());
   }, 10000);
});
</script>
</head>
<body>
<div id="cabecera">
</div>
</body>
</html>
  2. Dejen le explico un poco de las partes mas importantes, entre el 
    <head></head>
    ira el código javascript es el mas importante pues es el que va actualizar el div tag 
    <div id="cabecera"></div>
    aqui es donde se actualizara, el logo o foto o cualquier cosa que quieras que aparezca en el DIV.
  3. En el javascript asegura que cambias los nombres del div y de el nombre de php que ara la magia de cambiar el logo ,solo si deseas puedes cambiar el nombre que le di, a el tuyo propio que quieras usar:
    $("#aqui-el-div").load("nombre-de-el script.php");
 $("#aqui-el-div").load('nombre-de-el script.php?randval='+ Math.random());
  4. Ahora en el codigo javascript que cambia el tiempo de actualizacion o que refresca el script es este:
    }, 10000);

    La cantidad que ves es de 10 segundo, si lo cambiases a 5000 entonces te daria una actualización de 5 segundos…
  5. Ahora pasamos hacer el código php que se encarga de darte el cambio de foto, el javascript actualiza este escript llamándolo por el tiempo que tu desees, pero el código php es que cambia la foto al ser llamado por el javascript.. llámalo cambiar_logo.php, el codigo php es:
    <img src="/cabeceras/
cabecera_<?php echo(rand(1,3)); ?>.jpg" width="1004" height="237" />
  6. Expliquemos un poco el código php, la parte que es php es la funcion 
    <?php echo(rand(1,3)); ?>

    La cual cambia un numero al azar, si quieres poner una cantidad mas alta entonces cambia de “1,3″, pones un ejemplo “1,10″ y colocas 10 imágenes en el folder /cabeceras/..
    las demas partes es la imagen tag y el folder donde colocaremos las fotos o logos, la cual es el folder “cabeceras” recuerda crearlo, en este folder colocamos las fotos o logos los cuales nombraremos cabecera_1.jpg, cabecera_2.jpg, cabecera_3.jpg, asi sucesivamente.. porque ese nombre?, pues en este caso y para la guia utilice ese termino… “cabecera” utiliza el que quieras en tu pagina..
  7. El ultimo paso para que el todo funcione es llamar JQuery que es llamado asi:
    <script type="text/javascript" src="jquery-latest.js"></script>

    Este es lo mas importante, el que hace todo el trabajo y la magia de refrescar el div sin que se vea ningun parpadeo, ahora yo lo tengo en en la base de mi hosting, lo puedes colocar donde quieras pero debes recordar llamarlo correctamente… ya sea por el path relativo o absoluto…

Llegamos al final de esta guia, alguna duda o algun paso falla, porfavor deja tu mensaje abajo… no olvides todos los pasos leerlos con calma, además asegura que tienes los path correctos, pues si no estan, no te funcionara…
Quieres verlo funcionando click en :
Cambiar de logo con php y JQuery.
Si quieres el contenido del JQuery descargalo o solo enlasalo con el siguiente código O solo enlazarlo asi:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Categorias : Guias para la Web Etiquetas :

Como hacer que IE8 funcione como IE7?

Escrita por UTAN, 1 Agosto 2009 (2) Comentarios

Bueno desde algun tiempo, IE8 esta en nuestros sistemas Windows XP , Windows Vista y Windows 7, Desde entonces muchas webs an sido Destruidas completamente por IE8 puesto que solo muestra paginas correctamente si estas estan bajo WC3 standars, si tu sitio trabajaba bien en IE7 pero ahora se ve destruido bueno utiliza estos trucos para que IE8 sea emulado como su antesesor IE7 .

Podes hacerlo usuando la tag de compatibilidad que deve ir entre”<head>” tag los mas serca posible de esta .

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Ahora tambien puedes usarlo en tu .htaccess en tu folder de raiz de tu website , utiliza este codigo :

<FilesMatch "\.(html|htm|php)$">
#
Header set X-UA-Compatible "IE=EmulateIE7"
#
</FilesMatch>

Esto le dice a IE8 que funcione como IE7 emulado….

Categorias : Guias para la Web,Un poco de html Etiquetas :

Usa ajax para refrescar un tag div

Escrita por UTAN, 25 Abril 2009 (7) Comentarios

Buscando una forma de refrescar un tag div sin necesidad de hacerlo a la pagina completa, me encontré con una guia en ingles, que me resulto sumamente fácil y efectiva de hacerlo.. Ajax (Asinchronous JavaScript and XML) es una poderosa herramienta, que hace el trabajo sin necesidad de que tu pagina se refresque completa y además que no parpadee en el momento de refrescarse. Para proseguir debes de estar seguro que tu Hosting soporta Ajax y que tenes conocimientos básicos para editar los code que te voy a proporcionar, es procedimiento es fácil y no es complicado, si salves que un tag div entonces lo tenes todo para continuar.. son tres archivos que editaremos en este ejemplo.

  • ajax.js
  • index.html
  • tiempo.php

Ajax.js tiene el XMLHttpRequest asi que esta es el archivo importante lo podes renombrar si quieres,  recuerda eso si, que si lo haces debes recordar que nombre fue el que le pusiste pues lo usaremos mas adelante…

código del archivo ajax.js copia y salva lo como ajax.js


// Cambia estos parametros

var seconds = 5; // el tiempo en que se refresca
var divid = "timediv"; // el div que quieres!
var url = "tiempo.php"; // el archivo que ira en el div

////////////////////////////////
//
// Refreshing the DIV
//
////////////////////////////////

function refreshdiv(){

// The XMLHttpRequest object

var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Tu explorador no soporta AJAX.");
return false;
}
}
}

// Timestamp for preventing IE caching the GET request

fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout('refreshdiv()',seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

// Start the refreshing process

window.onload = function startrefresh(){
setTimeout('refreshdiv()',seconds*1000);
}

Seguimos con el index.html, este puede ser tu html, aquí usare este ejemplo solamente.

Código del Index.html copia lo y pega el código y salva lo como index.html


<html>

<title>Refresca undiv tag sin necesidad de refrescar toda la pagina</title>

<head>
<script src="ajax.js"></script>
</head>

<body>
<b>Este es el tiempo actual(se actualiza cada 4 segundos):</b>

<script type="text/javascript">
refreshdiv();
</script>
<div name="timediv" id="timediv">

</div>

</body>

</html>

Ahora una cosa importante es colocar en el <head> tag de tu HTML el script que le dice a tu pagina donde encontrar el ajax.js lo cual es este codigo <script src=”ajax.js”></script> recuerda que tienes que serrar el </head> o si no no funcionara, en el ejemplo usamos un simple html pero si lo quieres usar tienes que colocarlo  en el tuyo…

Ahora bien en el mismo index.html encontras que existe este  código.


<script type="text/javascript">
refreshdiv();
</script>
<div name="timediv" id="timediv">

</div>

Este código también debe ir en tu html, es el que le dice al ajax.js que inicialice el proceso de refrescar y dice la ubicación del div, como ves el div no tiene contenido, el contenido esta en el tercer archivo que utilizaremos tiempo.php, este puede ser cualquier archivo sea , php,html,shtml etc. básicamente el contenido que tenga ira en el div de el html, en este ejemplo tiempo.php tendra códigos para dar la hora en el webserver. Recuerda que esta Guia es para principiante.

El archivo tiempo.php

Este archivo tiene un simple código para mostrar la hora en el servidor en que este tu pagina web..


< ?

// Format time output

$str = "It is %a on %b %d, %Y, %X - Time zone: %Z";

// Echo results

echo(gmstrftime($str,time()));

?>

Con esto se termina la guia, espero sea de tu agrado no es difícil de seguirla para novatos como nosotros, comenta la guia.. gracias

Lee el resto de los archivos

Categorias : Guias para la Web Etiquetas : , , , ,