Daniel Samperio

Códigos y Consejos Programación Web

PHP - CSS3 - Javascript

 Código para controlar el tiempo que tarda en cargar una página

Código que calcula el tiempo transcurrido entre 2 acciones. Se puede utilizar para calcular tiempos de carga en consultas a BBDD, carga de imagenes, etc.


function convertir_segundos(){
    list($useg, $seg) = explode(" ", microtime());
    $seg_total = (float)$useg + (float)$seg;
    return $seg_total;
}

$tiempo_inicio = convertir_segundos();

// Código a ejeutar


// Fin Código

$tiempo_fin = convertir_segundos();
$tiempo_carga_pagina = $tiempo_fin - $tiempo_inicio;
echo "Tiempo carga página: $tiempo_carga_pagina";

 Eliminar último caracter de una cadena de texto

Códigos en PHP para trabajar con cadenas de texto, para ello emplearemos funcion substr:

string substr ( string $string , int $start [, int $length ] )

 

Eliminar el último caracter de una cadena.

$cadena = substr($cadena, 0, -1);

 

Obtener el último caracter de una cadena.

$cadena = substr($cadena, -1, 1);

 Convertir carácteres especiales a html

Cuando a través de un formulario te envían texto, es conveniente convertirlo a HTML. De esta forma también puedes evitar que te inyecten código maligno en ese texto (hay que tener mucho cuidado con las " y ').
En PHP existen 2 funciones que realizan dicha función.

 

$texto = htmlentities($texto, ENT_QUOTES);

Con htmlentities se convierten todos los caractéres a su correspondiente en HTML.

 

$texto = htmlspecialchars($texto, ENT_QUOTES);

Con htmlspecialchars se convierten algunos caractéres a su correspondiente en HTML.

- & (et) se convierte en '&'
- " (comillas dobles) se convierte en '"' cuando ENT_NOQUOTES no está establecido.
- ' (comilla simple) se convierte en ''' (o ') sólo cuando ENT_QUOTES está establecido.
- < (menor que) se convierte en '&lt;'
- > (mayor que) se convierte en '&gt;'

 Border Radius

border-radius es una nueva propiedad en CSS3. Nos permite crear bordes redondeados, por ejemplo para crear nuestros propios botones sin necesidad de imagenes y a traves de CSS.

Se puede establecer el grado de curva de cada una de las esquinas a través de px o en %.

 

Por ejemplo es posible hacer un círculo si tenemos un bloque cuadrado (mismo alto y ancho) asignadole un border-radius: 50%.

También se puede poner solo 1-2 esquinas redondeadas. Al final es posible conseguir muchas formas.

 

 

Página de generar CSS para border-radius: http://border-radius.com/

Página donde ver ejemplos de border-radius: http://www.css3.info/preview/rounded-border/

 Caja con texto al pasar el cursor por encima de un texto

Para incluir más información, sin sobrecargar la página podemos utilizar un efecto de este tipo.

Se puede ver el ejemplo en www.misecretopousada.com

<script type="text/javascript">
    var ns4 = (document.layers)? true:false
    var ie4 = (document.all)? true:false
    var ns6 = (document.getElementById && !document.all) ? true: false;
    var coorX, coorY;

    if (ns6) document.addEventListener("mousemove", mouseMove, true)
    if (ns4) {document.captureEvents(Event.MOUSEMOVE); document.mousemove = mouseMove;}

    function mouseMove(e)    {
         if (ns4||ns6)    {
              coorX = e.pageX;
              coorY = e.pageY;
         }
         if (ie4)    {
              coorX = event.x;
              coorY = event.y;
         }
         coorX += document.body.scrollLeft;
         coorY += document.body.scrollTop;
         return true;
    }

    function ini()    {
         if (ie4)    document.body.onmousemove = mouseMove;
    }

    function mostrar(dato)    {
         with(document.getElementById("ayuda"))    {
              style.top = coorY + 10;
              style.left = coorX + 10;
              style.visibility = "visible";
              innerHTML = dato;
         }
    }

    function ocultar()    {
         document.getElementById("ayuda").style.visibility = "hidden";
    }

    function mover()    {
         with(document.getElementById("ayuda"))    {
              style.top = coorY + 10;
              style.left = coorX + 10;
         }
    }

</script>

<div>
    <span onmouseover="mostrar('Texto a mostrar')" onmousemove="mover()" onmouseout="ocultar()">Ver + info</span>
</div>
<div id="ayuda" style=" visibility:hidden; position:absolute;"></div>

 Código Javascript para hacer redirecciones

A través de javascript es posible redireccionar a cualquier URL, lo interesante en este caso es que puedes controlar cuando hacer esta redirección, al pasar un tiempo determinado, cuando se cumpla una condición, etc.

 

<script type="text/javascript">
    function redirect(){
        window.location = "http://www.tu-direccion.com/";
    }
</script>

<a onclik='redirect()'>Redirigir</a>

 Código para poner un contador en Javascript

Código sencillo para tener un contador de segundos en una página html.

Añadimos esto en el header, etiquetado como javascript

var cont = 0;
function cuentaAtras(){
    if(cont >= 0){
        if(cont < 10){
            cont = '0' + cont;
        }
        document.getElementById('contador').innerHTML = cont;
        cont++;
        setTimeout('cuentaAtras()',1000);
    }