Apuntes en la web

Mostrar página en una paginación

2010-11-11T13:38:00.002+01:00

En el este artículos mostramos un algoritmo PHP para mostrar el número de paginas en una paginación.

Ejemplo


 
 [CÓDIGO PHP]


$pagina=(isset($_GET['pag']))?$_GET['pag']:15;
$paginas=(isset($_GET['total']))?$_GET['total']:50;
$pagVisible =(isset($_GET['visible']))?$_GET['visible']:4; /* Ademas de la pagina actual


/* PRIMERA PÁGINA */
if ($pagina > ($pagVisible/2)+1) echo "<a href='?pag=1' >    1   > /a<  ... "; 

for($p=1;$p <= $paginas;$p++) {
 if ($pagina-1> $pagVisible/2)  {
  if ($pagina >  ($paginas - $pagVisible/2) && ($p <  $paginas -$pagVisible))  continue;
  if ($p <  ($pagina-$pagVisible/2) && ($paginas > =($pagina+$pagVisible/2))) continue; 
  if ($p>  ($pagina+$pagVisible/2)) break;
 } else {
  if ($p >  $pagVisible+1) break;
 }
  echo ($p==$pagina)?"<b>   ".$p." </b>   ":"<a href='?pag=".($p)."'> $p </a> ";

} 
/* FIN DEL BUCLE FOR */

/* ÚLTIMA PÁGINA */
if ($pagina< $paginas-($pagVisible/2)) echo " .... <a href='?pag=".($paginas)."'> $paginas </a> ";

25 herramientas para el diseño web

2010-10-21T13:46:00.002+02:00

Hoy mostramos un listado con 25 herramientas para el diseño web que van desde plugin firefox a herramientas online

http://pelfusion.com/tools/25-important-web-design-tools/

CSS3 Generator

2010-10-20T20:57:00.001+02:00

Hoy les mostramos una interesante página para crear estilos CSS3

http://css3generator.com/

Nuevas propiedades en CSS 3

2010-10-18T10:41:00.002+02:00

Poco a poco CSS 3 se va convirtiendo en un realidad. Hemos encontrado una web con claro ejemplos sobres las nuevas propieda www.impressivewebs.com

En esta otra web encontramos utiles chuletas sobre CSS3 y HTML 5 http://www.webresourcesdepot.com/

HTML5 + CSS3 + Javascript: Cada vez más y mejor

2010-10-17T23:34:00.001+02:00

Google, Microsoft y Apple ya han hecho su apuesta: HTML5 + CSS3 + Javascript. ¿Qué significan estas siglas? Páginas web mucho más ricas, completas, interactivas e interesantes que las que se hacen hoy en día. Infinitas posibilidades con gráficos e imágenes vectoriales, fotos, vídeos y otros elementos.

Articulo completo en El Mundo

Desplazamiento animado en anclas de enlaces con jQuery

2010-10-15T17:00:00.002+02:00

En este artículo explico como animar los desplazamientos dentro de una misma página. Tan solo haría falta este sencillo script y cargar la libreria jQuery. En esta pagina poder ver un ejemplo de dicha animación

$(function(){

     $('a[href*=#]').click(function() {

     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
         && location.hostname == this.hostname) {

             var $target = $(this.hash);

             $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

             if ($target.length) {

                 var targetOffset = $target.offset().top;

                 $('html,body').animate({scrollTop: targetOffset}, 1000);

                 return false;

            }

       }

   });

});

10 Codigo jQuery

2010-09-21T19:33:00.005+02:00

10 Codigo jQuery

Añadir una clase css a un elemento

Una forma muy limpio para cambiar un elemento de apariencia es agregar una clase css, en vez de añadir los estilos en línea. Usando jQuery, esto es bastante fácil de hacer:

$('#midiv').addClass('miclase');

Quitar una clase css a un elemento

Es genial ser capaz de añadir algunas clases CSS, pero también tenemos que saber cómo eliminar las clases no deseados. La siguiente línea de código hará que:

$('#midiv').removeClass('miclase');

Comprar si un elemento tiene una determinada clase css

Si su aplicación o sitio suele agregar y quitar las clases a un elemento particular, puede ser muy útil para poder comprobar si un elemento tiene una cierta clase CSS

$(id).hasClass('miclase')

Cambiar hoja de estilos con jQuery

Como vimos en los ejemplos anteriores, agregando o quitando los estilos CSS a un elemento es muy sencilla, utilizando jQuery. Pero lo que si quiere eliminar completamente el documento de archivo css y adjuntar una hoja de estilo nuevo? Una buena noticia, es muy simple, así, como se muestra en el ejemplo siguiente:

$('link[media='screen']').attr('href', 'otroestilo.css');

Añadir código html a un elemento

Cuando tenga que añadir algo de HTML a un elemento, el método append () es un protector de la vida:

$('#midiv').append('voy a añadir todo este texto html');

Comprobar si existe un elemento

Cuando se trabaja con JavaScript, con frecuencia necesitamos para comprobar si un elemento existe o no. Usando jQuery y la propiedad length, es muy simple de hacer: Si la longitud == 0, no se utilizan elementos de la página.

if ($('img').length) {
    log('Si hay imagenes');
} else {
    log('No hay imagenes');
}

Obtener el elemento primario de un elemento

Al trabajar con el DOM, es posible que necesite saber qué elemento es el padre directo de otro elemento. El más cercano () método le permitirá saber:

var id = $("button").closest("div").attr("id");

Obtener los hermanos de un elemento

la función siblings() es una herramienta muy útil para conseguir los hermanos de un elemento. Como se muestra a continuación, utilizando este método es muy simple:

$("div").siblings()

Quitar una opción de una lista de selección

Cuando se trabaja con listas de selección, es posible que desee actualizar el contenido de acuerdo con las acciones del usuario. Para eliminar una opción de una lista de selección, el siguiente código hará el truco:

$("#miselect option[value='2']").remove();

Accede a la opción seleccionada como texto

Muy útil cuando se necesita para comprobar rápidamente lo que un visitante seleccionados de su lista de selección.

$('#miselect :selected').text();

Aplicar un “efecto cebra” en las tablas

Cuando utilice tablas, es una buena idea, para facilitar la lectura, para dar un estilo diferente a una línea de cada dos. Usando jQuery, esto se puede hacer fácilmente, sin ningún tipo de código HTML adicional.

$("tr:odd").addClass("odd");

Contar los hijos de un elemento

Si deseas contar cuántos elementos son hijos de otro determinado elemento:

$("#midiv > div").length;

Top 10 Google Street View Photobombs

2010-09-21T19:32:00.001+02:00

Top 10 Google Street View Photobombs

Los vacios de google maps

2010-09-21T19:29:00.000+02:00

Cuarteles militares, centrales nucleares, edificios oficiales... los objetivos del pixel o el "capeado" de Google Maps son muy distintos aunque los motivos que están detras de la imagen borrosa son casi siempre la censura o salvaguardar la seguridad.

Los vacios en google maps

Forzar las descargar de archivos con PHP

2010-07-20T14:56:00.004+02:00

A veces cuando queremos mostrar los documentos , ya sean .doc, .pdf ... , queremos que aparezca el cuadro de diálogo de abrir o guardar en vez de que se nos abra en otra ventanda. Para ello usamos el siguiente código para forzar la descarga.

CODIGO PHP [DOCUMENTO DESCARGAR.PHP]

 <?php
    $f=$_GET["f"];
 $f="RUTA DEL DOCUMENTO".$f;
    header("Content-type: application/octet-stream");
    header("Content-Disposition: attachment; filename=\"$f\"\n");
    $fp=fopen("$f", "r");
    fpassthru($fp);
?>

CODIGO HTML


 <a href="descargar.php?f= <?php echo $row['documento'] ?>" class="textogris"   style="float:right" target="_blank">Ver documento</a>

SEO: el arte de posicionarse en Internet

2010-07-08T21:50:00.002+02:00

El SEO y sus especialistas se han convertido en un objeto de deseo cada vez más perseguido por las empresas con intereses en la Red

Entre las palabras que Internet ha traído a nuestro vocabulario cotidiano, ´SEO´ es sin duda una de las más populares y también de las más enigmáticas. El misterio que este acrónimo de tres letras encierra es la expresión “Search Engine Optimization” que podría traducirse como “Optimización para motores de búsqueda”. Básicamente, SEO es la forma en la que conseguimos que una página web alcance la mayor relevancia posible a ojos de un buscador (Google, Yahoo, Bing, etc.) de tal modo que ese buscador muestre esa página en los primeros lugares cuando se hace una búsqueda que guarda relación temática con los contenidos de esa web. La relevancia con respecto a un buscador no es cuestión baladí para un sitio web: condiciona gran parte de su éxito o de su fracaso. De ahí que el SEO y sus especialistas se hayan convertido en un objeto de deseo cada vez más perseguido por las empresas con intereses en la Red.

Artículo de Levante:
SEO: el arte de posicionarse en Internet

Pantalla completa con javascript

2010-07-07T00:21:00.004+02:00

Abrir una ventana en Pantalla Completa.

<a href="javascript:void(0);" 
onClick="window.open('http://www.apuntesenlaweb.blogspot.com/', '', 'fullscreen=yes, scrollbars=auto');"&t;Abrir una ventana en Pantalla Completa.</a&t;

Modificar dimensiones de la página

2010-06-08T11:42:00.003+02:00

Para aumentar TODAS las dimensiones de una pagina de todos debe estar en em nada en px, después debemos modificar mediante javascript el valor de la fuente del body, en resto de dimensiones heredaran de estan



<a href="#" class="aumFuente" title="Aumentar">+</a>

Creamos una funcion con jQuery que multiplique el valor por 1,1 hasta un máximo de 18



$(".aumFuente").click(function(){
        var tamActual = $("body").css("font-size");
 var tamActualNum = parseFloat(tamActual, 10);
 //18 es el tamaño máximo
 if (tamActualNum>18) nuevaFuente=tamActualNum;
 else nuevaFuente = tamActualNum*1.1;
 
 $("body").css("font-size", nuevaFuente);
         //Se guarda en tamaño en un cookie
 SetCookie ("letra", parseFloat(nuevaFuente)) 
 return false;
});

Para mantener el valor para la próxima visita lo guardamos en una cookie


function SetCookie (name, value) {
 // nmero de parmetros variable.
 var argv = SetCookie.arguments;
 var argc = SetCookie.arguments.length;
 // asociacin de parmetros a los campos cookie. 
 var expires = (argc > 2) ? argv[2] : null
 var path = (argc > 3) ? argv[3] : null
 var domain = (argc > 4) ? argv[4] : null
 var secure = (argc > 5) ? argv[5] : false
 // asignacin de la propiedad tras la codificacin URL

 document.cookie = name + "=" + escape(value)
  
}

Transpariencias con CSS

2010-06-01T14:54:00.001+02:00


.transpariencia{
    filter:alpha(opacity=70); /* IE */
    -moz-opacity:0.7; /* Firefox, Opera, ... */
    opacity: 0.7; /* CSS 3*/
}

Transpariencia al 70% con los distintos navegadores.

Detectar ancla en la url con javascript

2010-05-25T19:33:00.003+02:00

La propiedad document.location.hash. obtiene la parte de la url después de #. Con esto podemos obtener el nombre de un elemento el cual podemos modificar con javascript


< script languaje = "javascript" > 
// verificar si viene un ancla 
if (document.location.hash != "") 
{    
 var elemento = document.location.hash.replace("#",""); 
 document.getElementById(elemento). style.color= '#fff'; 
}

En este caso el elemento que pasemos por la URL le cambiamos el color

Activar todos los checkbox de una página

2010-05-18T00:29:00.005+02:00


<a href="#" onclick="activar(1); return false;" >Marcar todos</a> /
<a href="#" onclick="activar(0);return false;" >Desmarcar todos</a>


Javascript
function activar(activado){

var todos=document.getElementsByTagName("input");
var a=new Array();
 
for(x=0;x<todos.length;x++){ 
   if(document.getElementsByTagName("input")[i].type == "checkbox") {
      if(todos[x].type == "checkbox"){
 todos[x].checked=activado
      }
   }
}>



Función para crear thumbnail en php
2010-05-17T19:04:00.005+02:00
Función para crear thumbnail con las dimensiones deseadas en PHP

function subirImagenRecortada($imagen,$rutaImg,$nombre,$alturaMaxima,$anchuraMaxima){
$varrand = $nombre;   //nombre aleatorio
$varallw = array("image/jpeg","image/pjpeg");  //tipo de imagnes
if (is_uploaded_file($imagen["tmp_name"])) { 
     $varname = $imagen['name']; 
     $vartemp = $imagen['tmp_name']; 
     $vartype = $imagen['type']; 
     $ext = strrchr($imagen['name'],'.');  
     //Comprueba que el archivos subir es JPG
     if (in_array($vartype, $varallw) && $varname != "") { 
     $varname = "p_".$varrand.$ext; 
     $varpath=$rutaImg;
     if (copy($vartemp, $rutaImg.$varname)) { 
 $filename = $varpath.$varname;
 list($width, $height) = getimagesize($filename);
   
    
 /* Recortar con lado de 90 px */
 $ancho=$anchuraMaxima;
 $alto=$alturaMaxima;
 list($width, $height) = getimagesize($filename);
 $diferencia_ancho = $width/$ancho;
 $diferencia_alto = $height/$alto;

 if($diferencia_ancho < $diferencia_alto) {
     $nuevo_ancho = $ancho;
     $prop = $nuevo_ancho/$width;
     $nuevo_alto = round($height*$prop);
     $dist_x = 0;
     $dist_y = ($alto-$nuevo_alto)/2;
 }else {
     $nuevo_alto = $alto;
     $prop = $nuevo_alto/$height;
     $nuevo_ancho = round($width*$prop);
     $dist_x = ($ancho-$nuevo_ancho)/2;
     $dist_y = 0;
 }
  $thumb = imagecreatetruecolor($ancho, $alto);
 imagealphablending($thumb, false);
 $source = imagecreatefromjpeg($filename);
 imagecopyresampled($thumb, $source, $dist_x, $dist_y, 0, 0, $nuevo_ancho, $nuevo_alto, $width, $height);
 imagejpeg($thumb, $varpath.$varname);
 imagedestroy($thumb);
   
 return $varname;
     } else { 
          echo  "Error al subir el archivo"; 
        } 
   }else { 
   echo  "No se puede subir ese archivo"; 
   }
}
return $nameold;
}





Cambiar hoja de estilos sin refrescar
2010-05-13T17:23:00.008+02:00
Para poder cambiar la hoja de estilo lo primero es indica varias hojas de estilos alternitivas, para se una hoja de estilo alternativa debe tener un title y el atributo rel="stylesheet"


<link  href="css/estilos.css" rel="stylesheet" type="text/css"/>
<link  href="css/blanco.css" rel="stylesheet" type="text/css" title="hojaBlanco"/> 
<link  href="css/negro.css" rel="stylesheet" type="text/css" title="hojaNegro"/>

Después tenemos que llamar a la función activarCSS

<a href="#" onClick="activarCSS('hojaBlanco');return false" id="btnBlanco">

En el javascript se debe incluir la función activarCSS

function activarCSS(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
       if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
            a.disabled = true;
     if(a.getAttribute("title") == title) a.disabled = false;
 }
    }
return false;
}
  



Chuleta MySQL
2010-05-05T16:57:00.002+02:00
Una chuleta MySQL con los tipos de datos de MySQL y las funciones más comunes en PHP


HR, linea con color
2010-05-04T01:45:00.013+02:00
El elemento HTML HR no se muestra en todos los navegadores igual para conseguir un resultado idéntico debemos obviar la height y utilizar el color en el borde como mostramos a continuación. Se ve perfectamente en todos los navegadores

<hr style="border:none;border-top: 1px solid rgb(118, 169, 72); height: 0px; margin: 0pt auto; width: 90%;">





Problemas de cache con Internet Explorer
2010-05-04T01:01:00.004+02:00
Un problema clásico de Intenet Explorer es que cuando realizamos una petición AJAX, aunque se modifique los datos en la base de datos, el navegador siempre nos muestra la misma página. Esto es debido a que Internet Explorer tiene una caché interna que no se carga como debiera.

Vamos a mostrar dos posibles soluciones un en la lado de cliente y en otro en lado del servidor


header('Expires: Sun, 19 Nov 1978 05:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');

 
Con estas lineas no aseguramos que no se guarde la cache y que en cada petición tenga que pedir los datos.

 
var num=Math.random();
ajax=objetoAjax();
ajax.open("GET", "archivo.php?aleatorio="+aleatorio, true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4)
{ 
     document.getElementById("resultado").innerHTML=ajax.responseText;
} 
}
ajax.send(null);


Otro posible solución es enviar una variable con un dato diferente cada vez ya sea con random o la hora actual